/* =============================================================================
   RioSoft — app.css
   -----------------------------------------------------------------------------
   The ONE stylesheet of the desktop ERP. It replaced sixteen global files
   (desktop-app, riosoft-theme, unified-theme, topnav, toolbar-dark, sidebar-*,
   mobile-responsive, fast-nav, searchable-select, toast, global-font-size, ltr,
   embedded-compact, pdf-template-picker, mixed-unit-lines).

   Order matters:
     1. Fonts            local woff2, no network
     2. Tokens           the small palette every page draws from (light + dark)
     3. Legacy aliases   old variable names pointed at the tokens, so pages
                         written against the previous themes follow along
     4. Type scale       the --app-font-* contract Settings → Project fonts writes
     5. Base
     6. Shell            header, nav, menus, drawer, content area (full screen)
     7. Components       buttons, fields, panels, cards, tables, badges, …
     8. Bootstrap bridge Bootstrap's own variables set from the tokens
     9. Dialogs, searchable select, toast, PDF picker
    10. Dashboard
    11. Responsive, print

   Page stylesheets (assets/css/<page>.css) only carry layout for their own
   screen; colour comes from the tokens below.
   ============================================================================= */

/* ============================== 1. Fonts ================================== */
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url(../vendor/fonts/inter-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-weight:500;font-display:swap;src:url(../vendor/fonts/inter-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-weight:600;font-display:swap;src:url(../vendor/fonts/inter-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-weight:700;font-display:swap;src:url(../vendor/fonts/inter-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-weight:800 900;font-display:swap;src:url(../vendor/fonts/inter-800.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Noto Sans Arabic";font-weight:300 400;font-display:swap;src:url(../vendor/fonts/noto-sans-arabic-400.woff2) format("woff2")}
@font-face{font-family:"Noto Sans Arabic";font-weight:500;font-display:swap;src:url(../vendor/fonts/noto-sans-arabic-500.woff2) format("woff2")}
@font-face{font-family:"Noto Sans Arabic";font-weight:600;font-display:swap;src:url(../vendor/fonts/noto-sans-arabic-600.woff2) format("woff2")}
@font-face{font-family:"Noto Sans Arabic";font-weight:700;font-display:swap;src:url(../vendor/fonts/noto-sans-arabic-700.woff2) format("woff2")}
@font-face{font-family:"Noto Sans Arabic";font-weight:800 900;font-display:swap;src:url(../vendor/fonts/noto-sans-arabic-800.woff2) format("woff2")}

/* ============================== 2. Tokens ================================= */
/* Light is the base; html.dark-theme (set by assets/js/theme.js before first
   paint, following the OS unless the user picked one) swaps the values. */
:root{
  /* surfaces */
  --ui-bg:#f3f4f6;--ui-surface:#ffffff;--ui-surface-2:#f7f8fa;--ui-surface-3:#eef0f3;--ui-field:#ffffff;--ui-nav:#ffffff;
  /* ink */
  --ui-text:#1d2129;--ui-text-2:#363c45;--ui-muted:#5f6670;--ui-faint:#8c939c;
  /* lines */
  --ui-line:#dcdfe4;--ui-line-soft:#e8eaee;--ui-line-strong:#c3c8cf;
  /* accent — orange; --ui-accent-ink is the text that sits ON the accent */
  --ui-accent:#f28c1a;--ui-accent-ink:#1f1306;--ui-accent-text:#c2610a;--ui-accent-strong:#c2610a;--ui-accent-soft:#fff1e1;--ui-accent-line:#f7c896;--ui-ring:rgba(242,140,26,.22);
  /* status */
  --ui-green:#1c9655;--ui-green-soft:#e4f5ea;--ui-green-line:#b7e2c7;
  --ui-red:#d2483c;--ui-red-soft:#fdecea;--ui-red-line:#f4c7c2;
  --ui-amber:#b7791f;--ui-amber-soft:#fdf3dc;--ui-amber-line:#f1d9a6;
  --ui-blue:#2563eb;--ui-blue-soft:#e8f0fe;--ui-blue-line:#bcd2fb;
  --ui-violet:#7c3aed;--ui-violet-soft:#f1ebfe;
  /* shape + depth */
  --ui-h:38px;--ui-h-sm:32px;--ui-r:10px;--ui-r-lg:14px;
  --ui-shadow:0 1px 2px rgba(20,24,30,.05);
  --ui-shadow-pop:0 14px 36px rgba(20,24,30,.14),0 2px 6px rgba(20,24,30,.06);
  --ui-overlay:rgba(20,24,30,.38);
  --ui-hero-a:#ffa940;--ui-hero-b:#ef7f0e;
  color-scheme:light;
}
html.dark-theme,html[data-theme=dark]{
  --ui-bg:#1b1d21;--ui-surface:#23262b;--ui-surface-2:#2a2e34;--ui-surface-3:#33383f;--ui-field:#1e2125;--ui-nav:#15171a;
  --ui-text:#f1f2f4;--ui-text-2:#d2d5da;--ui-muted:#9aa0a9;--ui-faint:#6f757e;
  --ui-line:#383c43;--ui-line-soft:#2d3136;--ui-line-strong:#4a4f57;
  --ui-accent:#f5901a;--ui-accent-ink:#1f1306;--ui-accent-text:#ffad4d;--ui-accent-strong:#c96a0d;--ui-accent-soft:#3b2816;--ui-accent-line:#6b4419;--ui-ring:rgba(245,144,26,.25);
  --ui-green:#5fbf86;--ui-green-soft:#1d3226;--ui-green-line:#2d5a3f;
  --ui-red:#e26a60;--ui-red-soft:#3b2422;--ui-red-line:#5a302c;
  --ui-amber:#e3ab52;--ui-amber-soft:#382c17;--ui-amber-line:#5c4520;
  --ui-blue:#78a6ff;--ui-blue-soft:#1c2a44;--ui-blue-line:#2b4170;
  --ui-violet:#a78bfa;--ui-violet-soft:#2c2340;
  --ui-shadow:0 1px 2px rgba(0,0,0,.3);
  --ui-shadow-pop:0 18px 44px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.3);
  --ui-overlay:rgba(8,9,11,.6);
  --ui-hero-a:#ffa940;--ui-hero-b:#e8780a;
  color-scheme:dark;
}

/* ========================== 3. Legacy aliases ============================= */
/* Names used by page styles written for the earlier themes. A page that still
   defines one of these locally keeps its own value; everywhere else it lands on
   the token. */
:root{
  /* Plain names for page styles. A page that defines one of these keeps its own
     value for its own content; the shell reads only the --ui-* tokens. */
  --bg:var(--ui-bg);--surface:var(--ui-surface);--surface-2:var(--ui-surface-2);--surface-3:var(--ui-surface-3);--text:var(--ui-text);--muted:var(--ui-muted);--faint:var(--ui-faint);--line:var(--ui-line);--line-soft:var(--ui-line-soft);--line-strong:var(--ui-line-strong);--accent:var(--ui-accent);--accent-ink:var(--ui-accent-ink);--accent-text:var(--ui-accent-text);--accent-strong:var(--ui-accent-strong);--accent-soft:var(--ui-accent-soft);--accent-line:var(--ui-accent-line);--green:var(--ui-green);--green-soft:var(--ui-green-soft);--green-line:var(--ui-green-line);--red:var(--ui-red);--red-soft:var(--ui-red-soft);--red-line:var(--ui-red-line);--amber:var(--ui-amber);--amber-soft:var(--ui-amber-soft);--amber-line:var(--ui-amber-line);--blue:var(--ui-blue);--blue-soft:var(--ui-blue-soft);--blue-line:var(--ui-blue-line);--violet:var(--ui-violet);--violet-soft:var(--ui-violet-soft);--shadow:var(--ui-shadow);--shadow-pop:var(--ui-shadow-pop);--overlay:var(--ui-overlay);
  --text-primary:var(--ui-text);--text-secondary:var(--ui-muted);--text-tertiary:var(--ui-faint);--text-muted:var(--ui-muted);
  --surface-primary:var(--ui-surface);--surface-secondary:var(--ui-surface-2);--surface-tertiary:var(--ui-surface-3);--surface-hover:var(--ui-surface-3);
  --surface-stroke:var(--ui-line-soft);--surface-stroke-default:var(--ui-line);--border-color:var(--ui-line);--border:var(--ui-line);
  --bg-card:var(--ui-surface);--bg-primary:var(--ui-bg);--bg-secondary:var(--ui-surface-2);--card-bg:var(--ui-surface);
  --primary:var(--ui-accent-strong);--primary-dark:var(--ui-accent-text);--primary-light:var(--ui-accent-soft);--primary-lighter:var(--ui-accent-soft);
  --win-accent:var(--ui-accent);--win-accent-dark:var(--ui-accent-text);--win-border:var(--ui-line);
  --win11-primary:var(--ui-accent-strong);--win11-accent:var(--ui-accent);--win11-text:var(--ui-text);--win11-text-secondary:var(--ui-muted);
  --win11-border:var(--ui-line);--win11-surface:var(--ui-surface);--win11-card:var(--ui-surface);--win11-bg:var(--ui-bg);--win11-soft:var(--ui-accent-soft);
  --win11-success:var(--ui-green);--win11-danger:var(--ui-red);--win11-warning:var(--ui-amber);--win11-info:var(--ui-blue);--win11-purple:var(--ui-violet);
  --win11-radius:var(--ui-r);--win11-shadow:var(--ui-shadow);
  --success:var(--ui-green);--success-bg:var(--ui-green-soft);--success-light:var(--ui-green-soft);
  --danger:var(--ui-red);--error:var(--ui-red);--error-bg:var(--ui-red-soft);--danger-bg:var(--ui-red-soft);--danger-light:var(--ui-red-soft);
  --warning:var(--ui-amber);--warning-bg:var(--ui-amber-soft);--warning-light:var(--ui-amber-soft);--warning-border:var(--ui-amber-line);
  --info:var(--ui-blue);--info-bg:var(--ui-blue-soft);--info-light:var(--ui-blue-soft);--info-border:var(--ui-blue-line);
  --space-xs:4px;--space-sm:8px;--space-md:12px;--space-lg:16px;--space-xl:24px;
  --radius-sm:6px;--radius-md:8px;--radius-lg:var(--ui-r-lg);--radius:var(--ui-r);
  --shadow-sm:var(--ui-shadow);--shadow-md:var(--ui-shadow-pop);--shadow-lg:var(--ui-shadow-pop);--shadow-dialog:var(--ui-shadow-pop);
  --transition-fast:.12s ease;--transition:.2s ease;
}

/* ============================ 4. Type scale =============================== */
/* Settings → Project fonts (includes/project_fonts.php) rewrites these
   variables at runtime; the selectors below own every size, so an admin can
   rescale the whole app from one screen. */
:root{
  --app-font-family:"Inter","Noto Sans Arabic","Segoe UI",Tahoma,system-ui,sans-serif;
  --app-font-size:13px;
  --app-font-xs:10.5px;--app-font-sm:11.5px;--app-font-md:14px;--app-font-lg:16px;--app-font-xl:19px;--app-font-display:23px;
  --app-font-table:var(--app-font-size);
  --app-font-table-head:max(10px,calc(var(--app-font-table) - 1px));
  --app-font-table-dense:max(11px,calc(var(--app-font-table) - 1.5px));
  --app-font-table-dense-head:max(10px,calc(var(--app-font-table) - 2.5px));
  --app-font-grid-stat:var(--app-font-md);
}
@media screen{
  body{font-size:var(--app-font-size)!important;font-family:var(--app-font-family)!important}
  /* One family everywhere — icon fonts, code and anything marked keep-font excepted. */
  body *:where(:not(i,svg,svg *,canvas,.fa,.fas,.far,.fal,.fab,[class*="fa-"],[class*="bi-"],[class*="icon"],[class*="logo"],.material-icons,.material-symbols-outlined,pre,code,kbd,samp,pre *,code *,.mono,[class*="mono"],[style*="monospace"],[style*="Consolas"],[data-keep-font],[data-keep-font] *,.keep-font,.keep-font *)){font-family:var(--app-font-family)!important}
  .fa,.fas,.far,.fal,.fad,[class^="fa-"],[class*=" fa-"]{font-family:"Font Awesome 6 Free","Font Awesome 6 Pro","Font Awesome 5 Free","FontAwesome"!important}
  .fab,[class^="fa-brands"],[class*=" fa-brands"]{font-family:"Font Awesome 6 Brands","Font Awesome 5 Brands"!important}
  .bi,[class^="bi-"],[class*=" bi-"],.bi::before,[class^="bi-"]::before,[class*=" bi-"]::before{font-family:"bootstrap-icons"!important}
  /* Baseline: plain text lands on the body size; classes below lift what must read bigger. */
  body *:where(:not(i,svg,svg *,canvas,.fa,.fas,.far,.fal,.fab,[class*="fa-"],[class*="bi-"],[class*="icon"],[class*="logo"],[class*="close"],.material-icons,.material-symbols-outlined,[data-keep-font-size],[data-keep-font-size] *,.keep-font-size,.keep-font-size *)){font-size:var(--app-font-size)!important}
  .stat-value,.hr-stat-value,.sp-row.grand .sp-row-value,.pos-totals-row.grand .pos-totals-value{font-size:var(--app-font-display)!important;line-height:1.15}
  .purchase-summary-metric.tp-grand .tp-grand-value,.ws-stat .ws-stat-value,.win-stat-card .value,.summary-tile .value,.zone-stat .value,.dispatch-summary .summary-value,.win-summary-item .count,.stat-info h3,.tile h3,.summary-value{font-size:var(--app-font-xl)!important;line-height:1.2}
  .page-title,.page-header .page-title,.page-title-bar h1,.cashvan-page-title h1,.content-header .title,.modal-title,.panel-title,.card-header,.card-title,.section-title,.empty-state-title,.hr-hero h1,.hr-profile-title,.topbar .title,.pos-empty h4,#paidAmountInput,h1{font-size:var(--app-font-lg)!important}
  .kpi-value{font-size:var(--app-font-lg)!important}
  .sale-picker-hdr,.sale-pk-stock,.van-bar-stat .value,.sp-head,.sp-row.grand .sp-row-label,.sp-btn.primary,.pos-line-total,.pos-qty-value,.pos-btn-save,.pos-btn-del,.pos-search-item-price .main,.sp-disc-row input,#totalBaseDisplay,.remaining-value,h2,h3,.gl-hbar-item,.gl-hbar-select,.drb-text,.sp-customer .sp-row-value,.sp-disc-row select,.pos-disc-group .pos-tbl-select,.pos-gift-badge,.pos-promo-badge,.pos-search-item-info h4,.tv-search-item .pname,.psearch .pname,.do-search-item-info h4,.adj-search-item .s-name,.search-item .item-name,.invoice-search-item .inv-number,.psearch .pnm,.psearch .pprice,.do-search-item-price .main,.invoice-search-item .inv-total,.search-item .item-prices .main-price{font-size:var(--app-font-md)!important}
  .form-hint,.field-hint,.text-muted small,figcaption,small,.stat-label,.stat-sub,.kpi-label,.pos-col-idx,.pos-product-code,.pos-tbl-select,.sp-customer-warn,.pos-search-item-info .meta,.tv-search-item .pmeta,.tv-search-item .pstock,.psearch .pmeta,.adj-search-item .s-code,.adj-search-item .s-stock,.search-item .item-code,.search-item .item-unit,.invoice-search-item .inv-date,.invoice-search-item .inv-supplier,.cs-meta,.dsr-meta,.psearch .pright,.psearch .pstock,.stock-badge,.unit-badge,.qty-badge,.badge,.pill,.status-badge{font-size:var(--app-font-sm)!important}
  .pos-oos-badge,.pos-paid-info,.kbd-hint,.kbd-hint kbd,.sp-customer-title,.card-count,.pos-supplier-tag,.pos-search-supplier-header,.vo-stat-label,.vo-ops-metric .label{font-size:var(--app-font-xs)!important}
  table,.data-table,.table,.report-table,table td,.data-table td,.table td,.pos-table,.pos-product-name,.pos-tbl-input{font-size:var(--app-font-table)!important}
  table th,.data-table th,.table th,.report-table th,.pos-table thead th{font-size:var(--app-font-table-head)!important}
  td *:where(:not(i,svg,svg *,[class*="fa-"],[class*="bi-"],[class*="icon"],[data-keep-font-size],.keep-font-size,.keep-font-size *)),th *:where(:not(i,svg,svg *,[class*="fa-"],[class*="bi-"],[class*="icon"],[data-keep-font-size],.keep-font-size,.keep-font-size *)){font-size:inherit!important}
  body.so-workspace .data-table,body.so-workspace .data-table td,.vo-table,.vo-table td{font-size:var(--app-font-table-dense)!important}
  body.so-workspace .data-table th,.vo-table th{font-size:var(--app-font-table-dense-head)!important}
  body.so-workspace .stats-after-table .stat-value,.vo-stat-value,.vo-ops-metric .value,.vo-mix-net{font-size:var(--app-font-grid-stat)!important}
  .vo-page-header h1,.vo-modal-header h3,.vo-ops-head h2{font-size:var(--app-font-lg)!important}
}
@media screen and (pointer:coarse){
  body input[type=text],body input[type=number],body input[type=search],body input[type=tel],body input[type=email],body input[type=password],body input[type=date],body textarea,body select{font-size:16px!important}
}

/* ================================ Icons =================================== */
/* One icon set: Lucide line icons (assets/vendor/lucide, ISC licence), served
   locally. Existing markup keeps its Font Awesome / Bootstrap Icons class
   names; each name below is drawn with the matching Lucide glyph, and a name
   with no match falls back to the local Font Awesome glyph. */
@font-face{font-family:"lucide";src:url(../vendor/lucide/lucide.woff2) format("woff2"),url(../vendor/lucide/lucide.woff) format("woff");font-display:block}
html .bi-archive::before,html .bi-arrow-clockwise::before,html .bi-arrow-counterclockwise::before,html .bi-arrow-left::before,html .bi-arrow-left-right::before,html .bi-arrow-repeat::before,html .bi-arrow-return-left::before,html .bi-arrow-return-right::before,html .bi-arrow-right::before,html .bi-bag-check::before,html .bi-bank2::before,html .bi-bar-chart::before,html .bi-box-seam::before,html .bi-box-seam-fill::before,html .bi-building-fill::before,html .bi-calculator::before,html .bi-calculator-fill::before,html .bi-calendar-check::before,html .bi-calendar-event::before,html .bi-card-heading::before,html .bi-card-text::before,html .bi-cart-plus::before,html .bi-cart-plus-fill::before,html .bi-cart-x::before,html .bi-cart3::before,html .bi-check-circle::before,html .bi-check-circle-fill::before,html .bi-check-lg::before,html .bi-check2-circle::before,html .bi-check2-square::before,html .bi-chevron-down::before,html .bi-chevron-left::before,html .bi-chevron-right::before,html .bi-clipboard2-pulse::before,html .bi-clock-history::before,html .bi-cloud-upload::before,html .bi-collection::before,html .bi-credit-card-2-front::before,html .bi-crosshair::before,html .bi-dash::before,html .bi-download::before,html .bi-envelope-fill::before,html .bi-eraser::before,html .bi-exclamation-octagon::before,html .bi-exclamation-octagon-fill::before,html .bi-exclamation-triangle::before,html .bi-exclamation-triangle-fill::before,html .bi-eye::before,html .bi-file-earmark::before,html .bi-file-earmark-excel::before,html .bi-file-earmark-pdf::before,html .bi-file-earmark-plus::before,html .bi-file-earmark-text::before,html .bi-file-earmark-text-fill::before,html .bi-file-excel::before,html .bi-file-pdf::before,html .bi-file-text::before,html .bi-files::before,html .bi-flag-fill::before,html .bi-funnel::before,html .bi-geo-alt::before,html .bi-geo-alt-fill::before,html .bi-gift::before,html .bi-graph-up::before,html .bi-graph-up-arrow::before,html .bi-grid-3x3-gap::before,html .bi-grip-vertical::before,html .bi-hash::before,html .bi-hourglass-split::before,html .bi-house::before,html .bi-image::before,html .bi-inbox::before,html .bi-inbox-fill::before,html .bi-info-circle::before,html .bi-info-circle-fill::before,html .bi-journal-text::before,html .bi-layout-three-columns::before,html .bi-lightning-charge::before,html .bi-link-45deg::before,html .bi-list::before,html .bi-lock-fill::before,html .bi-map::before,html .bi-palette::before,html .bi-patch-check::before,html .bi-patch-check-fill::before,html .bi-pause-btn::before,html .bi-pause-circle::before,html .bi-pencil::before,html .bi-pencil-square::before,html .bi-percent::before,html .bi-person-badge::before,html .bi-person-badge-fill::before,html .bi-person-fill::before,html .bi-person-plus::before,html .bi-play-circle::before,html .bi-plus::before,html .bi-plus-circle::before,html .bi-plus-lg::before,html .bi-printer::before,html .bi-printer-fill::before,html .bi-receipt::before,html .bi-receipt-cutoff::before,html .bi-safe2::before,html .bi-save::before,html .bi-save2::before,html .bi-search::before,html .bi-send::before,html .bi-send-fill::before,html .bi-shield-exclamation::before,html .bi-shop::before,html .bi-shop-window::before,html .bi-sign-stop-fill::before,html .bi-slash-circle::before,html .bi-stack::before,html .bi-star::before,html .bi-star-fill::before,html .bi-sticky::before,html .bi-sticky-fill::before,html .bi-tag::before,html .bi-tags::before,html .bi-telephone::before,html .bi-telephone-fill::before,html .bi-tools::before,html .bi-trash::before,html .bi-trash3::before,html .bi-trash3-fill::before,html .bi-truck::before,html .bi-truck-fill::before,html .bi-ui-checks-grid::before,html .bi-upc::before,html .bi-upc-scan::before,html .bi-upload::before,html .bi-wallet2::before,html .bi-wifi-off::before,html .bi-wrench::before,html .bi-wrench-adjustable-circle::before,html .bi-x-circle::before,html .bi-x-lg::before,html .fa-address-book::before,html .fa-angle-double-down::before,html .fa-angle-double-up::before,html .fa-angles-left::before,html .fa-angles-right::before,html .fa-arrow-down::before,html .fa-arrow-left::before,html .fa-arrow-left-long::before,html .fa-arrow-right::before,html .fa-arrow-right-arrow-left::before,html .fa-arrow-right-long::before,html .fa-arrow-right-to-bracket::before,html .fa-arrow-rotate-left::before,html .fa-arrow-trend-down::before,html .fa-arrow-trend-up::before,html .fa-arrow-up::before,html .fa-arrow-up-right-from-square::before,html .fa-arrows-left-right::before,html .fa-arrows-rotate::before,html .fa-backward-step::before,html .fa-bag-shopping::before,html .fa-balance-scale::before,html .fa-ban::before,html .fa-barcode::before,html .fa-bars::before,html .fa-basket-shopping::before,html .fa-bell::before,html .fa-bolt::before,html .fa-book::before,html .fa-book-open::before,html .fa-book-open-reader::before,html .fa-box::before,html .fa-box-open::before,html .fa-boxes-stacked::before,html .fa-briefcase::before,html .fa-building::before,html .fa-building-columns::before,html .fa-bullseye::before,html .fa-calculator::before,html .fa-calendar::before,html .fa-calendar-alt::before,html .fa-calendar-day::before,html .fa-calendar-days::before,html .fa-camera::before,html .fa-cart-plus::before,html .fa-cart-shopping::before,html .fa-cash-register::before,html .fa-chart-area::before,html .fa-chart-bar::before,html .fa-chart-column::before,html .fa-chart-line::before,html .fa-chart-pie::before,html .fa-chart-simple::before,html .fa-check::before,html .fa-check-circle::before,html .fa-chevron-circle-down::before,html .fa-chevron-down::before,html .fa-chevron-left::before,html .fa-chevron-right::before,html .fa-chevron-up::before,html .fa-circle::before,html .fa-circle-check::before,html .fa-circle-exclamation::before,html .fa-circle-info::before,html .fa-circle-notch::before,html .fa-circle-question::before,html .fa-circle-xmark::before,html .fa-city::before,html .fa-clipboard-check::before,html .fa-clipboard-list::before,html .fa-clock::before,html .fa-clock-rotate-left::before,html .fa-close::before,html .fa-code-branch::before,html .fa-code-merge::before,html .fa-cog::before,html .fa-coins::before,html .fa-copy::before,html .fa-credit-card::before,html .fa-cubes::before,html .fa-database::before,html .fa-diagram-project::before,html .fa-dollar-sign::before,html .fa-dolly::before,html .fa-download::before,html .fa-draw-polygon::before,html .fa-edit::before,html .fa-ellipsis::before,html .fa-ellipsis-vertical::before,html .fa-envelope::before,html .fa-equals::before,html .fa-eraser::before,html .fa-exchange-alt::before,html .fa-exclamation-circle::before,html .fa-exclamation-triangle::before,html .fa-expand::before,html .fa-external-link-alt::before,html .fa-eye::before,html .fa-eye-slash::before,html .fa-file::before,html .fa-file-alt::before,html .fa-file-circle-minus::before,html .fa-file-circle-plus::before,html .fa-file-contract::before,html .fa-file-csv::before,html .fa-file-excel::before,html .fa-file-invoice::before,html .fa-file-invoice-dollar::before,html .fa-file-lines::before,html .fa-file-pdf::before,html .fa-file-signature::before,html .fa-filter::before,html .fa-flask::before,html .fa-floppy-disk::before,html .fa-folder::before,html .fa-folder-open::before,html .fa-folder-tree::before,html .fa-forward-step::before,html .fa-gauge::before,html .fa-gauge-high::before,html .fa-gavel::before,html .fa-gear::before,html .fa-gears::before,html .fa-gift::before,html .fa-globe::before,html .fa-hand-holding-dollar::before,html .fa-history::before,html .fa-home::before,html .fa-hourglass::before,html .fa-hourglass-end::before,html .fa-hourglass-half::before,html .fa-house::before,html .fa-id-card::before,html .fa-image::before,html .fa-inbox::before,html .fa-industry::before,html .fa-info-circle::before,html .fa-key::before,html .fa-layer-group::before,html .fa-lightbulb::before,html .fa-link::before,html .fa-link-slash::before,html .fa-list::before,html .fa-list-check::before,html .fa-location-crosshairs::before,html .fa-location-dot::before,html .fa-lock::before,html .fa-lock-open::before,html .fa-magnifying-glass::before,html .fa-map::before,html .fa-map-location-dot::before,html .fa-map-marker-alt::before,html .fa-minus::before,html .fa-mobile-screen::before,html .fa-money-bill::before,html .fa-money-bill-transfer::before,html .fa-money-bill-wave::before,html .fa-money-check::before,html .fa-money-check-dollar::before,html .fa-not-equal::before,html .fa-note-sticky::before,html .fa-paper-plane::before,html .fa-pause::before,html .fa-pen::before,html .fa-pen-ruler::before,html .fa-pen-to-square::before,html .fa-people-arrows::before,html .fa-percent::before,html .fa-phone::before,html .fa-play::before,html .fa-plus::before,html .fa-power-off::before,html .fa-print::before,html .fa-qrcode::before,html .fa-question-circle::before,html .fa-ranking-star::before,html .fa-receipt::before,html .fa-right-from-bracket::before,html .fa-right-left::before,html .fa-rotate::before,html .fa-rotate-left::before,html .fa-route::before,html .fa-ruler::before,html .fa-ruler-combined::before,html .fa-sack-dollar::before,html .fa-save::before,html .fa-scale-balanced::before,html .fa-scale-unbalanced-flip::before,html .fa-scroll::before,html .fa-search::before,html .fa-shield::before,html .fa-shield-halved::before,html .fa-shopping-cart::before,html .fa-sign-out-alt::before,html .fa-signature::before,html .fa-signs-post::before,html .fa-sitemap::before,html .fa-sliders::before,html .fa-spinner::before,html .fa-square-check::before,html .fa-square-plus::before,html .fa-stamp::before,html .fa-star::before,html .fa-store::before,html .fa-sync::before,html .fa-table::before,html .fa-table-cells::before,html .fa-table-columns::before,html .fa-table-list::before,html .fa-tachometer-alt::before,html .fa-tag::before,html .fa-tags::before,html .fa-thumbtack::before,html .fa-times::before,html .fa-times-circle::before,html .fa-toggle-off::before,html .fa-toggle-on::before,html .fa-trash::before,html .fa-trash-alt::before,html .fa-trash-can::before,html .fa-trash-can-arrow-up::before,html .fa-triangle-exclamation::before,html .fa-trophy::before,html .fa-truck::before,html .fa-truck-arrow-right::before,html .fa-truck-fast::before,html .fa-truck-field::before,html .fa-truck-loading::before,html .fa-truck-ramp-box::before,html .fa-undo::before,html .fa-up-right-and-down-left-from-center::before,html .fa-upload::before,html .fa-user::before,html .fa-user-check::before,html .fa-user-clock::before,html .fa-user-edit::before,html .fa-user-gear::before,html .fa-user-group::before,html .fa-user-pen::before,html .fa-user-plus::before,html .fa-user-shield::before,html .fa-user-slash::before,html .fa-user-tag::before,html .fa-user-tie::before,html .fa-user-xmark::before,html .fa-users::before,html .fa-users-gear::before,html .fa-users-viewfinder::before,html .fa-van-shuttle::before,html .fa-vault::before,html .fa-wallet::before,html .fa-warehouse::before,html .fa-whatsapp::before,html .fa-window-restore::before,html .fa-xmark::before{font-family:"lucide"!important;font-weight:normal!important;font-style:normal;speak:never;-webkit-font-smoothing:antialiased}
html .bi-archive::before{content:"\e041"}
html .fa-arrow-down::before{content:"\e042"}
html .fa-arrow-left::before,html .bi-arrow-left::before{content:"\e048"}
html .fa-arrow-right::before,html .bi-arrow-right::before{content:"\e049"}
html .fa-arrow-up::before{content:"\e04a"}
html .fa-ranking-star::before{content:"\e04f"}
html .fa-ban::before,html .bi-slash-circle::before{content:"\e051"}
html .fa-money-bill-wave::before,html .fa-money-bill::before,html .fa-money-check-dollar::before,html .fa-money-check::before{content:"\e052"}
html .fa-bell::before{content:"\e059"}
html .fa-book::before{content:"\e05e"}
html .fa-book-open::before,html .fa-book-open-reader::before{content:"\e05f"}
html .fa-briefcase::before{content:"\e062"}
html .fa-calendar::before,html .fa-calendar-alt::before,html .bi-calendar-event::before{content:"\e063"}
html .fa-camera::before{content:"\e064"}
html .fa-chart-pie::before{content:"\e06b"}
html .fa-check::before,html .bi-check-lg::before{content:"\e06c"}
html .fa-chevron-down::before,html .bi-chevron-down::before{content:"\e06d"}
html .fa-chevron-left::before,html .bi-chevron-left::before{content:"\e06e"}
html .fa-chevron-right::before,html .bi-chevron-right::before{content:"\e06f"}
html .fa-chevron-up::before{content:"\e070"}
html .fa-angle-double-down::before{content:"\e071"}
html .fa-angles-left::before{content:"\e072"}
html .fa-angles-right::before{content:"\e073"}
html .fa-angle-double-up::before{content:"\e074"}
html .fa-circle::before{content:"\e076"}
html .fa-circle-exclamation::before,html .fa-exclamation-circle::before{content:"\e077"}
html .bi-pause-btn::before,html .bi-pause-circle::before{content:"\e07f"}
html .bi-play-circle::before{content:"\e080"}
html .bi-plus-circle::before{content:"\e081"}
html .fa-circle-question::before,html .fa-question-circle::before{content:"\e082"}
html .fa-circle-xmark::before,html .fa-times-circle::before,html .bi-x-circle::before{content:"\e084"}
html .fa-clipboard-list::before,html .bi-clipboard2-pulse::before{content:"\e086"}
html .fa-clock::before{content:"\e087"}
html .bi-cloud-upload::before{content:"\e091"}
html .fa-coins::before{content:"\e097"}
html .fa-table-columns::before,html .bi-layout-three-columns::before{content:"\e099"}
html .fa-copy::before{content:"\e09e"}
html .bi-arrow-return-left::before{content:"\e0a1"}
html .bi-arrow-return-right::before{content:"\e0a2"}
html .fa-credit-card::before,html .bi-credit-card-2-front::before{content:"\e0aa"}
html .bi-crosshair::before{content:"\e0ac"}
html .fa-database::before{content:"\e0ad"}
html .fa-dollar-sign::before{content:"\e0b1"}
html .fa-download::before,html .bi-download::before{content:"\e0b2"}
html .fa-ellipsis::before{content:"\e0b6"}
html .fa-ellipsis-vertical::before{content:"\e0b7"}
html .fa-arrow-up-right-from-square::before,html .fa-external-link-alt::before{content:"\e0b9"}
html .fa-eye::before,html .bi-eye::before{content:"\e0ba"}
html .fa-eye-slash::before{content:"\e0bb"}
html .fa-file::before,html .bi-file-earmark::before{content:"\e0c0"}
html .fa-file-circle-minus::before{content:"\e0c6"}
html .fa-file-circle-plus::before,html .bi-file-earmark-plus::before{content:"\e0c9"}
html .fa-file-pdf::before,html .fa-file-lines::before,html .fa-file-alt::before,html .fa-file-contract::before,html .bi-card-text::before,html .bi-file-earmark-pdf::before,html .bi-file-pdf::before,html .bi-file-earmark-text::before,html .bi-file-earmark-text-fill::before,html .bi-file-text::before{content:"\e0cc"}
html .bi-files::before{content:"\e0cf"}
html .bi-flag-fill::before{content:"\e0d1"}
html .fa-flask::before{content:"\e0d5"}
html .fa-folder::before{content:"\e0d7"}
html .fa-filter::before,html .bi-funnel::before{content:"\e0dc"}
html .fa-gavel::before{content:"\e0e0"}
html .fa-gift::before,html .bi-gift::before{content:"\e0e1"}
html .fa-code-branch::before{content:"\e0e2"}
html .fa-code-merge::before{content:"\e0e4"}
html .fa-globe::before{content:"\e0e8"}
html .fa-table-cells::before,html .bi-grid-3x3-gap::before{content:"\e0e9"}
html .bi-grip-vertical::before{content:"\e0eb"}
html .bi-hash::before{content:"\e0ef"}
html .fa-house::before,html .fa-home::before,html .bi-house::before{content:"\e0f5"}
html .fa-image::before,html .bi-image::before{content:"\e0f6"}
html .fa-inbox::before,html .bi-inbox::before,html .bi-inbox-fill::before{content:"\e0f7"}
html .fa-circle-info::before,html .fa-info-circle::before,html .bi-info-circle::before,html .bi-info-circle-fill::before{content:"\e0f9"}
html .fa-key::before{content:"\e0fd"}
html .bi-ui-checks-grid::before{content:"\e0ff"}
html .fa-link::before,html .bi-link-45deg::before{content:"\e102"}
html .fa-list::before,html .bi-list::before{content:"\e106"}
html .fa-spinner::before,html .fa-circle-notch::before{content:"\e10a"}
html .fa-lock::before,html .bi-lock-fill::before{content:"\e10b"}
html .fa-lock-open::before{content:"\e10c"}
html .fa-arrow-right-to-bracket::before{content:"\e10d"}
html .fa-right-from-bracket::before,html .fa-sign-out-alt::before{content:"\e10e"}
html .fa-envelope::before,html .bi-envelope-fill::before{content:"\e10f"}
html .fa-map::before,html .bi-map::before{content:"\e110"}
html .fa-location-dot::before,html .fa-map-marker-alt::before,html .bi-geo-alt::before,html .bi-geo-alt-fill::before{content:"\e111"}
html .fa-up-right-and-down-left-from-center::before,html .fa-expand::before{content:"\e113"}
html .fa-bars::before{content:"\e115"}
html .fa-whatsapp::before{content:"\e116"}
html .fa-minus::before,html .bi-dash::before{content:"\e11c"}
html .fa-sitemap::before{content:"\e125"}
html .bi-exclamation-octagon::before,html .bi-exclamation-octagon-fill::before{content:"\e127"}
html .bi-sign-stop-fill::before{content:"\e128"}
html .fa-box::before,html .fa-dolly::before,html .bi-box-seam::before,html .bi-box-seam-fill::before{content:"\e129"}
html .fa-pause::before{content:"\e12e"}
html .fa-pen::before{content:"\e12f"}
html .fa-percent::before,html .bi-percent::before{content:"\e132"}
html .fa-phone::before,html .bi-telephone::before,html .bi-telephone-fill::before{content:"\e133"}
html .fa-sack-dollar::before{content:"\e13a"}
html .fa-play::before{content:"\e13c"}
html .fa-plus::before,html .bi-plus::before,html .bi-plus-lg::before{content:"\e13d"}
html .fa-power-off::before{content:"\e140"}
html .fa-print::before,html .bi-printer::before,html .bi-printer-fill::before{content:"\e141"}
html .fa-rotate::before,html .fa-arrows-rotate::before,html .fa-sync::before{content:"\e145"}
html .bi-arrow-repeat::before{content:"\e146"}
html .fa-rotate-left::before,html .fa-arrow-rotate-left::before,html .bi-arrow-counterclockwise::before{content:"\e148"}
html .bi-arrow-clockwise::before{content:"\e149"}
html .fa-ruler-combined::before,html .fa-ruler::before,html .fa-pen-ruler::before{content:"\e14b"}
html .fa-save::before,html .fa-floppy-disk::before,html .bi-save::before,html .bi-save2::before{content:"\e14d"}
html .fa-magnifying-glass::before,html .fa-search::before,html .bi-search::before{content:"\e151"}
html .fa-paper-plane::before,html .bi-send::before,html .bi-send-fill::before{content:"\e152"}
html .fa-gear::before,html .fa-cog::before,html .fa-gears::before{content:"\e154"}
html .fa-shield-halved::before,html .fa-shield::before{content:"\e158"}
html .fa-bag-shopping::before,html .bi-bag-check::before{content:"\e15b"}
html .fa-cart-shopping::before,html .fa-shopping-cart::before,html .fa-cart-plus::before,html .bi-cart-plus::before,html .bi-cart-plus-fill::before,html .bi-cart-x::before,html .bi-cart3::before{content:"\e15c"}
html .fa-backward-step::before{content:"\e15f"}
html .fa-forward-step::before{content:"\e160"}
html .fa-mobile-screen::before{content:"\e163"}
html .fa-pen-to-square::before,html .fa-edit::before,html .bi-pencil-square::before{content:"\e172"}
html .fa-square-plus::before{content:"\e173"}
html .fa-star::before,html .bi-star::before,html .bi-star-fill::before{content:"\e176"}
html .fa-table-list::before,html .fa-table::before{content:"\e17d"}
html .fa-tag::before,html .bi-tag::before{content:"\e17f"}
html .fa-bullseye::before{content:"\e180"}
html .fa-toggle-off::before{content:"\e18b"}
html .fa-toggle-on::before{content:"\e18c"}
html .fa-trash::before,html .bi-trash::before{content:"\e18d"}
html .fa-trash-can::before,html .fa-trash-alt::before,html .bi-trash3::before,html .bi-trash3-fill::before{content:"\e18e"}
html .fa-arrow-trend-down::before{content:"\e190"}
html .fa-arrow-trend-up::before,html .bi-graph-up-arrow::before{content:"\e191"}
html .fa-triangle-exclamation::before,html .fa-exclamation-triangle::before,html .bi-exclamation-triangle::before,html .bi-exclamation-triangle-fill::before{content:"\e193"}
html .fa-truck::before,html .fa-truck-fast::before,html .fa-truck-arrow-right::before,html .fa-truck-field::before,html .fa-truck-loading::before,html .fa-truck-ramp-box::before,html .bi-truck::before,html .bi-truck-fill::before{content:"\e194"}
html .fa-link-slash::before{content:"\e19c"}
html .fa-upload::before,html .bi-upload::before{content:"\e19e"}
html .fa-user::before,html .bi-person-fill::before{content:"\e19f"}
html .fa-user-check::before{content:"\e1a0"}
html .fa-user-plus::before,html .bi-person-plus::before{content:"\e1a2"}
html .fa-user-slash::before,html .fa-user-xmark::before{content:"\e1a3"}
html .fa-users::before,html .fa-people-arrows::before{content:"\e1a4"}
html .bi-wifi-off::before{content:"\e1af"}
html .bi-tools::before,html .bi-wrench::before,html .bi-wrench-adjustable-circle::before{content:"\e1b1"}
html .fa-xmark::before,html .fa-times::before,html .fa-close::before,html .bi-x-lg::before{content:"\e1b2"}
html .fa-bolt::before,html .bi-lightning-charge::before{content:"\e1b4"}
html .fa-calculator::before,html .fa-cash-register::before,html .bi-calculator::before,html .bi-calculator-fill::before{content:"\e1bc"}
html .fa-equals::before{content:"\e1bd"}
html .fa-not-equal::before{content:"\e1be"}
html .fa-gauge-high::before,html .fa-gauge::before,html .fa-tachometer-alt::before{content:"\e1bf"}
html .fa-lightbulb::before{content:"\e1c2"}
html .fa-building::before,html .bi-building-fill::before{content:"\e1cc"}
html .fa-list-check::before{content:"\e1d0"}
html .fa-van-shuttle::before{content:"\e1d4"}
html .fa-location-crosshairs::before{content:"\e1db"}
html .bi-palette::before{content:"\e1dd"}
html .fa-qrcode::before{content:"\e1df"}
html .fa-clock-rotate-left::before,html .fa-history::before,html .bi-clock-history::before{content:"\e1f5"}
html .bi-pencil::before{content:"\e1f9"}
html .bi-shield-exclamation::before{content:"\e1fe"}
html .fa-wallet::before,html .bi-wallet2::before{content:"\e204"}
html .fa-scale-balanced::before,html .fa-balance-scale::before,html .fa-scale-unbalanced-flip::before{content:"\e212"}
html .fa-clipboard-check::before{content:"\e219"}
html .fa-circle-check::before,html .fa-check-circle::before,html .bi-check-circle::before,html .bi-check-circle-fill::before,html .bi-check2-circle::before{content:"\e226"}
html .fa-building-columns::before,html .bi-bank2::before{content:"\e23a"}
html .bi-patch-check::before,html .bi-patch-check-fill::before{content:"\e241"}
html .fa-folder-open::before{content:"\e247"}
html .fa-arrows-left-right::before,html .bi-arrow-left-right::before{content:"\e24a"}
html .fa-thumbtack::before{content:"\e259"}
html .fa-eraser::before,html .bi-eraser::before{content:"\e28f"}
html .fa-city::before{content:"\e290"}
html .fa-hourglass-half::before,html .fa-hourglass-end::before,html .fa-hourglass::before,html .bi-hourglass-split::before{content:"\e296"}
html .fa-sliders::before{content:"\e29a"}
html .fa-industry::before{content:"\e29f"}
html .fa-undo::before{content:"\e2a1"}
html .fa-chart-bar::before{content:"\e2a2"}
html .fa-chart-column::before,html .fa-chart-simple::before,html .bi-bar-chart::before{content:"\e2a3"}
html .fa-chart-line::before,html .bi-graph-up::before{content:"\e2a5"}
html .bi-calendar-check::before{content:"\e2b7"}
html .fa-calendar-day::before,html .fa-calendar-days::before{content:"\e2b9"}
html .fa-box-open::before{content:"\e2cc"}
html .fa-trash-can-arrow-up::before{content:"\e2cd"}
html .fa-boxes-stacked::before,html .fa-cubes::before{content:"\e2d0"}
html .fa-scroll::before{content:"\e2ed"}
html .fa-note-sticky::before,html .bi-sticky::before,html .bi-sticky-fill::before{content:"\e303"}
html .fa-file-excel::before,html .fa-file-csv::before,html .bi-file-earmark-excel::before,html .bi-file-excel::before{content:"\e326"}
html .fa-folder-tree::before{content:"\e33c"}
html .fa-users-gear::before,html .fa-user-gear::before{content:"\e342"}
html .fa-tags::before,html .bi-tags::before{content:"\e35c"}
html .fa-trophy::before{content:"\e373"}
html .fa-stamp::before{content:"\e3bb"}
html .fa-file-invoice-dollar::before,html .fa-receipt::before,html .bi-receipt::before,html .bi-receipt-cutoff::before{content:"\e3d3"}
html .fa-store::before,html .bi-shop::before,html .bi-shop-window::before{content:"\e3e4"}
html .fa-warehouse::before{content:"\e3e6"}
html .fa-money-bill-transfer::before,html .fa-right-left::before,html .fa-arrow-right-arrow-left::before,html .fa-exchange-alt::before{content:"\e417"}
html .fa-diagram-project::before{content:"\e425"}
html .fa-window-restore::before{content:"\e426"}
html .fa-user-tie::before,html .fa-user-tag::before,html .fa-user-clock::before{content:"\e468"}
html .fa-user-group::before{content:"\e46e"}
html .fa-arrow-left-long::before{content:"\e48f"}
html .fa-arrow-right-long::before{content:"\e490"}
html .fa-chart-area::before{content:"\e4d3"}
html .fa-chevron-circle-down::before{content:"\e4dd"}
html .fa-basket-shopping::before{content:"\e4ea"}
html .fa-layer-group::before,html .bi-collection::before,html .bi-stack::before{content:"\e529"}
html .fa-draw-polygon::before{content:"\e52b"}
html .fa-barcode::before,html .bi-upc::before,html .bi-upc-scan::before{content:"\e535"}
html .fa-map-location-dot::before{content:"\e53d"}
html .fa-route::before{content:"\e53e"}
html .fa-signs-post::before{content:"\e540"}
html .fa-address-book::before{content:"\e54d"}
html .fa-square-check::before,html .bi-check2-square::before{content:"\e559"}
html .fa-users-viewfinder::before{content:"\e579"}
html .fa-vault::before,html .bi-safe2::before{content:"\e58f"}
html .bi-journal-text::before{content:"\e598"}
html .fa-file-invoice::before{content:"\e5ac"}
html .fa-hand-holding-dollar::before{content:"\e5b8"}
html .fa-file-signature::before,html .fa-signature::before{content:"\e5f2"}
html .fa-user-pen::before,html .fa-user-edit::before{content:"\e5fc"}
html .fa-id-card::before,html .bi-card-heading::before,html .bi-person-badge::before,html .bi-person-badge-fill::before{content:"\e617"}
html .fa-user-shield::before{content:"\e647"}
.fa,.fas,.far,.fab,.fa-solid,.fa-regular,.fa-brands,.bi{display:inline-block;line-height:1;font-style:normal;text-rendering:auto}

/* ================================ 5. Base ================================= */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ui-bg);color:var(--ui-text);line-height:1.45;-webkit-font-smoothing:antialiased}
/* Pages with the app frame: header on top, the content area owns the scroll.
   Standalone pages (login, print) keep normal document scrolling. */
body:has(>.desktop-app){display:flex;flex-direction:column;overflow:hidden}
body.theme-transitioning,body.theme-transitioning *{transition:background-color .25s,border-color .25s,color .25s!important}
button,input,select,textarea{font:inherit;color:inherit}
:where(a){color:var(--ui-accent-text);text-decoration:none}
:where(a):hover{text-decoration:underline}
:where(h1,h2,h3,h4,h5,h6){margin:0 0 .5em;font-weight:700;line-height:1.3;color:var(--ui-text)}
:where(p){margin:0 0 .75em}
hr{border:0;border-top:1px solid var(--ui-line-soft);margin:14px 0}
img{max-width:100%}
::selection{background:var(--ui-accent-soft);color:var(--ui-text)}
:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--ui-line);border-radius:10px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background-color:var(--ui-line-strong)}
::-webkit-scrollbar-track{background:transparent}
[dir=rtl] .flip{transform:scaleX(-1)}
svg.i{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
[hidden]{display:none!important}

/* ================================ 6. Shell ================================ */
/* Header: brand · navigation · actions — one row, 60px. */
.hdr{height:60px;flex:none;display:flex;align-items:center;gap:12px;padding:0 14px;background:var(--ui-nav);border-bottom:1px solid var(--ui-line-soft);position:relative;z-index:50}
.hdr .brand{display:flex;align-items:center;gap:10px;padding:0 4px;flex:none;color:var(--ui-text);text-decoration:none!important}
.hdr .brand .logo{width:38px;height:38px;border-radius:11px;background:var(--ui-surface-3);display:grid;place-items:center;flex:none}
html:not(.dark-theme) .hdr .brand .logo{background:transparent}
/* Logo left, wordmark right in both languages: a reading-order choice, so the
   row is reversed under RTL to cancel the mirroring. */
[dir=rtl] .hdr .brand{flex-direction:row-reverse}
.hdr .brand .logo img{width:28px;height:28px;object-fit:contain;display:block}
.hdr .brand b{display:block;font-size:16px;font-weight:800;letter-spacing:1px;line-height:1.2}
.hdr .brand small{display:block;font-size:10.5px;color:var(--ui-muted);max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr .nav{flex:1;min-width:0;height:100%;display:flex;align-items:center;gap:2px;padding-inline-start:8px;border-inline-start:1px solid var(--ui-line-soft)}
.hdr .nav-grp{position:relative;flex:none}
.hdr .nav-btn{height:36px;flex:none;border:0;background:transparent;color:var(--ui-text-2);border-radius:9px;padding:0 10px;display:flex;align-items:center;gap:5px;font-size:13.5px;font-weight:600;white-space:nowrap;cursor:pointer;text-decoration:none!important;transition:background .12s,color .12s}
.hdr .nav-btn .chev{width:14px;height:14px;opacity:.55;transition:transform .15s}
.hdr .nav-btn:hover,.hdr .nav-btn.pop-open{background:var(--ui-surface-3);color:var(--ui-text)}
.hdr .nav-btn.pop-open .chev{transform:rotate(180deg)}
.hdr .nav-btn.is-active,.hdr .nav-grp.is-active>.nav-btn{background:var(--ui-accent-soft);color:var(--ui-accent-text)}
.hdr-actions{display:flex;align-items:center;gap:8px;flex:none}
:is(.hdr,.tn-drawer) .icon-btn{width:38px;height:38px;border-radius:11px;border:1px solid var(--ui-line);background:var(--ui-field);color:var(--ui-text-2);display:grid;place-items:center;cursor:pointer;position:relative;text-decoration:none!important;transition:border-color .12s,color .12s}
:is(.hdr,.tn-drawer) .icon-btn:hover,:is(.hdr,.tn-drawer) .icon-btn.pop-open{border-color:var(--ui-accent);color:var(--ui-accent-text)}
:is(.hdr,.tn-drawer) .icon-btn i{font-size:15px}
.dot-badge{position:absolute;top:-6px;inset-inline-end:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--ui-red);color:#fff;font-size:10.5px;font-weight:800;display:grid;place-items:center;border:2px solid var(--ui-nav);direction:ltr}
.acct{height:40px;display:flex;align-items:center;gap:9px;padding:0 10px 0 4px;border-radius:12px;border:1px solid var(--ui-line);background:var(--ui-field);cursor:pointer;color:var(--ui-text);transition:border-color .12s}
[dir=rtl] .acct{padding:0 4px 0 10px}
.acct:hover,.acct.pop-open{border-color:var(--ui-accent)}
.acct .chev{width:15px;height:15px;color:var(--ui-muted);transition:transform .15s}
.acct.pop-open .chev{transform:rotate(180deg)}
.hdr .avatar{width:32px;height:32px;border-radius:9px;background:var(--ui-accent-soft);color:var(--ui-accent-text);display:grid;place-items:center;font-weight:800;font-size:12.5px;border:1px solid var(--ui-accent-line);flex:none}
.acct-txt{text-align:start;line-height:1.25}
.acct-txt b{display:block;font-size:13px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-txt small{display:block;font-size:11px;color:var(--ui-muted)}
.hdr .menu-btn{display:none}

/* Popovers: nav groups, bell, account. Fixed so the header never clips them;
   assets/js/app.js places each below its trigger, or above when that is roomier. */
.pop{position:fixed;z-index:300;max-width:calc(100vw - 16px);background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:12px;box-shadow:var(--ui-shadow-pop);display:flex;flex-direction:column;overflow:hidden;opacity:0;transform:translateY(-4px);transition:opacity .12s,transform .12s}
.pop[data-side=top]{transform:translateY(4px)}
.pop.in{opacity:1;transform:none}
.pop-list{overflow:auto;padding:5px;flex:1;min-height:0}
.pop-grid{display:grid;grid-template-columns:repeat(var(--cols,1),minmax(min(220px,calc(100vw - 40px)),1fr));gap:1px 4px;padding:5px;overflow:auto}
.mi{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;font-size:13.5px;cursor:pointer;color:var(--ui-text-2);user-select:none;text-decoration:none!important;min-width:0}
button.mi{width:100%;border:0;background:none;text-align:start;font:inherit}
.mi:hover,.mi:focus-visible,.mi.act{background:var(--ui-surface-3);color:var(--ui-text);outline:none}
.mi.is-active,.mi.on{color:var(--ui-accent-text);background:var(--ui-accent-soft)}
.mi .tn-ico,.mi>i,.mi>svg{width:18px;flex:none;text-align:center;color:var(--ui-accent);font-size:14px}
.mi .tn-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mi.danger,.mi.danger i{color:var(--ui-red)}
.mi-head{font-size:11px;font-weight:700;color:var(--ui-faint);padding:9px 10px 4px;letter-spacing:.3px;grid-column:1/-1}
.mi-sep{height:1px;background:var(--ui-line-soft);margin:5px 4px}
.tn-badge{margin-inline-start:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;font-size:10.5px;font-weight:800;display:inline-grid;place-items:center;background:var(--ui-surface-3);color:var(--ui-muted);direction:ltr}
.tn-badge.is-count{background:var(--ui-red);color:#fff}
.mi-count{margin-inline-start:auto;font-weight:800;font-size:12px;color:var(--ui-muted);direction:ltr}
.mi-count.hot{color:var(--ui-red)}
.pop-empty{padding:20px 12px;text-align:center;color:var(--ui-faint);font-size:13px}
/* account menu */
.acct-pop{padding:6px}
.acct-user{display:flex;align-items:center;gap:11px;padding:10px 10px 12px;border-bottom:1px solid var(--ui-line-soft);margin-bottom:6px}
.acct-user .avatar{width:42px;height:42px;font-size:15px;border-radius:12px}
.acct-user b{display:block;font-size:14px}
.acct-user small{color:var(--ui-muted);font-size:12px}
.acct-sec{padding:6px 8px 10px}
.acct-lbl{font-size:11.5px;font-weight:700;color:var(--ui-faint);margin-bottom:7px;display:flex;align-items:center;gap:6px}
.acct-lbl i{font-size:12px}

/* Segmented control (account menu, filters) */
.segr{display:flex;background:var(--ui-field);border:1px solid var(--ui-line);border-radius:var(--ui-r);padding:3px;gap:3px}
.segr>a,.segr>label,.segr>button{flex:1;position:relative;min-height:30px;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:7px;cursor:pointer;color:var(--ui-muted);font-weight:650;font-size:12.5px;padding:0 8px;border:0;background:none;white-space:nowrap;text-decoration:none!important;transition:background .12s,color .12s}
.segr>a:hover,.segr>label:hover,.segr>button:hover{color:var(--ui-text)}
.segr input{position:absolute;opacity:0;pointer-events:none}
.segr>.on,.segr>label:has(input:checked){background:var(--ui-accent);color:var(--ui-accent-ink)}

/* Drawer (mobile navigation) */
.tn-drawer-backdrop{position:fixed;inset:0;background:var(--ui-overlay);z-index:150}
.tn-drawer{position:fixed;top:0;bottom:0;inset-inline-start:0;width:min(330px,88%);background:var(--ui-surface);border-inline-end:1px solid var(--ui-line);z-index:160;display:flex;flex-direction:column;box-shadow:var(--ui-shadow-pop)}
.tn-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--ui-line-soft);font-weight:800;font-size:15px}
.tn-drawer-body{flex:1;overflow:auto;padding:8px}
.tn-drawer-link{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:var(--ui-text-2);text-decoration:none!important;font-size:13.5px}
.tn-drawer-link:hover{background:var(--ui-surface-2)}
.tn-drawer-link.is-active{color:var(--ui-accent-text);background:var(--ui-accent-soft)}
.tn-drawer-link .tn-ico{width:18px;text-align:center;color:var(--ui-accent)}
.tn-drawer-trigger{width:100%;display:flex;align-items:center;gap:10px;height:42px;border:0;background:none;border-radius:9px;padding:0 10px;font-weight:650;cursor:pointer;color:var(--ui-text-2)}
.tn-drawer-trigger:hover{background:var(--ui-surface-2)}
.tn-drawer-trigger .tn-txt{flex:1;text-align:start}
.tn-drawer-trigger .tn-ico{width:18px;color:var(--ui-faint)}
.tn-drawer-trigger .tn-caret{transition:transform .15s;color:var(--ui-faint);font-size:11px}
.tn-drawer-group.is-open .tn-caret{transform:rotate(180deg)}
.tn-drawer-items{display:none;padding:2px 0 6px;padding-inline-start:12px}
.tn-drawer-group.is-open .tn-drawer-items{display:block}
.tn-drawer-group.is-open>.tn-drawer-trigger{color:var(--ui-accent-text)}
.tn-drawer-foot{border-top:1px solid var(--ui-line-soft);padding:12px;display:flex;flex-direction:column;gap:10px}

/* App frame. Every page is full screen: header on top, the content area takes
   the rest and owns the scroll. */
.desktop-app{flex:1;min-height:0;display:flex;flex-direction:column}
.app-layout{flex:1;min-height:0;display:flex}
.main-content{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}
.content-area{flex:1;min-height:0;overflow:auto;padding:14px;position:relative}
.content-area.content-area-pos{overflow:hidden;padding:0}
.page-container,.container,.container-fluid,.container-xxl,.container-xl,.container-lg{width:100%;max-width:none!important}
/* Chrome from the previous shells; a page that still prints one gets nothing. */
.mobile-header,.status-bar,.app-toolbar,.window-titlebar{display:none!important}
body.embedded-page .content-area{padding:12px 14px}
body.pos-layout .desktop-app{height:100vh}

/* Page heading row: title + actions (used by most list pages). */
.page-header{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:14px}
.page-breadcrumb{font-size:12px;color:var(--ui-faint);display:flex;gap:6px;width:100%}
.page-title{margin:0;font-weight:800;color:var(--ui-text)}
.page-subtitle{margin:0;color:var(--ui-muted)}
.page-title-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px 14px;margin-bottom:12px}
.page-title-bar h1,.page-title-bar h2{margin:0;display:flex;align-items:center;gap:8px;font-weight:800}
.page-actions,.header-actions,.panel-actions,.toolbar-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
/* No title band inside pages — the app header already says where you are.
   A page's own header keeps only its actions, as one quiet row. Pages render
   .page-actions-bar directly; older pages get .ui-slim-bar from app.js, which
   strips their title and decoration (hence the !important over page styles). */
.page-actions-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;margin:0 0 12px}
.ui-slim-bar{display:flex!important;flex-wrap:wrap;align-items:center!important;justify-content:flex-end!important;gap:8px;margin:0 0 12px!important;padding:0!important;min-height:0!important;background:none!important;border:0!important;box-shadow:none!important;color:var(--ui-text)!important;position:static!important}
.ui-slim-bar::before,.ui-slim-bar::after,.ui-slim-hide{display:none!important}
.ui-slim-bar .btn,.ui-slim-bar a.btn,.ui-slim-bar button:not(.btn-primary):not(.primary){background:var(--ui-surface-2)!important;border:1px solid var(--ui-line)!important;color:var(--ui-text)!important;box-shadow:none!important}
.ui-slim-bar .btn-primary,.ui-slim-bar .primary{background:var(--ui-accent)!important;border-color:var(--ui-accent)!important;color:var(--ui-accent-ink)!important}

