/* =====================================================================
   DESIGN V2 — A-to-Z re-skin layer (Jitendra, 2026-10-23:
   "सर्व प्रणालींचे design look and feel NEW design कर A2Z").

   Loaded LAST in base.html (after theme/sidenav/style). It REFINES the
   shared components — shell, cards, tables, forms, buttons, badges,
   KPI blocks, empty states — in the new language:

   • Interior: neat, clean, professional, COLORISED — one pastel
     identity per module (tokens in theme.css) on the pista/white +
     deep-green system; the module accent binds via body[data-module]
     (the Flask blueprint name set in base.html).
   • Motion: tasteful and fast — one entrance fade-up per page, hover
     lifts on interactive cards, animated focus/hover transitions.
     Transform + opacity only; prefers-reduced-motion disables all.
   • No layout or behavior changes: same classes, same hooks, same
     geometry contracts (sidenav offsets live in sidenav.css).
   ===================================================================== */

/* ---------- Per-module pastel identity (blueprint → accent) ------- */
body[data-module="tickets"], body[data-module="dashboard"],
body[data-module="reports"], body[data-module="search"],
body[data-module="state"], body[data-module="incidents"] {
  --mod-accent: var(--mod-tickets); --mod-soft: var(--mod-tickets-soft); }
body[data-module="assets"], body[data-module="amc"],
body[data-module="work_orders"], body[data-module="vendor"],
body[data-module="setu_reports"] {
  --mod-accent: var(--mod-assets); --mod-soft: var(--mod-assets-soft); }
body[data-module="eparwana"], body[data-module="eparwana_admin"] {
  --mod-accent: var(--mod-eparwana); --mod-soft: var(--mod-eparwana-soft); }
body[data-module="visitors"], body[data-module="visitors_staff"],
body[data-module="citizen_portal"] {
  --mod-accent: var(--mod-visitors); --mod-soft: var(--mod-visitors-soft); }
body[data-module="queue"] {
  --mod-accent: var(--mod-queue); --mod-soft: var(--mod-queue-soft); }
body[data-module="vc"] {
  --mod-accent: var(--mod-vc); --mod-soft: var(--mod-vc-soft); }
body[data-module="crm"] {
  --mod-accent: var(--mod-crm); --mod-soft: var(--mod-crm-soft); }
body[data-module="aadhaar"] {
  --mod-accent: var(--mod-aadhaar); --mod-soft: var(--mod-aadhaar-soft); }
body[data-module="admin"], body[data-module="offices"],
body[data-module="office_import"], body[data-module="govlinks_admin"],
body[data-module="ittools_admin"], body[data-module="ops"] {
  --mod-accent: var(--mod-admin); --mod-soft: var(--mod-admin-soft); }

/* ---------- Page entrance (one orchestrated moment) ----------------
   Fill mode is BACKWARDS, never both/forwards (BUG-005, 2026-10-24):
   a forwards-filled rise leaves an identity-matrix transform on the
   wrapper forever; any non-none transform makes the wrapper the
   containing block for fixed-position descendants, so an in-content
   .sheet (ticket detail #actionSheet) anchored to it and pushed the
   page ~383px into horizontal scroll on desktop. Backwards fill keeps
   the identical entrance (from-state applies during the delay) and
   leaves no transform behind. Same rule on dash-rise below. */
@media (prefers-reduced-motion: no-preference) {
  main.container > * { animation: v2-rise .45s var(--ease-out) backwards; }
  main.container > *:nth-child(2) { animation-delay: .05s; }
  main.container > *:nth-child(3) { animation-delay: .1s; }
  main.container > *:nth-child(4) { animation-delay: .15s; }
  main.container > *:nth-child(n+5) { animation-delay: .2s; }
  @keyframes v2-rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
  }
}

