/* ============================================================================
   HIMALAYA ERP — design system & white-label theme
   Loaded AFTER style.css. Ported from design/himalaya-erp-suite.html.

   Layer A: brand tokens (tenant-overridable via inline :root block in base.html
            — those inline values are Python-precomputed, so color-mix here is
            only a fallback for the unbranded defaults).
   Layer B: legacy token remap — points style.css's --primary family at the
            brand vars so all existing Bootstrap pages rebrand coherently.
   Layer C: (added by shell/component phases) shell + .ds-scoped components.
   ========================================================================== */

/* ── Layer A · brand tokens ─────────────────────────────────────────────── */
:root {
  --brand-primary: #0d9488;
  --brand-accent: #1a2756;
  --on-primary: #ffffff;
  --on-accent: #ffffff;
  --primary-soft: color-mix(in srgb, var(--brand-primary) 8%, #fff);
  --primary-softer: color-mix(in srgb, var(--brand-primary) 5%, #fff);
  --primary-line: color-mix(in srgb, var(--brand-primary) 16%, #fff);
  --accent-soft: color-mix(in srgb, var(--brand-accent) 10%, #fff);

  /* design-system neutrals + status colors (names namespaced so they don't
     clobber style.css's --success/--warning/--danger) */
  --ds-bg: #f6f7f9;
  --ds-surface: #ffffff;
  --ds-border: #e6e8ee;
  --ds-border-strong: #d3d7e0;
  --ds-ink: #0b1524;
  --ds-muted: #59616f;
  --ds-subtle: #8990a0;

  --ok: #1e9e5a;      --ok-bg: #e7f6ee;   --ok-ink: #0f6b3b;
  --warn: #c77a0a;    --warn-bg: #fbf1e0; --warn-ink: #8a5406;
  --bad: #d6453f;     --bad-bg: #fcebea;  --bad-ink: #9c2a25;
  --inf: #2563c9;     --inf-bg: #e9f0fc;  --inf-ink: #1b4a9c;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --sh-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --sh-md: 0 4px 14px rgba(16, 24, 40, 0.06);
}

/* ── Layer B · legacy token remap (rebrands the existing Bootstrap pages) ── */
:root {
  --primary: var(--brand-primary);
  --primary-dark: var(--brand-primary-dark, color-mix(in srgb, var(--brand-primary) 85%, #000));
  --primary-light: var(--brand-primary-light, color-mix(in srgb, var(--brand-primary) 12%, #fff));
  --primary-gradient: linear-gradient(
    135deg,
    var(--brand-primary) 0%,
    var(--brand-gradient-end, color-mix(in srgb, var(--brand-primary) 80%, #fff)) 100%
  );
  --sidebar-active: var(--brand-primary);
}

/* ── Layer C · shell restyle (light sidebar + topbar per the design) ──────
   The shell markup and nav logic in base.html are unchanged; this repoints
   style.css's sidebar variables and overrides the handful of rules that
   hardcode the old dark theme. Loaded after style.css, same selectors win. */
:root {
  --sidebar-width: 236px;
  --sidebar-bg: #ffffff;
  --sidebar-hover: var(--ds-bg);
  --sidebar-text: var(--ds-muted);
  --sidebar-text-active: var(--brand-primary);
  --body-bg: var(--ds-bg);
  --border-color: var(--ds-border);
}

body {
  font-family: 'Inter', 'Noto Sans Devanagari', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.45;
}
.dev { font-family: 'Noto Sans Devanagari', 'Inter', sans-serif; }
.tnum { font-variant-numeric: tabular-nums; }

/* content column matches the design mockup's #view */
.content-area { padding: 22px 22px 46px; max-width: 1400px; width: 100%; margin: 0 auto; }
@media (max-width: 680px) {
  .content-area { padding: 16px 14px 40px; }
}

/* lucide icons at the mockup's stroke weights */
.sidebar svg, .topbar svg { stroke-width: 1.8; }

.sidebar {
  border-right: 1px solid var(--ds-border);
  box-shadow: none;
}
.sidebar::-webkit-scrollbar-thumb { background: var(--ds-border); }
.sidebar::-webkit-scrollbar-thumb:hover { background: var(--ds-border-strong); }

.sidebar-header {
  height: 60px;
  padding: 0 16px;
  border-bottom: 1px solid var(--ds-border);
}
.sidebar-brand { color: var(--ds-ink); font-size: 14px; gap: 11px; }
.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  flex: none;
  background: var(--brand-primary);
  color: var(--on-primary);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 15px;
  overflow: hidden;
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.brand-txt { min-width: 0; line-height: 1.2; }
.brand-txt b {
  font-size: 14px;
  font-weight: 600;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-txt span { font-size: 11px; color: var(--ds-subtle); font-weight: 500; }
.sidebar-toggle { color: var(--ds-muted); }

/* group toggles read as regular nav items (mockup .nav__item), not as
   uppercase section headers — that skeleton was the old sidebar's look */
.nav-group-toggle {
  color: var(--ds-muted);
  font-size: 13.5px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  padding: 9px 10px;
  margin: 2px 10px;
  gap: 11px;
  border-radius: var(--r-sm);
}
.nav-group-toggle:hover { background: var(--ds-bg); color: var(--ds-ink); }
.nav-group-toggle[aria-expanded="true"] { color: var(--ds-ink); font-weight: 600; }
.nav-group-toggle i.group-icon, .nav-group-toggle svg.group-icon { width: 18px; height: 18px; }
.nav-group-toggle .chevron { width: 14px; height: 14px; opacity: 0.55; }
.nav-group-items { background: transparent; padding: 0 10px 4px; }
.nav-group-items .nav-link {
  padding: 7px 10px 7px 39px;
  margin: 1px 0;
  font-size: 12.5px;
  font-weight: 500;
}
.nav-group-items .nav-link svg, .nav-group-items .nav-link i { width: 15px; height: 15px; font-size: 15px; }
.nav-divider { background: var(--ds-border); }
.nav-section-title { color: var(--ds-subtle); opacity: 1; font-size: 10.5px; letter-spacing: 0.06em; }

.sidebar-nav .nav-link {
  color: var(--ds-muted);
  font-size: 13.5px;
  font-weight: 500;
  border-radius: var(--r-sm);
  padding: 9px 10px;
  margin: 2px 10px;
  gap: 11px;
}
.sidebar-nav .nav-link:hover { background: var(--ds-bg); color: var(--ds-ink); }
.sidebar-nav .nav-link.active {
  background: var(--primary-soft);
  color: var(--brand-primary);
  font-weight: 600;
}
.sidebar-nav .nav-link.active::before { background: var(--brand-primary); }
.nav-group-items small { color: var(--ds-subtle); }

/* base.html's inline accordion styles assume the dark sidebar — relight */
.nav-dropdown-toggle { color: var(--ds-subtle); }
.nav-dropdown-toggle:hover { color: var(--ds-ink); }
.nav-dropdown-toggle[aria-expanded="true"] { color: var(--ds-ink); }
.nav-dropdown-items { background: var(--ds-bg); }

.topbar {
  background: var(--ds-surface);
  border-bottom: 1px solid var(--ds-border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  gap: 16px;
  padding: 0 22px;
}
.topbar-title { font-size: 17px; font-weight: 650; flex: none; }
.topbar-date {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  padding-left: 16px;
  border-left: 1px solid var(--ds-border);
}
.topbar-date b { font-size: 12.5px; font-weight: 600; color: var(--ds-ink); }
.topbar-date span { font-size: 11px; color: var(--ds-subtle); }
.topbar-spacer { flex: 1; }
@media (max-width: 1120px) {
  .topbar-date { display: none; }
}

.clinic-badge {
  background: var(--primary-soft);
  color: var(--brand-primary);
  border: 1px solid var(--primary-line);
}
.clinic-badge img {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  object-fit: cover;
}
.user-menu { border: 1px solid var(--ds-border); border-radius: var(--r-sm); }
.user-menu:hover { background: var(--ds-bg); }

/* initials avatar (shell-global; mockup .avatar/.av-lg) */
.avatar { border-radius: 50%; background: var(--primary-soft); color: var(--brand-primary); display: inline-grid; place-items: center; font-weight: 600; flex: none; }
.av-lg { width: 30px; height: 30px; font-size: 12px; }

/* dropdown menus (user menu, row actions) — mockup .menu */
.dropdown-menu {
  font-size: 13px;
  border: 1px solid var(--ds-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  padding: 6px;
  min-width: 200px;
}
.dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 9px;
  border-radius: var(--r-sm);
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ds-ink);
}
.dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus { background: var(--ds-bg); color: var(--ds-ink); }
.dropdown-menu .dropdown-item svg, .dropdown-menu .dropdown-item i { width: 15px; height: 15px; }
.dropdown-menu .dropdown-item-text { font-size: 12px; padding: 6px 10px; color: var(--ds-subtle); }
.dropdown-menu .dropdown-divider { border-color: var(--ds-border); margin: 5px 4px; }

/* login page — light restyle over style.css's dark glass card */
.login-wrapper { background: var(--ds-bg); }
.login-wrapper::before { display: none; }
.login-card {
  background: var(--ds-surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--ds-border);
  box-shadow: var(--sh-md);
  border-radius: var(--r-lg);
  padding: 40px;
}
.login-card .login-mark {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--brand-primary);
  color: var(--on-primary);
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  overflow: hidden;
  font-weight: 700;
  font-size: 22px;
}
.login-card .login-mark img { width: 100%; height: 100%; object-fit: cover; }
.login-card .brand h1 { font-size: 20px; font-weight: 650; letter-spacing: -0.01em; color: var(--ds-ink); }
.login-card .brand p { font-size: 13px; color: var(--ds-muted); }
.login-card .form-label { font-size: 12px; font-weight: 600; color: var(--ds-muted); margin-bottom: 5px; }
.login-card .form-control {
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--r-sm);
  color: var(--ds-ink);
}
.login-card .form-control:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--primary-line); }
.login-card .btn-primary {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--on-primary);
  font-weight: 600;
  font-size: 14px;
  padding: 11px;
  border-radius: var(--r-sm);
}
.login-card .btn-primary:hover {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  filter: brightness(1.09);
  transform: none;
  box-shadow: none;
}
.login-card .alert-danger {
  background: var(--bad-bg);
  border: 1px solid var(--bad);
  border-color: color-mix(in srgb, var(--bad) 28%, transparent);
  color: var(--bad-ink);
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
}

/* .ds pages carry their own pagehead h1 — drop the duplicate topbar title
   (mockup topbar has no page title). :has() misses = title stays, harmless. */
.main-content:has(.ds .pagehead) .topbar-title { display: none; }
.main-content:has(.ds .pagehead) .topbar-date { border-left: 0; padding-left: 0; }

@media print {
  .bottom-nav { display: none !important; }
}

/* ── Layer E · Bootstrap bridge ────────────────────────────────────────────
   The not-yet-migrated Bootstrap pages inherit the design language wholesale:
   cards, tables, buttons, links, and form controls take the mockup's
   typography and chrome. Scoped to .content-area so the shell, modals from
   vendor JS, and email templates are untouched. */
.content-area a:not(.btn):not(.dbtn):not(.dropdown-item):not(.page-link):not(.nav-link) {
  color: var(--brand-primary);
  text-decoration: none;
  font-weight: 600;
}
.content-area a:not(.btn):not(.dbtn):not(.dropdown-item):not(.page-link):not(.nav-link):hover {
  text-decoration: underline;
}

.content-area .card { border: 1px solid var(--ds-border); border-radius: var(--r-md); box-shadow: var(--sh-sm); }
.content-area .card-header {
  background: transparent;
  padding: 14px 17px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ds-ink);
  border-bottom: 1px solid var(--ds-border);
}
.content-area .card-body { padding: 17px; }
.content-area .card-body.p-0 { padding: 0; }

.content-area .table { font-size: 13.5px; }
.content-area .table thead th {
  background: var(--ds-bg);
  color: var(--ds-subtle);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 0;
  padding: 11px 17px;
}
.content-area .table td { padding: 11px 17px; border-color: var(--ds-border); }
.content-area .table > :not(caption) > * > * { box-shadow: none; }
.content-area .table-hover > tbody > tr:hover > * { background: var(--primary-softer); }

.content-area .btn {
  font-weight: 600;
  font-size: 13px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
}
.content-area .btn-sm { padding: 6px 11px; font-size: 12.5px; }
.content-area .btn-primary {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--on-primary);
}
.content-area .btn-primary:hover {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  filter: brightness(1.09);
  transform: none;
  box-shadow: none;
}
/* outline buttons become the mockup's neutral dbtn */
.content-area .btn-outline-primary, .content-area .btn-outline-secondary {
  color: var(--ds-ink);
  border-color: var(--ds-border-strong);
  background: var(--ds-surface);
}
.content-area .btn-outline-primary:hover, .content-area .btn-outline-secondary:hover {
  background: var(--ds-bg);
  color: var(--ds-ink);
  border-color: var(--ds-border-strong);
}
.content-area .btn-outline-danger { color: var(--bad-ink); border-color: var(--ds-border-strong); background: var(--ds-surface); }
.content-area .btn-outline-danger:hover { background: var(--bad-bg); color: var(--bad-ink); border-color: var(--ds-border-strong); }
.content-area .btn-outline-success { color: var(--ok-ink); border-color: var(--ds-border-strong); background: var(--ds-surface); }
.content-area .btn-outline-success:hover { background: var(--ok-bg); color: var(--ok-ink); border-color: var(--ds-border-strong); }
.content-area .btn-outline-warning { color: var(--warn-ink); border-color: var(--ds-border-strong); background: var(--ds-surface); }
.content-area .btn-outline-warning:hover { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--ds-border-strong); }
.content-area .btn-outline-info { color: var(--inf-ink); border-color: var(--ds-border-strong); background: var(--ds-surface); }
.content-area .btn-outline-info:hover { background: var(--inf-bg); color: var(--inf-ink); border-color: var(--ds-border-strong); }

.content-area .text-primary { color: var(--brand-primary) !important; }

.content-area .form-control, .content-area .form-select {
  font-size: 13.5px;
  color: var(--ds-ink);
  border-color: var(--ds-border-strong);
  border-radius: var(--r-sm);
}
.content-area .form-control:focus, .content-area .form-select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--primary-line);
}
.content-area .form-label { font-size: 12px; font-weight: 600; color: var(--ds-muted); }

.content-area .modal-content { border: 1px solid var(--ds-border); border-radius: var(--r-lg); }
.content-area .alert { border-radius: var(--r-sm); }

/* ── Layer D · design-system components ────────────────────────────────────
   Scoped under a .ds wrapper so nothing leaks into the Bootstrap pages.
   Renames vs the mockup (Bootstrap collisions): .card→.panel, .btn→.dbtn,
   .row/.rowh→.trow/.trowh, .alert→.callout. Everything else keeps the
   mockup's names. */

.ds { color: var(--ds-ink); font-size: 14px; line-height: 1.45; }
.ds h1, .ds h2, .ds h3, .ds h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
.ds .ic { width: 18px; height: 18px; stroke-width: 1.8; flex: none; }
.ds .ic-sm { width: 15px; height: 15px; stroke-width: 1.9; flex: none; }
.ds .ic-lg { width: 22px; height: 22px; stroke-width: 1.7; flex: none; }

/* page head + quick actions */
.ds .pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.ds .pagehead h1 { font-size: 21px; }
.ds .pagehead p { margin: 3px 0 0; color: var(--ds-muted); font-size: 13px; }
.ds .qa { display: flex; gap: 9px; flex-wrap: wrap; }
.ds .dbtn { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 600; font-size: 13px; padding: 9px 13px; border-radius: var(--r-sm); border: 1px solid var(--ds-border); background: var(--ds-surface); color: var(--ds-ink); cursor: pointer; white-space: nowrap; text-decoration: none; }
.ds .dbtn:hover { background: var(--ds-bg); color: var(--ds-ink); }
.ds .dbtn--primary { background: var(--brand-primary); color: var(--on-primary); border-color: var(--brand-primary); }
.ds .dbtn--primary:hover { filter: brightness(1.09); background: var(--brand-primary); color: var(--on-primary); }
.ds .dbtn--accent { background: var(--brand-accent); color: var(--on-accent); border-color: var(--brand-accent); }
.ds .dbtn--accent:hover { filter: brightness(1.09); background: var(--brand-accent); color: var(--on-accent); }
.ds .dbtn--sm { padding: 7px 11px; font-size: 12.5px; }

/* KPI cards */
.ds .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.ds .kpi { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--r-md); box-shadow: var(--sh-sm); padding: 17px 17px 15px; position: relative; overflow: hidden; }
.ds .kpi__top { display: flex; align-items: center; gap: 9px; color: var(--ds-muted); font-size: 12.5px; font-weight: 600; }
.ds .kpi__ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.ds .kpi__val { font-size: 29px; font-weight: 700; letter-spacing: -0.02em; margin: 12px 0 2px; line-height: 1; }
.ds .kpi__val .cur { font-size: 16px; font-weight: 600; color: var(--ds-muted); margin-right: 1px; }
.ds .kpi__val .u { font-size: 16px; color: var(--ds-muted); font-weight: 600; }
.ds .kpi__sub { font-size: 12.5px; color: var(--ds-muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ds .meter { height: 6px; border-radius: 6px; background: var(--ds-border); overflow: hidden; margin: 12px 0 8px; }
.ds .meter > span { display: block; height: 100%; background: var(--brand-primary); border-radius: 6px; }
.ds .kpi--danger { border-color: color-mix(in srgb, var(--bad) 30%, var(--ds-border)); background: linear-gradient(var(--bad-bg), var(--ds-surface) 62%); }
.ds .kpi--danger .kpi__ic { background: var(--bad-bg); color: var(--bad); }
.ds .kpi--warn { border-color: color-mix(in srgb, var(--warn) 30%, var(--ds-border)); background: linear-gradient(var(--warn-bg), var(--ds-surface) 66%); }
.ds .kpi--warn .kpi__ic { background: var(--warn-bg); color: var(--warn); }
.ds .kpi--good .kpi__ic { background: var(--ok-bg); color: var(--ok); }
.ds .kpi--brand .kpi__ic { background: var(--primary-soft); color: var(--brand-primary); }
.ds .kpi--info .kpi__ic { background: var(--inf-bg); color: var(--inf); }

/* secondary stat strip */
.ds .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 15px; }
.ds .stat { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--r-md); box-shadow: var(--sh-sm); padding: 13px 15px; display: flex; align-items: center; gap: 12px; }
.ds .stat__ic { width: 34px; height: 34px; border-radius: 9px; background: var(--ds-bg); color: var(--ds-muted); display: grid; place-items: center; flex: none; }
.ds .stat b { font-size: 19px; font-weight: 700; display: block; line-height: 1.1; }
.ds .stat span { font-size: 12px; color: var(--ds-muted); }
.ds .stat--warn { border-color: color-mix(in srgb, var(--warn) 35%, var(--ds-border)); }
.ds .stat--warn .stat__ic { background: var(--warn-bg); color: var(--warn); }
.ds .stat--warn b { color: var(--warn-ink); }
.ds .stat--danger { border-color: color-mix(in srgb, var(--bad) 35%, var(--ds-border)); }
.ds .stat--danger .stat__ic { background: var(--bad-bg); color: var(--bad); }
.ds .stat--danger b { color: var(--bad-ink); }

