/* ----- Brand tokens (Al Nooran.Net logo + legacy desktop app) ------------- */
:root {
    --brand-navy: #1C3A62;        /* logo lettering, primary */
    --brand-navy-dark: #132A48;
    --brand-gold: #F8B214;        /* logo accent */
    --brand-gold-soft: #FFF4D6;   /* paper only (prints are always white) */
    /* On screen a highlight is a tint of the page's own surface, so it stays readable in
       both themes: cream on white in light mode, a warm navy in dark mode — never a light
       block under light text. */
    --app-highlight: color-mix(in srgb, var(--mud-palette-secondary) 16%, var(--mud-palette-surface));
    --app-highlight-strong: color-mix(in srgb, var(--mud-palette-secondary) 26%, var(--mud-palette-surface));
    --app-highlight-text: var(--mud-palette-text-primary);
    --brand-orange: #F28C28;      /* desktop menu ribbon */
    --brand-teal: #1F6B82;        /* desktop side rail */
    --brand-charcoal: #3C3A45;    /* desktop title bar */
}

/* ----- Global resets / typography ---------------------------------------- */
html, body { margin: 0; padding: 0; height: 100%; }

body {
    font-family: 'Inter', 'Cairo', 'Segoe UI', Tahoma, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

[dir="rtl"] body {
    font-family: 'Cairo', 'Tajawal', 'Inter', 'Segoe UI', sans-serif;
}

/* ----- Login / unauthorized shell ---------------------------------------- */
.auth-shell {
    min-height: 100vh;
    min-height: 100dvh;
    background: radial-gradient(circle at 15% 0%, rgba(28, 58, 98, 0.14), transparent 45%),
                radial-gradient(circle at 100% 100%, rgba(248, 178, 20, 0.16), transparent 45%),
                var(--mud-palette-background);
}

.login-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
}

.login-card {
    width: 100%;
    max-width: 420px;
    padding: 32px;
    border-radius: 12px;
    background: var(--mud-palette-surface);
}

.login-card { border-top: 4px solid var(--brand-gold); }
.login-brand { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.login-logo { width: 170px; height: auto; }
.login-title { color: var(--mud-palette-primary); font-weight: 700; }

/* ----- App shell --------------------------------------------------------- */
.app-shell { min-height: 100vh; min-height: 100dvh; background: var(--mud-palette-background); }
.app-content { background: var(--mud-palette-background); min-height: calc(100vh - 60px);
               min-height: calc(100dvh - 60px); }
.app-drawer { border-inline-end: none; box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08); }

/* Top bar: white surface + the desktop app's gold→orange ribbon underneath. */
.app-appbar { border-bottom: 3px solid transparent;
              border-image: linear-gradient(90deg, var(--brand-gold), var(--brand-orange) 55%, var(--brand-gold)) 1; }
.app-brand-link { display: flex; align-items: center; gap: 8px; }
.app-brand-logo { width: 34px; height: 34px; }

/* Sidebar (teal rail): white text, gold active item. */
.app-drawer .mud-nav-link { color: var(--mud-palette-drawer-text); }
.app-drawer .mud-nav-link:hover:not(.mud-nav-link-disabled) { background-color: rgba(255, 255, 255, 0.10); }
.app-drawer .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background-color: rgba(248, 178, 20, 0.16);
    color: var(--brand-gold);
    box-shadow: inset 3px 0 0 var(--brand-gold);
}
[dir="rtl"] .app-drawer .mud-nav-link.active:not(.mud-nav-link-disabled) { box-shadow: inset -3px 0 0 var(--brand-gold); }
.app-drawer .mud-nav-link.active .mud-nav-link-icon { color: var(--brand-gold); }

.app-sidebar-brand {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(0, 0, 0, 0.10);
}

.app-sidebar-brand .brand-logo { width: 40px; height: 40px; flex: 0 0 40px; }

.app-sidebar-brand .brand-text {
    margin-inline-start: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    color: #FFFFFF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-sidebar-nav { padding: 8px 0; }

.app-sidebar-heading {
    padding: 10px 20px 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.04em;
}

/* ----- Top bar ----------------------------------------------------------- */
.app-topbar-content { display: flex; align-items: center; width: 100%; gap: 4px; }
.app-brand-link { cursor: pointer; margin-inline-end: 16px; }
.app-brand-text { font-weight: 600; color: var(--mud-palette-text-primary); }
.app-search { max-width: 320px; flex: 1 1 auto; }
.app-user-menu-header { padding: 12px 16px; min-width: 220px; }

/* ----- Page header ------------------------------------------------------- */
.app-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0 12px;
    flex-wrap: wrap;
    gap: 12px;
}

.app-page-header-text { display: flex; flex-direction: column; }
.app-page-title { font-weight: 600; }
.app-page-subtitle { margin-top: 2px; }
.app-page-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ----- Cards ------------------------------------------------------------- */
.app-card {
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    overflow: hidden;
    transition: box-shadow 120ms ease;
}

.app-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); }

.app-card-header { display: flex; align-items: center; padding: 12px 16px; }
.app-card-title { font-weight: 600; color: var(--mud-palette-text-primary); }
.app-card-actions { display: flex; gap: 6px; }
.app-card-body { padding: 16px; }

/* ----- Tables ------------------------------------------------------------ */
.app-table { border: 1px solid var(--mud-palette-divider); border-radius: 8px; overflow: hidden; }
.app-table-search { max-width: 320px; }

/* ----- Loader ------------------------------------------------------------ */
.app-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 16px;
}

.app-loader.inline { flex-direction: row; padding: 8px; }
.app-loader.inline .mud-progress-circular { margin-inline-end: 8px; }

/* ----- Breadcrumbs ------------------------------------------------------- */
.app-breadcrumbs { padding: 0 0 4px; }

/* ----- Modal ------------------------------------------------------------- */
.app-modal-title { display: flex; flex-direction: column; }
.app-modal-body { padding: 8px 4px; min-width: 360px; }

/* ----- RTL tweaks -------------------------------------------------------- */
[dir="rtl"] .app-search input { text-align: right; }
[dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: 0.5rem !important; }
[dir="rtl"] .ms-2 { margin-left: 0 !important; margin-right: 0.5rem !important; }
[dir="rtl"] .me-3 { margin-right: 0 !important; margin-left: 1rem !important; }
[dir="rtl"] .ms-3 { margin-left: 0 !important; margin-right: 1rem !important; }
[dir="rtl"] .ms-1 { margin-left: 0 !important; margin-right: 0.25rem !important; }

/* ----- Error UI (Blazor default) ---------------------------------------- */
#blazor-error-ui {
    background: #b32121;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    color: #fff;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    inset-inline: 0;
    z-index: 1300;          /* above the bottom nav (1100): a dead circuit must be recoverable */
}

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

/* ----- Utilities used by the phone layout (all sizes) --------------------- */
/* A cell holding two stacked facts (name + code, batch + expiry). Without this the
   two children sit side by side at ~100px each once a row stacks into a card. */
.cell-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
              min-width: 0; width: 100%; }
/* A filter control above a list: fixed-ish on desktop, full width on a phone. */
.filter-select { min-width: 160px; flex: 0 1 200px; }
/* Keeps a form's primary action reachable instead of 2000px below the fold. */
.app-form-actions { display: flex; justify-content: flex-end; gap: 8px; }
.u-hide-xs { }

/* ----- Bottom-nav clearance (wherever the nav renders — below md) --------- */
/* This has to beat MudBlazor's `.pa-4 { padding: 16px !important }`, which sits on
   the very same element; without !important the rule silently does nothing and the
   last 56px of every page stays buried under the nav. */
@media (max-width: 959.98px) {
    .app-content-wrap.has-bottom-nav {
        padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    }
}

