/* ═══════════════════════════════════════════════════════════════════════════
   Responsive dashboard scale — shared breakpoint token system
   ───────────────────────────────────────────────────────────────────────────
   Four device tiers, matching the product's agreed breakpoints:

       Small  (mobile)    0px    –  599px    ← the bare :root block below
       Medium (tablet)    600px  – 1024px
       Large  (desktop)   1025px – 1440px
       XL     (wide)      1441px and above

   Every dashboard sizing decision — title font, banner padding/art size, KPI
   value/label type, grid column counts, button padding — is a `--rd-*` custom
   property redefined once per tier here, instead of being hardcoded per page.
   Pages consume the tokens through the `.rd-*` classes further down, so a
   dashboard "fits the screen the user logged in on" without any per-page
   media queries of its own.

   Mobile-first: the bare :root values ARE the Small tier, each larger tier
   only overrides what actually changes. Half-pixel max-widths (1024.98px)
   avoid the dead zone fractional-CSS-pixel viewports fall into between an
   integer max-width and the next min-width.

   Loaded from App.razor AFTER css/tailwind.css — see the note there on
   cascade order.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Small (mobile): 0–599px ─────────────────────────────────────────────── */
:root {
    /* page shell */
    --rd-page-px: 12px;
    --rd-page-py: 10px;
    --rd-gap: 10px;
    --rd-maxw: none;

    /* hero / banner */
    --rd-banner-px: 16px;
    --rd-banner-py: 14px;
    --rd-banner-r: 12px;
    --rd-art: 44px;          /* banner image / logo / emoji medallion */

    /* type scale */
    --rd-eyebrow-fs: 9.5px;
    --rd-title-fs: 17px;
    --rd-sub-fs: 11px;
    --rd-card-title-fs: 12.5px;
    --rd-body-fs: 12px;

    /* KPI cards */
    --rd-kpi-min: 100%;      /* 1 per row */
    --rd-kpi-pad: 12px 14px;
    --rd-kpi-val-fs: 18px;
    --rd-kpi-lbl-fs: 9px;
    --rd-kpi-sub-fs: 10px;
    --rd-kpi-icon: 32px;
    --rd-kpi-icon-fs: 15px;

    /* content grids */
    --rd-chart-min: 100%;    /* charts stack */
    --rd-panel-min: 100%;    /* side-by-side panels stack */
    --rd-ops-min: 100%;      /* ops / quick-link tiles */
    --rd-tile-min: 76px;     /* module shortcut tiles */

    /* 12-col widget canvas — collapses to a single column on phones */
    --rd-grid-cols: 1;
    --rd-span-sm: 1;
    --rd-span-md: 1;
    --rd-span-lg: 1;

    /* buttons */
    --rd-btn-fs: 12px;
    --rd-btn-py: 6px;
    --rd-btn-px: 12px;
    --rd-btn-r: 9px;
}

/* ── Medium (tablet): 600–1024px ─────────────────────────────────────────── */
@media (min-width: 600px) and (max-width: 1024.98px) {
    :root {
        --rd-page-px: 18px;
        --rd-page-py: 14px;
        --rd-gap: 12px;

        --rd-banner-px: 20px;
        --rd-banner-py: 18px;
        --rd-banner-r: 14px;
        --rd-art: 64px;

        --rd-eyebrow-fs: 10.5px;
        --rd-title-fs: 20px;
        --rd-sub-fs: 12px;
        --rd-card-title-fs: 13.5px;
        --rd-body-fs: 12.5px;

        --rd-kpi-min: 260px;   /* 2 across on a portrait tablet, 3 on a large landscape one */
        --rd-kpi-pad: 13px 15px;
        --rd-kpi-val-fs: 19px;
        --rd-kpi-lbl-fs: 9.5px;
        --rd-kpi-sub-fs: 10px;
        --rd-kpi-icon: 36px;
        --rd-kpi-icon-fs: 16px;

        --rd-chart-min: 100%;  /* one full-width chart at a time still reads better here */
        --rd-panel-min: 280px;
        --rd-ops-min: 185px;
        --rd-tile-min: 84px;

        --rd-grid-cols: 6;     /* half-width widgets */
        --rd-span-sm: 3;
        --rd-span-md: 6;
        --rd-span-lg: 6;

        --rd-btn-fs: 12.5px;
        --rd-btn-py: 7px;
        --rd-btn-px: 13px;
        --rd-btn-r: 10px;
    }
}