/* layout grid (not Bootstrap's) */
.ds .grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 15px; margin-top: 15px; align-items: start; }
.ds .grid--half { grid-template-columns: 1fr 1fr; }
.ds .col { display: grid; gap: 15px; min-width: 0; flex: none; width: auto; padding: 0; }

/* panel (mockup .card) */
.ds .panel { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--r-md); box-shadow: var(--sh-sm); }
.ds .panel__hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 17px; border-bottom: 1px solid var(--ds-border); }
.ds .panel__hd h3 { font-size: 14px; }
.ds .panel__hd .sub { font-size: 12px; color: var(--ds-subtle); }
.ds .panel__bd { padding: 17px; }
.ds .link { color: var(--brand-primary); font-weight: 600; font-size: 12.5px; text-decoration: none; display: inline-flex; align-items: center; gap: 3px; cursor: pointer; }
.ds .link:hover { text-decoration: underline; color: var(--brand-primary); }

.ds .chartwrap { position: relative; height: 230px; }
.ds .chartwrap.sm { height: 190px; }

/* pills */
.ds .pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.ds .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.9; }
.ds .pill--info { background: var(--inf-bg); color: var(--inf-ink); }
.ds .pill--warn { background: var(--warn-bg); color: var(--warn-ink); }
.ds .pill--brand { background: var(--primary-soft); color: var(--brand-primary); }
.ds .pill--good { background: var(--ok-bg); color: var(--ok-ink); }
.ds .pill--danger { background: var(--bad-bg); color: var(--bad-ink); }
.ds .pill--muted { background: var(--ds-bg); color: var(--ds-muted); }

