/* ============================================================================
   RestaurantERP — design tokens + app shell (spec §6.1 / §6.3)
   Self-contained: no external fonts/CDNs. Cairo is used when self-hosted under
   wwwroot/fonts (see @font-face below); otherwise the system stack takes over.
   All layout uses LOGICAL properties (inset-inline-*, margin-inline, …) so the
   one stylesheet flips automatically under RTL (Arabic).
   ============================================================================ */

/* ---- Fonts: Cairo + Inter loaded from Google Fonts in App.razor (same as SchoolERP) ---- */

:root {
    /* Brand */
    --primary: #0ea885;
    --primary-600: #0c916f;
    --primary-700: #0a7a5d;
    --primary-soft: #e2f5ef;
    --accent: #6c5ce7;
    --accent-soft: #ece9fb;

    /* Sidebar (clinical indigo) */
    --sidebar-bg: #0c1730;
    --sidebar-bg-2: #0a1428;
    --sidebar-text: #9fb0c9;
    --sidebar-text-strong: #eef3fa;
    --sidebar-active-bg: rgba(14, 168, 133, .16);
    --sidebar-active-text: #ffffff;
    --sidebar-hover-bg: rgba(255, 255, 255, .05);

    /* Surfaces */
    --bg: #f4f7f9;
    --bg-2: #eef2f5;
    --surface: #ffffff;
    --surface-2: #f8fafb;
    --border: #e4ebf1;
    --border-strong: #d5dee6;
    --shadow-sm: 0 1px 2px rgba(15, 33, 54, .06);
    --shadow: 0 4px 16px rgba(15, 33, 54, .08);
    --shadow-lg: 0 18px 48px rgba(15, 33, 54, .14);

    /* Text */
    --text: #0f2136;
    --text-2: #5b6b82;
    --text-3: #8595a9;

    /* Semantic */
    --green: #12b76a;
    --green-soft: #e3f7ee;
    --red: #f04438;
    --red-soft: #fdeceb;
    --amber: #f79009;
    --amber-soft: #fef1de;
    --blue: #2e90fa;
    --blue-soft: #e6f1fe;
    --violet: #6c5ce7;
    --violet-soft: #ece9fb;
    --teal: #0ea885;
    --teal-soft: #e2f5ef;

    /* Expiry heat scale */
    --exp-critical: #f04438; /* < 30 days   */
    --exp-warn: #f79009;     /* 30–90 days  */
    --exp-watch: #eab308;    /* 90–180 days */
    --exp-ok: #12b76a;       /* > 180 days  */

    /* Shape */
    --radius: 20px;
    --radius-sm: 12px;
    --radius-xs: 8px;

    /* Layout metrics */
    --sidebar-w: 264px;
    --topbar-h: 74px;
    --pos-cart-w: 420px;

    /* Fonts (Cairo + Inter via Google Fonts — same as SchoolERP) */
    --font: 'Cairo', 'Segoe UI', 'Inter', 'Tahoma', system-ui, -apple-system, sans-serif;
    --font-num: 'Inter', 'Segoe UI', Tahoma, ui-monospace, monospace;
}

:root[data-theme="dark"] {
    --primary: #2fd0ac;
    --primary-600: #26b896;
    --primary-700: #1f9f81;
    --primary-soft: rgba(47, 208, 172, .14);
    --accent: #8b7cf7;
    --accent-soft: rgba(139, 124, 247, .16);

    --sidebar-bg: #080f1e;
    --sidebar-bg-2: #060c18;
    --sidebar-text: #9fb0c9;
    --sidebar-text-strong: #eef3fa;
    --sidebar-active-bg: rgba(47, 208, 172, .18);
    --sidebar-hover-bg: rgba(255, 255, 255, .05);

    --bg: #0a111f;
    --bg-2: #0c1424;
    --surface: #111b2e;
    --surface-2: #0e1626;
    --border: #22304a;
    --border-strong: #2b3a56;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow: 0 4px 16px rgba(0, 0, 0, .45);
    --shadow-lg: 0 18px 48px rgba(0, 0, 0, .6);

    --text: #e6edf5;
    --text-2: #93a3ba;
    --text-3: #6f829b;

    --green-soft: rgba(18, 183, 106, .16);
    --red-soft: rgba(240, 68, 56, .16);
    --amber-soft: rgba(247, 144, 9, .16);
    --blue-soft: rgba(46, 144, 250, .16);
    --violet-soft: rgba(139, 124, 247, .16);
    --teal-soft: rgba(47, 208, 172, .14);
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: var(--primary);
    text-decoration: none;
}

