/* ── POWA type foundation ─────────────────────────────────────────────── */
@font-face {
    font-family: 'Hanken Grotesk';
    src: url('/fonts/hanken-grotesk.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Sans';
    src: url('/fonts/ibm-plex-sans.woff2') format('woff2');
    font-weight: 100 700;
    font-style: normal;
    font-display: swap;
}

html, body {
    font-family: 'IBM Plex Sans', 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Numeric columns line up and read as data. */
.mud-table-cell.num, .powa-num { font-variant-numeric: tabular-nums; }

/* Tighter rows on the shared PowaDataGrid (matches the internal app). */
.powa-tight-grid .mud-table-cell { padding-top: 2px; padding-bottom: 2px; white-space: nowrap; }

/* Collapse the empty MudDataGrid child-content row that PowaDataGrid renders between every data row
   (a ~5px gap). A real (expanded) child row isn't `:empty`, so this only hides the unwanted spacers. */
.mud-table-child-content:empty { display: none; }

/* ── Drawer nav: selected item legible on the dark drawer ─────────────── */
/* MudBlazor tints the active nav link with the primary palette, which is a dark
   teal that nearly vanishes on the always-dark drawer. Brighten the selected
   label/icon and mark it with the marigold accent so it reads in both modes.
   MudBlazor's own rule (specificity 0,5,0) needs !important to lose reliably. */
.mud-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled),
.mud-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon {
    color: #FFFFFF !important;
}
.mud-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background-color: color-mix(in srgb, var(--mud-palette-tertiary) 18%, transparent);
    box-shadow: inset 3px 0 0 var(--mud-palette-tertiary);
}

/* ── Shape & surface polish ───────────────────────────────────────────── */
.mud-paper, .mud-card { border-radius: 12px; }
.mud-table-container .mud-table-root { font-variant-numeric: tabular-nums; }

/* App bar: a hair more presence than a hairline. */
.mud-appbar { box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 2px 10px rgba(30,78,140,0.06); }

/* Accent focus ring for keyboard users. */
a:focus-visible, button:focus-visible, .mud-button-root:focus-visible {
    outline: 2px solid var(--mud-palette-tertiary);
    outline-offset: 2px;
}

/* Quieter, rounder scrollbars. */
* { scrollbar-width: thin; scrollbar-color: var(--mud-palette-lines-inputs) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--mud-palette-lines-inputs); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--mud-palette-action-default); background-clip: content-box; }

/* Horizontal-scroll containment for wide tables/grids (page never scrolls sideways). */
.powa-scroll-x { overflow-x: auto; width: 100%; }

/* ── Status pills ─────────────────────────────────────────────────────── */
.powa-pill {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.12rem 0.6rem; border-radius: 999px;
    font-size: 0.72rem; font-weight: 600; line-height: 1.55; white-space: nowrap;
    border: 1px solid transparent;
}
.powa-pill .mud-icon-root { font-size: 0.95rem; }
.powa-pill.tone-neutral { color: var(--mud-palette-text-secondary); background: color-mix(in srgb, var(--mud-palette-text-secondary) 12%, transparent); }
.powa-pill.tone-primary { color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); }
.powa-pill.tone-info    { color: var(--mud-palette-info);    background: color-mix(in srgb, var(--mud-palette-info) 13%, transparent); }
.powa-pill.tone-success { color: var(--mud-palette-success); background: color-mix(in srgb, var(--mud-palette-success) 15%, transparent); }
.powa-pill.tone-warning { color: var(--mud-palette-warning); background: color-mix(in srgb, var(--mud-palette-warning) 16%, transparent); }
.powa-pill.tone-error   { color: var(--mud-palette-error);   background: color-mix(in srgb, var(--mud-palette-error) 14%, transparent); }

/* KPI stat tile icon chip. */
.powa-stat-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 12px; flex: none;
}

