/* ==========================================================================
   Meshware Brand Stylesheet
   Argyle-mesh identity: greens and green-cast greys (rebrand 2026-06)
   ========================================================================== */

/* --- Google Fonts --------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;700&display=swap');

/* --- Brand Design Tokens -------------------------------------------------- */
:root {
    /* Greens */
    --mw-mint:      #95D5B2;
    --mw-fern:      #40916C;
    --mw-pine:      #2D6A4F;
    --mw-forest:    #1B4332;
    --mw-olive:     #8A9A5B;
    --mw-mint-wash: #D8F3DC;

    /* Greys (green-cast) */
    --mw-white:     #FFFFFF;
    --mw-black:     #000000;  /* true black — for opaque media/video surfaces (remote-desktop canvas), not chrome */
    --mw-mist:      #EEF2EC;
    --mw-canvas:    #F4F7F2;  /* page canvas behind white cards — keep in sync with MeshwareTheme.Background */
    --mw-sage:      #9DB3A4;
    --mw-stone:     #7A847B;
    --mw-charcoal:  #252B26;
    --mw-border:    #E1E7DE;  /* hairline card/panel border — green-cast grey, standardized from D8DFD7/C2CCC0 */

    /* Deepened forest — the dark end-stop of the login gradient */
    --mw-forest-deep: #102A1F;

    /* Semantic validation red — Blazor's raw <input> .invalid / .validation-message states (not brand green) */
    --mw-error:     #e50000;

    /* Attention tints (#1803). The severity CHIPS keep MudBlazor's own Error/Warning palette via
       IncidentBadge/HealthBadge — these are the low-saturation SURFACE washes and rule accents behind a
       kiosk that wants an operator: an index row, the detail-page attention strip. Kept pale on purpose so a
       tinted row still reads as a table row and its text keeps contrast; the chip is what carries the
       severity, the wash only draws the eye. A warning amber had no token at all before this (only
       --mw-error existed), which is why the tint could not be written without a raw hex — banned by
       StyleTokenConventionTests and stylelint alike. */
    --mw-warning:        #b26a00;  /* amber text/accent — darker than the chip so it passes on a pale wash */
    --mw-error-wash:     #FDECEC;  /* critical row/panel background */
    --mw-warning-wash:   #FBF1DF;  /* warning row/panel background */

    /* Tag-category palette. A categorical scale: kept visually DISTINCT so tag chips stay
       distinguishable at a glance. Consumed by the .tag-* rules in app.css. */
    --mw-tag-geography: #6f42c1;  /* region / timezone / market / state       — purple */
    --mw-tag-business:  #0d6efd;  /* retailer / contract-type / customer-seg   — blue   */
    --mw-tag-priority:  #dc3545;  /* priority                                  — red    */
    --mw-tag-service:   #0dcaf0;  /* service-route / service-frequency         — cyan   */
    --mw-tag-facility:  #198754;  /* location-type / access-type               — green  */
    --mw-tag-analytics: #6610f2;  /* usage-pattern / reporting-group           — indigo */
    --mw-tag-default:   #6c757d;  /* fallback for custom / unknown categories  — grey   */

    /* Semantic aliases */
    --mw-primary:   var(--mw-forest);
    --mw-secondary: var(--mw-olive);
    --mw-accent:    var(--mw-fern);
    --mw-success:   var(--mw-fern);
    --mw-highlight: var(--mw-mint);
    --mw-info:      var(--mw-mint-wash);
    --mw-muted:     var(--mw-stone);

    /* Typography */
    --mw-font-display:  'Outfit', sans-serif;
    --mw-font-body:     'Inter', sans-serif;
    --mw-font-logo:     'Space Grotesk', sans-serif;
    --mw-font-mono:     'Consolas', 'Cascadia Mono', 'Fira Code', monospace;
}

/* --- Base Typography ------------------------------------------------------ */
html, body {
    font-family: var(--mw-font-body);
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--mw-charcoal);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--mw-font-display);
    font-weight: 500;
    letter-spacing: 0.01em;
}

strong, b {
    font-family: var(--mw-font-body);
    font-weight: 700;
    letter-spacing: 0;
}

/* --- Surfaces & depth ----------------------------------------------------- */
/* Cards are authored `Elevation="0" Outlined="true"` app-wide, so a lone hairline was the only thing
   separating them from the page. On the tinted canvas, give every card (and outlined paper) a soft
   green-cast shadow + a firmer border so it reads as a surface that sits ABOVE the page. One soft
   shadow layer (not two): at our density a double drop-shadow just added visual weight per card without
   improving the figure/ground read — the firmer border already lifts the card off the canvas. */
.mud-card,
.mud-paper.mud-paper-outlined {
    border-color: var(--mw-border);
    box-shadow: 0 1px 2px rgba(37, 43, 38, 0.06);
}

/* --- Card density --------------------------------------------------------- */
/* MudBlazor's default card chrome is generous: 16px padding on the header AND all four sides of the
   content, which — stacked down a tab-heavy detail page — is where most of the "cards take too much
   space" pain actually comes from (the card concept is fine; the chrome is the tax). Tighten it once,
   here, so EVERY card densifies whether or not it has been migrated to the shared SectionCard wrapper.
   Moderate, not spreadsheet-tight: the header stays a readable subtitle, just on a shorter row.
   NOTE: `.mud-card-header-actions` ships a -8px margin (the mt-2/me-2 trap, #1079); the reduced header
   padding here keeps that offset consistent — bordered header controls still carry their mt-2 me-2. */