/* ----- Mobile breakpoints (xs only — < 600px) ---------------------------- */
@media (max-width: 599.98px) {
    /* Single-column page header on phone, with actions that share the width */
    .app-page-header { flex-direction: column; align-items: stretch; }
    .app-page-header-actions { justify-content: stretch; gap: 8px; }
    .app-page-header-actions > * { flex: 1 1 140px; }

    /* Larger tap zones in tables on phone */
    .mud-table-cell { padding: 12px 16px !important; }

    /* --- Stacked table rows read as cards ---------------------------------
       MudTable already switches to its small-device layout at xs; what it does
       not do is make the result legible. */
    .app-table .mud-table-row,
    .mud-table-root .mud-table-row {
        display: block;
        border: 1px solid var(--mud-palette-divider);
        border-radius: 10px;
        margin-block-end: 8px;
        overflow: hidden;
    }
    .mud-table-cell { flex-wrap: wrap; }
    .mud-table-cell:before { color: var(--mud-palette-text-secondary); font-size: .78rem; }
    .mud-table-cell .mud-input-control { flex: 1 1 100%; }
    .mud-table-cell:empty { display: none; }
    /* Columns hidden at narrow widths are exactly what a salesman opens the app to
       look up — a mobile number, a credit limit, a status. Once the row is a card
       there is room for them, so bring them back. */
    .mud-table-cell.d-none { display: flex !important; }

    /* The toolbar wraps instead of clipping — `.app-table { overflow: hidden }`
       used to cut the filter box off, so a phone user could not filter a list. */
    .app-table .mud-table-toolbar { flex-wrap: wrap; height: auto; min-height: 0;
                                    padding: 8px; gap: 8px; }
    .app-table-search { max-width: none; width: 100%; }
    /* The Arabic "rows per page" caption + select + arrows overflow 375px. */
    .mud-table-pagination-caption, .mud-table-pagination-select { display: none !important; }
    /* A simple table cannot stack — let it scroll sideways inside its own box. */
    .mud-simple-table { overflow-x: auto; }

    /* --- Dialogs take the whole screen ------------------------------------
       .mud-dialog-width-full is calc(100% - 64px) inside a fixed centring flexbox,
       so an over-wide dialog overflows BOTH edges and its start edge is unreachable. */
    .mud-dialog-container { align-items: stretch; justify-content: stretch; }
    .mud-dialog-container .mud-dialog:not(.mud-dialog-fullscreen) {
        margin: 0; width: 100%; max-width: 100%;
        height: 100dvh; max-height: 100dvh; border-radius: 0;
    }
    .mud-dialog-content { padding-inline: 12px; }
    .app-modal-body { min-width: 0; overflow-x: auto; }

    /* --- Top bar fits 375px ----------------------------------------------- */
    .app-brand-text { display: none; }
    .app-topbar-content { gap: 0; }
    .app-branch-chip { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* --- Filters and forms ------------------------------------------------ */
    .filter-select { flex: 1 1 100%; max-width: 100% !important; min-width: 0; }
    /* The primary action travels with the page instead of hiding under the fold. */
    .app-form-actions { position: sticky; inset-block-end: calc(72px + env(safe-area-inset-bottom));
                        background: var(--mud-palette-surface); padding-block: 8px; z-index: 2; }

    /* Keep the recovery bar and snackbars clear of the bottom nav. */
    #blazor-error-ui { bottom: calc(56px + env(safe-area-inset-bottom)); }
    .mud-snackbar-location-bottom-right,
    .mud-snackbar-location-bottom-left,
    .mud-snackbar-location-bottom-center {
        bottom: calc(72px + env(safe-area-inset-bottom)); inset-inline: 8px;
    }

    /* --- A plain table becomes cards ---------------------------------------
       MudSimpleTable is a bare <table>: it has no small-device mode, so a 4-column
       one simply runs off the screen with its last column — usually the field the
       user actually operates — unreachable. Opt in with class="app-cards-xs" and
       put data-label on each <td>. */
    .app-cards-xs thead { display: none; }
    .app-cards-xs tr {
        display: block;
        border: 1px solid var(--mud-palette-divider);
        border-radius: 10px;
        padding: 8px;
        margin-block-end: 8px;
    }
    .app-cards-xs td {
        display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
        gap: 8px; border: 0 !important; padding: 4px 0 !important; text-align: start !important;
    }
    .app-cards-xs td[data-label]:before {
        content: attr(data-label);
        color: var(--mud-palette-text-secondary);
        font-size: .78rem;
    }
    /* A cell holding a control gets the whole line for it, under its caption. */
    .app-cards-xs td .mud-input-control { flex: 1 1 100%; max-width: none; }
    .price-picker-input { max-width: none !important; }

    /* Columns a phone has no room for opt out with this class. */
    .u-hide-xs { display: none !important; }
}

/* ----- Touch-target enforcement (any touch device, any size) ------------- */
@media (hover: none) and (pointer: coarse) {
    .mud-button-root,
    .mud-icon-button {
        min-height: 44px;
        min-width: 44px;
    }
    /* The controls a thumb actually misses: menu rows (logout, cash account,
       payment method, supplier), sidebar links, dense inputs, and the branch
       chip — which is the only way to change branch. */
    .mud-nav-link { min-height: 44px; }
    .mud-list-item, .mud-popover .mud-list-item { min-height: 44px; }
    .mud-chip.mud-clickable { min-height: 32px; }
    .app-branch-chip { min-height: 44px; padding-inline: 12px; }
    .mud-input-control-margin-dense .mud-input-root { min-height: 44px; }
    /* A keyboard hint is noise on a device with no F-keys. */
    .pos-key { display: none; }
}

/* ----- Bottom nav --------------------------------------------------------- */
.app-bottom-nav {
    position: fixed;
    bottom: 0;
    inset-inline: 0;          /* RTL-safe equivalent of left:0; right:0 */
    z-index: 1100;
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-divider);
    padding-bottom: env(safe-area-inset-bottom);   /* home-indicator gap on iOS */
}

.app-bottom-nav .bn-row {
    display: flex;
    width: 100%;
    height: 56px;
}

.app-bottom-nav .bn-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 6px 4px;
    color: var(--mud-palette-text-secondary);
    font-family: inherit;
    cursor: pointer;
    transition: color 120ms ease;
}

.app-bottom-nav .bn-item.active { color: var(--mud-palette-primary); }
.app-bottom-nav .bn-item:hover { color: var(--mud-palette-primary); }
.app-bottom-nav .bn-item:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.app-bottom-nav .bn-label {
    font-size: 0.7rem;
    margin-top: 2px;
    line-height: 1;
}

/* RTL: bottom nav already mirrors thanks to flex; nothing to add. */

/* ============================================================================
   Printable tax invoice (/sales/invoices/{id}/print) — bilingual AR/EN, A4.
   ============================================================================ */