/* ============================= 7. Components ============================== */
/* --- Buttons. One shape for every button in the app; old per-page class
       names (action-btn, rpt-btn, win11-btn, …) share it. --- */
.btn,.win11-btn,.action-btn,.rpt-btn,.ws-btn,.sp-btn,.ap-btn,.toolbar-btn,.btn-export{height:var(--ui-h);padding:0 14px;border-radius:var(--ui-r);border:1px solid var(--ui-line);background:var(--ui-surface-2);color:var(--ui-text);display:inline-flex;align-items:center;justify-content:center;gap:7px;font-weight:650;font-size:13px;line-height:1;cursor:pointer;white-space:nowrap;text-decoration:none!important;vertical-align:middle;user-select:none;transition:background .12s,border-color .12s,color .12s,transform .06s}
.btn:hover,.win11-btn:hover,.action-btn:hover,.rpt-btn:hover,.ws-btn:hover,.sp-btn:hover,.ap-btn:hover,.toolbar-btn:hover,.btn-export:hover{border-color:var(--ui-accent);color:var(--ui-accent-text)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn i,.btn svg{font-size:14px}
.btn svg{width:16px;height:16px}
.btn-primary,.win11-btn.primary,.action-btn.primary,.sp-btn.primary,.ap-btn.primary,.btn.primary{background:var(--ui-accent);border-color:var(--ui-accent);color:var(--ui-accent-ink)}
.btn-primary:hover,.win11-btn.primary:hover,.action-btn.primary:hover,.sp-btn.primary:hover,.ap-btn.primary:hover,.btn.primary:hover{background:var(--ui-accent-strong);border-color:var(--ui-accent-strong);color:#fff}
.btn-secondary,.btn-light,.btn-outline-secondary,.btn-default,.btn-outline{background:var(--ui-surface-2);border-color:var(--ui-line);color:var(--ui-text)}
.btn-ghost,.btn-link,.btn.ghost{background:transparent;border-color:transparent;color:var(--ui-muted)}
.btn-ghost:hover,.btn-link:hover,.btn.ghost:hover{background:var(--ui-surface-3);border-color:transparent;color:var(--ui-text)}
.btn-success,.btn.success,.action-btn.success{background:var(--ui-green-soft);border-color:var(--ui-green-line);color:var(--ui-green)}
.btn-success:hover,.btn.success:hover,.action-btn.success:hover{background:var(--ui-green);border-color:var(--ui-green);color:#fff}
.btn-danger,.btn.danger,.action-btn.danger,.win11-btn.danger{background:var(--ui-red-soft);border-color:var(--ui-red-line);color:var(--ui-red)}
.btn-danger:hover,.btn.danger:hover,.action-btn.danger:hover,.win11-btn.danger:hover{background:var(--ui-red);border-color:var(--ui-red);color:#fff}
.btn-warning,.btn.warning{background:var(--ui-amber-soft);border-color:var(--ui-amber-line);color:var(--ui-amber)}
.btn-warning:hover,.btn.warning:hover{background:var(--ui-amber);border-color:var(--ui-amber);color:#fff}
.btn-info,.btn.info{background:var(--ui-blue-soft);border-color:var(--ui-blue-line);color:var(--ui-blue)}
.btn-info:hover,.btn.info:hover{background:var(--ui-blue);border-color:var(--ui-blue);color:#fff}
.btn-outline-primary{background:transparent;border-color:var(--ui-accent);color:var(--ui-accent-text)}
.btn-outline-primary:hover{background:var(--ui-accent);color:var(--ui-accent-ink)}
.btn-outline-danger{background:transparent;border-color:var(--ui-red-line);color:var(--ui-red)}
.btn-outline-danger:hover{background:var(--ui-red);border-color:var(--ui-red);color:#fff}
.btn-outline-success{background:transparent;border-color:var(--ui-green-line);color:var(--ui-green)}
.btn-outline-success:hover{background:var(--ui-green);border-color:var(--ui-green);color:#fff}
.btn-sm,.btn.sm{height:var(--ui-h-sm);padding:0 10px;font-size:12.5px;border-radius:8px}
.btn-xs{height:26px;padding:0 8px;font-size:12px;border-radius:7px}
.btn-lg{height:46px;padding:0 20px;font-size:15px}
.btn-icon{width:var(--ui-h);padding:0}
.btn-sm.btn-icon{width:var(--ui-h-sm)}
.btn-block,.w-100.btn{width:100%}
.btn:disabled,.btn.disabled,.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn-group{display:inline-flex;gap:6px;flex-wrap:wrap}

/* --- Fields --- */
.form-group,.win11-form-group,.field{display:flex;flex-direction:column;min-width:0;margin-bottom:12px}
.form-label,.win11-label,label.label,.filter-group>label{font-size:12px;font-weight:650;color:var(--ui-muted);margin-bottom:6px;display:block}
.form-label .required,.form-label .req,.required-star,.req{color:var(--ui-red)}
/* Classed fields get the full shape. Bare elements get the same look through
   :where() — zero specificity — so a page class sizing its own compact inputs
   (POS line cells, inline grid editors) always wins. */
.form-control,.form-input,.form-select,.filter-select,.win11-input,.form-textarea,.ap-input{min-height:var(--ui-h);width:100%}
.form-control,.form-input,.form-select,.filter-select,.win11-input,.form-textarea,.ap-input,
:where(input[type=text],input[type=number],input[type=email],input[type=password],input[type=search],input[type=tel],input[type=date],input[type=datetime-local],input[type=month],input[type=time],input[type=url],input:not([type]),select,textarea){height:var(--ui-h);background-color:var(--ui-field);border:1px solid var(--ui-line);border-radius:var(--ui-r);padding:0 12px;color:var(--ui-text);outline:none;transition:border-color .15s,box-shadow .15s;max-width:100%}
textarea.form-control,.form-textarea,:where(textarea){height:auto;padding:9px 12px;min-height:76px;line-height:1.55;resize:vertical}
.form-select,.filter-select,:where(select){padding-inline-end:30px;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c939c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:15px;background-position:right 10px center}
[dir=rtl] :where(select),[dir=rtl] .form-select,[dir=rtl] .filter-select{background-position:left 10px center}
:where(select[multiple],select[size]){background-image:none;padding:6px;height:auto}
.form-control:hover,.form-input:hover,.form-select:hover,:where(input,select,textarea):hover{border-color:var(--ui-line-strong)}
.form-control:focus,.form-input:focus,.form-select:focus,.filter-select:focus,.ap-input:focus,:where(input,select,textarea):focus{border-color:var(--ui-accent);box-shadow:0 0 0 3px var(--ui-ring)}
::placeholder{color:var(--ui-faint)}
.form-control[readonly],:where(input[readonly]){background-color:var(--ui-surface-2);color:var(--ui-muted);border-style:dashed}
input:disabled,select:disabled,textarea:disabled{opacity:.6;cursor:not-allowed}
.form-control.error,.is-invalid,input.error{border-color:var(--ui-red)!important;box-shadow:0 0 0 3px rgba(210,72,60,.14)!important}
.form-error,.invalid-feedback,.ferr{font-size:11.5px;color:var(--ui-red);margin-top:5px}
.form-hint,.field-hint,.form-text{font-size:11.5px;color:var(--ui-faint);margin-top:5px}
input[type=number]{direction:ltr}
[dir=rtl] input[type=number]{text-align:end}
input[type=checkbox],input[type=radio]{accent-color:var(--ui-accent);width:16px;height:16px;min-height:0;vertical-align:middle;cursor:pointer}
.form-check,.checkbox-item,.check{display:flex;align-items:center;gap:8px;cursor:pointer;padding:4px 0}
.form-row{display:flex;flex-wrap:wrap;gap:12px}
.form-row>*{flex:1 1 180px}
.form-grid,.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr));gap:12px 14px}
.form-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.form-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.form-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.form-grid .full,.form-grid .span-all{grid-column:1/-1}
.input-group{display:flex;align-items:stretch}
.input-group>.form-control,.input-group>input{flex:1;min-width:0}
.input-group-text{display:flex;align-items:center;padding:0 10px;background:var(--ui-surface-3);border:1px solid var(--ui-line);color:var(--ui-muted);font-size:12px;font-weight:650}
/* Filter bars */
.filter-bar,.filter-row,.filters,.filter-panel,.search-bar,.toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
.filter-panel,.filter-bar{background:var(--ui-surface);border:1px solid var(--ui-line-soft);border-radius:var(--ui-r-lg);padding:12px 14px;margin-bottom:14px}
.filter-group{display:flex;flex-direction:column;min-width:150px}
/* Inside a filter row controls size to their content; the search box takes the rest. */
:is(.filter-bar,.filter-panel)>form{flex:1 1 100%;min-width:0}
:is(.filter-row,.filter-bar,.filter-panel,.toolbar,.search-bar)>:is(.form-control,.form-select,.filter-select,select,input:not([type=checkbox]):not([type=radio])){width:auto;flex:0 1 auto;min-width:130px}
:is(.filter-row,.filter-bar,.toolbar,.search-bar)>:is(.search-input,.search-box,[class*="search"]){flex:1 1 220px;min-width:180px}
.date-preset{height:30px;padding:0 10px;border-radius:8px;border:1px solid var(--ui-line);background:var(--ui-surface-2);color:var(--ui-muted);font-size:12px;font-weight:650;cursor:pointer}
.date-preset:hover,.date-preset.active{border-color:var(--ui-accent);color:var(--ui-accent-text);background:var(--ui-accent-soft)}

/* --- Panels / cards --- */
.panel,.card,.win-card,.section-card,.info-box{background:var(--ui-surface);border:1px solid var(--ui-line-soft);border-radius:var(--ui-r-lg);margin-bottom:14px;min-width:0}
.panel-header,.card-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--ui-line-soft);font-weight:700;color:var(--ui-text);background:transparent}
.panel-header .title,.panel-title,.card-title{display:flex;align-items:center;gap:8px;margin:0;font-weight:750}
.panel-header .icon,.panel-title-icon{color:var(--ui-accent);display:inline-grid;place-items:center}
.panel-body,.card-body{padding:16px}
.panel-footer,.card-footer{padding:12px 16px;border-top:1px solid var(--ui-line-soft);display:flex;align-items:center;justify-content:flex-end;gap:8px;background:var(--ui-surface-2);border-radius:0 0 var(--ui-r-lg) var(--ui-r-lg)}
.section-title{font-weight:750;margin:0 0 10px;display:flex;align-items:center;gap:8px}
/* One look for every section header: page styles that painted them in solid
   or gradient colour are overridden, so the template's quiet header wins. */
.content-area :is(.panel-header,.card-header){background:transparent!important;color:var(--ui-text)!important;border-bottom:1px solid var(--ui-line-soft)!important;box-shadow:none!important}
.content-area :is(.panel-header,.card-header) :is(i,.icon,svg){color:var(--ui-accent)}

/* --- Stat / KPI tiles --- */
.stats-grid,.stats-row,.summary-cards,.kpi-grid,.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:12px;margin-bottom:14px}
.stat-card,.kpi-card,.stat-box,.summary-card{position:relative;display:flex;align-items:center;gap:12px;background:var(--ui-surface);border:1px solid var(--ui-line-soft);border-radius:var(--ui-r-lg);padding:14px 16px;min-width:0;overflow:hidden}
.stat-card::before,.kpi-card::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px;background:var(--ui-accent)}
.stat-card.success::before,.stat-card.deposit::before,.kpi-card.green::before{background:var(--ui-green)}
.stat-card.error::before,.stat-card.danger::before,.stat-card.withdraw::before,.kpi-card.red::before{background:var(--ui-red)}
.stat-card.warning::before,.kpi-card.orange::before{background:var(--ui-amber)}
.stat-card.info::before,.kpi-card.blue::before{background:var(--ui-blue)}
.stat-icon,.kpi-icon{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:var(--ui-accent-soft);color:var(--ui-accent-text);flex:none;font-size:18px}
.stat-info,.stat-content{flex:1;min-width:0}
.kpi-card{flex-direction:column;align-items:stretch;gap:6px}
.kpi-header{display:flex;align-items:center;gap:8px}
.stat-label,.kpi-label,.summary-label{color:var(--ui-muted);font-weight:600}
.stat-value,.kpi-value,.summary-value{font-weight:800;color:var(--ui-text);font-variant-numeric:tabular-nums}
.stat-sub{color:var(--ui-faint)}
.stat-trend.up{color:var(--ui-green)}.stat-trend.down{color:var(--ui-red)}

/* --- Tables --- */
.table-responsive,.table-wrap,.table-container,.data-grid{overflow:auto;background:var(--ui-surface);border:1px solid var(--ui-line-soft);border-radius:var(--ui-r-lg)}
.data-table,.table,.report-table,.win11-table{width:100%;border-collapse:separate;border-spacing:0;color:var(--ui-text);background:var(--ui-surface)}
.data-table th,.table th,.report-table th,.win11-table th{position:sticky;top:0;z-index:1;background:var(--ui-surface-2);color:var(--ui-muted);font-weight:700;text-align:start;padding:0 12px;height:40px;border-bottom:1px solid var(--ui-line);white-space:nowrap}
.data-table td,.table td,.report-table td,.win11-table td{padding:8px 12px;height:44px;border-bottom:1px solid var(--ui-line-soft);vertical-align:middle}
.data-table tbody tr:hover td,.table-hover tbody tr:hover td,.report-table tbody tr:hover td{background:var(--ui-surface-2)}
.data-table tbody tr:last-child td,.table tbody tr:last-child td{border-bottom:0}
.data-table tfoot td,.table tfoot td,.report-table tfoot td{background:var(--ui-surface-2);font-weight:700;border-top:1px solid var(--ui-line)}
.table-striped tbody tr:nth-child(odd) td{background:var(--ui-surface-2)}
.table-bordered td,.table-bordered th{border:1px solid var(--ui-line-soft)}
.table-sm td{height:34px;padding:4px 10px}
.num,.number,.amount,.amount-cell,td.num,th.num{text-align:end;font-variant-numeric:tabular-nums}
.empty-row td{height:180px!important;text-align:center;color:var(--ui-faint)}
.pagination{display:flex;gap:4px;align-items:center;flex-wrap:wrap;list-style:none;margin:12px 0 0;padding:0}
.page-link,.pagination a,.pagination span{min-width:32px;height:32px;padding:0 8px;border-radius:8px;border:1px solid transparent;color:var(--ui-muted);display:inline-grid;place-items:center;font-weight:650;text-decoration:none!important}
.page-link:hover,.pagination a:hover{background:var(--ui-surface-3);color:var(--ui-text)}
.page-item.active .page-link,.pagination .active,.pagination .current{background:var(--ui-accent-soft);color:var(--ui-accent-text);border-color:var(--ui-accent-line)}
.page-item.disabled .page-link{opacity:.4;pointer-events:none}

/* --- Badges / pills --- */
.badge,.status-badge,.pill{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:11px;font-weight:650;line-height:1;white-space:nowrap;background:var(--ui-surface-3);color:var(--ui-muted)}
.badge-success,.bg-success,.badge.success,.status-badge.success,.status-badge.paid,.status-badge.active,.status-badge.approved,.p-green{background:var(--ui-green-soft)!important;color:var(--ui-green)!important}
.badge-danger,.bg-danger,.badge.danger,.status-badge.danger,.status-badge.cancelled,.status-badge.rejected,.status-badge.inactive,.p-red{background:var(--ui-red-soft)!important;color:var(--ui-red)!important}
.badge-warning,.bg-warning,.badge.warning,.status-badge.warning,.status-badge.pending,.p-amber{background:var(--ui-amber-soft)!important;color:var(--ui-amber)!important}
.badge-info,.bg-info,.badge.info,.status-badge.info,.p-blue{background:var(--ui-blue-soft)!important;color:var(--ui-blue)!important}
.badge-primary,.bg-primary,.badge.primary,.p-gold{background:var(--ui-accent-soft)!important;color:var(--ui-accent-text)!important}
.badge-neutral,.bg-secondary,.badge-secondary,.status-badge.draft,.p-grey{background:var(--ui-surface-3)!important;color:var(--ui-muted)!important}

/* --- Alerts --- */
.alert{display:flex;align-items:flex-start;gap:10px;padding:11px 14px;border-radius:var(--ui-r);border:1px solid var(--ui-line);background:var(--ui-surface-2);color:var(--ui-text-2);margin-bottom:12px}
.alert-success{background:var(--ui-green-soft);border-color:var(--ui-green-line);color:var(--ui-green)}
.alert-danger,.alert-error{background:var(--ui-red-soft);border-color:var(--ui-red-line);color:var(--ui-red)}
.alert-warning{background:var(--ui-amber-soft);border-color:var(--ui-amber-line);color:var(--ui-amber)}
.alert-info{background:var(--ui-blue-soft);border-color:var(--ui-blue-line);color:var(--ui-blue)}
.alert-title{font-weight:700}

/* --- Tabs --- */
.tabs,.tab-nav,.nav-tabs{display:flex;gap:4px;border-bottom:1px solid var(--ui-line);margin-bottom:14px;overflow-x:auto;list-style:none;padding:0}
.tab,.tab-item,.tab-btn,.nav-tabs .nav-link{height:38px;padding:0 14px;border:0;border-bottom:2px solid transparent;background:none;color:var(--ui-muted);font-weight:650;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;text-decoration:none!important;margin-bottom:-1px}
.tab:hover,.tab-item:hover,.tab-btn:hover,.nav-tabs .nav-link:hover{color:var(--ui-text)}
.tab.active,.tab-item.active,.tab-btn.active,.nav-tabs .nav-link.active{color:var(--ui-accent-text);border-bottom-color:var(--ui-accent);background:none}

/* --- Dropdown (legacy, non-Bootstrap) --- */
.dropdown{position:relative;display:inline-block}
.dropdown-menu{position:absolute;z-index:200;min-width:190px;background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:12px;box-shadow:var(--ui-shadow-pop);padding:5px;display:none;inset-inline-end:0;top:calc(100% + 6px)}
.dropdown.open .dropdown-menu,.dropdown-menu.show{display:block}
.dropdown-item{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border-radius:8px;border:0;background:none;color:var(--ui-text-2);text-align:start;cursor:pointer;text-decoration:none!important}
.dropdown-item:hover,.dropdown-item:focus{background:var(--ui-surface-3);color:var(--ui-text)}
.dropdown-divider{height:1px;background:var(--ui-line-soft);margin:5px 4px;border:0}

/* --- Legacy modal (.modal-overlay.active) --- */
.modal-overlay{position:fixed;inset:0;z-index:1000;background:var(--ui-overlay);display:none;align-items:center;justify-content:center;padding:18px}
.modal-overlay.active,.modal-overlay.show,.modal-overlay.open{display:flex}
.modal-overlay>.modal,.modal-overlay>.modal-content,.modal-overlay>.modal-dialog,.modal-box{background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:var(--ui-r-lg);box-shadow:var(--ui-shadow-pop);width:min(560px,100%);max-height:92vh;display:flex;flex-direction:column;overflow:hidden;color:var(--ui-text)}
.modal-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border-bottom:1px solid var(--ui-line-soft);font-weight:750}
.modal-title{margin:0;font-weight:750}
.modal-body{padding:18px;overflow:auto}
.modal-footer{display:flex;gap:10px;justify-content:flex-end;padding:14px 18px;border-top:1px solid var(--ui-line-soft)}
.modal-close{width:32px;height:32px;border-radius:8px;border:0;background:none;color:var(--ui-muted);cursor:pointer;display:grid;place-items:center;font-size:18px}
.modal-close:hover{background:var(--ui-surface-3);color:var(--ui-text)}