/* ---------- Topbar -------------------------------------------------- */
.topbar {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gov-line);
  box-shadow: 0 1px 10px rgba(20, 83, 45, .05);
}
.topbar .brand { letter-spacing: .01em; }
.tricolor-bar {
  height: 3px;
  background: linear-gradient(90deg, var(--gov-saffron) 0 33.4%,
    var(--gov-tri-cream) 33.4% 66.7%, var(--gov-tri-green) 66.7% 100%);
}

/* ---------- Sidenav micro-motion ----------------------------------- */
.sidenav-link { transition: background var(--dur-fast) var(--ease-out),
  color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.sidenav-link:hover { transform: translateX(2px); }
.sidenav-link.is-active {
  background: var(--mod-soft);
  box-shadow: inset 3px 0 0 var(--mod-accent);
}
@media (prefers-reduced-motion: reduce) {
  .sidenav-link { transition: none; }
  .sidenav-link:hover { transform: none; }
}

/* ---------- Page heads & kickers ------------------------------------ */
.page-head h1 {
  font-size: 1.5rem; line-height: 1.25; color: var(--gov-indigo-950);
  letter-spacing: .005em;
}
.page-head h1::after {
  content: ""; display: block; width: 44px; height: 3px; margin-top: .45rem;
  border-radius: 2px; background: var(--mod-accent);
}
.kicker { color: var(--mod-accent); }
.form-sec {
  color: var(--gov-indigo-950);
  border-bottom: 2px solid var(--mod-soft);
  padding-bottom: .35rem;
}

/* ---------- Cards ---------------------------------------------------- */
.card {
  border: 1px solid var(--gov-line);
  border-radius: var(--radius-card);
  box-shadow: var(--gov-shadow-sm);
  transition: box-shadow var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out);
}
a.card:hover, .card.hoverable:hover {
  box-shadow: var(--gov-shadow-md);
  transform: translateY(-2px);
  border-color: #cfe4c6;
  text-decoration: none;
}
@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  a.card:hover, .card.hoverable:hover { transform: none; }
}

/* ---------- KPI / stat blocks (colorised by module) ------------------ */
.stat {
  border-top: 3px solid var(--mod-accent);
  background: linear-gradient(180deg, var(--mod-soft), #fff 62%);
}
.stat-num { color: var(--gov-indigo-950); letter-spacing: .01em; }
.stat-label { color: var(--gov-muted); font-weight: 600; }

/* ---------- Buttons --------------------------------------------------- */
.btn {
  border-radius: 9px;
  transition: background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(.98); }
.btn[disabled], .btn:disabled, button[disabled] {
  opacity: .45; pointer-events: none; }
.btn-primary {
  background: var(--gov-indigo-900);
  box-shadow: 0 4px 12px rgba(20, 83, 45, .22);
}
.btn-primary:hover { background: var(--gov-indigo-700); }
.btn:focus-visible, a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--gov-focus-ring);
  outline-offset: 1px;
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:active { transform: none; }
}

/* ---------- Forms ------------------------------------------------------ */
input[type="text"], input[type="search"], input[type="email"],
input[type="tel"], input[type="number"], input[type="date"],
input[type="time"], input[type="password"], input[type="url"],
select, textarea {
  border-radius: 9px;
  border-color: var(--gov-field-border);
  transition: border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
input:hover, select:hover, textarea:hover {
  border-color: var(--gov-field-border-hover);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--gov-indigo-900);
  box-shadow: 0 0 0 3.5px var(--gov-focus-ring);
  outline: none;
}
.filters {
  background: var(--gov-card);
  border: 1px solid var(--gov-line);
  border-radius: var(--radius-card);
  padding: .8rem .9rem;
  box-shadow: var(--gov-shadow-sm);
}

/* ---------- Tables ----------------------------------------------------- */
.table-wrap {
  border: 1px solid var(--gov-line);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--gov-shadow-sm);
  background: #fff;
}
.table thead th {
  background: var(--mod-soft);
  color: var(--gov-indigo-950);
  border-bottom: 2px solid var(--mod-accent);
  font-size: .86rem;
  letter-spacing: .02em;
}
.table tbody tr { transition: background var(--dur-fast) var(--ease-out); }
.table tbody tr:hover { background: var(--mod-soft); }
.data-table thead th {
  background: var(--mod-soft);
  border-bottom: 2px solid var(--mod-accent);
}