.print-shell { background: #eef0f3; min-height: 100vh; min-height: 100dvh; color: #111; }
.tax-invoice {
    background: #fff; max-width: 210mm; margin: 0 auto 24px; padding: 14mm 12mm;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif; font-size: 12px; line-height: 1.45;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .12);
}
.tax-invoice table { border-collapse: collapse; width: 100%; }
.ti-head { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: start;
           border-bottom: 3px solid var(--brand-navy); padding-bottom: 10px; }
.ti-title-ar, .ti-title-en { color: var(--brand-navy); }
.ti-party .ti-name { font-weight: 700; font-size: 14px; }
.ti-title { text-align: center; padding-top: 4px; }
.ti-logo { display: block; width: 22mm; height: auto; margin: 0 auto 4px; }
/* The document number as bars, under the title — where the eye already looks for it. */
.ti-barcode { margin-top: 6px; font-size: 11px; letter-spacing: .03em; }
.ti-barcode .code128 { display: block; width: 52mm; height: 10mm; margin: 0 auto 2px; }
.ti-title-ar { font-size: 20px; font-weight: 700; }
.ti-title-en { font-size: 14px; letter-spacing: .5px; }
.ti-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.ti-meta th, .ti-meta td { border: 1px solid #c9ccd1; padding: 4px 6px; text-align: start; }
.ti-meta th { background: #f4f5f7; font-weight: 600; width: 45%; }
.ti-lines th, .ti-lines td { border: 1px solid #c9ccd1; padding: 5px 6px; text-align: center; vertical-align: top; }
.ti-lines thead th { background: #f4f5f7; font-size: 11px; }
.ti-left { text-align: start !important; }
.ti-small { font-size: 10px; color: #555; word-break: break-all; }
.ti-foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-top: 12px; }
.ti-totals { max-width: 340px; }
.ti-totals th, .ti-totals td { border: 1px solid #c9ccd1; padding: 5px 8px; }
.ti-totals th { background: #f4f5f7; text-align: start; font-weight: 600; }
.ti-totals th span { font-weight: 400; font-size: 10px; color: #555; }
.ti-totals td { text-align: end; white-space: nowrap; }
.ti-grand th, .ti-grand td { font-size: 14px; font-weight: 700; background: var(--brand-gold-soft); }
.ti-notes { margin-top: 12px; border-top: 1px dashed #c9ccd1; padding-top: 6px; }

@media print {
    @page { size: A4; margin: 8mm; }
    .no-print { display: none !important; }
    .print-shell { background: #fff; }
    .tax-invoice { box-shadow: none; margin: 0; padding: 0; max-width: none; }
}

/* Tables: navy-tinted header row, like the desktop grids' header strip. */
.app-table .mud-table-head .mud-table-cell {
    background: rgba(28, 58, 98, 0.06);
    color: var(--mud-palette-primary);
    font-weight: 600;
}

/* Secondary = brand gold, but pages historically use Color.Secondary on MudText /
   MudIcon to mean "muted caption". Gold text on white is unreadable, so text and
   icon usages fall back to the muted text colour; gold stays on buttons, chips,
   progress bars and the active sidebar item (which don't use this class). */
.mud-secondary-text { color: var(--mud-palette-text-secondary) !important; }
.ti-reason { margin: 0 0 10px; padding: 6px 8px; background: var(--brand-gold-soft); border-inline-start: 3px solid var(--brand-gold); }

/* ----- Treasury ----------------------------------------------------------- */
.treasury-card { border: 1px solid var(--mud-palette-divider); border-radius: 10px;
                 border-top: 3px solid var(--mud-palette-primary); }
.treasury-total { border: 1px solid var(--mud-palette-divider); border-radius: 8px;
                  background: var(--app-highlight); color: var(--app-highlight-text); }
.amount-words { padding: 6px 10px; border-radius: 6px; background: var(--app-highlight);
                border-inline-start: 3px solid var(--brand-gold); color: var(--app-highlight-text); }

/* Printable voucher */
.voucher-print { max-width: 210mm; font-size: 13px; }
.voucher-body { margin-top: 14px; }
.voucher-body th, .voucher-body td { border: 1px solid #c9ccd1; padding: 8px 10px; text-align: start; }
.voucher-body th { background: #f4f5f7; width: 17%; white-space: nowrap; }
.voucher-amount { font-size: 16px; }
.voucher-void { margin-top: 6px; color: #c62828; font-weight: 700; border: 2px solid #c62828;
                display: inline-block; padding: 2px 10px; transform: rotate(-4deg); }
.voucher-signs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.voucher-signs div { border-top: 1px solid #111; padding-top: 6px; text-align: center; }
/* Cash handover: two people sign — the one who handed the cash over and the one who took it. */
.voucher-signs.two { grid-template-columns: repeat(2, 1fr); gap: 48px; }
.voucher-signs .sign-name { margin-top: 4px; font-weight: 700; min-height: 1.2em; border: 0; padding: 0; }
.handover-stamp { margin-top: 6px; font-weight: 700; border: 2px solid; border-radius: 4px; padding: 2px 8px; display: inline-block; }
.handover-stamp.ok { color: #2e7d32; border-color: #2e7d32; }
.handover-stamp.pending { color: #b26a00; border-color: #b26a00; }
/* Named page: only the voucher prints on A5 landscape; invoices and sheets stay A4. */
@page voucher { size: A5 landscape; margin: 8mm; }
.voucher-print { page: voucher; }

/* ----- Sales invoice counter --------------------------------------------- */
.inv-panel { border: 1px solid var(--mud-palette-divider); border-radius: 10px; }
.inv-totals { border-top: 3px solid var(--brand-gold); }
.inv-grand { font-size: 2rem; font-weight: 700; color: var(--mud-palette-primary); text-align: end; line-height: 1.2; }
.inv-grand small { font-size: .9rem; font-weight: 500; color: var(--mud-palette-text-secondary); }
.inv-payment-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; gap: 6px; align-items: center; margin-bottom: 6px; }
.barcode-box input { font-size: 1.05rem; letter-spacing: .04em; }
@media (max-width: 600px) { .inv-payment-row { grid-template-columns: 1fr; } }

/* ----- Daily treasury (يومية الخزينة) ------------------------------------ */
.session-card { border: 1px solid var(--mud-palette-divider); border-radius: 10px; border-top: 3px solid var(--brand-gold); }
.session-card.is-open { border-top-color: var(--mud-palette-success); }
.session-stat { border: 1px solid var(--mud-palette-divider); border-radius: 8px; padding: 10px 12px; height: 100%; }
.session-stat .label { font-size: .8rem; color: var(--mud-palette-text-secondary); }
.session-stat .value { font-size: 1.25rem; font-weight: 700; }
.session-debit { color: var(--mud-palette-success); }
.session-credit { color: var(--mud-palette-error); }
.session-print .ti-lines td.num, .session-print .ti-lines th.num { text-align: end; white-space: nowrap; }
.session-print .ti-lines tfoot td { font-weight: 700; background: #f4f5f7; }

/* Invoice line: unit button + manually typed price */
.inv-unit-btn { justify-content: space-between; text-transform: none; min-width: 90px; }
.inv-price-manual input { color: var(--brand-teal, #1F6B82); font-weight: 600; }

.inv-price-missing { color: var(--mud-palette-warning); display: block; line-height: 1.2; margin-top: 2px; }
/* Pickers: current row highlight readable in light and dark themes. */
.picker-current td { background: rgba(248, 178, 20, .18) !important; font-weight: 600; }
.price-picker-input { max-width: 130px; margin-inline-start: auto; }
.price-picker-input input { text-align: end; }

/* Role permission matrix */
.perm-group { border: 1px solid var(--mud-palette-divider); border-radius: 10px; }
.perm-group .mud-checkbox { margin-block: -4px; }


/* ----- Point of sale ------------------------------------------------------ */
/* The till owns the whole viewport: a fixed bar, then a two-column body that
   scrolls only inside the cart. Nothing here leaks into the rest of the app. */
.pos-shell { height: 100vh; height: 100dvh; display: flex; flex-direction: column;
             background: var(--mud-palette-background); }
.pos-bar { display: flex; align-items: center; gap: 16px; padding: 6px 14px; min-height: 52px;
           background: var(--pos-bar-bg, var(--mud-palette-primary)); color: #fff; }
.pos-bar .mud-input, .pos-bar .mud-input-label, .pos-bar .mud-select-input { color: #fff !important; }
.pos-bar .mud-input-underline:before { border-color: rgba(255,255,255,.4) !important; }
.pos-bar-start { display: flex; align-items: center; font-size: 15px; }
.pos-bar-mid { display: flex; align-items: center; gap: 12px; flex: 1; }
.pos-bar-end { display: flex; align-items: center; gap: 4px; }
.pos-bar-end .mud-icon-button { color: #fff; }
.pos-bar-select { max-width: 200px; }

.pos-body { flex: 1; display: grid; grid-template-columns: 1fr 340px; gap: 12px; padding: 12px; min-height: 0; }
/* With the item panel on, the till reads right-to-left exactly like the desktop one:
   categories, then the wall of items, then the lines, then the totals. */
.pos-body.with-board { grid-template-columns: var(--pos-cats-w, 180px) var(--pos-board-w, 1.2fr) 1.4fr 320px; }
.pos-body.with-board.no-rail { grid-template-columns: var(--pos-board-w, 1.2fr) 1.4fr 320px; }
.pos-cart { display: flex; flex-direction: column; min-height: 0;
            border: 1px solid var(--mud-palette-divider); border-radius: 10px; background: var(--mud-palette-surface); }
.pos-scan { display: flex; gap: 10px; align-items: center; padding: 10px; border-bottom: 1px solid var(--mud-palette-divider); }
.pos-scan-box { flex: 1; }
.pos-scan-box .mud-input-root { font-size: 18px; }
.pos-lines { flex: 1; overflow: auto; min-height: 0; }
.pos-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
             color: var(--mud-palette-text-secondary); }

.pos-table { width: 100%; border-collapse: collapse; }
.pos-table thead th { position: sticky; top: 0; z-index: 1; background: rgba(28, 58, 98, 0.06);
                      color: var(--mud-palette-primary); font-weight: 600; font-size: 12px;
                      padding: 8px 10px; text-align: start; }
.pos-table td { padding: 6px 10px; border-bottom: 1px solid var(--mud-palette-divider); vertical-align: middle; }
.pos-table tbody tr { cursor: pointer; }
.pos-row-active { background: var(--app-highlight-strong); }
.pos-row-active td, .pos-row-active input { color: var(--app-highlight-text) !important; }
.pos-muted { font-size: 11px; color: var(--mud-palette-text-secondary); }
.pos-qty { display: flex; align-items: center; gap: 2px; }
.pos-qty-field { max-width: 70px; }
.pos-qty-field input { text-align: center; font-weight: 600; }

.pos-side { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.pos-customer, .pos-totals, .pos-actions { border: 1px solid var(--mud-palette-divider); border-radius: 10px;
                                           background: var(--mud-palette-surface); padding: 10px; }
.pos-totals { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.pos-totals .row { display: flex; justify-content: space-between; padding: 3px 0; font-size: 14px; }
.pos-totals .grand { border-top: 1px solid var(--mud-palette-divider); margin-top: 6px; padding-top: 8px;
                     font-size: 26px; font-weight: 700; color: var(--mud-palette-primary); }
.pos-words { margin-top: 8px; padding: 6px 8px; border-radius: 6px; background: var(--app-highlight);
             color: var(--app-highlight-text); font-size: 12px; }
.pos-count { margin-top: 6px; font-size: 12px; color: var(--mud-palette-text-secondary); }
.pos-actions { display: flex; flex-direction: column; gap: 8px; }
.pos-actions-row { display: flex; gap: 8px; }
.pos-last { border-top: 1px dashed var(--mud-palette-divider); padding-top: 8px; }
.pos-key { display: inline-block; margin-inline-start: 6px; padding: 0 5px; border-radius: 4px;
           border: 1px solid currentColor; font-size: 10px; opacity: .75; }

/* Payment dialog */
.pos-pay-due { display: flex; justify-content: space-between; align-items: baseline;
               padding: 10px 12px; border-radius: 8px; background: var(--app-highlight); color: var(--app-highlight-text); }
.pos-pay-due b { font-size: 26px; }
.pos-pay-input input { font-size: 24px; text-align: center; font-weight: 700; }
.pos-quick { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.pos-pay-change { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px;
                  padding: 10px 12px; border-radius: 8px; background: rgba(46, 125, 50, .12); }
.pos-pay-change b { font-size: 24px; color: #2e7d32; }
.pos-pay-change.short { background: rgba(198, 40, 40, .12); }
.pos-pay-change.short b { color: #c62828; }

/* Item picker */
.pos-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 12px;
            max-height: 46vh; overflow: auto; }
.pos-pick-item { display: flex; flex-direction: column; gap: 2px; padding: 10px; min-height: 76px;
                 border: 1px solid var(--mud-palette-divider); border-radius: 8px; cursor: pointer;
                 background: var(--mud-palette-surface); color: inherit; text-align: start; font: inherit; }
.pos-pick-item:hover { border-color: var(--mud-palette-primary); background: rgba(28, 58, 98, .05); }
.pos-pick-item .name { font-weight: 600; font-size: 13px; }
.pos-pick-item .meta, .pos-pick-item .price { font-size: 11px; color: var(--mud-palette-text-secondary); }

@media (max-width: 1400px) {
    /* Not enough width for four columns: the category rail folds away first, then the
       board, because a cashier can still scan and search without either. */
    .pos-body.with-board { grid-template-columns: var(--pos-board-w, 1.2fr) 1.4fr 320px; }
    .pos-body.with-board .pos-rail { display: none; }
}

@media (max-width: 1100px) {
    .pos-body, .pos-body.with-board, .pos-body.with-board.no-rail { grid-template-columns: 1fr; }
    .pos-body.with-board .pos-board { display: none; }
    .pos-side { flex-direction: row; flex-wrap: wrap; }
    .pos-customer, .pos-totals, .pos-actions { flex: 1 1 280px; }
}

/* ----- Thermal receipt (80 mm roll) --------------------------------------- */
/* Its own named page so invoices stay A4 and vouchers stay A5. */
@page receipt { size: 80mm auto; margin: 3mm; }
.pos-receipt { page: receipt; width: 74mm; margin: 0 auto; padding: 6px 0; background: #fff; color: #000;
               font-family: "Tahoma", "Segoe UI", sans-serif; font-size: 11px; line-height: 1.45; }
.pos-receipt .r-head { text-align: center; }
.pos-receipt .r-name { font-size: 15px; font-weight: 700; }
.pos-receipt .r-title { margin-top: 6px; padding: 3px 0; border-block: 1px dashed #000; font-weight: 700; }
.pos-receipt .r-meta { margin-top: 6px; }
.pos-receipt .r-meta div { display: flex; justify-content: space-between; }
.pos-receipt .r-lines { width: 100%; border-collapse: collapse; margin-top: 8px; }
.pos-receipt .r-lines th { border-bottom: 1px dashed #000; font-size: 10px; padding: 3px 2px; text-align: start; }
.pos-receipt .r-lines td { padding: 3px 2px; vertical-align: top; text-align: start; }
.pos-receipt .r-lines td:not(.r-item) { text-align: end; white-space: nowrap; }
.pos-receipt .r-item { width: 46%; }
.pos-receipt .r-sub { font-size: 9px; color: #444; }
.pos-receipt .r-totals { margin-top: 8px; border-top: 1px dashed #000; padding-top: 6px; }
.pos-receipt .r-totals div { display: flex; justify-content: space-between; padding: 1px 0; }
.pos-receipt .r-grand { margin-top: 4px; padding-top: 4px; border-top: 1px solid #000; font-size: 15px; font-weight: 700; }
.pos-receipt .r-qr { margin-top: 10px; text-align: center; }
.pos-receipt .r-foot { margin-top: 10px; text-align: center; border-top: 1px dashed #000; padding-top: 6px; }

/* The narrow roll: its own named page, and a smaller type size so four columns of a
   line still fit in 54 mm. */
@page receipt58 { size: 58mm auto; margin: 2mm; }
.pos-receipt.w58 { page: receipt58; width: 54mm; font-size: 10px; }
.pos-receipt.w58 .r-name { font-size: 13px; }
.pos-receipt.w58 .r-grand { font-size: 13px; }
.pos-receipt.w58 .r-lines th { font-size: 9px; }

/* The emblem, small. A thermal head prints black or nothing, so a colour logo is
   greyscaled and hardened rather than left to the printer to dither into a smudge. */
.pos-receipt .r-logo { display: block; width: 20mm; height: auto; margin: 0 auto 4px; }
.pos-receipt.w58 .r-logo { width: 15mm; }

/* The invoice number as bars, for the scanner at the return counter. Kept narrower
   than the roll: stretched across 74 mm the bars get no easier to read, only harder
   to fit in a scanner's window. */
.pos-receipt .r-barcode { margin-top: 8px; text-align: center; }
.pos-receipt .r-barcode .code128 { display: block; width: 100%; max-width: 62mm; height: 11mm; margin: 0 auto; }
.pos-receipt.w58 .r-barcode .code128 { height: 9mm; }

/* A second copy is its own slip: its own page on screen, its own cut on the roll. */
.pos-receipt + .pos-receipt { margin-top: 14px; border-top: 1px dashed #999; padding-top: 10px; }

.rcp-preview { display: flex; justify-content: center; padding: 12px; background: #eef0f3; border-radius: 8px; }

@media print {
    .pos-receipt { width: auto; }
    .pos-receipt .r-logo { filter: grayscale(1) contrast(1.4); }
    .pos-receipt + .pos-receipt { break-before: page; margin-top: 0; border-top: 0; padding-top: 6px; }
}

.pos-branch { margin-inline-start: 10px; padding: 1px 8px; border-radius: 10px; font-size: 11px;
              background: rgba(255,255,255,.18); }
.pos-flag { margin-inline-start: 6px; padding: 0 5px; border-radius: 4px; font-size: 10px; font-weight: 600; }
.pos-flag.danger { background: rgba(198,40,40,.15); color: #c62828; }
.pos-flag.warn { background: rgba(245,124,0,.15); color: #ef6c00; }

/* ----- Money inputs ------------------------------------------------------- */
/* Numbers stay Latin and left-to-right even on an Arabic page, and they sit at
   the end of the box where the eye looks for them. Without this, a right-to-left
   context reorders "1,234.50" and a long value is clipped instead of scrolled. */
.inv-num input, .pos-qty-field input, .price-picker-input input {
    direction: ltr;
    text-align: end;
    font-variant-numeric: tabular-nums;
}
.inv-num-cell { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The price picker used to be an adornment INSIDE the field, which ate the width
   the number needed. It is a button beside the field now. */
.inv-price-cell { display: flex; align-items: center; gap: 2px; }
.inv-price-cell .mud-input-control { flex: 1 1 auto; min-width: 0; }
.inv-price-btn { flex: 0 0 auto; }

/* ----- Till skin ---------------------------------------------------------- */
/* Everything a shop can change about the till comes through these custom
   properties, set once on .pos-skin from the saved settings. No component
   branches on a colour or a size — they read a variable. */
.pos-skin { flex: 1; display: flex; flex-direction: column; min-height: 0;
            font-size: calc(1rem * var(--pos-font-scale, 1)); }
.pos-skin .pos-table td, .pos-skin .pos-table th { height: var(--pos-row-h, 38px); }

/* التصنيف — the category column */
.pos-rail { display: flex; flex-direction: column; min-height: 0; gap: 8px; padding: 10px;
            border: 1px solid var(--mud-palette-divider); border-radius: 10px;
            background: var(--mud-palette-surface); }
.pos-rail-head { font-weight: 700; font-size: 13px; color: var(--mud-palette-text-secondary); }
.pos-rail-list { display: flex; flex-direction: column; gap: 6px; overflow: auto; min-height: 0; }
.pos-rail-empty { padding: 10px; font-size: 12px; color: var(--mud-palette-text-secondary); text-align: center; }
.pos-cat { border: 0; border-radius: 8px; cursor: pointer; text-align: start; font: inherit;
           padding: 0 10px; min-height: var(--pos-row-h, 38px); line-height: 1.2;
           background: var(--pos-cat-bg, #3C3A45); color: #fff; font-size: .82em; }
.pos-cat:hover { filter: brightness(1.15); }
.pos-cat-on { outline: 3px solid var(--pos-accent, #F8B214); outline-offset: -3px; font-weight: 700; }

/* TUCH — the item wall */
.pos-board { display: flex; flex-direction: column; min-height: 0; gap: 8px; padding: 10px;
             border: 1px solid var(--mud-palette-divider); border-radius: 10px;
             background: var(--mud-palette-surface); }
.pos-board-head { display: flex; align-items: center; gap: 8px; }
.pos-board-pager { display: flex; align-items: center; gap: 2px; font-size: 12px; white-space: nowrap; }
.pos-board-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
                   color: var(--mud-palette-text-secondary); font-size: 13px; }
.pos-board-grid { flex: 1; overflow: auto; min-height: 0; display: grid; gap: var(--pos-tile-gap, 8px);
                  grid-template-columns: repeat(auto-fill, minmax(var(--pos-tile-size, 130px), 1fr));
                  align-content: start; }
.pos-tile { display: flex; flex-direction: column; align-items: stretch; justify-content: space-between;
            aspect-ratio: var(--pos-tile-aspect, 1.5); overflow: hidden; cursor: pointer;
            border: 0; border-radius: 8px; padding: 6px 6px 0; font: inherit; text-align: center;
            background: var(--pos-tile-bg, #1F6B82); color: var(--pos-tile-fg, #fff); }
.pos-tile:hover { filter: brightness(1.12); }
.pos-tile:active { transform: translateY(1px); }
.pos-tile-art { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden;
                font-size: 1.6em; font-weight: 700; opacity: .85; }
.pos-tile-art img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pos-tile-name { font-size: .78em; font-weight: 600; line-height: 1.25; overflow: hidden;
                 display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pos-tile-code { font-size: .65em; opacity: .75; }
.pos-tile-price { margin: 4px -6px 0; padding: 3px 0; font-size: .78em; font-weight: 700;
                  background: var(--pos-tile-price-bg, #0F4E5F); }

/* the same items as a list, for a shop that prefers reading to tapping */
.pos-board-list { flex: 1; overflow: auto; min-height: 0; display: flex; flex-direction: column; gap: 4px; }
.pos-listrow { display: flex; align-items: center; gap: 10px; cursor: pointer; font: inherit; text-align: start;
               padding: 0 10px; min-height: var(--pos-row-h, 38px); border-radius: 8px;
               border: 1px solid var(--mud-palette-divider); background: var(--mud-palette-surface); color: inherit; }
.pos-listrow:hover { border-color: var(--pos-accent, #F8B214); }
.pos-listrow .name { flex: 1; font-size: .82em; font-weight: 600; }
.pos-listrow .code { font-size: .7em; color: var(--mud-palette-text-secondary); }
.pos-listrow .price { font-size: .82em; font-weight: 700; }

/* ----- The till on a phone (xs) ------------------------------------------ */
/* A third stage after the 1400px and 1100px ones. The 1100px rule hides the item
   board, which on a phone would leave a cashier hand-typing barcodes — so here the
   board comes back and the board and the cart take turns instead. */
.pos-phonetabs { display: none; }
.pos-actions-total { display: flex; justify-content: space-between; align-items: baseline;
                     font-size: 1.05rem; padding-bottom: 4px; }
.pos-actions-total b { font-size: 1.3rem; }

@media (max-width: 599.98px) {
    .pos-phonetabs { display: flex; gap: 8px; padding: 8px 8px 0; }

    .pos-body { overflow: auto; padding: 8px; gap: 8px; }
    /* Undo the 1100px hide, then show one pane at a time. */
    .pos-body.with-board .pos-board { display: flex; }
    .pos-body.ph-cart .pos-board { display: none; }
    .pos-body.ph-items .pos-cart,
    .pos-body.ph-items .pos-side { display: none; }
    .pos-board-grid { --pos-tile-size: 110px; }

    /* The top bar wraps instead of giving the whole page a sideways scroll. */
    .pos-bar { flex-wrap: wrap; gap: 8px; padding: 6px 10px; }
    .pos-bar-mid { flex-basis: 100%; order: 3; }
    .pos-bar-select { max-width: none; flex: 1 1 140px; }

    /* Cart lines become cards: the hand-rolled table needs ~660px against ~351px,
       so the line total and the delete X were reachable only by side-swiping. */
    .pos-table thead { display: none; }
    .pos-table tr { display: grid; grid-template-columns: 1fr auto; gap: 4px;
                    padding: 8px; border-bottom: 1px solid var(--mud-palette-divider); }
    .pos-table td { display: block; border: 0; padding: 2px 0; }
    .pos-table td:first-child { grid-column: 1 / -1; }

    /* The -/qty/+ stepper needs ~158px in a ~56px column, so + was off-screen —
       and it is the most common gesture at a till. */
    .pos-qty { width: 100%; justify-content: space-between; gap: 8px; }
    .pos-qty-field { max-width: none; flex: 1; }

    /* Pay stays on screen with the amount beside it. */
    .pos-actions { position: sticky; inset-block-end: 0; z-index: 2;
                   box-shadow: 0 -2px 8px rgba(0, 0, 0, .12); }
}

/* ============================================================================
   Charts (the dashboard)
   Marks are drawn in the component; this file holds only the chrome around them.
   Everything here reads the MudBlazor palette variables, so light and dark follow
   the app's own theme instead of being flipped by hand.
   ============================================================================ */

.viz { width: 100%; }

/* The hover band is invisible until it is hovered — then it lifts the whole
   column slightly so the pointer has visible feedback before the tooltip lands. */
.viz-band { cursor: crosshair; }
.viz-band:hover { fill: var(--mud-palette-action-default-hover); }

.viz-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.viz-legend-item { display: inline-flex; align-items: center; gap: 6px; }

.viz-legend-item b { color: var(--mud-palette-text-primary); }

/* A square, not a line: at 10px a colour reads more reliably as a filled chip. */
.viz-swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
    flex: 0 0 auto;
}

.viz-share-track {
    display: flex;
    /* 2px of surface between segments, so two adjacent fills never merge into one. */
    gap: 2px;
    height: 14px;
    border-radius: 7px;
    overflow: hidden;
    background: var(--mud-palette-action-default-hover);
}

.viz-share-seg { min-width: 3px; }

.viz-empty {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    padding: 10px 0;
}

/* A ranked row's inline bar: the table is the data, the bar is the shape of it. */
.viz-rank {
    position: relative;
    height: 6px;
    border-radius: 3px;
    background: var(--mud-palette-action-default-hover);
    overflow: hidden;
    min-width: 60px;
}

.viz-rank > span {
    display: block;
    height: 100%;
    border-radius: 3px;
}

/* KPI tile. The delta sits under the number, never beside it — beside it, a long
   number pushes the delta off the card on a phone. */
.kpi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 96px;
    justify-content: center;
}

.kpi-label {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.kpi-value {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--mud-palette-text-primary);
}

.kpi-delta { font-size: 12px; display: flex; align-items: center; gap: 3px; }
.kpi-up { color: var(--mud-palette-success); }
.kpi-down { color: var(--mud-palette-error); }
.kpi-flat { color: var(--mud-palette-text-secondary); }

@media (max-width: 599.98px) {
    .kpi { min-height: 78px; }
    .kpi-value { font-size: 19px; }
}

/* ============================================================================
   Printing a report
   The browser's own print dialogue is also how a PDF gets made, and it is the
   one path where Arabic shaping is already solved. So the page prints the
   report and nothing else: no nav, no filters, no buttons.
   ============================================================================ */

@media print {
    body:has(#report-print) .mud-appbar,
    body:has(#report-print) .mud-drawer,
    body:has(#report-print) .app-bottom-nav,
    body:has(#report-print) .mud-snackbar-provider {
        display: none !important;
    }

    /* Everything on the page is hidden, then the report alone is brought back —
       a print stylesheet that lists what to hide always misses something. */
    body:has(#report-print) .app-content-wrap > * { display: none !important; }
    body:has(#report-print) #report-print,
    body:has(#report-print) #report-print * { display: revert !important; }
    body:has(#report-print) #report-print { display: block !important; }

    body:has(#report-print) .app-content-wrap { padding: 0 !important; }
    #report-print .app-card { box-shadow: none !important; border: none !important; padding: 0 !important; }
    #report-print .rep-table { font-size: 11px; }
    /* A long report keeps its header on every page. */
    #report-print thead { display: table-header-group; }
    #report-print tr { break-inside: avoid; }
}

/* ============================================================================
   The assistant
   A chat, laid out so the conversation owns the screen: the thread scrolls, the
   composer stays put, and the page itself never scrolls.
   ============================================================================ */

.ai-shell {
    display: flex;
    gap: 16px;
    /* Fill what is left under the app bar. 100dvh, because on a phone 100vh is
       measured against a browser chrome that is not there. */
    height: calc(100dvh - 140px);
    min-height: 420px;
}

.ai-rail {
    width: 260px;
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 10px;
    background: var(--mud-palette-surface);
    overflow: hidden;
}

.ai-threads { overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }

.ai-thread {
    position: relative;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
}

.ai-thread:hover { background: var(--mud-palette-action-default-hover); }
.ai-thread-active { background: var(--mud-palette-primary-hover); }
.ai-thread-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-thread-date { font-size: 11px; color: var(--mud-palette-text-secondary); }

/* The delete button stays out of the way until the row is pointed at. */
.ai-thread-delete { position: absolute; inset-inline-end: 4px; top: 6px; opacity: 0; }
.ai-thread:hover .ai-thread-delete { opacity: .75; }

.ai-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 10px;
    background: var(--mud-palette-surface);
    overflow: hidden;
}

.ai-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.ai-title { font-weight: 700; }
.ai-sub { font-size: 12px; color: var(--mud-palette-text-secondary); }
.ai-rail-toggle { display: none; }

.ai-thread-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ai-msg { display: flex; flex-direction: column; max-width: 86%; }
.ai-msg-user { align-self: flex-end; align-items: flex-end; }
.ai-msg-bot { align-self: flex-start; align-items: flex-start; }

.ai-bubble {
    padding: 10px 14px;
    border-radius: 14px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.ai-msg-user .ai-bubble {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    border-end-end-radius: 4px;
}

.ai-msg-bot .ai-bubble {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
    border-end-start-radius: 4px;
}

/* Markdown coming out of the model: enough styling to be readable, not enough to
   fight the rest of the app. */
.ai-bubble p { margin: 0 0 8px; }
.ai-bubble p:last-child { margin-bottom: 0; }
.ai-bubble ul, .ai-bubble ol { margin: 4px 0 8px; padding-inline-start: 22px; }
.ai-bubble li { margin: 2px 0; }
.ai-bubble h1, .ai-bubble h2, .ai-bubble h3 { font-size: 15px; font-weight: 700; margin: 10px 0 6px; }
.ai-bubble code {
    font-family: Consolas, monospace; font-size: 12px;
    background: var(--mud-palette-background); padding: 1px 5px; border-radius: 4px;
}
.ai-bubble table { border-collapse: collapse; margin: 8px 0; font-size: 13px; width: 100%; }
.ai-bubble th, .ai-bubble td {
    border: 1px solid var(--mud-palette-divider); padding: 5px 8px; text-align: start;
}
.ai-bubble th { background: var(--mud-palette-background); font-weight: 600; }
/* Figures inside an answer stay Latin and left-to-right even on an Arabic page. */
.ai-bubble td:not(:first-child) { font-variant-numeric: tabular-nums; }

/* Where the answer came from. Small, quiet, and always there. */
.ai-sources {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
    margin-top: 5px; padding-inline: 4px;
    font-size: 11px; color: var(--mud-palette-text-secondary);
}
.ai-source-failed { color: var(--mud-palette-error); }

/* Follow-ups. The assistant knows what it could answer next better than the user
   does, so it offers; the chip simply asks the question again. */
.ai-suggests { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; padding-inline: 4px; }
.ai-suggest {
    border: 1px dashed var(--mud-palette-divider);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    border-radius: 16px; padding: 6px 12px; font: inherit; font-size: 12px;
    cursor: pointer; min-height: 34px; text-align: start;
}
.ai-suggest:hover { border-style: solid; border-color: var(--mud-palette-primary); color: var(--mud-palette-primary); }

/* An answer the assistant could not give. Marked, not hidden. */
.ai-bubble-puzzled { border-inline-start: 3px solid var(--mud-palette-warning); }

.ai-welcome { margin: auto; text-align: center; max-width: 620px; display: grid; gap: 10px; }
.ai-welcome-title { font-size: 18px; font-weight: 700; }
.ai-welcome-text { color: var(--mud-palette-text-secondary); font-size: 13px; }

.ai-starters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; }

.ai-starter {
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border-radius: 18px;
    padding: 7px 14px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    /* 44px of touch target even though the text is small. */
    min-height: 40px;
}
.ai-starter:hover { border-color: var(--mud-palette-primary); color: var(--mud-palette-primary); }

.ai-tools { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 14px; font-size: 11px; }
.ai-tool-chip {
    border: 1px solid var(--mud-palette-divider); border-radius: 12px; padding: 2px 9px;
    color: var(--mud-palette-text-secondary);
}

.ai-composer {
    display: flex; align-items: flex-end; gap: 10px;
    padding: 10px 14px; border-top: 1px solid var(--mud-palette-divider);
}
.ai-composer .mud-input-control { flex: 1 1 auto; }

.ai-disclaimer {
    padding: 0 14px 8px; font-size: 11px; color: var(--mud-palette-text-secondary); text-align: center;
}

/* Three dots while it works. The only animation in the app, and it earns its place:
   a question can take several seconds of looking things up. */
.ai-typing { display: flex; gap: 4px; align-items: center; padding: 14px; }
.ai-typing span {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--mud-palette-text-secondary);
    animation: ai-blink 1.4s infinite both;
}
.ai-typing span:nth-child(2) { animation-delay: .2s; }
.ai-typing span:nth-child(3) { animation-delay: .4s; }

@keyframes ai-blink {
    0%, 80%, 100% { opacity: .25; }
    40% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .ai-typing span { animation: none; opacity: .6; }
}

@media (max-width: 959.98px) {
    .ai-shell { height: calc(100dvh - 190px); }
    .ai-rail-toggle { display: inline-flex; }
    .ai-rail {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        z-index: 1300;
        width: 84vw; max-width: 320px;
        transform: translateX(-110%);
        transition: transform .2s ease;
        border-radius: 0;
    }
    html[dir="rtl"] .ai-rail { transform: translateX(110%); }
    .ai-rail-open { transform: none !important; }
    .ai-msg { max-width: 94%; }
}

/* ============================================================================
   Shelf labels
   One label per page of the roll, at the size in print settings. Every size in a
   label is in mm and pt, never px, so the label on paper is the label in the
   settings. Laid out in BarcodeLabel.razor with the desktop's proportions.
   ============================================================================ */

.bc-label {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    color: #000;
    font-family: Arial, "Tahoma", sans-serif;
    text-align: center;
}
/* One line each, cut with an ellipsis rather than wrapped — the desktop's NoWrap +
   EllipsisCharacter. A wrapped item name would push the price off the label. */
.bc-company, .bc-digits, .bc-item, .bc-price {
    flex: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bc-digits, .bc-price { font-weight: 700; }
.bc-digits { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.bc-bars { flex: none; }
.bc-bars .code128 { display: block; width: 100%; height: 100%; }

/* On screen the roll is never shown: the preview is the one to look at. */
.lbl-roll { display: none; }

.lbl-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 900px) { .lbl-grid { grid-template-columns: 1fr; } }

.lbl-preview {
    display: flex; justify-content: center; align-items: center;
    min-height: 140px; padding: 18px;
    background: repeating-linear-gradient(45deg, rgba(0,0,0,.03) 0 8px, transparent 8px 16px);
    border-radius: 8px;
}
/* A 40 mm label is about 150 px on a screen — shown larger so it can be checked, and
   outlined so its edge is visible against the page. */
.lbl-preview .bc-label { zoom: 1.8; outline: 1px dashed rgba(0,0,0,.35); }
.lbl-mono, .lbl-mono input { font-family: "Consolas", "Courier New", monospace; }

@media print {
    body:has(#label-print) .mud-appbar,
    body:has(#label-print) .mud-drawer,
    body:has(#label-print) .mud-drawer-overlay,
    body:has(#label-print) .app-bottom-nav,
    body:has(#label-print) .mud-snackbar-provider {
        display: none !important;
    }
    body:has(#label-print) .app-content-wrap > *:not(#label-print) { display: none !important; }

    /* The main content is pushed down for the app bar and across for the drawer. On an
       A4 report that is a blank strip; on a label roll it moves every label off its
       sticker. So every offset between the page edge and the first label is zeroed. */
    body:has(#label-print),
    body:has(#label-print) .mud-layout,
    body:has(#label-print) .mud-main-content,
    body:has(#label-print) .app-content,
    body:has(#label-print) .app-content-wrap {
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        background: #fff !important;
    }

    #label-print { display: block !important; }
    #label-print .bc-label { page: label-roll; break-after: page; }
    #label-print .bc-label:last-child { break-after: auto; }
}

/* ============================================================================
   Treasury statement
   The البيان is the widest thing on the row and the one people read, so it gets the
   room and may wrap; the numbers stay on one line.
   ============================================================================ */
.trs-statement { min-width: 280px; white-space: normal; line-height: 1.5; }

/* The desktop's footer: opening, in, out, closing — and the net in words. */
.trs-totals {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 16px;
    padding: 12px 16px; border: 1px solid var(--mud-palette-divider); border-radius: 8px;
}
.trs-totals > div { display: flex; flex-direction: column; gap: 2px; }
.trs-totals > div > span { font-size: 12px; color: var(--mud-palette-text-secondary); }
.trs-totals > div > b { font-size: 16px; font-variant-numeric: tabular-nums; }
.trs-totals .in b { color: var(--mud-palette-success); }
.trs-totals .out b { color: var(--mud-palette-error); }
.trs-totals .net b { font-size: 18px; color: var(--mud-palette-primary); }
.trs-totals .words, .trs-totals .count { grid-column: 1 / -1; font-size: 13px; }
.trs-totals .words { font-weight: 600; }
.trs-totals .count { color: var(--mud-palette-text-secondary); font-size: 12px; }
@media (max-width: 700px) { .trs-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The shop's logo on the company screen — shown on a neutral square, as it prints. */
.company-logo-box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-height: 120px; padding: 12px; border: 1px dashed var(--mud-palette-divider); border-radius: 10px;
    background: #fff; color: #6b7280; }
.company-logo-box img { max-width: 100%; max-height: 110px; object-fit: contain; }

/* A5 invoice: the same document, set smaller so the nine columns still fit 148 mm. */
@page a5doc { size: A5; margin: 6mm; }
.tax-invoice.paper-a5 { page: a5doc; max-width: 148mm; padding: 9mm 7mm; font-size: 9.5px; line-height: 1.35; }
.tax-invoice.paper-a5 .ti-party .ti-name { font-size: 11px; }
.tax-invoice.paper-a5 .ti-title-ar { font-size: 15px; }
.tax-invoice.paper-a5 .ti-title-en { font-size: 11px; }
.tax-invoice.paper-a5 .ti-logo { width: 15mm; }
.tax-invoice.paper-a5 .ti-barcode .code128 { width: 40mm; height: 8mm; }
.tax-invoice.paper-a5 .ti-meta { gap: 6px; margin: 8px 0; }
.tax-invoice.paper-a5 .ti-meta th, .tax-invoice.paper-a5 .ti-meta td { padding: 2px 4px; }
.tax-invoice.paper-a5 .ti-lines th, .tax-invoice.paper-a5 .ti-lines td { padding: 3px 3px; }
.tax-invoice.paper-a5 .ti-lines thead th { font-size: 8px; }
.tax-invoice.paper-a5 .ti-small { font-size: 8px; }
.tax-invoice.paper-a5 .ti-totals { max-width: 250px; }
.tax-invoice.paper-a5 .ti-totals th, .tax-invoice.paper-a5 .ti-totals td { padding: 3px 5px; }
.tax-invoice.paper-a5 .ti-totals th span { font-size: 8px; }
.tax-invoice.paper-a5 .ti-grand th, .tax-invoice.paper-a5 .ti-grand td { font-size: 11px; }
.ti-logo { object-fit: contain; max-height: 22mm; }
/* The paper the print button uses, beside its label. */
.print-paper-tag { margin-inline-start: 6px; font-size: .75em; opacity: .75; font-weight: 400; }

/* Assistant: the buttons under an answer that open its screen or report. */
.ai-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; max-width: 100%; }
.ai-actions .mud-button-root { text-transform: none; font-weight: 600; }
.ai-bubble ol { padding-inline-start: 1.4em; margin: .3em 0; }
.ai-bubble ol li { margin: .15em 0; }
.ai-bubble h3 { font-size: 1.02rem; margin: 0 0 .35em; color: var(--mud-palette-primary); }

/* ============================================================================
   Invoice screens (sales, purchases): the lines get the room, and what the user works with
   stays in reach however long the invoice grows.
   ============================================================================ */

/* The barcode row rides under the app bar while the lines scroll beneath it. */
.inv-barcode-bar {
    position: sticky;
    top: var(--mud-appbar-height, 64px);
    z-index: 6;
    background: var(--mud-palette-surface);
    margin: -4px -4px 8px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

/* A line brought into view lands clear of the sticky bar above and the footer below. */
.inv-lines tbody tr { scroll-margin-top: 150px; scroll-margin-bottom: 130px; }
.inv-lines td, .inv-lines th { padding-block: 6px; }

/* Sales: the totals, what is paid and left, and Save travel with the screen. */
.inv-side {
    position: sticky;
    top: calc(var(--mud-appbar-height, 64px) + 12px);
    max-height: calc(100vh - var(--mud-appbar-height, 64px) - 24px);
    overflow-y: auto;
}
@media (max-width: 1279.98px) {
    .inv-side { position: static; max-height: none; overflow: visible; }
}

/* Purchases: the total and Save at the foot of the screen. */
.inv-footer {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 16px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 10px;
    box-shadow: 0 -6px 18px -10px rgba(0, 0, 0, .35);
}
.inv-footer-total { display: flex; align-items: baseline; gap: 10px; }
.inv-footer-total span { color: var(--mud-palette-text-secondary); }
.inv-footer-total b { font-size: 1.5rem; color: var(--mud-palette-primary); font-variant-numeric: tabular-nums; }
@media (max-width: 599.98px) {
    .inv-footer { bottom: calc(72px + env(safe-area-inset-bottom)); }
    .inv-barcode-bar { top: 56px; }
}

/* Quantity and price boxes on the invoice lines: the spin arrows used to eat the room and clip
   the number (1500 read as 150). Arrows hidden — the keyboard and typing are what is used here. */
.inv-lines .inv-num .mud-input-numeric-spin { display: none; }
.inv-lines .inv-num input { min-width: 4.5ch; text-align: center; }

/* ============================================================================
   Dashboard (`.dashx`): flat and plain. Surfaces, hairline borders and the page's own
   palette — no gradients, no shadows, no perspective. A figure is a number in a box; a
   chart is flat bars from zero. Dark mode is the same rules on the dark palette.
   ============================================================================ */
.dashx .dx-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.dashx .dx-head h1 { font-size: 1.45rem; margin: 0; line-height: 1.2; }
.dashx .dx-sub { color: var(--mud-palette-text-secondary); font-size: 13px; }
.dashx .dx-filter { border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; margin-bottom: 12px; }

.dashx .dx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 12px; }
.dashx .dx-tile {
    display: flex; flex-direction: column; gap: 3px; padding: 12px 14px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-inline-start: 4px solid var(--acc, var(--mud-palette-primary));
    border-radius: 10px;
}
.dashx .dx-tile .kpi-label { font-size: 12.5px; color: var(--mud-palette-text-secondary); display: flex; align-items: center; gap: 6px; }
.dashx .dx-tile .kpi-label .mud-icon-root { font-size: 17px; color: var(--acc, var(--mud-palette-primary)); }
.dashx .dx-tile .kpi-value { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dashx .dx-tile-link { cursor: pointer; }
.dashx .dx-tile-link:hover { background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, .04)); }
.dashx .dx-tile-link:focus-visible { outline: 2px solid var(--acc, var(--mud-palette-primary)); outline-offset: 2px; }
.dashx .acc-blue   { --acc: #2a78d6; }
.dashx .acc-green  { --acc: #1a8a5f; }
.dashx .acc-orange { --acc: #d9622b; }
.dashx .acc-violet { --acc: #5b4bbd; }
.dashx .acc-red    { --acc: #d14343; }
.dashx .acc-gray   { --acc: #6b7785; }

.dashx .app-card { border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; box-shadow: none; }
.dashx .dx-tabs .mud-tabs-toolbar { border-bottom: 1px solid var(--mud-palette-lines-default); margin-bottom: 14px; }
.dashx .dx-tabs .mud-tab { text-transform: none; font-weight: 600; min-width: 0; }
.dashx .chart-toggle .mud-icon-button { padding: 3px; }

/* Ranked comparison bars (VizHBars) */
.vh { display: flex; flex-direction: column; gap: 10px; }
.vh-row { display: grid; grid-template-columns: minmax(110px, 30%) 1fr minmax(96px, auto); align-items: center; gap: 10px; }
.vh-label { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.vh-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vh-label small { color: var(--mud-palette-text-secondary); font-size: 11px; }
.vh-bars { display: flex; flex-direction: column; gap: 3px; }
.vh-bar { height: 12px; border-radius: 3px; min-width: 2px; }
.vh-bar.vh-prev, .vh-sw.vh-prev { background: var(--mud-palette-lines-inputs, #9aa4b2); opacity: .55; }
.vh-bar.vh-prev { height: 6px; }
.vh-value { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.vh-value small { font-size: 11px; }
.vh-legend { display: flex; gap: 16px; margin-top: 12px; font-size: 12px; color: var(--mud-palette-text-secondary); }
.vh-legend span { display: inline-flex; align-items: center; gap: 6px; }
.vh-sw { width: 14px; height: 8px; border-radius: 2px; display: inline-block; }
@media (max-width: 599.98px) {
    .vh-row { grid-template-columns: 1fr; gap: 3px; }
    .vh-value { align-items: flex-start; flex-direction: row; gap: 8px; }
    .dashx .dx-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================================
   Treasury report (`.trsr`): three big numbers, a card per account, the days, the
   movements. Flat surfaces and hairlines like the dashboard — and it prints on its own.
   ============================================================================ */
.trsr .trsr-filter, .trsr .trsr-panel { border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; background: var(--mud-palette-surface); }
.trsr .trsr-h { margin: 18px 0 8px; }

.trsr-totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 8px; }
.trsr-total {
    display: flex; flex-direction: column; gap: 2px; padding: 14px 18px;
    background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default);
    border-inline-start: 5px solid var(--t, #6b7785); border-radius: 10px;
}
.trsr-total .lbl { color: var(--mud-palette-text-secondary); font-size: 13px; font-weight: 600; }
.trsr-total b { font-size: 1.9rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.trsr-total small { color: var(--mud-palette-text-secondary); }
.trsr-in { --t: #1a8a5f; }
.trsr-in b { color: #1a8a5f; }
.trsr-out { --t: #d14343; }
.trsr-out b { color: #d14343; }
.trsr-net { --t: #2a78d6; }
.trsr-net b { color: #2a78d6; }
.trsr-net.neg b { color: #d14343; }

.trsr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 6px; }
.trsr-card {
    display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; cursor: pointer;
    background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default);
    border-top: 4px solid var(--c, #6b7785); border-radius: 10px;
}
.trsr-card:hover { background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, .04)); }
.trsr-card:focus-visible { outline: 2px solid var(--c, var(--mud-palette-primary)); outline-offset: 2px; }
.trsr-card.role-1 { --c: #2a78d6; }   /* daily drawer */
.trsr-card.role-2 { --c: #5b4bbd; }   /* main treasury */
.trsr-card.role-3 { --c: #1a8a5f; }   /* bank */
.trsr-card.role-4 { --c: #d9622b; }   /* wallet */
.trsr-card-head { display: flex; align-items: center; gap: 8px; }
.trsr-card-head .ico { color: var(--c); display: inline-flex; }
.trsr-card-head .nm { font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trsr-card-head .role { font-size: 11px; color: var(--mud-palette-text-secondary); }
.trsr-card-main { display: flex; flex-direction: column; }
.trsr-card-main .lbl { font-size: 12px; color: var(--mud-palette-text-secondary); }
.trsr-card-main b { font-size: 1.6rem; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--mud-palette-text-primary); }
.trsr-card-sub { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--mud-palette-text-secondary); }
.trsr-card-sub b { font-variant-numeric: tabular-nums; color: var(--mud-palette-text-primary); }
.trsr-card-sub b.kpi-down { color: var(--mud-palette-error); }
.trsr-card-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px;
    border-top: 1px solid var(--mud-palette-lines-default); padding-top: 6px; color: var(--mud-palette-text-secondary); }
.trsr-card-foot b { font-variant-numeric: tabular-nums; color: var(--mud-palette-text-primary); }

.trsr-table td { vertical-align: top; }
.trsr-table td.trs-statement { min-width: 280px; }
.trsr-acc { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.trsr-tag { margin-inline-start: 6px; padding: 1px 6px; border-radius: 8px; background: var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary); font-size: 11px; }
.trsr-row-transfer td { color: var(--mud-palette-text-secondary); }
.trsr-row-reversal td { color: var(--mud-palette-text-secondary); font-style: italic; }
.trsr tr.trsr-sel td { background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent); }

@media (max-width: 899.98px) {
    .trsr-totals { grid-template-columns: 1fr; }
    .trsr-total b { font-size: 1.6rem; }
}

@media print {
    body:has(.trsr) .mud-appbar,
    body:has(.trsr) .mud-drawer,
    body:has(.trsr) .app-bottom-nav,
    body:has(.trsr) .mud-snackbar-provider,
    body:has(.trsr) .mud-breadcrumbs { display: none !important; }
    body:has(.trsr) .app-content-wrap { padding: 0 !important; }
    .trsr .trsr-filter, .trsr .no-print { display: none !important; }
    .trsr .trsr-card, .trsr .trsr-total, .trsr .trsr-panel { box-shadow: none; break-inside: avoid; }
    .trsr .trsr-cards { grid-template-columns: repeat(3, 1fr); }
    .trsr thead { display: table-header-group; }
    .trsr tr { break-inside: avoid; }
    .trsr { font-size: 12px; }
}

/* Sales payment row: where the money will land (no treasury to choose on a sale). */
.inv-pay-dest { display: flex; align-items: center; gap: 6px; margin: -2px 0 8px; font-size: 12.5px; color: var(--mud-palette-text-secondary); }
.inv-pay-dest .mud-icon-root { color: var(--mud-palette-primary); }
.inv-pay-dest b { color: var(--mud-palette-text-primary); }

/* Treasury report: collections by payment method — the small dashboard on top. */
.trsr-methods { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-bottom: 4px; }
.trsr-method {
    display: flex; flex-direction: column; gap: 2px; padding: 10px 14px;
    background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default);
    border-inline-start: 4px solid var(--k, #6b7785); border-radius: 10px;
}
.trsr-method .mh { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--mud-palette-text-secondary); }
.trsr-method .mh .ico { color: var(--k, #6b7785); display: inline-flex; }
.trsr-method b { font-size: 1.45rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.trsr-method small { font-size: 11.5px; color: var(--mud-palette-text-secondary); }
.trsr-method.kind-1 { --k: #2a78d6; }   /* cash */
.trsr-method.kind-2 { --k: #5b4bbd; }   /* card */
.trsr-method.kind-3 { --k: #1a8a5f; }   /* bank transfer / InstaPay */
.trsr-method.kind-4 { --k: #6b7785; }   /* cheque */
.trsr-method.kind-5 { --k: #d9622b; }   /* wallet */
.trsr-method-total { --k: #1a8a5f; background: color-mix(in srgb, var(--k) 8%, var(--mud-palette-surface)); }
.trsr-method-total b { color: #1a8a5f; }

/* Tabs: MudBlazor 7's moving slider is placed from the LEFT edge, so in the right-to-left layout it sat
   under the wrong tab (the first tab is at the right). The active tab carries its own underline instead —
   the same in both directions. */
.mud-tabs .mud-tab-slider { display: none; }
.mud-tabs .mud-tab.mud-tab-active { box-shadow: inset 0 -2px 0 var(--mud-palette-primary); }

/* The thumbs under an answer: there when wanted, quiet when not. */
.ai-feedback { display: flex; gap: 2px; margin-top: 2px; padding-inline: 2px; }
.ai-feedback .mud-icon-button { padding: 3px; opacity: .55; }
.ai-feedback .mud-icon-button:hover { opacity: 1; }