/* rows table (mockup .rows/.rowh/.row) */
/* Between the 680px mobile-stack breakpoint and a table's natural width,
   fixed-width columns (e.g. asset register's 150+100+100+105+95+250px) have
   nowhere to shrink to, and with overflow-wrap:anywhere below, ordinary short
   words (e.g. "ASSET", "Custodian") shatter mid-character instead of wrapping.
   Tables should give their flexible (Nfr) columns an explicit minmax() floor
   (e.g. "minmax(160px, 1fr)" instead of bare "1fr") so the row never needs to
   shrink below a readable width; .rows scrolls horizontally if it still
   doesn't fit. Do NOT give .trow/.trowh a content-based min-width (e.g.
   max-content) — that sizes each row independently off its own content,
   which desyncs column widths between rows since content differs per row. */
.ds .rows { display: flex; flex-direction: column; overflow-x: auto; }
.ds .trowh, .ds .trow { display: grid; align-items: center; gap: 12px; padding: 11px 17px; }
/* grid cells default to min-width:auto (min-content), so long unbroken values
   (e.g. asset codes like CDS/WVIN/OE/PRINTER/FY-2019-02) overflow their track
   and overlap the next column. Force cells to respect their track and wrap. */
.ds .trowh > *, .ds .trow > * { min-width: 0; overflow-wrap: anywhere; }
.ds .trowh { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ds-subtle); font-weight: 600; background: var(--ds-bg); }
.ds .trow { border-bottom: 1px solid var(--ds-border); }
.ds .trow:last-child { border-bottom: 0; }
.ds .trow b { font-weight: 600; font-size: 13.5px; }
.ds .cellmuted { color: var(--ds-muted); font-size: 13px; }
.ds .u-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ds .u-name b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds .u-name span { font-size: 11.5px; color: var(--ds-subtle); }
.ds .avatar { border-radius: 50%; background: var(--primary-soft); color: var(--brand-primary); display: grid; place-items: center; font-weight: 600; flex: none; }
.ds .av-md { width: 30px; height: 30px; font-size: 12px; }