/* --- Empty state, loaders, tooltips --- */
.empty-state{text-align:center;padding:36px 16px;color:var(--ui-faint)}
.empty-state .icon,.empty-state-icon{font-size:34px;opacity:.6;margin-bottom:8px}
.empty-state-title{color:var(--ui-text-2);font-weight:700}
.spinner{width:22px;height:22px;border:2.5px solid var(--ui-line);border-top-color:var(--ui-accent);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
.loading-overlay{position:absolute;inset:0;background:color-mix(in srgb,var(--ui-surface) 70%,transparent);display:grid;place-items:center;z-index:5}
@keyframes spin{to{transform:rotate(360deg)}}
.has-tooltip{position:relative}
.has-tooltip:hover::after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--ui-text);color:var(--ui-surface);font-size:11.5px;font-weight:600;padding:4px 8px;border-radius:6px;white-space:nowrap;pointer-events:none;z-index:400}
.hdr .has-tooltip:hover::after,.pop .has-tooltip:hover::after{bottom:auto;top:calc(100% + 6px)}
.mi.has-tooltip:hover::after,.nav-btn.has-tooltip:hover::after,.tn-drawer-link.has-tooltip:hover::after,.tile.has-tooltip:hover::after,.alert-tile.has-tooltip:hover::after{display:none}
.spa-progress{position:fixed;top:0;inset-inline-start:0;height:2px;background:var(--ui-accent);z-index:500;transition:width .2s}