/* ---------- Badges / chips ---------------------------------------------- */
.badge { border-radius: 999px; letter-spacing: .01em; }

/* ---------- Empty states -------------------------------------------------- */
.empty-state, .crm-empty, .vc-empty, .q-empty {
  text-align: center;
  color: var(--gov-muted);
  background: var(--mod-soft);
  border: 1px dashed #c3d6bd;
  border-radius: var(--radius-card);
  padding: 1.6rem 1rem;
}

/* ---------- Footer -------------------------------------------------------- */
.footer { color: var(--gov-muted); }

/* =====================================================================
   GLASS MENUS + MOBILE BOTTOM NAV (2026-10-23, Jitendra 16:37/16:38:
   "text ला कडक बकवास वाटते" — plain white menu surfaces banned).
   Every opened menu surface in the staff shell uses the shared glass
   recipe below (the same frosted language as the login glass):
   translucent pista/white tint + blur + saturate, 1px soft border,
   deep soft shadow, radius >= 16px. Text is the standard ink
   (#1c2b22) on a >= .90-alpha white composite — contrast > 11:1 on
   any backdrop (measured in the dashboard-v2 evidence audit).
   backdrop-filter unsupported -> near-opaque tinted fallback.
   ===================================================================== */
:root {
  --glass-bg: linear-gradient(160deg, rgba(255,255,255,.95),
    rgba(240,248,236,.91));
  --glass-bg-solid: #f2f8ee;
  --glass-border: 1px solid rgba(255,255,255,.65);
  --glass-shadow: 0 24px 48px rgba(10,35,20,.22),
    inset 0 1px 0 rgba(255,255,255,.85);
  --glass-blur: blur(16px) saturate(1.25);
}
.glass-panel {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: 16px;
}
@supports not ((backdrop-filter: blur(2px)) or
  (-webkit-backdrop-filter: blur(2px))) {
  .glass-panel, .sheet, .bottomnav { background: var(--glass-bg-solid); }
}
/* All staff-shell sheets (प्रणाली menu sheet, action sheets, group
   sheets) render as glass panels. */
.sheet {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
}
@media (max-width: 860px) {
  .sheet { border-radius: 20px 20px 0 0; }
}
/* Language toggle: a soft glass pill in the (white) topbar. */
.lang-toggle {
  background: rgba(255,255,255,.6);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(20,83,45,.14); border-radius: 999px;
  padding: 2px 6px; margin-left: .5rem;
}
.lang-toggle .lang-btn { border-color: transparent; }

/* ---------- Mobile bottom navigation (<=768px) ---------- */
@media (max-width: 768px) {
  /* The drawer FAB is gone on mobile: the प्रणाली sheet replaces
     it — no duplicate menu paths. */
  .sidenav-fab { display: none !important; }
  /* Slim top header: brand + language only (user box moves to the
     प्रोफाइल slot's page). */
  .topbar .userbox { display: none; }
  .topbar-inner { padding-top: .45rem; padding-bottom: .45rem; }
  /* Frosted glass bar. */
  .bottomnav {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-top: 1px solid rgba(20,83,45,.16);
    box-shadow: 0 -8px 28px rgba(10,35,20,.14);
  }
  .bottomnav .pnav-item { min-height: 56px; border-radius: 12px; }
  /* Active slot: deep green, filled soft pill. */
  .bottomnav .pnav-item[aria-current="page"] {
    color: var(--gov-indigo-900);
    background: rgba(20,83,45,.12);
  }
  .bottomnav .pnav-item[aria-current="page"] .pnav-ic {
    color: var(--gov-indigo-900);
  }
  /* Centre create: raised deep-green circle. */
  .bottomnav .pnav-create { overflow: visible; }
  .pnav-create-ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; margin-top: -18px; border-radius: 50%;
    background: var(--gov-indigo-900); color: #fff;
    border: 2px solid rgba(255,255,255,.85);
    box-shadow: 0 8px 18px rgba(10,35,20,.35);
  }
  .pnav-create-ic .ic { width: 1.5rem; height: 1.5rem; }
  .bottomnav .pnav-create[aria-current="page"] {
    background: transparent; color: var(--gov-indigo-900);
  }
}