/* people list */
.ds .plist { display: flex; flex-direction: column; }
.ds .prow { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--ds-border); }
.ds .prow:last-child { border-bottom: 0; }
.ds .prow b { font-size: 13.5px; font-weight: 600; display: block; line-height: 1.25; }
.ds .prow small { font-size: 11.5px; color: var(--ds-subtle); }
.ds .prow time { margin-left: auto; font-size: 11.5px; color: var(--ds-subtle); white-space: nowrap; }

/* callouts (mockup .alert) */
.ds .callout { display: flex; gap: 12px; padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid; align-items: flex-start; }
.ds .callout + .callout { margin-top: 10px; }
.ds .callout__ic { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.ds .callout b { font-size: 13.5px; font-weight: 600; display: block; }
.ds .callout p { margin: 2px 0 0; font-size: 12.5px; color: var(--ds-muted); }
.ds .callout--warn { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 28%, transparent); }
.ds .callout--warn .callout__ic { background: #fff; color: var(--warn); }
.ds .callout--danger { background: var(--bad-bg); border-color: color-mix(in srgb, var(--bad) 28%, transparent); }
.ds .callout--danger .callout__ic { background: #fff; color: var(--bad); }
.ds .callout--calm { background: var(--ds-bg); border-color: var(--ds-border); }
.ds .callout--calm .callout__ic { background: var(--ds-surface); color: var(--ds-subtle); }
.ds .callout--good { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 28%, transparent); }
.ds .callout--good .callout__ic { background: #fff; color: var(--ok); }

.ds .minilist { list-style: none; margin: 11px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ds .minilist li { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; }
.ds .minilist .qty { font-weight: 600; font-variant-numeric: tabular-nums; }
.ds .qty--danger { color: var(--bad-ink); }
.ds .qty--warn { color: var(--warn-ink); }

/* donut + legend */
.ds .donutwrap { display: flex; align-items: center; gap: 18px; }
.ds .donutbox { position: relative; width: 148px; height: 148px; flex: none; }
.ds .donutbox .center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ds .donutbox .center b { font-size: 23px; font-weight: 700; line-height: 1; }
.ds .donutbox .center span { font-size: 11px; color: var(--ds-subtle); }
.ds .dlegend { display: flex; flex-direction: column; gap: 9px; flex: 1; list-style: none; margin: 0; padding: 0; }
.ds .dlegend li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.ds .dlegend .sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.ds .dlegend .n { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }

/* occupancy strip (hotel room types / wards) */
.ds .occ { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.ds .occ__c { border: 1px solid var(--ds-border); border-radius: var(--r-sm); padding: 12px 13px; }
.ds .occ__c b { font-size: 13px; font-weight: 600; }
.ds .occ__c .num { font-size: 20px; font-weight: 700; margin: 6px 0 3px; }
.ds .occ__c .num small { font-size: 12px; color: var(--ds-subtle); font-weight: 500; }
.ds .occ__bar { height: 6px; border-radius: 6px; background: var(--ds-border); overflow: hidden; margin-top: 4px; }
.ds .occ__bar > span { display: block; height: 100%; border-radius: 6px; }

/* table map / room grid */
.ds .cellmap { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 10px; }
.ds .cell { border-radius: var(--r-sm); border: 1px solid var(--ds-border); padding: 10px 8px; text-align: center; position: relative; background: var(--ds-surface); display: block; text-decoration: none; color: inherit; }
.ds .cell b { font-size: 13px; font-weight: 600; display: block; }
.ds .cell small { font-size: 10.5px; color: var(--ds-muted); }
.ds .cell .st { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; }
.ds .cell--free { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 25%, var(--ds-border)); }
.ds .cell--free .st { background: var(--ok); }
.ds .cell--seated, .ds .cell--occ { background: var(--inf-bg); border-color: color-mix(in srgb, var(--inf) 25%, var(--ds-border)); }
.ds .cell--seated .st, .ds .cell--occ .st { background: var(--inf); }
.ds .cell--bill, .ds .cell--dirty { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 28%, var(--ds-border)); }
.ds .cell--bill .st, .ds .cell--dirty .st { background: var(--warn); }
.ds .cell--resv, .ds .cell--ooo { background: var(--ds-bg); border-color: var(--ds-border-strong); }
.ds .cell--resv .st { background: var(--ds-subtle); }
.ds .cell--ooo .st { background: var(--bad); }
.ds .maplegend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--ds-muted); margin-top: 14px; }
.ds .maplegend span { display: inline-flex; align-items: center; gap: 6px; }
.ds .maplegend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* progress bar (attendance / payroll / aging) */
.ds .pbar { height: 8px; border-radius: 8px; background: var(--ds-border); overflow: hidden; display: flex; }
.ds .pbar > i { height: 100%; display: block; }