/* --- Utilities (the handful pages lean on; Bootstrap names) --- */
.text-center{text-align:center!important}.text-start,.text-left{text-align:start!important}.text-end,.text-right{text-align:end!important}
.text-muted,.text-secondary,.muted{color:var(--ui-muted)!important}.text-faint{color:var(--ui-faint)!important}
.text-success{color:var(--ui-green)!important}.text-danger{color:var(--ui-red)!important}.text-warning{color:var(--ui-amber)!important}.text-info{color:var(--ui-blue)!important}.text-primary,.text-accent{color:var(--ui-accent-text)!important}
.fw-bold,.strong{font-weight:700!important}.fw-semibold{font-weight:600!important}.small{font-size:var(--app-font-sm)!important}.ltr{direction:ltr;unicode-bidi:isolate}
.d-none,.hidden{display:none!important}.d-block{display:block!important}.d-inline-block{display:inline-block!important}.d-flex,.flex{display:flex!important}.d-grid{display:grid!important}.d-inline-flex{display:inline-flex!important}
.flex-col,.flex-column{flex-direction:column!important}.flex-wrap{flex-wrap:wrap!important}.flex-1,.flex-grow-1{flex:1 1 auto!important}
.items-center,.align-items-center{align-items:center!important}.justify-between,.justify-content-between{justify-content:space-between!important}.justify-content-end{justify-content:flex-end!important}.justify-content-center{justify-content:center!important}
.gap-1{gap:4px!important}.gap-2{gap:8px!important}.gap-3{gap:12px!important}.gap-4{gap:16px!important}
.m-0{margin:0!important}.mt-0{margin-top:0!important}.mt-1{margin-top:4px!important}.mt-2{margin-top:8px!important}.mt-3{margin-top:12px!important}.mt-4{margin-top:16px!important}
.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:4px!important}.mb-2{margin-bottom:8px!important}.mb-3{margin-bottom:12px!important}.mb-4{margin-bottom:16px!important}
.ms-auto{margin-inline-start:auto!important}.me-auto{margin-inline-end:auto!important}.ms-1{margin-inline-start:4px!important}.ms-2{margin-inline-start:8px!important}.me-1{margin-inline-end:4px!important}.me-2{margin-inline-end:8px!important}
.p-0{padding:0!important}.p-1{padding:4px!important}.p-2{padding:8px!important}.p-3{padding:12px!important}.p-4{padding:16px!important}.py-2{padding-block:8px!important}.px-3{padding-inline:12px!important}
.w-100{width:100%!important}.h-100{height:100%!important}
/* Light 12-column grid for pages written against Bootstrap without loading it. */
.row{display:flex;flex-wrap:wrap;margin-inline:-7px;row-gap:12px}
.row>*{padding-inline:7px;width:100%;min-width:0}
.col{flex:1 0 0%}.col-auto{flex:0 0 auto;width:auto}
.col-12{width:100%}.col-6{width:50%}.col-4{width:33.333%}.col-3{width:25%}
@media(min-width:768px){.col-md-2{width:16.666%}.col-md-3{width:25%}.col-md-4{width:33.333%}.col-md-5{width:41.666%}.col-md-6{width:50%}.col-md-7{width:58.333%}.col-md-8{width:66.666%}.col-md-9{width:75%}.col-md-12{width:100%}}
@media(min-width:992px){.col-lg-2{width:16.666%}.col-lg-3{width:25%}.col-lg-4{width:33.333%}.col-lg-6{width:50%}.col-lg-8{width:66.666%}.col-lg-9{width:75%}.col-lg-12{width:100%}}

