/* ----- 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;
    --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;
    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;
    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; background: var(--mud-palette-background); }
.app-content { background: var(--mud-palette-background); min-height: calc(100vh - 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;
    width: 100%;
    z-index: 1000;
}

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

/* ----- Mobile breakpoints (xs only — < 600px) ---------------------------- */
@media (max-width: 599.98px) {
    /* Make room for the bottom nav (56px tall + 8px breathing room) */
    .app-content-wrap.has-bottom-nav { padding-bottom: 72px; }

    /* Single-column page header on phone */
    .app-page-header { flex-direction: column; align-items: stretch; }
    .app-page-header-actions { justify-content: flex-end; }

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

    /* Modals fill the screen on phone (less wasted space) */
    .app-modal-body { min-width: 0; }
}

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

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

.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; 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-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(--brand-gold-soft); }
.amount-words { padding: 6px 10px; border-radius: 6px; background: var(--brand-gold-soft);
                border-inline-start: 3px solid var(--brand-gold); color: #3a2f00; }

/* 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; }
/* 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: 1fr 1fr 1fr auto; gap: 6px; align-items: center; margin-bottom: 6px; }
.inv-payment-row > .mud-input-control:nth-child(4) { grid-column: 1 / 4; }
.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; }