/* trend chip */
.ds .trend { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; font-size: 12px; padding: 2px 6px; border-radius: 20px; }
.ds .trend--up { background: var(--ok-bg); color: var(--ok-ink); }
.ds .trend--down { background: var(--bad-bg); color: var(--bad-ink); }

/* empty state */
.ds .empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 26px 18px; color: var(--ds-muted); min-height: 150px; }
.ds .empty__ic { width: 42px; height: 42px; border-radius: 11px; background: var(--ds-bg); color: var(--ds-subtle); display: grid; place-items: center; margin-bottom: 12px; }
.ds .empty b { font-size: 14px; color: var(--ds-ink); }
.ds .empty p { margin: 4px 0 12px; font-size: 12.5px; max-width: 240px; }

.ds .sectlabel { font-size: 12px; font-weight: 600; color: var(--ds-subtle); text-transform: uppercase; letter-spacing: 0.05em; margin: 22px 0 10px; }

/* forms — Django widgets keep their Bootstrap form-control/form-select classes,
   so style those names inside .ds instead of touching forms.py */
.ds .form-control, .ds .form-select,
.ds input[type="time"], .ds input[type="date"] {
  width: 100%; font: inherit; font-size: 13.5px; color: var(--ds-ink);
  background: var(--ds-surface); border: 1px solid var(--ds-border-strong);
  border-radius: var(--r-sm); padding: 8px 11px; box-shadow: none;
  transition: border-color 0.1s, box-shadow 0.1s; min-height: 0; line-height: 1.4;
}
.ds .form-select { padding-right: 30px; }
.ds .form-control:focus, .ds .form-select:focus,
.ds input[type="time"]:focus, .ds input[type="date"]:focus {
  outline: none; border-color: var(--brand-primary);
  /* --primary-line is Python-precomputed; color-mix upgrade for modern browsers */
  box-shadow: 0 0 0 3px var(--primary-line);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 15%, transparent);
}
.ds .form-control::placeholder { color: var(--ds-subtle); }
.ds textarea.form-control { min-height: 38px; resize: vertical; }
/* restore Bootstrap's input-group flex sizing (width:100% above would
   force the field onto its own row, wrapping the attached button) */