/* Mixed-unit document lines (invoice item tables). */
.pos-unit-cell{display:flex;align-items:center;gap:4px;min-width:92px}
.pos-unit-cell .pos-tbl-select,.pos-unit-cell>select{flex:1 1 auto;min-width:66px;width:auto}
.pos-unit-add{flex:0 0 auto;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:1;border:1px dashed var(--ui-line-strong);border-radius:6px;background:var(--ui-field);color:var(--ui-muted);cursor:pointer}
.pos-unit-add i{font-size:13px!important;line-height:1}
.pos-unit-add:hover,.unit-badge-pick:hover{border-color:var(--ui-accent);border-style:solid;color:var(--ui-accent-text);background:var(--ui-accent-soft)}
.unit-badge-pick{cursor:pointer}.unit-badge-pick.is-default{font-weight:700}

/* ========================== 8. Bootstrap bridge =========================== */
/* Sale / purchase / preorder screens load Bootstrap. Its components read these
   variables, so setting them (html-qualified to outrank Bootstrap's :root no
   matter which file loads last) makes them follow the tokens and the theme. */
html:root{
  --bs-body-bg:var(--ui-bg);--bs-body-color:var(--ui-text);--bs-body-font-family:var(--app-font-family);
  --bs-secondary-bg:var(--ui-surface-2);--bs-tertiary-bg:var(--ui-surface-3);--bs-secondary-color:var(--ui-muted);--bs-tertiary-color:var(--ui-faint);
  --bs-border-color:var(--ui-line);--bs-border-color-translucent:var(--ui-line-soft);--bs-border-radius:var(--ui-r);--bs-border-radius-sm:8px;--bs-border-radius-lg:var(--ui-r-lg);
  --bs-primary:var(--ui-accent);--bs-primary-rgb:242,140,26;--bs-link-color:var(--ui-accent-text);--bs-link-hover-color:var(--ui-accent-strong);--bs-link-color-rgb:194,97,10;
  --bs-success-rgb:28,150,85;--bs-danger-rgb:210,72,60;--bs-warning-rgb:183,121,31;--bs-info-rgb:37,99,235;
  --bs-emphasis-color:var(--ui-text);--bs-heading-color:var(--ui-text);--bs-focus-ring-color:var(--ui-ring);
}
html .btn{--bs-btn-padding-x:14px;--bs-btn-padding-y:0;--bs-btn-font-size:13px;--bs-btn-font-weight:650;--bs-btn-border-radius:var(--ui-r);--bs-btn-focus-box-shadow:0 0 0 3px var(--ui-ring)}
html .btn-primary{--bs-btn-bg:var(--ui-accent);--bs-btn-border-color:var(--ui-accent);--bs-btn-color:var(--ui-accent-ink);--bs-btn-hover-bg:var(--ui-accent-strong);--bs-btn-hover-border-color:var(--ui-accent-strong);--bs-btn-hover-color:#fff;--bs-btn-active-bg:var(--ui-accent-strong);--bs-btn-active-border-color:var(--ui-accent-strong);--bs-btn-disabled-bg:var(--ui-accent);--bs-btn-disabled-border-color:var(--ui-accent);--bs-btn-disabled-color:var(--ui-accent-ink)}
html .btn-secondary,html .btn-light,html .btn-outline-secondary{--bs-btn-bg:var(--ui-surface-2);--bs-btn-border-color:var(--ui-line);--bs-btn-color:var(--ui-text);--bs-btn-hover-bg:var(--ui-surface-3);--bs-btn-hover-border-color:var(--ui-accent);--bs-btn-hover-color:var(--ui-accent-text);--bs-btn-active-bg:var(--ui-surface-3)}
html .btn-success{--bs-btn-bg:var(--ui-green);--bs-btn-border-color:var(--ui-green);--bs-btn-hover-bg:var(--ui-green);--bs-btn-hover-border-color:var(--ui-green)}
html .btn-danger{--bs-btn-bg:var(--ui-red-soft);--bs-btn-border-color:var(--ui-red-line);--bs-btn-color:var(--ui-red);--bs-btn-hover-bg:var(--ui-red);--bs-btn-hover-border-color:var(--ui-red);--bs-btn-hover-color:#fff}
html .form-control,html .form-select{--bs-border-color:var(--ui-line)}
html .modal{--bs-modal-bg:var(--ui-surface);--bs-modal-color:var(--ui-text);--bs-modal-border-color:var(--ui-line);--bs-modal-border-radius:var(--ui-r-lg);--bs-modal-header-border-color:var(--ui-line-soft);--bs-modal-footer-border-color:var(--ui-line-soft)}
html .dropdown-menu{--bs-dropdown-bg:var(--ui-surface);--bs-dropdown-border-color:var(--ui-line);--bs-dropdown-link-color:var(--ui-text-2);--bs-dropdown-link-hover-bg:var(--ui-surface-3);--bs-dropdown-link-hover-color:var(--ui-text);--bs-dropdown-border-radius:12px}
html .table{--bs-table-bg:var(--ui-surface);--bs-table-color:var(--ui-text);--bs-table-border-color:var(--ui-line-soft);--bs-table-hover-bg:var(--ui-surface-2);--bs-table-striped-bg:var(--ui-surface-2)}
html .card{--bs-card-bg:var(--ui-surface);--bs-card-border-color:var(--ui-line-soft);--bs-card-border-radius:var(--ui-r-lg);--bs-card-cap-bg:transparent}
html .list-group{--bs-list-group-bg:var(--ui-surface);--bs-list-group-color:var(--ui-text);--bs-list-group-border-color:var(--ui-line-soft);--bs-list-group-action-hover-bg:var(--ui-surface-2)}
html.dark-theme .btn-close{filter:invert(1) grayscale(1) brightness(2)}
.modal-backdrop{--bs-backdrop-bg:#000;--bs-backdrop-opacity:.45}

/* ================ 9. Dialogs, searchable select, toast, PDF =============== */
/* Fast navigation: pages opened as dialogs + Ctrl+K palette (assets/js/fast-nav.js). */
.fnav-overlay{position:fixed;inset:0;z-index:10500;background:var(--ui-overlay);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:18px;animation:fnavFade .14s ease}
.fnav-overlay.fnav-nested-overlay{z-index:10520;padding:12px}
.fnav-nested-overlay .fnav-dialog{width:min(1580px,97vw);height:95vh;border-color:var(--ui-accent-line)}
body.fnav-modal-open{overflow:hidden}
.fnav-dialog{display:flex;flex-direction:column;overflow:hidden;width:min(1060px,96vw);height:min(780px,92vh);background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:var(--ui-r-lg);box-shadow:var(--ui-shadow-pop);animation:fnavPop .16s ease}
.fnav-size-sm{width:min(560px,96vw);height:min(520px,88vh)}
.fnav-size-md{width:min(820px,96vw);height:min(660px,90vh)}
.fnav-size-lg{width:min(1060px,96vw);height:min(780px,92vh)}
.fnav-size-xl{width:96vw;height:94vh}
.fnav-size-rv{width:min(1320px,82vw);height:92vh}
.fnav-size-75{width:min(88vw,1440px);height:86vh;min-width:320px;min-height:380px}
.fnav-size-full{width:100%;height:100%;border:0;border-radius:0}
.fnav-overlay:has(>.fnav-size-full){padding:0}
.fnav-head{display:flex;align-items:center;gap:8px;flex:none;height:44px;padding-inline:16px 8px;border-bottom:1px solid var(--ui-line-soft);background:var(--ui-surface)}
.fnav-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:750;font-size:14px;color:var(--ui-text)}
.fnav-head-actions{display:flex;align-items:center;gap:2px}
.fnav-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:var(--ui-muted);font-size:14px;cursor:pointer;transition:background .12s,color .12s}
.fnav-btn:hover{background:var(--ui-surface-3);color:var(--ui-text)}
.fnav-btn.fnav-close:hover{background:var(--ui-red);color:#fff}
.fnav-body{position:relative;flex:1;min-height:0;background:var(--ui-bg)}
.fnav-frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent}
.fnav-spinner{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;gap:10px;font-size:13px;color:var(--ui-muted);background:var(--ui-bg);pointer-events:none}
.fnav-spinner span{width:18px;height:18px;border:2.5px solid var(--ui-line);border-top-color:var(--ui-accent);border-radius:50%;animation:spin .7s linear infinite}
.fnav-palette-overlay{position:fixed;inset:0;z-index:10600;background:var(--ui-overlay);backdrop-filter:blur(2px);display:flex;align-items:flex-start;justify-content:center;padding:10vh 16px 16px;animation:fnavFade .12s ease}
.fnav-palette{width:min(640px,94vw);max-height:70vh;display:flex;flex-direction:column;overflow:hidden;background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:var(--ui-r-lg);box-shadow:var(--ui-shadow-pop);animation:fnavPop .14s ease}
.fnav-palette-inputrow{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--ui-line-soft);color:var(--ui-faint)}
.fnav-palette-input{flex:1;min-width:0;border:0!important;outline:none;background:transparent;font-size:15px;color:var(--ui-text);box-shadow:none!important;min-height:0;padding:0}
.fnav-palette-inputrow kbd{padding:2px 7px;font-size:11px;color:var(--ui-faint);background:var(--ui-surface-3);border:1px solid var(--ui-line);border-radius:5px}
.fnav-palette-list{flex:1;min-height:0;overflow-y:auto;padding:6px}
.fnav-palette-group{padding:8px 10px 4px;font-size:11px;font-weight:700;color:var(--ui-faint)}
.fnav-palette-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;cursor:pointer}
.fnav-palette-item.active{background:var(--ui-accent-soft)}
.fnav-palette-icon{flex:none;width:22px;text-align:center;font-size:14px;color:var(--ui-accent)}
.fnav-palette-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;color:var(--ui-text)}
.fnav-palette-item.active .fnav-palette-label{color:var(--ui-accent-text)}
.fnav-palette-hint{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:45%;font-size:11.5px;color:var(--ui-faint)}
.fnav-palette-empty{padding:26px 12px;text-align:center;font-size:13px;color:var(--ui-faint)}
@keyframes fnavFade{from{opacity:0}to{opacity:1}}
@keyframes fnavPop{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}