/* ============================================================================
   App shell
   ============================================================================ */
.app-shell {
    display: flex;
    min-height: 100vh;
    background: var(--bg);
}

.app-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* ---- Sidebar ---- */
.sidebar {
    inline-size: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    background: linear-gradient(180deg, var(--sidebar-bg), var(--sidebar-bg-2));
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    position: sticky;
    inset-block-start: 0;
    block-size: 100vh;
    overflow-y: auto;
}

.sidebar__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 18px;
    border-block-end: 1px solid rgba(255, 255, 255, .06);
}

.sidebar__logo {
    inline-size: 42px;
    block-size: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 16px;
    flex: 0 0 auto;
}

/* The mark is a stroked cloche rather than a letter, so it needs the stroke settings the login
   page gives its own copy. currentColor picks up the white above. */
.sidebar__logo svg {
    inline-size: 24px;
    block-size: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 3.2;
    stroke-linecap: round;
}

.sidebar__title {
    font-weight: 800;
    font-size: 15px;
    color: var(--sidebar-text-strong);
    line-height: 1.2;
}

.sidebar__subtitle {
    font-size: 11.5px;
    color: var(--sidebar-text);
    margin-block-start: 2px;
}

.sidebar__nav {
    flex: 1;
    padding: 10px 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-section__label {
    inline-size: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
    border: none;
    color: var(--sidebar-text);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 12px 12px 6px;
    cursor: pointer;
    opacity: .75;
}

.nav-section__label:hover {
    opacity: 1;
}

.nav-section__chev {
    inline-size: 14px;
    block-size: 14px;
    transition: transform .18s ease;
}

.nav-section__label.is-open .nav-section__chev {
    transform: rotate(180deg);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--sidebar-text);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .14s ease, color .14s ease;
}

.nav-item:hover {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-text-strong);
}

.nav-item.active {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
    box-shadow: inset 3px 0 0 var(--primary);
}

.nav-icon {
    display: inline-flex;
    inline-size: 20px;
    block-size: 20px;
    flex: 0 0 auto;
}

.nav-icon svg {
    inline-size: 100%;
    block-size: 100%;
}

.sidebar__footer {
    padding: 12px;
    border-block-start: 1px solid rgba(255, 255, 255, .06);
}

.help-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .04);
    color: var(--sidebar-text);
    font-size: 13px;
    font-weight: 600;
}

/* ---- Top bar ---- */
.topbar {
    block-size: var(--topbar-h);
    flex: 0 0 var(--topbar-h);
    display: flex;
    align-items: center;
    gap: 10px;
    padding-inline: 20px;
    background: var(--surface);
    border-block-end: 1px solid var(--border);
    position: sticky;
    inset-block-start: 0;
    z-index: 20;
}

.topbar__spacer {
    flex: 1;
}

.icon-btn {
    inline-size: 40px;
    block-size: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-2);
    cursor: pointer;
    transition: background .14s ease, color .14s ease, border-color .14s ease;
}

.icon-btn:hover {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--border-strong);
}

.lang-switch {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.lang-switch a {
    padding: 4px;
    border-radius: 8px;
    display: inline-flex;
    line-height: 0;
    text-decoration: none;
    transition: opacity .15s ease;
    opacity: .5;
}

.lang-switch a .flag {
    width: 26px;
    height: 17px;
    border-radius: 3px;
    display: block;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}

.lang-switch a:hover {
    opacity: 1;
}

.lang-switch a.on {
    opacity: 1;
}

.lang-switch a.on .flag {
    box-shadow: 0 0 0 2px var(--primary), 0 2px 6px rgba(0, 0, 0, .2);
}

/* ---- Branch switcher pill ---- */
.branch-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.branch-pill:hover {
    border-color: var(--primary);
}

.branch-pill .dot {
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: var(--primary);
    flex: 0 0 auto;
}

.branch-pill--static {
    cursor: default;
}

.branch-pop {
    position: absolute;
    inset-block-start: calc(var(--topbar-h) - 8px);
    inset-inline-start: 0;
    min-inline-size: 260px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    z-index: 40;
}

.branch-pop__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    inline-size: 100%;
    text-align: start;
    padding: 10px 12px;
    border: none;
    border-radius: var(--radius-xs);
    background: none;
    color: var(--text);
    font-family: inherit;
    cursor: pointer;
}

