/* ============================================================================
   TradeERP — 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;
}

.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;
}

/* ---- 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: 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;
    }
    .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; }
}