.mud-card-header {
    border-bottom: 1px solid var(--mw-mist);   /* separate the title from the body */
}

/* MudBlazor sets card padding via COMPOUND class selectors — `.mud-card-header.mud-card-header-padding`
   and `.mud-card-content.mud-card-content-padding` (both specificity 0,2,0), and MudBlazor.min.css loads
   after this file, so a 0,2,0 rule here only TIES and loses on source order. The card element carries
   `mud-paper mud-card`, so qualifying the parent (`.mud-paper.mud-card > .mud-card-header`, specificity
   0,3,0) wins outright without an `!important` and without depending on MudBlazor's padding-class names.
   MudCardHeader / MudCardContent are always direct children of MudCard. Verified against MudBlazor 9.5.0
   (Directory.Packages.props); a major bump should re-confirm both the DOM nesting and the padding classes. */
.mud-paper.mud-card > .mud-card-header {
    padding: 8px 16px;                          /* was 16px — the header row is the biggest single win */
}

.mud-paper.mud-card > .mud-card-content {
    padding: 12px 16px;                         /* was 16px all round */
}

/* Scope the header title down a touch (card headers only — does not touch subtitle1 elsewhere) so the
   shorter header row reads as deliberate rather than a clipped full-size title. */
.mud-card-header .mud-typography-subtitle1 {
    font-size: 0.92rem;
    line-height: 1.4;
}

/* --- Tabs: wrap instead of scroll (MudTabs) ------------------------------- */
/* MudTabs defaults to a single scrolling row (prev/next arrows) and each tab has a ~160px min-width, so a
   page with many tabs (e.g. Station Details, 8 tabs) either hides tabs behind arrows or overflows. Instead:
   let tabs hug their content and WRAP to another row when they don't fit — all tabs stay visible and nothing
   scrolls horizontally. The `!important`s override MudBlazor's own rules + the inline transform it uses for
   its scroll mechanism. The active-tab underline replaces MudBlazor's absolutely-positioned slider (which is
   measured for a single row and would land wrong once tabs wrap).
   NOTE: this reaches into MudBlazor's internal tab class names — verified against MudBlazor 9.5.0 (see
   Directory.Packages.props). If a MudBlazor major bump renames these (arrows reappear / underline vanishes),
   re-check the selectors against the new DOM. Applied globally on purpose: a scrolling row that hides tabs is
   never what we want for our tab-heavy detail pages. To opt one tab strip back into MudBlazor's default
   scroll, wrap it and re-assert `overflow`/`transform`/`flex-wrap` on that wrapper's descendants. */
.mud-tabs-tabbar { height: auto !important; }

.mud-tabs-tabbar-inner,
.mud-tabs-tabbar-content {
    overflow: visible !important;
    transform: none !important;
    height: auto !important;
}

.mud-tabs-tabbar-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    overflow: visible !important;
    transform: none !important;
    height: auto !important;
    width: 100% !important;
}

.mud-tabs-scroll-button { display: none !important; }   /* no prev/next arrows — the tabs wrap instead */
.mud-tab-slider { display: none !important; }           /* replaced by the active-tab underline below */

.mud-tabs-tabbar .mud-tab {
    flex: 0 0 auto !important;   /* hug content so short tabs pack into one row on wide screens */
    min-width: 0 !important;
}

/* A tab's count badge (MudTabPanel BadgeData — the Incidents tab, #1802) sits INLINE after the label instead
   of floating over the tab's top-right corner.

   MudBlazor positions it absolutely and lets it overhang the label, which works on a card or an icon but not
   here: `.mud-tab` is `overflow: hidden`, so the overhanging part was simply cut off — the badge rendered as a
   sliced-off red sliver. Padding the tab cannot fix that, because the overhang grows with the digit count (4px
   at "1", 8px at "12", 16px at "123"), so any fixed value is a guess that breaks at some number. Letting the
   badge escape with `overflow: visible` uncuts it but then overlaps the NEXT tab's label instead.

   Making it part of the tab's own flow removes the whole class of problem: the tab grows to fit whatever the
   count is, nothing overlaps, and nothing is ever clipped. It also matches how the nav-row badge already reads
   (`.mw-nav-badge`) — a pill after the word, not a sticker on top of it.

   Reaches into MudBlazor's internal badge class names, same caveat as the tab rules above: verified against
   MudBlazor 9.5.0. If a major bump renames these, the symptom is the badge floating/clipping again. */
.mud-tabs-tabbar .mud-tab-badge {
    display: inline-flex;
    align-items: center;
}

.mud-tabs-tabbar .mud-tab-badge > .mud-badge-wrapper,
.mud-tabs-tabbar .mud-tab-badge .mud-badge {
    position: static !important;   /* beats MudBlazor's absolute placement + its corner transform */
    transform: none !important;
}

.mud-tabs-tabbar .mud-tab-badge .mud-badge {
    margin-left: 6px;   /* the gap between the label and its count */
}

.mud-tabs-tabbar .mud-tab.mud-tab-active {
    box-shadow: inset 0 -2px 0 0 var(--mw-fern);
    color: var(--mw-forest);
}