.branch-pop__item:hover {
    background: var(--surface-2);
}

.branch-pop__item.on {
    background: var(--primary-soft);
}

.branch-pop__name {
    font-size: 13.5px;
    font-weight: 700;
}

.branch-pop__meta {
    font-size: 11.5px;
    color: var(--text-3);
}

/* ---- User menu ---- */
.user-wrap {
    position: relative;
}

.user-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px 6px 6px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    cursor: pointer;
}

.user-chip:hover {
    border-color: var(--border-strong);
}

.avatar {
    inline-size: 34px;
    block-size: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    flex: 0 0 auto;
}

.u-name {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.15;
}

.u-role {
    font-size: 11px;
    color: var(--text-3);
}

.user-menu {
    position: absolute;
    inset-block-start: 46px;
    inset-inline-end: 0;
    min-inline-size: 200px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    z-index: 40;
}

.um-item {
    display: flex;
    align-items: center;
    gap: 10px;
    inline-size: 100%;
    text-align: start;
    padding: 10px 12px;
    border: none;
    border-radius: var(--radius-xs);
    background: none;
    color: var(--text);
    font-family: inherit;
    font-size: 13.5px;
    cursor: pointer;
}

.um-item:hover {
    background: var(--surface-2);
}

.um-danger {
    color: var(--red);
}

.menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 30;
}

/* ---- Content ---- */
.content {
    flex: 1;
    min-block-size: 0;
    padding: 24px 28px;
    overflow-y: auto;
}

/* ---- Page head ---- */
.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-block-end: 20px;
}

.page-head__actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* ---- KPI grid + cards ---- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.kpi-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kpi-card__top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.kpi-card__icon {
    inline-size: 42px;
    block-size: 42px;
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    background: var(--primary-soft);
    color: var(--primary-700);
    flex: 0 0 auto;
}

.kpi-card__label {
    font-size: 12.5px;
    color: var(--text-2);
    font-weight: 600;
}

.kpi-card__value {
    font-size: 26px;
    font-weight: 800;
    color: var(--text);
}

.kpi-card__delta {
    font-size: 12px;
    font-weight: 700;
}

.kpi-card__delta.up {
    color: var(--green);
}

.kpi-card__delta.down {
    color: var(--red);
}

/* ---- Typography utilities ---- */
.t-display {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.1;
}

.t-h1 {
    font-size: 22px;
    font-weight: 800;
    color: var(--text);
    margin: 0;
}

.t-h2 {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.t-body {
    font-size: 14px;
    color: var(--text);
}

.t-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
}

/* Money / quantities: always LTR + tabular figures, even inside an RTL page. */
.t-num {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    direction: ltr;
    unicode-bidi: isolate;
}

/* A numeric table CELL keeps the page's direction; only its content stays isolated.
   `text-align:end` resolves against the ELEMENT's own direction, so forcing a cell to LTR
   silently flipped what "end" meant inside it: on an Arabic page the <th> (RTL, end = left)
   sat at one edge of the column while its number (LTR, end = right) sat at the other. Every
   figure then appeared to belong to the title beside it — the report was read as saying a
   3,800 giveaway had cost 15,500. 86 cells across 77 pages, all of them, in one rule.
   Isolation is what actually protects a signed or grouped number from being reordered next
   to Arabic, and `unicode-bidi: isolate` above still does that; the direction override was
   only ever needed for numbers sitting INSIDE a sentence, not alone in their own cell. */
td.t-num,
th.t-num {
    direction: inherit;
}

/* ---- Status chips ---- */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.chip--green { background: var(--green-soft); color: var(--green); }
.chip--amber { background: var(--amber-soft); color: var(--amber); }
.chip--red { background: var(--red-soft); color: var(--red); }
.chip--blue { background: var(--blue-soft); color: var(--blue); }
.chip--violet { background: var(--violet-soft); color: var(--violet); }
.chip--gray { background: var(--bg-2); color: var(--text-2); }

