/* =====================================================================
   SHARBALE DS — "Bar Sharbale CRM redesign" layer (2026-10-08)
   =====================================================================
   Source of truth: /home/nimer/Downloads/bar-sharbale-crm-ux-ui.html
   (55 screens; rendered references in /mnt/storage/crm-design-ref/).

   Loaded LAST (after sharbale-ui.css). Three jobs:
     1. Re-binds the existing token system (--primary, --g-*) to the new
        palette — every existing component skin follows automatically.
     2. The new app shell: icon rail + section panel (nav.php) and the
        slim header (header.php).
     3. A namespaced component kit (ds-*) — a 1:1 port of the design's
        shared CSS — for rebuilt pages, plus a Bootstrap skin so legacy
        markup (modals, DataTables, forms, badges) matches the design.

   Rollback: remove the <link> to this file in app/common/head_assets.php
   and restore nav.php/header.php from
   /mnt/storage/crm-backups/2026-10-08-redesign/before-redesign.tgz
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------- */
:root, body, body.rtl, .default {
  --primary: 17, 24, 39;          /* ink — primary actions are near-black */
  --secondary: 98, 106, 119;
}
:root {
  /* design palette */
  --ds-ink:#111827; --ds-ink-h:#1f2937; --ds-ink2:#374151; --ds-ink3:#4b5563;
  --ds-mut:#626a77; --ds-mut2:#9ca3af; --ds-faint:#b8bec8;
  --ds-line:#e5e7eb; --ds-line2:#d1d5db; --ds-line3:#f3f4f6;
  --ds-fill:#f9fafb; --ds-fill2:#fafbfc; --ds-bg:#f5f6f8; --ds-panel:#f7f8fa; --ds-seg:#eceef1;
  --ds-surface:#ffffff;
  --ds-acc:#f28a24; --ds-acc-ink:#d9660f; --ds-on-acc:#000100;
  --ds-wash:#fff1e6; --ds-wash2:#ffebd9; --ds-wash3:#fff4ea;
  --ds-ok:#15803d;  --ds-ok-bg:#f0fdf4;  --ds-ok-line:#bbf7d0;
  --ds-wa:#9a4a06;  --ds-wa-bg:#fff8f1;  --ds-wa-line:#fce3c9;
  --ds-er:#b42318;  --ds-er-bg:#fef3f2;  --ds-er-line:#fecaca;
  --ds-in:#3b5a8c;  --ds-in-bg:#eef2f9;  --ds-in-line:#d3dcec;
  --ds-shadow:0 1px 2px rgba(17,24,39,.05);
  --ds-font:'Figtree','Rubik',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* re-bind the legacy token system (sharbale-ui.css) to the design */
  --g-blue-900:#000000; --g-blue-800:#1f2937; --g-blue-700:#111827; --g-blue-600:#111827;
  --g-blue-400:#f6b06b; --g-blue-100:#ffebd9; --g-blue-050:#fff1e6;
  --g-900:#111827; --g-800:#111827; --g-700:#374151; --g-600:#4b5563; --g-500:#626a77;
  --g-400:#9ca3af; --g-300:#d1d5db; --g-200:#e5e7eb; --g-100:#f3f4f6; --g-050:#f9fafb;
  --g-white:#ffffff; --g-canvas:#f5f6f8;
  --g-ok-800:#15803d; --g-ok-600:#16a34a; --g-ok-050:#f0fdf4; --g-ok-200:#bbf7d0;
  --g-warn-800:#9a4a06; --g-warn-600:#f28a24; --g-warn-050:#fff8f1; --g-warn-200:#fce3c9;
  --g-err-800:#b42318; --g-err-600:#dc2626; --g-err-050:#fef3f2; --g-err-200:#fecaca;
  --g-info-800:#3b5a8c; --g-info-600:#5272a6; --g-info-050:#eef2f9; --g-info-200:#d3dcec;
  --g-r-xs:6px; --g-r-sm:8px; --g-r-md:10px; --g-r-lg:12px; --g-r-xl:14px;
  --g-e2:0 8px 20px rgba(17,24,39,.08); --g-e3:0 20px 48px rgba(17,24,39,.18);
  --g-font:var(--ds-font);
  --g-h-xs:28px; --g-h-sm:36px; --g-h-md:42px; --g-h-lg:48px;

  /* shell geometry (the theme lays out from --sidebar-width / --semi-nav) */
  --sx-rail-w:76px; --sx-panel-w:240px; --sx-hdr-h:64px;
  --sx-nav-w:calc(var(--sx-rail-w) + var(--sx-panel-w));
  --sidebar-width:var(--sx-nav-w); --semi-nav:var(--sx-rail-w);
}
@media (max-width:1440px){ :root{ --sx-panel-w:216px; } }
@media (max-width:1366px){ :root{ --sx-panel-w:200px; } }

/* dark theme (header toggle sets body.dark) — same system, inverted */
body.dark {
  --primary: 243, 244, 246;
  --ds-ink:#f3f4f6; --ds-ink-h:#ffffff; --ds-ink2:#d1d5db; --ds-ink3:#b6bcc6;
  --ds-mut:#9aa1ad; --ds-mut2:#6b7280; --ds-faint:#4b5563;
  --ds-line:#2a2f37; --ds-line2:#3a404a; --ds-line3:#23272e;
  --ds-fill:#1b1f25; --ds-fill2:#1b1f25; --ds-bg:#0f1115; --ds-panel:#14171c; --ds-seg:#23272e;
  --ds-surface:#171a20;
  --ds-wash:#3a2614; --ds-wash2:#43290f; --ds-wash3:#3a2614;
  --ds-ok-bg:#0f2a18; --ds-wa-bg:#2e2109; --ds-er-bg:#2e1210; --ds-in-bg:#16213a;
  --ds-ok-line:#1e4a30; --ds-wa-line:#4a380f; --ds-er-line:#4a211e; --ds-in-line:#24365a;
  --ds-ok:#4ade80; --ds-wa:#fbbf72; --ds-er:#f87171; --ds-in:#93b4e8;
  --g-blue-800:#ffffff; --g-blue-700:#f3f4f6; --g-blue-600:#f3f4f6; --g-blue-100:#43290f; --g-blue-050:#3a2614;
  --g-900:#f3f4f6; --g-800:#f3f4f6; --g-700:#d1d5db; --g-600:#b6bcc6; --g-500:#9aa1ad; --g-400:#6b7280;
  --g-300:#3a404a; --g-200:#2a2f37; --g-100:#23272e; --g-050:#1b1f25; --g-white:#171a20; --g-canvas:#0f1115;
}

/* ---------------------------------------------------------------------
   2. BASE
   --------------------------------------------------------------------- */
body, body.rtl { font-family:var(--ds-font); background:var(--ds-bg); color:var(--ds-ink); font-size:14px; line-height:1.45; letter-spacing:0; }
h1,h2,h3,h4,h5,h6 { font-family:var(--ds-font); color:var(--ds-ink); letter-spacing:-.01em; }
h4,h5 { font-weight:800; }
h6 { font-weight:700; }
a { color:var(--ds-ink); }
a:hover { color:var(--ds-acc-ink); }
:focus-visible { outline:2px solid var(--ds-acc) !important; outline-offset:2px; box-shadow:none !important; }
::selection { background:color-mix(in srgb, var(--ds-acc) 28%, transparent); color:var(--ds-ink); }
.text-primary { color:var(--ds-ink) !important; }
.text-muted, .text-secondary { color:var(--ds-mut) !important; }

/* ---------------------------------------------------------------------
   3. SHELL — icon rail + section panel (nav.php), slim header (header.php)
   --------------------------------------------------------------------- */
nav.vertical-sidebar.sx-nav {
  width:var(--sx-nav-w) !important; height:100vh; display:flex !important; flex-direction:row !important;
  background:transparent !important; box-shadow:none !important; border:0 !important; overflow:visible !important;
  font-family:var(--ds-font); z-index:1004;
}
nav.vertical-sidebar.sx-nav.semi-nav,
.app-wrapper nav.vertical-sidebar.sx-nav.semi-nav:hover { width:var(--sx-rail-w) !important; }
nav.sx-nav.semi-nav .sx-panel { display:none !important; }
.sx-index { display:none !important; }