.ds .input-group > .form-control, .ds .input-group > .form-select { width: 1%; flex: 1 1 auto; }
.ds .input-group > .form-control:not(:last-child), .ds .input-group > .form-select:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ds .input-group > .btn { display: inline-flex; align-items: center; }
.ds .flabel { display: block; font-size: 12px; font-weight: 600; color: var(--ds-muted); margin-bottom: 5px; }
.ds .flabel .req { color: var(--bad); }
.ds .ferr { color: var(--bad-ink); font-size: 12px; margin-top: 4px; }

/* 12-col form grid; .f2/.f3/.f4/.f6/.f8/.f12 spans, stacks on mobile */
.ds .fgrid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.ds .f2 { grid-column: span 2; } .ds .f3 { grid-column: span 3; }
.ds .f4 { grid-column: span 4; } .ds .f6 { grid-column: span 6; }
.ds .f8 { grid-column: span 8; } .ds .f12 { grid-column: span 12; }
.ds .factions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 18px; }

/* filter bar */
.ds .filterbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--r-md); box-shadow: var(--sh-sm); padding: 12px 14px; margin-bottom: 15px; }
.ds .filterbar > div { min-width: 140px; flex: 1 1 140px; max-width: 220px; }
.ds .filterbar .flabel { margin-bottom: 3px; }
.ds .filterbar .factions { margin-top: 0; flex: none; }