/* ---- Empty state ---- */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 24px;
    text-align: center;
    color: var(--text-3);
}

.empty-state__icon {
    inline-size: 56px;
    block-size: 56px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--bg-2);
    color: var(--text-3);
}

/* ---- Loading skeleton ---- */
.skel {
    background: linear-gradient(90deg, var(--bg-2) 25%, var(--surface-2) 37%, var(--bg-2) 63%);
    background-size: 400% 100%;
    animation: skel 1.4s ease infinite;
    border-radius: var(--radius-sm);
}

@keyframes skel {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* ---- Mobile ---- */
.nav-backdrop {
    display: none;
}

@media (max-width: 900px) {
    .sidebar {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        z-index: 60;
        transform: translateX(-105%);
        transition: transform .22s ease;
    }

    [dir="rtl"] .sidebar {
        transform: translateX(105%);
    }

    .app-shell.nav-open .sidebar {
        transform: translateX(0);
    }

    .app-shell.nav-open .nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(8, 15, 30, .5);
        z-index: 55;
    }

    .content {
        padding: 16px;
    }
}

@media (min-width: 901px) {
    .nav-burger {
        display: none;
    }
}

/* ============================================================================
   Blazor framework styles (kept from the template)
   ============================================================================ */
h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
    border-radius: var(--radius-sm);
}

    .blazor-error-boundary::after {
        content: "An error has occurred.";
    }

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* ---- Cash sessions (POS bar, reconciliation, Z-report) ---- */
.pos-session {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 8px 14px;
    margin-bottom: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}
.pos-session--open { border-inline-start: 3px solid var(--green); }
.pos-session--none { border-inline-start: 3px solid var(--amber); }
.pos-session__info { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--text-1, inherit); }
.pos-session__icon { color: var(--accent); }
.pos-session__num { font-weight: 700; }
.pos-session__sep { color: var(--text-2); }

.sess-recon { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--radius-xs); background: var(--surface-2); }
.sess-recon__line { display: flex; justify-content: space-between; align-items: center; }
.sess-recon__line--strong { font-weight: 700; border-top: 1px solid var(--border); padding-top: 6px; margin-top: 2px; }

