/* ============================================================================
   KISHAN SUCHIKARAN PRANALI — ERP design system
   Ported from the Himalaya ERP shell (Bootstrap 5 + custom shell), rebranded
   to an agriculture-green palette. Self-contained: layout skeleton + the .ds
   component library. Loaded after Bootstrap 5.3; same selectors win.
   ========================================================================== */

/* ── brand tokens (agriculture green / gov navy) ───────────────────────────
   Soft/line values are hardcoded (not color-mix) so old Android WebViews and
   government-office browsers render the brand correctly. */
:root {
  --brand-primary: #15803d;
  --brand-primary-dark: #126d34;
  --brand-primary-light: #e3f0e8;
  --brand-gradient-end: #449964;
  --brand-accent: #1e3a5f;
  --on-primary: #ffffff;
  --on-accent: #ffffff;
  --primary-soft: #ecf5ef;
  --primary-softer: #f3f9f5;
  --primary-line: #daebe0;
  --accent-soft: #e9ebef;

  --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);

  --sidebar-width: 240px;
  --topbar-height: 60px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Inter', 'Noto Sans Devanagari', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ds-ink);
  background: var(--ds-bg);
}
.dev { font-family: 'Noto Sans Devanagari', 'Inter', sans-serif; }
.tnum { font-variant-numeric: tabular-nums; }

/* ── layout skeleton ──────────────────────────────────────────────────────── */
.app-wrapper { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-width);
  flex: none;
  background: var(--ds-surface);
  border-right: 1px solid var(--ds-border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 1040;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--ds-border); border-radius: 8px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: var(--ds-border-strong); }
.sidebar svg { stroke-width: 1.8; }

.sidebar-header {
  height: var(--topbar-height);
  flex: none;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--ds-border);
}
.sidebar-brand { display: flex; align-items: center; gap: 11px; color: var(--ds-ink); min-width: 0; text-decoration: none; }
.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 { background: none; border: 0; color: var(--ds-muted); cursor: pointer; padding: 4px; display: inline-flex; }

.sidebar-nav { padding: 8px 0 24px; flex: 1; }
.sidebar-nav .nav-link {
  display: flex; align-items: center; gap: 11px;
  color: var(--ds-muted); font-size: 13.5px; font-weight: 500;
  border-radius: var(--r-sm); padding: 9px 10px; margin: 2px 10px;
  text-decoration: none; position: relative;
}
.sidebar-nav .nav-link svg { width: 18px; height: 18px; flex: none; }
.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 .badge-count { margin-left: auto; font-size: 11px; font-weight: 700; background: var(--brand-primary); color: #fff; border-radius: 20px; padding: 1px 7px; }

.nav-group-toggle {
  display: flex; align-items: center; gap: 11px; width: calc(100% - 20px);
  color: var(--ds-muted); font-size: 13.5px; font-weight: 500;
  padding: 9px 10px; margin: 2px 10px; border: 0; background: none;
  border-radius: var(--r-sm); cursor: pointer; text-align: left;
}
.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 .group-icon { width: 18px; height: 18px; flex: none; }
.nav-group-toggle .chevron { width: 14px; height: 14px; opacity: 0.55; margin-left: auto; transition: transform 0.25s; }
.nav-group-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.nav-group-items { padding: 0 10px 4px; }
.nav-group-items .nav-link { padding: 7px 10px 7px 39px; margin: 1px 0; font-size: 12.5px; }
.nav-group-items .nav-link svg { width: 15px; height: 15px; }

.nav-divider { height: 1px; background: var(--ds-border); margin: 8px 16px; }
.nav-section-title { color: var(--ds-subtle); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; padding: 14px 20px 6px; }

.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(11,21,36,0.4); z-index: 1035; }

/* ── main column ─────────────────────────────────────────────────────────── */
.main-content { flex: 1; min-width: 0; margin-left: var(--sidebar-width); display: flex; flex-direction: column; }

.topbar {
  height: var(--topbar-height); flex: none;
  position: sticky; top: 0; z-index: 1030;
  display: flex; align-items: center; gap: 16px; padding: 0 22px;
  background: var(--ds-surface); border-bottom: 1px solid var(--ds-border);
}
.topbar svg { stroke-width: 1.8; }
.topbar-title { font-size: 17px; font-weight: 650; margin: 0; 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; }
.topbar-right { display: flex; align-items: center; gap: 12px; }

.clinic-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--primary-soft); color: var(--brand-primary);
  border: 1px solid var(--primary-line); border-radius: var(--r-sm);
  padding: 5px 10px; font-size: 12.5px; font-weight: 600;
}
.clinic-badge svg { width: 15px; height: 15px; }

.user-menu {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--ds-border); border-radius: var(--r-sm);
  background: none; padding: 5px 10px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--ds-ink);
}
.user-menu:hover { background: var(--ds-bg); }
.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; }
.av-md { width: 30px; height: 30px; font-size: 12px; }

.content-messages { padding: 16px 22px 0; }
.content-area { padding: 22px 22px 46px; max-width: 1400px; width: 100%; margin: 0 auto; }

/* dropdown menus (Bootstrap) — design language */
.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 { 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; }

/* ── responsive: off-canvas sidebar ───────────────────────────────────────── */
@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); transition: transform 0.25s ease; }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open .sidebar-backdrop { display: block; }
  .main-content { margin-left: 0; }
}
@media (min-width: 992px) { .d-lg-none { display: none !important; } }
@media (max-width: 1120px) { .topbar-date { display: none; } }
@media (max-width: 680px) { .content-area { padding: 16px 14px 40px; } .content-messages { padding: 14px 14px 0; } }