/* ── Branded auth (login / register) ──────────────────────────────────── */
.powa-auth-wrap {
    min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem;
    /* Branded dark teal-navy backdrop (POWA dark-palette tones): a deep diagonal wash, a teal glow top-left
       and a faint marigold accent bottom-right, so the sign-in card floats instead of sitting on white. */
    background:
        radial-gradient(900px 520px at 14% 10%, color-mix(in srgb, #2B6CB0 42%, transparent), transparent 62%),
        radial-gradient(760px 520px at 88% 92%, color-mix(in srgb, #E7A500 15%, transparent), transparent 60%),
        linear-gradient(140deg, #0A0F14 0%, #0F1E33 44%, #1E4E8C 100%);
}
.powa-auth-card {
    width: 100%; max-width: 440px; border-radius: 18px; overflow: hidden;
    box-shadow: 0 24px 60px -22px rgba(0, 0, 0, 0.6);
}
.powa-auth-brand {
    padding: 1.75rem 2rem; color: #F2F5FA;
    background: linear-gradient(135deg, var(--mud-palette-primary), color-mix(in srgb, var(--mud-palette-primary) 62%, #000));
}
/* Client group-brand logos (CJ / Victory Lab / Senqu), white strip under the brand band so the
   white-background logo image reads cleanly regardless of theme. */
.powa-auth-logos { background: #fff; padding: 1rem 1.5rem; display: flex; justify-content: center; }
.powa-auth-logos img { width: 100%; max-width: 320px; height: auto; display: block; }

/* ── Error bar ────────────────────────────────────────────────────────── */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--mud-palette-error);
    color: #fff;
    padding: 0.6rem 1.25rem;
    box-shadow: 0 -1px 8px rgba(0,0,0,0.25);
    z-index: 1100;
}
#blazor-error-ui .dismiss { cursor: pointer; float: right; }

/* ── Native login inputs (styled to match MudBlazor) ──────────────────── */
.powa-login-form { display: flex; flex-direction: column; gap: 0.15rem; }
.powa-label { font-size: 0.78rem; font-weight: 600; color: var(--mud-palette-text-secondary); margin: 0.65rem 0 0.25rem; }
.powa-input {
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--mud-palette-lines-inputs, #c4c4c4);
    border-radius: 10px;
    font-size: 0.95rem;
    font-family: inherit;
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary, #000);
    transition: border-color .15s, box-shadow .15s;
}
.powa-input:focus {
    outline: none;
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
}

/* ── A constraint the user must not skim past (the ETA-week delivery rule) ──── */
.powa-note-strict { color: var(--mud-palette-error); font-weight: 700; }

/* ── Phone (≤600px): grids fall into MudBlazor's stacked card mode (.mud-xs-table) ──────── */
@media (max-width: 600px) {
    /* Values must wrap inside the label/value card rows — the desktop nowrap clipped them
       off-screen. STACKED mode only: a Breakpoint=None grid (packing details) deliberately keeps
       its full desktop table shape and scrolls sideways in its powa-scroll-x wrapper instead. */
    .mud-xs-table .mud-table-cell {
        white-space: normal !important;
        min-width: 0;
        overflow-wrap: anywhere;
    }
    /* The card label keeps a fixed share so long values can't shove it (or themselves) off the edge. */
    .mud-xs-table .mud-table-cell:before { flex: 0 0 42%; max-width: 42%; overflow-wrap: normal; }

    /* Columns marked desktop-only. */
    .powa-hide-phone { display: none !important; }

    /* The inline calc(100vh - …) grid height assumes desktop chrome and leaves a cramped inner
       scroll box on a phone — let the page itself scroll instead. */
    .powa-tight-grid.mud-table { height: auto !important; }

    /* Toolbar: search + actions wrap instead of colliding; the filter-icon hint is desk advice. */
    .powa-tight-grid .mud-table-toolbar { flex-wrap: wrap; height: auto; min-height: 64px; row-gap: 4px; padding-bottom: 8px; }
    .powa-filter-hint { display: none; }

    /* A details grid NESTED inside a stacked outer grid: the outer .mud-xs-table's descendant
       selectors flex-stack the inner cells too (Breakpoint=None only stops the inner grid adding
       its own class). Inside the scroll wrapper, force the full table shape back — it then scrolls
       sideways, like the internal order-approvals expanded details. */
    .powa-scroll-x .mud-table-root .mud-table-head .mud-table-row { display: table-row !important; }
    .powa-scroll-x .mud-table-cell {
        display: table-cell !important;
        white-space: nowrap !important;
        text-align: revert !important;
        padding: 6px 10px !important;
        border-bottom: 1px solid var(--mud-palette-table-lines) !important;
        overflow-wrap: normal;
    }
    .powa-scroll-x .mud-table-cell::before { content: none !important; }
    .powa-scroll-x .mud-table-smalldevices-sortselect { display: none !important; }
}