/* =====================================================================
   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; }
}