/* =====================================================================
   MOTION SYSTEM (2026-10-23, Jitendra 17:28: "अजून पण कोणताच
   animation effect नाही आहे — smooth आणि responsive पाहिजे").
   One coherent system, shared by the staff shell:
   • Tokens: --dur-fast .18s / --dur-med .32s (theme.css) +
     --dur-slow .55s, --ease-out (theme.css) + --ease-spring /
     --ease-io below. JS motion (dashboard count-ups, GSAP on the
     landing) uses the same scale: .9s eased count-ups, .22–.5s
     power2/power3.out tweens ≈ --ease-out.
   • Transform + opacity ONLY; nothing animates layout properties.
   • Every entrance is an @media (prefers-reduced-motion:
     no-preference) citizen: reduced motion = fully static, and
     because entrances are CSS animations (not JS-hidden states),
     content is visible with JS off, in print, and after the
     animation completes (fill ends at the natural state).
   ===================================================================== */
:root {
  --dur-slow: .55s;
  --ease-spring: cubic-bezier(.3, 1.25, .4, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}

/* ---------- Dashboard entrance choreography -------------------------
   Header → KPI cards → systems strip → work sections, one cascade.
   Replaces the generic main-rise for this page only (the generic
   rule animates the section wrappers as one block; here the cards
   inside the bands stagger individually). */
@media (prefers-reduced-motion: no-preference) {
  body[data-module="dashboard"] main.container > *:not(.dash-sec):not(.dash-topbar) { animation: none; }
  body[data-module="dashboard"] .dash-topbar {
    animation: dash-rise var(--dur-med) var(--ease-out) backwards; }
  body[data-module="dashboard"] .kpi-band .stat {
    animation: dash-rise .5s var(--ease-out) backwards; }
  body[data-module="dashboard"] .kpi-band .stat:nth-child(2) { animation-delay: .06s; }
  body[data-module="dashboard"] .kpi-band .stat:nth-child(3) { animation-delay: .12s; }
  body[data-module="dashboard"] .kpi-band .stat:nth-child(4) { animation-delay: .18s; }
  body[data-module="dashboard"] .kpi-band .stat:nth-child(5) { animation-delay: .24s; }
  body[data-module="dashboard"] .kpi-band .stat:nth-child(6) { animation-delay: .3s; }
  body[data-module="dashboard"] .sys-card-d {
    animation: dash-rise .5s var(--ease-out) backwards; animation-delay: .3s; }
  body[data-module="dashboard"] .sys-grid-d .sys-card-d:nth-child(2) { animation-delay: .35s; }
  body[data-module="dashboard"] .sys-grid-d .sys-card-d:nth-child(3) { animation-delay: .4s; }
  body[data-module="dashboard"] .sys-grid-d .sys-card-d:nth-child(4) { animation-delay: .45s; }
  body[data-module="dashboard"] .sys-grid-d .sys-card-d:nth-child(5) { animation-delay: .5s; }
  body[data-module="dashboard"] .sys-grid-d .sys-card-d:nth-child(6) { animation-delay: .55s; }
  body[data-module="dashboard"] .sys-grid-d .sys-card-d:nth-child(7) { animation-delay: .6s; }
  body[data-module="dashboard"] .sys-grid-d .sys-card-d:nth-child(8) { animation-delay: .65s; }
  body[data-module="dashboard"] .dash-sec {
    animation: dash-rise var(--dur-slow) var(--ease-out) .42s backwards; }
  body[data-module="dashboard"] .svc-grid .svc-card {
    animation: dash-rise .5s var(--ease-out) backwards; }
  body[data-module="dashboard"] .svc-grid .svc-card:nth-child(2) { animation-delay: .05s; }
  body[data-module="dashboard"] .svc-grid .svc-card:nth-child(3) { animation-delay: .1s; }
  body[data-module="dashboard"] .svc-grid .svc-card:nth-child(4) { animation-delay: .15s; }
  body[data-module="dashboard"] .svc-grid .svc-card:nth-child(5) { animation-delay: .2s; }
  body[data-module="dashboard"] .svc-grid .svc-card:nth-child(6) { animation-delay: .25s; }
  body[data-module="dashboard"] .svc-grid .svc-card:nth-child(n+7) { animation-delay: .3s; }
  @keyframes dash-rise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
  }
}