/* key-value list (detail panels) */
.ds .kv { display: grid; grid-template-columns: 120px 1fr; }
.ds .kv > dt { color: var(--ds-muted); font-weight: 500; font-size: 13px; padding: 7px 0; border-bottom: 1px solid var(--ds-border); margin: 0; }
.ds .kv > dd { font-size: 13.5px; padding: 7px 0; border-bottom: 1px solid var(--ds-border); margin: 0; min-width: 0; overflow-wrap: break-word; }
.ds .kv > dt:nth-last-of-type(1), .ds .kv > dd:nth-last-of-type(1) { border-bottom: 0; }

/* status pill aliases — template writes pill--{{ status|lower }} */
.ds .pill--scheduled, .ds .pill--partial, .ds .pill--approved { background: var(--inf-bg); color: var(--inf-ink); }
.ds .pill--in_progress, .ds .pill--pending, .ds .pill--unpaid { background: var(--warn-bg); color: var(--warn-ink); }
.ds .pill--completed, .ds .pill--paid, .ds .pill--active { background: var(--ok-bg); color: var(--ok-ink); }
.ds .pill--cancelled, .ds .pill--inactive, .ds .pill--draft { background: var(--ds-bg); color: var(--ds-muted); }
.ds .pill--no_show, .ds .pill--missed, .ds .pill--overdue, .ds .pill--void, .ds .pill--rejected { background: var(--bad-bg); color: var(--bad-ink); }
.ds .pill--sent { background: var(--inf-bg); color: var(--inf-ink); }
.ds .pill--accepted { background: var(--ok-bg); color: var(--ok-ink); }
.ds .pill--converted { background: var(--primary-soft); color: var(--brand-primary); }
.ds .pill--expired { background: var(--warn-bg); color: var(--warn-ink); }
.ds .pill--in_use { background: var(--ok-bg); color: var(--ok-ink); }
.ds .pill--in_repair { background: var(--warn-bg); color: var(--warn-ink); }
.ds .pill--transferred { background: var(--inf-bg); color: var(--inf-ink); }
.ds .pill--disposed { background: var(--ds-bg); color: var(--ds-muted); }