/* ── Large (desktop): 1025–1440px ────────────────────────────────────────── */
@media (min-width: 1025px) and (max-width: 1440.98px) {
    :root {
        --rd-page-px: 24px;
        --rd-page-py: 16px;
        --rd-gap: 14px;

        --rd-banner-px: 26px;
        --rd-banner-py: 22px;
        --rd-banner-r: 16px;
        --rd-art: 84px;

        --rd-eyebrow-fs: 11px;
        --rd-title-fs: 23px;
        --rd-sub-fs: 12.5px;
        --rd-card-title-fs: 14px;
        --rd-body-fs: 13px;

        /* 205px, not 230: at exactly 1025–1280 the dark sidebar eats ~300px, and a
           larger minimum drops a standard 4-KPI row onto two lines. */
        --rd-kpi-min: 205px;
        --rd-kpi-pad: 14px 16px;
        --rd-kpi-val-fs: 21px;
        --rd-kpi-lbl-fs: 10px;
        --rd-kpi-sub-fs: 10.5px;
        --rd-kpi-icon: 40px;
        --rd-kpi-icon-fs: 18px;

        --rd-chart-min: 340px;
        --rd-panel-min: 320px;
        --rd-ops-min: 200px;
        --rd-tile-min: 92px;

        --rd-grid-cols: 12;
        --rd-span-sm: 3;
        --rd-span-md: 6;
        --rd-span-lg: 9;

        --rd-btn-fs: 13px;
        --rd-btn-py: 7px;
        --rd-btn-px: 14px;
        --rd-btn-r: 10px;
    }
}

/* ── XL (wide/4K): 1441px and above ──────────────────────────────────────── */
@media (min-width: 1441px) {
    :root {
        --rd-page-px: 32px;
        --rd-page-py: 20px;
        --rd-gap: 18px;
        --rd-maxw: 1680px;     /* stop dashboards smearing across an ultrawide */

        --rd-banner-px: 34px;
        --rd-banner-py: 28px;
        --rd-banner-r: 20px;
        --rd-art: 104px;

        --rd-eyebrow-fs: 12px;
        --rd-title-fs: 27px;
        --rd-sub-fs: 14px;
        --rd-card-title-fs: 15.5px;
        --rd-body-fs: 14px;

        --rd-kpi-min: 260px;
        --rd-kpi-pad: 18px 20px;
        --rd-kpi-val-fs: 25px;
        --rd-kpi-lbl-fs: 11px;
        --rd-kpi-sub-fs: 11.5px;
        --rd-kpi-icon: 48px;
        --rd-kpi-icon-fs: 21px;

        --rd-chart-min: 440px;
        --rd-panel-min: 400px;
        --rd-ops-min: 230px;
        --rd-tile-min: 104px;

        --rd-grid-cols: 12;
        --rd-span-sm: 3;
        --rd-span-md: 6;
        --rd-span-lg: 9;

        --rd-btn-fs: 14px;
        --rd-btn-py: 9px;
        --rd-btn-px: 18px;
        --rd-btn-r: 11px;
    }
}

/* ═══ Shared dashboard building blocks ════════════════════════════════════ */