/* ============================================================================
   Bootstrap bridge — not-yet-migrated Bootstrap pages inherit the design
   language. Scoped to .content-area so shell/modals 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); vertical-align: middle; }
.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 svg { width: 15px; height: 15px; }
.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); }
.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 .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 .alert { border-radius: var(--r-sm); }

/* ============================================================================
   .ds — design-system components (scoped under .ds). Renames vs Bootstrap:
   .card→.panel, .btn→.dbtn, .row→.trow, .alert→.callout.
   ========================================================================== */
.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; }

.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 svg { width: 16px; height: 16px; }
.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--sm { padding: 7px 11px; font-size: 12.5px; }
.ds .dbtn--danger { color: var(--bad-ink); border-color: var(--ds-border-strong); }
.ds .dbtn--danger:hover { background: var(--bad-bg); }
.ds .dbtn--good { color: var(--ok-ink); border-color: var(--ds-border-strong); }
.ds .dbtn--good:hover { background: var(--ok-bg); }

/* 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__ic svg { width: 17px; height: 17px; }
.ds .kpi__val { font-size: 29px; font-weight: 700; letter-spacing: -0.02em; margin: 12px 0 2px; line-height: 1; }
.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: #f0c9c7; 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: #ecd6ac; 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); }

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

/* panel */
.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; }
.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, .ds .pill--pending, .ds .pill--submitted,
.ds .pill--pending_ward, .ds .pill--pending_section, .ds .pill--pending_executive,
.ds .pill--pending_central, .ds .pill--appeal { background: var(--warn-bg); color: var(--warn-ink); }
.ds .pill--brand { background: var(--primary-soft); color: var(--brand-primary); }
.ds .pill--good, .ds .pill--approved, .ds .pill--verified { background: var(--ok-bg); color: var(--ok-ink); }
.ds .pill--danger, .ds .pill--rejected, .ds .pill--returned { background: var(--bad-bg); color: var(--bad-ink); }
.ds .pill--muted, .ds .pill--draft { background: var(--ds-bg); color: var(--ds-muted); }

/* rows table */
.ds .rows { display: flex; flex-direction: column; }
.ds .trowh, .ds .trow { display: grid; align-items: center; gap: 12px; padding: 11px 17px; }
.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); }

/* callouts */
.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: #ecd6ac; }
.ds .callout--warn .callout__ic { background: #fff; color: var(--warn); }
.ds .callout--danger { background: var(--bad-bg); border-color: #f0c9c7; }
.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: #b7e0c7; }
.ds .callout--good .callout__ic { background: #fff; color: var(--ok); }

/* empty state */
.ds .empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 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__ic svg { width: 22px; height: 22px; }
.ds .empty b { font-size: 14px; color: var(--ds-ink); }
.ds .empty p { margin: 4px 0 12px; font-size: 12.5px; max-width: 280px; }
.ds .sectlabel { font-size: 12px; font-weight: 600; color: var(--ds-subtle); text-transform: uppercase; letter-spacing: 0.05em; margin: 22px 0 10px; }

/* forms */
.ds .form-control, .ds .form-select,
.ds input[type="time"], .ds input[type="date"], .ds input[type="number"], .ds input[type="tel"], .ds input[type="text"], .ds input[type="email"], .ds input[type="password"] {
  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:focus {
  outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--primary-line);
}
.ds .form-control::placeholder { color: var(--ds-subtle); }
.ds textarea.form-control { min-height: 38px; resize: vertical; }
.ds .form-control.is-invalid, .ds .form-select.is-invalid, .ds input.is-invalid { border-color: var(--bad); }
.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; }
.ds .fhelp { color: var(--ds-subtle); font-size: 11.5px; margin-top: 4px; }

/* 12-col form grid */
.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: 240px; }
.ds .filterbar .flabel { margin-bottom: 3px; }
.ds .filterbar .factions { margin-top: 0; flex: none; }

/* segmented status filter (tabs) */
.ds .segtabs { display: inline-flex; background: var(--ds-bg); border: 1px solid var(--ds-border); border-radius: var(--r-sm); padding: 3px; gap: 2px; }
.ds .segtabs a { padding: 6px 13px; border-radius: 6px; font-size: 12.5px; font-weight: 600; color: var(--ds-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.ds .segtabs a.active { background: var(--ds-surface); color: var(--brand-primary); box-shadow: var(--sh-sm); }
.ds .segtabs a .n { font-variant-numeric: tabular-nums; opacity: 0.7; }

/* key-value list */
.ds .kv { display: grid; grid-template-columns: 160px 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:last-of-type, .ds .kv > dd:last-of-type { border-bottom: 0; }

/* pagination */
.ds .pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 15px; font-size: 12.5px; color: var(--ds-muted); }
.ds .pager .pages { display: flex; gap: 6px; }
.ds .pager .pages a, .ds .pager .pages span { padding: 5px 10px; border: 1px solid var(--ds-border); border-radius: 6px; text-decoration: none; color: var(--ds-ink); font-weight: 600; }
.ds .pager .pages .curr { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); }

/* 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, .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: 120px 1fr; }
  .ds .trowh { display: none; }
  .ds .trow { grid-template-columns: 1fr !important; gap: 5px; padding: 13px 16px; }
  .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; }
}