.sess-z { display: flex; flex-direction: column; gap: 10px; }
.sess-z__head { text-align: center; }
.sess-z__store { font-size: 15px; font-weight: 700; }
.sess-z__title { font-size: 13px; font-weight: 600; color: var(--text-2); }
.sess-z__num { font-weight: 700; }
.sess-z__meta { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.sess-z__meta > div { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sess-z__section { display: flex; flex-direction: column; gap: 4px; border-top: 1px dashed var(--border); padding-top: 8px; }
.sess-z__subhead { font-weight: 600; color: var(--text-2); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
.sess-z__row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sess-z__row--strong { font-weight: 700; }
.sess-z__notes { font-size: 12px; color: var(--text-2); border-top: 1px dashed var(--border); padding-top: 8px; }

/* Money over/short helpers reused across session screens. */
.pos-txt--red { color: var(--red); font-weight: 700; }
.pos-txt--green { color: var(--green); font-weight: 700; }

/* Keep the receipt out of the normal (screen) flow — it only appears when printing. */
.receipt-print { display: none; }

/* ---- Receipt print: 80mm thermal, reveal only the .receipt-print area ---- */
/* Pages on PrintLayout (.print-root — the A4 invoice) ARE the document: reveal them too,
   or the global hide leaves the print preview blank. */
@media print {
    body * { visibility: hidden; }
    .receipt-print,
    .receipt-print *,
    .print-root,
    .print-root * { visibility: visible; }
    .receipt-print {
        display: block;
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        width: 80mm;
        box-shadow: none !important;
    }
    .no-print { display: none !important; }
}

/* Report print header line: hidden on screen, shown at the top of the printed sheet. */
.print-only-head { display: none; }

@media print {
    .print-only-head {
        display: block;
        font-weight: 800;
        font-size: 15px;
        padding: 6px 10px;
        border-block-end: 2px solid #111;
    }
}

/* ---- Cashier-shift report grid ----
   MudBlazor already scrolls a too-wide grid inside .mud-table-container, so the sideways scroll
   was never missing — what was missing was any way to use it. Twenty-one columns started ~1900px
   wide in a card that is ~1600px on a full-HD screen, so the report opened with a third of itself
   already past the edge, and scrolling to reach it carried the shift number away first, leaving
   rows of money belonging to nobody. The columns were merged down in the page; this pins the
   identity column so the remaining scroll stays readable.
   `inset-inline-start` follows the page, pinning right in Arabic and left in English. */
.shift-grid .mud-table-cell:first-child {
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
    background: var(--surface);
}

/* Without this the pinned cell keeps its own background while the rest of the row lights up, and
   the hovered row looks broken exactly where the eye is. */
.shift-grid .mud-table-body .mud-table-row:hover .mud-table-cell:first-child {
    background: var(--mud-palette-table-hover);
}

/* ---- Report print: strip the app chrome and print only the .report-print area ---- */
@media print {
    @page {
        margin: 12mm;
    }

    /* Hide everything, then reveal only the report surface and its descendants. */
    body * {
        visibility: hidden;
    }

    .report-print,
    .report-print *,
    .print-root,
    .print-root * {
        visibility: visible;
    }

    .report-print {
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        inline-size: 100%;
        box-shadow: none !important;
    }

    /* Chrome that must never reach paper even if it wraps the report. */
    .sidebar,
    .topbar,
    .nav-backdrop,
    .page-head__actions,
    #blazor-error-ui,
    .mud-snackbar-provider,
    .mud-popover-provider {
        display: none !important;
    }

    /* Keep tables/backgrounds legible in print. */
    .report-print,
    .report-print table {
        color-adjust: exact;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* ---- Elegant printed tables (applies to every .report-print MudTable) ---- */
    .report-print .mud-table,
    .report-print .mud-table-container,
    .report-print .mud-paper {
        box-shadow: none !important;
        border: none !important;
        background: #fff !important;
        overflow: visible !important;
    }
    .report-print table {
        width: 100% !important;
        border-collapse: collapse !important;
        font-size: 11px !important;
    }
    /* Nothing scrolls on paper, and a sticky cell in a print layout only lands somewhere wrong. */
    .shift-grid .mud-table-cell:first-child {
        position: static;
    }
    .report-print .mud-table-head th,
    .report-print thead th {
        background: #eef1f4 !important;
        color: #0f2136 !important;
        border-block-end: 1.5px solid #0f2136 !important;
        font-weight: 700 !important;
        padding: 6px 8px !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .report-print .mud-table-body td,
    .report-print tbody td {
        border-block-end: 1px solid #d6dbe1 !important;
        padding: 5px 8px !important;
        color: #17263a !important;
    }
    .report-print .mud-table-body tr:nth-child(even) td,
    .report-print tbody tr:nth-child(even) td {
        background: #f7f8fa !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .report-print .mud-table-foot td,
    .report-print tfoot td {
        border-block-start: 2px solid #0f2136 !important;
        background: #eef1f4 !important;
        font-weight: 800 !important;
        padding: 6px 8px !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    /* Never carry a screen row-hover tint onto paper. */
    .report-print .mud-table-row:hover td { background: inherit !important; }

    /* Screen max-width caps (centered document cards) must not squeeze the printed page. */
    .report-print {
        max-inline-size: none !important;
        margin: 0 !important;
    }
}

/* ---- Live rep map ---- */
.rmap-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 14px;
    block-size: calc(100vh - 190px);
    min-block-size: 460px;
}

@media (max-width: 900px) {
    .rmap-layout { grid-template-columns: 1fr; block-size: auto; }
    .rmap-canvas { block-size: 55vh; }
}

.rmap-canvas {
    border-radius: 14px;
    border: 1px solid var(--border);
    overflow: hidden;
    z-index: 0;
}

.rmap-side {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 10px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rmap-side__head { font-weight: 800; font-size: 13.5px; padding: 4px 6px 8px; border-block-end: 1px solid var(--border); }

.rmap-empty { color: var(--text-2); text-align: center; padding: 26px 8px; font-size: 13px; }

.rmap-rep {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: none;
    border: 0;
    border-radius: 10px;
    padding: 8px;
    cursor: pointer;
    text-align: start;
    font-family: inherit;
    transition: background .12s;
}

.rmap-rep:hover { background: var(--bg-2, #f4f7fa); }

.rmap-rep__body { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.rmap-rep__name { font-weight: 700; font-size: 13.5px; color: var(--text); }
.rmap-rep__meta { font-size: 11.5px; color: var(--text-2); }
.rmap-rep__stats { display: flex; gap: 12px; font-size: 12px; color: var(--text); font-variant-numeric: tabular-nums; }

.rmap-dot { inline-size: 11px; block-size: 11px; border-radius: 999px; flex: 0 0 auto; margin-block-start: 4px; display: inline-block; }
.rmap-dot--fresh { background: #12b76a; box-shadow: 0 0 0 4px rgb(18 183 106 / .18); }
.rmap-dot--warm { background: #f79009; box-shadow: 0 0 0 4px rgb(247 144 9 / .16); }
.rmap-dot--stale { background: #98a2b3; box-shadow: 0 0 0 4px rgb(152 162 179 / .16); }

.rmap-legend {
    margin-block-start: auto;
    border-block-start: 1px solid var(--border);
    padding-block-start: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    font-size: 11.5px;
    color: var(--text-2);
    align-items: center;
}

.rmap-pin { inline-size: 12px; block-size: 12px; border-radius: 4px; display: inline-block; }
.rmap-pin--order { background: #f59e0b; }
.rmap-pin--collection { background: #10b981; }

/* Markers rendered by Leaflet divIcons */
.rm-marker {
    inline-size: 38px; block-size: 38px; border-radius: 50% 50% 50% 4px;
    transform: rotate(-45deg);
    display: grid; place-items: center;
    border: 3px solid #fff;
    box-shadow: 0 6px 14px rgb(15 33 54 / .35);
}
.rm-marker span { transform: rotate(45deg); color: #fff; font-weight: 800; font-size: 15px; font-family: inherit; }
.rm-marker--fresh { background: linear-gradient(135deg, #12b76a, #047857); }
.rm-marker--warm { background: linear-gradient(135deg, #f79009, #d97706); }
.rm-marker--stale { background: linear-gradient(135deg, #98a2b3, #667085); }

.rm-doc {
    inline-size: 26px; block-size: 26px; border-radius: 8px;
    display: grid; place-items: center; font-size: 13px;
    border: 2px solid #fff;
    box-shadow: 0 4px 10px rgb(15 33 54 / .3);
}
.rm-doc--order { background: #fef3c7; }
.rm-doc--collection { background: #d1fae5; }

.rm-pop { font-family: inherit; font-size: 12.5px; line-height: 1.7; }
.rm-pop__amt { font-weight: 800; }

/* ---- Invoice settlement mode + cash-note chips ---- */
.paymode {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.paymode__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 12px 8px;
    border-radius: 12px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text-2);
    font-weight: 700;
    font-size: 13.5px;
    font-family: inherit;
    cursor: pointer;
    transition: all .14s ease;
}

.paymode__btn:hover { border-color: var(--primary); color: var(--text); }

.paymode__btn.on { color: #fff; border-color: transparent; box-shadow: 0 8px 18px -10px rgb(15 33 54 / .5); }
.paymode__btn.on--cash { background: linear-gradient(135deg, #10b981, #047857); }
.paymode__btn.on--credit { background: linear-gradient(135deg, #f59e0b, #d97706); }
.paymode__btn.on--partial { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }

.paychips { display: flex; flex-wrap: wrap; gap: 6px; }

.paychip {
    border: 1px solid var(--border);
    background: var(--bg-2, #f4f7fa);
    color: var(--text);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12.5px;
    font-weight: 700;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: all .12s;
}

.paychip:hover { border-color: var(--primary); color: var(--primary-700, var(--primary)); }
.paychip--exact { background: var(--primary-soft, #e0f5ef); color: var(--primary-700, var(--primary)); border-color: transparent; }
.paychip--zero { color: var(--red, #d33); }

/* ---- Dashboard quick-action tiles (the colorful launch keypad) ---- */
.qa-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 12px;
}

.qa-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 18px 10px 14px;
    border-radius: 16px;
    color: #fff !important;
    text-decoration: none !important;
    box-shadow: 0 12px 26px -14px rgb(15 33 54 / .45);
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
    position: relative;
    overflow: hidden;
}

.qa-tile::after {
    content: "";
    position: absolute;
    inset-block-start: -55%;
    inset-inline-start: -20%;
    inline-size: 70%;
    block-size: 160%;
    background: rgb(255 255 255 / .12);
    transform: rotate(22deg);
    pointer-events: none;
}

.qa-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 34px -14px rgb(15 33 54 / .55);
    filter: saturate(1.08);
}

.qa-tile__ic {
    inline-size: 48px;
    block-size: 48px;
    border-radius: 14px;
    background: rgb(255 255 255 / .22);
    display: grid;
    place-items: center;
    backdrop-filter: blur(2px);
}

.qa-tile__t { font-weight: 800; font-size: 13.5px; line-height: 1.2; }
.qa-tile__s { font-size: 11px; opacity: .88; }

.qa--teal   { background: linear-gradient(135deg, #14b8a6, #0f766e); }
.qa--blue   { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.qa--violet { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.qa--amber  { background: linear-gradient(135deg, #f59e0b, #d97706); }
.qa--green  { background: linear-gradient(135deg, #10b981, #047857); }
.qa--cyan   { background: linear-gradient(135deg, #06b6d4, #0e7490); }
.qa--rose   { background: linear-gradient(135deg, #f43f5e, #be123c); }
.qa--indigo { background: linear-gradient(135deg, #6366f1, #4338ca); }

@media print {
    .qa-grid { display: none !important; }
}

/* ---- Financial statements (income statement / balance sheet): a real accounting document ---- */
.fs-doc {
    max-inline-size: 860px;
    margin-inline: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 12px);
    padding: 22px 28px 26px;
}

.fs {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.fs td {
    padding: 6px 4px;
    vertical-align: baseline;
}

/* Amount column: fixed-width numerals, kept on one line, generous column. */
.fs .fs-amt {
    text-align: end;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    inline-size: 170px;
    font-feature-settings: "tnum";
}

.fs .fs-pct {
    text-align: end;
    white-space: nowrap;
    inline-size: 90px;
    color: var(--text-2);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

/* Section headers (الإيرادات / المصروفات / الأصول ...). */
.fs .fs-section td {
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .3px;
    color: var(--primary-700, var(--primary));
    padding-block: 16px 6px;
    border-block-end: 1px solid var(--border);
}
.fs tr:first-child.fs-section td { padding-block-start: 4px; }

/* Account rows are indented under their section. */
.fs .fs-line td:first-child { padding-inline-start: 20px; color: var(--text); }
.fs .fs-line .t-num { color: var(--text-2); font-size: 12px; margin-inline-end: 6px; }

/* Subtotals: single top rule. Grand totals: heavy top rule + classic double underline. */
.fs .fs-subtotal td {
    border-block-start: 1px solid var(--text-2);
    font-weight: 700;
    padding-block: 8px;
}
.fs .fs-strong td { font-weight: 800; font-size: 15px; }
.fs .fs-grand td {
    border-block-start: 2px solid var(--text);
    border-block-end: 3px double var(--text);
    font-weight: 800;
    font-size: 16px;
    padding-block: 10px;
}
.fs .fs-gap td { padding: 0; block-size: 10px; border: 0; }

/* Deductions print in parentheses and read softer. */
.fs .fs-deduct { color: var(--text); }

/* Signature strip: hidden on screen, printed at the bottom of the statement. */
.fs-sign { display: none; }

@media print {
    .fs-doc {
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        max-inline-size: none !important;
        background: #fff !important;
    }
    .fs { font-size: 12.5px; }
    .fs td { color: #000 !important; }
    .fs .fs-section td { color: #000 !important; border-color: #000 !important; }
    .fs .fs-subtotal td { border-color: #000 !important; }
    .fs .fs-grand td { border-color: #000 !important; }
    .fs .fs-pct { color: #333 !important; }

    .fs-sign {
        display: flex;
        justify-content: space-between;
        gap: 24px;
        margin-block-start: 56px;
        visibility: visible;
    }
    .fs-sign__box {
        flex: 1;
        text-align: center;
        font-size: 12px;
        font-weight: 700;
        color: #000;
        padding-block-start: 6px;
        border-block-start: 1.5px solid #000;
        max-inline-size: 180px;
    }
}