.sx-rail {
  width:var(--sx-rail-w); flex:0 0 var(--sx-rail-w); height:100%; overflow-y:auto; scrollbar-width:none;
  background:var(--ds-surface); border-left:1px solid var(--ds-line);
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:14px 0;
}
.sx-rail::-webkit-scrollbar { display:none; }
.sx-logo {
  width:42px; height:42px; border-radius:12px; background:var(--ds-ink); color:var(--ds-surface) !important;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:19px;
  margin-bottom:14px; position:relative; flex:0 0 auto; overflow:hidden;
}
body.dark .sx-logo { background:#f3f4f6; color:#111827 !important; }
.sx-logo::after { content:""; position:absolute; bottom:7px; left:7px; width:7px; height:7px; border-radius:50%; background:var(--ds-acc); }
.sx-logo img { width:100%; height:100%; object-fit:cover; }
.sx-rail a.sx-ri {
  width:62px; padding:9px 0 7px; border-radius:10px; display:flex; flex-direction:column; align-items:center; gap:4px;
  font-size:11px; font-weight:600; color:var(--ds-ink3); text-align:center; line-height:1.2;
}
.sx-rail a.sx-ri i { font-size:22px; line-height:1; }
.sx-rail a.sx-ri:hover { background:var(--ds-line3); color:var(--ds-ink); }
.sx-rail a.sx-ri.on { background:var(--ds-wash2); color:var(--ds-ink); }
.sx-rail a.sx-ri.on i { color:var(--ds-acc-ink); }
.sx-rail .sx-sp { flex:1; }

.sx-panel {
  width:var(--sx-panel-w); flex:0 0 var(--sx-panel-w); height:100%; overflow-y:auto; scrollbar-width:thin;
  background:var(--ds-panel); border-left:1px solid var(--ds-line);
  padding:22px 12px; display:flex; flex-direction:column; gap:2px;
}
.sx-ptitle { font-size:16px; font-weight:800; padding:0 12px 2px; color:var(--ds-ink); }
.sx-psub { font-size:12px; font-weight:500; color:var(--ds-mut); padding:0 12px 12px; }
.sx-plabel { font-size:11px; font-weight:700; color:var(--ds-mut); padding:16px 12px 6px; letter-spacing:.02em; }
.sx-panel a {
  display:flex; align-items:center; gap:10px; min-height:40px; padding:0 12px; border-radius:8px;
  font-weight:600; color:var(--ds-ink2); flex:0 0 auto;
}
.sx-panel a i { font-size:18px; line-height:1; flex:0 0 auto; }
.sx-panel a:hover { background:var(--ds-line3); color:var(--ds-ink); }
.sx-panel a.on { background:var(--ds-wash); color:var(--ds-ink); }
.sx-panel a.on i { color:var(--ds-acc-ink); }
.sx-cnt {
  margin-inline-start:auto; font-size:11px; font-weight:700; color:var(--ds-ink3); background:var(--ds-surface);
  border:1px solid var(--ds-line); border-radius:999px; padding:0 7px; line-height:18px; font-variant-numeric:tabular-nums;
}
.sx-cnt.hot { background:var(--ds-acc); border-color:var(--ds-acc); color:var(--ds-on-acc); }
@media (max-width:1366px){ .sx-panel a { min-height:36px; padding:0 10px; font-size:13px; } }

/* layout offsets: the theme hard-codes 17rem / 4.5rem in RTL */
.rtl .app-wrapper .app-content { padding-right:var(--sx-nav-w) !important; padding-left:0 !important; padding-top:var(--sx-hdr-h) !important; padding-bottom:24px !important; box-shadow:none !important; background:var(--ds-bg); }
.rtl .app-wrapper .semi-nav ~ .app-content { padding-right:var(--sx-rail-w) !important; }
header.header-main, .app-wrapper .app-header, .header-main {
  height:var(--sx-hdr-h) !important; min-height:var(--sx-hdr-h); padding-right:var(--sx-nav-w) !important; padding-left:0 !important;
  background:var(--ds-surface) !important; border-bottom:1px solid var(--ds-line) !important; box-shadow:none !important;
}
.rtl .app-wrapper .semi-nav ~ .app-content header.header-main { padding-right:var(--sx-rail-w) !important; }
header.header-main::before { display:none !important; }
header.header-main .container-fluid { height:100%; padding:0 24px !important; max-width:none !important; }
@media (max-width:1440px){ header.header-main .container-fluid { padding:0 20px !important; } }
.sx-hdr { height:100%; display:flex; align-items:center; gap:10px; flex:1 1 auto; width:100%; min-width:0; }
/* search at the start (right), user tools pinned to the end (left) */
.sx-hdr .sx-tools { display:flex; align-items:center; gap:10px; margin-inline-start:auto; }
.sx-search {
  flex:0 1 440px; min-width:220px; height:40px; display:flex; align-items:center; gap:8px; padding:0 12px;
  background:var(--ds-line3); border:1px solid transparent; border-radius:10px; color:var(--ds-mut);
  font-size:13px; font-weight:500; cursor:pointer; text-align:start;
}
.sx-search:hover { border-color:var(--ds-line); }
.sx-search i { font-size:18px; }
.sx-search span { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sx-kbd { font-size:11px; font-weight:700; color:var(--ds-ink3); background:var(--ds-surface); border:1px solid var(--ds-line); border-radius:5px; padding:0 6px; direction:ltr; line-height:18px; font-family:var(--ds-font); }
.sx-ib {
  width:40px; height:40px; border-radius:10px; border:1px solid var(--ds-line); background:var(--ds-surface);
  display:inline-flex; align-items:center; justify-content:center; color:var(--ds-ink2); cursor:pointer; position:relative; flex:0 0 auto;
}
.sx-ib i { font-size:19px; line-height:1; }
.sx-ib:hover { background:var(--ds-fill); color:var(--ds-ink); }
.sx-ib .sx-dot { position:absolute; top:8px; left:9px; width:9px; height:9px; border-radius:50%; background:var(--ds-acc); border:2px solid var(--ds-surface); }
/* dark-mode toggle keeps the theme hook (.header-dark .sun-logo/.moon-logo) */
.header-dark .sx-ib .sun-logo, .header-dark .sx-ib .moon-logo { display:inline-flex; }
body:not(.dark) .header-dark .sun-logo { display:none !important; }
body.dark .header-dark .moon-logo { display:none !important; }
.sx-me { display:flex; align-items:center; gap:10px; padding-inline-start:6px; cursor:pointer; border-radius:10px; }
.sx-me .sx-av { width:36px; height:36px; border-radius:999px; background:var(--ds-ink); color:var(--ds-surface); display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex:0 0 auto; overflow:hidden; }
.sx-me .sx-av { position:relative; }
.sx-me .sx-av img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sx-me .sx-who { line-height:1.3; white-space:nowrap; }
.sx-me .sx-who b { display:block; font-weight:700; font-size:13px; color:var(--ds-ink); }
.sx-me .sx-who span { font-size:12px; font-weight:500; color:var(--ds-mut); }
.header-toggle.sx-ib { display:none; }
@media (max-width:1366px){ .sx-me .sx-who { display:none; } }
@media (max-width:1180px){ .header-toggle.sx-ib { display:inline-flex; } }

/* content area: the design's .content (24px gutter, 18px rhythm) */
.app-content main { padding:24px; }
.app-content main > .container-fluid, .app-content main > div > .container-fluid { padding-inline:0; }
@media (max-width:1440px){ .app-content main { padding:20px; } }

/* phones: the rail becomes a top tab row; the panel hides (design ≤767px) */
@media (max-width:767px){
  :root { --sx-top-h:58px; }
  nav.vertical-sidebar.sx-nav, nav.vertical-sidebar.sx-nav.semi-nav { width:100% !important; height:var(--sx-top-h) !important; top:0; right:0; }
  .sx-rail { width:100%; flex:1 1 100%; flex-direction:row; justify-content:space-around; padding:6px 8px; border-left:0; border-bottom:1px solid var(--ds-line); overflow:visible; }
  .sx-rail .sx-logo, .sx-rail .sx-sp { display:none; }
  .sx-panel { display:none !important; }
  .rtl .app-wrapper .app-content, .rtl .app-wrapper .semi-nav ~ .app-content { padding-right:0 !important; padding-top:calc(var(--sx-top-h) + var(--sx-hdr-h)) !important; }
  header.header-main, .rtl .app-wrapper .semi-nav ~ .app-content header.header-main { padding-right:0 !important; top:var(--sx-top-h) !important; }
  header.header-main .container-fluid { padding:0 12px !important; }
  .sx-search { flex:1 1 auto; min-width:0; }
  .sx-search .sx-kbd { display:none; }
  .app-content main { padding:16px; }
}

/* ---------------------------------------------------------------------
   4. LEGACY PAGE HEAD → the design's page head (crumb above an 800 title)
   --------------------------------------------------------------------- */
.app-content .main-title { font-size:26px !important; line-height:1.2; font-weight:800 !important; letter-spacing:-.02em; color:var(--ds-ink) !important; margin:0 !important; }
.app-content .main-title > i.ti:first-child { display:none; }
.app-content :has(> .main-title + .app-line-breadcrumbs) { display:flex; flex-direction:column; }
.app-content .main-title + .app-line-breadcrumbs { order:-1; margin:0 0 6px !important; }
.app-line-breadcrumbs { display:flex; gap:6px; align-items:center; padding:0; list-style:none; }
.app-line-breadcrumbs li { gap:6px; }
.app-line-breadcrumbs li a, .app-line-breadcrumbs li.active a { font-size:12px !important; font-weight:500 !important; color:var(--ds-mut) !important; }
.app-line-breadcrumbs li:not(:last-child)::after { content:'/'; color:var(--ds-mut2); font-size:12px; }
.page-head { margin-bottom:18px !important; align-items:flex-end !important; }

/* ---------------------------------------------------------------------
   5. BOOTSTRAP SKIN — legacy markup reads as the design
   --------------------------------------------------------------------- */
/* buttons (design: 40px, 10px radius, 700; primary = ink; others = white outline) */
.btn { border-radius:10px !important; font-weight:700 !important; font-size:14px !important; gap:8px; box-shadow:none !important; font-family:var(--ds-font); }
.btn:not(.btn-sm):not(.btn-xs):not(.btn-lg):not(.icon-btn):not(.btn-close) { min-height:40px; }
.btn-sm { min-height:32px; height:auto !important; border-radius:8px !important; font-size:13px !important; padding:0 12px !important; }
.btn-xs { min-height:28px; height:auto !important; border-radius:7px !important; font-size:12px !important; padding:0 10px !important; }
.btn-lg { min-height:48px; font-size:15px !important; padding:0 20px !important; }
.btn-primary, .btn-dark, .btn-teal, .btn-success, .btn-info {
  background:var(--ds-ink) !important; border-color:var(--ds-ink) !important; color:var(--ds-surface) !important;
}
.btn-primary:hover, .btn-dark:hover, .btn-teal:hover, .btn-success:hover, .btn-info:hover { background:var(--ds-ink-h) !important; border-color:var(--ds-ink-h) !important; }
.btn-light, .btn-white, .btn-secondary, .btn-outline-secondary, .btn-outline-primary, .btn-outline-dark, .btn-outline-success, .btn-outline-info,
.btn-light-primary, .btn-light-secondary, .btn-light-success, .btn-light-info, .btn-light-dark, .btn-light-warning, .btn-outline-light {
  background:var(--ds-surface) !important; border:1px solid var(--ds-line2) !important; color:var(--ds-ink) !important;
}
.btn-light:hover, .btn-white:hover, .btn-secondary:hover, .btn-outline-secondary:hover, .btn-outline-primary:hover, .btn-outline-dark:hover,
.btn-outline-success:hover, .btn-outline-info:hover, .btn-light-primary:hover, .btn-light-secondary:hover, .btn-light-success:hover,
.btn-light-info:hover, .btn-light-dark:hover, .btn-light-warning:hover, .btn-outline-light:hover { background:var(--ds-fill) !important; color:var(--ds-ink) !important; }
.btn-light-primary.active, .btn-light-primary:active { background:var(--ds-fill) !important; }
.btn-danger, .btn-light-danger, .btn-outline-danger { background:var(--ds-surface) !important; border:1px solid var(--ds-er-line) !important; color:var(--ds-er) !important; }
.btn-danger:hover, .btn-light-danger:hover, .btn-outline-danger:hover { background:var(--ds-er-bg) !important; }
.btn-warning, .btn-outline-warning { background:var(--ds-acc) !important; border-color:var(--ds-acc) !important; color:var(--ds-on-acc) !important; }
/* row action icon buttons → the design's small icon button */
.icon-btn { width:32px !important; height:32px !important; min-height:32px; padding:0 !important; border-radius:8px !important; display:inline-flex !important; align-items:center; justify-content:center; font-size:16px !important; }
.btn-close { box-shadow:none !important; }

/* cards (12px, hairline + whisper shadow) */
.card { background:var(--ds-surface) !important; border:1px solid var(--ds-line) !important; border-radius:12px !important; box-shadow:var(--ds-shadow) !important; }
.card-header { padding:16px 18px !important; background:var(--ds-surface) !important; border-bottom:1px solid var(--ds-line3) !important; border-radius:12px 12px 0 0 !important; }
.card-header h4, .card-header h5, .card-header h6, .card-title { font-size:15px !important; font-weight:800 !important; color:var(--ds-ink) !important; margin:0; }
.card-body { padding:18px !important; }
.card-body.p-0 { padding:0 !important; }
.card-footer { padding:12px 18px !important; background:var(--ds-surface) !important; border-top:1px solid var(--ds-line3) !important; }

/* tables (design .t) */
.table thead th, table.dataTable thead th, .card table thead th, .table-responsive table thead th, table.display thead th {
  background:var(--ds-fill) !important; color:var(--ds-mut) !important; font-size:12px !important; font-weight:700 !important;
  padding:10px 12px !important; border-bottom:1px solid var(--ds-line) !important; border-top:0 !important; white-space:nowrap; text-transform:none; letter-spacing:0;
}
.table tbody td, table.dataTable tbody td, .card table tbody td, .table-responsive table tbody td, table.display tbody td {
  padding:0 12px !important; height:52px; border-bottom:1px solid var(--ds-line3) !important; color:var(--ds-ink2); font-size:13px; vertical-align:middle;
}
.table > :not(caption) > * > *:first-child, table.dataTable tbody td:first-child, table.dataTable thead th:first-child { padding-right:18px !important; }
.table > :not(caption) > * > *:last-child, table.dataTable tbody td:last-child, table.dataTable thead th:last-child { padding-left:18px !important; }
.table-striped > tbody > tr:nth-of-type(odd) > *, table.dataTable.stripe > tbody > tr.odd > *, table.dataTable.display > tbody > tr.odd > * { background:transparent !important; box-shadow:none !important; }
.table-hover tbody tr:hover > *, table.dataTable tbody tr:hover > *, .card table tbody tr:hover > *, table.display tbody tr:hover > * { background:var(--ds-fill) !important; }
.table-bordered > :not(caption) > * > * { border-width:0 0 1px 0 !important; }

/* DataTables chrome → design pager + info line */
.dataTables_wrapper .dataTables_info { font-size:12px !important; font-weight:500; color:var(--ds-mut) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button, .pagination .page-link {
  min-width:32px; height:32px; padding:0 8px !important; border-radius:8px !important; display:inline-flex !important; align-items:center; justify-content:center;
  font-size:13px !important; font-weight:600; color:var(--ds-ink2) !important; border:1px solid var(--ds-line) !important; background:var(--ds-surface) !important; margin:0 2px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.pagination .page-item.active .page-link { background:var(--ds-ink) !important; border-color:var(--ds-ink) !important; color:var(--ds-surface) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity:.45; }

/* forms (design .inp 42px / filters 36px; orange focus) */
.form-control, .form-select { height:42px; border:1px solid var(--ds-line2) !important; border-radius:10px !important; background-color:var(--ds-surface) !important; color:var(--ds-ink) !important; font-size:14px; font-family:var(--ds-font); }
textarea.form-control { height:auto; min-height:84px; padding-top:10px; }
.form-control-sm, .form-select-sm { height:36px; border-radius:8px !important; font-size:13px; }
.form-control:focus, .form-select:focus, .select2-container--focus .select2-selection, .select2-container--open .select2-selection {
  border-color:var(--ds-acc) !important; box-shadow:0 0 0 2px color-mix(in srgb, var(--ds-acc) 35%, transparent) !important; outline:0 !important;
}
.form-control::placeholder { color:var(--ds-mut2) !important; }
.form-label, .app-content label { font-size:13px; font-weight:600; color:var(--ds-ink2); }
.form-text, small.text-muted { font-size:12px; color:var(--ds-mut) !important; }
.form-check-input:checked { background-color:var(--ds-ink) !important; border-color:var(--ds-ink) !important; }
.form-switch .form-check-input:checked { background-color:var(--ds-ink) !important; border-color:var(--ds-ink) !important; }
input[type=checkbox], input[type=radio] { accent-color:var(--ds-ink); }
.input-group-text { background:var(--ds-fill) !important; border-color:var(--ds-line2) !important; color:var(--ds-mut) !important; border-radius:10px; }
.select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple { border:1px solid var(--ds-line2) !important; border-radius:10px !important; background:var(--ds-surface) !important; }
.select2-container--default .select2-selection--single { height:42px !important; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height:40px !important; color:var(--ds-ink) !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height:40px !important; }
.select2-dropdown { border:1px solid var(--ds-line) !important; border-radius:10px !important; box-shadow:var(--g-e2) !important; overflow:hidden; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background:var(--ds-wash) !important; color:var(--ds-ink) !important; }

/* filter bars → the design's .filters row (36px controls) */
.filters-bar { background:var(--ds-surface) !important; padding:14px 18px !important; border-top:0 !important; border-bottom:1px solid var(--ds-line3) !important; }
.filters-bar .form-control, .filters-bar .form-select, .filters-bar .btn, .filters-bar .select2-container .select2-selection--single {
  height:36px !important; min-height:36px !important; border-radius:8px !important; font-size:13px !important;
}
.filters-bar .select2-container--default .select2-selection--single .select2-selection__rendered { line-height:34px !important; }
.filters-bar .select2-container--default .select2-selection--single .select2-selection__arrow { height:34px !important; }
.filters-bar .form-label { font-size:12px !important; font-weight:600; color:var(--ds-mut) !important; }

/* badges → design chips (22px, 6px radius, 700; tinted status with a dot) */
.badge { display:inline-flex !important; align-items:center; gap:6px; height:22px; padding:0 8px !important; border-radius:6px !important; font-size:12px !important; font-weight:700 !important; line-height:1; white-space:nowrap; }
.badge.text-light-success, .badge.bg-light-success, .badge.bg-success-subtle, .badge.text-bg-success, .badge.bg-success { background:var(--ds-ok-bg) !important; color:var(--ds-ok) !important; }
.badge.text-light-warning, .badge.bg-light-warning, .badge.bg-warning-subtle, .badge.text-bg-warning, .badge.bg-warning { background:var(--ds-wa-bg) !important; color:var(--ds-wa) !important; }
.badge.text-light-danger, .badge.bg-light-danger, .badge.bg-danger-subtle, .badge.text-bg-danger, .badge.bg-danger { background:var(--ds-er-bg) !important; color:var(--ds-er) !important; }
.badge.text-light-info, .badge.bg-light-info, .badge.bg-info-subtle, .badge.text-light-primary, .badge.bg-light-primary, .badge.bg-primary-subtle, .badge.bg-info { background:var(--ds-in-bg) !important; color:var(--ds-in) !important; }
.badge.text-light-secondary, .badge.bg-light-secondary, .badge.bg-secondary-subtle, .badge.bg-light, .badge.text-bg-light, .badge.bg-secondary, .badge.text-light-dark, .badge.bg-light-dark { background:var(--ds-line3) !important; color:var(--ds-ink2) !important; }
.badge.bg-primary, .badge.bg-dark, .badge.text-bg-dark { background:var(--ds-ink) !important; color:var(--ds-surface) !important; }
.badge:is(.text-light-success,.bg-light-success,.bg-success-subtle,.text-light-warning,.bg-light-warning,.bg-warning-subtle,.text-light-danger,.bg-light-danger,.bg-danger-subtle,.text-light-info,.bg-light-info,.bg-info-subtle,.text-light-secondary,.bg-light-secondary,.bg-secondary-subtle)::before {
  content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:0 0 auto;
}

/* tabs: underline (.nav-tabs) and the theme's filled tab bar → design segmented control */
.nav-tabs { border-bottom:1px solid var(--ds-line) !important; gap:4px; }
.nav-tabs .nav-link { height:46px; display:inline-flex; align-items:center; gap:8px; padding:0 12px !important; font-weight:600 !important; color:var(--ds-ink3) !important;
  border:0 !important; border-bottom:2px solid transparent !important; background:transparent !important; margin-bottom:-1px; border-radius:0 !important; }
.nav-tabs .nav-link.active, .nav-tabs .nav-link:hover { color:var(--ds-ink) !important; }
.nav-tabs .nav-link.active { border-bottom-color:var(--ds-acc) !important; }
.nav-tabs.tab-primary, .nav-tabs.bg-primary, .nav-pills { display:inline-flex !important; background:var(--ds-seg) !important; border:0 !important; border-radius:10px !important; padding:3px !important; gap:2px; flex-wrap:wrap; }
.nav-tabs.tab-primary .nav-link, .nav-tabs.bg-primary .nav-link, .nav-pills .nav-link {
  height:34px; padding:0 12px !important; border:0 !important; border-radius:8px !important; font-size:13px !important; font-weight:600 !important;
  color:var(--ds-ink3) !important; background:transparent !important; margin:0; white-space:nowrap;
}
.nav-tabs.tab-primary .nav-link.active, .nav-tabs.bg-primary .nav-link.active, .nav-pills .nav-link.active {
  background:var(--ds-surface) !important; color:var(--ds-ink) !important; box-shadow:0 1px 2px rgba(17,24,39,.1) !important;
}
.nav-tabs.tab-primary .nav-link i, .nav-tabs.bg-primary .nav-link i { color:inherit !important; }

/* modals / dropdowns / alerts / SweetAlert */
.modal-content { border:0 !important; border-radius:14px !important; box-shadow:0 16px 40px rgba(17,24,39,.14) !important; background:var(--ds-surface) !important; overflow:hidden; }
.modal-header { padding:16px 20px !important; border-bottom:1px solid var(--ds-line3) !important; background:var(--ds-surface) !important; }
.modal-title { font-size:17px !important; font-weight:800 !important; color:var(--ds-ink) !important; }
.modal-body { padding:20px !important; }
.modal-footer { padding:14px 20px !important; border-top:1px solid var(--ds-line3) !important; background:var(--ds-fill2) !important; gap:8px; }
.modal-backdrop.show { opacity:.4; background:#111827; }
.dropdown-menu { border:1px solid var(--ds-line) !important; border-radius:10px !important; box-shadow:var(--g-e2) !important; padding:6px !important; background:var(--ds-surface) !important; }
.dropdown-item { border-radius:6px; min-height:36px; display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--ds-ink2) !important; }
.dropdown-item:hover, .dropdown-item:focus { background:var(--ds-fill) !important; color:var(--ds-ink) !important; }
.dropdown-item.text-danger { color:var(--ds-er) !important; }
.alert { border-radius:12px !important; border:1px solid !important; padding:14px 16px !important; font-size:13px; }
.alert-warning { background:var(--ds-wa-bg) !important; border-color:var(--ds-wa-line) !important; color:var(--ds-wa) !important; }
.alert-danger { background:var(--ds-er-bg) !important; border-color:var(--ds-er-line) !important; color:var(--ds-er) !important; }
.alert-info, .alert-primary { background:var(--ds-in-bg) !important; border-color:var(--ds-in-line) !important; color:var(--ds-in) !important; }
.alert-success { background:var(--ds-ok-bg) !important; border-color:var(--ds-ok-line) !important; color:var(--ds-ok) !important; }
.swal2-popup { border-radius:14px !important; font-family:var(--ds-font) !important; }
.swal2-title { font-weight:800 !important; color:var(--ds-ink) !important; font-size:20px !important; }
.swal2-styled.swal2-confirm { background:var(--ds-ink) !important; border-radius:10px !important; font-weight:700 !important; box-shadow:none !important; }
.swal2-styled.swal2-cancel, .swal2-styled.swal2-deny { background:var(--ds-surface) !important; color:var(--ds-ink) !important; border:1px solid var(--ds-line2) !important; border-radius:10px !important; font-weight:700 !important; }
.progress { height:8px !important; border-radius:999px !important; background:var(--ds-line3) !important; }
.progress-bar { background:var(--ds-ink); border-radius:999px; }

/* the Ctrl-K palette (sharbale-ui.js) */
.kit-palette { border-radius:14px !important; border:1px solid var(--ds-line) !important; font-family:var(--ds-font); }

/* ---------------------------------------------------------------------
   6. DS COMPONENT KIT — 1:1 port of the design's shared CSS, ds- prefix.
      Rebuilt pages use these (e.g. ds-kpis/ds-kpi, ds-chip ds-ok,
      ds-alert ds-wa, ds-seg, ds-tabs, ds-t, ds-bar). Icons: tabler
      <i class="ti ti-…"> inside ds components are sized like the
      design's 18px stroke icons.
   --------------------------------------------------------------------- */
[class*="ds-"] > i.ti, .ds-kic i.ti { font-size:18px; line-height:1; }
.ds-kic i.ti { font-size:19px; }
.ds-i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.ds-i.ds-sm{width:16px;height:16px}
.ds-i.ds-lg{width:22px;height:22px}
.ds-i.ds-xl{width:28px;height:28px}
/* shell */
.ds-cnt{margin-inline-start:auto;font-size:11px;font-weight:700;color:var(--ds-ink3);background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:999px;padding:0 7px;line-height:18px}
.ds-cnt.ds-hot{background:var(--ds-acc);border-color:var(--ds-acc);color:var(--ds-on-acc)}
.ds-kbd{font-size:11px;font-weight:700;color:var(--ds-ink3);background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:5px;padding:0 6px;direction:ltr;line-height:18px}
.ds-ib{width:40px;height:40px;border-radius:10px;border:1px solid var(--ds-line);background:var(--ds-surface);display:inline-flex;align-items:center;justify-content:center;color:var(--ds-ink2);cursor:pointer;position:relative;flex:0 0 auto}
.ds-ib:hover{background:var(--ds-fill);color:var(--ds-ink)}
.ds-ib.ds-sm{width:32px;height:32px;border-radius:8px}
.ds-ib.ds-ghost{border-color:transparent;background:transparent}
.ds-dot{position:absolute;top:8px;left:9px;width:9px;height:9px;border-radius:50%;background:var(--ds-acc);border:2px solid var(--ds-surface)}
.ds-av{width:36px;height:36px;border-radius:999px;background:var(--ds-ink);color:var(--ds-surface);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:0 0 auto}
.ds-av.ds-sm{width:28px;height:28px;font-size:11px}
.ds-av.ds-lg{width:56px;height:56px;font-size:19px;border-radius:14px}
.ds-av.ds-c1{background:var(--ds-wash3);color:var(--ds-wa)}
.ds-av.ds-c2{background:var(--ds-in-bg);color:var(--ds-in)}
.ds-av.ds-c3{background:var(--ds-ok-bg);color:var(--ds-ok)}
.ds-av.ds-c4{background:var(--ds-line3);color:var(--ds-ink2)}
/* page head */
.ds-ph{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ds-crumb{font-size:12px;font-weight:500;color:var(--ds-mut);margin-bottom:6px;display:flex;gap:6px;align-items:center}
.ds-crumb span{color:var(--ds-mut2)}
.ds-h1,.ds-ph h1{margin:0;font-size:26px;line-height:1.2;font-weight:800;letter-spacing:-.02em}
.ds-h2,.ds-ch h2{margin:0;font-size:15px;line-height:1.35;font-weight:800}
.ds-sub{font-size:13px;color:var(--ds-ink3);margin-top:4px}
.ds-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* buttons */
.ds-btn{height:40px;padding:0 16px;border-radius:10px;font-weight:700;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--ds-line2);background:var(--ds-surface);color:var(--ds-ink);cursor:pointer;white-space:nowrap}
.ds-btn:hover{background:var(--ds-fill);color:var(--ds-ink)}
.ds-btn.ds-pri{background:var(--ds-ink);border-color:var(--ds-ink);color:var(--ds-surface)}
.ds-btn.ds-pri:hover{background:var(--ds-ink-h);color:var(--ds-surface)}
.ds-btn.ds-sm{height:32px;padding:0 12px;font-size:13px;border-radius:8px}
.ds-btn.ds-lg{height:48px;padding:0 20px;font-size:15px}
.ds-btn.ds-xl{height:52px;padding:0 22px;font-size:16px;border-radius:12px}
.ds-btn.ds-ghost{border-color:transparent;background:transparent}
.ds-btn.ds-danger{color:var(--ds-er);border-color:var(--ds-er-line)}
.ds-link{font-size:13px;font-weight:700;color:var(--ds-ink);display:inline-flex;align-items:center;gap:4px}
/* cards */
.ds-card{background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:12px;box-shadow:0 1px 2px rgba(17,24,39,.05)}
.ds-ch{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--ds-line3);flex-wrap:wrap}
.ds-cb{padding:18px}
.ds-cf{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;border-top:1px solid var(--ds-line3);flex-wrap:wrap}
.ds-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.ds-kpi{padding:18px;display:flex;flex-direction:column;gap:6px}
.ds-kl{font-size:13px;font-weight:600;color:var(--ds-ink3);display:flex;align-items:center;justify-content:space-between;gap:8px}
.ds-kv{font-size:24px;line-height:1.15;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.ds-kn{font-size:12px;font-weight:500;color:var(--ds-mut)}
.ds-kic{width:36px;height:36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:var(--ds-line3);color:var(--ds-ink2)}
.ds-note-ok{color:var(--ds-ok)}
.ds-note-bad{color:var(--ds-er)}
.ds-note-wa{color:var(--ds-wa)}
/* alerts (tinted fill + border + icon) */
.ds-alert{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:12px;border:1px solid}
.ds-alert.ds-wa{background:var(--ds-wa-bg);border-color:var(--ds-wa-line);color:var(--ds-wa)}
.ds-alert.ds-er{background:var(--ds-er-bg);border-color:var(--ds-er-line);color:var(--ds-er)}
.ds-alert.ds-in{background:var(--ds-in-bg);border-color:var(--ds-in-line);color:var(--ds-in)}
.ds-alert.ds-ok{background:var(--ds-ok-bg);border-color:var(--ds-ok-line);color:var(--ds-ok)}
.ds-alert b{display:block;color:var(--ds-ink);font-size:14px}
.ds-alert p{margin:2px 0 0;font-size:13px;color:var(--ds-ink2)}
/* chips */
.ds-chip{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:6px;font-size:12px;font-weight:700;white-space:nowrap}
.ds-chip i{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block}
.ds-ok{background:var(--ds-ok-bg);color:var(--ds-ok)}
.ds-wa{background:var(--ds-wa-bg);color:var(--ds-wa)}
.ds-er{background:var(--ds-er-bg);color:var(--ds-er)}
.ds-in{background:var(--ds-in-bg);color:var(--ds-in)}
.ds-ne{background:var(--ds-line3);color:var(--ds-ink2)}
.ds-ac{background:var(--ds-acc);color:var(--ds-on-acc)}
/* tables */
.ds-tw{overflow-x:auto}
table.ds-t{width:100%;border-collapse:collapse;font-size:13px}
.ds-t th{text-align:right;font-size:12px;font-weight:700;color:var(--ds-mut);padding:10px 12px;background:var(--ds-fill);border-bottom:1px solid var(--ds-line);white-space:nowrap}
.ds-t th:first-child,.ds-t td:first-child{padding-right:18px}
.ds-t th:last-child,.ds-t td:last-child{padding-left:18px}
.ds-t td{padding:0 12px;height:52px;border-bottom:1px solid var(--ds-line3);color:var(--ds-ink2);white-space:nowrap}
.ds-t tr:last-child td{border-bottom:0}
.ds-t tr.ds-picked td{background:var(--ds-wa-bg)}
.ds-t .ds-end{text-align:left}
.ds-n{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.ds-b{font-weight:700;color:var(--ds-ink)}
.ds-mut{color:var(--ds-mut);font-size:12px;font-weight:500}
.ds-who{display:flex;align-items:center;gap:10px}
.ds-who div{display:flex;flex-direction:column;line-height:1.3}
.ds-cbx{width:16px;height:16px;accent-color:var(--ds-ink)}
/* forms */
.ds-field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--ds-ink2)}
.ds-field small{font-weight:500;color:var(--ds-mut);font-size:12px}
.ds-inp{height:42px;border:1px solid var(--ds-line2);border-radius:10px;padding:0 12px;background:var(--ds-surface);font-size:14px;color:var(--ds-ink);width:100%}
.ds-inp:focus{outline:2px solid var(--ds-acc);outline-offset:1px;border-color:var(--ds-acc)}
.ds-sel{height:42px;border:1px solid var(--ds-line2);border-radius:10px;padding:0 12px;background:var(--ds-surface);font-size:14px;color:var(--ds-ink);display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:150px;cursor:pointer}
.ds-sel.ds-sm{height:36px;font-size:13px;border-radius:8px}
.ds-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:14px 18px;border-bottom:1px solid var(--ds-line3)}
.ds-fsearch{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;border:1px solid var(--ds-line2);border-radius:8px;background:var(--ds-surface);color:var(--ds-mut);flex:1 1 220px;max-width:340px;box-sizing:border-box}
.ds-fsearch.ds-block{flex:none;max-width:none;width:100%}
.ds-split{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.ds-split>.ds-wide{flex:999 1 560px;min-width:0}
.ds-split>.ds-side{flex:1 1 300px;min-width:0}
.ds-fsearch input{border:0;outline:0;background:transparent;flex:1;min-width:0;font-size:13px;color:var(--ds-ink)}
.ds-toggle{width:36px;height:20px;border-radius:999px;background:var(--ds-line2);position:relative;flex:0 0 auto}
.ds-toggle::after{content:"";position:absolute;top:2px;right:2px;width:16px;height:16px;border-radius:50%;background:var(--ds-surface);box-shadow:0 1px 2px rgba(0,0,0,.2)}
.ds-toggle.ds-on{background:var(--ds-ink)}
.ds-toggle.ds-on::after{right:auto;left:2px}
/* segmented + tabs */
.ds-seg{display:inline-flex;background:var(--ds-seg);border-radius:10px;padding:3px;gap:2px;flex-wrap:wrap}
.ds-seg a{height:34px;padding:0 12px;border-radius:8px;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ds-ink3);white-space:nowrap}
.ds-seg a.ds-on{background:var(--ds-surface);color:var(--ds-ink);box-shadow:0 1px 2px rgba(17,24,39,.1)}
.ds-seg a .ds-cnt{margin:0}
.ds-tabs{display:flex;gap:4px;border-bottom:1px solid var(--ds-line);padding:0 18px;overflow-x:auto}
.ds-tabs a{height:46px;display:inline-flex;align-items:center;gap:8px;padding:0 12px;font-weight:600;color:var(--ds-ink3);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.ds-tabs a.ds-on{color:var(--ds-ink);border-bottom-color:var(--ds-acc)}
.ds-pill{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--ds-line);background:var(--ds-surface);font-size:13px;font-weight:600;color:var(--ds-ink2);white-space:nowrap}
.ds-pill.ds-on{background:var(--ds-wash3);border-color:var(--ds-acc);color:var(--ds-ink)}
/* misc */
.ds-bar{height:8px;border-radius:999px;background:var(--ds-line3);overflow:hidden}
.ds-bar span{display:block;height:100%;border-radius:999px;background:var(--ds-ink)}
.ds-dv{height:1px;background:var(--ds-line3)}
.ds-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ds-sdot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:0 0 auto}
.ds-pager{display:flex;gap:4px;align-items:center}
.ds-pager a{min-width:32px;height:32px;padding:0 8px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--ds-ink2);border:1px solid var(--ds-line);background:var(--ds-surface)}
.ds-pager a.ds-on{background:var(--ds-ink);border-color:var(--ds-ink);color:var(--ds-surface)}
/* laptop + small screens */
@media (max-width:1440px){
.ds-kpis{gap:14px}
.ds-kv{font-size:22px}
}
@media (max-width:1366px){
.ds-t td{height:48px}
.ds-h1,.ds-ph h1{font-size:24px}
.ds-split>.ds-side{flex-basis:280px}
}
/* hide low-priority table columns on laptops: add hc3…hc8 to table.t */
@media (max-width:1366px){
.ds-t.ds-hc3 th:nth-child(3),.ds-t.ds-hc3 td:nth-child(3),.ds-t.ds-hc4 th:nth-child(4),.ds-t.ds-hc4 td:nth-child(4),.ds-t.ds-hc5 th:nth-child(5),.ds-t.ds-hc5 td:nth-child(5),.ds-t.ds-hc6 th:nth-child(6),.ds-t.ds-hc6 td:nth-child(6),.ds-t.ds-hc7 th:nth-child(7),.ds-t.ds-hc7 td:nth-child(7),.ds-t.ds-hc8 th:nth-child(8),.ds-t.ds-hc8 td:nth-child(8){display:none}
.ds-lap-hide{display:none}
}
@media (max-width:767px){
.ds-ph{align-items:flex-start}
}
.ds-note{background:#fef9e1;border:1px dashed #e8c547;border-radius:10px;padding:12px 14px;color:#6b5400;font-size:13px}


/* ds page frame: a rebuilt page's <main class="ds-page"> gets the design's
   column rhythm (18px gaps, 1520 max) */
.ds-page { display:flex; flex-direction:column; gap:18px; width:100%; max-width:1520px; }
.ds-page > * { margin:0; }
@media (max-width:1440px){ .ds-page { gap:16px; } }
/* typography helpers used across the screens */
.ds-num, .ds-n { font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate; }
.ds-card .ds-tw > table.ds-t:last-child tr:last-child td { border-bottom:0; }
.ds-chip.ds-ac i { background:var(--ds-on-acc); }
/* tabler icons inside ds controls */
.ds-btn i.ti, .ds-link i.ti, .ds-seg i.ti, .ds-tabs i.ti, .ds-pill i.ti { font-size:17px; line-height:1; }
.ds-ib i.ti { font-size:19px; }
.ds-alert > i.ti { font-size:20px; margin-top:1px; }

/* shared patterns that recur across several design screens (modals, settings, forms) */
.ds-dlg { background:var(--ds-surface); border-radius:14px; box-shadow:0 16px 40px rgba(17,24,39,.14); overflow:hidden; display:flex; flex-direction:column; }
.ds-dh { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; border-bottom:1px solid var(--ds-line3); }
.ds-df { display:flex; align-items:center; gap:8px; padding:14px 20px; border-top:1px solid var(--ds-line3); background:var(--ds-fill2); }
.ds-db { padding:20px; display:flex; flex-direction:column; gap:18px; }
.ds-sec { padding:18px 20px; display:flex; flex-direction:column; gap:14px; border-bottom:1px solid var(--ds-line3); }
.ds-sec h3, .ds-sec .ds-sec-t { margin:0; font-size:13px; font-weight:800; color:var(--ds-ink); display:flex; align-items:center; gap:8px; }
.ds-step { display:flex; align-items:center; gap:10px; font-size:13px; font-weight:800; color:var(--ds-ink); }
.ds-step .ds-num { width:24px; height:24px; border-radius:50%; background:var(--ds-ink); color:var(--ds-surface); font-size:12px; display:inline-flex; align-items:center; justify-content:center; }
.ds-g2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px 16px; }
.ds-fgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.ds-req { color:var(--ds-er); }
.ds-inp.ds-f, .ds-inp:focus { border-color:var(--ds-acc); outline:2px solid var(--ds-acc); outline-offset:1px; }
.ds-ix { display:flex; align-items:center; gap:8px; height:44px; border:1px solid var(--ds-line2); border-radius:10px; padding:0 12px; background:var(--ds-surface); }
.ds-ix input { border:0; outline:0; flex:1; min-width:0; font-size:16px; font-weight:700; background:transparent; color:var(--ds-ink); }
.ds-ix.ds-f, .ds-ix:focus-within { border-color:var(--ds-acc); box-shadow:0 0 0 3px color-mix(in srgb, var(--ds-acc) 22%, transparent); }
.ds-aff { font-weight:700; color:var(--ds-ink3); }
.ds-sum { background:var(--ds-fill); border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; gap:8px; font-size:13px; }
.ds-snav { flex:0 1 220px; display:flex; flex-direction:column; gap:2px; }
.ds-snav a { display:flex; align-items:center; gap:10px; height:40px; padding:0 12px; border-radius:8px; font-weight:600; color:var(--ds-ink2); cursor:pointer; }
.ds-snav a:hover { background:var(--ds-line3); color:var(--ds-ink); }
.ds-snav a.on, .ds-snav a.active { font-weight:700; background:var(--ds-surface); box-shadow:inset 0 0 0 1px var(--ds-line); color:var(--ds-ink); }
.ds-snav a.on i, .ds-snav a.active i { color:var(--ds-acc-ink); }
.ds-snav a.ds-dz { color:var(--ds-er); }
.ds-savebar { position:sticky; bottom:0; margin-top:auto; background:var(--ds-surface); border-top:1px solid var(--ds-line); box-shadow:0 -8px 24px rgba(17,24,39,.06); padding:12px 24px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; z-index:5; }
.ds-ltr { direction:ltr; text-align:right; }
.ds-affix { position:relative; }
.ds-affix span { position:absolute; top:0; bottom:0; left:12px; display:flex; align-items:center; color:var(--ds-mut); font-weight:600; }
button.ds-toggle { border:0; padding:0; cursor:pointer; }
.ds-empty { display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:48px 20px; color:var(--ds-ink3); }
.ds-empty .ds-empty-ic { width:56px; height:56px; border-radius:14px; background:var(--ds-line3); display:flex; align-items:center; justify-content:center; color:var(--ds-ink2); font-size:26px; }
.ds-empty b { font-size:17px; font-weight:800; color:var(--ds-ink); }