/* Page shell — replaces the hand-rolled `px-3 px-md-4 pt-2 pb-4` on dashboards. */
.rd-page {
    padding: var(--rd-page-py) var(--rd-page-px) calc(var(--rd-page-py) + 14px);
    max-width: var(--rd-maxw);
    margin-inline: auto;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

/* ── Hero banner ─────────────────────────────────────────────────────────── */
.rd-banner {
    border-radius: var(--rd-banner-r);
    padding: var(--rd-banner-py) var(--rd-banner-px);
    margin-bottom: var(--rd-gap);
    color: #fff;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--rd-gap);
}
.rd-banner-main { min-width: 0; flex: 1 1 260px; }
.rd-banner-eyebrow {
    font-size: var(--rd-eyebrow-fs);
    text-transform: uppercase;
    letter-spacing: .5px;
    opacity: .78;
    margin-bottom: 4px;
    font-weight: 700;
}
.rd-banner-title {
    font-size: var(--rd-title-fs);
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
    letter-spacing: -.3px;
}
.rd-banner-sub {
    font-size: var(--rd-sub-fs);
    opacity: .82;
    margin-top: 4px;
}

/* Banner artwork — an emoji medallion today, an <img> logo/illustration if a
   theme ever supplies one. Scales with the tier so it never crowds a phone
   header nor looks like a stray icon on a 4K screen. */
.rd-banner-art {
    width: var(--rd-art);
    height: var(--rd-art);
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--rd-art) * .5);
    line-height: 1;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .22);
}
.rd-banner-art img,
.rd-banner-art svg { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }

.rd-banner-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Decorative bokeh circles some heroes draw — scaled off --rd-art so they
   shrink with everything else rather than overflowing a phone hero. */
.rd-banner-blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(255, 255, 255, .07);
    width: calc(var(--rd-art) * 1.6);
    height: calc(var(--rd-art) * 1.6);
    top: calc(var(--rd-art) * -.5);
    right: calc(var(--rd-art) * -.2);
}
.rd-banner-blob.two {
    width: var(--rd-art);
    height: var(--rd-art);
    top: auto;
    right: calc(var(--rd-art) * 1.1);
    bottom: calc(var(--rd-art) * -.35);
    background: rgba(255, 255, 255, .05);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.rd-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: var(--rd-btn-r);
    padding: var(--rd-btn-py) var(--rd-btn-px);
    font-size: var(--rd-btn-fs);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    transition: transform .15s, opacity .15s;
}
.rd-btn:hover { transform: translateY(-1px); opacity: .92; }

/* ── Grids ───────────────────────────────────────────────────────────────── */
/* auto-fit + a per-tier minimum keeps a short KPI row from being stretched
   into awkward empty columns the way a fixed repeat(N) would. */
.rd-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--rd-kpi-min), 1fr));
    gap: var(--rd-gap);
    margin-bottom: var(--rd-gap);
}
.rd-chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--rd-chart-min), 1fr));
    gap: var(--rd-gap);
    margin-bottom: var(--rd-gap);
}
.rd-panel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--rd-panel-min), 1fr));
    gap: var(--rd-gap);
}
/* Ops/quick-link tiles — denser than a content panel, so they get their own minimum. */
.rd-ops-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--rd-ops-min), 1fr));
    gap: var(--rd-gap);
}
.rd-panel-grid > *, .rd-chart-grid > *, .rd-kpi-grid > *, .rd-ops-grid > * { min-width: 0; }