/* Searchable select (assets/js/searchable-select.js upgrades long <select>s). */
.ss-wrapper{position:relative;display:inline-block;min-width:180px;width:100%}
.ss-hidden-select{position:absolute!important;opacity:0!important;pointer-events:none!important;width:1px!important;height:1px!important;min-height:0!important;max-height:1px!important;min-width:0!important;max-width:1px!important;margin:0!important;padding:0!important;border:0!important}
.ss-toggle{display:flex;align-items:center;gap:8px;width:100%;min-height:var(--ui-h);padding:4px 12px;background:var(--ui-field);color:var(--ui-text);border:1px solid var(--ui-line);border-radius:var(--ui-r);cursor:pointer;font:inherit;text-align:start;transition:border-color .15s,box-shadow .15s}
.ss-toggle:hover{border-color:var(--ui-line-strong)}
.ss-wrapper.ss-open>.ss-toggle,.ss-toggle:focus-visible{border-color:var(--ui-accent);box-shadow:0 0 0 3px var(--ui-ring);outline:none}
.ss-wrapper.ss-disabled>.ss-toggle{cursor:not-allowed;opacity:.6}
.ss-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-wrapper.ss-empty-value .ss-label{color:var(--ui-faint)}
.ss-caret{flex:none;display:inline-flex;align-items:center;color:var(--ui-muted);font-size:11px;transition:transform .15s}
.ss-wrapper.ss-open .ss-caret{transform:rotate(180deg)}
.ss-panel{position:fixed;max-height:min(380px,70vh);min-width:220px;z-index:10050;background:var(--ui-surface);color:var(--ui-text);border:1px solid var(--ui-line);border-radius:12px;box-shadow:var(--ui-shadow-pop);display:flex;flex-direction:column;overflow:hidden}
.ss-search{position:relative;padding:9px 11px;border-bottom:1px solid var(--ui-line-soft)}
.ss-search-icon{position:absolute;top:50%;inset-inline-start:20px;transform:translateY(-50%);color:var(--ui-faint);font-size:13px;pointer-events:none}
.ss-search-input{width:100%;min-height:32px!important;padding:0 10px 0 32px!important;background:var(--ui-surface-2)!important;border:1px solid var(--ui-line-soft)!important;border-radius:8px!important}
[dir=rtl] .ss-search-input{padding:0 32px 0 10px!important}
.ss-list{list-style:none;margin:0;padding:5px;overflow-y:auto;max-height:280px}
.ss-option{padding:8px 10px;border-radius:8px;cursor:pointer;color:var(--ui-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-option-active,.ss-option:hover{background:var(--ui-surface-3);color:var(--ui-text)}
.ss-option-selected{color:var(--ui-accent-text);font-weight:650;background:var(--ui-accent-soft)}
.ss-option-disabled{opacity:.5;cursor:not-allowed}
.ss-empty{padding:18px 12px;text-align:center;color:var(--ui-faint);font-size:13px}

/* Toasts (assets/js/toast.js). */
.sahl-toasts{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:2147483000;display:flex;flex-direction:column-reverse;gap:8px;max-height:calc(100vh - 32px);width:max-content;max-width:min(460px,calc(100vw - 32px));pointer-events:none;margin:0;padding:0}
.sahl-toast{--tc:var(--ui-muted);pointer-events:auto;position:relative;display:flex;align-items:flex-start;gap:10px;width:100%;padding:12px 16px;padding-inline-start:18px;border-radius:12px;border:1px solid var(--ui-line);background:var(--ui-surface);color:var(--ui-text);box-shadow:var(--ui-shadow-pop);overflow:hidden;line-height:1.55;overflow-wrap:anywhere;opacity:0;transform:translateY(-16px) scale(.97);transition:opacity .22s ease,transform .22s cubic-bezier(.21,1.02,.73,1)}
.sahl-toast::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:4px;background:var(--tc)}
.sahl-toast.is-visible{opacity:1;transform:none}
.sahl-toast.is-leaving{opacity:0;transform:translateY(-16px) scale(.97);margin-bottom:-100%;transition:opacity .18s,transform .18s,margin-bottom .18s}
.sahl-toast.is-bumping{animation:toastBump .3s ease}
@keyframes toastBump{40%{transform:scale(1.03)}}
.sahl-toast__icon{flex:none;width:20px;height:20px;margin-top:1px;color:var(--tc);display:flex}
.sahl-toast__icon svg{width:20px;height:20px}
.sahl-toast__body{flex:1;min-width:0;font-size:14px;font-weight:550;white-space:pre-line}
.sahl-toast__count{flex:none;align-self:center;min-width:22px;padding:2px 7px;border-radius:999px;background:var(--tc);color:#fff;font-size:12px;font-weight:700;text-align:center;direction:ltr}
.sahl-toast__close{flex:none;width:24px;height:24px;padding:0;border:0;border-radius:6px;background:transparent;color:currentColor;opacity:.45;font-size:18px;line-height:1;cursor:pointer}
.sahl-toast__close:hover{opacity:1;background:var(--ui-surface-3)}
.sahl-toast--success{--tc:var(--ui-green)}.sahl-toast--error{--tc:var(--ui-red)}.sahl-toast--warning{--tc:var(--ui-amber)}.sahl-toast--info{--tc:var(--ui-blue)}

/* "Choose PDF template" dialog (assets/js/pdf-template-picker.js). */
.pdf-tpl-dialog{position:fixed;inset:0;margin:auto;width:min(680px,calc(100vw - 32px));max-height:calc(100vh - 64px);padding:0;border:1px solid var(--ui-line);border-radius:var(--ui-r-lg);background:var(--ui-surface);color:var(--ui-text);box-shadow:var(--ui-shadow-pop);overflow:visible}
.pdf-tpl-dialog::backdrop{background:rgba(15,23,42,.45)}
.pdf-tpl-body{padding:18px 20px 20px;max-height:calc(100vh - 64px);overflow-y:auto}
.pdf-tpl-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pdf-tpl-head h2{margin:0;font-size:17px}
.pdf-tpl-close{border:0;background:transparent;font-size:22px;line-height:1;padding:2px 6px;cursor:pointer;color:var(--ui-muted);border-radius:8px}
.pdf-tpl-close:hover{background:var(--ui-surface-3);color:var(--ui-text)}
.pdf-tpl-hint{font-size:13px;color:var(--ui-muted);margin:6px 0 16px;line-height:1.6}
.pdf-tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.pdf-tpl-card{display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:start;font:inherit;cursor:pointer;background:var(--ui-surface-2);color:inherit;border:1px solid var(--ui-line);border-radius:12px;padding:14px;transition:border-color .15s,background .15s}
.pdf-tpl-card:hover,.pdf-tpl-card:focus-visible{border-color:var(--ui-accent);background:var(--ui-surface-3);outline:none}
.pdf-tpl-card.is-default{border-color:var(--ui-accent)}
.pdf-tpl-name{font-size:14.5px;font-weight:650}
.pdf-tpl-desc{font-size:12px;color:var(--ui-muted);line-height:1.5}
.pdf-tpl-tag{margin-top:3px;font-size:11px;font-weight:650;padding:2px 8px;border-radius:999px;background:var(--ui-accent);color:var(--ui-accent-ink)}
.pdf-tpl-remember{display:flex;align-items:center;gap:7px;margin-top:16px;font-size:13px;color:var(--ui-muted);cursor:pointer}

/* ============================== 10. Dashboard ============================= */
/* Alerts on top, then four work areas. Fills the screen on desktop without
   scrolling; stacks and scrolls below 1250px. */
body.dashboard-page .content-area{padding:14px}
.dash{min-height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) minmax(0,1fr);gap:14px}
.dash .dash-row{display:grid;gap:14px;min-height:0}
.dash .dash-row.top{grid-template-columns:6fr 3fr}
.dash .dash-row.bottom{grid-template-columns:4fr 2fr 2fr}
.dash .dpanel{background:var(--ui-surface);border:1px solid var(--ui-line-soft);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:10px;min-height:0}
.dash .dpanel-head{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--ui-muted);padding:0 4px}
.dash .dpanel-head svg{width:16px;height:16px;color:var(--ui-accent)}
.dash .dpanel-head .count{background:var(--ui-red);color:#fff;font-size:11px;font-weight:800;border-radius:10px;padding:1px 8px;direction:ltr}
.dash .tiles{flex:1;display:grid;gap:10px;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));grid-auto-rows:minmax(88px,1fr);min-height:0}
.dash .tile{position:relative;border:1px solid var(--ui-line-soft);border-radius:13px;background:var(--ui-surface-2);color:var(--ui-text);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:12px 10px;text-align:center;text-decoration:none!important;transition:background .15s,border-color .15s,transform .15s}
.dash .tile:hover{background:var(--ui-surface-3);border-color:var(--ui-accent);transform:translateY(-2px);color:var(--ui-text)}
.dash .tile .ic{flex:none;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--ui-accent-soft);border:1px solid var(--ui-accent-line);color:var(--ui-accent-text)}
.dash .tile .ic svg{width:22px;height:22px}
.dash .tile .lb{font-size:13.5px;font-weight:700;line-height:1.4}
.dash .tile.c2{grid-column:span 2}.dash .tile.r2{grid-row:span 2}
.dash .tile.r2:not(.hero) .ic{width:56px;height:56px}
.dash .tile.r2:not(.hero) .ic svg{width:26px;height:26px}
.dash .tile.hero{background:linear-gradient(150deg,var(--ui-hero-a),var(--ui-hero-b));border-color:transparent;color:var(--ui-accent-ink)}
.dash .tile.hero:hover{filter:brightness(1.05);color:var(--ui-accent-ink)}
.dash .tile.hero .ic{width:64px;height:64px;border-radius:16px;background:rgba(33,28,18,.12);border-color:rgba(33,28,18,.22);color:var(--ui-accent-ink)}
.dash .tile.hero .ic svg{width:30px;height:30px}
.dash .tile.hero .lb{font-size:17px;font-weight:800}
.dash .tile .badge-n{position:absolute;top:9px;inset-inline-end:9px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--ui-surface-3);color:var(--ui-muted);font-size:11px;font-weight:800;display:grid;place-items:center;direction:ltr}
.dash .alerts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:10px}
.dash .alert-tile{display:flex;align-items:center;gap:13px;border:1px solid var(--ui-line-soft);border-radius:13px;background:var(--ui-surface-2);padding:12px 14px;color:var(--ui-text);text-align:start;position:relative;overflow:hidden;text-decoration:none!important;transition:background .15s,border-color .15s}
.dash .alert-tile::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px;background:var(--ui-line)}
.dash .alert-tile:hover{background:var(--ui-surface-3);border-color:var(--ui-accent);color:var(--ui-text)}
.dash .alert-tile .ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:var(--ui-surface-3);color:var(--ui-muted);flex:none}
.dash .alert-tile .ic svg{width:20px;height:20px}
.dash .alert-tile .txt{flex:1;min-width:0}
.dash .alert-tile .lb{font-size:13.5px;font-weight:700}
.dash .alert-tile .st{font-size:11.5px;color:var(--ui-muted);margin-top:3px}
.dash .alert-tile .n{font-size:24px;font-weight:800;color:var(--ui-muted);font-variant-numeric:tabular-nums;direction:ltr}
.dash .alert-tile.warn::before{background:var(--ui-accent)}.dash .alert-tile.warn .ic{background:var(--ui-accent-soft);color:var(--ui-accent-text)}.dash .alert-tile.warn .n{color:var(--ui-accent-text)}
.dash .alert-tile.danger::before{background:var(--ui-red)}.dash .alert-tile.danger .ic{background:var(--ui-red-soft);color:var(--ui-red)}.dash .alert-tile.danger .n{color:var(--ui-red)}