/* ---------- Dashboard card hover motion ------------------------------ */
body[data-module="dashboard"] .sys-card-d {
  transition: transform var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out);
}
body[data-module="dashboard"] .sys-card-d:hover {
  transform: translateY(-2px);
  box-shadow: var(--gov-shadow-md);
}
@media (prefers-reduced-motion: reduce) {
  body[data-module="dashboard"] .sys-card-d { transition: none; }
  body[data-module="dashboard"] .sys-card-d:hover { transform: none; }
}

/* ---------- Sheets: token-paced slide + backdrop fade -----------------
   (style.css owns the geometry; design-v2 loads last and re-paces
   the same transform transition on the motion token scale, and the
   backdrop — inserted with the sheet — fades in instead of snapping.) */
.sheet { transition: transform var(--dur-med) var(--ease-out); }
@media (prefers-reduced-motion: no-preference) {
  .sheet-backdrop { animation: sheet-fade var(--dur-fast) var(--ease-out); }
  @keyframes sheet-fade { from { opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  .sheet { transition: none; }
}

/* ---------- Bottom nav micro-motion (<=768px) --------------------------
   Full page loads mean the active pill cannot literally slide
   between slots across pages; it SETTLES into place on load (rise +
   icon pop), every slot presses with a quick scale, and slot state
   changes cross-fade on the token durations. */
@media (max-width: 768px) {
  .bottomnav .pnav-item {
    transition: transform var(--dur-fast) var(--ease-out),
      background var(--dur-fast) var(--ease-out),
      color var(--dur-fast) var(--ease-out);
  }
  .bottomnav .pnav-item:active { transform: scale(.93); }
  .bottomnav .pnav-create:active { transform: none; }
  .bottomnav .pnav-create:active .pnav-create-ic { transform: scale(.9); }
  .pnav-create-ic { transition: transform var(--dur-fast) var(--ease-out); }
}
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  .bottomnav .pnav-item[aria-current="page"] {
    animation: pnav-settle var(--dur-med) var(--ease-out); }
  .bottomnav .pnav-item[aria-current="page"] .pnav-ic {
    animation: pnav-pop var(--dur-med) var(--ease-spring); }
  @keyframes pnav-settle {
    from { transform: translateY(3px); }
    to { transform: none; }
  }
  @keyframes pnav-pop {
    0% { transform: scale(.75); }
    100% { transform: scale(1); }
  }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .bottomnav .pnav-item { transition: none; }
  .bottomnav .pnav-item:active { transform: none; }
  .bottomnav .pnav-create:active .pnav-create-ic { transform: none; }
}

/* ---------- Stacked tables on small screens (2026-10-24 missed-fix) --
   Wide tables (e.g. Aadhaar case documents) overflow a 360px card because
   their min-content width exceeds the card. Below 640px, tables marked
   .table-stack become labelled rows instead — the PAGE never scrolls
   sideways. Scoped to .table-stack only; other tables are untouched. */
@media (max-width: 640px) {
  table.table-stack, table.table-stack tbody,
  table.table-stack tr, table.table-stack td {
    display: block;
    width: 100%;
  }
  table.table-stack thead { display: none; }
  table.table-stack tr {
    border: 1px solid var(--gov-line);
    border-radius: 12px;
    margin-bottom: .6rem;
    padding: .4rem .7rem;
  }
  table.table-stack td {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    padding: .25rem 0;
    border: none;
    text-align: right;
    overflow-wrap: anywhere;
  }
  table.table-stack td::before {
    content: attr(data-label);
    font-weight: 600;
    text-align: left;
    flex-shrink: 0;
  }
  table.table-stack td:last-child:empty { display: none; }
  .timeline li { overflow-wrap: anywhere; }
}

/* =====================================================================
   NAV REDESIGN (2026-10-25, Jitendra: "nav bar sara ache se design
   karo, sara kachara ekhi jagah par hai"). Three visually distinct
   tiers on the rail AND the sheet; zero word, route, permission or
   behaviour change — presentation + organisation only. Smart-filter
   rules untouched: one expanded module, compact switcher row,
   grouped Admin, dashboard cards stay the overview, landing
   untouched. Skills applied: ui-ux-pro-max (nav hierarchy, bottom
   nav ≤5, 44px targets, no horizontal scroll), frontend-design
   (group headers as information, one bold element — the + create
   button — rest quiet), sleek mobile patterns (safe areas, touch
   feedback; Sleek API not used — no key provisioned).
   Tier 1 — CURRENT MODULE (anchor): tinted pista panel.
   Tier 2 — SWITCHER: quiet rows (rail) / 2-col grid (sheet).
   Tier 3 — ADMIN + account: separated by solid dividers, muted.
   ===================================================================== */

/* --- 44px floor for every rail link (baseline measured 43px) --- */
.sidenav-link { box-sizing: border-box; min-height: 44px; }

/* --- Rail globals: one "home" group, hairline below --- */
.sidenav-globals { display: grid; gap: 2px; padding-bottom: 0.6rem;
  margin-bottom: 0.6rem; border-bottom: 1px solid var(--gov-line); }

/* --- Tier 1: current-module panel (rail + sheet, same treatment) --- */
.smart-expanded { background: rgba(233, 244, 227, 0.6);
  border: 1px solid #cfe4c6; border-radius: 12px;
  padding: 0.35rem 0.25rem 0.5rem; }
.smart-expanded .smart-head { padding-bottom: 0.5rem; }

/* --- Tier 2: switcher --- */
/* Rail: quiet full-width rows matching the link rhythm, not pills. */
.app-sidenav .smart-chips { display: grid; gap: 2px; padding: 0.15rem 0.25rem 0.3rem; }
.app-sidenav .smart-chip { width: 100%; border-radius: 10px; border-color: transparent;
  background: transparent; box-shadow: none; justify-content: flex-start;
  padding-left: 0.7rem; }
.app-sidenav .smart-chip:hover { background: var(--gov-indigo-50); border-color: transparent; }
.app-sidenav .smart-chip-lbl { white-space: normal; line-height: 1.3; }
/* Sheet: 2-col grid; long module names wrap, never truncate. */
.sheet .smart-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
  padding: 0.15rem 0 0.3rem; }