/* ── KPI card ────────────────────────────────────────────────────────────── */
.rd-kpi-card {
    background: var(--ek-card, #fff);
    border: 1px solid var(--ek-border, #e2e8f0);
    border-radius: var(--ek-r, 12px);
    padding: var(--rd-kpi-pad);
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.rd-kpi-icon {
    width: var(--rd-kpi-icon);
    height: var(--rd-kpi-icon);
    border-radius: calc(var(--rd-kpi-icon) * .28);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--rd-kpi-icon-fs);
}
.rd-kpi-body { min-width: 0; }
.rd-kpi-val {
    font-size: var(--rd-kpi-val-fs);
    font-weight: 900;
    color: #0f172a;
    line-height: 1.1;
    letter-spacing: -.3px;
    overflow-wrap: anywhere;
}
.rd-kpi-lbl {
    font-size: var(--rd-kpi-lbl-fs);
    color: #64748b;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-top: 2px;
}
.rd-kpi-sub { font-size: var(--rd-kpi-sub-fs); font-weight: 600; margin-top: 2px; }

/* ── Module shortcut strip ───────────────────────────────────────────────── */
.rd-tile-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 6px;
    margin-bottom: var(--rd-gap);
    scrollbar-width: thin;
}
.rd-tile-row::-webkit-scrollbar { height: 3px; }
.rd-tile-row::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 2px; }
.rd-tile {
    flex-shrink: 0;
    min-width: var(--rd-tile-min);
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 8px 9px;
    text-align: center;
    text-decoration: none;
    color: #374151;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: box-shadow .15s, border-color .15s, color .15s;
}
.rd-tile:hover { box-shadow: 0 4px 12px rgba(0,0,0,.07); border-color: var(--hover-border,#e2e8f0); color: var(--hover-color,#374151); }
.rd-tile-icon { font-size: calc(var(--rd-tile-min) * .24); line-height: 1; }
.rd-tile-label { font-size: calc(var(--rd-body-fs) * .82); font-weight: 700; line-height: 1.2; }

/* ── 12-column widget canvas ─────────────────────────────────────────────── */
/* Widths are declared per widget as a semantic class; how many of the tier's
   columns that actually spans comes from --rd-span-*, so a "Small" widget is
   a quarter-width card on desktop, a half on tablet and full-bleed on a
   phone — without any page-level media query. */
.rd-widget-grid {
    display: grid;
    grid-template-columns: repeat(var(--rd-grid-cols), minmax(0, 1fr));
    gap: var(--rd-gap);
}
.rd-widget-grid > * { min-width: 0; }
.rd-w-sm   { grid-column: span var(--rd-span-sm); }
.rd-w-md   { grid-column: span var(--rd-span-md); }
.rd-w-lg   { grid-column: span var(--rd-span-lg); }
.rd-w-full { grid-column: 1 / -1; }

/* ── Card headers / section titles ───────────────────────────────────────── */
.rd-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.rd-card-title { font-size: var(--rd-card-title-fs); font-weight: 700; color: #334155; }
.rd-card-link { font-size: calc(var(--rd-body-fs) * .95); font-weight: 600; text-decoration: none; }

/* MyStackBlazor's <StackCardTitle> renders `<h3 class="text-2xl …">` — a hard 24px at
   every width, which dwarfs a 390px phone and never grows on a 4K display. Scoped to
   dashboard shells only (not app-wide) so ordinary pages keep the package's own sizing.
   `.rd-page h3.text-2xl` outweighs the package's single-class `.text-2xl`, so no
   !important is needed. */
.rd-page h3.text-2xl,
.dk-page h3.text-2xl,
.rd-widget-grid h3.text-2xl {
    font-size: calc(var(--rd-card-title-fs) * 1.25);
    line-height: 1.3;
}

/* ── Visibility helpers ──────────────────────────────────────────────────── */
.rd-only-desktop { display: none; }
@media (min-width: 1025px) { .rd-only-desktop { display: revert; } }
@media (max-width: 599.98px) { .rd-hide-mobile { display: none !important; } }

/* ── Dark mode ─────────────────────────────────────────────────────────────
   Fallbacks are the warm charcoals from design-tokens.css, not the old cold
   greys — a fallback that fires (because --ek-* failed to resolve) should still
   land in the app's palette rather than reintroducing the blue-black it
   replaced. */
.dark .rd-kpi-val { color: var(--ek-text, #ede7e0); }
.dark .rd-kpi-lbl, .dark .rd-card-title { color: var(--ek-muted, #a9a199); }
.dark .rd-tile { background: var(--ek-card, #1e1a16); border-color: var(--ek-border, #2e2822); color: var(--ek-text, #ede7e0); }