/* row action buttons */
.ds .rowact { display: flex; gap: 6px; flex-wrap: wrap; }
/* border-color declared twice: plain-var fallback first for engines
   without color-mix (old Android WebViews), tinted upgrade after */
.ds .dbtn--danger { color: var(--bad-ink); border-color: var(--ds-border-strong); border-color: color-mix(in srgb, var(--bad) 35%, var(--ds-border)); }
.ds .dbtn--danger:hover { background: var(--bad-bg); color: var(--bad-ink); }
.ds .dbtn--good { color: var(--ok-ink); border-color: var(--ds-border-strong); border-color: color-mix(in srgb, var(--ok) 35%, var(--ds-border)); }
.ds .dbtn--good:hover { background: var(--ok-bg); color: var(--ok-ink); }
.ds .dbtn--warn { color: var(--warn-ink); border-color: var(--ds-border-strong); border-color: color-mix(in srgb, var(--warn) 40%, var(--ds-border)); }
.ds .dbtn--warn:hover { background: var(--warn-bg); color: var(--warn-ink); }

/* responsive */
@media (max-width: 1120px) {
  .ds .grid, .ds .grid--half { grid-template-columns: 1fr; }
  .ds .kpis { grid-template-columns: repeat(2, 1fr); }
  .ds .stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .ds .kpis { grid-template-columns: 1fr; }
  .ds .stats { grid-template-columns: 1fr; }
  .ds .f2, .ds .f3, .ds .f4, .ds .f6, .ds .f8 { grid-column: span 12; }
  .ds .filterbar > div { max-width: none; }
  .ds .kv { grid-template-columns: 105px 1fr; }
  /* tables collapse to stacked cards — no horizontal scroll */
  .ds .trowh { display: none; }
  .ds .trow { grid-template-columns: 1fr !important; gap: 5px; padding: 13px 16px; min-width: 0; }
  .ds .trow > * { display: flex; justify-content: space-between; gap: 12px; }
  .ds .trow .u-name { justify-content: flex-start; }
  .ds .trow [data-l]::before { content: attr(data-l); font-size: 11px; color: var(--ds-subtle); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
}