/*
 * milk-dist theme overrides — extends Lumo.
 *
 * Place global CSS variables and component overrides here. Per
 * `framework-conventions.md` §4 (Lumo theme guidelines):
 *   - use Lumo space/color tokens via CSS variables
 *   - never hardcode hex colours outside this file
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Sarabun:wght@400;500;600;700&display=swap');

/* Sarabun first — it's a Thai-designed font with correct ascent metrics
   for stacked diacritics (e.g. "ซื้อ" with vowel + tone mark). Inter's
   Thai support clips above-baseline marks at small sizes. Sarabun also
   covers Latin glyphs cleanly, so we don't need a unicode-range split. */
html {
    --lumo-font-family: 'Sarabun', 'Noto Sans Thai', 'Inter', system-ui, -apple-system, sans-serif;
}

/* =========================================================================
 * Side navigation refinements — tighter, lighter aesthetic per the hi-fi.
 * ========================================================================= */

/* Section header (eyebrow): small, uppercase, letter-spaced, muted. */
vaadin-side-nav::part(label) {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lumo-tertiary-text-color);
    padding-inline-start: var(--lumo-space-m);
    margin-bottom: var(--lumo-space-xs);
}

/* Item rows: 14px text with generous vertical padding so Thai vowels/tone
   marks above the baseline don't get clipped.
   Vaadin sets `overflow: hidden` on `::part(link)` for ellipsis truncation,
   which crops the top of Thai ascenders (สระ-อิ, สระ-อี, ไม้-โท etc.) even
   with line-height: 1.7. We override to `overflow: visible` — labels here
   are short ("การเบิก", "บัญชีรายวัน" etc.) and don't need ellipsis. */
/* Force overflow visible on every level — host, shadow children, link.
   `vaadin-side-nav` wraps items and may also have overflow: hidden. */
vaadin-side-nav,
vaadin-side-nav-item,
vaadin-side-nav-item *,
vaadin-side-nav-item::part(link) {
    overflow: visible !important;
}

/* Line-height 1.8 (25.2px line-box for 14px text) — the stacked Thai
   diacritics in "ซื้อ" / "สั่ง" need this much vertical room WITHIN the
   line-box to render without clipping, because Vaadin's internal CSS
   uses cascade layers and our overflow:visible overrides lose to it.
   1.6 was too tight (cropped); 2.0 was too loose. 1.8 is the floor. */
vaadin-side-nav-item::part(link) {
    font-size: 14px !important;
    line-height: 1.8 !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    padding-inline-start: var(--lumo-space-m) !important;
    padding-inline-end: var(--lumo-space-m) !important;
    min-height: 34px !important;
    box-sizing: border-box !important;
}

/* Smaller, lighter icons (18px) with muted secondary color. */
vaadin-side-nav-item {
    --vaadin-icon-size: 18px;
}
vaadin-side-nav-item vaadin-icon {
    color: var(--lumo-secondary-text-color);
    margin-inline-end: var(--lumo-space-s);
}

/* Active route: primary-blue text + icon, light primary tint background.
   The 3px primary-blue left accent comes for free from Vaadin's defaults
   when `active` attribute is set. */
vaadin-side-nav-item[active]::part(link) {
    color: var(--lumo-primary-text-color);
    font-weight: 500;
}
vaadin-side-nav-item[active] vaadin-icon {
    color: var(--lumo-primary-text-color);
}

/* =========================================================================
 * Rate-history grid — superseded rows render muted + italic so the operator
 * can tell at a glance which rows are corrections vs. live history. The
 * tooltip on the status badge surfaces the correction reason on hover.
 * ========================================================================= */

/* `::part()` takes a `<custom-ident>` token (no `.`); the selector matches
   the part name from `setPartNameGenerator` directly. The Grid's built-in
   `row` part is automatically combined by the component. */
vaadin-grid::part(rate-history-superseded) {
    color: var(--lumo-secondary-text-color);
    font-style: italic;
}