/* ---------------------------------------------------------------------
   7. GLOBAL SEARCH PALETTE (Ctrl-K) — design screen MSearch
   --------------------------------------------------------------------- */
.kit-palette-backdrop { background:rgba(17,24,39,.35) !important; }
.kit-palette.ds-pal {
  position:fixed !important; top:9vh !important; left:50% !important; right:auto !important; transform:translateX(-50%);
  width:min(820px, calc(100vw - 24px)) !important; max-height:82vh; border-radius:14px !important; border:0 !important;
  background:var(--ds-surface) !important; box-shadow:0 24px 64px rgba(17,24,39,.22) !important; overflow:hidden; z-index:1081;
  flex-direction:column; font-family:var(--ds-font); padding:0 !important;
}
.kit-palette.ds-pal.open { display:flex !important; }
.ds-pal .pal-h { display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--ds-line3); }
.ds-pal .pal-h > i { font-size:20px; color:var(--ds-mut); }
.ds-pal .pal-h input { flex:1; min-width:0; border:0 !important; outline:0 !important; box-shadow:none !important; background:transparent !important;
  font-size:18px !important; font-weight:800; color:var(--ds-ink) !important; padding:0 !important; height:auto !important; }
.ds-pal .pal-h input::placeholder { font-weight:500; color:var(--ds-mut2); }
.ds-pal .pal-clear { border:0; background:transparent; font-size:13px; font-weight:700; color:var(--ds-ink3); cursor:pointer; padding:4px 6px; border-radius:6px; }
.ds-pal .pal-clear:hover { background:var(--ds-line3); color:var(--ds-ink); }
.ds-pal .pal-f { display:flex; gap:8px; flex-wrap:wrap; padding:12px 20px; border-bottom:1px solid var(--ds-line3); }
.ds-pal .pal-pill { display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 12px; border-radius:999px; border:1px solid var(--ds-line);
  background:var(--ds-surface); font-size:13px; font-weight:700; color:var(--ds-ink2); cursor:pointer; }