.sheet .smart-chip { width: 100%; }
.sheet .smart-chip-lbl { white-space: normal; line-height: 1.3; }
/* The open chip reads as selected on both surfaces (aria-expanded is
   already managed by sidenav.js — no JS change). */
.smart-chip[aria-expanded="true"] { border-color: var(--gov-indigo-600);
  background: var(--gov-indigo-100); }

/* --- Tier 3: admin + account, separated --- */
.smart-adminsec { border-top: 1px solid var(--gov-line); margin-top: 0.9rem; padding-top: 0.5rem; }
/* Sheet section dividers: switcher + footer strip separated from neighbours. */
.sheet .smart-switch { border-top: 1px solid var(--gov-line); margin-top: 1rem; padding-top: 0.75rem; }
.sheet .more-grid-foot { border-top: 1px solid var(--gov-line); margin-top: 1rem; padding-top: 0.75rem; }
/* Sheet quick actions: one equal-height action row, icon on top, centred. */
.sheet .more-grid-quick { grid-template-columns: repeat(3, 1fr); }
.sheet .more-grid-quick .more-link { flex-direction: column; justify-content: center;
  text-align: center; font-size: 0.85rem; padding: 0.7rem 0.4rem; }
.sheet .more-grid-quick .more-link .ic { width: 1.35rem; height: 1.35rem; }
/* Sheet footer strip: quiet, no cards. */
.sheet .more-grid-foot .more-link { background: transparent; border-color: transparent;
  box-shadow: none; min-height: 44px; }