/* ===================== Embedded pages (dialog / workspace tab) ============ */
/* Density layer for pages rendered inside a fast-nav dialog or a workspace tab
   (body.embedded-page, set by header.php). Standalone pages are untouched. */
body.embedded-page {
    --emb-gap: 8px;
    --emb-pad: 10px;
    --emb-radius: 8px;
    background: var(--surface-secondary, var(--ui-bg));
}

/* ───────────────── 1. No duplicated page chrome ───────────────── */
/* The dialog's own head bar carries the title, close, reload and
   "open full page" controls, so a second page header is pure waste. */
body.embedded-page .page-header,
body.embedded-page .page-title-bar,
body.embedded-page .content-header > .breadcrumb,
body.embedded-page .breadcrumb,
body.embedded-page .page-breadcrumb,
body.embedded-page .back-link-bar { display: none !important; }

/* Some modules print a lone <h1> as the page title — keep the first one
   only when it is the sole heading, otherwise it repeats the dialog title. */
body.embedded-page .page-container > h1:first-child,
body.embedded-page .container > h1:first-child { display: none; }

/* ───────────────── 2. Page shell ───────────────── */
body.embedded-page .page-container,
body.embedded-page .container,
body.embedded-page .content,
body.embedded-page .main-content,
body.embedded-page .hr-page,
body.embedded-page .cashvan-shell {
    max-width: none;
    margin: 0;
    padding: var(--emb-gap);
}