.ds-pal .pal-pill .pal-n { min-width:20px; height:18px; padding:0 6px; border-radius:999px; background:var(--ds-line3); color:var(--ds-ink2); font-size:11px; display:inline-flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums; }
.ds-pal .pal-pill.on { background:var(--ds-wash3); border-color:var(--ds-acc); color:var(--ds-ink); }
.ds-pal .pal-pill.on .pal-n { background:var(--ds-surface); }
.ds-pal .pal-r { flex:1; min-height:120px; max-height:none !important; overflow:auto; padding:6px 8px 10px !important; }
.ds-pal .pal-g { display:flex; justify-content:space-between; align-items:center; padding:14px 12px 6px; font-size:12px; font-weight:800; color:var(--ds-mut); }
.ds-pal .pal-g a { font-size:12px; font-weight:800; color:var(--ds-ink); }
.ds-pal .pal-it { display:flex; align-items:center; gap:12px; padding:10px 12px !important; border-radius:10px; border:1px solid transparent; color:var(--ds-ink) !important; }
.ds-pal .pal-it:hover { background:var(--ds-fill) !important; }
.ds-pal .pal-it.focused { background:var(--ds-wa-bg) !important; border-color:var(--ds-wa-line); }
.ds-pal .pal-it .pal-t { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.3; }
.ds-pal .pal-it .pal-t b { font-size:15px; font-weight:800; color:var(--ds-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ds-pal .pal-it .pal-t small { font-size:12.5px; color:var(--ds-mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ds-pal .pal-ic { width:36px; height:36px; border-radius:10px; background:var(--ds-line3); display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.ds-pal .pal-ic i { font-size:18px !important; color:var(--ds-ink2) !important; }
.ds-pal .pal-amt { font-size:15px; font-weight:800; color:var(--ds-ink); min-width:96px; text-align:left; }
.ds-pal .pal-bal { font-size:13px; font-weight:800; color:var(--ds-wa); white-space:nowrap; }
.ds-pal .pal-go { color:var(--ds-mut) !important; font-size:16px !important; }
.ds-pal .pal-enter { display:none; }
.ds-pal .pal-it.focused .pal-enter { display:inline-block; }
.ds-pal .pal-it.pal-act.focused .pal-go { display:none; }
.ds-pal mark.pal-hl { background:var(--ds-wash2); color:inherit; padding:0 1px; border-radius:3px; }
.ds-pal .pal-empty { padding:36px 16px; }
.ds-pal .pal-ft { display:flex; gap:18px; flex-wrap:wrap; align-items:center; padding:12px 20px; border-top:1px solid var(--ds-line3); background:var(--ds-fill2);
  font-size:12px; font-weight:600; color:var(--ds-mut); }
.ds-pal .pal-ft .sx-kbd { margin-inline-end:4px; }
.ds-pal .pal-ft .pal-tip { margin-inline-start:auto; }
@media (max-width:767px){
  .kit-palette.ds-pal { top:12px !important; max-height:calc(100vh - 24px); }
  .ds-pal .pal-ft { display:none; }
  .ds-pal .ds-chip, .ds-pal .pal-amt { display:none; }
}

/* dark-mode toggle: one icon per mode (light → moon, dark → sun); beats theme rules that hide .sun */
body.dark .header-dark .sx-ib .sun-logo,
body:not(.dark) .header-dark .sx-ib .moon-logo { display:inline-flex !important; }
body.dark .header-dark .sx-ib .moon-logo,
body:not(.dark) .header-dark .sx-ib .sun-logo { display:none !important; }
/* dark mode: primary (ink → light) buttons need dark text, including nested icons/spans */
body.dark :is(.btn-primary,.btn-dark,.btn-teal,.btn-success,.btn-info,.ds-btn.ds-pri),
body.dark :is(.btn-primary,.btn-dark,.btn-teal,.btn-success,.btn-info,.ds-btn.ds-pri) * { color:#111827 !important; }

/* DataTables sort arrows in RTL: arrows sit at the column's end (left) with room reserved,
   instead of the LTR start edge where they overlapped the header text */
table.dataTable thead > tr > :is(th,td):is(.sorting,.sorting_asc,.sorting_desc,.sorting_asc_disabled,.sorting_desc_disabled) { padding-left:26px !important; }
table.dataTable thead > tr > :is(th,td):is(.sorting,.sorting_asc,.sorting_desc,.sorting_asc_disabled,.sorting_desc_disabled)::before,
table.dataTable thead > tr > :is(th,td):is(.sorting,.sorting_asc,.sorting_desc,.sorting_asc_disabled,.sorting_desc_disabled)::after { right:auto !important; left:10px !important; }
/* the design's search field (.ds-fsearch / .ds-search-like wrappers) draws its own ring — no second ring on the inner input */
.ds-fsearch input:focus, .ds-fsearch input:focus-visible { outline:0 !important; box-shadow:none !important; }
.ds-fsearch:focus-within { border-color:var(--ds-acc); box-shadow:0 0 0 2px color-mix(in srgb, var(--ds-acc) 30%, transparent); }

/* clearable price inputs (sharbale-ui.js): the × sits on the wrapper's RTL end (left) but the
   room was reserved on the input's own end — the RIGHT for LTR number inputs — so the × covered
   the digits. Pin both to the physical left so they agree for RTL and LTR inputs alike. */
.sh-clearable > .form-control, .sh-clearable > input { padding-inline-end:.75rem !important; padding-left:1.9rem !important; }
.sh-clearable > .sh-clear-btn { inset-inline-end:auto !important; left:.4rem !important; right:auto !important; }

/* select2: foot_assets.php forces every container to min-width:100% (right for modal/form
   fields, wrong inside flex filter rows where it pushed the other filters onto new lines).
   Filter rows size their selects themselves. */
.filters-bar .select2-container, .ds-filters .select2-container, .ds-acts .select2-container,
select[data-no-select2] + .select2-container { min-width:0 !important; }

/* the theme's .available{background:#2ab57d} (style.css) is generic — it painted every
   selectable day in daterangepicker green */
.daterangepicker td.available:not(.active):not(.in-range):not(.start-date):not(.end-date) { background-color:transparent !important; }
.daterangepicker td.available:hover { background-color:var(--ds-line3) !important; }
.daterangepicker td.in-range { background-color:var(--ds-wash) !important; color:var(--ds-ink) !important; }
.daterangepicker td.active, .daterangepicker td.active:hover { background-color:var(--ds-ink) !important; color:var(--ds-surface) !important; }

/* ---------------------------------------------------------------------
   8. DROPDOWNS — one look for every <select> (2026-10-09)
      The native select is the trigger (sharbale-ui.js opens a searchable
      .ds-dd list on click/typing). Text right-aligned, chevron on the left.
   --------------------------------------------------------------------- */
select:not([multiple]):not([size]) {
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-color:var(--ds-surface);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23626a77' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important; background-position:left 12px center !important; background-size:16px 16px !important;
  padding-left:36px !important; padding-right:12px !important;
  text-align:right; text-align-last:right;
  border:1px solid var(--ds-line2); border-radius:10px; color:var(--ds-ink);
  font-family:var(--ds-font); cursor:pointer; min-height:36px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:border-color .12s, box-shadow .12s;
}
body.dark select:not([multiple]):not([size]) {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa1ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
}
select:not([multiple]):not([size]):hover { border-color:var(--ds-mut2); }
select:not([multiple]):not([size]):focus,
select.ds-dd-open { border-color:var(--ds-acc) !important; box-shadow:0 0 0 2px color-mix(in srgb, var(--ds-acc) 30%, transparent) !important; outline:0 !important; }
select:not([multiple]):not([size]):disabled { background-color:var(--ds-fill); color:var(--ds-mut); cursor:not-allowed; }
select option { text-align:right; }

.ds-dd {
  position:fixed; z-index:2100; display:flex; flex-direction:column; overflow:hidden;
  background:var(--ds-surface); border:1px solid var(--ds-line); border-radius:12px;
  box-shadow:0 12px 32px rgba(17,24,39,.16); font-family:var(--ds-font); text-align:right;
  opacity:0; transform:translateY(-4px); transition:opacity .12s ease-out, transform .12s ease-out;
}
.ds-dd.up { transform:translateY(4px); }
.ds-dd.in { opacity:1; transform:none; }
.ds-dd-search { display:flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid var(--ds-line3); }
.ds-dd-search > i { font-size:16px; color:var(--ds-mut); }
.ds-dd-search input {
  flex:1; min-width:0; height:30px !important; min-height:0 !important; padding:0 !important;
  border:0 !important; outline:0 !important; box-shadow:none !important; background:transparent !important;
  font-size:14px !important; color:var(--ds-ink) !important; font-family:var(--ds-font);
}
.ds-dd-list { overflow-y:auto; padding:6px; overscroll-behavior:contain; }
.ds-dd-opt {
  display:flex; align-items:center; gap:8px; min-height:36px; padding:6px 10px; border-radius:8px;
  font-size:14px; font-weight:500; color:var(--ds-ink2); cursor:pointer; user-select:none;
}
.ds-dd-opt .ds-dd-t { flex:1; min-width:0; overflow-wrap:anywhere; line-height:1.35; }
.ds-dd-opt.kb { background:var(--ds-fill); color:var(--ds-ink); }
.ds-dd-opt.on { background:var(--ds-wash); color:var(--ds-ink); font-weight:700; }
.ds-dd-opt.on.kb { background:var(--ds-wash2); }
.ds-dd-opt > i { font-size:16px; color:var(--ds-acc-ink); flex:0 0 auto; }
.ds-dd-opt.ph { color:var(--ds-mut); }
.ds-dd-opt.dis { opacity:.45; cursor:default; }
.ds-dd-opt mark { background:var(--ds-wash2); color:inherit; padding:0; border-radius:3px; }
.ds-dd-grp { padding:10px 10px 4px; font-size:11px; font-weight:700; color:var(--ds-mut); letter-spacing:.02em; }
.ds-dd-empty, .ds-dd-more { padding:14px 10px; text-align:center; color:var(--ds-mut); font-size:13px; }
.ds-dd-title { padding:14px 16px 4px; font-size:15px; font-weight:800; color:var(--ds-ink); }
/* phones: bottom sheet */
.ds-dd-back { position:fixed; inset:0; z-index:2099; background:rgba(17,24,39,.35); }
.ds-dd.ds-dd-sheet { left:0 !important; right:0 !important; bottom:0; top:auto !important; width:auto !important;
  max-height:75vh; border-radius:16px 16px 0 0; transform:translateY(16px); }
.ds-dd.ds-dd-sheet.in { transform:none; }
.ds-dd-sheet .ds-dd-list { max-height:calc(75vh - 110px) !important; padding-bottom:max(10px, env(safe-area-inset-bottom)); }
.ds-dd-sheet .ds-dd-opt { min-height:46px; font-size:15px; }
@media (prefers-reduced-motion: reduce) { .ds-dd { transition:none; } }

/* pages that build their own select2 (client filter, recipe material picker, offers, billboards)
   get the same look */
.select2-container { direction:rtl; }
.select2-container--default .select2-selection--single .select2-selection__rendered { text-align:right; padding-right:12px !important; padding-left:34px !important; color:var(--ds-ink) !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow { left:8px !important; right:auto !important; }
.select2-container--default .select2-selection--multiple { min-height:42px; padding:3px 8px !important; }
.select2-container--default.select2-container--open .select2-selection { border-color:var(--ds-acc) !important; box-shadow:0 0 0 2px color-mix(in srgb, var(--ds-acc) 30%, transparent) !important; }
.select2-dropdown { z-index:2100 !important; border:1px solid var(--ds-line) !important; border-radius:12px !important;
  box-shadow:0 12px 32px rgba(17,24,39,.16) !important; overflow:hidden; background:var(--ds-surface) !important; direction:rtl; }
.select2-search--dropdown { padding:8px 10px !important; border-bottom:1px solid var(--ds-line3); }
.select2-container--default .select2-search--dropdown .select2-search__field {
  height:34px; border:1px solid var(--ds-line2) !important; border-radius:8px !important; padding:0 10px !important;
  text-align:right; background:var(--ds-surface) !important; color:var(--ds-ink) !important; outline:0; }
.select2-results > .select2-results__options { padding:6px; }
.select2-results__option { text-align:right; padding:8px 10px !important; border-radius:8px; font-size:14px; color:var(--ds-ink2) !important; }
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected] { background:var(--ds-fill) !important; color:var(--ds-ink) !important; }
.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option--selected { background:var(--ds-wash) !important; color:var(--ds-ink) !important; font-weight:700; }

/* side drawers: style.css forces EVERY .offcanvas to min-width:960px (meant for the legacy /ui
   client drawer). Default to a normal drawer width; pages can still set --bs-offcanvas-width. */
.offcanvas { --bs-offcanvas-width:min(480px, 100vw); }
.offcanvas.offcanvas-start, .offcanvas.offcanvas-end { width:var(--bs-offcanvas-width) !important; min-width:0 !important; max-width:100vw !important; }
#clientDrawer { --bs-offcanvas-width:min(960px, 100vw); }