/* Dynpanel home link reads as the panel header. */
.smart-dyn-home { font-size: 0.95rem; padding-bottom: 0.6rem; }
/* Bottom nav: visible keyboard focus (active pill already exists). */
.bottomnav .pnav-item:focus-visible { outline: 3px solid var(--gov-indigo-600); outline-offset: -2px; }

/* ---------- Admin users filter row (2026-10-25, users-filters fix) ----
   Scoped to .filters-users ONLY: 20+ other pages share .filters, so the
   label-above layout + themed selects live here, not in the shared rule.
   Why: the shared .filters select had only font/padding/border/radius —
   no background, no chevron, no min-height — so it rendered as a bare
   browser-default box, and inline labels detached from their controls. */
.filters-users { align-items: flex-end; }
.filters-users > label { display: flex; flex-direction: column; gap: 0.3rem;
  font-weight: 600; font-size: 0.9rem; flex: 1 1 160px; min-width: 0; }
.filters-users > label .lbl-en { font-weight: 400; font-size: 0.8rem; color: var(--gov-muted, #5b6b5e); }
.filters-users select,
.filters-users input[type="text"],
.filters-users input[type="tel"] {
  width: 100%; box-sizing: border-box; font-family: var(--font); font-size: 1rem;
  min-height: 44px; padding: 0.6rem 0.8rem; color: var(--gov-ink, #1c2b1f);
  background: #ffffff; border: 1px solid var(--gov-field-border);
  border-radius: 10px;
}
.filters-users select {
  appearance: none; -webkit-appearance: none;
  padding-right: 2.2rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5 7 7.5 13 1.5' stroke='%2314532D' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.7rem center;
}
.filters-users select:hover,
.filters-users input[type="text"]:hover,
.filters-users input[type="tel"]:hover { border-color: var(--gov-field-border-hover); }
.filters-users select:focus,
.filters-users input[type="text"]:focus,
.filters-users input[type="tel"]:focus {
  border-color: var(--gov-indigo-900);
  box-shadow: 0 0 0 3.5px var(--gov-focus-ring); outline: none;
}
/* Mobile: clean vertical stack — never 3 cramped boxes in a row. */
@media (max-width: 640px) {
  .filters-users { flex-direction: column; align-items: stretch; }
  .filters-users > label { flex: 1 1 auto; width: 100%; }
  .filters-users > div { width: 100%; }
  .filters-users > div .btn { flex: 1; }
}

/* ---- FINALIZE 2026-10-25 (skills: hover gating + platform) ---- */
@media (hover: none) {
  .sidenav-link:hover, a.card:hover, .card.hoverable:hover,
  body[data-module="dashboard"] .sys-card-d:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sidenav-link:hover, a.card:hover, .card.hoverable:hover,
  body[data-module="dashboard"] .sys-card-d:hover { transform: none; }
}
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
button, a, [role="button"] { touch-action: manipulation; }
.sidenav-link, .smart-chip, .btn, .btn-primary {
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.btn:active, .btn-primary:active { transform: scale(0.97); }