/* ───────────────── 3. Panels / cards ───────────────── */
body.embedded-page .panel,
body.embedded-page .card,
body.embedded-page .content-card,
body.embedded-page .form-card {
    margin-bottom: var(--emb-gap);
    border-radius: var(--emb-radius);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
body.embedded-page .panel:last-child,
body.embedded-page .card:last-child { margin-bottom: 0; }

body.embedded-page .panel-header,
body.embedded-page .card-header,
body.embedded-page .content-header {
    padding: 6px var(--emb-pad);
    min-height: 0;
}
body.embedded-page .panel-header h2,
body.embedded-page .panel-header h3,
body.embedded-page .card-header h2,
body.embedded-page .card-header h3,
body.embedded-page .content-header h2,
body.embedded-page .content-header h3 { margin: 0; }

body.embedded-page .panel-body,
body.embedded-page .card-body,
body.embedded-page .content-body { padding: var(--emb-pad); }
body.embedded-page .card-footer,
body.embedded-page .content-footer { padding: 6px var(--emb-pad); }

/* ───────────────── 4. Stat cards → one-line chips ───────────────── */
/* Same treatment the sales-orders list got: icon · label · value inline. */
body.embedded-page .stats-grid,
body.embedded-page .stats-row {
    gap: 6px;
    margin-bottom: var(--emb-gap);
}
body.embedded-page .stat-card {
    padding: 4px 8px;
    min-height: 30px;
    border-radius: var(--emb-radius);
    gap: 7px;
}
body.embedded-page .stat-card .stat-icon,
body.embedded-page .stat-card .icon {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 6px;
    margin: 0;
}
body.embedded-page .stat-content,
body.embedded-page .compact-stat-content,
body.embedded-page .sc-content,
body.embedded-page .stat-info {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
body.embedded-page .stat-label,
body.embedded-page .stat-title {
    flex: 1;
    min-width: 0;
    line-height: 1.2;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.embedded-page .stat-value,
body.embedded-page .stat-number {
    line-height: 1.2;
    margin: 0;
    white-space: nowrap;
}

/* ───────────────── 5. Tables ───────────────── */
body.embedded-page table,
body.embedded-page .data-table th,
body.embedded-page table th { padding: 5px 8px; }

/* Sticky headers ONLY inside a real vertical scroll box. Applying it to every
   table made small summary tables (totals, debt) float over the rows above
   them while the dialog scrolled — content looked truncated. */
body.embedded-page .table-scroll th,
body.embedded-page .so-table-scroll th,
body.embedded-page .tv-items-wrap th {
    position: sticky;
    top: 0;
    z-index: 2;
}
body.embedded-page .data-table td,
body.embedded-page table td { padding: 4px 8px; }

/* The dialog is short — let the grid scroll inside itself instead of
   pushing the action bar out of reach. */
body.embedded-page .table-scroll,
body.embedded-page .so-table-scroll,
body.embedded-page .tv-items-wrap {
    max-height: min(560px, 46vh);
    overflow: auto;
}

/* ───────────────── 6. Forms ───────────────── */
body.embedded-page .form-group,
body.embedded-page .field,
body.embedded-page .form-row { margin-bottom: 8px; }
body.embedded-page label,
body.embedded-page .form-label { margin-bottom: 3px; }
/* Not for controls inside a table or an invoice entry form: those are sized to
   their column, and 9px of side padding clipped the numbers in them inside a
   dialog (a quantity of 70 read "7(", the exchange rate "1.0000("). They keep
   the page's own compact sizing. :where() adds no specificity, so every
   other control matches exactly as before. */
body.embedded-page .form-control:not(:where(table *, #saleForm *, #editSaleForm *, #returnForm *, #quotationForm *, #purchaseForm *, #editPurchaseForm *, #linkedReturnForm *)),
body.embedded-page .form-select:not(:where(table *, #saleForm *, #editSaleForm *, #returnForm *, #quotationForm *, #purchaseForm *, #editPurchaseForm *, #linkedReturnForm *)),
body.embedded-page input[type="text"]:not(:where(table *, #saleForm *, #editSaleForm *, #returnForm *, #quotationForm *, #purchaseForm *, #editPurchaseForm *, #linkedReturnForm *)),
body.embedded-page input[type="number"]:not(:where(table *, #saleForm *, #editSaleForm *, #returnForm *, #quotationForm *, #purchaseForm *, #editPurchaseForm *, #linkedReturnForm *)),
body.embedded-page input[type="date"]:not(:where(table *, #saleForm *, #editSaleForm *, #returnForm *, #quotationForm *, #purchaseForm *, #editPurchaseForm *, #linkedReturnForm *)),
body.embedded-page input[type="search"]:not(:where(table *, #saleForm *, #editSaleForm *, #returnForm *, #quotationForm *, #purchaseForm *, #editPurchaseForm *, #linkedReturnForm *)),
body.embedded-page input[type="tel"]:not(:where(table *, #saleForm *, #editSaleForm *, #returnForm *, #quotationForm *, #purchaseForm *, #editPurchaseForm *, #linkedReturnForm *)),
body.embedded-page input[type="email"]:not(:where(table *, #saleForm *, #editSaleForm *, #returnForm *, #quotationForm *, #purchaseForm *, #editPurchaseForm *, #linkedReturnForm *)),
body.embedded-page select:not(:where(table *, #saleForm *, #editSaleForm *, #returnForm *, #quotationForm *, #purchaseForm *, #editPurchaseForm *, #linkedReturnForm *)),
body.embedded-page .ss-toggle:not(:where(table *, #saleForm *, #editSaleForm *, #returnForm *, #quotationForm *, #purchaseForm *, #editPurchaseForm *, #linkedReturnForm *)) {
    min-height: 30px;
    height: auto;
    padding: 4px 9px;
}
body.embedded-page textarea,
body.embedded-page textarea.form-control { min-height: 56px; padding: 6px 9px; }

/* ───────────────── 7. Buttons ───────────────── */
body.embedded-page .btn {
    padding: 5px 11px;
    border-radius: 6px;
}
body.embedded-page .btn-sm { padding: 3px 8px; }
body.embedded-page .btn-lg { padding: 7px 14px; }
body.embedded-page .action-btn { width: 26px; height: 26px; }

/* ───────────────── 8. Toolbars, filters, alerts, tabs ───────────────── */
body.embedded-page .filter-bar,
body.embedded-page .filters,
body.embedded-page .toolbar,
body.embedded-page .search-bar {
    gap: 6px;
    padding: 0;
    margin-bottom: 6px;
}
body.embedded-page .alert,
body.embedded-page .alert-bar {
    padding: 6px 10px;
    margin-bottom: 6px;
    border-radius: 6px;
}
body.embedded-page .nav-tabs .nav-link,
body.embedded-page .tabs a,
body.embedded-page .tab-btn { padding: 5px 10px; }

/* ───────────────── 9. Action bar pinned to the dialog floor ───────────────── */
/* A form's save row must stay reachable without scrolling the dialog. */
body.embedded-page .form-actions,
body.embedded-page .save-bar,
body.embedded-page .actions.save-bar,
body.embedded-page .sticky-actions {
    position: sticky;
    bottom: 0;
    z-index: 40;
    gap: 8px;
    padding: 7px 10px;
    margin-top: var(--emb-gap);
    background: var(--surface-primary, var(--ui-surface));
    border: 1px solid var(--surface-stroke, rgba(0,0,0,.08));
    border-radius: var(--emb-radius);
    box-shadow: 0 -3px 12px rgba(16, 24, 40, .10);
}

/* ───────────────── 10. Headings & misc rhythm ───────────────── */
body.embedded-page hr { margin: 8px 0; }
body.embedded-page .mb-3, body.embedded-page .mb-4 { margin-bottom: var(--emb-gap) !important; }
body.embedded-page .mt-3, body.embedded-page .mt-4 { margin-top: var(--emb-gap) !important; }
body.embedded-page .p-3, body.embedded-page .p-4 { padding: var(--emb-pad) !important; }

/* A page that opts out (needs its own full-bleed layout inside the dialog)
   just adds data-embed-raw to <body> or a wrapper. */
body.embedded-page[data-embed-raw] .page-container { padding: 0; }

/* ============================== 11. Responsive ============================ */
@media(max-width:1450px){.hdr .brand small{display:none}.acct-txt{display:none}}
@media(max-width:1250px){
  .dash{display:flex;flex-direction:column}
  .dash>*,.dash .dash-row,.dash .dpanel,.dash .tiles{flex:none;min-height:auto}
  .dash .dash-row.top,.dash .dash-row.bottom{grid-template-columns:1fr}
  .dash .tiles{grid-auto-rows:minmax(100px,auto)}
}
@media(max-width:991.98px){
  .hdr .menu-btn{display:grid}
  .hdr .nav{display:none}
  .hdr-actions{margin-inline-start:auto}
  .form-grid.cols-3,.form-grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .hdr{padding:0 10px;gap:8px}
  .hdr .brand .brand-txt{display:none}
  .content-area,body.dashboard-page .content-area{padding:10px}
  .form-grid,.form-grid.cols-2,.form-grid.cols-3,.form-grid.cols-4{grid-template-columns:1fr}
  .dash .tiles{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .dash .tile.r2{grid-row:auto}.dash .tile.c2,.dash .tile.hero{grid-column:span 2}
  .page-title-bar{padding:10px 12px}
  .fnav-overlay,.fnav-palette-overlay{padding:0}
  .fnav-dialog,.fnav-size-sm,.fnav-size-md,.fnav-size-lg,.fnav-size-xl,.fnav-size-rv,.fnav-size-75{width:100vw;height:100vh;min-width:0;min-height:0;border-radius:0;border:0}
  .fnav-palette{width:100vw;max-height:100vh;height:100vh;border-radius:0}
  .pdf-tpl-grid{grid-template-columns:1fr}
  .pop-grid{grid-template-columns:1fr!important}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ================================ 12. Print =============================== */
@media print{
  :root,html.dark-theme{--ui-bg:#fff;--ui-surface:#fff;--ui-surface-2:#f5f5f5;--ui-surface-3:#eee;--ui-field:#fff;--ui-text:#000;--ui-text-2:#111;--ui-muted:#444;--ui-faint:#666;--ui-line:#bbb;--ui-line-soft:#ddd;color-scheme:light}
  body{display:block;overflow:visible;height:auto;background:#fff;color:#000}
  .hdr,.tn-drawer,.tn-drawer-backdrop,.pop,.sahl-toasts,.btn,.page-actions,.filter-panel,.filter-bar,.pagination,.no-print{display:none!important}
  .desktop-app,.app-layout,.main-content,.content-area{display:block;overflow:visible;height:auto;padding:0}
  .data-table th,.table th{position:static}
}