/* SahiHisab app.css bundle — GENERATED by studio/build/bundle.mjs from build/bundle.config.mjs. Do not edit; edit the source files and rebuild. build=9ec65f051a */
/* ===== css/app.css ===== */
/* =====================================================
   SahiHisab — Complete Design System
   Sea Blue + White | Glass Effects | Mobile-First
   Photography & Event Studio SaaS
   ===================================================== */

/* ─────────────────────────────────────────────────────
   DESIGN TOKENS
   ───────────────────────────────────────────────────── */

:root {
  /* Pin native controls (select popups, date pickers) to light so a dark-OS
     Mac in the app's light theme doesn't render dark native dropdowns.
     .dark-mode + system-dark blocks below override this back to dark. */
  color-scheme: light;
  /* ── Core HSL Palette ── */
  --background: hsl(200, 40%, 96%);
  --foreground: hsl(210, 50%, 10%);
  --primary: hsl(200, 80%, 44%);
  --primary-foreground: hsl(0, 0%, 100%);
  --secondary: hsl(200, 30%, 94%);
  --secondary-foreground: hsl(210, 50%, 20%);
  --muted: hsl(210, 20%, 94%);
  --muted-foreground: hsl(210, 15%, 45%);
  --card: hsl(0, 0%, 100%);
  --card-foreground: hsl(210, 50%, 10%);
  --border: hsl(210, 25%, 88%);
  --destructive: hsl(0, 72%, 51%);
  --success: hsl(142, 70%, 45%);
  --warning: hsl(38, 92%, 50%);

  /* ── Extended Sea Blue Scale ── */
  --primary-50: hsl(200, 80%, 97%);
  --primary-100: hsl(200, 70%, 92%);
  --primary-200: hsl(200, 65%, 85%);
  --primary-300: hsl(200, 70%, 72%);
  --primary-400: hsl(200, 75%, 56%);
  --primary-500: hsl(200, 80%, 44%);
  --primary-600: hsl(200, 85%, 37%);
  --primary-700: hsl(200, 85%, 30%);
  --primary-800: hsl(200, 80%, 24%);
  --primary-900: hsl(200, 75%, 18%);
  --primary-950: hsl(205, 80%, 10%);

  /* ── Glass & Glow ── */
  --glass-bg: hsla(0, 0%, 100%, 0.72);
  --glass-border: hsla(210, 25%, 88%, 0.5);
  --glass-blur: blur(16px);
  --glow-primary: hsla(200, 90%, 50%, 0.15);
  --glow-subtle: hsla(200, 40%, 85%, 0.5);

  /* ── Semantic ── */
  --surface: var(--card);
  --surface-muted: var(--muted);
  --text-primary: var(--foreground);
  --text-secondary: var(--muted-foreground);
  --text-muted: hsl(210, 15%, 62%);
  --border-light: hsl(210, 25%, 92%);

  /* ── Status Tints ── */
  --success-light: hsl(142, 60%, 93%);
  --warning-light: hsl(38, 90%, 93%);
  --danger-light: hsl(0, 70%, 95%);
  --info-light: var(--primary-50);

  /* ── Event Colors ── */
  --event-wedding: #C8973E;
  --event-engagement: #D4638F;
  --event-birthday: #7C3AED;
  --event-corporate: hsl(200, 80%, 44%);
  --event-other: hsl(160, 60%, 45%);
  --event-pre-wedding: #F472B6;
  --event-reception: #D4A853;

  /* ── Event Dot Shapes (Accessibility) ── */
  --dot-size: 5px;

  /* ── Missing Semantic Tokens ── */
  --text-tertiary: #94a3b8;
  --danger: var(--destructive);
  --gray-50: hsl(210, 20%, 98%);
  --gray-100: hsl(210, 20%, 96%);
  --gray-200: hsl(210, 20%, 92%);
  --gray-300: hsl(210, 15%, 84%);
  --primary-light: var(--primary-100);
  --hover: hsla(0, 0%, 0%, 0.06);
  --info: hsl(200, 80%, 44%);
  --card-bg: var(--card);

  /* ── Spacing ── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;
  --space-4xl: 48px;

  /* ── Radius ── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs: 0 1px 2px hsla(210, 40%, 20%, 0.03);
  --shadow-sm: 0 1px 3px hsla(210, 40%, 20%, 0.04),
    0 1px 2px hsla(210, 40%, 20%, 0.03);
  --shadow-md: 0 4px 8px hsla(210, 40%, 20%, 0.04),
    0 2px 4px hsla(210, 40%, 20%, 0.03);
  --shadow-lg: 0 10px 20px hsla(210, 40%, 20%, 0.05),
    0 4px 8px hsla(210, 40%, 20%, 0.03);
  --shadow-xl: 0 20px 40px hsla(210, 40%, 20%, 0.06),
    0 8px 16px hsla(210, 40%, 20%, 0.03);
  --shadow-glow: 0 4px 24px hsla(200, 90%, 50%, 0.12);
  --shadow-card: 0 1px 3px hsla(210, 30%, 20%, 0.04),
    0 0 0 1px hsla(210, 25%, 88%, 0.6);

  /* ── Transitions ── */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Typography ── */
  --font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Outfit', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* ── Layout ── */
  --sidebar-width: 260px;
  --header-height: 60px;
  --bottom-nav-height: 78px;
  --total-bar-height: 64px;
  --content-max-width: 1200px;
}


/* ─────────────────────────────────────────────────────
   RESET & BASE
   ───────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* ─── Material Symbols — SELF-HOSTED ──────────────────────
   The icon font itself now ships from our own server. Google's
   fonts.gstatic.com had transient failures on studio networks
   (2026-07-04): the stylesheet/font wouldn't load and every icon
   rendered as raw ligature text ("photo_camera", "expand_more").
   Same bytes the browser downloaded from Google anyway — one less
   third-party DNS/TLS dependency, cached forever after first load.
   ─────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 400 700;
  font-display: block;
  src: url('../fonts/material-symbols-rounded.woff2?v=9') format('woff2');
}

/* Base class (safety net) — Google shipped this rule UA-dependent;
   we own it so 'liga' always activates. */
.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Until the icon font is confirmed loaded (<html class="ms-ready"> set by the
   inline script in index.html), keep glyphs invisible so the ligature source
   text ("add", "search", …) never flashes. visibility (not display) reserves
   the box, so there's no layout shift when the icons appear. */
html:not(.ms-ready) .material-symbols-rounded { visibility: hidden; }

body {
  font-family: var(--font-family);
  background: var(--background);
  color: var(--text-primary);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100dvh;
  overscroll-behavior: contain;
  -webkit-tap-highlight-color: transparent;
}

a {
  color: var(--primary);
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

button {
  cursor: pointer;
  font-family: inherit;
  border: none;
  background: none;
}

input,
select,
textarea {
  font-family: inherit;
  font-size: 1rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.25;
  color: var(--foreground);
}

/* ── Scrollbar ── */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--muted-foreground);
}


/* ─────────────────────────────────────────────────────
   LAYOUT — App Shell
   ───────────────────────────────────────────────────── */

.app-shell {
  display: flex;
  min-height: 100dvh;
}


/* ─────────────────────────────────────────────────────
   SIDEBAR (Desktop)
   ───────────────────────────────────────────────────── */

.sidebar {
  width: var(--sidebar-width);
  background: var(--primary-950);
  color: var(--primary-foreground);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-normal);
  overflow-y: auto;
  overflow-x: hidden;
}

/* Hidden on desktop, shown on mobile via media query */
.sidebar-close-btn {
  display: none;
}

.sidebar-brand {
  padding: var(--space-2xl);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  border-bottom: 1px solid hsla(0, 0%, 100%, 0.06);
}

.sidebar-brand .brand-icon {
  width: 42px;
  height: 42px;
  background: var(--primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  box-shadow: 0 2px 10px hsla(200, 90%, 50%, 0.3);
}

.sidebar-brand h1 {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: white;
}

.sidebar-brand small {
  font-size: 0.7rem;
  opacity: 0.4;
  font-weight: 400;
  display: block;
}

.sidebar-nav {
  flex: 1;
  padding: var(--space-lg) var(--space-md);
}

.sidebar-trial-card {
  flex-shrink: 0;
  padding: var(--space-md);
  padding-top: 0;
}

/* Announcement poster carousel (swipeable, dots, video-aware) */
.sh-ann-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; gap: 0;
}
.sh-ann-track::-webkit-scrollbar { display: none; }
.sh-ann-slide { flex: 0 0 100%; scroll-snap-align: center; }
.sh-ann-dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.sh-ann-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border, #d1d5db); transition: width 0.2s, background 0.2s; }
.sh-ann-dot.active { width: 18px; border-radius: 3px; background: var(--primary, #0ea5e9); }

/* Posters should promote without pushing the dashboard below the fold. */
@media (min-width: 769px) {
  .sh-ann-poster > img,
  .sh-ann-poster > video,
  .sh-ann-poster > a > img,
  .sh-ann-poster > a > video,
  .sh-ann-slide > img,
  .sh-ann-slide > video,
  .sh-ann-slide > a > img,
  .sh-ann-slide > a > video {
    height: clamp(210px, 18vw, 300px);
    object-fit: cover;
    object-position: center 48%;
  }
}

/* Quick Actions tile (layout in CSS so .qa-desktop-only can toggle visibility) */
.dash-qa-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 7px; min-height: 86px; background: transparent; border: none; border-radius: 12px;
  cursor: pointer; padding: 8px 2px; -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s, background 0.2s;
}
/* Phone: 4 columns, the 2 desktop-only tiles hidden. Desktop (≥769px): 6 columns, all shown. */
.dash-qa-row { grid-template-columns: repeat(4, 1fr); }
.dash-qa-tile.qa-desktop-only { display: none; }
@media (min-width: 769px) {
  .dash-qa-row { grid-template-columns: repeat(6, 1fr); }
  .dash-qa-tile.qa-desktop-only { display: flex; }
}

/* Dashboard card hover-lift (desktop pointers only — no effect on touch) */
@media (hover: hover) and (pointer: fine) {
  .dash-card { transition: transform 0.16s ease, box-shadow 0.2s ease; }
  .dash-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(17, 24, 39, 0.10); }
  .dash-qa-tile:hover { transform: translateY(-3px); background: rgba(17, 24, 39, 0.04); }
}

/* ════════════════════════════════════════════════════════════
   Dashboard v2 — premium fintech component system (.dsh-*)
   Sea-blue / teal direction, flat tinted Material-Symbol icons,
   one consistent card family, tighter spacing.
   ════════════════════════════════════════════════════════════ */
.dsh-sec-label {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.005em;
  color: var(--text-muted); margin: 4px 2px 9px; display: flex; align-items: center; gap: 6px;
}
.dsh-tint-blue  { background: rgba(14,165,233,.10); color: #0EA5E9; }
.dsh-tint-teal  { background: rgba(20,184,166,.11); color: #14B8A6; }
.dsh-tint-green { background: rgba(16,185,129,.11); color: #10B981; }
.dsh-tint-red   { background: rgba(239,68,68,.10);  color: #EF4444; }
.dsh-tint-amber { background: rgba(245,158,11,.12); color: #F59E0B; }

/* Summary stat cards — Bookings / Collection / Expenses (one component) */
.dsh-stats {
  display: flex; gap: 10px; margin-bottom: 14px; padding: 2px 1px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}
.dsh-stats::-webkit-scrollbar { display: none; }
.dsh-stat {
  flex: 1; min-width: 106px; scroll-snap-align: start;
  background: var(--card); border: 1px solid var(--border-light); border-radius: 18px;
  padding: 14px; cursor: pointer; position: relative; overflow: hidden;
  box-shadow: 0 1px 3px rgba(15,23,42,.05); transition: transform .12s ease, box-shadow .18s ease;
}
.dsh-stat:active { transform: scale(.985); }
.dsh-stat-top { height: 3px; position: absolute; top: 0; left: 0; right: 0; border-radius: 18px 18px 0 0; }
.dsh-stat-ico { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; margin-bottom: 11px; }
.dsh-stat-ico .material-symbols-rounded { font-size: 1.3rem; }
.dsh-stat-num { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1; color: var(--text-primary); }
.dsh-stat-num.sm { font-size: 1.18rem; } .dsh-stat-num.xs { font-size: 1.02rem; }
.dsh-stat-lbl { font-size: 0.72rem; color: var(--text-muted); font-weight: 600; margin-top: 6px; }

/* Quick Actions — flat tinted icon tiles, one icon family */
.dsh-qa {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  background: var(--card); border: 1px solid var(--border-light); border-radius: 22px;
  padding: 14px 8px; margin-bottom: 18px; box-shadow: 0 1px 3px rgba(15,23,42,.05);
}
.dsh-qa-tile {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: none; border: 0; cursor: pointer; padding: 4px 2px;
  -webkit-tap-highlight-color: transparent;
}
.dsh-qa-ico { width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; transition: transform .12s ease; }
.dsh-qa-tile:active .dsh-qa-ico { transform: scale(.9); }
.dsh-qa-ico .material-symbols-rounded { font-size: 1.6rem; }
.dsh-qa-lbl { font-size: 0.72rem; font-weight: 700; color: var(--text-primary); text-align: center; line-height: 1.12; }
.dsh-qa-tile.qa-desktop-only { display: none; }
@media (min-width: 769px) {
  .dsh-qa { grid-template-columns: repeat(6, 1fr); }
  .dsh-qa-tile.qa-desktop-only { display: flex; }
}

/* Metric grid (2×2) — consistent component */
.dsh-metrics { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-bottom: 18px; }
.dsh-metric {
  background: var(--card); border: 1px solid var(--border-light); border-radius: 18px; padding: 13px;
  cursor: pointer; display: flex; align-items: center; gap: 11px;
  box-shadow: 0 1px 3px rgba(15,23,42,.05);
}
.dsh-metric.alert { border-color: rgba(239,68,68,.25); }
.dsh-metric-ico { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dsh-metric-ico .material-symbols-rounded { font-size: 1.2rem; }
.dsh-metric-body { min-width: 0; flex: 1; overflow: hidden; }
.dsh-metric-num { font-size: 1.15rem; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsh-metric-num.sm { font-size: 0.96rem; }
.dsh-metric-num.green { color: #10B981; } .dsh-metric-num.red { color: #EF4444; }
.dsh-metric-lbl { font-size: 0.68rem; color: var(--text-muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.dsh-metric-span2 { grid-column: span 2; }

/* Section card (revenue trend / upcoming) — consistent shell + sentence-case header */
.dsh-card { background: var(--card); border: 1px solid var(--border-light); border-radius: 18px; margin-bottom: 16px; overflow: hidden; box-shadow: 0 1px 3px rgba(15,23,42,.05); }
.dsh-card-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 16px 11px; }
.dsh-card-title { font-size: 0.86rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
.dsh-card-sub { font-size: 0.72rem; color: var(--text-muted); }
@media (hover: hover) and (pointer: fine) {
  .dsh-stat, .dsh-metric { transition: transform .16s ease, box-shadow .2s ease; }
  .dsh-stat:hover, .dsh-metric:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15,23,42,.08); }
  .dsh-qa-tile:hover .dsh-qa-ico { transform: translateY(-2px); }
}

/* ════ Dashboard v3 — hero-led, focal-point layout ════ */
/* Hero card — the money anchor (subtle 2-stop sea-blue, no rainbow) */
.dsh-hero {
  /* Light card hero — var(--card)/var(--text-primary) flip automatically in dark mode */
  background: var(--card);
  border-radius: 22px; padding: 15px 18px 15px; margin-bottom: 16px;
  color: var(--text-primary); box-shadow: 0 12px 28px rgba(2,132,199,.20); position: relative; overflow: hidden;
}
.dsh-hero::after { content: ''; position: absolute; top: -50px; right: -34px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(14,165,233,.10), rgba(14,165,233,0) 70%); }
.dsh-hero-greet { font-size: 0.82rem; font-weight: 600; opacity: .82; position: relative; }
.dsh-hero-lbl { font-size: 0.73rem; opacity: .78; margin-top: 11px; font-weight: 500; letter-spacing: .01em; position: relative; }
.dsh-hero-num { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.045em; line-height: 1; margin-top: 2px; font-variant-numeric: tabular-nums; cursor: pointer; position: relative; display: inline-block; }
.dsh-hero-meta { font-size: 0.78rem; opacity: .9; margin-top: 8px; font-weight: 500; position: relative; }
.dsh-hero-meta b { font-weight: 800; }
.dsh-hero-meta .lk { cursor: pointer; border-bottom: 1px dotted var(--text-muted); }
.dsh-hero-cta { display: flex; gap: 10px; margin-top: 13px; position: relative; }
.dsh-cta-primary, .dsh-cta-secondary {
  flex: 1; border-radius: 14px; padding: 0 14px; font-size: 0.86rem; min-height: 46px;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px;
}
.dsh-cta-primary { background: #0369A1; color: #fff; border: 0; font-weight: 800; box-shadow: 0 6px 14px rgba(3,105,161,.18); }
.dsh-cta-secondary { background: rgb(15 165 233); color: #fff; border: 1px solid rgba(255,255,255,.30); font-weight: 700; }
.dsh-cta-primary:active, .dsh-cta-secondary:active { transform: scale(.97); }
.dsh-cta-primary .material-symbols-rounded, .dsh-cta-secondary .material-symbols-rounded { font-size: 1.2rem; }
/* "+" — compact opener for the secondary quick-actions menu (Expense/Client/Quick Order/Rental) */
.dsh-cta-more { flex: 0 0 46px; width: 46px; min-height: 46px; border-radius: 14px; border: 1px solid var(--border); background: var(--card); color: var(--text-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; }
.dsh-cta-more:active { transform: scale(.97); }
.dsh-cta-more .material-symbols-rounded { font-size: 1.35rem; }
.dsh-qmenu { position: fixed; z-index: 1200; background: var(--card); border: 1px solid var(--border-light); border-radius: 16px; box-shadow: 0 16px 40px rgba(15,23,42,.18); padding: 6px; min-width: 210px; }
.dsh-qmenu-row { width: 100%; display: flex; align-items: center; gap: 10px; padding: 6px 10px; min-height: 46px; border: 0; background: none; border-radius: 11px; cursor: pointer; font-family: inherit; color: var(--text-primary); font-size: 0.86rem; font-weight: 700; text-align: left; -webkit-tap-highlight-color: transparent; }
.dsh-qmenu-row:hover, .dsh-qmenu-row:focus-visible { background: var(--primary-50); }
.dsh-qmenu-ico { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dsh-qmenu-ico .material-symbols-rounded { font-size: 1.15rem; }
/* Night mode: kill the blue glow, add card edge for definition on dark bg */
:root.dark-mode .dsh-hero,
body.dark-mode .dsh-hero { box-shadow: 0 12px 28px rgba(0,0,0,.45); border: 1px solid var(--border); }
/* Desktop: hero + needs-attention side by side; hero stretches to match the list height */
@media (min-width: 769px) {
  .dsh-top.has-attn { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; margin-bottom: 16px; }
  .dsh-top.has-attn .dsh-hero { margin-bottom: 0; display: flex; flex-direction: column; }
  .dsh-top.has-attn .dsh-hero-cta { margin-top: auto; padding-top: 13px; }
  .dsh-top.has-attn .dsh-attn { margin-bottom: 0; display: flex; flex-direction: column; gap: 8px; }
  .dsh-top.has-attn .dsh-attn-row { flex: 1; margin-bottom: 0; }
}

/* Quick-action chips — compact, scroll if overflow */
.dsh-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-bottom: 20px; padding: 1px; }
.dsh-chips::-webkit-scrollbar { display: none; }

/* Period filter — segmented control (Linear / iOS feel) */
.dsh-seg {
  display: flex; gap: 2px; background: var(--card); border: 1px solid var(--border-light); border-radius: 14px;
  padding: 3px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(15,23,42,.05);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.dsh-seg::-webkit-scrollbar { display: none; }
.dsh-seg-item {
  flex: 0 0 auto; border: 0; background: transparent; cursor: pointer;
  padding: 0 16px; min-height: 38px; border-radius: 11px;
  font-size: 0.8rem; font-weight: 600; color: var(--text-muted); white-space: nowrap;
  transition: background .18s ease, color .18s ease; -webkit-tap-highlight-color: transparent;
}
.dsh-seg-item.active { background: #0EA5E9; color: #fff; font-weight: 700; box-shadow: inset 0 1px 0 rgba(255,255,255,.22); }
.dsh-seg-item:active { transform: scale(.97); }
.dsh-chip {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  background: var(--card); border: 1px solid var(--border-light); border-radius: 14px; padding: 0 15px;
  font-size: 0.81rem; font-weight: 700; color: var(--text-primary); cursor: pointer; min-height: 44px;
  box-shadow: 0 1px 3px rgba(15,23,42,.05); -webkit-tap-highlight-color: transparent;
}
.dsh-chip:active { transform: scale(.96); }
.dsh-chip .material-symbols-rounded { font-size: 1.22rem; }

/* Business Snapshot — merged Revenue / Profit / Expenses */
.dsh-snap { background: var(--card); border: 1px solid var(--border-light); border-radius: 18px; padding: 15px 0 16px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(15,23,42,.05); }
.dsh-snap-head { display: flex; align-items: center; justify-content: space-between; padding: 0 16px 13px; margin-bottom: 2px; border-bottom: 1px solid var(--border); }
.dsh-snap-title { font-size: 0.86rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
.dsh-snap-sub { font-size: 0.72rem; color: var(--text-muted); font-weight: 500; }
.dsh-snap-grid { display: grid; grid-template-columns: repeat(3, 1fr); padding-top: 13px; }
.dsh-snap-cell { padding: 0 14px; cursor: pointer; border-left: 1px solid var(--border-light); min-width: 0; }
.dsh-snap-cell:first-child { border-left: 0; }
.dsh-snap-lbl { font-size: 0.7rem; color: var(--text-muted); font-weight: 600; letter-spacing: .005em; }
.dsh-snap-num { font-size: 1.38rem; font-weight: 800; color: var(--text-primary); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsh-snap-num.sm { font-size: 1.12rem; } .dsh-snap-num.green { color: #10B981; } .dsh-snap-num.red { color: #EF4444; }
/* Zero-state muting — a ₹0 stat is quiet context, not a bold alarm. Placed after
   green/red so .is-zero wins the tie on equal specificity. */
.dsh-snap-num.is-zero, .dsh-hero-num.is-zero { color: var(--text-muted); font-weight: 600; }

/* Empty state (revenue trend etc.) — never a blank card */
.dsh-empty { text-align: center; padding: 34px 22px 30px; }
.dsh-empty-ico { width: 60px; height: 60px; border-radius: 18px; background: linear-gradient(140deg, rgba(14,165,233,.14), rgba(20,184,166,.12)); color: #0EA5E9; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 15px; }
.dsh-empty-ico .material-symbols-rounded { font-size: 1.9rem; }
.dsh-empty-title { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
.dsh-empty-sub { font-size: 0.79rem; color: var(--text-muted); margin: 6px auto 0; line-height: 1.5; max-width: 240px; }
.dsh-empty-cta { margin-top: 17px; background: #0EA5E9; color: #fff; border: 0; border-radius: 13px; padding: 0 20px; min-height: 44px; font-weight: 700; font-size: 0.84rem; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 6px 14px rgba(14,165,233,.26); }
.dsh-empty-cta:active { transform: scale(.97); }

/* Revenue line chart (interactive SVG line+area + %-positioned HTML overlay) */
.dsh-chart { position: relative; width: 100%; height: 210px; touch-action: pan-y; cursor: crosshair; }
.dsh-chart-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dsh-chart-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #0EA5E9; border: 1.5px solid var(--card); transform: translate(-50%, -50%); pointer-events: none; }
.dsh-chart-active { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: #0EA5E9; border: 2.5px solid var(--card); box-shadow: 0 0 0 4px rgba(14,165,233,.18); transform: translate(-50%, -50%); opacity: 0; transition: opacity .12s ease, left .07s ease, top .07s ease; pointer-events: none; z-index: 2; }
.dsh-chart-guide { position: absolute; top: 8%; bottom: 19%; width: 0; border-left: 1px dashed rgba(14,165,233,.45); transform: translateX(-50%); opacity: 0; transition: opacity .12s ease, left .07s ease; pointer-events: none; }
.dsh-chart-xlbl { position: absolute; bottom: 0; transform: translateX(-50%); font-size: 0.66rem; color: var(--text-muted); white-space: nowrap; pointer-events: none; }
.dsh-chart-tip { position: absolute; top: 2px; transform: translateX(-50%); background: var(--text-primary); color: var(--card); padding: 6px 10px; border-radius: 9px; white-space: nowrap; opacity: 0; transition: opacity .12s ease; pointer-events: none; z-index: 3; box-shadow: 0 6px 18px rgba(0,0,0,.22); text-align: center; }
.dsh-chart-tip.flip { top: auto; bottom: 24px; }
.dsh-tip-date { font-weight: 600; opacity: .75; font-size: 0.66rem; }
.dsh-tip-rev { font-weight: 800; font-size: 0.88rem; line-height: 1.2; }
.dsh-tip-row { font-size: 0.66rem; opacity: .85; }
@media (max-width: 480px) { .dsh-chart { height: 184px; } }

/* Quotations list — compact status tabs (less vertical weight) */
.qt-toolbar { margin-bottom: 12px; }
.qt-tabs { padding-bottom: 1px; }
.qt-tab.btn-sm { padding: 5px 13px; min-height: 32px; font-size: 0.78rem; border-radius: 10px; }

/* ════ Quotations — activation empty state ════ */
/* Simplified empty state — mirrors Clients .cl-empty (icon → headline → subtitle → primary → ghost secondary) */
.qt-activate { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: min(58vh, 480px); max-width: 420px; margin: 0 auto; padding: 24px 16px; }
.qt-act-ico { width: 64px; height: 64px; border-radius: 20px; background: linear-gradient(140deg, rgba(14,165,233,.14), rgba(20,184,166,.12)); color: #0EA5E9; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.qt-act-ico .material-symbols-rounded { font-size: 2rem; }
.qt-act-title { font-size: 1.25rem; font-weight: 800; color: var(--text-primary); letter-spacing: -0.02em; line-height: 1.25; margin: 0 auto; max-width: 300px; }
.qt-act-sub { font-size: 0.92rem; color: var(--text-muted); line-height: 1.55; margin: 8px auto 0; max-width: 320px; }
.qt-act-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 300px; margin-top: 26px; }
.qt-act-create { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; padding: 13px 28px; font-size: 1rem; font-weight: 700; color: #fff; cursor: pointer; border: none; border-radius: var(--radius-full); background: linear-gradient(135deg, hsl(200, 85%, 50%), hsl(204, 82%, 40%)); box-shadow: 0 10px 24px -8px hsla(202, 85%, 40%, 0.55), inset 0 1px 0 hsla(0, 0%, 100%, 0.22); transition: transform 0.15s ease, box-shadow 0.2s ease; }
.qt-act-create:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -8px hsla(202, 85%, 40%, 0.6), inset 0 1px 0 hsla(0, 0%, 100%, 0.22); }
.qt-act-create:active { transform: translateY(0); }
.qt-act-create .material-symbols-rounded { font-size: 1.2rem; color: #fff; }
.qt-act-sample-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 9px 20px; font-size: 0.9rem; font-weight: 600; color: var(--primary); cursor: pointer; background: transparent; border: 1.5px solid var(--border); border-radius: var(--radius-full); transition: border-color 0.2s ease, background 0.2s ease; }
.qt-act-sample-btn:hover { border-color: var(--primary); background: var(--primary-100); }
.qt-act-sample-btn .material-symbols-rounded { font-size: 1.05rem; color: var(--primary); }
@media (prefers-reduced-motion: reduce) {
  .qt-act-create { transition: none; }
  .qt-act-create:hover { transform: none; }
}
/* Sample modal */
.qt-sm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.qt-sm-pkg { font-size: 1.05rem; font-weight: 800; color: var(--text-primary); }
.qt-sm-client { font-size: 0.76rem; color: var(--text-muted); margin-top: 2px; }
.qt-sm-badge { font-size: 0.66rem; font-weight: 700; color: #0EA5E9; background: rgba(14,165,233,.10); padding: 4px 9px; border-radius: 999px; flex-shrink: 0; }
.qt-sm-lines { margin: 14px 0; display: flex; flex-direction: column; gap: 9px; }
.qt-sm-line { display: flex; justify-content: space-between; gap: 12px; font-size: 0.82rem; color: var(--text-secondary); }
.qt-sm-line span:last-child { font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.qt-sm-total { display: flex; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--border-light); font-weight: 800; font-size: 0.95rem; color: var(--text-primary); }
.qt-sm-note { margin-top: 14px; font-size: 0.76rem; color: var(--text-muted); line-height: 1.5; }

/* ════ Inquiry QR — premium floating "My QR" utility card ════ */
.qr-pp { position: relative; display: flex; justify-content: center; padding: 8px 0 20px; }
.qr-pp-card {
  position: relative; width: 84vw; max-width: 360px;
  background: #fff; border-radius: 28px; padding: 22px 18px 20px;
  box-shadow: 0 16px 44px rgba(15,23,42,.14), 0 4px 14px rgba(15,23,42,.07);
  display: flex; flex-direction: column; align-items: center;
  transform-origin: bottom center; backface-visibility: hidden;
}
/* Elevation layer — deeper shadow that fades in (opacity, JS-driven) as it shrinks. */
.qr-pp-elev {
  position: absolute; inset: 0; border-radius: 28px; z-index: 0;
  background: transparent; pointer-events: none; opacity: 0;
  box-shadow: 0 30px 70px rgba(15,23,42,.22), 0 12px 30px rgba(15,23,42,.12);
}
.qr-pp-ghost {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%,-50%);
  font-size: 4.4rem; font-weight: 900; letter-spacing: -.04em; line-height: .88;
  color: #0F172A; opacity: .04; white-space: nowrap; text-transform: uppercase;
  pointer-events: none; z-index: 1;
}
/* Content layer — carries the subtle idle float so it never fights the card's scale. */
.qr-pp-float {
  position: relative; z-index: 2; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  will-change: transform;
}
.qr-pp-label { font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #64748B; }
.qr-pp-tile {
  display: grid; place-items: center; position: relative;
  width: 240px; height: 240px; max-width: 70vw; max-height: 70vw;
  background: #fff; border-radius: 18px; padding: 10px;
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.05);
}
.qr-pp-hint { font-size: .74rem; color: #64748B; text-align: center; line-height: 1.45; max-width: 240px; }
.qr-pp-dl {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 42px; padding: 0 18px; border-radius: 12px;
  background: #fff; color: #0284C7; border: 1.5px solid #BAE6FD;
  font-weight: 700; font-size: .82rem; cursor: pointer; transition: opacity .14s linear;
}
.qr-pp-dl:active { transform: scale(.98); }
.qr-pp-dl .material-symbols-rounded { font-size: 18px; }
@keyframes qr-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
/* Pin + float only on phones, and only when motion is allowed. z-index lifts the card
   so dashboard sections below scroll BEHIND it (depth). */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  .qr-pp { z-index: 30; }
  .qr-pp-card { position: sticky; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .qr-pp-float { animation: qr-float 4s ease-in-out infinite; }
  .qr-pp-card.is-scrolling .qr-pp-float { animation-play-state: paused; }
}

@media (hover: hover) and (pointer: fine) {
  .dsh-chip { transition: transform .14s, box-shadow .18s; }
  .dsh-chip:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15,23,42,.08); }
  .dsh-cta-primary, .dsh-cta-secondary { transition: transform .14s; }
  .dsh-hero-cta button:hover { transform: translateY(-1px); }
}

/* Needs-Attention strip — actionable rows directly under the hero */
.dsh-attn { margin-bottom: 16px; }
.dsh-attn-row {
  display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--border-light);
  border-radius: 18px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer;
  box-shadow: 0 1px 3px rgba(15,23,42,.05);
}
.dsh-attn-row:last-child { margin-bottom: 0; }
.dsh-attn-row:active { transform: scale(.99); }
.dsh-attn-ico { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dsh-attn-ico .material-symbols-rounded { font-size: 1.2rem; }
.dsh-attn-body { flex: 1; min-width: 0; }
.dsh-attn-title { font-size: 0.88rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsh-attn-sub { font-size: 0.74rem; color: var(--text-muted); margin-top: 1px; }
.dsh-attn-chev { color: var(--text-muted); font-size: 1.2rem; flex-shrink: 0; }
@media (hover: hover) and (pointer: fine) {
  .dsh-attn-row { transition: transform .14s, box-shadow .18s; }
  .dsh-attn-row:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15,23,42,.08); }
}

/* "More tools" — low-frequency widgets (calendar / inquiry QR / recent activity)
   demoted to collapsed rows; content expands in place below its row. */
.dsh-more { margin-bottom: 8px; }
.dsh-more-row { width: 100%; display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--border-light); border-radius: 14px; padding: 0 14px; min-height: 48px; margin-bottom: 8px; cursor: pointer; color: var(--text-primary); box-shadow: 0 1px 3px rgba(15,23,42,.05); font-family: inherit; -webkit-tap-highlight-color: transparent; }
.dsh-more-row:active { transform: scale(.99); }
.dsh-more-row > .material-symbols-rounded { font-size: 1.2rem; }
.dsh-more-lbl { flex: 1; text-align: left; font-size: 0.84rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsh-more-sub { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); flex-shrink: 0; }
.dsh-more-chev { color: var(--text-muted); font-size: 1.2rem; flex-shrink: 0; transition: transform .18s; }
.dsh-more-row[aria-expanded="true"] .dsh-more-chev { transform: rotate(180deg); }
.dsh-more-body { margin-bottom: 8px; }
.dsh-more-body[hidden] { display: none; }
/* Flat QR variant inside the collapsed group — no sticky pin, no idle float */
.qr-pp.qr-pp-flat { padding: 8px 0; z-index: auto; }
.qr-pp.qr-pp-flat .qr-pp-card { position: static; }
.qr-pp.qr-pp-flat .qr-pp-float { animation: none; }
@media (hover: hover) and (pointer: fine) {
  .dsh-more-row { transition: transform .14s, box-shadow .18s; }
  .dsh-more-row:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15,23,42,.08); }
}

/* Business-profile ask card — "Aap kya kya karte hain?" (one-time nudge) */
.biz-ask-card { background: var(--card); border: 1px solid var(--border-light); border-radius: 18px; padding: 14px 16px 16px; margin-bottom: 14px; box-shadow: 0 1px 3px rgba(15,23,42,.05); }
.biz-ask-head { display: flex; align-items: flex-start; gap: 10px; }
.biz-ask-head > div:first-child { flex: 1; min-width: 0; }
.biz-ask-title { font-size: 0.95rem; font-weight: 800; color: var(--text-primary); letter-spacing: -0.01em; }
.biz-ask-sub { font-size: 0.76rem; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }
.biz-ask-close { background: none; border: none; cursor: pointer; padding: 4px; color: var(--text-secondary); flex-shrink: 0; -webkit-tap-highlight-color: transparent; }
.biz-ask-close .material-symbols-rounded { font-size: 1.1rem; }
.biz-ask-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 14px; }
.biz-ask-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--card); border: 1.5px solid var(--border-light); border-radius: 14px; padding: 0 13px; min-height: 44px; font-size: 0.82rem; font-weight: 700; color: var(--text-primary); cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; }
.biz-ask-chip:active { transform: scale(.96); }
.biz-ask-chip .material-symbols-rounded { font-size: 1.15rem; }
.biz-ask-chip .biz-ask-tick { display: none; color: var(--primary); font-size: 1.05rem; }
.biz-ask-chip.on { border-color: var(--primary); background: var(--primary-50); }
.biz-ask-chip.on .biz-ask-tick { display: inline-block; }
.biz-ask-save { width: 100%; min-height: 46px; border-radius: 14px; font-weight: 800; }
.biz-ask-save:disabled { opacity: .5; cursor: default; }

.nav-section-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: hsla(0, 0%, 100%, 0.28);
  padding: var(--space-lg) var(--space-md) var(--space-sm);
  font-weight: 700;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  color: hsla(0, 0%, 100%, 0.55);
  font-size: 0.88rem;
  font-weight: 500;
  transition: all var(--transition-fast);
  margin-bottom: 2px;
  position: relative;
}

.nav-item:hover {
  background: hsla(0, 0%, 100%, 0.06);
  color: white;
}

.nav-item.active {
  background: var(--primary);
  color: white;
  box-shadow: 0 4px 24px var(--glow-primary);
}

.nav-item .material-symbols-rounded {
  font-size: 1.25rem;
  font-variation-settings: 'FILL' 0;
}

.nav-item.active .material-symbols-rounded {
  font-variation-settings: 'FILL' 1;
}

.nav-item .badge {
  margin-left: auto;
  background: var(--destructive);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  min-width: 20px;
  text-align: center;
}


/* ─────────────────────────────────────────────────────
   MAIN CONTENT AREA
   ───────────────────────────────────────────────────── */

.main-content {
  flex: 1;
  margin-left: var(--sidebar-width);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}


/* ─────────────────────────────────────────────────────
   HEADER — Glass Effect
   ───────────────────────────────────────────────────── */

.app-header {
  height: var(--header-height);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-2xl);
  position: sticky;
  top: 0;
  z-index: 50;
  gap: var(--space-lg);
}

.header-left {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.header-left .page-title {
  font-size: 1.15rem;
  font-weight: 700;
}

.menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 1.4rem;
}

.header-right {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.header-nav-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  transition: all var(--transition-fast);
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

.header-nav-btn:hover:not(:disabled) {
  background: var(--secondary);
  color: var(--primary);
}

.header-nav-btn:disabled {
  display: none;   /* hide Back/Forward at a root route (e.g. Dashboard) — no greyed clutter, never both Back + ☰ */
}

.header-nav-btn .material-symbols-rounded {
  font-size: 1.2rem;
}

.header-icon-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  transition: all var(--transition-fast);
  position: relative;
}

.header-icon-btn:hover {
  background: var(--secondary);
  color: var(--text-primary);
}

.header-icon-btn .nav-art {
  display: block;
  /* 28, not 24: the busiest art (todays-summary) does not resolve its bars or
     its "TODAY" band at 24px. The smallest header button is 36px (<=375px),
     so 28 still leaves 4px of breathing room on every breakpoint. */
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.header-icon-btn .notif-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  background: var(--destructive);
  border-radius: 50%;
  border: 2px solid var(--card);
}

.header-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--primary-100);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
}


/* ─────────────────────────────────────────────────────
   PAGE CONTENT
   ───────────────────────────────────────────────────── */

.page-content {
  flex: 1;
  /* Flex item of the column-flex .main-content: without min-width:0 its min size
     becomes the widest child's min-content (e.g. the nowrap profile-meter chips row),
     which forces page-content past its container and breaks the desktop layout
     (hero CTAs / snapshot bleed off-screen). min-width:0 lets it shrink so overflow-x
     rows scroll inside instead of stretching the whole page. */
  min-width: 0;
  padding: var(--space-2xl);
  max-width: var(--content-max-width);
  width: 100%;
  margin: 0 auto;
}


/* ─────────────────────────────────────────────────────
   BOTTOM NAVIGATION — Glass (Mobile)
   ───────────────────────────────────────────────────── */

.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--bottom-nav-height);
  background: hsla(0, 0%, 100%, 0.92);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--glass-border);
  z-index: 1000;
  padding-bottom: env(safe-area-inset-bottom);
}

.bottom-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 100%;
  max-width: 500px;
  margin: 0 auto;
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
  min-width: 56px;
}

.bottom-nav-item .material-symbols-rounded {
  font-size: 1.5rem;
  font-variation-settings: 'FILL' 0;
  transition: all var(--transition-fast);
}

.bottom-nav-item.active {
  color: var(--primary);
  position: relative;
}

.bottom-nav-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  background: var(--primary);
  border-radius: 0 0 3px 3px;
}

.bottom-nav-item.active .material-symbols-rounded {
  font-variation-settings: 'FILL' 1;
}

/* ── Center FAB in bottom nav ── */
.bottom-nav-fab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--primary-foreground);
  border: none;
  cursor: pointer;
  transform: translateY(-50%);
  box-shadow: 0 4px 16px hsla(200, 80%, 44%, 0.35),
    0 2px 4px hsla(200, 80%, 44%, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}

.bottom-nav-fab .material-symbols-rounded {
  font-size: 1.75rem;
  font-variation-settings: 'FILL' 1;
  color: white;
}

.bottom-nav-fab:active {
  transform: translateY(-50%) scale(0.92);
  box-shadow: 0 2px 8px hsla(200, 80%, 44%, 0.3);
}

.bottom-nav-fab.open .material-symbols-rounded {
  transform: rotate(45deg);
  transition: transform 0.25s ease;
}

.bottom-nav-fab .material-symbols-rounded {
  transition: transform 0.25s ease;
}

/* Hide center FAB when total bar is visible */
body:has(.total-bar.visible) .bottom-nav-fab {
  display: none;
}

/* ── Quick Create Bottom Sheet ── */
.quick-create-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.quick-create-backdrop.open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.quick-create-sheet {
  position: fixed;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  /* above floating tabbar + safe area */
  left: 14px;
  right: 14px;
  background: var(--card-bg, #fff);
  border-radius: var(--radius-xl);
  z-index: 1001;
  padding: var(--space-md) var(--space-lg) var(--space-xl);
  transform: translateY(calc(100% + 84px));
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), visibility 0.3s ease;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
}

.quick-create-sheet.open {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}

.quick-create-handle {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--text-muted);
  opacity: 0.3;
  margin: 0 auto var(--space-lg);
}

.quick-create-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.quick-create-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-md);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  cursor: pointer;
  min-height: 100px;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, transform 0.15s ease;
}

.quick-create-action:active {
  transform: scale(0.96);
  background: var(--primary-50, rgba(59, 130, 246, 0.08));
}

.quick-create-action .material-symbols-rounded {
  font-size: 2.5rem;
  font-variation-settings: 'FILL' 1;
}

.quick-create-action span:last-child {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  line-height: 1.2;
}


/* ─────────────────────────────────────────────────────
   CARDS — Glass & Solid
   ───────────────────────────────────────────────────── */

.card {
  background: var(--card);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-light);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-fast);
}

.card:hover {
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.card-glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
}

.card-padded {
  padding: var(--space-xl);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-xl);
  border-bottom: 1px solid var(--border-light);
}

.card-header h3 {
  font-size: 1rem;
  font-weight: 600;
}

.card-body {
  padding: var(--space-xl);
}


/* ─────────────────────────────────────────────────────
   BUTTONS
   ───────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  font-weight: 600;
  transition: all var(--transition-fast);
  white-space: nowrap;
  line-height: 1.4;
  min-height: 48px;
}

.btn .material-symbols-rounded {
  font-size: 1.1rem;
}

.btn-primary {
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: 0 1px 3px hsla(200, 80%, 44%, 0.2);
}

.btn-primary:hover {
  background: var(--primary-600);
  box-shadow: 0 4px 24px var(--glow-primary);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  background: var(--primary-100);
  color: var(--primary-700);
}

.btn-secondary:hover {
  background: var(--primary-200);
}

.btn-outline {
  border: 1.5px solid var(--border);
  color: var(--text-primary);
  background: var(--card);
}

.btn-outline:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-50);
}

.btn-ghost {
  color: var(--text-secondary);
  background: transparent;
}

.btn-ghost:hover {
  background: var(--muted);
  color: var(--text-primary);
}

.btn-danger {
  background: var(--destructive);
  color: white;
}

.btn-danger:hover {
  background: hsl(0, 72%, 44%);
}

.btn-success {
  background: var(--success);
  color: white;
}

.btn-sm {
  padding: var(--space-sm) var(--space-md);
  font-size: 0.85rem;
  min-height: 40px;
  border-radius: var(--radius-sm);
}

.btn-outline.btn-sm {
  border-radius: var(--radius-md);
}

.btn-lg {
  padding: var(--space-lg) var(--space-2xl);
  font-size: 1rem;
  min-height: 52px;
  border-radius: var(--radius-lg);
}

.btn-block {
  width: 100%;
}

.btn:disabled,
.btn.disabled {
  opacity: 0.5;
  pointer-events: none;
}


/* ─────────────────────────────────────────────────────
   FORM CONTROLS
   ───────────────────────────────────────────────────── */

.form-group {
  margin-bottom: var(--space-xl);
}

.form-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted-foreground);
  margin-bottom: var(--space-sm);
  letter-spacing: 0.01em;
}

.form-label .required {
  color: var(--destructive);
  margin-left: 2px;
}

.form-control {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: var(--space-md) var(--space-lg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 0.92rem;
  color: var(--foreground);
  background: var(--card);
  transition: all var(--transition-fast);
  min-height: 48px;
  outline: none;
}

.form-control::placeholder {
  color: var(--text-muted);
}

.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px hsla(200, 80%, 44%, 0.1);
}

.form-control:invalid:not(:placeholder-shown) {
  border-color: var(--destructive);
}

textarea.form-control {
  min-height: 100px;
  resize: vertical;
}

.form-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: var(--space-xs);
}

/* Search Input */
.search-input-wrapper {
  position: relative;
}

.search-input-wrapper .material-symbols-rounded {
  position: absolute;
  left: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 1.15rem;
}

.search-input-wrapper .form-control {
  padding-left: 40px;
}

/* Select */
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%236B7785' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
}

/* Toggle Switch */
.toggle-switch {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* P2: containing block for the now-position:absolute input below — without
     this it'd position against whatever ancestor IS positioned (or the
     viewport), and Tab-focus auto-scroll would jump somewhere visually wrong.
     No z-index set, so this doesn't create a new stacking context. Same
     pattern the .settings-section variant already uses. */
  position: relative;
}

.toggle-switch input {
  /* P2: visually-hidden, NOT display:none — display:none pulls a checkbox out
     of the tab order/a11y tree entirely, so these toggles (GST, staff-contact,
     negotiation, notif-sound, addon checkboxes, staff permission toggles) had
     no keyboard path at all. Sibling selectors below key off DOM adjacency
     (input + .toggle-track), not visibility, so they're unaffected. */
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 46px;
  height: 26px;
}

.toggle-track {
  width: 46px;
  height: 26px;
  background: var(--border);
  border-radius: var(--radius-full);
  position: relative;
  transition: background var(--transition-fast);
  flex-shrink: 0;
}

.toggle-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast);
}

.toggle-switch input:checked+.toggle-track {
  background: var(--primary);
}

.toggle-switch input:checked+.toggle-track::after {
  transform: translateX(20px);
}

/* P2: ring on the visible track since the input itself is opacity:0 (an
   outline on a fully-transparent box would be invisible). Matches a11y.css
   convention (outline: 2px solid var(--primary); outline-offset: 2px). */
.toggle-switch input:focus-visible+.toggle-track {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Wave-1 review fix (item 5): assistants' toggles render input+.toggle-slider
   OUTSIDE .settings-section (studio/assistant/js/assistants.js) — the base
   ring above only ever targets +.toggle-track, so those toggles had no ring
   at all. Unscoped twin, same convention as the rule above. */
.toggle-switch input:focus-visible+.toggle-slider {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}


/* ─────────────────────────────────────────────────────
   CHIPS / TAGS
   ───────────────────────────────────────────────────── */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.chip-primary {
  background: var(--primary-100);
  color: var(--primary-700);
}

.chip-success {
  background: var(--success-light);
  color: hsl(142, 70%, 30%);
}

.chip-warning {
  background: var(--warning-light);
  color: hsl(30, 80%, 30%);
}

.chip-danger {
  background: var(--danger-light);
  color: hsl(0, 72%, 38%);
}

.chip-info {
  background: var(--primary-50);
  color: var(--primary-700);
}


/* ─────────────────────────────────────────────────────
   MODAL & BOTTOM SHEET
   ───────────────────────────────────────────────────── */

/* Body scroll lock while a modal is open — iOS-Safari-safe */
body.modal-open {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: hsla(205, 80%, 10%, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
}

.modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.modal-panel {
  background: var(--card);
  border-radius: var(--radius-2xl);
  width: 100%;
  max-width: min(520px, 92vw);
  max-height: 90dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xl);
  transform: scale(0.96) translateY(8px);
  transition: transform var(--transition-spring);
}

.modal-overlay.open .modal-panel {
  transform: scale(1) translateY(0);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-xl);
  border-bottom: 1px solid var(--border-light);
}

.modal-header h3 {
  font-size: 1.08rem;
}

.modal-close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  color: var(--text-muted);
  transition: all var(--transition-fast);
}

.modal-close:hover {
  background: var(--muted);
  color: var(--text-primary);
}

.modal-body {
  padding: var(--space-xl);
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1 1 auto;
  min-height: 0;
}

.modal-footer {
  padding: var(--space-lg) var(--space-xl);
  border-top: 1px solid var(--border-light);
  box-shadow: 0 -4px 12px rgba(0,0,0,.06);
  display: flex;
  gap: var(--space-md);
  justify-content: flex-end;
}

/* Compact shell for SH.confirm / SH.alert — one line of text in a 520px panel
   left most of it empty, so the question read as an afterthought. Applied by
   those two helpers and cleared by SH.modal.open() on every open (the panel is
   a singleton). Desktop only: under 768px the panel is a full-width bottom
   sheet and must stay full width. */
@media (min-width: 769px) {
  .modal-panel.modal-dialog-compact {
    max-width: min(420px, 92vw);
  }

  /* Stays inside this query: .modal-dialog-compact .modal-body is (0,2,0) and
     would otherwise outrank the tighter mobile .modal-body padding. */
  .modal-dialog-compact .modal-body {
    padding: var(--space-lg) var(--space-xl) var(--space-xl);
  }
}

/* Bottom Sheet (Mobile) */
.bottom-sheet-overlay {
  position: fixed;
  inset: 0;
  background: hsla(205, 80%, 10%, 0.45);
  backdrop-filter: blur(6px);
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
}

.bottom-sheet-overlay.open {
  opacity: 1;
  visibility: visible;
}

.bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--card);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  max-height: 85dvh;
  overflow-y: auto;
  z-index: 1101;
  transform: translateY(100%);
  transition: transform var(--transition-slow);
  padding-bottom: env(safe-area-inset-bottom);
}

.bottom-sheet.open {
  transform: translateY(0);
}

.bottom-sheet-handle {
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: var(--space-md) auto var(--space-sm);
}


/* ─────────────────────────────────────────────────────
   TOAST / SNACKBAR
   ───────────────────────────────────────────────────── */

.toast-container {
  position: fixed;
  top: var(--space-xl);
  right: var(--space-xl);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  pointer-events: none;
}

.toast {
  background: var(--foreground);
  color: white;
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  pointer-events: auto;
  transform: translateX(120%);
  transition: transform var(--transition-normal);
  max-width: 400px;
}

.toast.show {
  transform: translateX(0);
}

.toast.toast-success {
  background: var(--success);
}

.toast.toast-warning {
  background: var(--warning);
  color: hsl(30, 80%, 10%);
}

.toast.toast-danger {
  background: var(--destructive);
}

.toast.toast-info {
  background: var(--primary);
}


/* ─────────────────────────────────────────────────────
   WIZARD STEPPER (Quotation Engine)
   ───────────────────────────────────────────────────── */

.wizard-stepper {
  display: flex;
  align-items: center;
  overflow-x: auto;
  padding: var(--space-lg) var(--space-xl);
  gap: 0;
  background: var(--card);
  border-bottom: 1px solid var(--border-light);
  scrollbar-width: none;
}

.wizard-stepper::-webkit-scrollbar {
  display: none;
}

.step-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
  padding: var(--space-xs);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.step-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--muted);
  color: var(--muted-foreground);
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.step-label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: color var(--transition-fast);
}

.step-connector {
  width: 20px;
  height: 2px;
  background: var(--border);
  flex-shrink: 0;
  margin: 0 var(--space-xs);
  border-radius: 1px;
  transition: background var(--transition-fast);
}

.step-item.active .step-number {
  background: var(--primary);
  color: white;
  box-shadow: 0 0 0 4px hsla(200, 80%, 44%, 0.12);
}

.step-item.active .step-label {
  color: var(--primary);
}

.step-item.completed .step-number {
  background: var(--success);
  color: white;
}

.step-item.completed .step-label {
  color: var(--foreground);
}

.step-item.completed+.step-connector {
  background: var(--success);
}

/* Wizard Content */
.wizard-body {
  padding: var(--space-2xl);
  flex: 1;
  overflow-y: auto;
  animation: fadeSlideIn 280ms ease;
}

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.wizard-section-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 2px;
}

.wizard-section-desc {
  font-size: 0.8rem;
  color: var(--muted-foreground);
  margin-bottom: var(--space-md);
}

/* Separates the package selection from the merged Add-ons/Products sections */
.wizard-section-divider {
  height: 1px;
  background: var(--border-light);
  margin: var(--space-2xl) 0 var(--space-xl);
}

.wizard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) var(--space-2xl);
  background: var(--card);
  border-top: 1px solid var(--border-light);
}


/* ─────────────────────────────────────────────────────
   FLOATING TOTAL BAR — Fixed positioning
   Uses display:none/flex (not transform) to avoid ghost bar
   ───────────────────────────────────────────────────── */

.total-bar {
  position: fixed;
  bottom: 0;
  left: var(--sidebar-width);
  right: 0;
  height: var(--total-bar-height);
  background: var(--primary-950);
  color: white;
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-2xl);
  z-index: 90;
  box-shadow: 0 -4px 24px hsla(205, 80%, 10%, 0.15);
}

.total-bar.visible {
  display: flex;
}

/* Hide floating bars when virtual keyboard is open on mobile */
body.keyboard-open .total-bar,
body.keyboard-open .wizard-footer,
body.keyboard-open .bottom-nav { display: none; }

/* Live-meter band: unstick while typing — static keeps the identical in-flow
   layout (no scroll jump on focus/blur; display:none would shift content) but
   removes the frosted sticky overlay so it can never cover the focused field.
   Covers the walk-in AND quotation wizard bands; no-op inside .dq-lm (already
   static). */
body.keyboard-open .wi-lm-wrap { position: static; }

/* Send-to-Client attention pulse — only on unsent quotations whose event date
   hasn't passed (JS gates the class). Soft green ring, not opacity blinking:
   reads as "act on me" without strobing; honors reduced motion. */
@keyframes qtSendPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); }
  55%      { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); }
}
.qt-send-blink { animation: qtSendPulse 1.9s ease-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .qt-send-blink { animation: none; }
}

/* Quotation wizard band: rounded card instead of a full-bleed white strip —
   the wizard page shows the band over the page background where square
   edges read as an unfinished block (walk-in's band stays full-bleed). */
#qtLmMount .wi-lm-wrap {
  border-radius: 14px;
  padding-left: 14px;
  padding-right: 14px;
}

.total-bar-amount {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
}

.total-bar-amount small {
  font-size: 0.75rem;
  opacity: 0.5;
  font-weight: 400;
  margin-right: var(--space-xs);
}

.total-bar .btn {
  background: var(--card);
  color: var(--primary-950);
  font-weight: 700;
}

.total-bar.ping .total-bar-amount {
  animation: pricePing 400ms ease;
}

@keyframes pricePing {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
    color: var(--primary-300);
  }

  100% {
    transform: scale(1);
  }
}


/* ─────────────────────────────────────────────────────
   PACKAGE CARDS
   ───────────────────────────────────────────────────── */

/* Wizard package step — event-type filter chip */
.pkg-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
  padding: 8px 12px;
  background: var(--primary-50, #eff6ff);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
}
.pkg-filter-note {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.pkg-filter-toggle {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--primary);
  background: transparent;
  border: 1px solid var(--primary);
  border-radius: var(--radius-full, 999px);
  padding: 6px 14px;
  min-height: 36px;
  cursor: pointer;
  white-space: nowrap;
}

.package-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-lg);
}

.package-card {
  background: var(--card);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.package-card:hover {
  border-color: var(--primary-300);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.package-card.selected {
  border-color: var(--primary);
  background: var(--primary-50);
  box-shadow: 0 0 0 3px hsla(200, 80%, 44%, 0.1);
}

.package-card.selected::after {
  content: '';
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 24px;
  height: 24px;
  background: var(--primary);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
  background-size: 16px;
  background-position: center;
  background-repeat: no-repeat;
}


/* ─── Hisab Samjhao ──────────────────────────────────── */
.hs-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hs-name {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.hs-text {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-primary);
  white-space: pre-wrap;
}

.hs-loading {
  color: var(--text-muted);
}

.hs-copy {
  align-self: flex-start;
  min-height: 44px;
}

/* ─── Per-quote package edit (wizard step 3) ───────────────────────────────
   Studios asked to tweak a saved package while picking it, without changing
   the saved template. The footer is always visible — step 3 is mostly used on
   phones, where a hover-reveal affordance is invisible. */
.pkgq-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: var(--space-md);
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
}

/* Bare pencil in the card's top-right corner — same affordance as
   .addon-edit-btn on the add-on cards right below this grid. 44px of tap
   target, but only the glyph shows until hover/focus. */
.pkgq-edit {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
  z-index: 2;
}

.pkgq-edit .material-symbols-rounded {
  font-size: 1.15rem;
}

.pkgq-edit:hover,
.pkgq-edit:focus-visible {
  background: var(--gray-100);
  color: var(--primary);
}

.pkgq-is-edited .pkgq-edit {
  color: var(--primary);
}

/* The selected tick owns the same corner, so on a card that has the pencil it
   steps left of it. Both positions are static — nothing moves on selection. */
.package-card.pkgq-has-edit.selected::after {
  right: calc(var(--space-md) + 40px);
}

/* Keep a long package name from sliding under the pencil (and under the tick
   once the card is selected). */
.pkgq-has-edit .package-name {
  padding-right: 44px;
}

.pkgq-has-edit.selected .package-name {
  padding-right: 84px;
}

/* The package editor rendered inside the shared modal: .modal-body already
   supplies the panel, padding and scrolling, so no nested .card chrome. */
.pkgq-modal-form {
  display: block;
}

.pkgq-modal-form .pkgq-edit-note {
  margin-top: 0;
}

.pkgq-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.pkgq-reset:hover {
  color: var(--primary);
}

/* "Is quote ke liye" — says the saved package itself is untouched. */
.pkgq-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
}

.pkgq-edit-note {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin-bottom: var(--space-md);
}

.package-name {
  font-size: 1.02rem;
  font-weight: 700;
  margin-bottom: var(--space-xs);
}

.package-price {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: var(--space-md);
}

.package-price small {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 400;
}

.package-features {
  list-style: none;
}

.package-features li {
  font-size: 0.82rem;
  color: var(--muted-foreground);
  padding: var(--space-xs) 0;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.package-features li .material-symbols-rounded {
  font-size: 1rem;
  color: var(--success);
}


/* ─── Step 4: Addon Cards (compact Blinkit-style) ─── */
.addon-grid { display: grid; grid-template-columns: 1fr; gap: 6px; }
@media (min-width: 768px) { .addon-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .addon-grid { grid-template-columns: 1fr 1fr 1fr; } }

.addon-card {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--border-light, #e5e7eb);
  background: var(--card, #fff); cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.addon-card.active {
  border-color: var(--primary, #3b82f6);
  background: rgba(59,130,246,0.04);
}
.addon-card .addon-icon { display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; width: 32px; height: 32px; border-radius: 8px; background: var(--gray-100, #f3f4f6); flex-shrink: 0; }
.addon-card .addon-icon img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; } .addon-card .addon-icon .material-symbols-rounded { font-size: 1rem; color: var(--text-secondary); }
.addon-card.active .addon-icon { background: rgba(59,130,246,0.1); }
.addon-card.active .addon-icon .material-symbols-rounded { color: var(--primary); }
.addon-card .addon-info { flex: 1; min-width: 0; }
.addon-card .addon-name { font-size: 0.82rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.addon-card .addon-price { font-size: 0.72rem; color: var(--text-muted); font-weight: 500; }
.addon-card .addon-edit-btn { padding: 4px; border: none; background: none; cursor: pointer; color: var(--text-muted); border-radius: 6px; min-width: 32px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; }
.addon-card .addon-edit-label { display: none; }
.addon-card .addon-edit-btn:hover { background: var(--gray-100); color: var(--primary); }
.addon-card .addon-detail-row { width: 100%; display: flex; align-items: center; gap: 6px; padding-top: 6px; border-top: 1px solid var(--border-light, #eee); margin-top: 4px; }
.addon-card .addon-line-total { font-size: 0.8rem; font-weight: 600; color: var(--text-primary); margin-left: auto; }

/* Day chips (shared between equipment + addons) */
.day-chips { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; margin-top: 4px; }
.day-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 16px; font-size: 0.78rem; cursor: pointer; border: 1px solid var(--border, #ddd); background: transparent; color: var(--text-secondary); transition: 0.15s; min-height: 36px; }
.day-chip.checked { border-color: var(--primary, #3b82f6); background: rgba(59,130,246,0.08); color: var(--primary); }
.day-chip input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); }

/* Qty stepper (compact) */
.qty-stepper { display: inline-flex; align-items: center; gap: 2px; }
.qty-stepper button { width: 32px; height: 32px; border: 1px solid var(--border-light); border-radius: 8px; background: var(--card); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; font-size: 1rem; color: var(--text-secondary); }
.qty-stepper button:active { background: var(--gray-100); }
.qty-stepper .qty-value { min-width: 24px; text-align: center; font-weight: 600; font-size: 0.9rem; }
.qty-stepper input.qty-input { width: 46px; text-align: center; border: 1px solid var(--border-light); border-radius: 6px; font-size: 0.85rem; padding: 4px 4px; font-weight: 600; min-height: 32px; -moz-appearance: textfield; appearance: textfield; }
/* +/- buttons already exist → drop the native number spinner so digits aren't clipped */
.qty-stepper input.qty-input::-webkit-outer-spin-button,
.qty-stepper input.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Products carry large quantities (100, 500…) → give them a wider qty box */
.product-line .qty-stepper input.qty-input { width: 64px; }

/* No native number spinners inside modals (package/add-on/product etc.) — users type the value */
#modalPanel input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
#modalPanel input[type="number"]::-webkit-outer-spin-button,
#modalPanel input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ─── Step 4: Product Cards ─── */
.product-line { padding: 8px 10px; border: 1px solid var(--border-light, #e5e7eb); border-radius: 10px; margin-bottom: 6px; background: var(--card); }
.product-line-header { display: flex; align-items: center; gap: 6px; }
.product-line-header .product-cat-icon { width: 28px; height: 28px; border-radius: 7px; background: var(--gray-100); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.product-line-header .product-cat-icon .material-symbols-rounded { font-size: 0.9rem; color: var(--text-secondary); }
.product-line-header .product-line-name { flex: 1; font-size: 0.82rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-line-header .product-edit-btn { padding: 4px; border: none; background: none; cursor: pointer; color: var(--text-muted); border-radius: 6px; min-width: 32px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; }
.product-line-header .product-edit-btn:hover { background: var(--gray-100); color: var(--primary); }
.product-line-header .product-del-btn { padding: 4px; border: none; background: none; cursor: pointer; color: var(--text-muted); border-radius: 6px; min-width: 32px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; }
.product-line-header .product-del-btn:hover { color: var(--danger); background: rgba(239,68,68,0.06); }
.product-line .product-desc-row { font-size: 0.72rem; color: var(--text-muted); padding: 2px 0 0 34px; }
/* flex-direction:row is explicit to override the bare .product-price-row{column} rule (≈L9560) that otherwise leaks in and stacks qty/rate/total vertically */
.product-line .product-price-row { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-light); }
.product-line .product-price-row .price-input { width: 110px; font-size: 0.9rem; text-align: right; padding: 4px 10px; min-height: 40px; }
.product-line .product-cost-info { font-size: 0.7rem; color: var(--text-muted); padding-left: 2px; margin-top: 4px; }
.product-line .product-extra-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; padding-left: 34px; font-size: 0.78rem; color: var(--text-secondary); }
.product-line .product-extra-row input { width: 50px; text-align: center; font-size: 0.82rem; padding: 2px 4px; min-height: 36px; }
.product-line.is-parent { margin-left: 16px; border-left: 2px solid var(--primary-light); }

/* Section headers */
.step4-section-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; cursor: pointer; }
.step4-section-header .section-title { font-size: 0.85rem; font-weight: 700; color: var(--text-primary); flex: 1; }
.step4-section-header .section-count { font-size: 0.72rem; padding: 1px 7px; border-radius: 10px; background: var(--primary); color: #fff; font-weight: 600; }
.step4-section-header .section-chevron { font-size: 0.9rem; color: var(--text-muted); transition: transform 0.2s; }

/* Step 4 empty states */
.step4-empty { text-align: center; padding: 20px 16px; }
.step4-empty .material-symbols-rounded { font-size: 2rem; color: var(--text-muted); }
.step4-empty p { font-size: 0.85rem; margin: 4px 0 12px; color: var(--text-secondary); }

/* Inline create link */
.step4-create-link { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; color: var(--primary); cursor: pointer; padding: 8px 0; border: none; background: none; font-weight: 500; }
.step4-create-link:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════
   MOBILE WIZARD DENSITY — Blinkit-grade compact UX
   Phone (<768px) + Tablet (<1024px) overhaul
   Reference: packages.js editorial card theme
   ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Stepper bar: ultra-compact, pills not circles */
  .wizard-stepper {
    padding: 8px 12px;
    gap: 0;
    background: var(--surface, var(--card));
    border-bottom: 1px solid var(--border-light);
  }
  .step-number {
    width: 24px; height: 24px;
    font-size: 0.68rem;
  }
  .step-item { padding: 4px 2px; }
  .step-item.active .step-number { box-shadow: 0 0 0 3px rgba(59,130,246,0.12); }
  .step-connector { width: 10px; margin: 0 1px; }

  /* Section titles: compact, no wasted space */
  .wizard-section-title { font-size: 0.88rem; margin-bottom: 2px; }
  .wizard-section-desc { font-size: 0.76rem; margin-bottom: 10px; line-height: 1.3; }

  /* Form controls: tighter on mobile */
  .wizard-body .form-group { margin-bottom: 10px; }
  .wizard-body .form-label { font-size: 0.75rem; margin-bottom: 3px; }
  .wizard-body .form-control { font-size: 0.85rem; padding: 10px 12px; min-height: 44px; }
  /* ...except a search field, which needs its icon gutter back. The shorthand
     above has the SAME specificity as `.search-input-wrapper .form-control`
     (both 0,2,0) and comes later in the file, so it silently wiped that rule's
     padding-left:40px — leaving the magnifier sitting on top of the
     placeholder. One step more specific wins it back without !important. */
  .wizard-body .search-input-wrapper .form-control { padding-left: 40px; }
  .wizard-body select.form-control,
  .wizard-body select.form-select { font-size: 0.83rem; padding: 10px 12px; }

  /* Addon grid: 2 columns on phone to show more */
  .addon-grid { grid-template-columns: 1fr 1fr; gap: 6px; }

  /* Addon cards: ultra compact */
  .addon-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 8px;
    gap: 4px;
    position: relative;
    min-height: 0;
    position: relative;
  }
  .addon-card .addon-icon { width: 28px; height: 28px; border-radius: 7px; }
  .addon-card .addon-icon .material-symbols-rounded { font-size: 0.9rem; }
  .addon-card .addon-info { width: 100%; }
  .addon-card .addon-name { font-size: 0.78rem; }
  .addon-card .addon-price { font-size: 0.68rem; }
  .addon-card .addon-edit-btn {
    position: static;
    align-self: stretch;
    min-width: 44px; min-height: 44px;
    padding: 8px;
    gap: 6px;
    justify-content: flex-start;
    border-top: 1px solid var(--border-light);
    border-radius: 0;
  }
  .addon-card .addon-edit-btn .material-symbols-rounded { font-size: 1rem; }
  .addon-card .addon-edit-label { display: inline; font-size: 0.75rem; font-weight: 600; }
  .addon-card .toggle-switch { position: absolute; top: 6px; right: 4px; }
  .toggle-track { width: 38px; height: 22px; }
  .toggle-track::after { width: 16px; height: 16px; top: 3px; left: 3px; }
  .toggle-switch input:checked+.toggle-track::after { transform: translateX(16px); }

  /* Addon detail row on mobile */
  .addon-card .addon-detail-row { padding-top: 4px; margin-top: 2px; }
  .addon-card .addon-line-total { font-size: 0.75rem; }

  /* Day chips: smaller on phone */
  .day-chip { padding: 3px 8px; font-size: 0.72rem; min-height: 32px; }
  .day-chip input[type="checkbox"] { width: 14px; height: 14px; }

  /* Qty stepper: compact */
  .qty-stepper button { width: 28px; height: 28px; }
  .qty-stepper input.qty-input { width: 42px; min-height: 28px; font-size: 0.8rem; }
  .product-line .qty-stepper input.qty-input { width: 56px; }

  /* Product cards: tight */
  .product-line { padding: 8px; margin-bottom: 4px; }
  .product-line-header .product-cat-icon { width: 24px; height: 24px; border-radius: 6px; }
  .product-line-header .product-cat-icon .material-symbols-rounded { font-size: 0.8rem; }
  .product-line-header .product-line-name { font-size: 0.78rem; }
  .product-line .product-price-row { margin-top: 4px; padding-top: 4px; gap: 4px; }
  .product-line .product-price-row .price-input { width: 75px; min-height: 38px; font-size: 0.8rem; padding: 3px 6px; }
  .product-line .product-line-total { font-size: 0.78rem; }
  .product-line .product-desc-row { font-size: 0.68rem; padding-left: 28px; }
  .product-line .product-extra-row { font-size: 0.72rem; padding-left: 28px; gap: 4px; }
  .product-line .product-extra-row input { width: 42px; min-height: 32px; font-size: 0.78rem; }
  .product-line.is-parent { margin-left: 10px; }

  /* Section headers in step 4 */
  .step4-section-header { margin-bottom: 8px; }
  .step4-section-header .section-title { font-size: 0.8rem; }

  /* Review step: dense invoice style */
  .review-section { margin-bottom: 10px; padding: 10px 12px 6px; }
  .review-section-title { font-size: 0.7rem; margin-bottom: 4px; padding-bottom: 3px; }
  .review-section-title .rev-ico { font-size: 0.92rem; }
  .review-row { padding: 3px 0; font-size: 0.78rem; }
  .review-row .label { font-size: 0.78rem; }
  .review-row .value { font-size: 0.78rem; }
  .review-total { padding: 8px 12px; margin-top: 6px; }
  .review-total .label { font-size: 0.82rem; }
  .review-total .value { font-size: 1rem; }

  /* Total bar: unified nav — Back | Total | Next */
  .total-bar { padding: 0 10px; height: 52px; gap: 6px; }
  .total-bar-amount { font-size: 1rem; flex: 1; text-align: center; }
  .total-bar-amount small { font-size: 0.65rem; }
  .total-bar .btn { font-size: 0.82rem; padding: 7px 16px; border-radius: 10px; min-height: 38px; }
  .total-bar .totalbar-back { flex-shrink: 0; }

  /* Wizard footer: tight */
  .wizard-footer .btn { font-size: 0.82rem; min-height: 40px; padding: 8px 16px; border-radius: 10px; }

  /* Empty states: compact */
  .step4-empty { padding: 14px 12px; }
  .step4-empty .material-symbols-rounded { font-size: 1.6rem; }
  .step4-empty p { font-size: 0.78rem; margin: 2px 0 8px; }

  /* Itinerary rows: tighter */
  .itinerary-row { gap: 6px; }
  .itinerary-row .form-group { margin-bottom: 0; }
  .itinerary-row .form-label { font-size: 0.7rem; }

  /* Expense step cards */
  .expense-card { padding: 10px 12px; }

  /* Create links */
  .step4-create-link { font-size: 0.75rem; padding: 6px 0; }
}

/* Tablet landscape (769-1024): 2-col addon, slightly more breathing room */
@media (min-width: 769px) and (max-width: 1024px) {
  .wizard-body { padding: 18px; }
  .addon-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .wizard-section-title { font-size: 0.92rem; }
  .wizard-section-desc { font-size: 0.78rem; margin-bottom: 12px; }
  .review-row { font-size: 0.82rem; padding: 4px 0; }
}


/* ─────────────────────────────────────────────────────
   ITINERARY ROWS
   ───────────────────────────────────────────────────── */

.itinerary-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.itinerary-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr auto;
  gap: var(--space-md);
  align-items: end;
  padding: var(--space-lg);
  background: var(--muted);
  border-radius: var(--radius-md);
  position: relative;
}

.itinerary-row .remove-row {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  margin-bottom: 4px;
}

.itinerary-row .remove-row:hover {
  color: var(--destructive);
  background: var(--danger-light);
}

/* Collapsed (summary) date row — shown for every row except the active one */
.itinerary-row.itin-collapsed {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
}
.itin-summary {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: 4px 0;
  font: inherit;
}
.itin-sum-caret { font-size: 1.2rem; color: var(--text-muted); flex-shrink: 0; }
.itin-sum-name { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); flex-shrink: 0; }
.itin-sum-meta {
  font-size: 0.8rem;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Mobile: stack the active row's fields into one column so the row never exceeds
   the viewport width (the 4-col grid overflowed 375px and blocked vertical scroll). */
@media (max-width: 600px) {
  .itinerary-row:not(.itin-collapsed) {
    grid-template-columns: 1fr;
  }
  .itinerary-row:not(.itin-collapsed) .remove-row {
    justify-self: end;
    margin-bottom: 0;
  }
}

/* ─────────────────────────────────────────────────────
   PER-DAY CREW PLAN (inside .itinerary-row)
   ───────────────────────────────────────────────────── */

.itin-crew-block {
  grid-column: 1 / -1;
  margin-top: var(--space-sm);
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.itin-crew-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: left;
  min-height: 44px;
}

.itin-crew-head .material-symbols-rounded { font-size: 1.05rem; color: var(--text-secondary); }
.itin-crew-title { flex: 1; }

.itin-crew-caret { transition: transform var(--transition-fast); }
.itin-crew-block.open .itin-crew-caret { transform: rotate(180deg); }

.itin-crew-body {
  padding: 4px 12px 12px;
  display: none;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--border-light);
}
.itin-crew-block.open .itin-crew-body { display: flex; }

.itin-crew-empty {
  font-size: 0.8rem;
  color: var(--text-muted);
  padding: 6px 2px;
}

.itin-crew-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}

.itin-crew-role {
  flex: 1;
  font-size: 0.88rem;
  color: var(--text-primary);
}

.itin-crew-stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--muted);
  border-radius: var(--radius-full);
  padding: 2px;
}

.itin-crew-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--card);
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.itin-crew-btn:hover { background: var(--primary); color: #fff; }
.itin-crew-btn:active { transform: scale(0.95); }

.itin-crew-qty {
  min-width: 24px;
  text-align: center;
  font-weight: 600;
  font-size: 0.9rem;
}

.itin-crew-remove {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.itin-crew-remove:hover { color: var(--destructive); background: var(--danger-light); }
.itin-crew-remove .material-symbols-rounded { font-size: 1rem; }

.itin-crew-add {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  background: var(--primary-light, color-mix(in srgb, var(--primary) 10%, transparent));
  color: var(--primary);
  border: 1px dashed var(--primary);
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 40px;
}
.itin-crew-add:hover { background: var(--primary); color: #fff; }
.itin-crew-add .material-symbols-rounded { font-size: 1rem; }

.crew-sheet-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body .crew-sheet-option {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--card);
  overflow: hidden;
}
body .crew-sheet-option:has(.crew-sheet-chip:not(.is-selected):hover),
body .crew-sheet-option:focus-within { border-color: var(--primary); }
body .crew-sheet-option:has(.crew-sheet-chip.is-selected) {
  border-color: var(--primary);
  background: var(--primary);
}
body .crew-sheet-option.is-pending-delete .crew-sheet-chip { opacity: 0.5; text-decoration: line-through; }
body .crew-sheet-delete {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--destructive);
  cursor: pointer;
}
body .crew-sheet-delete span {
  font-size: 21px;
}
body .crew-sheet-option:has(.crew-sheet-chip.is-selected) .crew-sheet-delete { color: var(--card); }
body .crew-sheet-option.is-pending-delete .crew-sheet-delete { color: var(--primary); }
body .crew-sheet-delete:hover { background: color-mix(in srgb, var(--destructive) 10%, transparent); }
body .crew-sheet-delete:focus-visible { outline: 2px solid var(--primary); outline-offset: -3px; border-radius: var(--radius-full); }
body .crew-sheet-hidden { margin-top: var(--space-md); padding: var(--space-sm) 0; }
body .crew-sheet-hidden[hidden] { display: none; }
body .crew-sheet-hidden-title { color: var(--muted-foreground); font-size: 0.78rem; margin-bottom: var(--space-sm); }
body .crew-sheet-restore {
  min-height: 44px;
  margin: 0 var(--space-sm) var(--space-sm) 0;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--card);
  color: var(--primary);
  cursor: pointer;
}

.crew-sheet-chip {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 12px 9px 14px;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  min-height: 44px;
  overflow-wrap: anywhere;
}
body .crew-sheet-option .crew-sheet-chip:not(.is-selected):hover {
  background: transparent;
  color: var(--text-primary);
}
body .crew-sheet-option .crew-sheet-chip.is-selected,
body .crew-sheet-option .crew-sheet-chip.is-selected:hover {
  background: transparent;
  color: #fff;
}
.crew-sheet-chip.is-existing {
  opacity: 0.55;
  cursor: default;
}

/* Wizard footer — step progress indicator */
.wiz-step-progress {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Review step — "edit past step" pencil buttons */
.review-edit-btn {
  min-width: 36px;
  min-height: 36px;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 9px;
  background: var(--bg-secondary, #f1f5f9);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.review-edit-btn:hover { background: var(--primary); color: #fff; }
.review-edit-btn:active { transform: scale(0.94); }
.review-edit-btn .material-symbols-rounded { font-size: 1rem; }


/* ─────────────────────────────────────────────────────
   EXPENSE INPUTS
   ───────────────────────────────────────────────────── */

.expense-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--border-light);
}

.expense-row:last-child {
  border-bottom: none;
}

.expense-label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-weight: 500;
}

.expense-label .material-symbols-rounded {
  color: var(--text-muted);
}

.expense-input {
  width: 140px;
  text-align: right;
}

@media (max-width: 380px) {
  .expense-input {
    width: 100px;
    font-size: 0.9rem;
  }
}


/* ─────────────────────────────────────────────────────
   PAYMENT PLAN
   ───────────────────────────────────────────────────── */

.plan-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
}

.plan-card {
  padding: var(--space-xl);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-xl);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.plan-card:hover {
  border-color: var(--primary-300);
}

.plan-card.selected {
  border-color: var(--primary);
  background: var(--primary-50);
}

.plan-card-title {
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: var(--space-xs);
}

.plan-card-desc {
  font-size: 0.78rem;
  color: var(--muted-foreground);
}

.split-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.split-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
}

.split-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 9px;
}

.split-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.split-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.split-field-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; }
.split-amt-row { display: grid; grid-template-columns: 1.3fr 1fr; gap: 8px; }
.split-due-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.split-in { font-size: 0.85rem; padding: 8px 10px; min-height: 40px; }
.split-in.split-amt { text-align: right; }
.split-in[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.split-in[type="number"]::-webkit-outer-spin-button,
.split-in[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.split-pct-wrap { position: relative; }
.split-pct-wrap .split-in { padding-right: 24px; text-align: right; }
.split-pct-sign { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font-size: 0.8rem; font-weight: 600; color: var(--text-muted); pointer-events: none; }

.split-remove-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin-top: 4px;
  border: none;
  background: none;
  color: var(--text-muted);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.split-remove-btn:hover { color: var(--danger); background: rgba(239,68,68,0.06); }
.split-remove-btn .material-symbols-rounded { font-size: 1.1rem; }

.split-label {
  font-size: 0.8rem;
  color: var(--muted-foreground);
}

.split-amount {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
}

/* A preset instalment row is a control: tapping it opens the custom editor
   with these exact numbers. The pencil is the only affordance that says so,
   so it must not be invisible until hover (touch has no hover). */
.split-amount-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.split-edit-hint {
  font-size: 1.05rem;
  color: var(--text-muted);
  opacity: 0.6;
  flex-shrink: 0;
  transition: opacity 150ms ease, color 150ms ease;
}

.split-row-editable {
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}

.split-row-editable:hover {
  border-color: var(--primary);
  background: var(--primary-light, rgba(12, 140, 233, 0.04));
}

.split-row-editable:hover .split-edit-hint,
.split-row-editable:focus-visible .split-edit-hint {
  opacity: 1;
  color: var(--primary);
}

.split-row-editable:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}


/* ─────────────────────────────────────────────────────
   REVIEW SUMMARY
   ───────────────────────────────────────────────────── */

.review-section {
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg, 14px);
  padding: 12px 16px 8px;
  margin-bottom: 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

/* Leading icon on each review section title */
.review-section-title .rev-title-l { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.review-section-title .rev-ico { font-size: 1.05rem; color: var(--primary); flex-shrink: 0; }

.review-section-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-light);
}

.validity-pill {
  padding: 8px 18px;
  border-radius: var(--radius-full, 999px);
  border: 1.5px solid var(--border, #E5E7EB);
  background: var(--card);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  color: var(--text-primary);
  transition: all 0.15s;
}

.validity-pill-active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

/* Center the whole review as a document so it never stretches awkwardly on wide screens */
.review-wrap { max-width: 760px; margin: 0 auto; }

.review-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 4px 0;
  font-size: 0.82rem;
}

.review-row .label {
  color: var(--muted-foreground);
  min-width: 0;
  overflow-wrap: anywhere;     /* long event/package names wrap instead of overflowing */
}

.review-row .value {
  font-weight: 600;
  text-align: right;
  min-width: 0;
  overflow-wrap: break-word;   /* long text values (crew/venue) wrap; short amounts stay on one line */
}

.review-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--primary-50);
  border-radius: var(--radius-md);
  margin-top: 8px;
  border: 1px solid var(--primary-200);
}

.review-total .label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--primary-700);
}

.review-total .value {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--primary);
}


/* ─────────────────────────────────────────────────────
   DASHBOARD
   ───────────────────────────────────────────────────── */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

.stat-card {
  background: var(--card);
  background: linear-gradient(135deg, var(--card) 0%, color-mix(in srgb, var(--card) 90%, var(--primary) 10%) 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  border: 1px solid var(--border-light);
  border: 1px solid color-mix(in srgb, var(--border-light) 80%, transparent 20%);
  box-shadow: var(--shadow-card), 0 0 0 1px rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  transition: all var(--transition-fast);
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.stat-card::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
  pointer-events: none;
  border-radius: inherit;
  clip-path: inset(0 0 0 0 round var(--radius-xl));
}

.stat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.stat-card > div:last-child {
  min-width: 0;
  flex: 1;
}

.stat-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.4rem;
}

.stat-icon.blue {
  background: var(--primary-100);
  color: var(--primary);
}

.stat-icon.green {
  background: var(--success-light);
  color: var(--success);
}

.stat-icon.amber {
  background: var(--warning-light);
  color: var(--warning);
}

.stat-icon.red {
  background: var(--danger-light);
  color: var(--destructive);
}

.stat-value {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}

.stat-label {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  font-weight: 500;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Quick Actions */
.quick-actions {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-2xl);
}

.quick-action-btn {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-full);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-primary);
  transition: all var(--transition-fast);
  white-space: nowrap;
  box-shadow: var(--shadow-xs);
}

.quick-action-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-50);
  box-shadow: 0 4px 24px var(--glow-primary);
  transform: translateY(-1px);
}

.quick-action-btn .material-symbols-rounded {
  font-size: 1.05rem;
  color: var(--primary);
}


/* ─────────────────────────────────────────────────────
   CALENDAR
   ───────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────
   CALENDAR — Redesigned (3D Sea Blue)
   ───────────────────────────────────────────────────── */

/* 3D Shadow tokens */
:root {
  --cal-shadow-3d:
    0 2px 4px rgba(14, 165, 233, 0.10),
    0 6px 12px rgba(14, 165, 233, 0.14),
    0 14px 28px rgba(14, 165, 233, 0.12),
    0 1px 0px rgba(255, 255, 255, 0.6) inset;
  --cal-shadow-3d-strong:
    0 4px 8px rgba(14, 165, 233, 0.14),
    0 10px 20px rgba(14, 165, 233, 0.18),
    0 20px 40px rgba(14, 165, 233, 0.14),
    0 1px 0px rgba(255, 255, 255, 0.8) inset;
  --cal-shadow-selected:
    0 1px 2px rgba(14, 165, 233, 0.12),
    0 0 0 2px rgba(14, 165, 233, 0.25),
    inset 0 2px 4px rgba(14, 165, 233, 0.10);
  --cal-shine: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 50%);
}

[data-theme="dark"] {
  --cal-shadow-3d:
    0 2px 4px rgba(56, 189, 248, 0.08),
    0 6px 12px rgba(56, 189, 248, 0.10),
    0 14px 28px rgba(0, 0, 0, 0.25),
    0 1px 0px rgba(56, 189, 248, 0.08) inset;
  --cal-shadow-3d-strong:
    0 4px 8px rgba(56, 189, 248, 0.10),
    0 10px 20px rgba(56, 189, 248, 0.14),
    0 20px 40px rgba(0, 0, 0, 0.30),
    0 1px 0px rgba(56, 189, 248, 0.12) inset;
  --cal-shadow-selected:
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 0 0 2px rgba(56, 189, 248, 0.30),
    inset 0 2px 4px rgba(0, 0, 0, 0.15);
  --cal-shine: linear-gradient(135deg, rgba(56, 189, 248, 0.08) 0%, rgba(56, 189, 248, 0) 50%);
}

/* Card */
body .cal-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  animation: calFadeUp 0.45s ease both;
}

/* Header */
body .cal-header {
  padding: 18px 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

body .cal-month-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

body .cal-nav-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: all 0.25s ease;
}

body .cal-nav-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: hsla(200, 80%, 44%, 0.08);
}

body .cal-nav-btn:active {
  transform: scale(0.9);
}

body .cal-month-label {
  min-width: 150px;
  text-align: center;
  user-select: none;
}

body .cal-month-name {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

body .cal-month-year {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 1px;
}

body .cal-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

body .cal-today-btn {
  padding: 7px 18px;
  border-radius: var(--radius-full);
  border: none;
  background: var(--primary);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 8px hsla(200, 80%, 44%, 0.3);
}

body .cal-today-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px hsla(200, 80%, 44%, 0.3);
}

/* Compact agenda when side panel is open (desktop): tighter rows, smaller chrome */
body .cal-desktop .cal-agenda {
  font-size: 0.92rem;
}
body .cal-desktop .cal-agenda-group {
  margin-bottom: 10px;
}
body .cal-desktop .cal-agenda-date {
  font-size: 0.78rem;
  margin-bottom: 4px;
  padding-bottom: 2px;
}
body .cal-desktop .cal-agenda-item {
  padding: 6px 10px;
  border-radius: 6px;
  gap: 8px;
}
body .cal-desktop .cal-agenda-bar {
  width: 3px;
}
body .cal-desktop .cal-agenda-title {
  font-size: 0.85rem;
  line-height: 1.25;
}
body .cal-desktop .cal-agenda-meta {
  font-size: 0.74rem;
  line-height: 1.2;
}
body .cal-desktop .cal-agenda-meta .material-symbols-rounded {
  font-size: 12px;
}
body .cal-desktop .cal-agenda-amount {
  font-size: 0.82rem;
}

/* View Toggle */
body .cal-views {
  display: flex;
  gap: 2px;
  padding: 14px 18px 0;
}

body .cal-view-btn {
  flex: 1;
  padding: 7px 0;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

body .cal-view-btn:hover {
  color: var(--text-secondary);
  background: var(--muted);
}

body .cal-view-btn.active {
  background: hsla(200, 80%, 44%, 0.08);
  color: var(--primary);
}

body .cal-view-btn .material-symbols-rounded {
  font-size: 16px;
}

/* Legend */
body .cal-legend {
  display: flex;
  gap: 5px;
  padding: 12px 18px 0;
  flex-wrap: wrap;
}

body .cal-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px 3px 6px;
  border-radius: var(--radius-full);
  font-size: 0.66rem;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
  transition: all 0.25s ease;
  border: 1px solid transparent;
  user-select: none;
}

body .cal-legend-item:hover {
  border-color: currentColor;
}

body .cal-legend-dimmed {
  opacity: 0.3;
}

body .cal-legend-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(14, 165, 233, 0.18);
  flex-shrink: 0;
}

/* Grid */
body .cal-grid-wrap {
  padding: 10px 10px 14px;
}

body .cal-grid {
  display: grid;
  /* minmax(0,1fr): plain 1fr's implicit min is min-content, so one wide
     nowrap event chip blew its column out and pushed Saturday off-screen */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  border-radius: var(--radius-sm);
  overflow: visible;
}

body .cal-day-header {
  padding: 7px 2px;
  text-align: center;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

body .cal-sun {
  color: var(--destructive);
  opacity: 0.7;
}

/* ── 3D Cell ── */
body .cal-cell {
  position: relative;
  min-width: 0;
  overflow: hidden;
  min-height: 54px;
  padding: 4px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  animation: calCellPop 0.3s ease both;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease, background 0.15s;
  transform-style: preserve-3d;
  will-change: transform, box-shadow;
  background: var(--card);
  border: 1px solid var(--border);
}

body .cal-cell::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--cal-shine);
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
  z-index: 1;
}

body .cal-cell:hover::before {
  opacity: 1;
}

body .cal-cell:hover {
  transform: translateY(-6px) scale(1.08) rotateX(6deg) rotateY(-2deg);
  box-shadow: var(--cal-shadow-3d-strong);
  z-index: 5;
  border-color: var(--primary);
  background: var(--muted);
}

/* P10: hover-parity for keyboard focus. Pre-wired now (like the .package-card
   /.wi-type-card rings elsewhere) — inert until Wave 3 gives .cal-cell a
   tabindex; then it lights up for free. */
body .cal-cell:focus-visible {
  transform: translateY(-6px) scale(1.08) rotateX(6deg) rotateY(-2deg);
  box-shadow: var(--cal-shadow-3d-strong);
  z-index: 5;
  border-color: var(--primary);
  background: var(--muted);
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

body .cal-cell:focus-visible::before {
  opacity: 1;
}

body .cal-cell:active {
  transform: translateY(-2px) scale(1.02) rotateX(2deg);
  box-shadow: var(--cal-shadow-3d);
  transition-duration: 0.08s;
}

body .cal-other {
  /* Faint but BOXED — borderless ghost numbers made the first/last week
     rows look broken next to the bordered in-month cells */
  opacity: 0.3;
  pointer-events: none;
  border-color: var(--border-light);
  background: transparent;
}

body .cal-other::before {
  display: none;
}

body .cal-today {
  background: var(--primary-50);
  border-color: var(--primary);
  box-shadow: 0 2px 8px hsla(200, 80%, 44%, 0.3);
}

body .cal-today:hover {
  box-shadow: var(--cal-shadow-3d-strong), 0 0 0 2px hsla(200, 80%, 44%, 0.3);
}

body .cal-selected {
  background: hsla(200, 80%, 44%, 0.08);
  border-color: var(--primary);
  box-shadow: var(--cal-shadow-selected);
  transform: translateY(1px) scale(0.98);
}

body .cal-selected::before {
  opacity: 0;
}

body .cal-selected:hover {
  transform: translateY(0) scale(1.0);
  box-shadow: var(--cal-shadow-selected);
}

/* Heat */
body .cal-heat-1 {
  background: var(--primary-50);
}

body .cal-heat-2 {
  background: var(--primary-100);
}

body .cal-heat-3 {
  background: var(--primary-200);
}

body .cal-heat-4 {
  background: var(--primary-300);
}

body .cal-cell-num {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  margin-bottom: 2px;
  position: relative;
  z-index: 2;
}

body .cal-today .cal-cell-num {
  background: var(--primary);
  color: #fff;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  box-shadow: 0 3px 10px hsla(200, 80%, 44%, 0.3);
  animation: calTodayPulse 2.5s ease-in-out infinite;
}

body .cal-cell-dots {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  margin-top: auto;
  position: relative;
  z-index: 2;
}

body .cal-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(14, 165, 233, 0.18);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: inline-block;
}

body .cal-cell:hover .cal-dot {
  transform: scale(1.6) translateY(-1px);
}

body .cal-cell-overflow {
  font-size: 0.55rem;
  font-weight: 700;
  color: var(--text-muted);
  line-height: 6px;
}

/* Mobile compact time chip — replaces dots when ≤2 events */
body .cal-time-chip {
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1.1;
  padding: 1px 4px;
  border-radius: 3px;
  white-space: nowrap;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* Day timeline — 8a..11p strip with free vs busy hours */
body .cal-tl {
  margin: 4px 0 14px;
  padding: 10px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
body .cal-tl-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
body .cal-tl-title {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
body .cal-tl-meta {
  font-size: 0.7rem;
  color: var(--success);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
body .cal-tl-bar {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 2px;
  height: 18px;
  margin-bottom: 4px;
}
body .cal-tl-seg {
  border-radius: 2px;
  transition: transform .15s, opacity .15s;
}
body .cal-tl-seg.free {
  background: hsla(145, 60%, 50%, 0.18);
  border: 1px dashed hsla(145, 60%, 40%, 0.45);
}
body .cal-tl-seg.busy {
  opacity: 0.85;
}
body .cal-tl-seg:hover {
  transform: scaleY(1.15);
  opacity: 1;
}
/* Wave 3a: SH.cardKeys gives free slots role="button", which pulls in the
   generic [role="button"]:focus-visible ring (12px radius) — too round for
   this 2px-radius sliver of a segment. Keep the ring, fix the radius. */
body .cal-tl-seg.free:focus-visible {
  border-radius: 2px;
}
body .cal-tl-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.6rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* ─── Cell corner markers (desktop only) ──
   Fixed grammar: ₹ always top-right, ♥ always top-left, op-strip at cell foot.
   Kept small + low contrast — ambient signals, not announcements.
*/
body .cal-corner {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
body .cal-corner-money {
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  background: hsla(210, 25%, 88%, 0.8);
  color: var(--text-secondary);
  border: 1px solid transparent;
}
body .cal-corner-money.cal-u-overdue {
  background: var(--danger-light);
  color: var(--danger);
  border-color: hsla(0, 70%, 50%, 0.25);
}
body .cal-corner-money.cal-u-due_today {
  background: hsla(38, 92%, 50%, 0.14);
  color: hsl(32, 95%, 40%);
  border-color: hsla(38, 92%, 50%, 0.3);
}
body .cal-corner-money.cal-u-upcoming {
  background: hsla(200, 80%, 44%, 0.1);
  color: var(--primary);
  border-color: hsla(200, 80%, 44%, 0.22);
}
/* Anniversary marker.
   WAS top:4px/left:4px - the exact spot the day number occupies, so on any day
   with a client anniversary the date was hidden underneath the heart (Sep 9 and
   16 showed a heart and no number at all). The money pill never hit this because
   it sits top-RIGHT. Moved to the bottom-right, which is clear of both the day
   number and the left-anchored op-strip.
   Also unfilled and desaturated: a filled hot-pink heart read as an emoji
   sticker rather than one of the calendar's icon markers. */
body .cal-corner-anniv {
  bottom: 4px;
  right: 4px;
  width: 15px;
  height: 15px;
  color: hsl(340, 42%, 62%);
}
body .cal-corner-anniv .material-symbols-rounded {
  font-size: 12px;
  font-variation-settings: 'FILL' 0;
}

/* Reserve room so a long op-strip cannot run under the marker. */
body .cal-cell:has(.cal-corner-anniv) .cal-op-strip { padding-right: 17px; }

/* Legend swatch for the anniversary marker - the icon carried no explanation,
   so a pink heart on a business calendar meant nothing to a studio. */
.cal-legend-anniv {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.cal-legend-anniv .material-symbols-rounded {
  font-size: 13px;
  color: hsl(340, 42%, 62%);
  font-variation-settings: 'FILL' 0;
}

/* Op-strip: muted line of operational counts under chips */
body .cal-op-strip {
  display: none;  /* desktop only — overridden below */
  gap: 6px;
  margin-top: 2px;
  font-size: 0.6rem;
  color: var(--text-muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  position: relative;
  z-index: 2;
}
body .cal-op {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}
body .cal-op .material-symbols-rounded {
  font-size: 11px;
}
body .cal-op.cal-op-int {
  color: #d97706;
}
body .cal-desktop .cal-op-strip {
  display: flex;
}

/* Mobile: 2px red underline when day has anything overdue — one signal, tap for detail */
body .cal-cell.cal-overdue {
  box-shadow: inset 0 -2px 0 0 var(--danger);
}

/* ─── Overlay sections (side panel + bottom sheet) ─────
   Uses the existing muted-surface language so panel reads as one cohesive list,
   not 5 competing card styles.
*/
body .cal-ov-section {
  margin-top: 14px;
}
body .cal-ov-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 6px;
  padding: 0 2px;
}
body .cal-ov-head .material-symbols-rounded {
  font-size: 13px;
}
body .cal-ov-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  background: var(--muted);
  border: 1px solid var(--border);
  margin-bottom: 6px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  animation: calFadeUp 0.22s ease both;
}
body .cal-ov-row:hover {
  border-color: var(--primary);
  background: hsla(200, 80%, 44%, 0.05);
}
body .cal-ov-row.cal-ov-overdue {
  background: var(--danger-light);
  border-color: hsla(0, 70%, 50%, 0.28);
}
body .cal-ov-row.cal-ov-overdue:hover {
  border-color: var(--danger);
}
body .cal-ov-row.cal-ov-due-today {
  background: hsla(38, 92%, 50%, 0.08);
  border-color: hsla(38, 92%, 50%, 0.3);
}
body .cal-ov-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--card);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  flex-shrink: 0;
}
body .cal-ov-icon .material-symbols-rounded {
  font-size: 17px;
}
body .cal-ov-row.cal-ov-overdue .cal-ov-icon {
  color: var(--danger);
  border-color: hsla(0, 70%, 50%, 0.3);
}
body .cal-ov-icon-rem {
  color: hsl(340, 70%, 55%);
  border-color: hsla(340, 70%, 55%, 0.25);
}
body .cal-ov-icon-rem .material-symbols-rounded {
  font-variation-settings: 'FILL' 1;
}
body .cal-ov-body {
  min-width: 0;
}
body .cal-ov-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body .cal-ov-sub {
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body .cal-ov-trail {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
body .cal-ov-row.cal-ov-overdue .cal-ov-trail {
  color: var(--danger);
}
body .cal-ov-cta {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: var(--radius-sm);
  background: hsl(142, 70%, 45%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex-shrink: 0;
}
body .cal-ov-cta:hover { background: hsl(142, 72%, 40%); }
body .cal-ov-cta .material-symbols-rounded { font-size: 18px; }

/* Received payments — green/success tone, non-clickable vibe (it's done) */
body .cal-ov-row.cal-ov-received {
  background: hsla(142, 70%, 45%, 0.06);
  border-color: hsla(142, 70%, 40%, 0.22);
  cursor: default;
}
body .cal-ov-row.cal-ov-received:hover {
  background: hsla(142, 70%, 45%, 0.1);
  border-color: hsla(142, 70%, 40%, 0.35);
}
body .cal-ov-icon.cal-ov-icon-success {
  background: hsla(142, 70%, 45%, 0.12);
  color: hsl(142, 72%, 38%);
  border-color: hsla(142, 70%, 40%, 0.3);
}
body .cal-ov-trail.cal-ov-trail-success {
  color: hsl(142, 72%, 38%);
  font-weight: 700;
}

body .cal-ov-trail-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Collect CTA on rental-dues rows — compact arrow pill */
body .cal-ov-collect {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: #fff;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.12s, background 0.12s;
}
body .cal-ov-collect:hover {
  background: var(--primary-strong, hsl(200, 85%, 37%));
  transform: translateX(2px);
}
body .cal-ov-collect .material-symbols-rounded { font-size: 17px; }
body .cal-ov-row.cal-ov-overdue .cal-ov-collect {
  background: var(--danger);
}

/* ──────────────── Scheduling-clash treatment ────────────────
   A clash is more urgent than an overdue payment — it's money lost
   if not acted on immediately. The visual language uses:
   - Cell: 2px red double-border + subtle wash + top-centre CLASH pill
   - Timeline: barber-pole red hatching painted OVER the event colour
     (so you still see whose colour is clashing)
   - Side panel: a real alert card at the top with human rationale
*/
body .cal-cell-clash {
  border-color: var(--warning);
  box-shadow: inset 0 0 0 1px hsla(38, 80%, 45%, 0.45);
  background: linear-gradient(0deg, hsla(38, 80%, 50%, 0.04), hsla(38, 80%, 50%, 0.04)), var(--card);
}
body .cal-cell-clash.cal-selected {
  box-shadow: inset 0 0 0 2px var(--warning);
}
body .cal-clash-badge {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 8px 2px 4px;
  height: 18px;
  border-radius: var(--radius-full);
  background: var(--warning);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1;
  box-shadow: 0 2px 6px hsla(38, 80%, 40%, 0.35);
  pointer-events: none;
}
body .cal-clash-badge .material-symbols-rounded {
  font-size: 11px;
  font-variation-settings: 'FILL' 1, 'wght' 700;
}

/* Timeline — clash segment uses barber-pole hatch in amber-on-amber.
   JS omits inline bg on clash segments so this rule wins with no !important. */
body .cal-tl-seg.busy.clash {
  background: repeating-linear-gradient(
    45deg,
    var(--warning) 0,
    var(--warning) 3px,
    hsla(38, 85%, 45%, 0.35) 3px,
    hsla(38, 85%, 45%, 0.35) 6px
  );
  box-shadow: inset 0 0 0 1.5px var(--warning);
}
body .cal-tl-meta.cal-tl-meta-clash {
  color: var(--warning);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
}
body .cal-tl-meta.cal-tl-meta-clash::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--warning);
  animation: calClashPulse 1.6s ease-in-out infinite;
}
@keyframes calClashPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(1.4); }
}

/* ── Free-slot quick-add strip ── */
body .cal-tl-quickadd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 10px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  background: hsla(145, 60%, 50%, 0.08);
  border: 1px dashed hsla(145, 60%, 40%, 0.35);
  animation: fadeSlideIn .18s ease;
}
body .cal-tl-qa-label {
  font-size: 0.75rem;
  color: var(--success);
  font-weight: 600;
  flex: 1;
}
body .cal-tl-qa-btn {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--primary);
  background: transparent;
  color: var(--primary);
  cursor: pointer;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
body .cal-tl-qa-btn:hover {
  background: var(--primary);
  color: #fff;
}

/* ── Conflict banner — real alert card at the top of the day view ── */
body .cal-clash-banner {
  margin: 4px 0 14px;
  padding: 14px;
  border-radius: var(--radius-md);
  /* Warning, not error — owners with two teams double-book on purpose; red read as "broken" and generated support tickets */
  background: linear-gradient(135deg, hsla(38, 90%, 50%, 0.09), hsla(38, 90%, 50%, 0.02));
  border: 1px solid hsla(38, 80%, 45%, 0.35);
  border-left: 4px solid var(--warning);
  animation: calFadeUp 0.28s ease both;
}
body .cal-clash-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
body .cal-clash-head > .material-symbols-rounded {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--warning);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-variation-settings: 'FILL' 1, 'wght' 700;
  flex-shrink: 0;
}
body .cal-clash-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--warning);
  line-height: 1.2;
}
body .cal-clash-sub {
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin-top: 3px;
  line-height: 1.4;
}
body .cal-clash-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body .cal-clash-group {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}
body .cal-clash-time {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--danger);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
  text-transform: uppercase;
}
body .cal-clash-ev {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 4px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.12s;
}
body .cal-clash-ev + .cal-clash-ev {
  border-top: 1px dashed var(--border);
}
body .cal-clash-ev:hover { background: var(--muted); }
body .cal-clash-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
body .cal-clash-body { min-width: 0; flex: 1; }
body .cal-clash-who {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body .cal-clash-where {
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body .cal-cell-events {
  display: none;
  flex-direction: column;
  gap: 1px;
  margin-top: 2px;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

body .cal-event-chip {
  font-size: 0.58rem;
  font-weight: 600;
  line-height: 1.15;
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

body .cal-chip-more {
  color: var(--text-muted);
}

/* ── Agenda ── */
body .cal-agenda {
  padding: 4px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body .cal-agenda-empty {
  text-align: center;
  padding: 36px 16px;
  color: var(--text-muted);
}

body .cal-agenda-empty .material-symbols-rounded {
  font-size: 36px;
  display: block;
  margin-bottom: 8px;
}

body .cal-agenda-group {
  animation: calFadeUp 0.35s ease both;
}

body .cal-agenda-date {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-muted);
  padding: 8px 0 5px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}

body .cal-today-badge {
  font-size: 0.6rem;
  font-weight: 700;
  background: var(--primary);
  color: #fff;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

body .cal-agenda-item {
  display: flex;
  align-items: stretch;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.25s ease;
}

body .cal-agenda-item:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 16px hsla(200, 80%, 44%, 0.12);
  transform: translateY(-2px);
}

body .cal-agenda-bar {
  width: 4px;
  flex-shrink: 0;
}

body .cal-agenda-body {
  flex: 1;
  padding: 10px 12px;
}

body .cal-agenda-title {
  font-weight: 700;
  font-size: 0.84rem;
  color: var(--text);
  margin-bottom: 3px;
}

body .cal-agenda-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  color: var(--text-secondary);
}

body .cal-agenda-meta .material-symbols-rounded {
  font-size: 13px;
  color: var(--text-muted);
}

body .cal-agenda-amount {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 0.84rem;
  color: var(--success);
}

/* ── Upcoming Strip ── */
body .cal-upcoming {
  margin-top: 14px;
  animation: calFadeUp 0.5s 0.2s ease both;
}

body .cal-upcoming-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

body .cal-upcoming-title .material-symbols-rounded {
  font-size: 17px;
  color: var(--primary);
}

body .cal-upcoming-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

body .cal-upcoming-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.25s ease;
}

body .cal-upcoming-item:hover {
  border-color: var(--primary);
  box-shadow: 0 2px 8px hsla(200, 80%, 44%, 0.10);
  transform: translateX(3px);
}

body .cal-upcoming-badge {
  width: 40px;
  min-height: 40px;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

body .cal-upcoming-badge .day {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
}

body .cal-upcoming-badge .ms {
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  opacity: 0.7;
}

body .cal-upcoming-info {
  flex: 1;
  min-width: 0;
}

body .cal-upcoming-info .title {
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body .cal-upcoming-info .client {
  font-size: 0.68rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body .cal-upcoming-amt {
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--success);
  flex-shrink: 0;
}

/* ── Side Panel (Desktop) ── */
body .cal-side-panel {
  width: 0;
  overflow: hidden;
  flex-shrink: 0;
  border-left: 0px solid var(--border);
  padding: 0;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s, border-width 0.3s, opacity 0.25s;
  opacity: 0;
}

body .cal-panel-open {
  width: 270px;
  padding: 18px;
  border-left-width: 1px;
  opacity: 1;
}

body .cal-panel-inner {
  min-width: 234px;
  animation: calFadeUp 0.25s ease both;
}

body .cal-side-date {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 3px;
}

body .cal-side-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: 14px;
}

body .cal-side-ev {
  padding: 11px;
  border-radius: var(--radius-sm);
  background: var(--muted);
  border: 1px solid var(--border);
  margin-bottom: 7px;
  cursor: pointer;
  transition: all 0.25s ease;
  animation: calFadeUp 0.25s ease both;
}

body .cal-side-ev:hover {
  border-color: var(--primary);
  background: hsla(200, 80%, 44%, 0.08);
}

body .cal-side-ev-type {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 5px;
  font-size: 0.65rem;
  font-weight: 600;
}

body .cal-side-ev-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

body .cal-side-ev-title {
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--text);
  margin-bottom: 3px;
}

body .cal-side-ev-client {
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin-bottom: 2px;
}

body .cal-side-ev-info {
  font-size: 0.7rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 3px;
  margin-bottom: 1px;
}

body .cal-side-ev-info .material-symbols-rounded {
  font-size: 12px;
}

/* ── Bottom Sheet (Mobile) ── */
body .cal-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: calFadeIn 0.2s ease;
}

body .cal-sheet {
  background: var(--card);
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 420px;
  max-height: 70vh;
  overflow-y: auto;
  animation: calSheetUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
/* Wave 3a: tabindex="-1" fallback focus container (used only when a sheet
   has no real interactive content to focus-in on) — no ring needed around
   the whole sheet, real rows/buttons inside show their own. */
body .cal-sheet:focus-visible {
  outline: none;
}

/* ─── Empty-state hint bar (new studios see the grid + this nudge) ─── */
body .cal-empty-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 10px 14px;
  background: var(--primary-50, rgba(99, 102, 241, 0.08));
  border: 1px solid var(--primary-100, rgba(99, 102, 241, 0.18));
  border-radius: 12px;
  color: var(--text-secondary);
  font-size: 0.82rem;
  line-height: 1.35;
}
body .cal-empty-hint .material-symbols-rounded {
  font-size: 1.15rem;
  color: var(--primary);
  flex-shrink: 0;
}

/* ─── Quick-create sheet (tap a date → quotation / order / rental) ─── */
body .cal-create-sheet .cal-sheet-sub { margin-bottom: 4px; }
body .cal-create-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px 20px;
}
body .cal-create-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 14px;
  background: var(--card);
  border: 1.5px solid var(--border, #e5e7eb);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  min-height: 64px;
  transition: border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
body .cal-create-btn:hover { border-color: var(--primary); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.06); }
body .cal-create-btn:active { transform: scale(0.985); }
body .cal-create-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  flex-shrink: 0;
}
body .cal-create-icon .material-symbols-rounded { font-size: 1.5rem; }
body .cal-create-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
body .cal-create-label { font-weight: 700; font-size: 0.92rem; color: var(--text-primary); }
body .cal-create-sub { font-size: 0.76rem; color: var(--text-muted, #9ca3af); margin-top: 2px; }
body .cal-create-chev { color: var(--text-muted, #cbd5e1); font-size: 1.3rem; flex-shrink: 0; }

/* footer "create on this date" button inside the day sheet */
body .cal-sheet-create-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(100% - 32px);
  margin: 8px 16px 18px;
  padding: 12px;
  background: var(--primary-50, rgba(99, 102, 241, 0.08));
  color: var(--primary);
  border: 1px dashed var(--primary);
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.86rem;
  cursor: pointer;
  min-height: 44px;
}
body .cal-sheet-create-btn .material-symbols-rounded { font-size: 1.2rem; }

body .cal-sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  margin: 12px auto 0;
}

body .cal-sheet-head {
  padding: 14px 20px 4px;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
}

body .cal-sheet-sub {
  padding: 0 20px;
  font-size: 0.72rem;
  color: var(--text-muted);
}

body .cal-sheet-content {
  padding: 10px 20px 24px;
}

body .cal-sheet-event {
  display: flex;
  align-items: stretch;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 7px;
  cursor: pointer;
  transition: all 0.15s;
}

body .cal-sheet-event:hover {
  border-color: var(--primary);
}

body .cal-sheet-bar {
  width: 4px;
  flex-shrink: 0;
}

body .cal-sheet-body {
  flex: 1;
  padding: 10px 12px;
}

body .cal-sheet-type {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 3px;
  font-size: 0.66rem;
  font-weight: 600;
}

body .cal-sheet-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

body .cal-sheet-client {
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--text);
}

body .cal-sheet-meta {
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 3px;
}

body .cal-sheet-meta .material-symbols-rounded {
  font-size: 13px;
}

body .cal-sheet-amount {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 0.84rem;
  color: var(--success);
}

/* Desktop layout */
body .cal-desktop {
  display: flex;
}

body .cal-desktop .cal-main {
  flex: 1;
}

body .cal-desktop .cal-side-panel {
  display: block;
}

body .cal-desktop .cal-cell {
  min-height: 80px;
  padding: 5px 6px;
}

body .cal-desktop .cal-cell-events {
  display: flex;
}

body .cal-desktop .cal-grid-wrap {
  padding: 10px 14px 14px;
}

/* ── Calendar Animations ── */
@keyframes calFadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes calCellPop {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(6px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes calTodayPulse {

  0%,
  100% {
    box-shadow: 0 3px 10px hsla(200, 80%, 44%, 0.3);
  }

  50% {
    box-shadow: 0 3px 18px hsla(200, 80%, 44%, 0.3), 0 0 0 6px hsla(200, 80%, 44%, 0.08);
  }
}

@keyframes calFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes calSheetUp {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

/* ── Month multi-day span bars — grid-placed SIBLINGS of the cells (explicit
   grid-row/column), so one bar runs continuously across the 4px cell gaps.
   Cells in bar-carrying weeks reserve the stripe via .cal-span-spacer. ── */
body .cal-span-spacer {
  display: block;
  flex-shrink: 0;
  height: 16px;
  pointer-events: none;
}

body .cal-span-spacer.s2 {
  height: 25px;
}

body .cal-span-bar {
  position: relative;
  /* Above the cells' 3D hover lift (z-index 5) — with the bar below it, half
     the bar vanished behind whichever cell was hovered */
  z-index: 6;
  align-self: start;
  height: 6px;
  /* 28px clears the today-badge circle (24px + cell padding) — bars are
     siblings above the cell's stacking context, so they can't tuck under it */
  margin-top: calc(28px + (var(--lane) * 9px));
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: var(--ec);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  animation: calFadeIn 0.3s ease both;
  transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

/* Rounded cap = the run truly starts/ends here (with breathing room from the
   cell edge); a squared flush edge = continues past what you see. */
body .cal-span-bar.cap-l {
  margin-left: 4px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

body .cal-span-bar.cap-r {
  margin-right: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

body .cal-span-bar:hover,
body .cal-span-bar:focus-visible {
  filter: brightness(1.12);
  transform: translateY(-1px) scaleY(1.18);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  outline: none;
}

body .cal-span-bar:active {
  transform: translateY(0) scaleY(1.05);
  transition-duration: 0.06s;
}

body .cal-span-bar:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

/* Mobile bars are too thin for text — the tap/hover title carries the detail */
body .cal-span-label {
  display: none;
}

@media (min-width: 768px) {
  body .cal-span-spacer {
    height: 22px;
  }

  body .cal-span-spacer.s2 {
    height: 38px;
  }

  body .cal-span-bar {
    height: 14px;
    margin-top: calc(29px + (var(--lane) * 17px));
    padding: 0 7px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
  }

  body .cal-span-bar.cap-l {
    margin-left: 5px;
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
  }

  body .cal-span-bar.cap-r {
    margin-right: 5px;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
  }

  body .cal-span-label {
    display: block;
    font-size: 0.58rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ── Week view — 7 day columns × hourly slots 8a–11p. Empty slots ARE the
   feature: visible free capacity for taking more bookings. ── */
body .cal-week-wrap {
  padding: 10px 8px 14px;
}

body .cal-week-head,
body .cal-week-nt,
body .cal-week-body {
  display: grid;
  grid-template-columns: 30px repeat(7, minmax(0, 1fr));
  gap: 2px;
}

body .cal-week-head {
  margin-bottom: 6px;
}

body .cal-week-nt {
  margin-bottom: 4px;
}

body .cal-wk-gutter {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.5rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

body .cal-wk-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-height: 44px;
  padding: 5px 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

body .cal-wk-day:hover,
body .cal-wk-day:focus-visible {
  border-color: var(--primary);
}

body .cal-wk-day-name {
  font-size: 0.56rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

body .cal-wk-day-num {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

body .cal-wk-day.is-today {
  border-color: var(--primary);
  background: var(--primary-50);
}

body .cal-wk-day.is-today .cal-wk-day-num {
  color: var(--primary);
}

body .cal-wk-nt-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

body .cal-wk-nt-chip {
  border: none;
  font-family: inherit;
  font-size: 0.56rem;
  font-weight: 700;
  line-height: 1.1;
  padding: 3px 4px;
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  cursor: pointer;
}

body .cal-wk-times {
  display: flex;
  flex-direction: column;
}

body .cal-wk-time {
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 2px;
  font-size: 0.54rem;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

body .cal-wk-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--radius-sm);
}

body .cal-wk-col.is-today {
  background: var(--primary-50);
}

body .cal-wk-slot {
  height: 34px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 1px;
  border-top: 1px solid var(--border-light);
  overflow: hidden;
  cursor: pointer;
}

body .cal-wk-slot:hover {
  background: var(--muted);
}

body .cal-wk-ev {
  display: block;
  flex: 1;
  min-width: 0;
  min-height: 13px;
  border: none;
  font-family: inherit;
  text-align: left;
  font-size: 0.56rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 2px 4px;
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}

/* Mobile columns are ~44px wide — time only; the name shows from tablet up */
body .cal-wk-ev-name {
  display: none;
}

body .cal-wk-more {
  color: var(--text-muted);
  background: var(--muted);
  box-shadow: none;
}

@media (min-width: 768px) {

  body .cal-week-head,
  body .cal-week-nt,
  body .cal-week-body {
    grid-template-columns: 44px repeat(7, minmax(0, 1fr));
    gap: 3px;
  }

  body .cal-wk-time,
  body .cal-wk-slot {
    height: 38px;
  }

  body .cal-wk-time {
    font-size: 0.6rem;
  }

  body .cal-wk-ev {
    font-size: 0.62rem;
  }

  body .cal-wk-ev-name {
    display: inline;
  }

  body .cal-desktop .cal-week-wrap {
    padding: 10px 14px 14px;
  }
}

/* ── Fetch in flight — the grid paints instantly from date math, events are
   still loading. Subtle pulse instead of a blank card. ── */
body .cal-loading .cal-grid,
body .cal-loading .cal-week-body,
body .cal-loading .cal-agenda {
  animation: calLoadingPulse 1.2s ease-in-out infinite;
}

@keyframes calLoadingPulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.55;
  }
}

/* ── Clients UI polish: icon-only row CTAs (tooltips via data-tip), ONE
   header on mobile client detail, logout moves to Settings on phones. ── */

/* Client-detail tab strip: 4 icon+label tabs can't fit 375px as equal-width
   flex — "Notes" was clipped mid-letter. Content-sized nowrap tabs in a
   swipeable strip (scrollbar hidden); on wide screens grow fills as before. */
body .cd-tabs {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

body .cd-tabs::-webkit-scrollbar {
  display: none;
}

body .cd-tab {
  flex: 1 0 auto;
  white-space: nowrap;
  padding: 11px 10px;
}

/* ≤420px: labels-only — all four tabs fit with no scroll; icons add nothing
   the words don't already say */
@media (max-width: 420px) {

  body .cd-tab .material-symbols-rounded {
    display: none;
  }

  body .cd-tab {
    flex: 1 1 auto;
    padding: 11px 6px;
  }
}

/* Settings logout row — phone home for logout; desktop keeps the header icon */
.settings-logout-row {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  margin: 14px 0 4px;
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--danger, #ef4444);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}

.settings-logout-row:active {
  background: rgba(239, 68, 68, 0.08);
}

@media (max-width: 767px) {

  /* Phone: logout lives in Settings, not the top bar */
  #logoutBtn {
    display: none;
  }

  .settings-logout-row {
    display: flex;
  }

  /* Client detail: app header owns back + title (App.setContextBack) — the
     in-page bar collapses to just the edit/merge icons floating over the
     profile's top-right, so there's ONE header, not two. */
  .client-detail-page .detail-nav {
    position: relative;
    top: auto;
    background: transparent;
    padding: 4px 10px 0;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: -46px;
    z-index: 5;
  }

  .client-detail-page .detail-back-btn,
  .client-detail-page .detail-nav-title {
    display: none;
  }
}


/* ─────────────────────────────────────────────────────
   CLIENT LIST / CRM
   ───────────────────────────────────────────────────── */

.client-list {
  display: flex;
  flex-direction: column;
}

.client-row {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-lg) var(--space-xl);
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.client-row:hover {
  background: var(--muted);
}

.client-row:active {
  transform: scale(0.98);
  background: var(--primary-50);
  background: color-mix(in srgb, var(--card) 95%, var(--primary) 5%);
}

.client-row:last-child {
  border-bottom: none;
}

.client-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--primary-100);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.client-info {
  flex: 1;
  min-width: 0;
}

.client-name {
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.client-phone {
  font-size: 0.8rem;
  color: var(--muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-balance {
  text-align: right;
  flex-shrink: 0;
}

.client-balance .amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
}

.client-balance .amount.due {
  color: var(--destructive);
}

.client-balance .amount.advance {
  color: var(--success);
}

.client-balance .amount.clear {
  color: var(--text-muted);
}

.client-balance .balance-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}


/* ─────────────────────────────────────────────────────
   UTILITIES
   ───────────────────────────────────────────────────── */

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-muted {
  color: var(--muted-foreground);
}

.text-primary {
  color: var(--primary);
}

.text-success {
  color: var(--success);
}

.text-danger {
  color: var(--destructive);
}

.text-sm {
  font-size: 0.82rem;
}

.text-xs {
  font-size: 0.75rem;
}

.text-lg {
  font-size: 1.1rem;
}

.fw-500 {
  font-weight: 500;
}

.fw-600 {
  font-weight: 600;
}

.fw-700 {
  font-weight: 700;
}

.mt-sm {
  margin-top: var(--space-sm);
}

.mt-md {
  margin-top: var(--space-md);
}

.mt-lg {
  margin-top: var(--space-lg);
}

.mt-xl {
  margin-top: var(--space-xl);
}

.mt-2xl {
  margin-top: var(--space-2xl);
}

.mb-sm {
  margin-bottom: var(--space-sm);
}

.mb-md {
  margin-bottom: var(--space-md);
}

.mb-lg {
  margin-bottom: var(--space-lg);
}

.mb-xl {
  margin-bottom: var(--space-xl);
}

.mb-2xl {
  margin-bottom: var(--space-2xl);
}

.d-flex {
  display: flex;
}

.d-grid {
  display: grid;
}

.align-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-sm {
  gap: var(--space-sm);
}

.gap-md {
  gap: var(--space-md);
}

.gap-lg {
  gap: var(--space-lg);
}

.hidden {
  display: none !important;
}

/* .sr-only moved to a11y.css */

/* Empty State */
.empty-state {
  text-align: center;
  padding: var(--space-4xl) var(--space-2xl);
}

.empty-state .material-symbols-rounded {
  font-size: 3rem;
  color: var(--border);
  margin-bottom: var(--space-lg);
}

.empty-state p {
  color: var(--text-muted);
  font-size: 0.92rem;
}

/* Guided Empty States (with CTA button) */
.empty-state-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding: 12px 24px;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  border: none;
  color: #fff;
  background: var(--primary);
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
}

.empty-state-cta .material-symbols-rounded {
  font-size: 1.1rem;
  color: #fff;
  margin-bottom: 0;
}

/* Clients — first-run empty state (scoped; Stripe/Linear/Razorpay pattern) */
.cl-empty {
  grid-column: 1 / -1; /* span the full clients-cards grid (2/3-col on desktop) so it centers, not pinned to col 1 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: min(58vh, 480px);
  padding: 24px 20px;
}
.cl-empty-illus {
  margin-bottom: 22px;
  filter: drop-shadow(0 10px 24px hsla(202, 80%, 40%, 0.18));
}
.cl-empty-illus svg { display: block; }
.cl-empty-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.cl-empty-desc {
  margin: 8px auto 0;
  max-width: 320px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-muted);
}
.cl-empty-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 300px;
  margin-top: 26px;
}
.cl-empty-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 50px;
  padding: 13px 28px;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  border: none;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, hsl(200, 85%, 50%), hsl(204, 82%, 40%));
  box-shadow: 0 10px 24px -8px hsla(202, 85%, 40%, 0.55), inset 0 1px 0 hsla(0, 0%, 100%, 0.22);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.cl-empty-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -8px hsla(202, 85%, 40%, 0.6), inset 0 1px 0 hsla(0, 0%, 100%, 0.22);
}
.cl-empty-primary:active { transform: translateY(0); }
.cl-empty-primary .material-symbols-rounded { font-size: 1.2rem; color: #fff; }
.cl-empty-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 9px 20px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-full);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.cl-empty-secondary:hover {
  border-color: var(--primary);
  background: var(--primary-100);
}
.cl-empty-secondary .material-symbols-rounded { font-size: 1.05rem; color: var(--primary); }
@media (max-width: 480px) {
  .cl-empty { min-height: 54vh; padding: 16px; }
  .cl-empty-title { font-size: 1.12rem; }
  .cl-empty-illus svg { width: 104px; height: 104px; }
}
@media (prefers-reduced-motion: reduce) {
  .cl-empty-primary { transition: none; }
  .cl-empty-primary:hover { transform: none; }
}

/* Welcome Screen (new users) */
.dash-welcome {
  padding: 24px 16px;
  max-width: 480px;
  margin: 0 auto;
}

.dash-welcome-header {
  text-align: center;
  margin-bottom: 32px;
}

.dash-welcome-header h1 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.dash-welcome-header p {
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.dash-welcome-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}

.dash-welcome-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--border);
  background: var(--card);
  cursor: pointer;
  text-align: left;
  transition: transform 0.1s, box-shadow 0.15s;
  min-height: 72px;
}

.dash-welcome-btn:active {
  transform: scale(0.98);
}

.dash-welcome-btn-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dash-welcome-btn-icon .material-symbols-rounded {
  font-size: 1.6rem;
}

.dash-welcome-btn-text h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.dash-welcome-btn-text p {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin: 0;
}

.dash-welcome-footer {
  text-align: center;
  padding: 16px;
  font-size: 0.85rem;
  color: var(--text-muted);
  border-top: 1px dashed var(--border);
}
.dash-welcome-skip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 16px auto 0;
  padding: 10px 24px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
  min-height: 44px;
}
.dash-welcome-skip:hover { background: var(--background); color: var(--text-primary); }

/* Onboarding Progress Checklist */
.onb-checklist {
  margin: 8px 0 12px;
  padding: 16px;
  border-radius: var(--radius-lg);
  background: var(--card);
  border: 1.5px solid var(--primary);
  border-left: 4px solid var(--primary);
}
.onb-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
}
.onb-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}
.onb-subtitle {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 2px;
}
.onb-progress {
  height: 4px;
  background: var(--gray-100);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 14px;
}
.onb-progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 4px;
  transition: width 0.4s ease;
}
.onb-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.onb-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  transition: background 0.15s;
}
.onb-step:not(.onb-done):hover {
  background: var(--gray-50);
}
.onb-step.onb-done .onb-label {
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-color: var(--border);
}
.onb-check {
  font-size: 1.2rem;
  flex-shrink: 0;
}
.onb-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-primary);
}
.onb-cta {
  font-weight: 600;
}

/* Jaldi Order Section */
.jaldi-section {
  margin-bottom: var(--space-lg);
  padding: 0;
}

.jaldi-section h3 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
  padding: 0 4px;
}

.jaldi-pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}

.jaldi-pills::-webkit-scrollbar {
  display: none;
}

.jaldi-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--border);
  background: var(--card);
  cursor: pointer;
  min-width: 80px;
  flex-shrink: 0;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}

.jaldi-pill:active {
  background: var(--primary-50, rgba(14, 165, 233, 0.08));
  border-color: var(--primary);
}

.jaldi-pill .material-symbols-rounded {
  font-size: 1.4rem;
}

.jaldi-pill span:last-child {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.2;
  white-space: nowrap;
}

/* Spinner */
.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.spin {
  animation: spin 700ms linear infinite;
  display: inline-block;
}

.spinner-overlay {
  position: absolute;
  inset: 0;
  background: hsla(0, 0%, 100%, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: inherit;
}

/* Rupee */
.rupee::before {
  content: '₹';
}


/* ─────────────────────────────────────────────────────
   COLLECT PAYMENT (Paisa Vasool) — Redesigned
   ───────────────────────────────────────────────────── */

/* ── Page container ── */
.cp-page {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 0 120px;
}

/* ── Hero header with gradient ── */
.cp-hero {
  position: relative;
  padding: 24px 16px 20px;
  margin-bottom: 4px;
  overflow: hidden;
}

.cp-hero-glow {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, hsla(142, 70%, 45%, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.cp-hero-content {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.cp-hero-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--success) 0%, hsl(160, 60%, 40%) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 14px hsla(142, 70%, 45%, 0.25);
}

.cp-hero-icon-wrap .material-symbols-rounded {
  font-size: 1.6rem;
  color: #fff;
}

.cp-hero-title {
  font-family: 'Plus Jakarta Sans', 'Outfit', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  margin: 0;
  line-height: 1.2;
  color: var(--foreground);
}

.cp-hero-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: .82rem;
  color: var(--text-secondary);
  margin: 3px 0 0;
}

/* ── Search bar ── */
.cp-search-wrap {
  display: flex;
  align-items: center;
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 0 14px;
  min-height: 52px;
  gap: 10px;
  transition: border-color .25s, box-shadow .25s, background .25s;
}

.cp-search-wrap:focus-within {
  /* P10: was border-color:var(--border) — identical to the unfocused default
     two lines up, so focus was visually silent. */
  border-color: var(--primary);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  background: var(--card);
}

.cp-search-icon {
  font-size: 1.35rem;
  color: var(--text-secondary);
  flex-shrink: 0;
  transition: color .25s;
}

.cp-search-wrap:focus-within .cp-search-icon {
  color: var(--text-primary);
}

.cp-search-input {
  flex: 1;
  border: none;
  background: none;
  padding: 14px 0;
  font-family: 'Plus Jakarta Sans', 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  outline: none;
  color: var(--foreground);
  min-width: 0;
}

.cp-search-input::placeholder {
  color: var(--text-secondary);
  opacity: .55;
  font-weight: 400;
}

.cp-search-clear {
  background: var(--secondary);
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--text-secondary);
  border-radius: 50%;
  display: flex;
  width: 32px;
  height: 32px;
  min-width: 32px;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}

.cp-search-clear:hover {
  background: var(--danger);
  color: #fff;
}

.cp-search-clear:active {
  transform: scale(.9);
}

.cp-search-clear .material-symbols-rounded {
  font-size: 1rem;
}

/* ── Body ── */
.cp-body {
  min-height: 200px;
  padding: 0 16px;
}

/* ── Loading state with dots ── */
.cp-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 56px 0;
  color: var(--text-secondary);
  font-family: 'DM Sans', sans-serif;
  font-size: .85rem;
}

.cp-loading-dots {
  display: flex;
  gap: 6px;
}

.cp-loading-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  animation: cpDotPulse .6s ease-in-out infinite alternate;
}

.cp-loading-dots span:nth-child(2) {
  animation-delay: .15s;
}

.cp-loading-dots span:nth-child(3) {
  animation-delay: .3s;
}

@keyframes cpDotPulse {
  0% {
    opacity: .3;
    transform: scale(.8);
  }

  100% {
    opacity: 1;
    transform: scale(1.1);
  }
}

/* ── Empty state ── */
.cp-empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-secondary);
}

.cp-empty-illustration {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--gray-50);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.cp-empty-illustration .material-symbols-rounded {
  font-size: 2.4rem;
  color: var(--text-muted);
}

.cp-empty-illustration.cp-empty-nope .material-symbols-rounded {
  color: var(--warning);
}

.cp-error .cp-empty-illustration .material-symbols-rounded {
  color: var(--danger);
}

.cp-empty-title {
  font-family: 'DM Sans', sans-serif;
  font-size: .95rem;
  font-weight: 600;
  color: var(--foreground);
  margin: 0 0 4px;
}

.cp-empty-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: .82rem;
  color: var(--text-secondary);
  margin: 0;
}

/* ── Section label ── */
.cp-section-label {
  font-family: 'DM Sans', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-secondary);
  padding: 12px 4px 6px;
}

/* ── Client search results ── */
.cp-client-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cp-client-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  cursor: pointer;
  border-radius: 14px;
  background: var(--card);
  border: 1.5px solid transparent;
  transition: all .2s;
  animation: cpFadeUp .3s ease-out both;
}

.cp-client-row:hover {
  background: var(--primary-50);
  border-color: var(--primary-100);
}

.cp-client-row:active {
  transform: scale(.98);
}

@keyframes cpFadeUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cp-avatar {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  flex-shrink: 0;
  font-family: 'Plus Jakarta Sans', 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: .88rem;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cp-client-info {
  flex: 1;
  min-width: 0;
}

.cp-client-name {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: .95rem;
  color: var(--foreground);
}

.cp-client-phone {
  font-family: 'DM Sans', sans-serif;
  font-size: .8rem;
  color: var(--text-secondary);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.cp-client-arrow {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--gray-50);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cp-client-arrow .material-symbols-rounded {
  font-size: 1.1rem;
  color: var(--text-secondary);
}

/* ── Profile card (after selecting client) ── */
.cp-profile-card {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 12px hsla(210, 20%, 50%, 0.06);
}

.cp-profile-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.cp-profile-avatar {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  font-family: 'Plus Jakarta Sans', 'DM Sans', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cp-profile-info {
  flex: 1;
}

.cp-profile-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--foreground);
}

.cp-profile-phone {
  font-family: 'DM Sans', sans-serif;
  font-size: .82rem;
  color: var(--text-secondary);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.cp-back-btn {
  background: var(--gray-50);
  border: 1.5px solid var(--border);
  width: 40px;
  height: 40px;
  min-width: 40px;
  cursor: pointer;
  color: var(--foreground);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  flex-shrink: 0;
}

.cp-back-btn:hover {
  background: var(--border);
}

.cp-back-btn:active {
  transform: scale(.92);
}

.cp-back-btn .material-symbols-rounded {
  font-size: 1.15rem;
}

/* ── Stats row ── */
.cp-stats-row {
  display: flex;
  gap: 8px;
}

.cp-stat-item {
  flex: 1;
  padding: 10px;
  border-radius: 12px;
  text-align: center;
}

.cp-stat-due {
  background: hsla(0, 72%, 51%, 0.06);
}

.cp-stat-credit {
  background: hsla(142, 70%, 45%, 0.06);
}
.cp-stat-credit.cp-stat-muted {
  background: var(--gray-50);
  opacity: 0.55;
}
.cp-stat-credit.cp-stat-muted .cp-stat-value {
  color: var(--text-muted);
}

.cp-stat-last {
  background: var(--gray-50);
}

.cp-stat-label {
  font-family: 'DM Sans', sans-serif;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text-secondary);
  margin-bottom: 3px;
}

.cp-stat-value {
  font-family: 'Plus Jakarta Sans', 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
}

.cp-stat-due .cp-stat-value {
  color: var(--danger);
}

.cp-stat-credit .cp-stat-value {
  color: var(--success);
}

.cp-stat-last .cp-stat-value {
  color: var(--foreground);
  font-size: .92rem;
}

.cp-stat-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: .68rem;
  color: var(--text-secondary);
  margin-top: 1px;
}

/* ── All clear card ── */
.cp-all-clear-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  background: hsla(142, 70%, 45%, 0.06);
  border: 1.5px solid hsla(142, 70%, 45%, 0.15);
  border-radius: 16px;
  margin-bottom: 16px;
}

.cp-clear-icon .material-symbols-rounded {
  font-size: 2.4rem;
  color: var(--success);
}

.cp-clear-title {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: .95rem;
  color: var(--success);
  margin: 0;
}

.cp-clear-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: .82rem;
  color: var(--text-secondary);
  margin: 2px 0 0;
}


/* ─────────────────────────────────────────────────────
   WALK-IN ORDERS — Wizard & Cards
   ───────────────────────────────────────────────────── */

/* Wizard fixed bottom nav */
.wi-wizard-nav {
  position: fixed;
  bottom: 0;
  left: var(--sidebar-width);
  right: 0;
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  background: color-mix(in srgb, var(--card) 85%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-light);
  z-index: 20;
}
.wi-wizard-nav .btn {
  border-radius: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  min-height: 48px;
}
.wi-wizard-nav #wiPrev {
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  flex: 0 0 48px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wi-wizard-nav #wiNext {
  flex: 1 1 0;
  font-size: 0.95rem;
  margin-right: 52px;
}

/* Item rows */
.wi-item-row {
  padding: 10px;
  margin-bottom: 8px;
  border-radius: var(--radius-md);
  background: var(--bg);
  border: 1px solid var(--border-light);
}

.wi-item-top {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
}

.wi-item-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.wi-item-field label {
  display: block;
  margin-bottom: 2px;
}

/* Progressive disclosure expand section */
.wi-item-expand-toggle {
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Per-item status pill (tap target) */
.wi-item-status-pill {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: opacity 0.15s;
}

/* Order card payment row */
.wi-card-payment {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border-color);
  font-size: 0.82rem;
  flex-wrap: wrap;
}

.wi-card-amount {
  font-size: 0.88rem;
}

.wi-card-paid {
  color: var(--success);
}

.wi-card-due {
  color: var(--danger);
  font-weight: 600;
}

/* Filter tabs horizontal scroll */
.wi-filter-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: var(--space-lg);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  mask-image: linear-gradient(to right, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, black 92%, transparent);
}

.wi-filter-tabs::-webkit-scrollbar {
  display: none;
}

/* Detail modal action buttons */
.wi-detail-actions {
  display: flex;
  gap: 8px;
  width: 100%;
  justify-content: flex-end;
  flex-wrap: wrap;
}


/* ─────────────────────────────────────────────────────
   RESPONSIVE — Mobile (<= 768px)
   ───────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    z-index: 1050;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  /* Sidebar close button — mobile only */
  .sidebar-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: var(--glass-bg);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    margin-left: auto;
    -webkit-tap-highlight-color: transparent;
  }

  .sidebar-close-btn:active {
    background: var(--hover);
    transform: scale(0.92);
  }

  /* Sidebar backdrop overlay for mobile */
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1049;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
  }

  .sidebar-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }

  .main-content {
    margin-left: 0;
  }

  .menu-toggle {
    display: flex;
  }

  .bottom-nav {
    display: block;
    height: var(--bottom-nav-height);
  }

  .bottom-nav-item span:last-child {
    font-size: 0.75rem;
  }

  .bottom-nav-fab {
    width: 48px;
    height: 48px;
  }

  .page-content {
    padding: var(--space-lg);
    padding-bottom: calc(var(--bottom-nav-height) + var(--space-xl));
  }

  .total-bar {
    left: 0;
    bottom: var(--bottom-nav-height);
  }

  /* Wizard */
  .wizard-stepper {
    padding: var(--space-md) var(--space-lg);
  }

  /* Walk-in wizard nav sits above bottom-nav */
  .wi-wizard-nav {
    left: 0;
    bottom: var(--bottom-nav-height);
    padding: 10px 16px;
  }

  /* Detail modal action footer: 4-column iOS-style icon+label tile grid.
     7 buttons fit in 2 rows (~140px tall total) instead of 400px vertical
     stack. Each tile has icon on top, short label below. Primary button
     spans all 4 columns as a full-width accent row. */
  .modal-footer .wi-detail-actions,
  .modal-overlay .wi-detail-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    width: 100%;
    padding: 2px 0;
  }

  .modal-footer .wi-detail-actions .btn,
  .modal-overlay .wi-detail-actions .btn {
    width: 100%;
    min-height: 62px;
    padding: 8px 4px;
    font-size: 0.68rem;
    font-weight: 600;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    line-height: 1.1;
    white-space: normal;
    text-align: center;
    word-break: break-word;
  }

  /* Primary action: full-width accent row spanning all 4 columns */
  .modal-footer .wi-detail-actions .btn-primary,
  .modal-overlay .wi-detail-actions .btn-primary {
    grid-column: 1 / -1;
    font-size: 0.88rem;
    font-weight: 700;
    min-height: 48px;
    flex-direction: row;
    gap: 6px;
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
  }

  /* Icons inside the tiles — larger for tap affordance, label below */
  .modal-footer .wi-detail-actions .btn .material-symbols-rounded,
  .modal-overlay .wi-detail-actions .btn .material-symbols-rounded {
    font-size: 1.35rem;
    margin: 0;
  }
  .modal-footer .wi-detail-actions .btn-primary .material-symbols-rounded,
  .modal-overlay .wi-detail-actions .btn-primary .material-symbols-rounded {
    font-size: 1.1rem;
  }

  .step-label {
    display: none;
  }

  .step-item.active .step-label {
    display: block;
  }

  /* Stepper already shows progress — hide redundant "Step X of Y" text on narrow */
  .wiz-step-progress {
    display: none;
  }

  .wizard-body {
    padding: 14px;
  }

  .wizard-footer {
    padding: 10px 14px;
  }

  /* Grids */
  .dash-grid {
    grid-template-columns: 1fr !important;
  }

  .dash-grid>.card[style*="grid-row:1/3"],
  .dash-grid>#miniCalendarSlot,
  .dash-grid>.card[style*="grid-row:2"] {
    grid-row: auto !important;
    grid-column: auto !important;
  }

  #miniCalendarSlot {
    order: 1;
  }

  .dash-grid>.card[style*="grid-row:1/3"] {
    order: 0;
  }

  .dash-grid>.card[style*="grid-row:2"] {
    order: 2;
  }

  .package-grid {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .itinerary-row {
    grid-template-columns: 1fr;
  }

  .plan-options {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Calendar */
  .dash-grid .card .calendar-grid {
    overflow-x: auto;
  }

  /* Phase 6 Calendar Widget Mobile Fixes */
  .mini-cal-day,
  .mini-cal-empty {
    min-width: 40px;
    min-height: 40px;
  }

  .mini-cal-daynum {
    font-size: 12px;
    line-height: 1;
  }

  .calendar-day {
    min-height: 48px;
    padding: var(--space-xs);
  }

  .calendar-day .day-number {
    font-size: 0.75rem;
  }

  /* Toast */
  .toast-container {
    top: auto;
    bottom: calc(var(--bottom-nav-height) + var(--space-xl));
    right: var(--space-lg);
    left: var(--space-lg);
  }

  .toast {
    max-width: 100%;
  }

  /* Modal → Bottom Sheet on mobile */
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .modal-panel {
    border-radius: 16px 16px 0 0;
    max-height: 90dvh;
    max-width: 100%;
    transform: translateY(100%);
    transition: transform var(--transition-slow);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .modal-overlay.open .modal-panel {
    transform: translateY(0);
  }

  /* Drag handle indicator for bottom sheet modal */
  .modal-header::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin: 0 auto var(--space-md);
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
  }

  .modal-header {
    position: relative;
    padding: var(--space-md) var(--space-lg);
    padding-top: calc(var(--space-xl) + 8px);
  }

  .modal-body {
    padding: var(--space-lg);
  }

  .modal-footer {
    padding: var(--space-sm) var(--space-lg);
    padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
    gap: 6px;
  }

  /* Header */
  .app-header {
    padding: 0 var(--space-lg);
  }

  /* Mobile font size overrides */
  .form-label {
    font-size: 0.85rem;
  }

  .stat-label {
    font-size: 0.82rem;
  }

  .form-hint {
    font-size: 0.78rem;
  }
}


/* ─────────────────────────────────────────────────────
   RESPONSIVE — Small Mobile (<= 480px)
   ───────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-sm);
  }

  .stat-card {
    padding: var(--space-md);
  }

  .stat-icon {
    width: 40px;
    height: 40px;
  }

  .stat-icon .material-symbols-rounded {
    font-size: 1.15rem;
  }

  .stat-value {
    font-size: 1.25rem;
  }

  .plan-options {
    grid-template-columns: 1fr;
  }

  .quick-actions {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    padding-bottom: var(--space-sm);
    /* Scroll snap for horizontal quick actions */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-right: var(--space-2xl);
  }

  .quick-actions::-webkit-scrollbar {
    display: none;
  }

  /* Scroll snap on each quick action card */
  .quick-action-btn {
    scroll-snap-align: start;
    min-width: 100px;
    flex-shrink: 0;
    font-size: 0.75rem;
    padding: 8px;
  }

  /* Calendar day cells — minimum 44px touch target */
  .calendar-day {
    min-height: 44px;
  }

  .calendar-day .day-number {
    font-size: 0.75rem;
  }

  /* Calendar event dots — larger on small mobile */
  .calendar-dot {
    width: 6px;
    height: 6px;
  }

  /* Modal footer on very small screens: wrap buttons naturally instead
     of forcing a vertical stack. Short 2-button footers (Cancel/Confirm)
     sit side-by-side; long 5+ button footers wrap into multiple rows with
     equal flex sizing. Much less vertical sprawl than 1-per-row stack. */
  .modal-footer {
    flex-wrap: wrap;
    gap: 6px;
  }

  .modal-footer .btn {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 10px;
    font-size: 0.82rem;
  }

  /* Standalone primary actions in compact modals still want prominence */
  .modal-footer > .btn-primary:only-child,
  .modal-footer > .btn-primary:last-child:nth-child(1) {
    flex: 1 1 100%;
  }

  /* Client rows tighter */
  .client-row {
    padding: var(--space-md) var(--space-lg);
  }

  /* Card header/body tighter */
  .card-header {
    padding: var(--space-md) var(--space-lg);
  }

  .card-body {
    padding: var(--space-md) var(--space-lg);
  }

  /* Quick create sheet compact */
  .quick-create-action {
    padding: var(--space-md);
    min-height: 44px;
  }

  .quick-create-action span:last-child {
    font-size: 0.8rem;
  }

  /* Form groups tighter */
  .form-group {
    margin-bottom: var(--space-md);
  }

  .form-control {
    min-height: 44px;
    padding: var(--space-sm) var(--space-md);
  }

  /* Small mobile font size overrides */
  .form-label {
    font-size: 0.85rem;
  }

  .stat-label {
    font-size: 0.82rem;
  }

  .form-hint {
    font-size: 0.78rem;
  }

  /* Walk-in: item rows stack qty/rate tighter */
  .wi-item-bottom {
    grid-template-columns: 70px 1fr 80px;
    gap: 6px;
  }

  /* Walk-in: detail actions full stack on tiny screens */
  .wi-detail-actions {
    grid-template-columns: 1fr;
  }

  .wi-detail-actions .btn-primary {
    grid-column: auto;
  }

  /* Walk-in: card payment info wraps cleanly */
  .wi-card-payment {
    gap: 6px;
    font-size: 0.78rem;
  }
}


/* ─────────────────────────────────────────────────────
   RESPONSIVE — Ultra-Small Phones (<= 360px)
   ───────────────────────────────────────────────────── */

@media (max-width: 360px) {
  .page-content {
    padding: var(--space-md) !important;
  }

  .modal-panel {
    max-width: 96vw;
  }

  .modal-overlay {
    padding: var(--space-md);
  }

  /* Stack quick-create grid to 2 columns */
  .quick-create-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Stat cards tighter */
  .stat-card-mobile {
    padding: 10px;
    gap: 8px;
  }

  .stat-card-mobile-value {
    font-size: 1rem;
  }

  /* Finance stat cards */
  .finance-stats-grid {
    gap: 6px;
  }

  .finance-stat-card {
    padding: 10px;
  }

  .finance-stat-value {
    font-size: 1.05rem;
  }

  /* Total bar tighter */
  .total-bar {
    padding: 0 var(--space-lg);
  }

  .total-bar-amount {
    font-size: 1.1rem;
  }
}


/* ─────────────────────────────────────────────────────
   RESPONSIVE — Tablet (769px - 1024px)
   Collapsed icon-only sidebar
   ───────────────────────────────────────────────────── */

@media (min-width: 769px) and (max-width: 1024px) {
  .sidebar {
    width: 72px;
  }

  .sidebar .sidebar-brand h1,
  .sidebar .sidebar-brand small,
  .sidebar .nav-section-label,
  .sidebar .step-label,
  .sidebar .nav-item span:not(.material-symbols-rounded):not(.badge) {
    display: none;
  }

  .sidebar .sidebar-brand {
    justify-content: center;
    padding: var(--space-lg);
  }

  .sidebar .nav-item {
    justify-content: center;
    padding: var(--space-md);
  }

  .main-content {
    margin-left: 72px;
  }

  .total-bar {
    left: 72px;
  }

  .wi-wizard-nav {
    left: 72px;
  }
}


/* ─────────────────────────────────────────────────────
   PRINT
   ───────────────────────────────────────────────────── */

@media print {

  .sidebar,
  .bottom-nav,
  .app-header,
  .total-bar,
  .wizard-footer,
  .wi-wizard-nav {
    display: none !important;
  }

  .main-content {
    margin-left: 0 !important;
  }

  .page-content {
    padding: 0 !important;
    max-width: 100% !important;
  }

  body {
    background: white;
  }
}


/* ── Mini Calendar (Dashboard) ─────────────────────── */
.mini-calendar-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  border: 1px solid var(--border);
  box-sizing: border-box;
  max-width: 100%;
  overflow: visible;
}

body .color-legend-card {
  padding: 12px;
}

.legend-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.color-legend-card .legend-item {
  padding: 4px 0;
  font-size: 0.8rem;
}

.color-legend-card .legend-dot {
  width: 8px;
  height: 8px;
  min-width: 8px;
}

.mini-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}

.mini-cal-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-primary);
}

.mini-cal-nav {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.mini-cal-nav:hover {
  background: var(--primary);
  color: #fff;
}

.mini-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  width: 100%;
  box-sizing: border-box;
}

.mini-cal-dayname {
  text-align: center;
  font-size: clamp(8px, 1.1vw, 11px);
  font-weight: 600;
  color: var(--text-tertiary);
  padding: 4px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mini-cal-day,
.mini-cal-empty {
  aspect-ratio: 1 / 1;
  min-width: 0;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.mini-cal-day {
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  position: relative;
}

.mini-cal-day:hover {
  background: hsla(200, 80%, 44%, 0.08);
  transform: scale(1.05);
}

.mini-cal-day.today {
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  border-radius: 50%;
}

.mini-cal-day.today:hover {
  background: var(--primary-dark, hsl(200, 80%, 36%));
}

.mini-cal-day.has-events {
  font-weight: 600;
}

.mini-cal-daynum {
  font-size: clamp(9px, 1.5vw, 13px);
  line-height: 1;
  font-weight: 600;
}

.mini-cal-dots {
  display: flex;
  gap: 2px;
  position: absolute;
  bottom: 2px;
}

.mini-cal-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  flex-shrink: 0;
}


/* ── Day Popup Events ─────────────────────────────── */
.day-popup-event {
  transition: background 0.15s, transform 0.1s;
}

.day-popup-event:hover {
  background: hsla(200, 80%, 44%, 0.06) !important;
  transform: translateX(4px);
}

/* Limit day popup event list to scrollable area */
.modal-body:has(.day-popup-event) {
  max-height: 60vh;
  overflow-y: auto;
}

/* Limit visible dots on calendar day to 3 with overflow indicator */
.calendar-day .calendar-dot:nth-child(n+4) {
  display: none;
}

.calendar-day .calendar-dots-overflow {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  line-height: 1;
}

/* Mini-calendar: limit dots to 3 */
.mini-cal-dots .mini-cal-dot:nth-child(n+4) {
  display: none;
}


/* ── Tooltip System (? icons with Hindi text) ──────── */
.tooltip-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  vertical-align: middle;
  /* Prevent tooltip from stretching grid rows or breaking layout */
  flex-shrink: 0;
  line-height: 0;
}

/* Ensure form-group labels stay inline-flex when tooltip is appended */
.form-group label {
  display: inline-flex !important;
  align-items: center;
  gap: 0;
}

.tooltip-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  flex-shrink: 0;
  transition: background 0.15s;
}

.tooltip-icon:hover {
  background: var(--primary-dark, hsl(200, 80%, 36%));
}

.tooltip-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  /* Was background:var(--text-primary) + color:#fff. --text-primary is a NEAR-WHITE
     token in dark mode, so the bubble rendered as a pale grey box with white text
     on it - illegible. Surface tokens instead, so it inverts correctly per theme. */
  background: var(--card);
  color: var(--text-primary);
  border: 1px solid var(--border);
  padding: 7px 11px;
  border-radius: var(--radius-md);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
  white-space: normal;
  width: max-content;
  max-width: 240px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  z-index: 1100;
  pointer-events: none;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
  font-family: var(--font-family);
}

.tooltip-icon::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--border);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  z-index: 1100;
}

.tooltip-icon:hover::after,
.tooltip-icon:hover::before,
.tooltip-icon:focus::after,
.tooltip-icon:focus::before,
.tooltip-icon.tooltip-active::after,
.tooltip-icon.tooltip-active::before {
  opacity: 1;
  visibility: visible;
}


/* ── Plan Cards ───────────────────────────────────── */
.plans-section {
  margin-top: var(--space-2xl);
  text-align: center;
}

.plans-section h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--text-primary);
  margin-bottom: var(--space-lg);
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-md);
}

.plans-grid .plan-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}

.plans-grid .plan-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.plans-grid .plan-card.recommended {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}

.plan-card .plan-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
}

.plan-card .plan-price {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--primary);
  margin: var(--space-sm) 0;
}

.plan-card .plan-price small {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--text-tertiary);
}

.plan-card .plan-features {
  list-style: none;
  padding: 0;
  margin: var(--space-md) 0 0;
  font-size: 0.78rem;
  color: var(--text-secondary);
  text-align: left;
}

.plan-card .plan-features li {
  padding: 3px 0;
}

.plan-card .plan-features li::before {
  content: '\2713  ';
  color: var(--success);
  font-weight: 700;
}

.plan-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.plan-badge.trial {
  background: hsl(38, 92%, 90%);
  color: hsl(38, 92%, 35%);
}

.plan-badge.starter {
  background: hsl(200, 80%, 90%);
  color: hsl(200, 80%, 30%);
}

.plan-badge.pro {
  background: hsl(142, 70%, 90%);
  color: hsl(142, 70%, 30%);
}

.plan-badge.business {
  background: hsl(270, 70%, 90%);
  color: hsl(270, 70%, 30%);
}


/* ── Mobile Enhancements ──────────────────────────── */
@media (max-width: 768px) {
  .mini-cal-day {
    min-height: 40px;
  }

  .mini-cal-daynum {
    font-size: 0.7rem;
  }

  .mini-cal-dot {
    width: 3px;
    height: 3px;
  }

  .tooltip-icon::after {
    left: auto;
    right: 0;
    transform: none;
    max-width: 200px;
  }

  .tooltip-icon::before {
    left: auto;
    right: 8px;
    transform: none;
  }

  .plans-grid {
    grid-template-columns: 1fr;
  }

  /* Stat card text handled by container queries */

  /* Quick actions scroll indicator */
  .quick-actions {
    position: relative;
  }

  .quick-actions::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 32px;
    background: linear-gradient(to right, transparent, var(--background));
    pointer-events: none;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  }
}

@media (max-width: 480px) {
  .mini-cal-day {
    min-height: 36px;
  }

  .mini-cal-dayname {
    font-size: 0.75rem;
  }

  .plan-card {
    padding: var(--space-md);
  }

  .plan-card .plan-price {
    font-size: 1.1rem;
  }

  /* Profile menu plan info */
  .profile-plan-info {
    padding: var(--space-md);
  }
}

/* Total bar + bottom nav stacking — smooth transition instead of jarring hide */
@media (max-width: 768px) {
  .bottom-nav {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.25s ease;
  }

  body:has(.total-bar.visible) .bottom-nav,
  body:has(.wizard-wrap) .bottom-nav,
  body.wizard-active .bottom-nav {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
  }

  /* When wizard is open, total bar sits at true bottom (no bottom-nav offset) */
  body:has(.wizard-wrap) .total-bar,
  body.wizard-active .total-bar {
    left: 0;
  }

  /* Wizard footer IS the bottom nav bar on mobile — fixed, always visible */
  body.wizard-active .wizard-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 91;
    background: var(--primary-950, #0a1628);
    color: white;
    border-top: none;
    padding: 8px 12px;
    box-shadow: 0 -4px 24px hsla(205, 80%, 10%, 0.15);
  }
  body.wizard-active .wizard-footer .btn-ghost { color: rgba(255,255,255,0.8); }
  body.wizard-active .wizard-footer .btn-primary { background: #3b82f6; color: #fff; font-weight: 700; border: none; }
  body.wizard-active .wizard-footer .wizard-footer-total { text-align: center; color: white; font-size: 0.85rem; }
  body.wizard-active .wizard-footer .wizard-footer-total small { display: block; font-size: 0.65rem; opacity: 0.6; font-weight: 400; }
  body.wizard-active .wizard-footer .wizard-footer-total strong { font-size: 1rem; }

  /* Add bottom padding to wizard-body so content doesn't hide behind fixed footer */
  body.wizard-active .wizard-body { padding-bottom: 70px; }
}

/* Quotation wizard open → hide floating support / install / Munim mascot buttons
   so they never overlap the Next / Generate button in the wizard footer.
   Scoped via :has(.wizard-wrap) so it auto-clears when the wizard unmounts. */
body:has(.wizard-wrap) .pwa-install-btn,
body:has(.wizard-wrap) .sh-wa-float,
body:has(.wizard-wrap) .munim-root { display: none; }

/* ─── Wave C1: scroll-aware tab bar — fixed bottom-bar clearance ────────────
   The floating tab bar now hides on scroll-down / shows on scroll-up during a
   wizard (SH.tabbarScroll toggles body.sh-tabhide; see dashboard-mobile.css).
   Keep the wizards' fixed bottom bars clear of it: lift them above the tab bar
   while it shows, and drop them to the true bottom (reclaiming its space) once
   it hides. Mobile-only so desktop (tab bar hidden) is untouched. */
@media (max-width: 768px) {
  /* Quotation total bar (keyed off .wizard-wrap, the quotation-wizard signal). */
  body:has(.wizard-wrap) .total-bar.visible {
    transition: bottom 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  }
  body:has(.wizard-wrap):not(.sh-tabhide) .total-bar.visible {
    bottom: calc(62px + 22px + env(safe-area-inset-bottom, 0px));
  }
  body:has(.wizard-wrap).sh-tabhide .total-bar.visible {
    bottom: env(safe-area-inset-bottom, 0px);
  }

  /* Walk-in Next bar: walk-in-orders.css drops it to bottom:0 assuming the tab
     bar is always hidden mid-wizard — lift it back above the bar when it shows.
     When hidden it falls through to that bottom:0 rule (space reclaimed). */
  body.wizard-active .wi-wizard-nav {
    transition: bottom 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  }
  body.wizard-active:not(.sh-tabhide) .wi-wizard-nav {
    bottom: calc(62px + 22px + env(safe-area-inset-bottom, 0px));
  }
}


/* ── Skip Button (Quotation optional steps) ────────── */
.skip-step-btn {
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 0.82rem;
  cursor: pointer;
  padding: 10px 20px;
  min-height: 44px;
  min-width: 44px;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}

.skip-step-btn:hover {
  color: var(--text-secondary);
}


/* ── Subtle Animations ────────────────────────────── */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dash-card,
.mini-calendar-card {
  animation: fadeSlideUp 0.35s ease-out both;
}

.stats-grid>.stat-card,
.plans-grid>.plan-card {
  animation: fadeSlideUp 0.35s ease-out both;
}

.dash-card:nth-child(1) {
  animation-delay: 0s;
}

.dash-card:nth-child(2) {
  animation-delay: 0.06s;
}

.dash-card:nth-child(3) {
  animation-delay: 0.12s;
}

.dash-card:nth-child(4) {
  animation-delay: 0.18s;
}


/* ============================================
   SETTINGS PAGE
   ============================================ */
.settings-page {
  padding: var(--space-lg);
  max-width: 640px;
  margin: 0 auto;
}

/* ─── Settings Tab Bar — horizontal pill scroller ─── */
.settings-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: var(--space-xl);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 4px 4px 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  /* Mobile: touch only pans horizontally so vertical page scroll gestures pass through */
  touch-action: pan-x;
  scroll-snap-type: x proximity;
}

/* Visible thin scrollbar on desktop so the user knows there's more to the right */
.settings-tabs::-webkit-scrollbar {
  height: 6px;
}
.settings-tabs::-webkit-scrollbar-track {
  background: transparent;
}
.settings-tabs::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
.settings-tabs::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}
/* On touch devices we hide the scrollbar — natural swipe handles it */
@media (hover: none) and (pointer: coarse) {
  .settings-tabs::-webkit-scrollbar { display: none; }
  .settings-tabs { scrollbar-width: none; }
}

.settings-tab {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  height: 38px;
  border-radius: 99px;
  background: var(--card);
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid var(--border-light);
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.18s, box-shadow 0.2s;
  flex-shrink: 0;
  scroll-snap-align: start;
}

.settings-tab:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(3, 105, 161, 0.04);
}

.settings-tab .material-symbols-rounded {
  font-size: 1.05rem;
  line-height: 1;
  font-variation-settings: 'FILL' 0, 'wght' 500;
}

.settings-tab.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 2px 6px -2px rgba(3, 105, 161, 0.28);
}

.settings-tab.active .material-symbols-rounded {
  font-variation-settings: 'FILL' 1, 'wght' 500;
}

.settings-tab:active { transform: translateY(0) scale(0.97); }

.settings-section {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  border: 1px solid var(--border);
}

.settings-section .btn-block {
  margin-top: var(--space-lg);
  min-height: 52px;
  font-size: 1.05rem;
  font-weight: 700;
  border-radius: var(--radius-lg);
  letter-spacing: 0.01em;
}

.settings-section h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin-bottom: var(--space-lg);
  color: var(--foreground);
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-section h3 .material-symbols-rounded {
  font-size: 1.3rem;
  color: var(--primary);
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--border);
}

.setting-row:last-child {
  border-bottom: none;
}

.setting-label {
  flex: 1;
  min-width: 0;
  font-size: 1rem;
  color: var(--foreground);
  font-weight: 500;
}

.setting-label small {
  display: block;
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-top: 3px;
  font-weight: 400;
  /* The hint is a full sentence and was running off the panel edge instead of
     wrapping. Both properties are needed: normal re-enables wrapping, anywhere
     breaks a long unbroken token (a URL, an email) rather than overflowing. */
  white-space: normal;
  overflow-wrap: anywhere;
}

/* The toggle must never be squeezed by a long label. */
.setting-row .toggle-switch { flex: 0 0 auto; }

/* Settings Logo Upload */
.settings-logo-wrap {
  text-align: center;
  margin-bottom: var(--space-xl);
  padding-top: 10px;          /* headroom for the Pro crown */
}

.settings-logo-frame {
  position: relative;
  display: inline-flex;
  border-radius: 50%;
  padding: 5px;
  /* Was linear-gradient(--primary, --success): a teal-to-green arc that read as
     an unread WhatsApp status ring rather than a brand frame. Metallic gold
     instead - four stops so the ring catches a highlight on one side instead of
     looking like flat mustard. */
  background: linear-gradient(135deg, #F6D98A 0%, #C9982E 38%, #F7E3A1 58%, #A9781B 100%);
}

/* Paying studios only - see the is-pro gate in app.js, which mirrors the
   profile menu's is_active rule. */
.settings-logo-frame.is-pro {
  background: linear-gradient(115deg, #B8860B 0%, #FFE9A8 18%, #D9A72F 34%, #FFF6D2 48%,
                              #D9A72F 62%, #FFE9A8 80%, #B8860B 100%);
  background-size: 200% 200%;
  box-shadow: 0 0 0 1px hsla(43, 74%, 49%, 0.35), 0 6px 18px hsla(43, 74%, 40%, 0.28);
  animation: shAvatarIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both,
             shGoldShimmer 7s linear 0.45s infinite;
}

.settings-logo-crown {
  position: absolute;
  top: -23px;                /* clears the ring so the BAND is visible - tucked
                                behind it, the crown read as a spiky hat */
  left: 50%;
  width: 40px;
  height: 35px;
  display: block;
  pointer-events: none;      /* never steals the click from the avatar */
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5));
  z-index: 2;
  transform-origin: 50% 100%;
  animation: shCrownFloat 3.2s ease-in-out infinite;
}

.settings-logo-crown svg { width: 100%; height: 100%; display: block; }

/* translateX(-50%) lives inside the keyframes because a transform animation
   replaces the property wholesale - setting it separately would be overridden
   and the crown would jump to the left edge. */
@keyframes shCrownFloat {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(0deg); }
  50%      { transform: translateX(-50%) translateY(-3px) rotate(-2.5deg); }
}

/* Slow metallic sweep across the ring. background-position only - no layout,
   no reflow, and nothing that could shift the scroll anchor. */
@keyframes shGoldShimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* One-off settle when the avatar first paints. */
@keyframes shAvatarIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

.settings-logo-frame {
  animation: shAvatarIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Respect the OS setting - some users get motion sickness, and this is a
   decorative loop that never stops. */
@media (prefers-reduced-motion: reduce) {
  .settings-logo-crown,
  .settings-logo-frame,
  .settings-logo-frame.is-pro {
    animation: none;
  }
  .settings-logo-crown { transform: translateX(-50%); }
}

.settings-logo-frame img {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--card);
  border: 3px solid var(--card);
}

.settings-logo-initial {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  font-size: 2.8rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--card);
  font-family: var(--font-display);
}

/* Compact section card - replaces the old "margin-top:20px + padding-top:16px +
   full-width border" pattern, which stacked ~36px of dead space before every
   block. Also gives those blocks a real id to be styled by, instead of the CSS
   matching on an inline style string. */
.sh-mini-card {
  margin-top: 14px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
}

.sh-mini-card h4 { margin-bottom: 10px; }

/* ── Today's Pending ─────────────────────────────────
   The page was pinned to an inline max-width:600px, so on a 1440px screen it
   was a narrow ribbon with two-thirds of the viewport empty, and every section
   rendered every row with no paging.
   ─────────────────────────────────────────────────────── */
.tp-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md);
}

.tp-section { margin-bottom: var(--space-xl); }

.tp-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-sm);
}

.tp-section-title {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--foreground);
}

.tp-section-count {
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

.tp-cards { display: grid; gap: 8px; }
.tp-cards + .tp-cards { margin-top: 8px; }

/* Two per row once there is room. The cards are short and fixed-height, so a
   single column past ~900px just makes the eye travel further for no gain. */
@media (min-width: 900px) {
  .tp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.tp-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  margin-top: 10px;
  padding: 10px 14px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  background: none;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.83rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.tp-more:hover { border-color: var(--primary); color: var(--primary); }
.tp-more .material-symbols-rounded { font-size: 18px; }

/* ── Subscription panel + cancellation flow ──────────
   The panel was a bare name/date/red-link stack. The cancel path used a native
   confirm(), which is the only native dialog left in this app and looks nothing
   like the rest of it.
   ─────────────────────────────────────────────────────── */
.sub-panel { padding: 4px 0; }

.sub-plan-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  padding: 16px;
}

.sub-plan-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.sub-plan-name { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
.sub-plan-meta { font-size: 0.84rem; color: var(--text-secondary); margin-top: 3px; }

.sub-status-pill {
  color: #fff;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex: 0 0 auto;
}

.sub-days-row,
.sub-renew-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 0.84rem;
  color: var(--text-secondary);
}

.sub-days-row .material-symbols-rounded,
.sub-renew-note .material-symbols-rounded { font-size: 18px; color: var(--primary); }

.sub-cancel-banner {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: hsla(38, 92%, 50%, 0.1);
  border: 1px solid hsla(38, 92%, 50%, 0.3);
  font-size: 0.84rem;
  line-height: 1.5;
}

.sub-cancel-banner .material-symbols-rounded { font-size: 19px; color: var(--warning); flex: 0 0 auto; }

/* A plain, legible text button - deliberately NOT hidden, disabled or
   disguised. It is quiet because it is secondary, and it is always one click
   away from the panel. */
.sub-cancel-link {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Centred, but width:fit-content keeps the clickable area hugging the text -
     a full-width destructive control invites mis-taps. */
  width: fit-content;
  margin: 18px auto 0;
  padding: 8px 14px;
  min-height: 44px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.sub-cancel-link:hover { color: var(--destructive); }

.sub-modal-lead { font-size: 0.92rem; margin: 0 0 14px; line-height: 1.5; }

.sub-q { margin-bottom: 20px; }
.sub-q:last-of-type { margin-bottom: 14px; }

.sub-q-title { font-size: 0.92rem; font-weight: 600; margin: 0 0 2px; line-height: 1.45; }
.sub-q-hint { font-size: 0.76rem; color: var(--text-muted); margin: 0 0 9px; }

.sub-reason-list { display: grid; gap: 8px; }

/* The "what did you use" answers are short labels - two per row keeps the
   survey from turning into a long scroll, which is friction by accident. */
.sub-reason-list--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 420px) {
  .sub-reason-list--grid { grid-template-columns: 1fr; }
}

.sub-reason-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 0.88rem;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.sub-reason-row:hover { border-color: var(--primary); }
.sub-reason-row:has(input:checked) { border-color: var(--primary); background: hsla(200, 80%, 44%, 0.08); }
.sub-reason-row input { accent-color: var(--primary); width: 17px; height: 17px; flex: 0 0 auto; }
.sub-reason-row input[type="checkbox"] { border-radius: 4px; }

.sub-consequences { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 11px; }

.sub-consequences li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.88rem;
  line-height: 1.5;
}

.sub-consequences .material-symbols-rounded { font-size: 19px; flex: 0 0 auto; margin-top: 1px; }
.sub-consequences .ok { color: var(--success); }
.sub-consequences .warn { color: var(--warning); }

.sub-modal-help {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* Destructive confirm stays clearly readable - never a greyed-out decoy. */
.sub-danger-btn { color: var(--destructive); }
.sub-danger-btn:hover { background: hsla(0, 72%, 51%, 0.1); }

/* Website & social link rows. The brand mark sits in the LABEL, not inside the
   input, so the icon never overlaps typed text and every label baseline lines
   up whatever the word length. Inline SVG because Material Symbols has no
   brand glyphs and the shipped icon font is subsetted. */
.sh-social-grid {
  display: grid;
  gap: 14px;
}

.sh-social-field .form-label {
  display: flex;
  align-items: center;
  gap: 7px;
}

.sh-social-ico {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;          /* never squashed by a long label */
}

/* Real brand colours. Instagram fills from a gradient defined inside its own
   SVG (url(#shIgGrad)), so it is deliberately absent here - setting `color`
   on it would do nothing. */
.sh-social-ico--website  { color: var(--primary); }
.sh-social-ico--facebook { color: #1877F2; }
.sh-social-ico--youtube  { color: #FF0000; }

/* Udyam owns its own row; the input is capped so a 19-character code is not
   stretched across the full panel width. */
#setUdyamNumber {
  max-width: 340px;
  letter-spacing: 0.04em;
}

.settings-logo-frame .settings-logo-edit {
  position: absolute;
  bottom: 2px;
  right: 2px;
  /* .btn sets min-height:48px, which beat the old height:36px and rendered this
     as a 36x48 OVAL. Both axes are pinned and the ratio locked so it stays a
     true circle whatever the base button metrics do. */
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  aspect-ratio: 1;
  flex: 0 0 auto;
  padding: 0;
  line-height: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Panel-coloured chip ringed in the panel colour: punches a clean cutout in
     the avatar's teal-green gradient instead of sitting on top of it as a
     saturated blue blob competing with the ring. */
  background: var(--card);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  box-shadow: 0 0 0 2px var(--card), 0 2px 6px hsla(210, 40%, 10%, 0.28);
  transition: color var(--transition-fast), background var(--transition-fast),
              transform var(--transition-fast);
}

/* Keeps the 44px tap target the design rules require while the chip only
   LOOKS 30px. Invisible, concentric, no layout effect. */
.settings-logo-frame .settings-logo-edit::before {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
}

.settings-logo-frame .settings-logo-edit:hover {
  color: var(--primary);
  background: var(--surface-muted);
  transform: translateY(-1px);
}

.settings-logo-frame .settings-logo-edit:active {
  transform: translateY(0);
}

.settings-logo-frame .settings-logo-edit .material-symbols-rounded {
  font-size: 1rem;
}

.settings-logo-label {
  margin-top: 8px;
  font-size: 0.95rem;
  color: var(--text-secondary);
}

/* Portfolio Showcase grid (Storyboard theme source) */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (min-width: 768px) {
  .portfolio-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
}
.portfolio-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-muted, #f3f4f6);
  border: 1px solid var(--border);
  cursor: grab;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.portfolio-thumb:active { cursor: grabbing; }
.portfolio-thumb.is-dragging { opacity: 0.4; transform: scale(0.96); }
.portfolio-thumb.is-over { box-shadow: 0 0 0 2px var(--primary); transform: scale(1.02); }
.portfolio-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none;
}
.portfolio-del {
  position: absolute; top: 4px; right: 4px;
  width: 24px; height: 24px; min-height: 24px;
  border-radius: 50%; border: none; padding: 0;
  background: rgba(0,0,0,0.6); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.portfolio-del:hover { background: rgba(220, 38, 38, 0.9); }
.portfolio-order {
  position: absolute; bottom: 4px; left: 4px;
  font-size: 0.65rem; font-weight: 700; color: #fff;
  background: rgba(0,0,0,0.55);
  padding: 2px 6px; border-radius: 999px;
  letter-spacing: 0.02em;
}
/* §5.5: visible keyboard+mouse reorder buttons (drag-drop has no keyboard
   path) — stacked bottom-right, clear of .portfolio-del (top-right) and
   .portfolio-order (bottom-left). Global :focus-visible ring (a11y.css)
   covers the focus state, no rule needed here. */
.portfolio-reorder {
  position: absolute; bottom: 4px; right: 4px;
  display: flex; flex-direction: column; gap: 2px;
}
.portfolio-move {
  width: 22px; height: 22px; min-height: 22px;
  border-radius: 6px; border: none; padding: 0;
  background: rgba(0,0,0,0.6); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.portfolio-move:hover:not(:disabled) { background: rgba(0,0,0,0.8); }
.portfolio-move:disabled { opacity: 0.25; cursor: default; }
.portfolio-empty {
  grid-column: 1 / -1;
  padding: 18px 12px; text-align: center;
  font-size: 0.82rem; color: var(--text-muted);
  background: var(--surface-muted, #f9fafb);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
}
/* Cap the visible grid so 24 thumbs don't push the form into a tower —
   ~4 rows on desktop (4 cols × 4) and ~5 rows on mobile (3 × 5). */
.portfolio-grid-scroll {
  max-height: 360px;
  overflow-y: auto;
  padding: 4px;
  border-radius: var(--radius-md);
  scrollbar-width: thin;
}
.portfolio-grid-scroll::-webkit-scrollbar { width: 6px; }
.portfolio-grid-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
@media (min-width: 768px) {
  .portfolio-grid-scroll { max-height: 420px; }
}

/* Settings collapsible sections */
.settings-collapse-hd {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  text-align: left;
  line-height: 1.4;
}
.settings-collapse-chevron {
  margin-left: auto;
  font-size: 1.1rem;
  color: var(--text-muted);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.settings-collapse-hd[aria-expanded="true"] .settings-collapse-chevron {
  transform: rotate(180deg);
}
.settings-collapse-body {
  margin-top: 8px;
}

/* Settings Theme Card */
.settings-theme-card {
  margin-bottom: var(--space-lg);
  padding: var(--space-lg);
  background: var(--card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

.settings-theme-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-md);
}

.settings-theme-header .material-symbols-rounded {
  font-size: 1.4rem;
  color: var(--primary);
}

.settings-theme-header h4 {
  margin: 0;
  font-size: 0.95rem;
  color: var(--foreground);
}

.settings-theme-header p {
  margin: 2px 0 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

/* Settings Language Buttons */
.settings-lang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
}

.settings-lang-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 12px;
  border-radius: var(--radius-md);
  border: 2px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  cursor: pointer;
  transition: var(--transition-fast);
  position: relative;
}

.settings-lang-btn .lang-script {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
}

.settings-lang-btn .lang-name {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.settings-lang-btn .lang-check {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 1.1rem;
  color: var(--primary);
  display: none;
}

.settings-lang-btn.active {
  border-color: var(--primary);
  background: var(--primary-50, hsla(200, 90%, 50%, 0.08));
}

.settings-lang-btn.active .lang-check {
  display: block;
}

/* Settings Toggle Switch (scoped to avoid conflict with addon .toggle-switch).
   The label keeps the 44px tap target (mobile-fix rule below sets min-height);
   the visual pill is the fixed-size .toggle-slider centered inside it. */
.settings-section .toggle-switch {
  position: relative;
  width: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.settings-section .toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: relative;
  display: block;
  cursor: pointer;
  width: 48px;
  height: 28px;
  background: var(--border-strong, #C7CDD6);
  border-radius: var(--radius-full);
  transition: background 0.18s ease;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

.toggle-slider::before {
  content: '';
  position: absolute;
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: transform 0.18s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.settings-section .toggle-switch:hover .toggle-slider {
  background: var(--text-muted, #9AA1AB);
}

.settings-section .toggle-switch input:checked+.toggle-slider,
.settings-section .toggle-switch:hover input:checked+.toggle-slider {
  background: var(--success);
}

.settings-section .toggle-switch input:checked+.toggle-slider::before {
  transform: translateX(20px);
}

.settings-section .toggle-switch input:focus-visible+.toggle-slider {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* GST Fields slide-down */
.gst-fields {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.gst-fields.visible {
  max-height: 400px;
}

/* ============================================
   RENTAL MODULE
   ============================================ */
.rental-page {
  padding: var(--space-lg);
}

.inventory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-md);
}

.inventory-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  border: 1px solid var(--border);
  text-align: center;
  cursor: pointer;
  transition: var(--transition-fast);
}

.inventory-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.inventory-card .item-icon {
  font-size: 2rem;
  color: var(--primary);
  margin-bottom: var(--space-sm);
}

.inventory-card .item-name {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 4px;
}

.inventory-card .item-rate {
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.inventory-card .item-qty {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--primary-50);
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: var(--space-sm);
}

.inventory-card .item-qty.low {
  background: hsl(38, 92%, 95%);
  color: var(--warning);
}

.inventory-card .item-qty.out {
  background: hsl(0, 72%, 95%);
  color: var(--destructive);
}

.rental-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.rental-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--card);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: var(--transition-fast);
}

.rental-row:hover {
  border-color: var(--primary);
}

.rental-row .rental-info {
  flex: 1;
  min-width: 0;
}

.rental-row .rental-number {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--primary);
}

.rental-row .rental-client {
  font-size: 0.85rem;
  color: var(--foreground);
}

.rental-row .rental-dates {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.rental-status {
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.rental-status.active {
  background: hsl(200, 80%, 92%);
  color: var(--primary);
}

.rental-status.returned {
  background: hsl(142, 70%, 92%);
  color: var(--success);
}

.rental-status.overdue {
  background: hsl(0, 72%, 93%);
  color: var(--destructive);
}

.rental-status.cancelled {
  background: var(--secondary);
  color: var(--text-secondary);
}

/* Mini-Bill Print Styles */
.mini-bill {
  font-family: var(--font-family);
  max-width: 400px;
  margin: 0 auto;
}

.mini-bill-header {
  text-align: center;
  padding-bottom: var(--space-md);
  border-bottom: 2px dashed var(--border);
  margin-bottom: var(--space-md);
}

.mini-bill-header h2 {
  font-family: var(--font-display);
  font-size: 1.1rem;
}

.mini-bill table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin: var(--space-md) 0;
}

.mini-bill th {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.mini-bill td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}

.mini-bill .bill-totals {
  border-top: 2px solid var(--foreground);
  padding-top: var(--space-sm);
}

.mini-bill .bill-totals .row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 0.85rem;
}

.mini-bill .bill-totals .grand {
  font-weight: 700;
  font-size: 1rem;
  border-top: 1px solid var(--border);
  padding-top: 8px;
  margin-top: 4px;
}

@media print {
  .mini-bill {
    max-width: 100%;
  }

  .modal-footer,
  .app-header,
  .sidebar,
  .bottom-nav {
    display: none !important;
  }
}


/* ============================================
   UPGRADE BANNER
   ============================================ */
.upgrade-banner {
  background: linear-gradient(135deg, var(--primary-50), hsl(38, 92%, 95%));
  border: 1px solid var(--primary-100);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: center;
  margin: var(--space-lg) 0;
}

.upgrade-banner h3 {
  font-family: var(--font-display);
  color: var(--primary-700);
  margin-bottom: var(--space-sm);
}

.upgrade-banner p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
}

/* ============================================
   RESPONSIVE — Mobile fixes for new features
   ============================================ */
@media (max-width: 768px) {
  .settings-page {
    padding: var(--space-md);
  }

  .settings-tabs {
    gap: 6px;
    margin-left: -4px;
    margin-right: -4px;
    padding-left: 6px;
    padding-right: 6px;
  }

  .settings-tab {
    padding: 8px 13px;
    height: 34px;
    font-size: 0.76rem;
    gap: 6px;
  }

  .settings-tab .material-symbols-rounded {
    font-size: 1rem;
  }

  .settings-section {
    padding: var(--space-lg);
  }

  .theme-toggle-group {
    width: 100%;
  }

  .settings-lang-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .inventory-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }

  .rental-row {
    flex-wrap: wrap;
  }

  .setting-row {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }
}

@media (max-width: 480px) {
  .inventory-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }
}


/* =====================================================
   MOBILE UX COMPREHENSIVE FIXES
   All mobile layout, touch, safe-area, and UX fixes
   ===================================================== */


/* ── 1. iOS Form Input Zoom Prevention ──────────────
   iOS Safari zooms in when font-size < 16px on focus.
   Force 16px on all form inputs on mobile.
   ─────────────────────────────────────────────────── */
@media (max-width: 768px) {

  .form-control,
  select,
  textarea,
  .form-select,
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="date"],
  input[type="time"],
  input[type="url"],
  input[type="search"] {
    font-size: 16px !important;
  }
}


/* ── 2. Wizard Stepper Mobile UX ────────────────────
   Gradient fade on edges to indicate scrollability.
   On <480px: hide all labels, smaller step numbers.
   ─────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .wizard-stepper {
    position: relative;
    /* Gradient fade on edges to hint scrollable content */
    mask-image: linear-gradient(to right,
        transparent 0%,
        black 8%,
        black 92%,
        transparent 100%);
    -webkit-mask-image: linear-gradient(to right,
        transparent 0%,
        black 8%,
        black 92%,
        transparent 100%);
    padding: var(--space-xs);
    gap: 0;
  }

  .step-number {
    width: 24px;
    height: 24px;
    font-size: 0.75rem;
  }

  .step-label {
    display: none !important;
  }

  .step-connector {
    width: 12px;
    margin: 0 2px;
  }

  .wizard-body {
    padding: 14px;
  }

  .wizard-footer {
    padding: 10px 14px;
  }
}


/* ── 3. Quick Actions — Left Fade Indicator ─────────
   Adds left-side gradient fade for scroll awareness.
   ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .quick-actions {
    position: relative;
  }

  .quick-actions::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 20px;
    background: linear-gradient(to left, transparent, var(--background));
    pointer-events: none;
    z-index: 1;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  }
}


/* ── 4. Package/Addon Card Grid — Compact on Phones ─
   Keep 1 col on very small, allow 2 cols on wider phones.
   ─────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .package-card {
    padding: var(--space-lg);
  }

  .package-price {
    font-size: 1.2rem;
  }

}

/* Allow 2 cols on phones wider than 400px */
@media (min-width: 400px) and (max-width: 480px) {
  .package-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }

  .package-card {
    padding: var(--space-md);
  }

  .package-name {
    font-size: 0.88rem;
  }

  .package-price {
    font-size: 1.05rem;
    margin-bottom: var(--space-sm);
  }

  .package-features li {
    font-size: 0.75rem;
    padding: 2px 0;
  }
}


/* ── 5. Table Responsiveness ────────────────────────
   Horizontal scroll wrapper for any table on mobile.
   Add .table-responsive wrapper around tables in JS/HTML.
   ─────────────────────────────────────────────────── */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  margin: 0 calc(-1 * var(--space-lg));
  padding: 0 var(--space-lg);
}

.table-responsive table {
  min-width: 500px;
}

@media (max-width: 768px) {
  .table-responsive {
    margin: 0;
    padding: 0;
  }

  .table-responsive table {
    min-width: 100%;
  }
}

/* Mini-bill scroll on mobile */
@media (max-width: 768px) {
  .mini-bill {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mini-bill table {
    min-width: 340px;
  }
}


/* ── 6. Touch Feedback ──────────────────────────────
   Active/pressed states for touch devices using
   @media (hover: none) to target touch-only devices.
   ─────────────────────────────────────────────────── */
@media (hover: none) {

  /* Cards — subtle press-in */
  .card:active,
  .stat-card:active,
  .package-card:active,
  .addon-card:active,
  .plan-card:active,
  .inventory-card:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }

  /* Buttons — press effect */
  .btn:active,
  .quick-action-btn:active {
    transform: scale(0.96);
    opacity: 0.85;
    transition: transform 0.1s ease, opacity 0.1s ease;
  }

  /* Bottom nav items */
  .bottom-nav-item:active {
    transform: scale(0.9);
    transition: transform 0.1s ease;
  }

  /* Sidebar nav items */
  .nav-item:active {
    background: hsla(0, 0%, 100%, 0.1);
  }

  /* Client rows */
  .client-row:active {
    background: var(--primary-50);
    transition: background 0.1s ease;
  }

  /* Rental rows */
  .rental-row:active {
    background: var(--primary-50);
    transition: background 0.1s ease;
  }

  /* Calendar day cells */
  .calendar-day:active,
  .mini-cal-day:active {
    background: var(--primary-100);
    transition: background 0.1s ease;
  }

  /* Settings tab */
  .settings-tab:active {
    transform: scale(0.95);
    transition: transform 0.1s ease;
  }

  /* Remove desktop hover transforms that feel odd on touch */
  .stat-card:hover,
  .package-card:hover,
  .inventory-card:hover {
    transform: none;
  }
}


/* ── 7. Safe Area Handling ──────────────────────────
   Ensure env(safe-area-inset-bottom) on all
   fixed-position bottom elements (notch/gesture bar).
   ─────────────────────────────────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .bottom-nav {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .total-bar {
    padding-bottom: env(safe-area-inset-bottom);
  }

  @media (max-width: 768px) {
    .modal-panel {
      padding-bottom: env(safe-area-inset-bottom);
    }

    .wizard-footer {
      padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom));
    }

    .total-bar {
      bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
    }
  }
}


/* ── 8. Text Overflow / Truncation ──────────────────
   Single-line ellipsis for names, titles in tight spaces.
   Multi-line clamp for descriptions.
   ─────────────────────────────────────────────────── */
.package-name,
.addon-name,
.plan-card-title,
.plan-name,
.rental-client,
.rental-number,
.item-name,
.setting-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Multi-line truncation (2 lines max) for descriptions */
.wizard-section-desc,
.plan-card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Event titles in calendar — single-line truncation */
.calendar-day .event-title,
.day-popup-event .event-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ── 9. Floating Action Button (FAB) ────────────────
   Old standalone FAB replaced by center nav FAB.
   Kept hidden for backward compatibility.
   ─────────────────────────────────────────────────── */
.fab {
  display: none !important;
}


/* ── 10. Smooth Transitions & Animations ────────────
   GPU-accelerated transitions for sidebar, modal, pages.
   ─────────────────────────────────────────────────── */

/* Page content fade-in */
.page-content {
  animation: pageFadeIn 0.25s ease-out;
}

@keyframes pageFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* GPU hints for animated elements */
@media (max-width: 768px) {
  .modal-panel {
    will-change: transform;
  }

  .modal-overlay {
    will-change: opacity;
  }

  .sidebar {
    will-change: transform;
  }
}


/* ── 11. Login/Register Page Mobile ─────────────────
   Auth card full-width on small phones with margin.
   Plan comparison to 1 column, buttons full-width.
   ─────────────────────────────────────────────────── */
@media (max-width: 480px) {

  .auth-card,
  .login-card,
  .register-card {
    max-width: 100%;
    margin-left: 16px;
    margin-right: 16px;
    border-radius: var(--radius-xl);
  }

  .auth-card .btn,
  .login-card .btn,
  .register-card .btn {
    width: 100%;
  }
}


/* ── 12. Mini Calendar Dots — Larger on Small Mobile ─ */
@media (max-width: 480px) {
  .mini-cal-dot {
    width: 5px;
    height: 5px;
  }

  .mini-cal-day {
    min-height: 40px;
  }
}


/* ── 13. Itinerary/Expense Compact on Small Mobile ── */
@media (max-width: 480px) {
  .itinerary-row {
    padding: var(--space-md);
    gap: var(--space-sm);
  }

  .expense-input {
    width: 100px;
  }

  .split-row {
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding: var(--space-md);
  }
}


/* ── 14. Bottom Nav & Header Touch Targets ──────────
   Ensure all nav items meet 44/48px minimum touch target.
   ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .bottom-nav-item {
    min-height: 48px;
    min-width: 48px;
    justify-content: center;
  }

  .quick-create-action {
    min-height: 48px;
    min-width: 48px;
  }

  .header-icon-btn {
    width: 44px;
    height: 44px;
  }

  .menu-toggle {
    width: 44px;
    height: 44px;
  }
}


/* ── 15. Calendar Day-Header on Small Screens ───────
   Shorter day names, smaller padding on <480px.
   ─────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .calendar-day-header {
    font-size: 0.75rem;
    padding: var(--space-sm);
  }
}


/* ── 16. Toast — Safe Area Aware ────────────────────
   Ensure toast sits above bottom nav + safe area.
   ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .toast-container {
    bottom: calc(var(--bottom-nav-height) + var(--space-xl) + env(safe-area-inset-bottom, 0px));
  }
}


/* ── 17. Profile/Account Menu Mobile ────────────────
   Full-width dropdown on very small screens.
   ─────────────────────────────────────────────────── */
@media (max-width: 480px) {

  .profile-menu,
  .account-menu {
    width: auto;
    left: 16px;
    right: 16px;
  }
}

/* ─────────────────────────────────────────────────────
   18. SMART HINTS & AUTOCOMPLETE
   ───────────────────────────────────────────────────── */

/* Hint dropdown (positioned below input) */
.sh-hints-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 50;
  background: var(--card, #fff);
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
  margin-top: 4px;
  overflow: hidden;
  animation: shHintsFadeIn 150ms ease;
}

@keyframes shHintsFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sh-hints-header {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted, #999);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 12px 4px;
}

.sh-hints-item {
  padding: 10px 12px;
  font-size: 0.88rem;
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: background 100ms ease;
  border-bottom: 1px solid var(--gray-50, #f9fafb);
}

.sh-hints-item:last-child {
  border-bottom: none;
}

.sh-hints-item:hover,
.sh-hints-item:active {
  background: var(--primary-50, #f0f7ff);
}

/* Amount hint (shown below amount input) */
.sh-amount-hint {
  font-size: 0.75rem;
  color: var(--text-muted, #999);
  padding: 4px 2px;
  font-style: italic;
}

/* Recent clients chip section */
.sh-recent-section {
  margin-bottom: var(--space-lg, 16px);
}

.sh-recent-header {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted, #999);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.sh-recent-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}

.sh-recent-chips::-webkit-scrollbar {
  display: none;
}

.sh-recent-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 8px;
  background: var(--gray-50, #f9fafb);
  border: 1.5px solid var(--border, #e5e7eb);
  border-radius: var(--radius-full, 999px);
  cursor: pointer;
  white-space: nowrap;
  min-height: 44px;
  transition: all 150ms ease;
  flex-shrink: 0;
}

.sh-recent-chip:hover,
.sh-recent-chip:active {
  background: var(--primary-50, #f0f7ff);
  border-color: var(--primary-300, #7cc4e8);
}

.sh-chip-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary-100, #d0e8f5);
  color: var(--primary-600, #1a6e9c);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}

.sh-chip-name {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-primary, #1a2b3c);
}

/* Category hint chip row (for city, payment mode, etc.) */
.sh-quick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.sh-quick-chip {
  padding: 6px 12px;
  background: var(--gray-50, #f9fafb);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius-full, 999px);
  cursor: pointer;
  font-size: 0.78rem;
  min-height: 32px;
  display: flex;
  align-items: center;
  transition: all 100ms ease;
}

.sh-quick-chip:hover,
.sh-quick-chip:active {
  background: var(--primary-50, #f0f7ff);
  border-color: var(--primary-300, #7cc4e8);
}

@media (max-width: 480px) {
  .sh-hints-dropdown {
    border-radius: var(--radius-sm, 6px);
  }
}

/* ─── Status Badge Pulse (for overdue) ───────────────── */
@keyframes shBadgePulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }
}

.sh-badge-pulse {
  animation: shBadgePulse 1.5s ease-in-out infinite;
}

/* ─── Aaj Ka Summary Card ────────────────────────────── */

/* ─── Phone Lookup Indicator ─────────────────────────── */
.phone-lookup-status {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--radius-md, 12px);
  font-size: 0.82rem;
  font-weight: 500;
  margin-top: 6px;
}

.phone-lookup-status.found {
  background: var(--success-light, #dcfce7);
  color: var(--success, #22c55e);
}

.phone-lookup-status.not-found {
  background: var(--warning-light, #fef3c7);
  color: var(--warning, #f59e0b);
}

.phone-lookup-status button {
  margin-left: auto;
  min-height: 36px;
}


/* ─────────────────────────────────────────────────────
   ADDITIONAL MOBILE OVERFLOW FIXES
   ───────────────────────────────────────────────────── */

/* Modal on very small screens — prevent viewport overflow */
@media (max-width: 480px) {

  .modal-content,
  .sh-modal-content {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Review rows stack vertically on small phones */
  .review-row {
    flex-direction: column;
    gap: 2px;
  }

  .review-row .value {
    text-align: left;
  }
}

/* ─────────────────────────────────────────────────────
   19. ANALYTICS BARS (CSS-only charts)
   ───────────────────────────────────────────────────── */

.analytics-bar {
  width: 100%;
  height: 20px;
  background: var(--muted, #f1f5f9);
  border-radius: 10px;
  overflow: hidden;
}

.analytics-bar-fill {
  height: 100%;
  border-radius: 10px;
  min-width: 0;
  transition: width 0.5s ease;
}

/* Ensure main content is not hidden behind bottom nav */
@media (max-width: 768px) {
  .main-content {
    padding-bottom: 80px !important;
  }
}

/* ── Page Content Entrance Animation ──────────────── */
.page-content>*:first-child {
  animation: fadeSlideUp 0.3s ease-out both;
}

/* ── Loading Skeleton ─────────────────────────────── */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

.skeleton {
  background: linear-gradient(90deg, var(--border-light) 25%, var(--gray-200) 50%, var(--border-light) 75%);
  background: linear-gradient(90deg, var(--border-light) 25%, color-mix(in srgb, var(--border-light) 60%, transparent 40%) 50%, var(--border-light) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}

.skeleton-card {
  height: 80px;
  border-radius: var(--radius-xl);
}

/* Shimmer line primitive — used by clients list + detail skeletons. Was
   referenced in JS but never defined, so skeletons rendered as blank boxes. */
.skeleton-line {
  background: linear-gradient(90deg, var(--border-light) 25%, color-mix(in srgb, var(--border-light) 60%, transparent 40%) 50%, var(--border-light) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  /* Was .skeleton-line only, so the main .skeleton primitive kept shimmering
     for users who had explicitly asked it not to. */
  .skeleton,
  .skeleton-line,
  .skeleton-card,
  .skeleton-row,
  .skeleton-text { animation: none; }
}

.skeleton-row {
  height: 56px;
  margin-bottom: 8px;
  border-radius: var(--radius-md);
}

.skeleton-text {
  height: 14px;
  width: 60%;
  margin-bottom: 8px;
}

.skeleton-text.short {
  width: 30%;
}

.skeleton-text.long {
  width: 85%;
}

/* ── Notification Badge ── */
.notif-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--destructive);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 2px solid var(--card);
  pointer-events: none;
}

/* ── Notification Sheet ──────────────────────────────────────────────────
   Mobile: a bottom sheet that is only as tall as it needs to be, capped at
   86dvh. It used to be a fixed 75vh slab, so three notifications still ate
   three quarters of the screen. Desktop (>=768px): an anchored popover.
   ONE set of markup drives both — the JS knows nothing about the breakpoint. */
body.notif-open {
  overflow: hidden;
}

.notif-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.38);
  z-index: 1001;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
  /* iOS keeps scrolling the page behind a fixed overlay unless the overlay
     itself refuses the gesture. */
  touch-action: none;
}

.notif-sheet-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.notif-sheet {
  position: fixed;
  z-index: 1002;
  background: var(--card);
  border-radius: 22px 22px 0 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* Height follows content; the cap is what stops it swallowing the screen.
     dvh tracks the collapsing mobile browser chrome — the vh line above it is
     the fallback for browsers without dvh, and must stay. */
  max-height: 86vh;
  max-height: 86dvh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.24s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.16);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overflow: hidden;
}

.notif-sheet.open {
  transform: translateY(0);
}

/* The grab handle is the affordance that says "this drags/closes". Purely
   decorative, so it is hidden from assistive tech by being an empty span. */
.notif-grabber {
  width: 36px;
  height: 4px;
  border-radius: 99px;
  background: var(--border);
  margin: 8px auto 2px;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .notif-sheet {
    top: 56px;
    bottom: auto;
    left: auto;
    right: 16px;
    width: 400px;
    max-height: min(70vh, 620px);
    border-radius: var(--radius-lg);
    transform: translateY(-10px) scale(0.98);
    opacity: 0;
    transition: transform 0.18s ease, opacity 0.18s ease;
    padding-bottom: 0;
  }

  .notif-sheet.open {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  .notif-grabber { display: none; }
}

/* Narrow tablets keep the sheet but let it breathe. */
@media (min-width: 560px) and (max-width: 767px) {
  .notif-sheet {
    left: 50%;
    right: auto;
    width: 480px;
    transform: translate(-50%, 100%);
    border-radius: 22px 22px 0 0;
  }
  .notif-sheet.open { transform: translate(-50%, 0); }
}

.notif-sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px 10px 16px;
  border-bottom: 1px solid var(--border-light, var(--border));
  flex-shrink: 0;
  position: relative;
  background: var(--card);
}

.notif-head-text { min-width: 0; }

.notif-sheet-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
}

.notif-sub {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 1px;
}

.notif-head-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.notif-head-btn {
  min-height: 44px;
  padding: 6px 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary);
}

.notif-head-icon {
  min-height: 44px;
  min-width: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}

/* Destructive actions live here, never beside an ordinary one. */
.notif-menu {
  position: absolute;
  top: 54px;
  right: 10px;
  z-index: 3;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
  padding: 4px;
  min-width: 160px;
}

.notif-menu[hidden] { display: none; }

.notif-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 10px 12px;
  min-height: 44px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-primary, inherit);
}

.notif-menu-item:hover,
.notif-menu-item:focus-visible { background: var(--surface-muted, var(--muted)); }
.notif-menu-item.danger { color: var(--danger); }

.notif-sheet-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Stops a flick at the end of the list from scrolling the page behind. */
  overscroll-behavior: contain;
  padding: 6px 10px calc(16px + env(safe-area-inset-bottom, 0px));
  flex: 1;
  min-height: 0;
}

/* ── Date group header ── */
.notif-group {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 10px 6px 4px;
}

.notif-group:first-child { padding-top: 4px; }
.notif-group-hidden { display: none; }

/* ── Card ── */
.notif-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 10px 10px 12px;
  border-radius: 14px;
  cursor: pointer;
  background: var(--card);
  /* The swipe is horizontal; keeping pan-y means a vertical drag still
     scrolls the list instead of being swallowed by the card. */
  touch-action: pan-y;
}

.notif-card.notif-inert { cursor: default; }

.notif-card:hover { background: var(--surface-muted, var(--muted)); }

.notif-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.notif-card + .notif-card { margin-top: 2px; }

.notif-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--primary-50);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.notif-card-icon .material-symbols-rounded { font-size: 1.15rem; }

/* Intent tints. Colour SUPPLEMENTS the icon and the wording here — it is
   never the only thing carrying the meaning, so the card still reads on a
   greyscale screen or to a colour-blind owner. */
.notif-i-success .notif-card-icon { background: var(--success-light); color: var(--success); }
.notif-i-warn    .notif-card-icon { background: var(--warning-light); color: hsl(32, 85%, 38%); }
.notif-i-alert   .notif-card-icon { background: var(--danger-light);  color: var(--danger); }
.notif-i-info    .notif-card-icon { background: var(--info-light);    color: var(--info); }
.notif-i-neutral .notif-card-icon { background: var(--surface-muted, var(--muted)); color: var(--text-secondary); }

.notif-main { flex: 1; min-width: 0; }

.notif-title {
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.3;
  /* Long titles wrap instead of pushing the dismiss button off a 320px
     screen. overflow-wrap catches an unbroken token (a long receipt number). */
  overflow-wrap: anywhere;
}

.notif-msg {
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-secondary);
  margin-top: 2px;
  overflow-wrap: anywhere;
}

.notif-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 5px;
}

.notif-when {
  font-size: 0.7rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.notif-cta {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
}

.notif-cta::after { content: ' →'; }

.notif-promo-img {
  width: 100%;
  max-height: 150px;
  object-fit: cover;
  border-radius: 10px;
  margin-top: 8px;
  display: block;
  background: var(--surface-muted, var(--muted));
}

.notif-promo-btn { margin-top: 8px; }

.notif-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

/* 40px box inside a 44px row: the row's own padding carries it to the 44px
   minimum target without making the icon look oversized. */
.notif-x {
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  color: var(--text-muted);
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.notif-x:hover { background: var(--surface-muted, var(--muted)); color: var(--text-secondary); }
.notif-x .material-symbols-rounded { font-size: 1rem; }

/* ── Unread ── */
.notif-card.unread {
  background: var(--primary-50);
}

.notif-card.unread .notif-title { font-weight: 700; }

.notif-card.unread::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--primary);
}

.notif-i-warn.unread::before  { background: var(--warning); }
.notif-i-alert.unread::before { background: var(--danger); }
.notif-i-success.unread::before { background: var(--success); }

.notif-unread-dot {
  position: absolute;
  top: 12px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
}

.notif-i-warn .notif-unread-dot  { background: var(--warning); }
.notif-i-alert .notif-unread-dot { background: var(--danger); }

/* The one card that is allowed to shout. */
.notif-card.notif-i-alert {
  background: var(--danger-light);
}

/* ── Swipe to dismiss (touch only; desktop has the visible X) ── */
/* `body ` prefixes beat life.css's `body .notif-card` transition, which would
   otherwise animate every frame of the drag and make it feel like syrup. */
body .notif-card.notif-swiping {
  transition: none;
  animation: none;
  z-index: 1;
}

body .notif-card.notif-leaving {
  transition: transform 180ms ease, opacity 180ms ease, max-height 180ms ease;
  transform: translateX(-110%);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ── Filter chips ── */
.notif-chips {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  overflow-x: auto;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-light, var(--border));
  scrollbar-width: none;
}

.notif-chips::-webkit-scrollbar { display: none; }

.notif-chip {
  position: relative;
  /* The row scrolls horizontally, so a chip must NEVER be shrunk to fit:
     at 320px the default flex-shrink squeezed the pills until their labels
     ran into each other ("PaymentOrders"). */
  flex: 0 0 auto;
  padding: 6px 12px;
  /* The pill reads at 36px, but the TAP TARGET must be 44px. The pseudo
     element below stretches the hit area vertically without making the row
     chunky — a 44px-tall pill next to a 44px-tall header button turns the top
     of the sheet into nothing but chrome on a 375px screen. */
  min-height: 36px;
  min-width: 44px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.notif-chip::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

.notif-chip.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* ── Empty / error / loading ── */
.notif-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 32px 20px;
  text-align: center;
}

.notif-empty-ico {
  font-size: 2rem;
  color: var(--text-muted);
}

.notif-empty-title {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.notif-empty-sub {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.notif-more {
  width: calc(100% - 12px);
  margin: 8px 6px 4px;
  min-height: 44px;
}

/* A compact skeleton that matches the card, not a full-screen spinner. */
.notif-skel {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  align-items: flex-start;
}

.notif-skel span {
  display: block;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--surface-muted, var(--muted)) 25%, var(--border-light, var(--border)) 50%, var(--surface-muted, var(--muted)) 75%);
  background-size: 200% 100%;
  animation: notif-skel-shimmer 1.2s linear infinite;
}

.notif-skel .s-ico { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; }
.notif-skel .s-col { flex: 1; }
.notif-skel .s-l1 { height: 11px; width: 62%; margin-bottom: 7px; }
.notif-skel .s-l2 { height: 10px; width: 88%; margin-bottom: 7px; }
.notif-skel .s-l3 { height: 9px;  width: 34%; }

@keyframes notif-skel-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ── Global Search Overlay ── */
.global-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0;
  opacity: 0;
  transition: opacity 0.2s;
}

.global-search-overlay.open {
  opacity: 1;
}

.global-search-container {
  width: 100%;
  height: 100%;
  background: var(--card);
  display: flex;
  flex-direction: column;
  padding: 16px;
  padding-top: calc(env(safe-area-inset-top, 0px) + 16px);
}

@media (min-width: 768px) {
  .global-search-container {
    width: 560px;
    max-height: 70vh;
    height: auto;
    border-radius: var(--radius-2xl);
    margin-top: 80px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  }
}

.global-search-results {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.search-result-section {
  margin-bottom: 16px;
}

.search-section-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  padding: 8px 4px 4px;
}

.search-result-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 8px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s;
  min-height: 48px;
}

.search-result-row:hover {
  background: var(--gray-50, var(--secondary));
}

.search-result-row:active {
  background: var(--gray-100, var(--muted));
}


/* =====================================================
   PHASE 5 — ACCESSIBILITY & POLISH (T38-T50)
   ===================================================== */


/* ── T38: Focus-Visible Styles for Keyboard Navigation ──
   Shows a clear focus ring ONLY for keyboard users
   (not mouse/touch) using :focus-visible.
   ─────────────────────────────────────────────────────── */

/* (Base :focus-visible is in a11y.css — these extend it for specific elements) */

/* Buttons — pill/rounded focus ring */
.btn:focus-visible,
.quick-action-btn:focus-visible,
.quick-create-action:focus-visible,
.bottom-nav-item:focus-visible,
.bottom-nav-fab:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px hsla(200, 80%, 44%, 0.15);
}

/* Nav items in sidebar — light ring for dark bg */
.nav-item:focus-visible {
  outline: 2px solid hsla(0, 0%, 100%, 0.7);
  outline-offset: 2px;
}

/* Form controls — enhance existing focus */
.form-control:focus-visible {
  outline: none;
  /* Uses existing box-shadow ring */
  border-color: var(--primary);
  box-shadow: 0 0 0 3px hsla(200, 80%, 44%, 0.15);
}

/* Cards — subtle ring */
.card:focus-visible,
.stat-card:focus-visible,
.package-card:focus-visible,
.addon-card:focus-visible,
.plan-card:focus-visible,
.inventory-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

/* Header buttons */
.header-icon-btn:focus-visible,
.header-nav-btn:focus-visible,
.menu-toggle:focus-visible,
.modal-close:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-full);
}

/* Skip to content: styles in a11y.css (.skip-to-content) */


/* ── T39: Color Contrast Fixes ─────────────────────────
   Ensure text meets WCAG AA 4.5:1 contrast ratio.
   ─────────────────────────────────────────────────────── */

/* Muted text was too light — darken */
:root {
  --text-muted-accessible: hsl(210, 15%, 50%);
}

.form-hint,
.text-muted,
.stat-label,
.addon-price,
.plan-card-desc,
.form-label,
.balance-label,
.aaj-summary-label {
  color: var(--text-muted-accessible);
}

/* Warning toast text needs contrast on yellow bg */
.toast.toast-warning {
  color: hsl(30, 80%, 15%);
}

/* Calendar other-month days — increase opacity for readability */
.calendar-day.other-month {
  opacity: 0.45;
}

/* Nav section labels in sidebar — brighter for dark bg */
.nav-section-label {
  color: hsla(0, 0%, 100%, 0.40);
}


/* ── T40: Touch Target Minimums (44px) ─────────────────
   Ensure all interactive elements meet 44×44px minimum.
   ─────────────────────────────────────────────────────── */

/* Small buttons need minimum size */
.btn-sm {
  min-height: 44px;
  min-width: 44px;
}

/* Chip buttons when clickable */
.chip[onclick],
.chip[role="button"],
a.chip {
  min-height: 32px;
  padding: var(--space-sm) var(--space-md);
}

/* Settings toggle */
.toggle-switch {
  min-height: 44px;
}

/* Remove row button */
.itinerary-row .remove-row {
  min-width: 44px;
  min-height: 44px;
}

/* Calendar nav buttons */
.mini-cal-nav {
  min-width: 44px;
  min-height: 44px;
}


/* ── T42: Disabled Button Styles ───────────────────────
   Clear visual distinction for disabled buttons.
   ─────────────────────────────────────────────────────── */

.btn:disabled,
.btn.disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(30%);
  box-shadow: none;
  transform: none !important;
}

/* Disabled form controls */
.form-control:disabled,
.form-select:disabled,
textarea:disabled {
  opacity: 0.5;
  background: var(--muted);
  cursor: not-allowed;
}

/* Double-submit protection — loading state */
.btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn.is-loading::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 600ms linear infinite;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

.btn-secondary.is-loading::after,
.btn-outline.is-loading::after,
.btn-ghost.is-loading::after {
  color: var(--primary);
}


/* ── T43: Print Stylesheet (Enhanced) ──────────────────
   Clean printing for quotations, invoices, reports.
   ─────────────────────────────────────────────────────── */

@media print {

  /* Hide all non-content UI */
  .sidebar,
  .bottom-nav,
  .app-header,
  .total-bar,
  .wizard-footer,
  .wizard-stepper,
  .toast-container,
  .modal-overlay,
  .quick-create-backdrop,
  .quick-create-sheet,
  .notif-sheet-backdrop,
  .notif-sheet,
  .global-search-overlay,
  .sidebar-backdrop,
  .skip-link,
  .fab,
  .header-icon-btn,
  .btn-ghost,
  .no-print {
    display: none !important;
  }

  /* Reset layout */
  .main-content {
    margin-left: 0 !important;
    padding-bottom: 0 !important;
  }

  .page-content {
    padding: 0 !important;
    max-width: 100% !important;
  }

  body {
    background: white !important;
    color: black !important;
    font-size: 12pt;
    line-height: 1.4;
  }

  /* Cards without shadows */
  .card,
  .stat-card,
  .review-total {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
    break-inside: avoid;
  }

  /* Links show URL */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }

  a[href^="#"]::after,
  a[href^="javascript"]::after {
    content: none;
  }

  /* Page breaks */
  .review-section,
  .card {
    break-inside: avoid;
  }

  h2,
  h3,
  h4 {
    break-after: avoid;
  }

  /* Remove animations */
  * {
    animation: none !important;
    transition: none !important;
  }
}


/* ── T44: Z-Index Scale (Standardized) ─────────────────
   Documented z-index layers:
   1    — default content
   10   — spinner-overlay
   50   — sticky header, hint dropdowns
   90   — total-bar
   99   — sidebar-backdrop
   100  — sidebar
   999  — floating-tabbar (dashboard-mobile.css)
   1000 — quick-create-backdrop, notif-sheet-backdrop
   1001 — quick-create-sheet, global-search-overlay
   1100 — modal-overlay, bottom-sheet-overlay, tooltips
   1101 — bottom-sheet
   2000 — toast-container
   9999 — skip-link
   ─────────────────────────────────────────────────────── */
/* Modal/bottom-sheet (1100) now properly stacks above
   quick-create (1001) and floating-tabbar (999). */


/* ── T45: Colorblind-Safe Status Colors ────────────────
   Add shape/pattern indicators alongside color to
   help colorblind users distinguish statuses.
   ─────────────────────────────────────────────────────── */

/* Status chips: prepend shape indicator via ::before */
.chip-success::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.chip-warning::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid currentColor;
  flex-shrink: 0;
}

.chip-danger::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background: currentColor;
  flex-shrink: 0;
}

/* Rental status badges — distinct shapes */
.rental-status.active::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 4px;
}

.rental-status.returned::before {
  content: '\2713';
  margin-right: 4px;
  font-weight: 700;
}

.rental-status.overdue::before {
  content: '!';
  margin-right: 4px;
  font-weight: 700;
}

.rental-status.cancelled::before {
  content: '\2715';
  margin-right: 4px;
}

/* Calendar dots — already have different shapes (circle, square, triangle) via border-radius.
   Enforced via .calendar-dot.wedding = circle, .engagement = rounded-square, .birthday = ring,
   .corporate = square, .other = diamond. */


/* ── T46: Landscape Layout Fixes ───────────────────────
   Optimize layout when phone is rotated landscape.
   ─────────────────────────────────────────────────────── */

@media (max-height: 500px) and (orientation: landscape) {

  /* Reduce header height — via the token so every top:var(--header-height)
     sticky consumer (walk-in/quotation live-meter band) stays glued to the
     header bottom. .app-header's base rule already uses the var for height. */
  :root {
    --header-height: 48px;
  }

  /* Compact bottom nav */
  .bottom-nav {
    height: 48px;
  }

  .bottom-nav-item span:last-child {
    display: none;
    /* Hide labels in landscape */
  }

  .bottom-nav-fab {
    width: 40px;
    height: 40px;
    transform: translateY(-40%);
  }

  /* Modal — full width in landscape */
  .modal-panel {
    max-height: 85dvh;
    border-radius: var(--radius-lg);
  }

  /* Reduce page padding */
  .page-content {
    padding: var(--space-md);
    padding-bottom: 56px;
  }

  /* Stats grid — more columns in landscape */
  .stats-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* Wizard — smaller stepper */
  .wizard-stepper {
    padding: var(--space-sm) var(--space-md);
  }

  .wizard-body {
    padding: var(--space-md);
  }
}


/* ── T50: Bottom Nav Height Consistency ────────────────
   Ensure bottom nav is always exactly var(--bottom-nav-height)
   and page content accounts for it on mobile.
   ─────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .bottom-nav {
    height: var(--bottom-nav-height);
    min-height: var(--bottom-nav-height);
    max-height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
  }

  /* Consistent page content bottom padding */
  .page-content {
    padding-bottom: calc(var(--bottom-nav-height) + var(--space-lg) + env(safe-area-inset-bottom, 0px));
  }
}


/* ─────────────────────────────────────────────────────
   T75: DARK MODE SUPPORT
   ───────────────────────────────────────────────────── */

/* Dark mode via .dark-mode class (manual toggle) */
:root.dark-mode,
body.dark-mode {
  --background: hsl(210, 30%, 8%);
  --foreground: hsl(210, 20%, 90%);
  --card: hsl(210, 25%, 12%);
  --card-foreground: hsl(210, 20%, 90%);
  --border: hsl(210, 20%, 20%);
  --muted: hsl(210, 20%, 16%);
  --muted-foreground: hsl(210, 15%, 55%);
  --secondary: hsl(210, 25%, 16%);
  --secondary-foreground: hsl(210, 20%, 85%);
  --glass-bg: hsla(210, 25%, 12%, 0.85);
  --glass-border: hsla(210, 20%, 25%, 0.5);
  --glow-primary: hsla(200, 90%, 50%, 0.1);
  --glow-subtle: hsla(200, 40%, 20%, 0.5);
  --surface: var(--card);
  --surface-muted: var(--muted);
  --text-primary: var(--foreground);
  --text-secondary: hsl(210, 15%, 55%);
  --text-muted: hsl(210, 15%, 42%);
  --text-tertiary: hsl(210, 12%, 40%);
  --border-light: hsl(210, 20%, 18%);
  --primary-50: hsl(200, 40%, 12%);
  --primary-100: hsl(200, 35%, 16%);
  --primary-200: hsl(200, 30%, 22%);
  --primary-light: var(--primary-100);
  --gray-50: hsl(210, 20%, 10%);
  --gray-100: hsl(210, 20%, 12%);
  --gray-200: hsl(210, 20%, 16%);
  --gray-300: hsl(210, 15%, 22%);
  --hover: hsla(0, 0%, 100%, 0.06);
  --card-bg: var(--card);
  --success-light: hsl(142, 30%, 14%);
  --warning-light: hsl(38, 40%, 14%);
  --danger-light: hsl(0, 30%, 14%);
  --info-light: var(--primary-50);
  color-scheme: dark;
}

/* Dark mode via system preference (when theme is 'system') */
@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) {
    --background: hsl(210, 30%, 8%);
    --foreground: hsl(210, 20%, 90%);
    --card: hsl(210, 25%, 12%);
    --card-foreground: hsl(210, 20%, 90%);
    --border: hsl(210, 20%, 20%);
    --muted: hsl(210, 20%, 16%);
    --muted-foreground: hsl(210, 15%, 55%);
    --secondary: hsl(210, 25%, 16%);
    --secondary-foreground: hsl(210, 20%, 85%);
    --glass-bg: hsla(210, 25%, 12%, 0.85);
    --glass-border: hsla(210, 20%, 25%, 0.5);
    --glow-primary: hsla(200, 90%, 50%, 0.1);
    --glow-subtle: hsla(200, 40%, 20%, 0.5);
    --surface: var(--card);
    --surface-muted: var(--muted);
    --text-primary: var(--foreground);
    --text-secondary: hsl(210, 15%, 55%);
    --text-muted: hsl(210, 15%, 42%);
    --text-tertiary: hsl(210, 12%, 40%);
    --border-light: hsl(210, 20%, 18%);
    --primary-50: hsl(200, 40%, 12%);
    --primary-100: hsl(200, 35%, 16%);
    --primary-200: hsl(200, 30%, 22%);
    --primary-light: var(--primary-100);
    --gray-50: hsl(210, 20%, 10%);
    --gray-100: hsl(210, 20%, 12%);
    --gray-200: hsl(210, 20%, 16%);
    --gray-300: hsl(210, 15%, 22%);
    --hover: hsla(0, 0%, 100%, 0.06);
    --card-bg: var(--card);
    --success-light: hsl(142, 30%, 14%);
    --warning-light: hsl(38, 40%, 14%);
    --danger-light: hsl(0, 30%, 14%);
    --info-light: var(--primary-50);
    color-scheme: dark;
  }
}

/* Theme toggle button group styling */
.theme-toggle-group {
  display: flex;
  gap: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
}

.theme-toggle-group button {
  flex: 1;
  padding: 10px 16px;
  min-height: 44px;
  border: none;
  background: var(--muted);
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.theme-toggle-group button.active {
  background: var(--primary);
  color: var(--primary-foreground);
}

.theme-toggle-group button:not(:last-child) {
  border-right: 1px solid var(--border);
}


/* ── T26: Inline Field Validation Errors ─────────────
   Shows error message below the input field.
   ─────────────────────────────────────────────────────── */

.sh-field-error {
  color: var(--destructive);
  font-size: 0.78rem;
  margin-top: 4px;
  font-weight: 500;
  line-height: 1.3;
}

.form-control.field-error,
.form-select.field-error {
  border-color: var(--destructive);
  box-shadow: 0 0 0 2px hsla(0, 72%, 51%, 0.12);
}

.form-control.field-error:focus,
.form-select.field-error:focus {
  border-color: var(--destructive);
  box-shadow: 0 0 0 3px hsla(0, 72%, 51%, 0.15);
}


/* ── T34: Lazy Loading Fade-in ───────────────────────
   Smooth appearance when lazy-loaded images arrive.
   JS adds .loaded class via onload; transition handles the fade.
   ─────────────────────────────────────────────────────── */

img[loading="lazy"] {
  transition: opacity 0.3s ease;
}

/* ── Packages Module (tabs, toolbar, cards, grids) ── */

/* Packages / Add-ons / Products — a segmented control, not underlined tabs.
   These sit directly under the hub's own tabs, which are pills, so a full-width
   underlined row right below them read as a second, unrelated navigation.
   Same family now, one level down: a grey track with a raised active chip
   instead of the hub's blue fill, and sized to its content rather than to the
   page, so it cannot be mistaken for the row above it. */
.pkg-tabs {
  display: inline-flex;
  gap: 4px;
  max-width: 100%;
  margin-bottom: var(--space-lg);
  padding: 4px;
  background: var(--gray-100);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}

.pkg-tabs::-webkit-scrollbar { display: none; }

.pkg-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.pkg-tab .material-symbols-rounded { font-size: 1.05rem; }

.pkg-tab:hover { color: var(--text-primary); }

.pkg-tab.active {
  background: var(--card);
  color: var(--primary);
  box-shadow: 0 1px 2px rgba(16, 42, 67, 0.10);
}

.pkg-tab:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; }

/* In dark mode --gray-100 and --card are both 12% lightness, so a white-chip-on-
   grey-track would be invisible. The active segment takes a primary tint there,
   the same treatment .qhub-tab uses. */
:root.dark-mode .pkg-tabs { background: var(--gray-50); }
:root.dark-mode .pkg-tab.active {
  background: hsla(200, 75%, 50%, 0.20);
  color: hsl(200, 85%, 74%);
  box-shadow: none;
}

/* Toolbar: count label + action button */
.pkg-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}

.pkg-toolbar-count {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 500;
  flex: 1;
}

/* Catalog empty state: a compact first-run card instead of a second toolbar
   action floating above a large, unstructured blank area. */
body .pkg-empty {
  position: relative;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  grid-template-areas:
    "visual copy"
    "visual action";
  align-items: center;
  column-gap: var(--space-3xl);
  row-gap: var(--space-lg);
  width: min(760px, 100%);
  min-height: 280px;
  margin: var(--space-xl) auto 0;
  padding: var(--space-3xl);
  overflow: hidden;
  background: linear-gradient(135deg, var(--card) 0%, var(--primary-50) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  animation: sh-life-reveal var(--sh-dur-entrance, 420ms) var(--sh-ease-out, ease-out) both;
}

body .pkg-empty::after {
  content: '';
  position: absolute;
  width: 220px;
  height: 220px;
  right: -90px;
  bottom: -120px;
  border: 1px solid var(--primary-100);
  border-radius: var(--radius-full);
  pointer-events: none;
}

body .pkg-empty-visual {
  grid-area: visual;
  position: relative;
  width: 200px;
  height: 180px;
  justify-self: center;
}

body .pkg-empty-hero,
body .pkg-empty-sample {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  background: var(--card);
  border: 1px solid var(--primary-100);
  box-shadow: var(--shadow-md);
}

body .pkg-empty-hero {
  inset: 34px auto auto 54px;
  width: 92px;
  height: 92px;
  border-radius: var(--radius-xl);
  transform: rotate(-3deg);
}

body .pkg-empty-hero::before {
  content: '';
  position: absolute;
  inset: 9px;
  background: var(--primary-50);
  border-radius: var(--radius-md);
}

body .pkg-empty-hero .material-symbols-rounded {
  position: relative;
  font-size: 2.8rem;
  font-variation-settings: 'FILL' 0, 'wght' 450, 'GRAD' 0, 'opsz' 40;
}

body .pkg-empty-sample {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
}

body .pkg-empty-sample .material-symbols-rounded { font-size: 1.35rem; }
body .pkg-empty-sample--frame { top: 0; left: 8px; transform: rotate(-8deg); }
body .pkg-empty-sample--mug { top: 12px; right: 4px; transform: rotate(8deg); }
body .pkg-empty-sample--prints { bottom: 4px; right: 24px; transform: rotate(5deg); }

body .pkg-empty-copy {
  grid-area: copy;
  align-self: end;
  max-width: 420px;
}

body .pkg-empty-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-bottom: var(--space-sm);
  padding: 0 9px;
  color: var(--primary);
  background: var(--primary-100);
  border-radius: var(--radius-full);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body .pkg-empty-copy h3 {
  margin: 0;
  color: var(--foreground);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

body .pkg-empty-copy p {
  max-width: 390px;
  margin: var(--space-sm) 0 0;
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.55;
}

body .pkg-empty-action {
  grid-area: action;
  align-self: start;
  justify-self: start;
  min-height: 44px;
  padding-inline: var(--space-xl);
  border-radius: var(--radius-md);
}

body .pkg-empty-action .material-symbols-rounded { font-size: 1.15rem; }

@media (max-width: 600px) {
  body .pkg-empty {
    grid-template-columns: 1fr;
    grid-template-areas:
      "visual"
      "copy"
      "action";
    gap: var(--space-lg);
    min-height: 0;
    margin-top: var(--space-sm);
    padding: var(--space-2xl) var(--space-lg);
    text-align: center;
  }

  body .pkg-empty-visual {
    width: 180px;
    height: 145px;
  }

  body .pkg-empty-hero {
    top: 25px;
    left: 46px;
    width: 88px;
    height: 88px;
  }

  body .pkg-empty-copy { justify-self: center; }
  body .pkg-empty-copy h3 { font-size: 1.15rem; }
  body .pkg-empty-copy p { font-size: 0.85rem; }

  body .pkg-empty-action {
    justify-self: stretch;
    width: 100%;
  }
}


/* ═══════════════════════════════════════════════════════════
   PACKAGE CARDS — Editorial Catalog Design (Apr 2026)
   Horizontal: textured icon tile + content + floating actions
   ─────────────────────────────────────────────────────────── */
.pkg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr));
  gap: 12px;
  margin-bottom: var(--space-md);
}

.pkg-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(.2,.9,.3,1.2), border-color 0.18s, box-shadow 0.25s;
  position: relative;
  overflow: hidden;
  padding: 0;
  min-width: 0;
  align-items: stretch;
}

/* Left accent stripe — reveals on hover */
.pkg-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--primary);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s cubic-bezier(.2,.9,.3,1.2);
  z-index: 3;
}

.pkg-card:hover {
  border-color: var(--primary);
  box-shadow: 0 12px 28px -12px rgba(3, 105, 161, 0.18), 0 2px 6px rgba(15, 23, 42, 0.04);
  transform: translateY(-3px);
}

.pkg-card:hover::before { transform: scaleY(1); }
.pkg-card:active { transform: translateY(-1px); }

/* ─── Left: Icon tile with texture ─── */
.pkg-card-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 10px;
  background:
    radial-gradient(circle at 1.5px 1.5px, rgba(3, 105, 161, 0.14) 1px, transparent 0) 0 0 / 14px 14px,
    linear-gradient(135deg, rgba(3, 105, 161, 0.06) 0%, rgba(3, 105, 161, 0.015) 100%);
  border-right: 1px solid var(--border-light);
  position: relative;
}

.pkg-card-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid rgba(3, 105, 161, 0.14);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 4px 12px -4px rgba(3, 105, 161, 0.1);
  transition: transform 0.25s cubic-bezier(.2,.9,.3,1.2), box-shadow 0.2s;
  position: relative;
  z-index: 1;
}

.pkg-card:hover .pkg-card-icon {
  transform: scale(1.06) rotate(-2deg);
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.06),
    0 8px 20px -4px rgba(3, 105, 161, 0.22);
}

.pkg-card-icon .material-symbols-rounded {
  font-size: 1.65rem;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

/* Category label under icon */
.pkg-card-cat {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--primary);
  text-transform: uppercase;
  line-height: 1;
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─── Right: Content body ─── */
.pkg-card-body {
  padding: 14px 88px 14px 16px; /* reserve right space for actions */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  gap: 2px;
}

.pkg-card-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.015em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.pkg-card-price {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.pkg-card-extra-day {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0;
}

.pkg-card-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 5px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pkg-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}

.pkg-chip-item {
  font-size: 0.66rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 5px;
  background: rgba(3, 105, 161, 0.06);
  color: var(--primary);
  border: 1px solid rgba(3, 105, 161, 0.12);
  letter-spacing: 0;
  white-space: nowrap;
}

/* ─── Floating Action Cluster (top-right) ─── */
.pkg-card-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transform: translateX(4px);
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(.2,.9,.3,1.2);
  z-index: 4;
}

.pkg-card:hover .pkg-card-actions,
.pkg-card:focus-within .pkg-card-actions {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 768px), (hover: none) {
  .pkg-card-actions {
    opacity: 1;
    transform: none;
  }
}

.pkg-card-action {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-light);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.pkg-card-action:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  transform: scale(1.08);
}

.pkg-card-action--danger:hover {
  background: var(--danger, #ef4444);
  border-color: var(--danger, #ef4444);
}

.pkg-card-action .material-symbols-rounded {
  font-size: 0.9rem;
  font-variation-settings: 'FILL' 0, 'wght' 500;
}

/* Mobile: tighter tile, full-width cards */
@media (max-width: 480px) {
  .pkg-grid { grid-template-columns: 1fr; gap: 10px; }
  .pkg-card { grid-template-columns: 80px 1fr; }
  .pkg-card-tile { padding: 12px 8px; }
  .pkg-card-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
  }
  .pkg-card-icon .material-symbols-rounded { font-size: 1.4rem; }
  .pkg-card-cat { font-size: 0.54rem; max-width: 68px; }
  .pkg-card-body { padding: 12px 84px 12px 14px; }
  .pkg-card-name { font-size: 0.94rem; }
  .pkg-card-price { font-size: 1.18rem; }
  .pkg-card-chips { margin-top: 6px; }
  .pkg-chip-item { font-size: 0.62rem; padding: 2px 6px; }
}

/* ═══════════════════════════════════════════════════════════
   ADD-ON CARDS — Editorial Ledger (Apr 2026 — rev. 2)
   Tight catalog row: index · icon · body · price · actions
   ─────────────────────────────────────────────────────────── */
.pkg-addon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr));
  gap: 10px;
  margin-bottom: var(--space-md);
}

.addon-card.pkg-addon {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  grid-template-areas: "index icon body price";
  align-items: center;
  column-gap: 14px;
  padding: 11px 16px 11px 14px;
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  cursor: pointer;
  min-width: 0;
  min-height: 76px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-align: left;
  transition:
    border-color 0.18s ease,
    box-shadow 0.26s cubic-bezier(.2,.9,.3,1.2),
    transform 0.22s cubic-bezier(.2,.9,.3,1.2);
}

/* Left accent rail — reveals on hover */
.addon-card.pkg-addon::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  background: linear-gradient(180deg, var(--primary) 0%, rgba(3, 105, 161, 0.35) 100%);
  border-radius: 0 3px 3px 0;
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity 0.24s, transform 0.26s cubic-bezier(.2,.9,.3,1.2);
  z-index: 2;
}

/* Dot-texture atmosphere — fades in on hover */
.addon-card.pkg-addon::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 1.5px 1.5px, rgba(3, 105, 161, 0.08) 1px, transparent 0) 0 0 / 16px 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  z-index: 0;
}

.addon-card.pkg-addon:hover {
  border-color: rgba(3, 105, 161, 0.35);
  box-shadow:
    0 10px 24px -12px rgba(3, 105, 161, 0.22),
    0 2px 6px rgba(15, 23, 42, 0.04);
  transform: translateY(-1px);
}

.addon-card.pkg-addon:hover::before { opacity: 1; transform: translateX(0); }
.addon-card.pkg-addon:hover::after  { opacity: 1; }
.addon-card.pkg-addon:active        { transform: translateY(0); }

/* ─── Index tag (editorial catalog marker) ─── */
.pkg-addon .addon-index {
  grid-area: index;
  font-family: 'SF Mono', 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  line-height: 1;
  padding: 4px 6px 4px 0;
  border-right: 1px solid var(--border-light);
  opacity: 0.75;
  transition: color 0.2s, opacity 0.2s;
  position: relative;
  z-index: 1;
  font-variant-numeric: tabular-nums;
}
.addon-card.pkg-addon:hover .addon-index {
  color: var(--primary);
  opacity: 1;
}

/* ─── Icon tile — flat, refined, no border-hugging ─── */
.pkg-addon .addon-card-head {
  grid-area: icon;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: none;
  position: relative;
  z-index: 1;
}

.pkg-addon .addon-icon-wrap {
  width: 46px;
  height: 46px;
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(3, 105, 161, 0.09) 0%, rgba(3, 105, 161, 0.02) 100%);
  border: 1px solid rgba(3, 105, 161, 0.14);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  transition:
    transform 0.26s cubic-bezier(.2,.9,.3,1.2),
    box-shadow 0.22s,
    background 0.22s;
}

.addon-card.pkg-addon:hover .addon-icon-wrap {
  transform: scale(1.05) rotate(-3deg);
  background: linear-gradient(135deg, rgba(3, 105, 161, 0.16) 0%, rgba(3, 105, 161, 0.04) 100%);
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.05),
    0 8px 18px -4px rgba(3, 105, 161, 0.26);
}

.pkg-addon .addon-icon-wrap .material-symbols-rounded {
  font-size: 1.4rem;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

/* Uploaded image tile */
.pkg-addon .addon-img-wrap {
  width: 54px;
  height: 54px;
  border-radius: 11px;
  overflow: hidden;
  border: 1.5px solid var(--card);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 4px 12px -4px rgba(3, 105, 161, 0.18);
  transition: transform 0.26s cubic-bezier(.2,.9,.3,1.2);
}
.addon-card.pkg-addon:hover .addon-img-wrap { transform: scale(1.04); }
.pkg-addon .addon-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ─── Body: name + description (stacked, single-line, ellipsis) ─── */
.pkg-addon .addon-body {
  grid-area: body;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  gap: 3px;
  position: relative;
  z-index: 1;
}

.pkg-addon .addon-name {
  font-weight: 700;
  font-size: 0.925rem;
  color: var(--text-primary);
  letter-spacing: -0.018em;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pkg-addon .addon-desc {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.35;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

/* ─── Price column — right-aligned, tabular, editorial weight ─── */
.pkg-addon .addon-price-col {
  grid-area: price;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  padding-right: 56px; /* reserves space for hover action cluster */
  position: relative;
  z-index: 1;
  text-align: right;
  white-space: nowrap;
}

.pkg-addon .addon-price {
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.028em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.pkg-addon .addon-unit-badge {
  display: inline-block;
  font-size: 0.54rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(146, 64, 14, 0.08);
  color: #92400E;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  border: 1px solid rgba(146, 64, 14, 0.14);
  line-height: 1.1;
}

/* ─── Floating action cluster (top-right, hover-reveal) ─── */
.pkg-addon .addon-card-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 3px;
  opacity: 0;
  transform: translateX(4px);
  transition: opacity 0.18s ease, transform 0.24s cubic-bezier(.2,.9,.3,1.2);
  z-index: 4;
}

.addon-card.pkg-addon:hover .addon-card-actions,
.addon-card.pkg-addon:focus-within .addon-card-actions {
  opacity: 1;
  transform: translateX(0);
}

/* Always visible on touch devices */
@media (max-width: 768px), (hover: none) {
  .pkg-addon .addon-card-actions {
    opacity: 1;
    transform: none;
  }
}

.pkg-addon .addon-card-action {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-light);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.pkg-addon .addon-card-action:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  transform: scale(1.08);
}

.pkg-addon .addon-card-action--danger:hover {
  background: var(--danger, #ef4444);
  border-color: var(--danger, #ef4444);
}

.pkg-addon .addon-card-action .material-symbols-rounded {
  font-size: 0.82rem;
  font-variation-settings: 'FILL' 0, 'wght' 500;
}

/* ─── Mobile (<=420px): single column, tighter ─── */
@media (max-width: 420px) {
  .pkg-addon-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .addon-card.pkg-addon {
    grid-template-columns: auto auto 1fr auto;
    column-gap: 11px;
    padding: 10px 12px 10px 11px;
    min-height: 68px;
    border-radius: 11px;
  }

  .pkg-addon .addon-index {
    font-size: 0.58rem;
    padding-right: 5px;
  }

  .pkg-addon .addon-icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .pkg-addon .addon-icon-wrap .material-symbols-rounded {
    font-size: 1.26rem;
  }

  .pkg-addon .addon-img-wrap {
    width: 46px;
    height: 46px;
    border-radius: 10px;
  }

  .pkg-addon .addon-name {
    font-size: 0.87rem;
  }

  .pkg-addon .addon-desc {
    font-size: 0.68rem;
  }

  .pkg-addon .addon-price {
    font-size: 1.05rem;
  }

  .pkg-addon .addon-price-col {
    padding-right: 52px; /* clears absolute action cluster (~24*2+gap+right) */
    gap: 3px;
  }

  .pkg-addon .addon-card-actions {
    position: absolute;
    top: 9px;
    right: 9px;
    gap: 3px;
  }

  .pkg-addon .addon-card-action {
    width: 24px;
    height: 24px;
  }

  .pkg-addon .addon-card-action .material-symbols-rounded {
    font-size: 0.78rem;
  }
}

/* Icon picker button */
.addon-icon-btn {
  width: 42px;
  height: 42px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}

.addon-icon-btn:hover {
  border-color: var(--primary-300, var(--primary));
  color: var(--primary);
  background: var(--primary-50, rgba(59,130,246,.05));
}

.addon-icon-btn.selected {
  border-color: var(--primary);
  background: var(--primary-50, rgba(59,130,246,.08));
  color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-100, rgba(59,130,246,.15));
}

/* Image upload area */
.addon-upload-area { margin-top: 4px; }

.addon-upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border: 2px dashed var(--border);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: all 0.2s;
  background: var(--gray-50);
}

.addon-upload-placeholder:hover {
  border-color: var(--primary);
  background: var(--primary-50, rgba(59,130,246,.05));
}

.addon-upload-preview {
  position: relative;
  display: inline-block;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 2px solid var(--border-light);
}

.addon-upload-preview img {
  display: block;
  max-width: 100%;
  max-height: 160px;
  object-fit: contain;
  border-radius: var(--radius-lg);
}

.addon-upload-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: rgba(0,0,0,.6);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.addon-upload-remove .material-symbols-rounded { font-size: 1rem; }

/* ═══════════════════════════════════════════════════════════
   PRODUCT CARDS — Editorial Catalog Design (Apr 2026)
   Horizontal: textured icon tile + content + floating actions
   ─────────────────────────────────────────────────────────── */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 12px;
  margin-bottom: var(--space-md);
}

.product-card {
  display: grid;
  grid-template-columns: 92px 1fr;
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(.2,.9,.3,1.2), border-color 0.18s, box-shadow 0.25s;
  position: relative;
  overflow: hidden;
  padding: 0;
  min-width: 0;
  align-items: stretch;
}

.product-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--primary);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s cubic-bezier(.2,.9,.3,1.2);
  z-index: 3;
}

.product-card:hover {
  border-color: var(--primary);
  box-shadow: 0 12px 28px -12px rgba(3, 105, 161, 0.18), 0 2px 6px rgba(15, 23, 42, 0.04);
  transform: translateY(-3px);
}

.product-card:hover::before { transform: scaleY(1); }
.product-card:active { transform: translateY(-1px); }

/* Stock state overrides — left stripe color */
.product-card.low-stock::before {
  background: var(--warning, #d97706);
  transform: scaleY(1);
}
.product-card.out-of-stock::before {
  background: var(--danger, #ef4444);
  transform: scaleY(1);
}
.product-card.out-of-stock { opacity: 0.88; }

/* ─── Left: Icon tile ─── */
.product-card-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 10px;
  background:
    radial-gradient(circle at 1.5px 1.5px, rgba(3, 105, 161, 0.14) 1px, transparent 0) 0 0 / 14px 14px,
    linear-gradient(135deg, rgba(3, 105, 161, 0.06) 0%, rgba(3, 105, 161, 0.015) 100%);
  border-right: 1px solid var(--border-light);
  position: relative;
}

.product-cat-icon {
  width: 52px;
  height: 52px;
  border-radius: 13px;
  background: var(--card);
  border: 1px solid rgba(3, 105, 161, 0.14);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 4px 12px -4px rgba(3, 105, 161, 0.1);
  transition: transform 0.25s cubic-bezier(.2,.9,.3,1.2), box-shadow 0.2s;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.product-card:hover .product-cat-icon {
  transform: scale(1.06) rotate(-2deg);
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.06),
    0 8px 20px -4px rgba(3, 105, 161, 0.22);
}

.product-cat-icon .material-symbols-rounded {
  font-size: 1.55rem;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

/* Uploaded image variant */
.product-img-thumb {
  width: 66px;
  height: 66px;
  border-radius: 13px;
  overflow: hidden;
  border: 2px solid var(--card);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 6px 16px -4px rgba(3, 105, 161, 0.18);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(.2,.9,.3,1.2);
}

.product-card:hover .product-img-thumb { transform: scale(1.04); }

.product-img-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Category label under icon */
.product-cat-label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--primary);
  text-transform: uppercase;
  line-height: 1;
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─── Right: Content body ─── */
.product-card-body {
  padding: 14px 56px 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  gap: 2px;
}

.product-info {
  min-width: 0;
}

.product-name {
  font-weight: 700;
  font-size: 0.97rem;
  color: var(--text-primary);
  letter-spacing: -0.015em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-price-row {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.product-price {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.product-cost {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.product-margin {
  color: var(--success, #059669);
  font-weight: 700;
  margin-left: 2px;
}

.product-meta {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.product-badge {
  font-size: 0.58rem;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 4px;
  background: #FEF3C7;
  color: #92400E;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.product-badge.success {
  background: #D1FAE5;
  color: #065F46;
}

.product-badge.warning {
  background: #FEF3C7;
  color: #92400E;
}

.product-badge.danger {
  background: #FEE2E2;
  color: #991B1B;
}

.product-desc {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 4px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Floating Action Cluster ─── */
.product-card-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transform: translateX(4px);
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(.2,.9,.3,1.2);
  z-index: 4;
}

.product-card:hover .product-card-actions,
.product-card:focus-within .product-card-actions {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 768px), (hover: none) {
  .product-card-actions {
    opacity: 1;
    transform: none;
  }
}

.product-card-action {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-light);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.product-card-action:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  transform: scale(1.08);
}

.product-card-action--danger:hover {
  background: var(--danger, #ef4444);
  border-color: var(--danger, #ef4444);
}

.product-card-action .material-symbols-rounded {
  font-size: 0.9rem;
  font-variation-settings: 'FILL' 0, 'wght' 500;
}

/* Mobile: full width with tighter tile */
@media (max-width: 480px) {
  .product-grid { grid-template-columns: 1fr; gap: 10px; }
  .product-card { grid-template-columns: 78px 1fr; }
  .product-card-tile { padding: 12px 8px; }
  .product-cat-icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
  }
  .product-cat-icon .material-symbols-rounded { font-size: 1.35rem; }
  .product-img-thumb {
    width: 58px;
    height: 58px;
    border-radius: 11px;
  }
  .product-cat-label { font-size: 0.54rem; max-width: 66px; }
  .product-card-body { padding: 12px 52px 12px 14px; }
  .product-name { font-size: 0.9rem; }
  .product-price { font-size: 1.16rem; }
}

/* ═══════════════════════════════════════════════════════════
   RENTAL INVENTORY CARDS — Editorial Catalog Design (Apr 2026)
   Horizontal: textured icon tile + content + floating actions
   ─────────────────────────────────────────────────────────── */
.inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 12px;
  margin-bottom: var(--space-md);
}

.inv-card {
  display: grid;
  grid-template-columns: 92px 1fr;
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(.2,.9,.3,1.2), border-color 0.18s, box-shadow 0.25s;
  position: relative;
  overflow: hidden;
  padding: 0;
  min-width: 0;
  align-items: stretch;
}

.inv-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--primary);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s cubic-bezier(.2,.9,.3,1.2);
  z-index: 3;
}

.inv-card:hover {
  border-color: var(--primary);
  box-shadow: 0 12px 28px -12px rgba(3, 105, 161, 0.18), 0 2px 6px rgba(15, 23, 42, 0.04);
  transform: translateY(-3px);
}

.inv-card:hover::before { transform: scaleY(1); }
.inv-card:active { transform: translateY(-1px); }

/* Stock states — persistent left stripe */
.inv-card.inv-low::before  { background: var(--warning, #d97706); transform: scaleY(1); }
.inv-card.inv-out::before  { background: var(--danger, #ef4444); transform: scaleY(1); }
.inv-card.inv-out { opacity: 0.85; }

/* Left: Icon tile */
.inv-card-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 10px;
  background:
    radial-gradient(circle at 1.5px 1.5px, rgba(3, 105, 161, 0.14) 1px, transparent 0) 0 0 / 14px 14px,
    linear-gradient(135deg, rgba(3, 105, 161, 0.06) 0%, rgba(3, 105, 161, 0.015) 100%);
  border-right: 1px solid var(--border-light);
  position: relative;
}

.inv-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 13px;
  background: var(--card);
  border: 1px solid rgba(3, 105, 161, 0.14);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 4px 12px -4px rgba(3, 105, 161, 0.1);
  transition: transform 0.25s cubic-bezier(.2,.9,.3,1.2), box-shadow 0.2s;
  position: relative;
  z-index: 1;
}

.inv-card:hover .inv-card-icon {
  transform: scale(1.06) rotate(-2deg);
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.06),
    0 8px 20px -4px rgba(3, 105, 161, 0.22);
}

.inv-card-icon .material-symbols-rounded {
  font-size: 1.55rem;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.inv-card-cat {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--primary);
  text-transform: uppercase;
  line-height: 1;
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Right: content */
.inv-card-body {
  padding: 14px 48px 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  gap: 4px;
}

.inv-card-name {
  font-weight: 700;
  font-size: 0.97rem;
  color: var(--text-primary);
  letter-spacing: -0.015em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inv-card-price-row {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin-top: 2px;
}

.inv-card-price {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.inv-card-price-unit {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
}

.inv-card-meta {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.inv-badge {
  font-size: 0.58rem;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 4px;
  background: rgba(3, 105, 161, 0.08);
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.inv-badge.success {
  background: #D1FAE5;
  color: #065F46;
}

.inv-badge.warning {
  background: #FEF3C7;
  color: #92400E;
}

.inv-badge.danger {
  background: #FEE2E2;
  color: #991B1B;
}

.inv-card-earned {
  font-size: 0.68rem;
  color: var(--success, #059669);
  font-weight: 700;
  margin-top: 2px;
}

/* Floating edit action */
.inv-card-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transform: translateX(4px);
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(.2,.9,.3,1.2);
  z-index: 4;
}

.inv-card:hover .inv-card-actions,
.inv-card:focus-within .inv-card-actions {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 768px), (hover: none) {
  .inv-card-actions {
    opacity: 1;
    transform: none;
  }
}

.inv-card-action {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-light);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.inv-card-action:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  transform: scale(1.08);
}

.inv-card-action .material-symbols-rounded {
  font-size: 0.9rem;
  font-variation-settings: 'FILL' 0, 'wght' 500;
}

/* Mobile */
@media (max-width: 480px) {
  .inv-grid { grid-template-columns: 1fr; gap: 10px; }
  .inv-card { grid-template-columns: 78px 1fr; }
  .inv-card-tile { padding: 12px 8px; }
  .inv-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
  }
  .inv-card-icon .material-symbols-rounded { font-size: 1.35rem; }
  .inv-card-cat { font-size: 0.54rem; max-width: 66px; }
  .inv-card-body { padding: 12px 44px 12px 14px; }
  .inv-card-name { font-size: 0.9rem; }
  .inv-card-price { font-size: 1.16rem; }
}

/* ═══════════════════════════════════════════════════════════
   RENTAL HOME PAGE — Premium Redesign (Apr 2026)
   ─────────────────────────────────────────────────────────── */
.rental-home {
  padding: 0 4px;
}

/* ─── Hero Stats Grid ─── */
.rh-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

@media (max-width: 480px) {
  .rh-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

.rh-stat {
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 14px 12px;
  position: relative;
  overflow: hidden;
  text-align: left;
  transition: transform 0.2s, border-color 0.18s, box-shadow 0.25s;
}

.rh-stat::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(3, 105, 161, 0.06) 0%, transparent 50%);
  pointer-events: none;
}

.rh-stat:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
  box-shadow: 0 8px 20px -8px rgba(3, 105, 161, 0.15);
}

.rh-stat--danger::before {
  background: radial-gradient(circle at 100% 0%, rgba(239, 68, 68, 0.08) 0%, transparent 55%);
}

.rh-stat--danger .rh-stat-icon { color: var(--danger, #ef4444); }
.rh-stat--danger .rh-stat-value { color: var(--danger, #ef4444); }

.rh-stat-icon {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
}

.rh-stat-icon .material-symbols-rounded {
  font-size: 1.1rem;
  font-variation-settings: 'FILL' 1, 'wght' 500;
}

.rh-stat-value {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  position: relative;
  z-index: 1;
}

.rh-stat-label {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 6px;
  position: relative;
  z-index: 1;
}

/* ─── Outstanding Dues Banner ─── */
.rh-dues-banner {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.06), rgba(239, 68, 68, 0.01));
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 18px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.rh-dues-label {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--danger, #ef4444);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.rh-dues-amount {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--danger, #ef4444);
  letter-spacing: -0.035em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.rh-dues-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-left: auto;
}

/* ─── Section Headers ─── */
.rh-section {
  margin-bottom: 20px;
}

.rh-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
}

.rh-section-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.rh-section-label .material-symbols-rounded {
  font-size: 1rem;
  color: var(--primary);
}

.rh-section-header--danger .rh-section-label,
.rh-section-header--danger .rh-section-label .material-symbols-rounded {
  color: var(--danger, #ef4444);
}

.rh-section-header--warning .rh-section-label,
.rh-section-header--warning .rh-section-label .material-symbols-rounded {
  color: var(--warning, #d97706);
}

.rh-count-badge {
  font-size: 0.58rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 99px;
  background: rgba(3, 105, 161, 0.1);
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.rh-count-badge--danger {
  background: rgba(239, 68, 68, 0.12);
  color: var(--danger, #ef4444);
}

.rh-count-badge--warning {
  background: rgba(217, 119, 6, 0.12);
  color: var(--warning, #d97706);
}

/* ─── Empty State ─── */
.rh-empty {
  text-align: center;
  padding: 40px 20px;
  background: var(--card);
  border: 1px dashed var(--border);
  border-radius: 14px;
}

.rh-empty-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-radius: 16px;
  background: rgba(3, 105, 161, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}

.rh-empty-icon .material-symbols-rounded {
  font-size: 1.8rem;
  color: var(--primary);
  opacity: 0.5;
}

.rh-empty-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.rh-empty-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════
   RENTAL CARDS — Editorial Design (Apr 2026)
   ─────────────────────────────────────────────────────────── */
.rental-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: 12px;
}

.rental-card {
  display: grid;
  grid-template-columns: 80px 1fr;
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(.2,.9,.3,1.2), border-color 0.18s, box-shadow 0.25s;
  position: relative;
  overflow: hidden;
  align-items: stretch;
  min-width: 0;
}

.rental-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--primary);
  transform: scaleY(1);
  transform-origin: top;
  z-index: 3;
}

.rental-card--overdue::before { background: var(--danger, #ef4444); }
.rental-card--returned::before { background: var(--text-muted); }
.rental-card--cancelled::before { background: var(--text-muted); }
.rental-card--late_fee_pending::before { background: var(--warning, #d97706); }

.rental-card:hover {
  border-color: var(--primary);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -12px rgba(3, 105, 161, 0.18), 0 2px 6px rgba(15, 23, 42, 0.04);
}

.rental-card--overdue:hover {
  border-color: var(--danger, #ef4444);
  box-shadow: 0 12px 28px -12px rgba(239, 68, 68, 0.2), 0 2px 6px rgba(15, 23, 42, 0.04);
}

/* Left: Avatar tile */
.rental-card-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 8px;
  background:
    radial-gradient(circle at 1.5px 1.5px, rgba(3, 105, 161, 0.12) 1px, transparent 0) 0 0 / 14px 14px,
    linear-gradient(135deg, rgba(3, 105, 161, 0.05) 0%, rgba(3, 105, 161, 0.01) 100%);
  border-right: 1px solid var(--border-light);
}

.rental-card--overdue .rental-card-tile {
  background:
    radial-gradient(circle at 1.5px 1.5px, rgba(239, 68, 68, 0.14) 1px, transparent 0) 0 0 / 14px 14px,
    linear-gradient(135deg, rgba(239, 68, 68, 0.05) 0%, rgba(239, 68, 68, 0.01) 100%);
}

.rental-card-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--card);
  border: 1.5px solid rgba(3, 105, 161, 0.2);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  box-shadow: 0 2px 8px -2px rgba(3, 105, 161, 0.15);
  position: relative;
  z-index: 1;
}

.rental-card--overdue .rental-card-avatar {
  color: var(--danger, #ef4444);
  border-color: rgba(239, 68, 68, 0.3);
  box-shadow: 0 2px 8px -2px rgba(239, 68, 68, 0.2);
}

.rental-card-ref {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-transform: uppercase;
  line-height: 1;
  position: relative;
  z-index: 1;
  max-width: 68px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Right: Body */
.rental-card-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.rental-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.rental-card-name {
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.015em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.rental-card-badge {
  font-size: 0.54rem;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex-shrink: 0;
}

.rental-card-badge--success {
  background: #D1FAE5;
  color: #065F46;
}

.rental-card-badge--danger {
  background: #FEE2E2;
  color: #991B1B;
}

.rental-card-badge--warning {
  background: #FEF3C7;
  color: #92400E;
}

.rental-card-badge--neutral {
  background: var(--gray-100, #F3F4F6);
  color: var(--text-secondary);
}

.rental-card-items {
  font-size: 0.72rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.rental-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.rental-card-dates {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rental-card-arrow {
  color: var(--text-muted);
  opacity: 0.6;
  margin: 0 2px;
}

.rental-card-days {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.66rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.rental-card-days--late { color: var(--danger, #ef4444); }
.rental-card-days--today { color: var(--warning, #d97706); }
.rental-card-days--ok { color: var(--success, #059669); }

.rental-card-money {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-light);
}

.rental-card-amount {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.rental-card-progress {
  flex: 1;
  height: 4px;
  background: var(--border-light);
  border-radius: 2px;
  overflow: hidden;
}

.rental-card-progress-bar {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s;
}

.rental-card-due {
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.rental-card-due--danger { color: var(--danger, #ef4444); }
.rental-card-due--paid { color: var(--success, #059669); }

@media (max-width: 480px) {
  .rental-cards-grid { grid-template-columns: 1fr; }
  .rental-card { grid-template-columns: 68px 1fr; }
  .rental-card-tile { padding: 12px 6px; }
  .rental-card-avatar { width: 42px; height: 42px; font-size: 0.88rem; }
  .rental-card-ref { max-width: 56px; font-size: 0.52rem; }
  .rental-card-body { padding: 11px 12px; }
  .rental-card-name { font-size: 0.9rem; }
}

/* Package Accordion */
.pkg-accordion {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pkg-acc-section {
  transition: all .2s ease;
}

.pkg-acc-header:hover {
  filter: brightness(.97);
}

/* ── Responsive: Packages Module toolbar + tabs ─────────────────── */
@media (max-width: 480px) {
  .pkg-toolbar { flex-direction: column; align-items: stretch; }
  .pkg-tab { padding: 0 12px; min-height: 38px; font-size: 0.82rem; }
}

@media (pointer: coarse) {
  .pkg-card:hover,
  .addon-card:hover,
  .product-card:hover { transform: none; }
}

/* ── Pagination Component ──────────────────────────── */
.sh-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 0;
  flex-wrap: wrap;
}

.sh-pg-btn {
  min-width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  background: var(--card-bg, #fff);
  color: var(--text);
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.sh-pg-btn:hover:not(.disabled):not(.active) {
  background: var(--primary-light, #e8f0fe);
  border-color: var(--primary);
}

.sh-pg-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  font-weight: 600;
}

.sh-pg-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.sh-pg-dots {
  padding: 0 4px;
  color: var(--text-light);
}

.sh-pg-info {
  font-size: 12px;
  color: var(--text-light);
  margin-left: 8px;
}

/* Quotation status tabs: horizontal scroll on touch screens, but WRAP on
   desktop — hidden-scrollbar h-scroll is unusable with a mouse, and tabs
   past the fold ("Booked", "Rejected") became unreachable. */
body .qt-tabs {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

body .qt-tabs::-webkit-scrollbar { display: none; }

@media (min-width: 900px) {
  body .qt-tabs {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

/* Compact toolbar variant — inline pill next to filter chips */
body .sh-pagination--compact {
  padding: 0;
  gap: 3px;
  flex-wrap: nowrap;
  justify-content: flex-end;
  flex-shrink: 0;
}

body .sh-pagination--compact .sh-pg-btn {
  min-width: 30px;
  height: 32px;
  font-size: 13px;
  border-radius: 8px;
}

body .sh-pagination--compact .sh-pg-dots {
  padding: 0 2px;
  font-size: 12px;
}


/* =====================================================
   MOBILE HORIZONTAL OVERFLOW FIXES
   Fix actual sizing issues — no overflow-x:clip band-aids
   ===================================================== */

@media (max-width: 768px) {

  /* Long text truncation */
  .stat-value,
  .finance-stat-value {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .activity-row .client-phone {
    max-width: 100%;
    overflow: visible;
    white-space: normal;
    font-size: 0.8rem;
  }

  .wi-card-meta {
    max-width: 100%;
    overflow: hidden;
  }

  /* Phase 9 Calendar Widget Mobile Fixes */
  body .dash-grid .card .calendar-grid,
  body .dash-grid .card,
  body .mini-calendar-card {
    overflow: visible;
    width: 99%;
  }

  /* Phase 12 Calendar + Legend Mobile Stacking */
  body .hide-mobile,
  body .calendar-legend-wrap {
    flex-direction: column;
  }

  body #miniCalendarSlot,
  body .color-legend-card {
    width: 100%;
  }

  body #miniCalendarSlot {
    order: 1;
  }

  body .color-legend-card {
    order: 2;
  }

  body .mini-cal-day,
  body .mini-cal-empty {
    aspect-ratio: 1 / 1;
    min-width: 0;
    min-height: 0;
  }

  /* Phase 13 Final 375px Sub-element Polish */
  body .mini-calendar-card {
    padding: 8px;
  }

  body .color-legend-card .legend-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
  }

  body .activity-row {
    padding-right: 8px;
  }

  body .activity-time {
    flex-shrink: 0;
    font-size: 0.7rem;
    white-space: nowrap;
  }
}

/* ─────────────────────────────────────────────────────
   PHASE 8 — QUICK ACTIONS ENTRANCE ANIMATIONS
   ───────────────────────────────────────────────────── */

.quick-actions {
  margin-top: 24px;
}

@keyframes gentleFloat {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-3px);
  }
}

@keyframes pulseGlow {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.4);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(14, 165, 233, 0.0);
  }
}

.quick-action-btn {
  animation: gentleFloat 2.5s ease-in-out infinite;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.quick-action-btn:hover {
  animation: pulseGlow 0.6s ease-out;
  transform: translateY(-4px);
}

.quick-action-btn:nth-child(1) {
  animation-delay: 0.0s;
}

.quick-action-btn:nth-child(2) {
  animation-delay: 0.2s;
}

.quick-action-btn:nth-child(3) {
  animation-delay: 0.4s;
}

.quick-action-btn:nth-child(4) {
  animation-delay: 0.6s;
}

.quick-action-btn:nth-child(5) {
  animation-delay: 0.8s;
}

.quick-action-btn:nth-child(6) {
  animation-delay: 1.0s;
}

/* ─── Collect Payment: Installment Schedule Pills ─── */
.cp-schedule-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.cp-sched-loading {
  font-size: 0.72rem;
  color: var(--text-muted, #9ca3af);
}

.cp-sched-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
}

.cp-sched-pill.paid {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}

.cp-sched-pill.pending {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
}

.cp-sched-pill.overdue {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}

/* ─── Collect Payment: Daily Collection Summary ─── */
.cp-daily-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: linear-gradient(135deg, hsl(200, 80%, 18%) 0%, hsl(220, 60%, 12%) 100%);
  border-radius: 20px;
  padding: 18px;
  margin-bottom: 16px;
  color: #fff;
  box-shadow: 0 4px 20px hsla(200, 80%, 20%, 0.25);
}

.cp-daily-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: hsla(0, 0%, 100%, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cp-daily-icon .material-symbols-rounded {
  font-size: 1.4rem;
  color: hsl(142, 70%, 60%);
}

.cp-daily-content {
  flex: 1;
}

.cp-daily-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.65;
  margin-bottom: 4px;
}

.cp-daily-total {
  font-family: 'Plus Jakarta Sans', 'Outfit', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 10px;
}

.cp-daily-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cp-daily-pill {
  background: hsla(0, 0%, 100%, 0.1);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.75rem;
  display: flex;
  gap: 5px;
  align-items: center;
}

.cp-daily-pill .material-symbols-rounded {
  font-size: 0.85rem;
  opacity: 0.7;
}

/* ─── Collect Payment: Pending to Collect (who owes) ─── */
.cp-pending-section {
  background: var(--card, #fff);
  border: 1px solid var(--border-light, #e8edf3);
  border-radius: 18px;
  padding: 4px 6px 8px;
  margin-bottom: 16px;
  box-shadow: 0 2px 12px hsla(215, 30%, 40%, 0.06);
  overflow: hidden;
}
.cp-pending-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 12px 9px;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text-primary, #0f172a);
}
.cp-pending-head-icon { font-size: 1.15rem; color: var(--primary, #2563eb); }
.cp-pending-head-title { flex: 1; }
.cp-pending-total {
  font-family: 'Plus Jakarta Sans', 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--text-primary, #0f172a);
}
.cp-pending-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  min-height: 56px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s ease;
  animation: cpPendingIn 0.3s ease both;
}
.cp-pending-item:hover { background: var(--hover, #f1f5f9); }
.cp-pending-item:active { background: var(--border-light, #e8edf3); }
.cp-pending-info { flex: 1; min-width: 0; }
.cp-pending-name {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text-primary, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cp-pending-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 0.75rem;
  color: var(--text-secondary, #64748b);
}
.cp-pending-badge {
  font-size: 0.66rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.cp-pending-badge--over { background: hsla(0, 75%, 55%, 0.12); color: hsl(0, 70%, 47%); }
.cp-pending-badge--due { background: hsla(38, 92%, 50%, 0.15); color: hsl(30, 80%, 40%); }
.cp-pending-badge--bal { background: hsla(0, 72%, 56%, 0.10); color: hsl(0, 64%, 51%); }
.cp-pending-amt {
  font-family: 'Plus Jakarta Sans', 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 0.98rem;
  color: var(--text-primary, #0f172a);
  flex-shrink: 0;
}
.cp-pending-arrow { font-size: 1.2rem; color: var(--text-muted, #94a3b8); flex-shrink: 0; }
.cp-pending-more {
  text-align: center;
  padding: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary, #64748b);
}
.cp-pending-viewall {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px;
  min-height: 44px;
  background: none;
  border: none;
  border-top: 1px solid var(--border-light, #e8edf3);
  margin-top: 2px;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--primary, #2563eb);
  cursor: pointer;
}
.cp-pending-viewall:hover { background: var(--hover, #f1f5f9); }
.cp-pending-viewall .material-symbols-rounded { font-size: 1.15rem; }
@keyframes cpPendingIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.cp-daily-pill strong {
  font-weight: 700;
}

/* ─── Dues Section ─── */
.cp-dues-section {
  margin-top: 8px;
  margin-bottom: 16px;
}

.cp-section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px 10px;
}

.cp-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Plus Jakarta Sans', 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: .95rem;
  color: var(--foreground);
}

.cp-section-title .material-symbols-rounded {
  font-size: 1.15rem;
  color: var(--primary);
}

.cp-dues-badge {
  background: var(--danger);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  min-width: 24px;
  text-align: center;
}

/* ─── Dues list & cards ─── */
.cp-dues-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cp-select-all-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: var(--gray-50);
  border-radius: 14px;
  margin-bottom: 4px;
  font-size: 0.88rem;
}

.cp-checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
}

.cp-checkbox-label input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: var(--primary);
  cursor: pointer;
}

.cp-dues-total-badge {
  font-family: 'Plus Jakarta Sans', 'Outfit', sans-serif;
  font-weight: 800;
  font-size: .95rem;
  color: var(--danger);
}

/* Individual due card */
.cp-due-card {
  border-radius: 16px;
  border: 1.5px solid var(--border);
  background: var(--card);
  transition: all .2s;
  animation: cpFadeUp .3s ease-out both;
}

.cp-due-card:has(input:checked) {
  border-color: var(--primary);
  background: hsla(200, 80%, 44%, 0.04);
  box-shadow: 0 0 0 3px hsla(200, 80%, 44%, 0.06);
}

.cp-due-card-ob {
  border: 1.5px dashed var(--warning);
  background: hsla(38, 92%, 50%, 0.04);
}

.cp-due-card-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  cursor: pointer;
  width: 100%;
}

.cp-due-cb-wrap {
  flex-shrink: 0;
}

.cp-due-cb-wrap input[type="checkbox"] {
  width: 24px;
  height: 24px;
  min-width: 24px;
  accent-color: var(--primary);
  cursor: pointer;
}

.cp-due-type-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cp-due-type-icon .material-symbols-rounded {
  font-size: 1.15rem;
}

.cp-due-details {
  flex: 1;
  min-width: 0;
}

.cp-due-name {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: .9rem;
  color: var(--foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cp-due-date {
  font-family: 'DM Sans', sans-serif;
  font-size: .72rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
}

.cp-due-progress-wrap {
  margin-top: 5px;
}

.cp-due-progress-track {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 3px;
  width: 100%;
  max-width: 120px;
}

.cp-due-progress-bar {
  height: 100%;
  border-radius: 2px;
  transition: width .6s ease-out;
}

.cp-due-progress-text {
  font-family: 'DM Sans', sans-serif;
  font-size: .72rem;
  color: var(--text-secondary);
}

.cp-due-waived {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 3px;
  font-size: .72rem;
  color: var(--warning);
  font-weight: 500;
}

.cp-due-amount-col {
  text-align: right;
  flex-shrink: 0;
}

.cp-due-balance-amt {
  font-family: 'Plus Jakarta Sans', 'Outfit', sans-serif;
  font-weight: 800;
  color: var(--danger);
  font-size: .95rem;
  cursor: pointer;
  min-height: 44px;
  min-width: 70px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.cp-due-baaki-label {
  font-family: 'DM Sans', sans-serif;
  font-size: .65rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .3px;
}

.cp-inline-edit {
  width: 80px;
  font-size: 0.88rem;
  font-weight: 700;
  text-align: right;
  padding: 6px 8px;
  border: 2px solid var(--primary);
  border-radius: var(--radius-sm);
  outline: none;
  background: var(--card);
  color: var(--foreground);
}

/* ─── Payment form card ─── */
.cp-pay-card {
  margin-top: 16px;
  padding: 18px;
  background: var(--card);
  border-radius: 20px;
  border: 1.5px solid var(--border);
  box-shadow: 0 2px 12px hsla(210, 20%, 50%, 0.06);
}

.cp-pay-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Plus Jakarta Sans', 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: .95rem;
  color: var(--foreground);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
}

.cp-pay-card-header .material-symbols-rounded {
  font-size: 1.2rem;
  color: var(--primary);
}

/* Selected summary bar */
.cp-selected-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: var(--primary-50);
  border-radius: 12px;
  border: 1px solid var(--primary-100);
}

.cp-sel-info {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cp-sel-info .material-symbols-rounded {
  font-size: 1rem;
  color: var(--primary);
}

.cp-sel-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.cp-sel-amount {
  font-family: 'Plus Jakarta Sans', 'Outfit', sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--primary);
}

/* Credit toggle */
.cp-credit-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 0.88rem;
  cursor: pointer;
  background: hsla(142, 70%, 45%, 0.06);
  border-radius: 12px;
  border: 1px solid hsla(142, 70%, 45%, 0.12);
}

.cp-credit-toggle input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: var(--success);
  cursor: pointer;
}

.cp-credit-toggle-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  color: var(--success);
}

/* Amount input with prefix */
.cp-amount-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--gray-50);
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 0 4px 0 0;
  margin-bottom: 12px;
  transition: border-color .2s, box-shadow .2s;
}

.cp-amount-wrap:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px hsla(200, 80%, 44%, 0.08);
}

.cp-amount-prefix {
  font-family: 'Plus Jakarta Sans', 'Outfit', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-secondary);
  padding: 12px 6px 12px 16px;
  flex-shrink: 0;
  user-select: none;
}

.cp-amount-field {
  flex: 1;
  border: none;
  background: none;
  font-family: 'Plus Jakarta Sans', 'Outfit', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  padding: 14px 10px;
  outline: none;
  color: var(--foreground);
  min-width: 0;
}

.cp-amount-field::placeholder {
  color: var(--text-muted);
  opacity: .5;
}

/* Quick chips */
.cp-quick-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.cp-quick-chip {
  padding: 8px 14px;
  border-radius: 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--text-secondary);
  transition: all .15s;
  display: flex;
  align-items: center;
  gap: 4px;
}

.cp-quick-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.cp-quick-chip.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.cp-quick-chip.cp-chip-full {
  border-color: var(--success);
  color: var(--success);
  font-weight: 700;
}

.cp-quick-chip.cp-chip-full:hover,
.cp-quick-chip.cp-chip-full.active {
  background: var(--success);
  color: #fff;
  border-color: var(--success);
}

/* Mode picker pills */
.cp-mode-label {
  font-family: 'DM Sans', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.cp-mode-picker {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-bottom: 14px;
}
.cp-mode-picker::-webkit-scrollbar { display: none; }

.cp-mode-pill {
  display: flex;
  flex: 0 0 auto;
  white-space: nowrap;
  align-items: center;
  gap: 5px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--card);
  font-family: 'DM Sans', sans-serif;
  font-size: .82rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all .15s;
}

.cp-mode-pill .material-symbols-rounded {
  font-size: 1rem;
}

.cp-mode-pill:hover {
  border-color: var(--primary-200);
  color: var(--primary);
}

.cp-mode-pill.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 2px 8px hsla(200, 80%, 44%, 0.2);
}

.cp-mode-pill.active .material-symbols-rounded {
  color: #fff;
}

/* Form row */
.cp-form-row {
  display: flex;
  gap: 10px;
  margin-bottom: var(--space-sm);
}

.cp-date-input {
  font-family: 'DM Sans', sans-serif;
}

/* Media section */
.cp-media-section {
  margin-top: 8px;
  margin-bottom: 8px;
}

.cp-media-label {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 4px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Compact voice + photo icon toggles (collapse the big optional sections) */
.cp-media-icons { display: flex; gap: 8px; margin-bottom: 8px; }
.cp-media-icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 40px;
}
.cp-media-icon-btn .material-symbols-rounded { font-size: 1.15rem; color: var(--primary); }
.cp-media-icon-btn.active {
  border-color: var(--primary);
  background: var(--primary-50, rgba(99, 102, 241, 0.08));
  color: var(--primary);
}
.cp-media-host { margin-bottom: 10px; }

/* ─── Compact density on phones — trim fatty padding/margins, keep 44px taps ─── */
@media (max-width: 480px) {
  .cp-pay-card { padding: 12px; margin-top: 10px; border-radius: 16px; }
  .cp-pay-card-header { margin-bottom: 10px; padding-bottom: 8px; }
  .cp-dues-section { margin-top: 4px; margin-bottom: 10px; }
  .cp-section-header-row { padding: 0 2px 6px; }
  .cp-due-card { border-radius: 14px; }
  .cp-due-card-inner { padding: 10px; gap: 8px; }
  .cp-due-type-icon { width: 36px; height: 36px; }
  .cp-amount-wrap { margin-bottom: 8px; border-radius: 14px; }
  .cp-amount-field { padding: 11px 10px; }
  .cp-amount-prefix { padding: 11px 6px 11px 12px; }
  .cp-quick-chips { margin-bottom: 8px; }
  .cp-quick-chip { padding: 7px 12px; }
  .cp-mode-label { margin-bottom: 5px; }
  .cp-mode-picker { margin-bottom: 8px; }
  .cp-media-icons { margin-bottom: 6px; }
  .cp-media-host { margin-bottom: 8px; }
  .cp-history-section { margin-top: 10px; }
}

/* Submit button */
.cp-submit-btn {
  width: 100%;
  margin-top: 14px;
  padding: 16px;
  font-family: 'Plus Jakarta Sans', 'DM Sans', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--success) 0%, hsl(160, 60%, 40%) 100%);
  color: #fff;
  cursor: pointer;
  transition: all .2s;
  box-shadow: 0 4px 14px hsla(142, 70%, 45%, 0.25);
  min-height: 52px;
}

.cp-submit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px hsla(142, 70%, 45%, 0.3);
}

.cp-submit-btn:active {
  transform: translateY(0);
}

.cp-submit-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

.cp-submit-btn .material-symbols-rounded {
  font-size: 1.2rem;
}

.cp-btn-spinner {
  width: 20px;
  height: 20px;
  border: 3px solid hsla(0, 0%, 100%, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .6s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Auto note */
.cp-auto-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  color: var(--text-secondary);
  text-align: center;
  margin-top: 10px;
  padding: 8px 12px;
  background: hsla(38, 92%, 50%, 0.06);
  border-radius: 10px;
}

.cp-auto-note .material-symbols-rounded {
  font-size: .85rem;
  color: var(--warning);
}

/* ─── Sticky footer ─── */
.cp-sticky-footer {
  position: fixed;
  bottom: 60px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--card);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 20px hsla(0, 0%, 0%, 0.08);
  z-index: 90;
  transform: translateY(100%);
  opacity: 0;
  transition: transform .25s, opacity .25s;
}

.cp-sticky-footer.cp-sticky-visible {
  transform: translateY(0);
  opacity: 1;
}

.cp-sticky-info {
  flex: 1;
}

.cp-sticky-clearing {
  font-family: 'DM Sans', sans-serif;
  font-size: .75rem;
  color: var(--text-secondary);
}

.cp-sticky-amount {
  font-family: 'Plus Jakarta Sans', 'Outfit', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--foreground);
}

.cp-sticky-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  background: linear-gradient(135deg, var(--success) 0%, hsl(160, 60%, 40%) 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 10px hsla(142, 70%, 45%, 0.2);
}

.cp-sticky-btn .material-symbols-rounded {
  font-size: 1.1rem;
}

/* ─── Receipt redesign ─── */
.cp-receipt-hero {
  text-align: center;
  padding: 24px 0 16px;
}

.cp-receipt-check-wrap {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: hsla(142, 70%, 45%, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

.cp-receipt-check-icon {
  font-size: 2.5rem;
  color: var(--success);
}

.cp-receipt-amount-big {
  font-family: 'Plus Jakarta Sans', 'Outfit', sans-serif;
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--foreground);
  margin-bottom: 4px;
}

.cp-receipt-client-name {
  font-family: 'DM Sans', sans-serif;
  font-size: .92rem;
  color: var(--text-secondary);
}

.cp-receipt-num {
  font-family: 'DM Sans', sans-serif;
  font-size: .72rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.cp-receipt-allocs {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--gray-50);
  border-radius: 12px;
}

.cp-receipt-alloc-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.cp-receipt-alloc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
}

.cp-receipt-alloc-row strong {
  margin-left: auto;
  color: var(--success);
  font-weight: 700;
}

.cp-receipt-credit-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin-top: 10px;
  border-radius: 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
}

.cp-receipt-credit-add {
  background: hsla(142, 70%, 45%, 0.08);
  color: var(--success);
}

.cp-receipt-credit-add .material-symbols-rounded {
  color: var(--success);
}

.cp-receipt-credit-used {
  background: hsla(38, 92%, 50%, 0.08);
  color: var(--warning);
}

.cp-receipt-credit-used .material-symbols-rounded {
  color: var(--warning);
}

/* ─── Payment History Timeline ─── */
.cp-history-section {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
}

.cp-history-loading {
  padding: 24px 0;
  display: flex;
  justify-content: center;
}

.cp-history-empty {
  text-align: center;
  padding: 24px;
  color: var(--text-secondary);
}

.cp-history-empty .material-symbols-rounded {
  font-size: 2rem;
  display: block;
  margin-bottom: 8px;
  opacity: .35;
}

.cp-history-empty p {
  font-family: 'DM Sans', sans-serif;
  font-size: .85rem;
  margin: 0;
}

.cp-history-timeline {
  position: relative;
  padding-left: 24px;
}

.cp-history-timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--border);
  border-radius: 1px;
}

.cp-history-item {
  position: relative;
  margin-bottom: 10px;
  animation: cpFadeUp .3s ease-out both;
}

.cp-history-dot {
  position: absolute;
  left: -20px;
  top: 14px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--success);
  border: 2px solid var(--card);
  box-shadow: 0 0 0 2px hsla(142, 70%, 45%, 0.2);
}

.cp-history-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
}

.cp-history-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.cp-history-amt {
  font-family: 'Plus Jakarta Sans', 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--success);
}

.cp-history-mode {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'DM Sans', sans-serif;
  font-size: .78rem;
  color: var(--text-secondary);
  background: var(--gray-50);
  padding: 3px 10px;
  border-radius: 999px;
}

.cp-history-mode .material-symbols-rounded {
  font-size: .85rem;
}

.cp-history-date {
  font-family: 'DM Sans', sans-serif;
  font-size: .75rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.cp-history-notes {
  font-family: 'DM Sans', sans-serif;
  font-size: .78rem;
  color: var(--text-muted);
  margin-top: 4px;
  font-style: italic;
}

/* ─── Mobile responsive for Collect Payment ─── */
@media (max-width: 480px) {
  .cp-hero {
    padding: 16px 16px 16px;
  }

  .cp-form-row {
    flex-direction: column;
    gap: 6px;
  }

  .cp-form-row .form-group {
    flex: 1 1 100%;
  }

  .cp-due-card-inner {
    padding: 12px 10px;
    gap: 8px;
  }

  .cp-due-cb-wrap input[type="checkbox"] {
    width: 26px;
    height: 26px;
    min-width: 26px;
  }

  .cp-checkbox-label input[type="checkbox"] {
    width: 26px;
    height: 26px;
  }

  .cp-select-all-row {
    padding: 12px;
  }

  .cp-submit-btn {
    min-height: 52px;
    font-size: 1.05rem;
  }

  .cp-stats-row {
    flex-wrap: wrap;
  }

  .cp-stat-item {
    min-width: calc(50% - 4px);
  }

  .cp-mode-pill {
    padding: 10px 12px;
    font-size: .8rem;
  }

  .cp-sticky-footer {
    bottom: 56px;
  }
}

/* Desktop: constrain CP form width */
@media (min-width: 768px) {
  .cp-page {
    max-width: 600px;
    margin: 0 auto;
  }

  .cp-sticky-footer {
    max-width: 600px;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    border-radius: 16px 16px 0 0;
  }

  .cp-sticky-footer.cp-sticky-visible {
    transform: translateX(-50%) translateY(0);
  }
}

@media (min-width: 1024px) {
  .cp-page {
    max-width: 640px;
  }
}

/* ─────────────────────────────────────────────────────
   COLLECT PAYMENT — Redesign Overrides (Sea Blue)
   ───────────────────────────────────────────────────── */

/* Hide old hero — replaced by compact search */
body .cp-hero {
  display: none;
}

/* Clear button inside search box */
body .cp-search-box .cp-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

/* Defensive guard: nav-items should only contain icon + label spans.
   If a browser extension (Claude/Gemini DOM scrapers, screen readers,
   translation tools) clones page content into a nav <a>, hide the leak
   so the sidebar layout doesn't collapse. */
.sidebar .nav-item > :not(span) {
  display: none;
}

/* Search section */
body .cp-search-section {
  padding: 12px 16px 4px;
}

body .cp-search-box {
  position: relative;
}

body .cp-search-box .cp-search-input {
  width: 100%;
  padding: 12px 14px 12px 42px;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  background: var(--card);
  font-size: 0.92rem;
  color: var(--text);
  outline: none;
  transition: all 0.2s;
  box-shadow: 0 1px 3px rgba(14, 165, 233, 0.06);
}

body .cp-search-box .cp-search-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15), 0 1px 3px rgba(14, 165, 233, 0.06);
}

body .cp-search-box .cp-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 20px;
  pointer-events: none;
  transition: color 0.2s;
}

body .cp-search-box .cp-search-input:focus~.cp-search-icon,
body .cp-search-box .cp-search-input:focus+.cp-search-icon {
  color: var(--primary);
}

/* Compact profile card */
body .cp-profile-compact {
  margin: 8px 0;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(14, 165, 233, 0.06);
}

body .cp-stats-compact {
  display: flex;
  gap: 8px;
}

body .cp-stats-compact .cp-stat-item {
  flex: 1;
  text-align: center;
  padding: 8px 4px;
  border-radius: 10px;
  background: var(--background, #F4F8FB);
  border: none;
  min-width: 0;
}

body .cp-stats-compact .cp-stat-value {
  font-size: clamp(0.72rem, 2.5vw, 0.92rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 2px;
}

body .cp-stats-compact .cp-stat-label {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* Due cards — compact 3D */
body .cp-due-card {
  border-radius: 14px;
  border: 1px solid var(--border);
  margin-bottom: 6px;
  box-shadow: 0 1px 3px rgba(14, 165, 233, 0.06);
  transition: all 0.2s ease;
}

body .cp-due-card:hover {
  border-color: var(--primary);
}

body .cp-due-card:has(input:checked) {
  border-color: var(--primary);
  background: rgba(14, 165, 233, 0.04);
}

/* Daily summary card — compact */
body .cp-daily-card {
  margin: 8px 0;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(16, 185, 129, 0.15);
  background: rgba(16, 185, 129, 0.04);
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.06);
  color: var(--foreground);
}
body .cp-daily-card .cp-daily-label {
  color: #1B5E20;
  opacity: 0.8;
}
body .cp-daily-card .cp-daily-total {
  color: #1B5E20;
}
body .cp-daily-card .cp-daily-pill {
  background: rgba(16, 185, 129, 0.1);
  color: #2E7D32;
}
body .cp-daily-card .cp-daily-icon {
  background: rgba(16, 185, 129, 0.12);
}

/* Recent payments section */
body .cp-recent-section {
  margin: 10px 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(14, 165, 233, 0.06);
  overflow: hidden;
}

body .cp-recent-head {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text);
  padding: 12px 14px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

body .cp-recent-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--border-light, #f1f5f9);
  cursor: pointer;
  transition: background 0.15s;
  animation: calFadeUp 0.3s ease both;
}

body .cp-recent-item:hover {
  background: rgba(14, 165, 233, 0.04);
}

body .cp-recent-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

body .cp-recent-icon .material-symbols-rounded {
  font-size: 1rem;
}

body .cp-recent-info {
  flex: 1;
  min-width: 0;
}

body .cp-recent-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text);
}

body .cp-recent-meta {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-top: 1px;
}

body .cp-recent-staff {
  font-size: 0.62rem;
  color: var(--text-muted);
  margin-top: 2px;
  font-style: italic;
}

body .cp-recent-amt {
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  flex-shrink: 0;
}

/* Payment form card — tighter */
body .cp-pay-card {
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(14, 165, 233, 0.06);
  padding: 14px;
}

/* Mode pills — single horizontal scroll row (no wrap) */
body .cp-mode-picker {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
body .cp-mode-picker::-webkit-scrollbar { display: none; }

body .cp-mode-pill {
  flex: 0 0 auto;
  white-space: nowrap;
  border-radius: 999px;
  padding: 8px 12px;
  border: 1.5px solid var(--border);
  transition: all 0.2s;
}

body .cp-mode-pill.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.25);
}

/* Submit button — green */
body .cp-submit-btn {
  background: var(--success);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);
  border-radius: 14px;
}

body .cp-submit-btn:hover {
  filter: brightness(1.05);
}

/* Sticky footer */
body .cp-sticky-footer {
  border-radius: 0;
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
}

/* Client results — 3D cards */
body .cp-client-row {
  border-radius: 14px;
  border: 1px solid var(--border);
  margin-bottom: 8px;
  box-shadow: 0 1px 3px rgba(14, 165, 233, 0.06);
  transition: all 0.2s;
}

body .cp-client-row:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(14, 165, 233, 0.08), 0 6px 12px rgba(14, 165, 233, 0.10);
}

/* ═════════════════════════════════════════════════════
   CLIENTS & ASSISTANTS — Redesigned Pages
   ═════════════════════════════════════════════════════ */

.clients-page,
.assistants-page {
  padding: 0 0 80px;
}

.clients-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 8px;
}

.clients-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
}

.clients-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 16px;
  padding: 10px 14px;
  background: var(--gray-50);
  border-radius: 12px;
  border: 1px solid var(--border);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.clients-search:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 8%, transparent);
}

.clients-search input {
  border: none;
  background: none;
  outline: none;
  flex: 1;
  font-size: 16px;
  font-family: 'DM Sans', sans-serif;
  color: var(--text-primary);
}

.clients-search-clear {
  display: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--gray-100);
  color: var(--text-muted);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  min-width: 44px;
  min-height: 44px;
}

.clients-search-clear.visible {
  display: flex;
}

.clients-search input::placeholder {
  color: var(--text-muted);
}

.clients-filters {
  display: flex;
  gap: 8px;
  padding: 8px 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.clients-filters::-webkit-scrollbar {
  display: none;
}

.filter-pill {
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--card);
  font-size: 13px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s;
}

.filter-pill.active {
  background: var(--text-primary);
  color: #fff;
  border-color: var(--text-primary);
}

.filter-pill:hover {
  border-color: var(--text-primary);
}

.filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  margin-left: 4px;
  padding: 0 5px;
}

.clients-total-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  margin: 4px 16px 8px;
}

.clients-cards {
  padding: 0 16px;
}

/* ─── Client / Assistant Card ──────────────────────── */
.client-card {
  background: var(--card);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.1s;
  position: relative;
  overflow: hidden;
}

.client-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--primary);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.client-card:active::after {
  opacity: 0.03;
}

.client-card:active {
  transform: scale(0.98);
}

.client-card.loading-detail {
  opacity: 0.7;
  pointer-events: none;
}

.client-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.client-card-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary-100);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  font-family: 'DM Sans', sans-serif;
  flex-shrink: 0;
}

.client-card-info {
  flex: 1;
  min-width: 0;
}

.client-card-name {
  font-weight: 700;
  font-size: 16px;
  color: var(--text-primary);
  font-family: 'DM Sans', sans-serif;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.client-card-phone {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
  font-family: 'DM Sans', sans-serif;
  display: flex;
  align-items: center;
  gap: 4px;
}

.client-card-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.client-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
}

.client-badge.due {
  background: #FEF2F2;
  color: var(--danger);
}

.client-badge.clear {
  background: #F0FDF4;
  color: var(--success);
}

.client-badge.vip {
  background: #FFF7ED;
  color: #f59e0b;
}

.client-badge.upcoming {
  background: #EFF6FF;
  color: var(--primary);
}

.client-card-progress {
  margin-bottom: 10px;
}

.progress-bar-bg {
  height: 6px;
  background: var(--gray-100);
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: var(--success);
  border-radius: 3px;
  transition: width 0.3s;
}

.progress-text {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 4px;
  font-family: 'DM Sans', sans-serif;
}

.client-card-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.client-quick-action {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card);
  font-size: 11px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  color: var(--success);
  cursor: pointer;
  min-height: 36px;
  transition: background 0.1s;
}

.client-quick-action .material-symbols-rounded {
  font-size: 16px;
}

.client-quick-action:active {
  background: var(--gray-50);
}

.client-quick-action.wa {
  color: #25D366;
}

.client-quick-action.collect {
  color: var(--primary);
}

.client-card-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--gray-100);
  font-size: 12px;
  color: var(--text-secondary);
  font-family: 'DM Sans', sans-serif;
}

.client-card-total .total-amount {
  font-weight: 800;
  font-size: 16px;
  color: var(--primary);
}

/* ─── Clients Density v2 (flag: sh_clients_density=v2) ──────────────────────
   Compact cards for no-dues clients, tightened collection cards for dues,
   plus a Clients Overview summary row. Removing the flag restores v1 fully. */

/* Overview summary row */
.clients-overview {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: 0 16px 12px;
}
.clients-overview-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.clients-overview-item .ov-val {
  font-weight: 800;
  font-size: 17px;
  color: var(--text-primary);
  font-family: 'DM Sans', sans-serif;
  line-height: 1.1;
}
.clients-overview-item .ov-label {
  font-size: 11px;
  color: var(--text-secondary);
  font-family: 'DM Sans', sans-serif;
}
.clients-overview-item.has-due .ov-val { color: var(--danger); }

/* Compact card — single row, no progress/footer/collect */
.density-v2 .client-card--compact {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 8px;
  border-radius: 12px;
}
.client-card--compact .client-card-avatar,
.client-card--compact .client-card-avatar-img {
  width: 40px;
  height: 40px;
  font-size: 14px;
}
.client-card--compact .client-card-info { flex: 1; min-width: 0; }
.client-card--compact .client-card-name {
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.client-card--compact .client-card-phone { margin-top: 1px; }

.client-card-actions--icon {
  display: flex;
  gap: 6px;
  margin: 0;
  flex-shrink: 0;
}
.client-card-actions--icon .client-quick-action {
  flex: 0 0 auto;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 12px;
}
.client-card-actions--icon .client-quick-action .material-symbols-rounded { font-size: 20px; }

/* Collection card — tightened; due amount leads, Collect emphasized */
.density-v2 .client-card--collect {
  padding: 12px 14px;
  margin-bottom: 10px;
  border-radius: 14px;
}
.density-v2 .client-card--collect .client-card-top { align-items: flex-start; }
.client-card-due {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  flex-shrink: 0;
  margin-left: 8px;
}
.client-card-due .due-amt {
  font-weight: 800;
  font-size: 16px;
  color: var(--danger);
  font-family: 'DM Sans', sans-serif;
  line-height: 1.1;
}
.client-card-due .due-lbl {
  font-size: 10px;
  color: var(--text-secondary);
  font-family: 'DM Sans', sans-serif;
  margin-top: 1px;
}
.density-v2 .client-card--collect .client-card-actions { margin-bottom: 0; }
.client-quick-action.collect--primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.client-quick-action.collect--primary .material-symbols-rounded { color: #fff; }

/* ─── Assistant specific ───────────────────────────── */
.asst-type-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid;
  font-family: 'DM Sans', sans-serif;
}

.asst-stats-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.asst-stat {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-family: 'DM Sans', sans-serif;
  color: var(--text-secondary);
}

.asst-stat.green {
  color: var(--success);
}

.asst-stat.blue {
  color: var(--primary);
}

/* ─── Detail Page ──────────────────────────────────── */
.client-detail-page {
  padding: 0 0 80px;
}

.detail-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  position: sticky;
  top: 0;
  background: var(--card);
  z-index: 10;
}

.detail-back-btn,
.detail-edit-btn {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: var(--gray-50);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
}

.detail-nav-title {
  flex: 1;
  font-weight: 700;
  font-size: 18px;
  font-family: 'DM Sans', sans-serif;
  color: var(--text-primary);
}

.detail-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 16px 16px;
  gap: 4px;
}

.detail-avatar-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 8px;
}

.detail-avatar {
  width: 64px;
  height: 64px;
  border-radius: 32px;
  background: var(--primary-100);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 22px;
  font-family: 'DM Sans', sans-serif;
}

.detail-avatar-img {
  width: 64px;
  height: 64px;
  border-radius: 32px;
  object-fit: cover;
  display: block;
}

.detail-avatar-camera {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  border: 2px solid var(--card, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  min-width: 44px;
  min-height: 44px;
  margin: -8px -8px 0 0;
  z-index: 2;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.client-card-avatar-img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}

.detail-name {
  font-weight: 800;
  font-size: 20px;
  color: var(--text-primary);
  font-family: 'DM Sans', sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-sub {
  font-size: 13px;
  color: var(--text-secondary);
  font-family: 'DM Sans', sans-serif;
  display: flex;
  align-items: center;
  gap: 4px;
}

.detail-since {
  font-size: 12px;
  color: var(--text-muted);
  font-family: 'DM Sans', sans-serif;
}

.detail-money-row {
  display: flex;
  gap: 8px;
  padding: 0 16px;
  margin-bottom: 12px;
}

.money-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 8px;
  border-radius: 14px;
  background: var(--gray-50);
  gap: 4px;
}

.money-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  font-family: 'DM Sans', sans-serif;
}

.money-value {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  font-family: 'DM Sans', sans-serif;
  word-break: break-all;
  line-height: 1.2;
}

.detail-actions-pills {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.detail-actions-pills::-webkit-scrollbar {
  display: none;
}

.detail-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--card);
  font-size: 13px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.15s;
  min-height: 44px;
}

.detail-pill .material-symbols-rounded {
  font-size: 18px;
}

.detail-pill:active {
  transform: scale(0.95);
}

.detail-pill.green {
  color: var(--success);
  border-color: rgba(16,185,129,0.25);
  background: #F0FDF4;
}

.detail-pill.wa {
  color: #25D366;
  border-color: rgba(37,211,102,0.25);
  background: rgba(37,211,102,0.06);
}

.detail-pill.blue {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 25%, transparent);
  background: var(--primary-50);
}

.detail-pill.indigo {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 20%, transparent);
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}

.detail-pill.orange {
  color: #f59e0b;
  border-color: rgba(245,158,11,0.25);
  background: #FFF7ED;
}

/* Hisab Samjhao — deliberately not one of the money colours, so it never reads
   as another "collect the payment" action. */
.detail-pill.purple {
  color: #7c3aed;
  border-color: rgba(124,58,237,0.25);
  background: rgba(124,58,237,0.06);
}

.detail-divider {
  height: 8px;
  background: var(--gray-50);
}
/* ─── Client Detail v2 — tabbed IA (flag: sh_client_detail=tabs) ────────────
   Compact money strip + inline chips + sticky tab bar + panels. Reuses the
   existing detail-* card system; no color/branding change. */
.cd-money-strip { display: flex; align-items: stretch; gap: 8px; margin: 4px 16px 10px; }
.cd-stat { flex: 1; background: var(--gray-50); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; gap: 1px; }
.cd-stat .v { font-weight: 800; font-size: 16px; line-height: 1.1; font-family: 'DM Sans', sans-serif; word-break: break-all; }
.cd-stat .l { font-weight: 500; font-size: 10px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.03em; font-family: 'DM Sans', sans-serif; }
.cd-stat.due { flex: 1.3; background: #FEF2F2; }
.cd-stat.due .v { color: var(--danger); }
.cd-stat.green .v { color: var(--success); }

.cd-inline-chip { display: flex; align-items: center; gap: 6px; margin: 0 16px 10px; font-weight: 600; font-size: 12px; color: var(--text-secondary); font-family: 'DM Sans', sans-serif; }
.cd-inline-chip.amber { color: #d97706; }
.cd-inline-chip .material-symbols-rounded { font-size: 15px; }
.cd-inline-chip button { margin-left: auto; border: none; background: none; color: var(--primary); font-weight: 600; font-size: 12px; font-family: 'DM Sans', sans-serif; cursor: pointer; min-height: 32px; padding: 0 4px; }

.cd-tabs { display: flex; gap: 2px; margin: 6px 12px 0; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--card); z-index: 2; }
.cd-tab { flex: 1; padding: 11px 4px; border: none; background: none; font-weight: 600; font-size: 13px; color: var(--text-secondary); cursor: pointer; border-bottom: 2px solid transparent; display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 44px; font-family: 'DM Sans', sans-serif; }
.cd-tab .material-symbols-rounded { font-size: 17px; }
.cd-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.cd-panel { display: none; padding-top: 4px; }
.cd-panel.active { display: block; }
.cd-empty-mini { padding: 18px 16px; text-align: center; color: var(--text-muted); font-weight: 500; font-size: 13px; font-family: 'DM Sans', sans-serif; }


.detail-section {
  padding: 16px 20px;
}

.detail-section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: 'DM Sans', sans-serif;
  margin: 0 0 12px;
}

.detail-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Collapsible <details> section (Timeline, etc.) */
.detail-collapsible { padding: 16px 20px; }
.detail-collapsible > .detail-section-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  margin: 0 -4px;
  padding: 4px 4px;
  border-radius: 8px;
  transition: background-color 0.15s ease;
}
.detail-collapsible > .detail-section-summary::-webkit-details-marker { display: none; }
.detail-collapsible > .detail-section-summary:hover { background: var(--gray-100, rgba(0,0,0,0.04)); }
.detail-collapsible > .detail-section-summary .detail-section-title { margin: 0; }
.detail-collapsible .detail-caret {
  color: var(--text-muted);
  font-size: 22px;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.detail-collapsible[open] .detail-caret { transform: rotate(180deg); }
.detail-collapsible:not([open]) > :not(summary) { display: none; }
.detail-collapsible[open] > .detail-timeline { margin-top: 12px; }

.detail-empty {
  font-size: 13px;
  color: var(--text-muted);
  font-family: 'DM Sans', sans-serif;
  padding: 8px 0;
}

/* Timeline */
.detail-timeline {
  position: relative;
  padding-left: 24px;
}

.timeline-item {
  display: flex;
  gap: 12px;
  padding-bottom: 16px;
  position: relative;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -18px;
  top: 28px;
  width: 2px;
  bottom: 0;
  background: var(--gray-100);
}

.timeline-item:last-child::before {
  display: none;
}

.timeline-dot {
  width: 28px;
  height: 28px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  left: -24px;
  margin-right: -12px;
}

.timeline-content {
  flex: 1;
}

.timeline-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  font-family: 'DM Sans', sans-serif;
}

.timeline-sub {
  font-size: 12px;
  color: var(--text-secondary);
  font-family: 'DM Sans', sans-serif;
}

.timeline-date {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  font-family: 'DM Sans', sans-serif;
}

/* Timeline notes & voice */
.tl-note { display:flex; align-items:flex-start; gap:5px; font-size:12px; color:var(--text-secondary); margin-top:5px; padding:5px 8px; background:var(--gray-50); border-radius:8px; border-left:2.5px solid var(--primary); line-height:1.4; }
.tl-internal { display:flex; align-items:flex-start; gap:5px; font-size:12px; color:#92400e; margin-top:4px; padding:5px 8px; background:#fef3c7; border-radius:8px; border-left:2.5px solid #f59e0b; font-style:italic; line-height:1.4; }
.tl-voice { display:inline-flex; align-items:center; gap:4px; margin-top:4px; padding:4px 10px; background:var(--gray-50); border-radius:16px; font-size:12px; color:var(--text-secondary); cursor:pointer; border:none; }
.tl-voice:active { background:var(--gray-200); }
.tl-voice.playing { background:var(--primary); color:#fff; }
.tl-voice.playing .material-symbols-rounded { color:#fff; }

/* Detail item cards (bookings, orders, rentals, tasks) */
.detail-item-card {
  cursor: pointer;
  transition: background 0.12s, transform 0.1s;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--card);
  margin-bottom: 8px;
}

.detail-item-card:active {
  transform: scale(0.98);
  background: var(--gray-50);
}

.detail-item-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8px;
}

.detail-item-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: 'DM Sans', sans-serif;
}

.detail-item-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
  font-family: 'DM Sans', sans-serif;
}

.detail-item-badge {
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  white-space: nowrap;
}

.detail-item-money {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed var(--gray-100);
}

/* ═══════════════════════════════════════════════
   PAYMENT HISTORY CARDS — Client Detail View
   ═══════════════════════════════════════════════ */

.ph-card {
  background: var(--card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light, var(--border));
  overflow: hidden;
  margin-bottom: var(--space-md);
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ph-card:active {
  transform: scale(0.985);
}

@media (hover: hover) {
  body .ph-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
  }
}

/* Status Accent — left border */
.ph-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 4px 0 0 4px;
}

.ph-card[data-status="success"]::before {
  background: var(--success);
}

.ph-card[data-status="partial"]::before {
  background: var(--warning);
}

.ph-card[data-status="overdue"]::before {
  background: var(--danger);
}

.ph-card[data-status="credit"]::before {
  background: var(--primary);
}

.ph-card[data-status="refund"]::before {
  background: #f97316;
}

.ph-card-inner {
  padding: var(--space-md);
  padding-left: calc(var(--space-md) + 4px);
}

/* Top Row: amount + mode stamp */
.ph-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: 10px;
}

.ph-amount-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ph-amount {
  font-family: 'Outfit', sans-serif;
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.ph-card[data-status="credit"] .ph-amount {
  color: var(--primary);
}

.ph-card[data-status="refund"] .ph-amount {
  color: #f97316;
}

.ph-amount-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Payment Mode Stamp */
.ph-mode-stamp {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  background: var(--gray-50);
  border: 1.5px solid var(--border);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

.ph-mode-stamp .material-symbols-rounded {
  font-size: 1rem;
  color: var(--text-muted);
}

/* Source Row */
.ph-source-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border-light, var(--border));
}

.ph-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 0.73rem;
  font-weight: 700;
  white-space: nowrap;
}

.ph-source-badge .material-symbols-rounded {
  font-size: 0.85rem;
}

.ph-source-badge[data-source="booking"] {
  background: hsl(217, 80%, 94%);
  color: hsl(217, 70%, 45%);
}

.ph-source-badge[data-source="order"] {
  background: hsl(270, 60%, 94%);
  color: hsl(270, 55%, 50%);
}

.ph-source-badge[data-source="rental"] {
  background: hsl(200, 70%, 93%);
  color: hsl(200, 70%, 40%);
}

.ph-source-badge[data-source="opening_balance"] {
  background: var(--warning-light);
  color: hsl(38, 80%, 35%);
}

.ph-source-badge[data-source="multi"] {
  background: var(--gray-100, var(--gray-50));
  color: var(--text-secondary);
}

.ph-source-badge[data-source="refund"] {
  background: rgba(249, 115, 22, 0.12);
  color: #c2410c;
}

body.dark-mode .ph-source-badge[data-source="booking"] {
  background: hsl(217, 50%, 18%);
  color: hsl(217, 70%, 65%);
}

body.dark-mode .ph-source-badge[data-source="order"] {
  background: hsl(270, 40%, 18%);
  color: hsl(270, 55%, 70%);
}

body.dark-mode .ph-source-badge[data-source="rental"] {
  background: hsl(200, 50%, 16%);
  color: hsl(200, 60%, 60%);
}

body.dark-mode .ph-source-badge[data-source="opening_balance"] {
  color: hsl(38, 80%, 65%);
}

.ph-source-label {
  font-size: 0.82rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}

/* Detail Grid */
.ph-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
}

.ph-detail-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.ph-detail-item .material-symbols-rounded {
  font-size: 0.9rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.ph-detail-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 500;
}

.ph-detail-value {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* Status Pill */
.ph-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.ph-status-pill .material-symbols-rounded {
  font-size: 0.8rem;
}

.ph-status-pill[data-pill="success"] {
  background: var(--success-light);
  color: var(--success);
}

.ph-status-pill[data-pill="partial"] {
  background: var(--warning-light);
  color: hsl(38, 80%, 35%);
}

.ph-status-pill[data-pill="overdue"] {
  background: var(--danger-light);
  color: var(--danger);
}

.ph-status-pill[data-pill="credit"] {
  background: var(--primary-50);
  color: var(--primary);
}

.ph-status-pill[data-pill="refund"] {
  background: rgba(249, 115, 22, 0.12);
  color: #c2410c;
}

body.dark-mode .ph-status-pill[data-pill="partial"] {
  color: hsl(38, 80%, 60%);
}

/* Allocation Breakdown (multi-source) */
.ph-allocations {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-light, var(--border));
}

.ph-alloc-title {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.ph-alloc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
}

.ph-alloc-row+.ph-alloc-row {
  border-top: 1px dotted var(--border-light, var(--border));
}

.ph-alloc-source {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.ph-alloc-source .material-symbols-rounded {
  font-size: 0.85rem;
}

.ph-alloc-amt {
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* Quick Actions */
.ph-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-light, var(--border));
}

.ph-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.ph-action-btn:active {
  transform: scale(0.9);
}

.ph-action-btn .material-symbols-rounded {
  font-size: 1.05rem;
}

.ph-action-btn[data-act="receipt"] {
  background: var(--primary-50);
  color: var(--primary);
}

.ph-action-btn[data-act="whatsapp"] {
  background: hsl(142, 50%, 93%);
  color: #25D366;
}

.ph-action-btn[data-act="edit"] {
  background: var(--gray-50);
  color: var(--text-secondary);
}

body.dark-mode .ph-action-btn[data-act="whatsapp"] {
  background: hsl(142, 30%, 14%);
}

/* Note */
.ph-note {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-top: 8px;
  padding: 6px 10px;
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.ph-note .material-symbols-rounded {
  font-size: 0.85rem;
  color: var(--text-muted);
  flex-shrink: 0;
  margin-top: 1px;
}

/* Payment Summary Header */
.ph-summary {
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-light, var(--border));
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
  position: relative;
  overflow: hidden;
}

.ph-summary::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle at top right, hsla(200, 80%, 44%, 0.06) 0%, transparent 70%);
  pointer-events: none;
}

.ph-summary-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}

.ph-summary-stat {
  text-align: center;
  padding: var(--space-sm) var(--space-xs);
  border-radius: var(--radius-sm);
}

.ph-summary-stat-value {
  font-family: 'Outfit', sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.2;
}

.ph-summary-stat-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 2px;
}

.ph-summary-stat[data-stat="paid"] {
  background: var(--success-light);
}

.ph-summary-stat[data-stat="paid"] .ph-summary-stat-value {
  color: var(--success);
}

.ph-summary-stat[data-stat="due"] {
  background: var(--danger-light);
}

.ph-summary-stat[data-stat="due"] .ph-summary-stat-value {
  color: var(--danger);
}

.ph-summary-stat[data-stat="total"] {
  background: var(--gray-50);
}

.ph-summary-stat[data-stat="total"] .ph-summary-stat-value {
  color: var(--text-primary);
}

/* Progress Bar */
.ph-progress-bar-track {
  height: 8px;
  background: var(--gray-200);
  border-radius: 4px;
  overflow: hidden;
}

.ph-progress-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--success) 0%, hsl(142, 65%, 50%) 100%);
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
}

.ph-progress-bar-fill::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 20px;
  background: linear-gradient(90deg, transparent, hsla(0, 0%, 100%, 0.3));
  border-radius: 0 4px 4px 0;
}

.ph-progress-label {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* Date Group Separator */
.ph-date-group {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  margin-top: var(--space-sm);
}

.ph-date-group-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ph-date-group-line {
  flex: 1;
  height: 1px;
  background: var(--border-light, var(--border));
}

/* Filter Chips */
.ph-filter-chips {
  display: flex;
  gap: 4px;
}

.ph-filter-chip {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: 'DM Sans', sans-serif;
}

.ph-filter-chip:active {
  transform: scale(0.95);
}

body .ph-filter-chip.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* List Header */
.ph-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) 0;
  margin-bottom: var(--space-sm);
}

.ph-list-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.ph-list-title .material-symbols-rounded {
  font-size: 1.1rem;
  color: var(--primary);
}

/* Staggered Entry Animation */
@keyframes phSlideIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ph-card {
  animation: phSlideIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ph-card:nth-child(1) {
  animation-delay: 50ms;
}

.ph-card:nth-child(2) {
  animation-delay: 100ms;
}

.ph-card:nth-child(3) {
  animation-delay: 150ms;
}

.ph-card:nth-child(4) {
  animation-delay: 200ms;
}

.ph-card:nth-child(5) {
  animation-delay: 250ms;
}

.ph-card:nth-child(6) {
  animation-delay: 300ms;
}

/* Responsive */
@media (min-width: 768px) {
  .ph-action-btn {
    width: 40px;
    height: 40px;
  }

  .ph-amount {
    font-size: 1.85rem;
  }

  .ph-summary-stat-value {
    font-size: 1.4rem;
  }
}

@media (max-width: 374px) {
  .ph-amount {
    font-size: 1.4rem;
  }

  .ph-details {
    grid-template-columns: 1fr;
  }

  .ph-summary-stat-value {
    font-size: 1rem;
  }
}

/* Task money breakdown */
.asst-task-money {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}

.task-money-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.task-money-label {
  font-size: 11px;
  color: var(--text-muted);
  font-family: 'DM Sans', sans-serif;
}

.task-money-value {
  font-size: 16px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  color: var(--text-primary);
}

/* Negotiation — Counter offer card */
.neg-countered-card {
  border-color: #8b5cf6;
  border-width: 2px;
}

.neg-counter-box {
  margin-top: 10px;
  padding: 12px;
  border-radius: var(--radius-md);
  background: #8b5cf608;
  border: 1px dashed #8b5cf640;
}

.neg-counter-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 0.9rem;
  color: #8b5cf6;
}

.neg-counter-amounts {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.neg-counter-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.neg-counter-label {
  font-size: 11px;
  color: var(--text-muted);
  font-family: 'DM Sans', sans-serif;
}

.neg-counter-value {
  font-size: 16px;
  font-weight: 800;
  color: #8b5cf6;
  font-family: 'DM Sans', sans-serif;
}

.neg-counter-diff {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: currentColor;
  -webkit-background-clip: text;
  background: #00000008;
  margin-left: auto;
}

.neg-counter-reason {
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-style: italic;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 8px;
}

.neg-counter-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.neg-btn {
  flex: 1;
  min-height: 44px;
  border: none;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: 'DM Sans', sans-serif;
}

.neg-btn-accept {
  background: var(--success);
  color: #fff;
}

.neg-btn-accept:active {
  opacity: 0.85;
}

.neg-btn-decline {
  background: #FEE2E2;
  color: #991B1B;
}

.neg-btn-decline:active {
  opacity: 0.85;
}

.neg-task-footer {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

/* Performance row */
.perf-row {
  display: flex;
  gap: 8px;
}

.perf-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px;
  border-radius: 14px;
  gap: 6px;
}

.perf-box.green {
  background: #F0FDF4;
}

.perf-box.red {
  background: #FEF2F2;
}

.perf-box.blue {
  background: #EFF6FF;
}

.perf-value {
  font-size: 20px;
  font-weight: 800;
  font-family: 'DM Sans', sans-serif;
}

.perf-label {
  font-size: 11px;
  color: var(--text-secondary);
  font-family: 'DM Sans', sans-serif;
}

/* Notes */
.detail-notes {
  width: 100%;
  min-height: 80px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #FFFBEB;
  font-size: 16px;
  font-family: 'DM Sans', sans-serif;
  color: var(--text-primary);
  resize: vertical;
}

.detail-notes:focus {
  outline: none;
  border-color: var(--primary);
}

.detail-danger-zone {
  padding: 16px 20px;
  text-align: center;
}

/* ─── Mobile density: Clients + Assistants (Blinkit-grade) ─── */
@media (max-width: 768px) {
  .clients-page, .assistants-page { padding: 0 0 70px; }
  .clients-header { padding: 10px 12px 6px; }
  .clients-title { font-size: 1rem; }
  .clients-search { margin: 4px 12px; padding: 8px 12px; border-radius: 10px; }
  .clients-search input { font-size: 0.85rem; }
  .clients-filters { padding: 6px 12px; gap: 6px; }
  .filter-pill { padding: 5px 12px; font-size: 0.75rem; border-radius: 16px; min-height: 32px; }
  .filter-badge { min-width: 16px; height: 16px; font-size: 10px; border-radius: 8px; }
  .clients-total-bar { padding: 6px 12px; margin: 2px 12px 6px; font-size: 0.78rem; }
  .clients-cards { padding: 0 10px; }
  .client-card { padding: 10px 12px; margin-bottom: 8px; border-radius: 12px; }
  .client-card-top { gap: 10px; margin-bottom: 6px; }
  .client-card-avatar { width: 38px; height: 38px; font-size: 0.82rem; }
  .client-card-name { font-size: 0.88rem; gap: 4px; }
  .client-card-phone { font-size: 0.72rem; }
  .client-card-badges { gap: 4px; margin-bottom: 6px; }
  .client-badge { padding: 2px 8px; font-size: 0.65rem; border-radius: 6px; }
  .client-card-progress { margin-bottom: 6px; }
  .progress-bar-bg { height: 4px; }
  .client-card-total { font-size: 0.78rem; }
  .client-card-total .total-amount { font-size: 0.85rem; }
  .client-card-actions { gap: 4px; }
  .client-card-actions button, .client-card-actions a { min-height: 44px; padding: 8px 10px; font-size: 0.72rem; }
  .detail-actions-pills { gap: 6px; padding: 10px 12px; }
  .detail-pill { padding: 7px 12px; font-size: 12px; }
  .detail-pill .material-symbols-rounded { font-size: 16px; }
  .detail-section { padding: 12px 14px; }
  .money-box { padding: 10px 6px; }
  .money-value { font-size: 13px; }
  .money-label { font-size: 10px; }
}

/* ─── Desktop overrides for client/assistant pages ─── */
@media (min-width: 768px) {
  .client-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
}

@media (min-width: 1024px) {
  .clients-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  /* Skeletons wrapper div mein aate hain — display:contents se wo bhi asli
     cards ki tarah grid ki row/columns mein bichh jate hain */
  .clients-cards > .skeleton-cards {
    display: contents;
  }
  /* Inquiries: 2-col grid; header + empty state span full width */
  .clients-cards.inquiries-mode {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .clients-cards.inquiries-mode > .inq-list-head,
  .clients-cards.inquiries-mode > .inq-list-empty,
  .clients-cards.inquiries-mode > .detail-empty {
    grid-column: 1 / -1;
  }
  .clients-cards.inquiries-mode > .inq-card-v3,
  .clients-cards.inquiries-mode > .inq-card-pro {
    margin-bottom: 0;
  }

  .client-detail-page {
    max-width: 780px;
    margin: 0 auto;
  }

  .detail-actions-pills {
    flex-wrap: wrap;
    overflow-x: visible;
    justify-content: center;
  }

  .detail-pill:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  }

  .clients-page,
  .assistants-page {
    max-width: 900px;
    margin: 0 auto;
  }

  .detail-item-card:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 8%, transparent);
  }
}

@media (min-width: 1200px) {
  .clients-cards {
    grid-template-columns: repeat(3, 1fr);
  }

  .client-detail-page {
    max-width: 860px;
  }

  .detail-money-row {
    gap: 12px;
  }

  .money-box {
    padding: 18px 12px;
  }

  .money-value {
    font-size: 18px;
  }
}

/* ─── Voice Recorder Widget ─────────────────────────── */
@keyframes sh-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }
}

.sh-voice-widget audio {
  display: none;
}

/* ─── File Attach Widget ────────────────────────────── */
.sh-file-widget img {
  transition: opacity 0.2s;
}

.sh-file-widget img:hover {
  opacity: 0.8;
}

/* ─── Tour Overlay ─────────────────────────────────── */
/* ─────────────────────────────────────────────────────
   ONBOARDING TOUR v3 — Full-screen swipeable cards
   Big skip button, 4 steps, value-first, zero confusion
   ───────────────────────────────────────────────────── */

.sh-tour {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: #fff;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.25s ease;
  --t-bg: #0ea5e9;
}

.sh-tour.t-in {
  opacity: 1;
}

.sh-tour.t-out {
  opacity: 0;
  pointer-events: none;
}

/* ─── Skip Tour — BIG, obvious, always visible ─── */
body .t-skip {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 18px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.06);
  color: #64748b;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  min-height: 44px;
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

body .t-skip:active {
  background: rgba(0, 0, 0, 0.12);
  color: #1e293b;
}

/* ─── Slides container ─── */
body .t-slides {
  flex: 1;
  position: relative;
  overflow: hidden;
}

/* ─── Individual slide ─── */
body .t-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 24px 24px;
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

body .t-slide.t-active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

body .t-slide.t-left {
  opacity: 0;
  transform: translateX(-60px);
}

body .t-slide.t-right {
  opacity: 0;
  transform: translateX(60px);
}

/* ─── Card inside slide ─── */
body .t-card {
  text-align: center;
  max-width: 340px;
  width: 100%;
}

/* ─── Icon circle ─── */
body .t-icon-circle {
  width: 96px;
  height: 96px;
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 32px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  animation: tIconFloat 3s ease-in-out infinite;
}

body .t-icon-circle .material-symbols-rounded {
  font-size: 42px;
  color: #fff;
}

@keyframes tIconFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

/* ─── Title ─── */
body .t-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
  margin: 0 0 12px;
}

/* ─── Description ─── */
body .t-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}

/* ─── Bottom area: progress + nav ─── */
body .t-bottom {
  padding: 16px 24px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  background: #fff;
}

/* ─── Progress bar ─── */
body .t-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

body .t-progress-track {
  flex: 1;
  height: 5px;
  background: #e2e8f0;
  border-radius: 3px;
  overflow: hidden;
}

body .t-progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s;
}

body .t-progress-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
  flex-shrink: 0;
  min-width: 24px;
  text-align: right;
}

/* ─── Nav buttons ─── */
body .t-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

body .t-btn-back {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

body .t-btn-back:active {
  border-color: #cbd5e1;
  color: #1e293b;
}

body .t-btn-back .material-symbols-rounded {
  font-size: 22px;
}

body .t-btn-next {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  border-radius: 14px;
  border: none;
  background: var(--primary, #0ea5e9);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}

body .t-btn-next:active {
  transform: scale(0.98);
}

/* ─── Dark mode ─── */
body.dark-mode .sh-tour {
  background: var(--background, #0f172a);
}

body.dark-mode .t-skip {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.5);
}

body.dark-mode .t-title {
  color: #f1f5f9;
}

body.dark-mode .t-desc {
  color: #94a3b8;
}

body.dark-mode .t-bottom {
  background: var(--background, #0f172a);
}

body.dark-mode .t-progress-track {
  background: rgba(255, 255, 255, 0.1);
}

body.dark-mode .t-progress-label {
  color: rgba(255, 255, 255, 0.3);
}

body.dark-mode .t-btn-back {
  border-color: rgba(255, 255, 255, 0.12);
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
}

/* ─────────────────────────────────────────────────────
   MOBILE DETAIL MODAL FIX — 375px Optimized
   Booking, Walk-in, Rental detail modals
   ───────────────────────────────────────────────────── */

@media (max-width: 767px) {

  /* ── Modal body padding tighter on mobile ── */
  .modal-body {
    padding: var(--space-md);
  }

  /* ── Review rows: stack label/value vertically ── */
  .modal-body .review-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: var(--space-sm) 0;
    font-size: 0.92rem;
  }

  .modal-body .review-row .label {
    font-size: 0.82rem;
    color: var(--muted-foreground);
    font-weight: 500;
  }

  .modal-body .review-row .value {
    text-align: left;
    font-size: 0.95rem;
    font-weight: 600;
    word-break: break-word;
    max-width: 100%;
  }

  /* ── Scoped: walk-in order detail meta block keeps inline label/value on mobile ──
     Targets only the .wi-order-meta wrapper used in showOrderDetail (walk-in-orders.js).
     Avoids stacking clutter without affecting quotation / booking / rental modals. */
  .modal-body .wi-order-meta .review-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 6px 0;
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(148,163,184,0.08);
  }
  .modal-body .wi-order-meta .review-row:last-child {
    border-bottom: none;
  }
  .modal-body .wi-order-meta .review-row .label {
    font-size: 0.8rem;
    font-weight: 500;
    flex-shrink: 0;
  }
  .modal-body .wi-order-meta .review-row .value {
    text-align: right;
    font-size: 0.88rem;
    font-weight: 600;
    word-break: break-word;
    min-width: 0;
  }

  /* ── Review section titles: larger and bolder ── */
  .modal-body .review-section-title {
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-xs);
  }

  /* ── Review sections: tighter margin ── */
  .modal-body .review-section {
    margin-bottom: var(--space-lg);
  }

  /* ── Amount values: large bold readable ── */
  .modal-body .review-row .value[style*="fontWeight"] {
    font-size: 1rem;
  }

  /* ── Cards inside modal body: proper padding ── */
  .modal-body .card,
  .modal-body .card-padded {
    padding: var(--space-md);
    border-radius: var(--radius-md);
  }

  /* ── Payment schedule cards: readable ── */
  .modal-body .card-padded.mb-sm {
    padding: var(--space-md);
    margin-bottom: var(--space-sm);
  }

  /* ── Tables inside modals: compact but readable ── */
  .modal-body table {
    font-size: 0.88rem;
  }

  .modal-body table th,
  .modal-body table td {
    padding: 8px 6px;
    font-size: 0.85rem;
  }

  /* ── Booking detail footer: one row — Close | View Bill (grows) | PDF ──
     .modal-footer prefix: mobile-overrides.css (loaded later) sets
     .modal-footer .btn { width: 100% } at <=375px, which would push the
     row off-screen. */
  .booking-detail-footer {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
  }

  .modal-footer .booking-detail-footer .btn {
    width: auto;
    min-height: 48px;
    justify-content: center;
    font-size: 0.9rem;
  }

  /* ── Walk-in detail actions: already handled by wi-detail-actions grid,
       but ensure min sizes ── */
  .wi-detail-actions .btn {
    min-height: 48px;
    font-size: 0.85rem;
    padding: 10px 12px;
  }

  /* ── Rental detail footer: stack vertically ── */
  .rental-detail-footer {
    flex-direction: column;
    gap: 8px;
    justify-content: stretch;
  }

  .rental-detail-footer .btn {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    font-size: 0.9rem;
  }

  /* ── Status badges inside modals: 44px tap targets ── */
  .modal-body .sh-badge-pulse,
  .modal-body span[style*="border-radius:var(--radius-full)"] {
    min-height: 32px;
    padding: 6px 12px;
    font-size: 0.8rem;
  }

  /* ── Item status pills: tappable ── */
  .modal-body .wi-item-status-pill {
    min-height: 36px;
    min-width: 44px;
    padding: 6px 14px;
    font-size: 0.82rem;
  }

  /* ── Settlement section: proper spacing ── */
  .modal-body div[style*="border: 2px dashed"],
  .modal-body div[style*="border:1px dashed"],
  .modal-body div[style*="border:2px dashed"] {
    padding: var(--space-md);
    margin-top: var(--space-md);
  }

  .modal-body div[style*="dashed"] .form-control {
    min-height: 48px;
    font-size: 1rem;
  }

  .modal-body div[style*="dashed"] .btn {
    min-height: 48px;
    font-size: 0.95rem;
  }

  /* ── Prevent horizontal overflow in modal ── */
  .modal-body {
    overflow-x: hidden;
    word-break: break-word;
  }

  .modal-body>div {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* ── Items table scroll container ── */
  .modal-body div[style*="overflowX"] {
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* ── Quick action buttons (Call/WhatsApp/Pay) inside booking detail ── */
  .modal-body div[style*="display: flex"][style*="gap: 8px"]>a,
  .modal-body div[style*="display: flex"][style*="gap: 8px"]>div[style*="cursor: pointer"] {
    min-height: 48px;
    font-size: 0.88rem;
    border-radius: var(--radius-md);
  }

  /* ── Payment history rows: stack on mobile ── */
  .modal-body div[style*="borderBottom: 1px solid"] {
    flex-wrap: wrap;
    gap: 4px;
  }

  /* ── Task action buttons: wrap nicely ── */
  .modal-body .btn-sm {
    min-height: 40px;
    font-size: 0.82rem;
    padding: 8px 12px;
  }

  /* ── Ensure all text meets 16px equivalent readability ── */
  .modal-body p,
  .modal-body span,
  .modal-body div {
    line-height: 1.45;
  }

  /* ── Notes textarea in booking detail ── */
  .modal-body textarea.form-control {
    min-height: 80px;
    font-size: 0.95rem;
  }

  /* ── Terms & Conditions: readable ── */
  .modal-body details summary {
    font-size: 0.88rem;
    padding: var(--space-sm) 0;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .modal-body details pre {
    font-size: 0.85rem;
    line-height: 1.5;
  }
}

/* ═══════════════════════════════════════════════════════
   Mere Kaam — Staff Tasks Page
   ═══════════════════════════════════════════════════════ */
.mk-page {
  padding: 16px;
  max-width: 600px;
  margin: 0 auto;
}

.mk-header {
  margin-bottom: 16px;
}

.mk-header h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px 0;
}

.mk-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}

.mk-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 20px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.mk-tabs::-webkit-scrollbar {
  display: none;
}

.mk-tab {
  padding: 8px 16px;
  border-radius: var(--radius-full, 9999px);
  border: 1.5px solid var(--border);
  background: var(--card);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.mk-tab.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.mk-badge {
  background: var(--danger);
  color: white;
  border-radius: 50%;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  text-align: center;
  line-height: 16px;
}

.mk-tab.active .mk-badge {
  background: rgba(255, 255, 255, 0.3);
}

/* Task Cards */
.mk-card {
  background: var(--card);
  border-radius: var(--radius-md, 12px);
  padding: 16px;
  margin-bottom: 12px;
  border-left: 4px solid var(--border);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
}

.mk-card.status-pending {
  border-left-color: var(--warning);
}

.mk-card.status-accepted {
  border-left-color: var(--success);
}

.mk-card.status-in_progress {
  border-left-color: var(--primary);
}

.mk-card.status-completed {
  border-left-color: var(--border);
  opacity: 0.7;
}

.mk-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
  line-height: 1.3;
}

.mk-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.mk-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.mk-role-badge {
  background: var(--gray-50, #f9fafb);
  border: 1px solid var(--border);
  border-radius: var(--radius-full, 9999px);
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
}

.mk-card-amount {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 12px;
}

.mk-card-footer {
  margin-top: 4px;
}

.mk-action-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: var(--radius-md, 12px);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  min-height: 44px;
  transition: opacity 0.15s;
}

.mk-action-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.mk-action-btn:active:not(:disabled) {
  opacity: 0.8;
}

.mk-btn-samjha {
  background: var(--success);
  color: white;
}

.mk-btn-shuru {
  background: var(--primary);
  color: white;
}

.mk-btn-hogaya {
  background: var(--success);
  color: white;
}

.mk-status-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--radius-full, 9999px);
  font-size: 13px;
  font-weight: 600;
}

.mk-empty {
  text-align: center;
  padding: 48px 16px;
  color: var(--text-secondary);
}

.mk-empty .material-symbols-rounded {
  font-size: 48px;
  display: block;
  margin: 0 auto 12px;
  opacity: 0.4;
}

.mk-empty p {
  font-size: 16px;
  margin: 0;
}

.mk-complete-modal textarea {
  resize: vertical;
  min-height: 80px;
}

/* Dark mode overrides */
.dark-mode .mk-role-badge {
  background: rgba(255, 255, 255, 0.06);
  color: var(--primary);
}

.dark-mode .mk-tab.active .mk-badge {
  background: rgba(255, 255, 255, 0.25);
}

/* ─── Mere Kaam: walk-in + booking context (Phase 2) ─── */
.mk-context {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--bg-secondary, #f7f8fa);
}
.mk-context-walkin { border-left: 3px solid #2563eb; }
.mk-context-booking { border-left: 3px solid #7c3aed; }
.mk-context-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary, #111827);
  margin-bottom: 6px;
}
.mk-context-header .material-symbols-rounded { color: var(--text-secondary, #4b5563); }
.mk-order-num, .mk-evt-cat {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  color: var(--text-secondary, #4b5563);
}
.mk-context-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-primary, #111827);
  padding: 3px 0;
  line-height: 1.4;
}
.mk-context-row .material-symbols-rounded { color: var(--text-secondary, #4b5563); }
.mk-context-row a { color: var(--accent, #2563eb); text-decoration: none; }
.mk-context-notes {
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--text-secondary, #4b5563);
  font-style: italic;
  padding: 6px 8px;
  background: #fff;
  border-radius: 6px;
  border-left: 2px solid var(--warning, #f59e0b);
}
.mk-items-list {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mk-item-row {
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  padding: 6px 10px;
}
.mk-item-name { font-size: 0.85rem; font-weight: 600; color: var(--text-primary, #111827); }
.mk-item-meta { font-size: 0.74rem; color: var(--text-secondary, #4b5563); margin-top: 2px; }
.mk-item-nop {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
  color: var(--accent, #2563eb);
}
.mk-item-notes { font-size: 0.72rem; color: var(--text-secondary, #4b5563); font-style: italic; margin-top: 4px; }
.mk-shots-strip {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.mk-shot-thumb {
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  min-height: 44px;
}
.mk-shot-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-shot-thumb:active { transform: scale(0.95); }
.mk-shot-more {
  font-size: 0.78rem;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(124, 58, 237, 0.08);
  color: #7c3aed;
  border: 1px solid rgba(124, 58, 237, 0.2);
  cursor: pointer;
  min-height: 44px;
}
.mk-section-label {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  margin-bottom: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary, #4b5563);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mk-vips-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: stretch;
}
.mk-vip-thumb {
  width: 72px;
  padding: 0;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.mk-vip-thumb img {
  width: 100%;
  height: 56px;
  object-fit: cover;
  display: block;
}
.mk-vip-name {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 3px 4px;
  color: var(--text-primary, #111827);
  text-align: center;
  line-height: 1.2;
  max-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mk-vip-prio {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}
.mk-vip-thumb:active { transform: scale(0.95); }
.mk-vip-more {
  font-size: 0.78rem;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(220, 38, 38, 0.08);
  color: #dc2626;
  border: 1px solid rgba(220, 38, 38, 0.2);
  cursor: pointer;
  min-height: 44px;
  align-self: center;
}

/* ─── Mere Kaam card redesign (2026-07-10): single clean header, chips,
   key-value spec grid, consistent footer. No info duplication. ─── */
.mk-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 11px;
}
.mk-type-ico {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--primary-50, #eff6ff);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mk-type-ico .material-symbols-rounded {
  font-size: 21px;
  color: var(--primary, #2563eb);
  font-variation-settings: 'FILL' 1;
}
.mk-head-tt { flex: 1; min-width: 0; }
.mk-card-head .mk-card-title { margin-bottom: 0; }
.mk-head-sub {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 1px;
  font-size: 0.82rem;
  color: var(--text-secondary, #6b7280);
}
.mk-head-sub .material-symbols-rounded { font-size: 14px; color: var(--text-muted, #98a2b3); }
.mk-head-sub a { color: var(--primary, #2563eb); text-decoration: none; }
.mk-card-head .mk-order-num {
  margin-left: 0;
  flex-shrink: 0;
  border-radius: 7px;
  letter-spacing: 0.02em;
}

.mk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 11px;
}
.mk-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary, #475467);
  background: var(--bg-secondary, #f7f8fa);
  border: 1px solid var(--border, #eef0f3);
  border-radius: 8px;
  padding: 4px 9px;
}
.mk-chip .material-symbols-rounded { font-size: 15px; color: var(--text-muted, #98a2b3); }
.mk-chip.due {
  color: var(--warning, #b45309);
  background: rgba(245, 158, 11, 0.10);
  border-color: rgba(245, 158, 11, 0.35);
}
.mk-chip.due .material-symbols-rounded { color: var(--warning, #f59e0b); }
.mk-chip-role { color: var(--primary, #2563eb); }
.mk-chip-role .material-symbols-rounded { color: var(--primary, #2563eb); }

.mk-spec {
  background: var(--bg-secondary, #f9fafb);
  border-radius: 11px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.mk-spec-h {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary, #111827);
  margin-bottom: 7px;
}
.mk-spec-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
}
.mk-spec-k { font-size: 0.78rem; color: var(--text-muted, #98a2b3); white-space: nowrap; }
.mk-spec-v { font-size: 0.78rem; color: var(--text-primary, #111827); font-weight: 600; }
.mk-detail { margin-bottom: 10px; }

/* Footer — consistent shape across states */
.mk-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.mk-action-btn .material-symbols-rounded { font-size: 19px; }
.mk-status-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.86rem;
  font-weight: 700;
  padding: 4px 0;
}
.mk-status-row .material-symbols-rounded { font-size: 19px; font-variation-settings: 'FILL' 1; }
.mk-status-done { color: var(--success, #16a34a); }
.mk-status-danger { color: var(--danger, #dc2626); }
.mk-status-neutral { color: var(--text-secondary, #6b7280); }

/* ─── Staff Mera Hisab card on Mere Kaam ─── */
.mk-earnings-card {
  display: block;
  width: 100%;
  margin: 0 0 14px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #2563eb05, #7c3aed08);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.mk-earnings-card:hover { background: linear-gradient(135deg, #2563eb10, #7c3aed15); }
.mk-earnings-card:active { transform: scale(0.995); }
.mk-earnings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.mk-earnings-item { flex: 1; min-width: 0; }
.mk-earnings-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-secondary, #4b5563);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.mk-earnings-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary, #111827);
  margin-top: 2px;
}
.mk-earnings-value.green { color: #065f46; }
.mk-earnings-value.amber { color: #b45309; }
.mk-earnings-chev {
  color: var(--text-muted, #94a3b8);
  font-size: 1.4rem;
  flex-shrink: 0;
}
.mk-earnings-cta {
  margin-top: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent, #2563eb);
}

/* ─── Studio Signature Pad ─── */
#sigCanvas {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ─── Smart Client Reminders ─── */
.reminder-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  transition: opacity 0.3s, max-height 0.3s;
}
.reminder-card:last-child { border-bottom: none; }
.reminder-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.reminder-icon .material-symbols-rounded { font-size: 1.3rem; }
.reminder-info { flex: 1; min-width: 0; }
.reminder-occasion {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
}
.reminder-client {
  font-size: 0.85rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reminder-date {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.reminder-countdown {
  background: var(--warning-light, #FEF3C7);
  color: var(--warning, #f59e0b);
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 0.68rem;
  font-weight: 600;
  margin-left: 4px;
}
.reminder-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.reminder-wa-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: #25D366;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.15s;
}
.reminder-wa-btn:hover { transform: scale(1.08); }
.reminder-wa-btn .material-symbols-rounded { font-size: 1.2rem; }
.reminder-dismiss-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.reminder-dismiss-btn:hover { color: var(--danger); background: var(--danger-light, #FEF2F2); }
.reminder-dismiss-btn .material-symbols-rounded { font-size: 1rem; }
.reminder-badge {
  background: #ec4899;
  color: white;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
  margin-left: 6px;
  vertical-align: 1px;
}

/* ─── Subscription UI ─────────────────────────────── */
body > .sub-fullscreen-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.6);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: none;
}
.sub-fullscreen-card {
  background: var(--card, #fff);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  max-height: 90vh;
  overflow-y: auto;
}
.sub-top-banner {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 8px;
  margin: 8px 12px;
  gap: 8px;
  flex-wrap: wrap;
  opacity: 1;
  visibility: visible;
  transition: none;
}
.sub-top-banner-warning {
  background: var(--warning, #f59e0b);
  color: white;
}
.sub-top-banner-danger {
  background: var(--danger, #ef4444);
  color: white;
}
.sub-locked-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.85);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Notification preferences */
.notif-prefs-card { margin-top: 16px }
.notif-toggle-row { display: flex; align-items: center; gap: 10px; margin: 12px 0 }
.notif-toggle { position: relative; width: 44px; height: 24px; flex-shrink: 0 }
.notif-toggle input { opacity: 0; width: 0; height: 0 }
.notif-toggle-slider { position: absolute; inset: 0; background: var(--border-color, #ddd); border-radius: 24px; transition: 0.2s; cursor: pointer }
.notif-toggle-slider::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: 0.2s }
.notif-toggle input:checked + .notif-toggle-slider { background: var(--primary, #6366f1) }
.notif-toggle input:checked + .notif-toggle-slider::before { transform: translateX(20px) }
.notif-toggle-label { font-size: 0.9rem; font-weight: 500 }
.notif-include-list { display: flex; flex-direction: column; gap: 6px }
.notif-check-row { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; cursor: pointer }
.notif-check-row input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--primary, #6366f1) }

/* Notification category chips */
/* .notif-chips / .notif-chip now live in the Notification Sheet block above. */

/* ─── Inventory reservation status chips ─────────────────── */
.inv-chip { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; position: relative; vertical-align: middle; margin-left: 6px; transition: transform 0.15s ease }
.inv-chip:active { transform: scale(0.9) }
.inv-chip .material-symbols-rounded { font-size: 18px }
.inv-chip--ok { background: #D1FAE5; color: #065F46 }
.inv-chip--conflict { background: #FEF3C7; color: #B45309; border: 2px dashed #D97706 }
.inv-chip--external { background: #DBEAFE; color: #1E40AF; border: 1px solid #93C5FD }
.inv-chip--untracked { background: #F4F4F5; color: #71717A; border: 1px dashed #D4D4D8 }
.inv-tooltip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: #18181B; color: #FAFAFA; padding: 8px 12px; border-radius: 8px; font-size: 12px; line-height: 1.4; white-space: normal; max-width: 260px; z-index: 1000; pointer-events: none; opacity: 0; transition: opacity 0.15s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.15) }
.inv-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #18181B }
.inv-chip:hover .inv-tooltip, .inv-chip.inv-chip--active .inv-tooltip { opacity: 1 }
.inv-conflict-banner { background: #FEF3C7; border-left: 4px solid #D97706; padding: 12px 16px; margin: 8px 0; border-radius: 0 8px 8px 0; font-size: 13px; color: #92400E; display: flex; align-items: flex-start; gap: 8px }
.inv-conflict-banner .material-symbols-rounded { font-size: 20px; color: #D97706; flex-shrink: 0; margin-top: 1px }

/* ─────────────────────────────────────────────────────
   BOOKING EXTRAS — timeline, rows, status pills
   ───────────────────────────────────────────────────── */

.extras-timeline-section {
  margin: 16px 0;
  padding: 14px;
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
}

.extras-timeline-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.extras-timeline-head .material-symbols-rounded { font-size: 1.1rem; color: var(--text-secondary); }

.extras-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }

.extras-empty {
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 8px 2px;
}

.extras-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: var(--muted);
  border-radius: var(--radius-sm);
}

.extras-row-top {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
}

.extras-seq { font-weight: 700; color: var(--text-secondary); }
.extras-num { flex: 1; font-family: monospace; font-size: 0.82rem; color: var(--text-primary); }

.extras-status {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.extras-status--draft     { background: #f1f5f9; color: #475569; }
.extras-status--sent      { background: #fef3c7; color: #92400e; }
.extras-status--signed    { background: #dcfce7; color: #166534; }
.extras-status--declined  { background: #fee2e2; color: #991b1b; }
.extras-status--cancelled { background: #e5e7eb; color: #6b7280; }

.extras-row-delta { font-weight: 700; font-size: 0.95rem; color: var(--text-primary); }

.extras-add-btn { width: 100%; min-height: 44px; }

.extra-editor-section { margin-bottom: 16px; }
.extra-editor-title { font-weight: 600; font-size: 0.9rem; margin-bottom: 8px; color: var(--text-secondary); }
.extra-editor-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px dashed var(--border-light); font-size: 0.88rem; }
.extra-editor-summary {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--muted);
  border-radius: var(--radius-sm);
  font-weight: 600;
}
/* Extras editor — per-product card with qty stepper + notes */
.extra-editor-product {
  padding: 12px;
  margin-bottom: 10px;
  background: var(--muted);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.extra-product-head { display: flex; align-items: center; gap: 8px; }
.extra-product-name { flex: 1; font-weight: 600; font-size: 0.9rem; }
.extra-product-del {
  width: 32px; height: 32px; border: none; background: transparent;
  color: var(--text-muted); border-radius: 50%; cursor: pointer;
  font-size: 1.2rem; line-height: 1;
}
.extra-product-del:hover { color: var(--destructive); background: var(--danger-light); }
.extra-product-qtyrow { display: flex; align-items: center; gap: 10px; }
.extra-product-step {
  width: 36px; height: 36px; min-width: 36px;
  border: 1px solid var(--border); background: var(--card);
  border-radius: 50%; font-size: 1rem; font-weight: 700; cursor: pointer;
}
.extra-product-step:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.extra-product-qty { min-width: 32px; text-align: center; font-weight: 600; font-size: 0.95rem; }
.extra-product-linetotal { margin-left: auto; font-weight: 700; font-size: 0.92rem; }
.extra-product-notes {
  width: 100%; min-height: 54px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 0.85rem; resize: vertical; background: var(--card);
}

/* ─── Reusable Empty State (SH.renderEmpty) ────────────────────────────── */
.sh-empty-page {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px 20px; min-height: min(58vh, 480px);
  max-width: 480px; margin: 0 auto;
  grid-column: 1 / -1; /* span full width when dropped into a multi-col grid (clients-cards / orders-grid), else centers via margin auto */
}
/* Bookings first-run (no chrome above) → span the full orders grid (2/3-col on desktop) so it
   centers horizontally (the host's inline grid-column is lost on outerHTML swap), and fill the
   content area so it sits vertically centered, not glued to the top-left. */
.orders-first-empty .sh-empty-page { grid-column: 1 / -1; min-height: calc(100dvh - 200px); }
.sh-empty-icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(2,136,209,0.10), rgba(16,185,129,0.08));
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.sh-empty-icon .material-symbols-rounded { font-size: 36px; color: var(--primary, #0288d1); }
.sh-empty-title {
  font-size: 1.25rem; font-weight: 700;
  color: var(--text, var(--text-primary)); margin: 0 0 6px;
  font-family: 'Outfit', sans-serif;
}
.sh-empty-desc {
  font-size: 0.92rem; color: var(--text-secondary);
  line-height: 1.55; margin: 0 0 18px; max-width: 360px;
}
.sh-empty-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 13px 28px; border-radius: var(--radius-full, 999px); border: none;
  font-size: 1rem; font-weight: 700; cursor: pointer; white-space: nowrap;
  font-family: inherit;
  transition: transform 0.15s, box-shadow 0.15s, color 0.15s, border-color 0.15s, background 0.15s;
}
.sh-empty-cta-primary {
  color: #fff; min-width: 240px;
  background: linear-gradient(135deg, hsl(200, 85%, 50%), hsl(204, 82%, 40%));
  box-shadow: 0 10px 24px -8px hsla(202, 85%, 40%, 0.55), inset 0 1px 0 hsla(0, 0%, 100%, 0.22);
}
.sh-empty-cta-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -8px hsla(202, 85%, 40%, 0.6), inset 0 1px 0 hsla(0, 0%, 100%, 0.22); }
.sh-empty-cta-primary:active { transform: translateY(0); }
.sh-empty-cta-primary .material-symbols-rounded { font-size: 1.2rem; color: #fff; }
.sh-empty-cta-ghost {
  min-height: 44px; padding: 9px 20px; font-size: 0.9rem; font-weight: 600;
  background: transparent; color: var(--primary, #0288d1);
  border: 1.5px solid var(--border-light, var(--border));
}
.sh-empty-cta-ghost:hover { color: var(--primary, #0288d1); border-color: var(--primary, #0288d1); background: var(--primary-100, rgba(2,136,209,0.06)); }
@media (prefers-reduced-motion: reduce) {
  .sh-empty-cta-primary { transition: none; }
  .sh-empty-cta-primary:hover { transform: none; }
}
.sh-empty-secondary {
  display: flex; gap: 8px; flex-wrap: wrap;
  justify-content: center; margin-top: 10px;
}
.sh-empty-tip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.8rem; color: var(--text-muted, var(--text-secondary));
  margin: 18px 0 0; background: rgba(2,136,209,0.05);
  padding: 8px 14px; border-radius: 8px; max-width: 360px;
  line-height: 1.45;
}
.sh-empty-tip .material-symbols-rounded {
  font-size: 1rem; color: var(--primary, #0288d1); flex-shrink: 0;
}
.sh-empty-checklist {
  list-style: none; margin: 4px 0 18px; padding: 0;
  width: 100%; max-width: 360px;
  display: flex; flex-direction: column; gap: 8px;
}
.sh-empty-check-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 12px;
  background: var(--card, #fff); border: 1px solid var(--border-light, var(--border));
  text-align: left; transition: border-color 0.15s, transform 0.15s;
}
.sh-empty-check-item:hover {
  border-color: var(--primary, #0288d1); transform: translateY(-1px);
}
.sh-empty-check-num {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(2,136,209,0.12), rgba(16,185,129,0.10));
  color: var(--primary, #0288d1); font-weight: 700; font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sh-empty-check-body { flex: 1; min-width: 0; }
.sh-empty-check-label {
  font-size: 0.9rem; font-weight: 600;
  color: var(--text, var(--text-primary)); line-height: 1.3;
}
.sh-empty-check-hint {
  font-size: 0.76rem; color: var(--text-muted, var(--text-secondary));
  margin-top: 2px; line-height: 1.35;
}
.sh-empty-check-btn {
  width: 36px; height: 36px; border-radius: 10px;
  border: none; background: var(--primary-50, rgba(2,136,209,0.08));
  color: var(--primary, #0288d1); cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.sh-empty-check-btn:hover { background: var(--primary, #0288d1); color: #fff; }
.sh-empty-check-btn .material-symbols-rounded { font-size: 1.1rem; }

/* ─── Quotation Detail Actions — desktop dashboard layout ─────────────── */
.qv-action-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px;
  margin: 18px 0 var(--space-2xl);
  padding: 16px;
  border: 1px solid var(--border-light, var(--border));
  border-radius: 18px;
  background: var(--card, #fff);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}
.qv-action-panel .qv-action {
  width: 100%;
  min-height: 48px;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 0.92rem;
  justify-content: center;
  gap: 8px;
  white-space: normal;
}
.qv-action-success {
  background: var(--success, #10b981) !important;
  border-color: var(--success, #10b981) !important;
  color: #fff !important;
}
.qv-action-secondary {
  background: var(--primary, #0288d1) !important;
  border-color: var(--primary, #0288d1) !important;
  color: #fff !important;
}
.qv-action-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.qv-action-row,
.qv-action-meta,
.qv-booked-note {
  grid-column: 1 / -1;
}
.qv-booked-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--success-light, #D1FAE5);
  border: 1px solid color-mix(in srgb, var(--success, #10b981) 30%, transparent);
  color: var(--success, #10b981);
  font-size: 0.85rem;
  font-weight: 700;
}
.qv-action-meta {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 2px;
}
.qv-action-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 7px 12px;
  border-radius: 10px;
  color: var(--text-secondary, #6B7280);
  font-size: 0.82rem;
}
.qv-action-danger { color: var(--danger) !important; }

@media (max-width: 374px) {
  .sh-empty-page { padding: 36px 16px; min-height: 280px; }
  .sh-empty-icon { width: 60px; height: 60px; margin-bottom: 12px; }
  .sh-empty-icon .material-symbols-rounded { font-size: 30px; }
  .sh-empty-title { font-size: 1.1rem; }
}
@media (max-width: 768px) {
  .qv-action-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .qv-action-row {
    display: flex;
    gap: 10px;
  }
  .qv-action-row .qv-action {
    flex: 1;
    min-width: 0;
  }
}

/* ============================================================
   iOS Install Modal — pro-max treatment
   Premium glass card + phone mockup hero + step circles +
   pulsing Share icon. Mobile-first 375px, fully WCAG AA.
   ============================================================ */
.ios-install {
  font-family: var(--font-sans, -apple-system, system-ui, sans-serif);
  color: var(--foreground, #0f172a);
  margin: -4px 0 0;
}

/* Hero: tilted iPhone mockup with brand-colored sparkle bloom */
.ios-install__hero {
  position: relative;
  height: 132px;
  margin: -8px -4px 18px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(7,40,74,0.06) 0%, transparent 60%),
    linear-gradient(180deg, hsl(200, 80%, 97%) 0%, transparent 100%);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ios-install__phone {
  position: relative;
  width: 80px;
  height: 124px;
  background: #07284A;
  border-radius: 16px;
  padding: 8px 6px;
  box-shadow:
    0 18px 30px -10px rgba(7,40,74,0.45),
    0 4px 10px -2px rgba(7,40,74,0.25),
    inset 0 0 0 1.5px rgba(255,255,255,0.08);
  transform: rotate(-6deg);
  animation: iosInstallFloat 4.2s ease-in-out infinite;
}
.ios-install__phone-notch {
  width: 28px;
  height: 4px;
  background: #000;
  border-radius: 0 0 6px 6px;
  margin: 0 auto 6px;
}
.ios-install__phone-screen {
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
  border-radius: 9px;
  height: calc(100% - 14px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.ios-install__phone-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 10px -2px rgba(0,0,0,0.18);
}
.ios-install__phone-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.ios-install__phone-label {
  font-size: 7px;
  font-weight: 600;
  color: #0f172a;
  letter-spacing: 0.2px;
}
.ios-install__sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ios-install__sparkle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: hsl(200, 90%, 60%);
  border-radius: 50%;
  filter: blur(1px);
  opacity: 0;
  animation: iosInstallSparkle 3s ease-in-out infinite;
}
.ios-install__sparkle:nth-child(1) { top: 18%; left: 26%; animation-delay: 0s; }
.ios-install__sparkle:nth-child(2) { top: 30%; right: 22%; animation-delay: 0.8s; width: 6px; height: 6px; }
.ios-install__sparkle:nth-child(3) { bottom: 22%; left: 32%; animation-delay: 1.6s; width: 5px; height: 5px; }

/* Title + subtitle */
.ios-install__title {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: #07284A;
  text-align: center;
}
.ios-install__sub {
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.45;
  color: #64748b;
  text-align: center;
}

/* Step list with connector line through circles */
.ios-install__steps {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  position: relative;
}
.ios-install__steps::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: linear-gradient(180deg, hsl(200, 80%, 80%) 0%, hsl(200, 80%, 92%) 100%);
  border-radius: 1px;
}
.ios-install__step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  position: relative;
  padding: 8px 0;
}
.ios-install__step + .ios-install__step { margin-top: 2px; }
.ios-install__step-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(140deg, hsl(200, 85%, 50%) 0%, hsl(200, 90%, 38%) 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px -2px hsla(200, 90%, 38%, 0.35);
  z-index: 1;
}
.ios-install__step-body {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
}
.ios-install__step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 14.5px;
  color: #0f172a;
  font-weight: 500;
  line-height: 1.4;
}
.ios-install__step-head b { font-weight: 700; color: #07284A; }
.ios-install__step-hint {
  font-size: 12.5px;
  color: #94a3b8;
  margin-top: 2px;
  line-height: 1.4;
}

/* iOS Share button visual (real glyph, not emoji) */
.ios-install__share-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: hsl(200, 85%, 40%);
}
.ios-install__share-btn svg { width: 18px; height: 18px; display: block; }
.ios-install__share-btn--ghost {
  background: transparent;
  color: #475569;
}
.ios-install__pulse {
  position: relative;
  animation: iosInstallPress 2.2s ease-in-out infinite;
}
.ios-install__pulse::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 12px;
  background: hsla(200, 90%, 50%, 0.25);
  z-index: -1;
  animation: iosInstallPulse 2.2s ease-out infinite;
}

/* Perks list */
.ios-install__perks {
  list-style: none;
  margin: 0;
  padding: 14px;
  background: hsl(200, 50%, 97%);
  border: 1px solid hsl(200, 60%, 92%);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.ios-install__perks li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: #334155;
  line-height: 1.3;
}
.ios-install__perks svg {
  width: 16px;
  height: 16px;
  color: hsl(150, 60%, 40%);
  flex-shrink: 0;
}

/* CTA — let the existing btn-primary handle base, just refine for this context */
.btn.ios-install__cta {
  width: 100%;
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 12px;
  letter-spacing: -0.1px;
}

/* Animations */
@keyframes iosInstallFloat {
  0%, 100% { transform: rotate(-6deg) translateY(0); }
  50%      { transform: rotate(-6deg) translateY(-6px); }
}
@keyframes iosInstallSparkle {
  0%, 100% { opacity: 0; transform: scale(0.6); }
  50%      { opacity: 0.8; transform: scale(1); }
}
@keyframes iosInstallPress {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
@keyframes iosInstallPulse {
  0%   { opacity: 0.7; transform: scale(0.85); }
  100% { opacity: 0;   transform: scale(1.35); }
}

@media (prefers-reduced-motion: reduce) {
  .ios-install__phone,
  .ios-install__sparkle,
  .ios-install__pulse,
  .ios-install__pulse::before { animation: none; }
}

/* Dark-mode coherence — modal overlay already handles base */
@media (prefers-color-scheme: dark) {
  .ios-install__hero {
    background:
      radial-gradient(120% 90% at 50% 0%, rgba(56,189,248,0.10) 0%, transparent 60%),
      linear-gradient(180deg, hsl(220, 30%, 14%) 0%, transparent 100%);
  }
  .ios-install__title { color: hsl(200, 80%, 75%); }
  .ios-install__sub   { color: #94a3b8; }
  .ios-install__step-head    { color: #e2e8f0; }
  .ios-install__step-head b  { color: hsl(200, 80%, 75%); }
  .ios-install__step-hint    { color: #64748b; }
  .ios-install__share-btn    { background: rgba(148,163,184,0.10); border-color: rgba(148,163,184,0.18); color: hsl(200, 80%, 65%); }
  .ios-install__perks        { background: rgba(56,189,248,0.06); border-color: rgba(56,189,248,0.15); }
  .ios-install__perks li     { color: #cbd5e1; }
}


/* ============================================================
   Settings — Desktop tab-card layout (≥1024px)
   4 horizontal tab-cards on top, single content panel below.
   Token-only — auto-adapts to dark mode via :root.dark-mode.
   Mobile (<1024px) keeps the original .settings-tabs pills.
   ============================================================ */

@media (min-width: 1024px) {
  .settings-page--desktop .settings-tabs { display: none; }

  .settings-page--desktop {
    max-width: 1240px;
    padding: var(--space-xl);
  }

  .settings-page--desktop .settings-theme-card { margin: 0; }

  /* ── Tab nav: 4 cards in a horizontal grid ───────────── */
  .sst-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 4px 0 18px;
  }

  .sst-tab {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 14px 12px;
    text-align: left;
    background: var(--card);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.12s ease, box-shadow 0.18s ease;
    font: inherit;
    color: inherit;
    min-height: 92px;
    box-shadow: 0 1px 2px hsla(220, 25%, 25%, 0.04);
    position: relative;
  }
  .sst-tab:hover {
    transform: translateY(-1px);
    border-color: var(--border);
    box-shadow: 0 4px 14px -6px hsla(220, 25%, 25%, 0.10);
  }
  .sst-tab:active { transform: translateY(0); }
  .sst-tab:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }
  .sst-tab.is-active {
    border-color: var(--primary);
    box-shadow: 0 4px 16px -6px hsla(200, 80%, 44%, 0.18);
  }
  .sst-tab.is-active::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: -1px;
    height: 3px;
    background: var(--primary);
    border-radius: 3px 3px 0 0;
  }

  /* Promo (Refer & Earn) tab — orange warm tint */
  .sst-tab--promo {
    background: var(--warning-light);
    border-color: var(--warning);
  }
  .sst-tab--promo:hover { border-color: var(--warning); }
  .sst-tab--promo.is-active::after { background: var(--warning); }

  .sst-tab__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--primary-50);
    color: var(--primary);
  }
  .sst-tab__icon .material-symbols-rounded {
    font-size: 20px;
    font-variation-settings: 'FILL' 1, 'wght' 500;
  }
  .sst-tab__icon--blue   { background: var(--primary-50);   color: var(--primary); }
  .sst-tab__icon--green  { background: var(--success-light); color: var(--success); }
  .sst-tab__icon--yellow { background: var(--warning-light); color: var(--warning); }
  .sst-tab__icon--orange { background: var(--warning-light); color: var(--warning); }

  .sst-tab__label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    width: 100%;
  }
  .sst-tab__label strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--foreground);
    letter-spacing: -0.005em;
    line-height: 1.2;
  }
  .sst-tab__sub {
    font-size: 11.5px;
    color: var(--text-secondary);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .sst-tab--promo .sst-tab__label strong { color: var(--warning); }

  .sst-tab__meta {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: auto;
  }

  /* Reuse chip styles — shared with mobile */
  .ssg-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.4;
    background: var(--muted);
    color: var(--text-secondary);
    white-space: nowrap;
  }
  .ssg-chip .material-symbols-rounded { font-size: 12px; }
  .ssg-chip--muted   { background: var(--muted); color: var(--text-secondary); }
  .ssg-chip--success { background: var(--success-light); color: var(--success); }
  .ssg-chip--warn    { background: var(--warning-light); color: var(--warning); }
  .ssg-chip--danger  { background: var(--danger-light);  color: var(--danger); }

  /* ── Content panel ───────────────────────────────────── */
  .sst-content {
    display: block;
  }
  .sst-panel {
    background: var(--card);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 2px 8px -4px hsla(220, 25%, 25%, 0.06);
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .sst-panel[hidden] { display: none; }
  .sst-panel--promo {
    background: var(--warning-light);
    border-color: var(--warning);
  }

  /* Sections inside the panel — flat sub-cards */
  .sst-panel .settings-section,
  .sst-panel .settings-theme-card {
    background: var(--background);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 18px 20px;
    margin: 0;
    box-shadow: none;
  }
  .sst-panel .settings-section h3 {
    font-size: 0.96rem;
    margin-bottom: 14px;
  }
  /* When promo panel, sections sit on neutral card surface */
  .sst-panel--promo .settings-section {
    background: var(--card);
  }

  /* ── Studio Info — 2-col: avatar left, form right ────── */
  .sst-panel .studio-2col {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 22px;
    align-items: start;
  }
  .sst-panel .studio-2col .settings-logo-wrap {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
  }
  .sst-panel .studio-2col .settings-logo-label { display: none; }
  .sst-panel .studio-form-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px 18px;
    align-items: start;
  }
  .sst-panel .studio-form-wrap > .form-group { margin-bottom: 0; }
  .sst-panel .studio-form-wrap > .form-group:has(textarea) { grid-column: 1 / -1; }
  .sst-panel .studio-form-wrap > #portfolioShowcaseBlock,
  .sst-panel .studio-form-wrap > #brandColorBlock,
  .sst-panel .studio-form-wrap > #phoneFormGroup,
  .sst-panel .studio-form-wrap > .setting-row,
  .sst-panel .studio-form-wrap > .btn-block,
  .sst-panel .studio-form-wrap > div[style*="margin-top:20px"] {
    grid-column: 1 / -1;
  }

  /* ── Terms — click-cards grid ─────────────────────────── */
  .sst-panel #settingsTab-terms .terms-cards-grid {
    display: grid;
    /* Was repeat(4, 1fr), which stranded the fifth card (freelancer agreement
       terms) alone on its own row. auto-fit flows them instead. */
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 12px;
    margin: 0 0 var(--space-md);
  }
  .terms-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    text-align: left;
    background: var(--card);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.12s ease, box-shadow 0.18s ease;
    font: inherit;
    color: inherit;
    min-height: 96px;
  }
  .terms-card:hover {
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px -4px hsla(200, 80%, 44%, 0.15);
  }
  .terms-card:active { transform: translateY(0); }
  .terms-card:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }
  .terms-card-head { display: flex; align-items: center; gap: 8px; }
  .terms-card-icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .terms-card-icon .material-symbols-rounded {
    font-size: 16px;
    font-variation-settings: 'FILL' 1, 'wght' 500;
  }
  .terms-card-icon--blue   { background: var(--primary-50);   color: var(--primary); }
  .terms-card-icon--amber  { background: var(--warning-light); color: var(--warning); }
  .terms-card-icon--rose   { background: var(--danger-light);  color: var(--danger); }
  .terms-card-icon--violet { background: var(--muted);         color: var(--text-secondary); }
  .terms-card-icon--teal   { background: var(--success-light); color: var(--success); }
  .terms-card-title {
    flex: 1;
    font-size: 13px;
    font-weight: 700;
    color: var(--foreground);
    letter-spacing: -0.005em;
  }
  .terms-card-edit {
    font-size: 16px;
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 0.15s ease;
  }
  .terms-card:hover .terms-card-edit { opacity: 1; }
  .terms-card-preview {
    font-size: 11.5px;
    color: var(--text-secondary);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .terms-card-empty { color: var(--text-muted); font-style: italic; }

  /* Feedback button at very bottom */
  .settings-page--desktop > div:last-child {
    margin-top: 22px;
  }

  @media (prefers-reduced-motion: reduce) {
    .sst-tab, .terms-card { transition: none; }
  }
}

/* ============================================================
   Settings — Mobile fallback when desktop polish was applied
   (page loaded ≥1024px, then resized/rotated below 1024px).
   Neutralises the injected wrappers so mobile tab UX still works.
   ============================================================ */
@media (max-width: 1023px) {
  .settings-page--desktop .sst-nav { display: none; }
  .settings-page--desktop .sst-content,
  .settings-page--desktop .sst-panel,
  .settings-page--desktop .sst-panel[hidden] { display: contents; }
  .settings-page--desktop .studio-2col,
  .settings-page--desktop .studio-form-wrap { display: contents; }
}

/* ============================================================
   Walk-in Orders — Type selection cards (Step 2)
   Was effectively unstyled (only inline border-color + bg). Adds
   base card chrome + hover lift + press scale + icon scale +
   staggered entrance. Token-only, dark-mode auto via :root.
   ============================================================ */

.wi-type-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 10px;
  min-height: 92px;
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 2px hsla(220, 25%, 25%, 0.04);
  transition:
    transform 0.16s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.15s ease,
    box-shadow 0.18s ease,
    background 0.15s ease;
  /* Subtle entrance — staggered via nth-child below */
  animation: wiTypePop 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.wi-type-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
  box-shadow: 0 6px 16px -6px hsla(200, 80%, 44%, 0.20);
}
.wi-type-card:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 0.08s;
}
.wi-type-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
/* Wave 2b (keyboard-operability): multiselect chip checkbox — visually-hidden
   (not display:none, which the JS used to set inline) so it stays Tab-reachable
   + Space-toggleable; mirrors Wave-1 P2's toggle-switch fix. position:relative
   on the wrapping <label> makes it the containing block — without it the
   absolutely-positioned checkbox would jump to the nearest OTHER positioned
   ancestor (or the viewport), and Tab-focus autoscroll would land somewhere
   visually wrong (same fix P2 needed for .toggle-switch). Ring is drawn on the
   label via :has() since the option text is a bare text node — no element to
   key a sibling selector off. */
.wi-multiselect label { position: relative; }
.wi-ms-check {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.wi-multiselect label:has(.wi-ms-check:focus-visible) {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.wi-type-card.selected {
  /* Inline style sets border-color/background/shadow via type color */
  transform: translateY(-1px);
}
.wi-type-card.selected:hover { transform: translateY(-3px); }

/* Icon — boost size + add interactive scale (compound selector beats global .material-symbols-rounded specificity, no !important needed) */
.wi-type-card .wi-type-icon.material-symbols-rounded {
  font-size: 28px;
  line-height: 1;
  font-variation-settings: 'FILL' 1, 'wght' 500;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.wi-type-card:hover .wi-type-icon.material-symbols-rounded {
  transform: scale(1.1);
}
.wi-type-card.selected .wi-type-icon.material-symbols-rounded {
  transform: scale(1.05);
}

.wi-type-card .wi-type-label {
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--text-primary);
}

/* Check badge — top-right corner, pop in when selected */
.wi-type-card .wi-type-check.material-symbols-rounded {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 18px;
  line-height: 1;
  font-variation-settings: 'FILL' 1;
  animation: wiTypeCheckPop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Entrance: pop up */
@keyframes wiTypePop {
  from { opacity: 0; transform: translateY(6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
@keyframes wiTypeCheckPop {
  from { opacity: 0; transform: scale(0.4); }
  60%  { opacity: 1; transform: scale(1.18); }
  to   { opacity: 1; transform: scale(1); }
}

/* Staggered entrance — first 12 cards (max grid in screenshot) */
.wi-type-card:nth-child(1)  { animation-delay: 0.02s; }
.wi-type-card:nth-child(2)  { animation-delay: 0.05s; }
.wi-type-card:nth-child(3)  { animation-delay: 0.08s; }
.wi-type-card:nth-child(4)  { animation-delay: 0.11s; }
.wi-type-card:nth-child(5)  { animation-delay: 0.14s; }
.wi-type-card:nth-child(6)  { animation-delay: 0.17s; }
.wi-type-card:nth-child(7)  { animation-delay: 0.20s; }
.wi-type-card:nth-child(8)  { animation-delay: 0.23s; }
.wi-type-card:nth-child(9)  { animation-delay: 0.26s; }
.wi-type-card:nth-child(10) { animation-delay: 0.29s; }
.wi-type-card:nth-child(11) { animation-delay: 0.32s; }
.wi-type-card:nth-child(12) { animation-delay: 0.35s; }

@media (prefers-reduced-motion: reduce) {
  .wi-type-card,
  .wi-type-card .wi-type-icon.material-symbols-rounded,
  .wi-type-card .wi-type-check.material-symbols-rounded {
    animation: none;
    transition: background 0.15s ease, border-color 0.15s ease;
  }
  .wi-type-card:hover,
  .wi-type-card:active,
  .wi-type-card:hover .wi-type-icon.material-symbols-rounded { transform: none; }
}

/* ============================================================
   Inquiry Card v2 — professional CRM card design
   Replaces the emoji-soup card with proper hierarchy, icons,
   and consistent action buttons.
   ============================================================ */
.inq-card-pro {
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(15,23,42,0.03), 0 4px 12px -4px rgba(15,23,42,0.06);
  transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.05s ease;
}
.inq-card-pro:hover {
  border-color: var(--primary);
  box-shadow: 0 2px 6px rgba(15,23,42,0.05), 0 10px 24px -8px rgba(15,23,42,0.10);
}

.inq-pro-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.inq-pro-identity { flex: 1; min-width: 0; }
.inq-pro-name {
  font-weight: 700; font-size: 1.02rem; color: var(--text);
  letter-spacing: -0.01em; line-height: 1.2; margin-bottom: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inq-pro-phone {
  font-size: 0.84rem; color: var(--text-secondary);
  font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
}

.inq-pro-status {
  padding: 4px 11px 4px 9px;
  border-radius: 999px;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
  flex-shrink: 0;
}
.inq-pro-status::before {
  content: ''; width: 6px; height: 6px;
  border-radius: 50%; background: currentColor;
}
.inq-pro-status[data-status="new"]       { background: rgba(37,99,235,0.10);  color: #1d4ed8; }
.inq-pro-status[data-status="contacted"] { background: rgba(180,83,9,0.10);   color: #b45309; }
.inq-pro-status[data-status="converted"] { background: rgba(21,128,61,0.10);  color: #15803d; }
.inq-pro-status[data-status="dropped"]   { background: rgba(71,85,105,0.10);  color: #475569; }

.inq-pro-source-line {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
}
.inq-pro-source {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.74rem; color: var(--text-secondary);
  font-weight: 600; letter-spacing: 0.02em;
  padding: 3px 9px; border-radius: 6px;
  background: var(--gray-50, #f8fafc);
  border: 1px solid var(--border-light);
}
.inq-pro-source .material-symbols-rounded {
  font-size: 13px; color: var(--text-secondary);
}

.inq-pro-event {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 8px; flex-wrap: wrap;
}
.inq-pro-event-name {
  font-weight: 600; font-size: 0.94rem; color: var(--text);
  letter-spacing: -0.005em;
}
.inq-pro-event-type {
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--primary); padding: 3px 8px;
  border-radius: 4px; background: rgba(37,99,235,0.08);
}

.inq-pro-meta {
  display: flex; flex-wrap: wrap;
  gap: 6px 16px; margin-bottom: 10px;
}
.inq-pro-fact {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.81rem; color: var(--text-secondary); font-weight: 500;
}
.inq-pro-fact .material-symbols-rounded {
  font-size: 16px; color: var(--text-muted, #94a3b8);
}
.inq-pro-fact .muted { color: var(--text-muted, #94a3b8); font-weight: 400; }

.inq-pro-req {
  font-size: 0.84rem; color: var(--text-secondary);
  font-style: italic; line-height: 1.55;
  padding: 8px 12px; margin: 0 0 12px;
  border-left: 3px solid var(--border);
  background: var(--gray-50, #f8fafc);
  border-radius: 0 8px 8px 0;
  white-space: pre-wrap;
}
.inq-pro-req::before { content: '"'; opacity: 0.4; margin-right: 2px; }
.inq-pro-req::after  { content: '"'; opacity: 0.4; margin-left: 2px; }

.inq-pro-actions {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding-top: 12px; margin-top: 4px;
  border-top: 1px solid var(--border-light);
}

.inq-pro-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 13px; border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card); color: var(--text);
  font-size: 0.78rem; font-weight: 600;
  cursor: pointer; transition: all 0.15s ease;
  font-family: inherit; min-height: 34px;
}
.inq-pro-btn:hover {
  border-color: var(--text-secondary);
  background: var(--gray-50, #f8fafc);
}
.inq-pro-btn .material-symbols-rounded { font-size: 15px; }
.inq-pro-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.inq-pro-btn-primary {
  background: var(--primary); border-color: var(--primary); color: #fff;
}
.inq-pro-btn-primary:hover { filter: brightness(0.93); background: var(--primary); }

.inq-pro-btn-success { color: var(--success); border-color: var(--success); }
.inq-pro-btn-success:hover { background: var(--success); color: #fff; }

.inq-pro-btn-wa { color: #25d366; border-color: #25d366; }
.inq-pro-btn-wa:hover { background: #25d366; color: #fff; }

.inq-pro-btn-danger { color: var(--danger); }
.inq-pro-btn-danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

/* Call badge inside the card */
.inq-pro-callbadge {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 12px;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(37,99,235,0.06);
  border: 1px solid rgba(37,99,235,0.18);
  font-size: 0.74rem; color: var(--primary);
  font-weight: 600; cursor: pointer;
  transition: background 0.15s;
}
.inq-pro-callbadge:hover { background: rgba(37,99,235,0.12); }
.inq-pro-callbadge .material-symbols-rounded { font-size: 14px; }

/* Mobile tighten */
@media (max-width: 600px) {
  .inq-card-pro { padding: 14px 14px; }
  .inq-pro-actions { gap: 5px; }
  .inq-pro-btn { padding: 6px 10px; font-size: 0.73rem; }
}

/* ============================================================
   Outcome pills — colored, semantic, partially filled
   ============================================================ */
.outcome-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.outcome-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s, color 0.15s;
  border: 1.5px solid;
  font-family: inherit;
  background: transparent;
  user-select: none;
}
.outcome-pill::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.outcome-pill:hover { transform: translateY(-1px); }

/* Semantic palettes — partially colored (tinted bg + colored text + colored border) */
.outcome-pill[data-outcome="no_answer"]      { background: #f1f5f9; color: #64748b; border-color: #cbd5e1; }
.outcome-pill[data-outcome="discussed"]      { background: #dbeafe; color: #1d4ed8; border-color: #93c5fd; }
.outcome-pill[data-outcome="interested"]     { background: #ccfbf1; color: #0d9488; border-color: #5eead4; }
.outcome-pill[data-outcome="followup"]       { background: #fef3c7; color: #b45309; border-color: #fcd34d; }
.outcome-pill[data-outcome="quoted"]         { background: #ede9fe; color: #7c3aed; border-color: #c4b5fd; }
.outcome-pill[data-outcome="booked"]         { background: #dcfce7; color: #15803d; border-color: #86efac; }
.outcome-pill[data-outcome="not_interested"] { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
.outcome-pill[data-outcome="dropped"]        { background: #e2e8f0; color: #475569; border-color: #94a3b8; }

/* Selected — solid fill, white text */
.outcome-pill.is-selected {
  color: #fff;
  transform: scale(1.04);
  box-shadow: 0 2px 8px -2px rgba(0,0,0,0.2);
}
.outcome-pill.is-selected::before { background: rgba(255,255,255,0.85); }
.outcome-pill.is-selected[data-outcome="no_answer"]      { background: #64748b; border-color: #64748b; }
.outcome-pill.is-selected[data-outcome="discussed"]      { background: #1d4ed8; border-color: #1d4ed8; }
.outcome-pill.is-selected[data-outcome="interested"]     { background: #0d9488; border-color: #0d9488; }
.outcome-pill.is-selected[data-outcome="followup"]       { background: #b45309; border-color: #b45309; }
.outcome-pill.is-selected[data-outcome="quoted"]         { background: #7c3aed; border-color: #7c3aed; }
.outcome-pill.is-selected[data-outcome="booked"]         { background: #15803d; border-color: #15803d; }
.outcome-pill.is-selected[data-outcome="not_interested"] { background: #b91c1c; border-color: #b91c1c; }
.outcome-pill.is-selected[data-outcome="dropped"]        { background: #475569; border-color: #475569; }

/* Inline SVG sizing in source chip */
.inq-pro-source svg { display: block; flex-shrink: 0; }

/* All event days listed per row */
.inq-pro-dates-full {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.inq-pro-day {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(37,99,235,0.06);
  border: 1px solid rgba(37,99,235,0.15);
  font-size: 0.76rem;
}
.inq-pro-day-label {
  color: var(--primary);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.inq-pro-day-date {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Notes-from-client block */
.inq-pro-notes {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
  padding: 8px 12px;
  margin: 0 0 12px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  white-space: pre-wrap;
}
.inq-pro-notes strong {
  color: #b45309;
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 3px;
}

/* ============================================================
   Inquiry Card v3 — DENSE CRM ROW
   Compact, scannable, responsive on every device.
   Linear/Pipedrive density tuned for Indian wedding studio CRM.
   ============================================================ */

.inq-card-v3 {
  --card-pad-x: 14px;
  --card-pad-y: 12px;
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: var(--card-pad-y) var(--card-pad-x);
  margin-bottom: 10px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.03), 0 3px 10px -4px rgba(15,23,42,0.05);
  transition: border-color 0.15s, box-shadow 0.15s;
  position: relative;
}
.inq-card-v3:hover {
  border-color: var(--primary);
  box-shadow: 0 2px 4px rgba(15,23,42,0.04), 0 8px 18px -6px rgba(15,23,42,0.08);
}
@media (min-width: 768px) {
  .inq-card-v3 { --card-pad-x: 16px; --card-pad-y: 14px; }
}

/* Row 1 — Identity / source / status */
.inq-c-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.inq-c-identity {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.inq-c-name {
  font-weight: 700;
  font-size: 0.96rem;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.inq-c-phone {
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.inq-c-head-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
@media (max-width: 479px) {
  .inq-c-head { flex-wrap: wrap; }
  .inq-c-head-right { width: 100%; justify-content: flex-end; }
}

/* Row 2 — Meta facts (city · email · budget) */
.inq-c-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-bottom: 8px;
  font-size: 0.79rem;
  color: var(--text-secondary);
}
.inq-c-fact {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  min-width: 0;
}
.inq-c-fact .material-symbols-rounded {
  font-size: 14px;
  color: var(--text-muted, #94a3b8);
  flex-shrink: 0;
}
.inq-c-fact a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: border-color 0.15s;
}
.inq-c-fact a:hover { border-bottom-color: var(--primary); color: var(--primary); }

/* Row 3 — Event line: name + type-pill + date pills */
.inq-c-event {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.inq-c-event-name {
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--text);
  letter-spacing: -0.005em;
}
.inq-c-event-type {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(37,99,235,0.10);
  white-space: nowrap;
}
.inq-c-days {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: 0;
}
.inq-c-day {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--gray-50, #f8fafc);
  border: 1px solid var(--border-light);
  font-size: 0.71rem;
  color: var(--text-secondary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.inq-c-day b {
  font-weight: 700;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--primary);
}
.inq-c-day-more {
  color: var(--text-muted);
  background: transparent;
  border-style: dashed;
}

/* Row 4 — Content (requirements + notes + wishlist) clamped */
.inq-c-req,
.inq-c-notes,
.inq-c-wish {
  font-size: 0.795rem;
  line-height: 1.45;
  margin-bottom: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}
.inq-c-req {
  color: var(--text-secondary);
  font-style: italic;
  background: var(--gray-50, #f8fafc);
  border-left: 3px solid var(--border);
}
.inq-c-req::before { content: '"'; opacity: 0.5; }
.inq-c-req::after  { content: '"'; opacity: 0.5; }

.inq-c-notes {
  color: #78350f;
  background: #fffbeb;
  border-left: 3px solid #f59e0b;
}
.inq-c-notes-tag {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b45309;
  background: rgba(245,158,11,0.15);
  padding: 1px 5px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: 1px;
}

.inq-c-wish {
  color: var(--text-secondary);
  background: transparent;
  border-left: none;
  padding: 0;
  -webkit-line-clamp: 2;
  font-style: normal;
}
.inq-c-wish strong { color: #7c3aed; font-weight: 600; }

/* Expand on tap (mobile) / hover (desktop) */
.inq-c-req:hover,
.inq-c-notes:hover,
.inq-c-wish:hover {
  -webkit-line-clamp: unset;
  cursor: default;
}

/* Row 5 — Foot: actions + call badge */
.inq-c-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  margin-top: 4px;
  border-top: 1px solid var(--border-light);
  flex-wrap: wrap;
}
.inq-c-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  flex: 1;
  min-width: 0;
}
.inq-c-actions .inq-pro-btn {
  padding: 5px 11px;
  min-height: 30px;
  font-size: 0.74rem;
  border-radius: 7px;
}
.inq-c-actions .inq-pro-btn .material-symbols-rounded {
  font-size: 14px;
}

/* Call badge shrinks into the footer */
.inq-c-foot .inq-pro-callbadge {
  margin: 0;
  padding: 4px 9px;
  font-size: 0.7rem;
}

/* Mobile — collapse non-primary action labels to icons */
@media (max-width: 479px) {
  .inq-c-actions .inq-pro-btn:not(.inq-pro-btn-primary):not(.inq-pro-btn-success) {
    padding: 6px 8px;
    gap: 0;
    min-width: 32px;
    justify-content: center;
  }
  /* Hide text content for icon-only buttons on tiny screens (keep aria-label intact) */
  .inq-c-actions .inq-pro-btn.inq-pro-btn-wa,
  .inq-c-actions .inq-pro-btn.inq-pro-btn-danger,
  .inq-c-actions .inq-pro-btn[data-act="contacted"],
  .inq-c-actions .inq-pro-btn[data-act="unconvert"] {
    font-size: 0;
  }
  .inq-c-actions .inq-pro-btn.inq-pro-btn-wa .material-symbols-rounded,
  .inq-c-actions .inq-pro-btn.inq-pro-btn-danger .material-symbols-rounded,
  .inq-c-actions .inq-pro-btn[data-act="contacted"] .material-symbols-rounded,
  .inq-c-actions .inq-pro-btn[data-act="unconvert"] .material-symbols-rounded {
    font-size: 16px;
  }
}

/* Wide-desktop polish — slightly more breathing room */
@media (min-width: 1280px) {
  .inq-card-v3 { padding: 16px 20px; }
  .inq-c-name { font-size: 1rem; }
}

/* ============================================================
   Inquiry card — Blinkit-style ULTRA dense
   Tiny cards that still show every field. Grid grows to 3-col
   on wide screens.
   ============================================================ */

/* 3-col grid on wide desktops (≥1440px) */
@media (min-width: 1440px) {
  .clients-cards.inquiries-mode {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Ultra-compact when in 2-col / 3-col grid mode */
@media (min-width: 1024px) {
  .clients-cards.inquiries-mode .inq-card-v3 {
    --card-pad-x: 12px;
    --card-pad-y: 10px;
    border-radius: 10px;
  }
  .clients-cards.inquiries-mode .inq-c-head { margin-bottom: 6px; gap: 8px; }
  .clients-cards.inquiries-mode .inq-c-name { font-size: 0.9rem; }
  .clients-cards.inquiries-mode .inq-c-phone { font-size: 0.74rem; }

  .clients-cards.inquiries-mode .inq-c-meta {
    margin-bottom: 6px;
    gap: 2px 10px;
    font-size: 0.74rem;
  }
  .clients-cards.inquiries-mode .inq-c-fact .material-symbols-rounded { font-size: 13px; }

  .clients-cards.inquiries-mode .inq-c-event {
    margin-bottom: 6px;
    gap: 4px;
  }
  .clients-cards.inquiries-mode .inq-c-event-name { font-size: 0.81rem; }
  .clients-cards.inquiries-mode .inq-c-event-type {
    font-size: 0.58rem;
    padding: 1px 6px;
  }
  .clients-cards.inquiries-mode .inq-c-day {
    padding: 1px 6px;
    font-size: 0.68rem;
  }
  .clients-cards.inquiries-mode .inq-c-day b { font-size: 0.58rem; }

  .clients-cards.inquiries-mode .inq-c-req,
  .clients-cards.inquiries-mode .inq-c-notes,
  .clients-cards.inquiries-mode .inq-c-wish {
    font-size: 0.75rem;
    padding: 5px 9px;
    margin-bottom: 5px;
    line-height: 1.38;
    -webkit-line-clamp: 2;
  }
  .clients-cards.inquiries-mode .inq-c-notes-tag {
    font-size: 0.55rem;
    padding: 0 4px;
    margin-right: 4px;
  }

  .clients-cards.inquiries-mode .inq-c-foot {
    padding-top: 6px;
    margin-top: 2px;
    gap: 6px;
  }
  .clients-cards.inquiries-mode .inq-c-actions { gap: 4px; }
  .clients-cards.inquiries-mode .inq-c-actions .inq-pro-btn {
    padding: 4px 9px;
    min-height: 28px;
    font-size: 0.7rem;
    border-radius: 6px;
  }
  .clients-cards.inquiries-mode .inq-c-actions .inq-pro-btn .material-symbols-rounded {
    font-size: 13px;
  }

  /* In grid mode collapse non-primary action labels to icons (Blinkit-style) */
  .clients-cards.inquiries-mode .inq-c-actions .inq-pro-btn:not(.inq-pro-btn-primary):not(.inq-pro-btn-success) {
    font-size: 0;
    padding: 5px 7px;
    min-width: 28px;
    justify-content: center;
  }
  .clients-cards.inquiries-mode .inq-c-actions .inq-pro-btn:not(.inq-pro-btn-primary):not(.inq-pro-btn-success) .material-symbols-rounded {
    font-size: 14px;
  }

  .clients-cards.inquiries-mode .inq-pro-status {
    font-size: 0.6rem;
    padding: 3px 8px 3px 7px;
  }
  .clients-cards.inquiries-mode .inq-pro-status::before {
    width: 5px; height: 5px;
  }
  .clients-cards.inquiries-mode .inq-pro-source {
    font-size: 0.66rem;
    padding: 2px 7px;
    gap: 4px;
  }
  .clients-cards.inquiries-mode .inq-pro-source svg {
    width: 12px; height: 12px;
  }
  .clients-cards.inquiries-mode .inq-pro-callbadge {
    font-size: 0.65rem;
    padding: 3px 7px;
  }
}

/* ─── Walk-in detail: simplified action footer (v2) ───
   Low-frequency actions (Bill, Lock, Assign, Cancel) stay hidden behind the
   "More" toggle; placed at end of file so it outranks the mobile tile-grid
   rules at equal specificity without needing higher weight. */
.wi-detail-actions .btn.wi-act-extra { display: none; }
.wi-detail-actions.expanded .btn.wi-act-extra { display: flex; }
.wi-detail-actions .wi-lock-hint {
  flex-basis: 100%; grid-column: 1 / -1;
  display: flex; align-items: center; gap: 6px;
  font-size: 0.75rem; font-weight: 600; color: var(--text-muted);
  background: var(--gray-50, #F8FAFC); border: 1px solid var(--border-light);
  border-radius: 10px; padding: 7px 10px;
}

/* Walk-in wizard: edit-mode banner (same wizard as create — reassure the user) */
.wi-edit-hint {
  display: flex; align-items: center; gap: 6px;
  background: #FFF7ED; color: #9A3412; border: 1px solid #FED7AA;
  border-radius: 12px; padding: 8px 12px; margin-bottom: 12px;
  font-size: 0.78rem; font-weight: 600;
}
.wi-edit-hint .material-symbols-rounded { font-size: 1.05rem; flex-shrink: 0; }

/* ─── Collect-money icon (coins over open hand) ───
   Sprite #i-hand-coins lives in index.html <body>. The svg carries the
   material-symbols-rounded class so existing font-size rules size it (1em box). */
svg.ico-collect {
  width: 1em; height: 1em; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -0.125em;
}

/* ─── Sidebar footer: Settings pinned at the bottom ───
   .sidebar-nav is flex:1, so this sticks to the sidebar's bottom edge. */
.sidebar-footer {
  flex-shrink: 0;
  padding: var(--space-sm) var(--space-md);
  padding-bottom: max(var(--space-md), env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ─── Walk-in cards: one-tap status-advance button ───
   Sits under the status badge on list + grid cards; icon-only,
   the label lives in its data-tip tooltip (js/tooltip.js). */
.wi-card-status-col { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.wi-status-next {
  min-height: 36px; padding: 0 12px 0 9px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  background: var(--primary); color: #fff; border: none;
  font-size: 0.72rem; font-weight: 700; font-family: 'DM Sans', sans-serif;
  white-space: nowrap;
  box-shadow: 0 3px 8px rgba(14,165,233,.28);
  -webkit-tap-highlight-color: transparent;
  transition: transform .14s ease, box-shadow .18s ease;
}
.wi-status-next .material-symbols-rounded { font-size: 1.1rem; }
.wi-status-next:active { transform: scale(.94); }
.wi-status-next:disabled { opacity: .55; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .wi-status-next:hover { transform: translateY(-1px); box-shadow: 0 5px 12px rgba(14,165,233,.36); }
}

/* ─── Quotation list cards (qtl-*) — recognition-first redesign ───
   The calendar tile is the identity: photographers remember jobs by the
   event date. Tile color inherits the event-type color via --ec. */
.qtl-card {
  position: relative; display: flex; gap: 12px; align-items: stretch;
  background: var(--card); border: 1px solid var(--border-light); border-radius: 18px;
  padding: 12px; cursor: pointer; box-shadow: 0 1px 3px rgba(15,23,42,.05);
}
.qtl-date {
  flex-shrink: 0; width: 62px; border-radius: 14px; padding: 8px 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  /* fallback tint for browsers without color-mix (old Android WebView) */
  background: #F0F9FF; border: 1px solid #BAE6FD; color: var(--ec);
  background: color-mix(in srgb, var(--ec) 9%, #fff);
  border-color: color-mix(in srgb, var(--ec) 22%, #fff);
}
.qtl-date-mon { font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.qtl-date-day { font-size: 1.5rem; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
.qtl-date-wk { font-size: 0.6rem; font-weight: 600; opacity: .75; }
.qtl-date.past { background: var(--gray-100, #f3f4f6); border-color: var(--border-light); color: var(--text-muted); }
.qtl-date.nodate { color: var(--ec); gap: 4px; }
.qtl-date.nodate .material-symbols-rounded { font-size: 1.4rem; }
.qtl-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.qtl-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.qtl-title { font-size: 0.92rem; font-weight: 700; color: var(--text-primary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qtl-ver { display: inline-block; font-size: 0.62rem; font-weight: 800; color: #7C3AED; background: #EDE9FE; border-radius: 6px; padding: 1px 5px; vertical-align: 2px; }
.qtl-amt { font-size: 0.92rem; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.qtl-meta { display: flex; align-items: center; gap: 5px; font-size: 0.76rem; color: var(--text-secondary); min-width: 0; overflow: hidden; white-space: nowrap; }
.qtl-meta > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.qtl-client { font-weight: 600; flex-shrink: 0; }
.qtl-venue { display: inline-flex; align-items: center; gap: 2px; }
.qtl-venue .material-symbols-rounded { font-size: 0.85rem; }
.qtl-dot { color: var(--text-muted); flex-shrink: 0; }
.qtl-foot { margin-top: 1px; }
.qtl-sub { font-size: 0.7rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.qtl-actions { margin-top: 7px; display: flex; justify-content: flex-end; }
.qtl-send {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px;
  border-radius: 10px; border: 1px solid rgba(37,211,102,.45); background: rgba(37,211,102,.07);
  color: #128C4B; font-size: 0.76rem; font-weight: 700; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.qtl-send:active { transform: scale(.96); }
.qtl-send:disabled { opacity: .5; }
@media (hover: hover) and (pointer: fine) {
  .qtl-card { transition: transform .15s ease, box-shadow .2s ease; }
  .qtl-card:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15,23,42,.08); }
  .qtl-send:hover { background: rgba(37,211,102,.14); }
}

/* First-send variant — matches the detail page's green "Send to Client" */
.qtl-send.qtl-send-go { background: #16A34A; border-color: #16A34A; color: #fff; box-shadow: 0 3px 8px rgba(22,163,74,.25); }
@media (hover: hover) and (pointer: fine) {
  .qtl-send.qtl-send-go:hover { background: #15803D; }
}

/* ─── Quotation list wrapper: stack on mobile, card grid on desktop ───
   Wide screens turned each row into one empty river between title and ₹;
   ≥900px the same cards flow into 2-3 columns. Equal-height cards via
   grid stretch; actions pinned to the card bottom so rows align. */
.qtl-grid { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 900px) {
  .qtl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 14px;
    align-items: stretch;
  }
  .qtl-grid .qtl-card { padding: 14px; }
  .qtl-grid .qtl-actions { margin-top: auto; padding-top: 8px; }
  /* user picked list view — back to full-width rows */
  .qtl-grid.qtl-as-list { display: flex; flex-direction: column; gap: 10px; }
  .qtl-grid.qtl-as-list .qtl-card { padding: 12px; }
  .qtl-grid.qtl-as-list .qtl-actions { margin-top: 7px; padding-top: 0; }
}

/* ─── Dashboard global search — in-page results panel ─── */
/* Sticky shell — DESKTOP ONLY: pins the search bar (and its results dropdown)
   just below the sticky .app-header (z-50) while the dashboard scrolls under
   it. On phones the bar scrolls away normally (vertical space is scarce and
   content sliding under the band read as broken). */
.dsh-search-sticky .dsh-search-wrap { margin-bottom: 12px; }
@media (min-width: 900px) {
  .dsh-search-sticky {
    position: sticky;
    top: var(--header-height, 60px);
    z-index: 40;
    background: var(--background);
    padding: 8px 0 12px;
    margin: -8px 0 4px;
    box-shadow: 0 10px 12px -12px rgba(15, 23, 42, 0.22);
  }
  .dsh-search-sticky .dsh-search-wrap { margin-bottom: 0; }
  .dsh-search-sticky .dsh-search-results { margin-bottom: 0; margin-top: 10px; }
}
.dsh-search-wrap { position: relative; margin-bottom: 12px; }
.dsh-search-ico {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); font-size: 1.25rem; pointer-events: none;
}
.dsh-search-input {
  width: 100%; min-height: 52px; border-radius: 26px;
  padding-left: 48px; font-size: 0.95rem;
  background: var(--card); border: 1px solid var(--border-light);
  box-shadow: 0 1px 3px rgba(15,23,42,.05);
}
.dsh-search-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent); }
.dsh-search-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; display: none; align-items: center; justify-content: center;
  border: none; background: none; border-radius: 50%; cursor: pointer;
  color: var(--text-muted); padding: 0; z-index: 2;
}
.dsh-search-clear.show { display: flex; }
.dsh-search-clear .material-symbols-rounded { font-size: 20px; }
.dsh-search-clear:active { background: rgba(0,0,0,.06); }
.dsh-search-results {
  background: var(--card); border: 1px solid var(--border-light); border-radius: 20px;
  padding: 8px; margin-bottom: 12px; max-height: 62vh; overflow-y: auto;
}
.search-result-row.kbd-active { background: var(--gray-100, #f3f4f6); }
.sh-hints-item.kbd-active { background: var(--gray-100, #f3f4f6); }
/* Collect Payment search→results keyboard bridge (Wave 2a) — mirrors this
   row's own :hover treatment so ArrowDown/Up highlight reads as "as if hovered". */
.cp-client-row.kbd-active { background: var(--primary-50); border-color: var(--primary-100); }
/* Rental wizard client-picker search→results keyboard bridge (Wave 3c) —
   mirrors the cp-client-row treatment above. */
.wiz-client-row.kbd-active { background: var(--primary-50); }
/* Desktop: narrower, centered — the mock's proportions */
@media (min-width: 900px) {
  .dsh-search-wrap { max-width: 640px; margin-left: auto; margin-right: auto; }
  .dsh-search-results { max-width: 640px; margin-left: auto; margin-right: auto; }
  /* Dashboard hero: the column carries the cap for both, so the pill and the
     panel share one left edge whether or not the bell is rendered. */
  .dh-search-row .dsh-search-col { max-width: 640px; margin-left: auto; margin-right: auto; }
  .dh-search-row .dsh-search-col .dsh-search-wrap,
  .dh-search-row .dsh-search-col .dsh-search-results { max-width: none; margin-left: 0; margin-right: 0; }
  /* Quick-action chips sit centered directly under the search pill.
     overflow:visible so the hover lift shadow isn't clipped square by the
     mobile scroll-container rule; desktop never needs horizontal scroll. */
  .dsh-chips { width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; overflow: visible; padding: 2px 4px 8px; }
}

/* Card/list segmented toggle — desktop-only (mobile always stacks) */
.qtl-view-toggle {
  display: none; align-items: center; gap: 2px; padding: 3px;
  background: var(--gray-100, #f3f4f6); border: 1px solid var(--border-light); border-radius: 12px;
}
@media (min-width: 900px) {
  .qtl-view-toggle { display: inline-flex; }
}
.qtl-view-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 30px; border: none; border-radius: 9px;
  background: transparent; color: var(--text-muted); cursor: pointer; padding: 0;
}
.qtl-view-btn .material-symbols-rounded { font-size: 1.1rem; }
.qtl-view-btn.active { background: var(--card, #fff); color: var(--primary); box-shadow: 0 1px 3px rgba(15,23,42,.12); }
@media (hover: hover) and (pointer: fine) {
  .qtl-view-btn:not(.active):hover { color: var(--text-secondary); }
}

/* ─── Quotation detail (qv): desktop split layout ───
   ≥1024px: content column left, summary (journey/stats/validity) top-right,
   action panel below it — sticky, so actions never need a 3-screen scroll.
   Mobile keeps the original stacked order. */
.qv-cols { display: flex; flex-direction: column; }
.qv-side, .qv-main, .qv-rail { min-width: 0; }
@media (min-width: 1024px) {
  .qv-cols {
    display: grid; grid-template-columns: minmax(0, 1fr) 370px;
    grid-template-areas: "main side" "main rail" "main .";
    grid-template-rows: auto auto 1fr;
    column-gap: 16px; align-items: start;
  }
  .qv-main { grid-area: main; }
  .qv-side { grid-area: side; }
  .qv-rail { grid-area: rail; position: sticky; top: 76px; }
  .qv-rail .qv-action-panel { grid-template-columns: 1fr; margin: 0 0 16px; padding: 14px; }
}

/* ─── Bookings header stats — one row on desktop ───
   Mobile keeps the 3-col grid with the due card spanning 2;
   ≥1024px all cards share a single row (auto-fit handles staff view's 4 cards). */
.bk-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: var(--space-lg); }
.bk-stats .bk-stat-due { grid-column: span 2; }
@media (min-width: 1024px) {
  .bk-stats { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .bk-stats .bk-stat-due { grid-column: auto; }
}

/* ─── Modal exit: no frozen buttons during the fade ───
   Once .open is removed the pointer can no longer "hover" anything inside,
   so the close button's grey hover circle / focus ring vanish with the modal
   instead of hanging mid-fade and catching the eye. */
.modal-overlay:not(.open) { pointer-events: none; }
.modal-overlay:not(.open) .modal-close,
.modal-overlay:not(.open) .modal-close:hover,
.modal-overlay:not(.open) .modal-close:focus-visible {
  background: transparent; box-shadow: none; outline: none; transition: none;
}


/* ─── Dashboard bottom: ONE continuous 2-col desktop layout ───
   Left: revenue trend, rental/dues alerts, mini calendar.
   Right: upcoming bookings, inquiry QR, recent activity.
   Columns flow independently — no dead zones from row alignment.
   Mobile: wrappers become display:contents and `order` restores the
   original stacked sequence (trend → alerts → upcoming → calendar → QR → activity). */
.dsh-bottom { display: flex; flex-direction: column; }
.dsh-bot-left, .dsh-bot-right { display: contents; }
.dsh-blk-trend { order: 1; }
#dashOverdueRentals { order: 2; }
#dashPaymentDues { order: 3; }
.dsh-blk-upcoming { order: 4; }
/* Calendar / QR / activity now sit inside the collapsed .dsh-more group (one flex child) */
.dsh-bottom .dsh-more { order: 5; }
.dsh-bottom .calendar-legend-wrap { margin-bottom: 14px; }
@media (min-width: 1024px) {
  .dsh-bottom { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 16px; align-items: start; }
  .dsh-bot-left, .dsh-bot-right { display: block; min-width: 0; }
  .dsh-bottom .calendar-legend-wrap, .dsh-bottom #miniCalendarSlot, .dsh-bottom .mini-calendar-card { width: 100%; }
  /* QR: quiet full-width card on desktop (mobile keeps the floating poster) */
  .dsh-bottom .qr-pp { padding: 0; justify-content: stretch; margin-bottom: 16px; }
  .dsh-bottom .qr-pp-card {
    width: 100%; max-width: none; border-radius: 18px;
    border: 1px solid var(--border-light);
    box-shadow: 0 1px 3px rgba(15,23,42,.05);
  }
}

/* Year-jump buttons on calendars — slightly muted so month nav stays primary */
.cal-nav-btn.cal-nav-year .material-symbols-rounded,
.mini-cal-nav.mini-cal-year { opacity: .62; }
.cal-nav-btn.cal-nav-year:hover .material-symbols-rounded,
.mini-cal-nav.mini-cal-year:hover { opacity: 1; }

/* ─── Calendar desktop: side panel scrolls independently ───
   Panel pins below the header and scrolls its own content (events +
   received payments) instead of stretching the whole page. */
@media (min-width: 1024px) {
  body .cal-desktop .cal-side-panel.cal-panel-open {
    position: sticky;
    top: 72px;
    align-self: flex-start;
    max-height: calc(100vh - 92px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}

/* ─── Small help dot ("?") — subtle inline hint wired to SHTooltip ───
   Replaces the heavy solid-blue tooltip-icon inside form labels. */
.tooltip-icon-sm {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-left: 6px; vertical-align: 1px;
  border-radius: 50%; border: 1.2px solid var(--border, #cbd5e1);
  color: var(--text-muted); font-size: 0.6rem; font-weight: 800;
  cursor: help; user-select: none; flex-shrink: 0;
}
.tooltip-icon-sm:hover,
.tooltip-icon-sm:focus-visible { border-color: var(--primary); color: var(--primary); outline: none; }

/* Suppress entrance cascade on list refreshes (search/sort) — plays only once */
body #ordersList.sh-no-entrance .order-card { animation: none; }

/* ─── Profile meter: compact single row on desktop ───
   The stacked banner (~150px) pushed the whole dashboard down. ≥1024px it
   becomes one slim row: title · % · bar · progress · chips (scroll) · ✕.
   Mobile keeps the stacked card. */
@media (min-width: 1024px) {
  #profileMeter.meter-card:not(.meter-complete) {
    display: flex; align-items: center; gap: 14px;
    padding: 9px 44px 9px 16px;
  }
  #profileMeter .meter-card-head { display: flex; align-items: baseline; gap: 8px; margin: 0; flex-shrink: 0; }
  #profileMeter .meter-percent { font-size: 1rem; }
  #profileMeter .meter-bar { width: 150px; flex-shrink: 0; margin: 0; }
  #profileMeter .meter-subtitle { margin: 0; white-space: nowrap; flex-shrink: 0; }
  #profileMeter .meter-pending-label { display: none; }
  #profileMeter .meter-chips { flex: 1; min-width: 0; margin: 0; padding: 2px 0; }
  #profileMeter .meter-dismiss { top: 50%; transform: translateY(-50%); }
}

/* ═══════════════════════════════════════════════════════
   K1 — Keyboard hints + Repeat chip (walk-in counter flow)
   ═══════════════════════════════════════════════════════ */

/* Key badge shown on wizard nav buttons when the keyboard layer is active.
   Rendered only on fine-pointer devices (JS-gated); the coarse-pointer rule
   below is belt-and-braces for hybrid touch laptops. */
.wi-kbd {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 6px;
  font-family: inherit;
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.5;
  color: currentColor;
  opacity: 0.65;
  border: 1px solid currentColor;
  border-radius: 5px;
  vertical-align: middle;
}
@media (pointer: coarse) {
  .wi-kbd { display: none; }
  /* Touchscreen laptops report a coarse primary pointer; once kbd-detect.js
     latches a real keydown it stamps html.sh-kbd-on — higher specificity
     (0,2,1) re-reveals the badges without needing !important. */
  html.sh-kbd-on .wi-kbd { display: inline-flex; }
}

/* "Same Order" chip on order cards — green = repeat/safe, consistent with
   the Repeat action in the detail modal. */
.wi-repeat-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 6px;
  padding: 5px 10px;
  min-height: 32px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--success);
  background: transparent;
  border: 1px solid var(--success-light);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.wi-repeat-btn .material-symbols-rounded {
  font-size: 0.95rem;
}
.wi-repeat-btn:hover {
  background: var(--success-light);
  border-color: var(--success);
}
@media (pointer: coarse) {
  .wi-repeat-btn {
    min-height: 44px;
    padding: 8px 14px;
  }
}

/* Number badge on order-type cards (keyboard mode, desktop) */
.wi-type-kbd {
  position: absolute;
  top: 6px;
  left: 8px;
  opacity: 0.5;
  font-size: 0.6rem;
  padding: 0 5px;
}

/* ─── Spec chips — dropdown replacement for short option lists ─── */
.wi-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 2px;
  border-radius: 12px;
}
.wi-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  min-height: 40px;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.wi-chip:hover {
  border-color: var(--primary);
}
.wi-chip.on {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--primary-50, var(--gray-100));
}
.wi-chip-plus {
  color: var(--text-secondary);
  border-style: dashed;
}
@media (pointer: coarse) {
  .wi-chip {
    min-height: 44px;
    padding: 10px 16px;
  }
}

/* ─── Wizard focus disambiguation: exactly ONE thing reads as active ─── */
/* Resting inputs stay muted inside the wizard (theme-proof) */
#wiStepContent .form-control {
  border-color: var(--border);
  box-shadow: none;
}
/* The focused input is unmistakable — double ring survives dark/navy themes */
#wiStepContent .form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px hsla(200, 80%, 44%, 0.22), 0 2px 14px hsla(200, 80%, 44%, 0.28);
}
/* Chip group shows its ring on ANY focus route (click delegate re-focuses the
   group; :focus-visible alone misses that path) — this is the "Enter yahan
   chalega" signal */
#wiStepContent .wi-chip-group:focus {
  outline: none;
  box-shadow: 0 0 0 2px hsla(200, 80%, 44%, 0.45);
}

/* While the client search owns the keyboard, dim the type-card digit badges */
.wi-kbd-dim .wi-type-kbd {
  opacity: 0.15;
  transition: opacity 0.2s ease;
}

/* ─── QK: quotation wizard on-screen key labels (same system) ─── */
/* Digit chip inline at the start of an event pill / recent-client chip */
.qk-pill-kbd {
  margin-left: 0;
  margin-right: 7px;
  padding: 0 5px;
  font-size: 0.6rem;
  opacity: 0.5;
}
/* "/" chip riding the client-search field's right edge */
.qk-search-kbd {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  pointer-events: none;
  opacity: 0.45;
}
/* Voice mic occupies the right edge — "/" chip sits just left of it */
.qk-search-kbd.qk-search-kbd--shift { right: 54px; }
/* ...unless the field is too narrow to carry both. SH.attachVoiceInput sets
   data-voice-tight when the icon + mic alone would leave under 120px to read
   in (a chip then eats ~32 more) — on a phone this field shares its row with
   the "+ Client" button and gets very little of it.
   A keyboard hint is worth less than being able to see what you typed, and
   it is useless on the touch devices where the field is this narrow. */
.search-input-wrapper[data-voice-tight="1"] .qk-search-kbd { display: none; }
/* While a wizard field owns the keys, every in-body key label goes quiet */
#wizardBody.wi-kbd-dim .wi-kbd {
  opacity: 0.15;
  transition: opacity 0.2s ease;
}
/* The focused field is unmistakable — "Enter yahan chalega" signal,
   mirror of the walk-in wizard's double ring */
#wizardBody .form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px hsla(200, 80%, 44%, 0.22), 0 2px 14px hsla(200, 80%, 44%, 0.28);
}

/* Arrow-cursor resting on the "+ Write your own" chip (Enter opens it) */
.wi-chip-plus.kbd-hot {
  color: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 0 0 2px hsla(200, 80%, 44%, 0.25);
}

/* ─── Chip states: hover must never impersonate selection ─── */
/* Hover = neutral lift (appended later, overrides the earlier primary hover) */
.wi-chip:hover {
  border-color: var(--text-muted);
  background: var(--gray-50, var(--muted));
}
.wi-chip.on:hover {
  border-color: var(--primary);
  background: var(--primary-50, var(--gray-100));
}
/* Selected = primary border + tint + a literal check mark */
.wi-chip-check {
  display: none;
  font-size: 0.9rem;
  margin-right: 3px;
}
.wi-chip.on .wi-chip-check {
  display: inline-block;
}

/* Bill chip on cards (blue sibling of the green repeat chip) */
.wi-bill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 6px;
  padding: 5px 10px;
  min-height: 32px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--primary);
  background: transparent;
  border: 1px solid var(--primary-50, var(--gray-100));
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.wi-bill-btn .material-symbols-rounded { font-size: 0.95rem; }
.wi-bill-btn:hover { background: var(--primary-50, var(--gray-100)); border-color: var(--primary); }
@media (pointer: coarse) {
  .wi-bill-btn { min-height: 44px; padding: 8px 14px; }
}

/* Undo button inside the status toast */
.wi-undo-btn {
  margin-left: 10px;
  padding: 4px 12px;
  min-height: 30px;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: inherit;
  color: inherit;
  background: transparent;
  border: 1.5px solid currentColor;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
}

/* Card actions row — chips sit side-by-side at the card foot, compact */
.wi-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.wi-card-actions .wi-repeat-btn,
.wi-card-actions .wi-bill-btn {
  margin-top: 0;
  min-height: 28px;
  padding: 3px 10px;
  font-size: 0.7rem;
}
@media (pointer: coarse) {
  .wi-card-actions .wi-repeat-btn,
  .wi-card-actions .wi-bill-btn {
    min-height: 40px;
    padding: 7px 12px;
  }
}

/* Grid cards: pin the actions row to the card foot so chips align across
   the row even when one card has fewer content rows (pickup/storage). */
.wi-grid-card .wi-card-actions {
  margin-top: auto;
  padding-top: 8px;
}

/* Cards take their natural height — leftover space lives OUTSIDE the card
   (background), not as a void inside it. Reading order stays row-wise. */
.wi-orders-grid {
  align-items: start;
}

/* Date + voice pills on one line: date hugs left, pills hug right */
.wi-card-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.wi-card-meta-row .wi-card-voice {
  margin-top: 0;
  margin-left: auto;
}

/* Grid card top: play button sits BESIDE the status badge, not under it */
.wi-grid-card .wi-card-status-col {
  flex-direction: row-reverse;
  align-items: center;
}

/* Date rides the actions row, pushed to the right edge */
.wi-card-actions .wi-card-date-inline {
  margin-left: auto;
  align-self: center;
}

/* Voice/notes chips live inside the actions row — unwrap their container
   so each chip is a flex item, and slim them to action-chip scale */
.wi-card-actions .wi-card-voice {
  display: contents;
}
.wi-card-actions .wi-voice-chip {
  min-height: 28px;
  padding: 3px 8px;
  margin: 0;
}
.wi-voice-chip-kind {
  font-size: 0.85rem;
  opacity: 0.75;
}
@media (pointer: coarse) {
  .wi-card-actions .wi-voice-chip {
    min-height: 40px;
    padding: 7px 10px;
  }
}

/* Everything on one action line: tighter chips, slimmer date */
.wi-card-actions {
  gap: 5px;
}
.wi-card-actions .wi-repeat-btn,
.wi-card-actions .wi-bill-btn {
  padding: 3px 9px;
}
.wi-card-actions .wi-voice-chip {
  padding: 3px 7px;
  gap: 3px;
}
.wi-card-actions .wi-card-date-inline {
  font-size: 0.72rem;
  white-space: nowrap;
}
.wi-card-actions .wi-card-date-inline .material-symbols-rounded {
  font-size: 0.78rem;
}

/* ─── Sidebar collapse: desktop icon-rail (html.sb-mini) ─── */
@media (min-width: 769px) {
  html.sb-mini {
    --sidebar-width: 74px;
  }
  html.sb-mini .sidebar .brand-text,
  html.sb-mini .sidebar .nav-group-title,
  html.sb-mini .sidebar .nav-group-chevron,
  html.sb-mini .sidebar .nav-item span:not(.material-symbols-rounded) {
    display: none;
  }
  html.sb-mini .sidebar .nav-item {
    justify-content: center;
    padding: 12px 0;
  }
  html.sb-mini .sidebar-brand {
    justify-content: center;
  }
  html.sb-mini .sidebar .nav-group-header {
    pointer-events: none;
    justify-content: center;
    padding: 10px 0 2px;
  }
  /* Icon rail shows every item — a group collapsed in full mode must not
     hide its icons here */
  html.sb-mini .sidebar .nav-group.collapsed .nav-group-items {
    display: block;
  }
}

/* desktop.css's generic .addon-grid (260px, later sheet) out-guns the
   packages catalog by load order — pin it with higher specificity */
.addon-grid.pkg-addon-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr));
}

/* ─── Voice input mic button (SH.attachVoiceInput) ─── */
.voice-input-btn {
  position: absolute;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-secondary, #6b7280);
  padding: 0;
  z-index: 2;
}
/* Beat wrapper rules (e.g. .search-input-wrapper .material-symbols-rounded)
   that absolutely position icons — the mic glyph must stay inside its button */
.voice-input-btn .material-symbols-rounded {
  font-size: 20px;
  position: static;
  left: auto;
  top: auto;
  transform: none;
  color: inherit;
}
.voice-input-btn:active { background: rgba(0, 0, 0, 0.06); }
.voice-input-btn.voice-listening {
  color: #dc2626;
  animation: voicePulse 1.2s ease-in-out infinite;
}
@keyframes voicePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* ─── Success celebration (SH.celebrate) ─── */
.sh-celebrate {
  position: fixed; inset: 0; z-index: 10050;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, 0.28);
  opacity: 0; transition: opacity 0.22s ease;
  -webkit-tap-highlight-color: transparent;
}
.sh-celebrate.show { opacity: 1; }
.sh-celebrate-card {
  background: var(--card, #fff); border-radius: 24px;
  padding: 28px 36px; text-align: center; max-width: 320px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.25);
  transform: scale(0.7); transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sh-celebrate.show .sh-celebrate-card { transform: scale(1); }
/* Lottie-style badge: green disc pops, ring draws itself, soft ripple */
.sh-celebrate-badge {
  position: relative; width: 76px; height: 76px; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  background: #16A34A; border-radius: 50%;
  animation: shCelebPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both,
             shCelebRipple 0.9s ease-out both 0.35s;
}
.sh-celebrate-ring {
  position: absolute; inset: -8px; width: 92px; height: 92px;
  transform: rotate(-90deg);
}
.sh-celebrate-ring circle {
  fill: none; stroke: #86EFAC; stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 214; stroke-dashoffset: 214;
  animation: shCelebRing 0.7s ease-out forwards 0.15s;
}
.sh-celebrate-ico {
  font-size: 2.3rem; color: #fff; display: block;
  font-variation-settings: 'FILL' 1;
  animation: shCelebPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both 0.18s;
}
@keyframes shCelebPop {
  0% { transform: scale(0); }
  70% { transform: scale(1.18); }
  100% { transform: scale(1); }
}
@keyframes shCelebRing { to { stroke-dashoffset: 0; } }
@keyframes shCelebRipple {
  0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.45); }
  100% { box-shadow: 0 0 0 26px rgba(22, 163, 74, 0); }
}
.sh-celebrate-title {
  font-size: 1.35rem; font-weight: 800; color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.sh-celebrate-sub { font-size: 0.85rem; color: var(--text-secondary); margin-top: 4px; }
/* Confetti — pure CSS, 48 pieces in two waves and two sizes */
.sh-conf { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sh-conf i {
  position: absolute; top: -14px;
  width: 9px; height: 14px; border-radius: 2px;
  animation: shConfFall 2.3s ease-in both;
}
.sh-conf i:nth-child(2n) {
  width: 6px; height: 9px; border-radius: 50%;
  animation-duration: 2.8s;
}
.sh-conf i:nth-child(3n) { animation-timing-function: cubic-bezier(0.3, 0.4, 0.6, 1); }
@keyframes shConfFall {
  0% { transform: translateY(0) rotate(0) translateX(0); opacity: 1; }
  60% { transform: translateY(60vh) rotate(380deg) translateX(18px); opacity: 1; }
  100% { transform: translateY(108vh) rotate(620deg) translateX(-14px); opacity: 0.6; }
}
@media (prefers-reduced-motion: reduce) {
  .sh-celebrate-ico, .sh-celebrate-badge, .sh-celebrate-ring circle, .sh-conf i { animation: none; }
  .sh-celebrate-ring circle { stroke-dashoffset: 0; }
}

/* ─── Photo peek (SH photo peek — img.sh-peek) ─── */
img.sh-peek { cursor: zoom-in; }
.sh-peek-pop {
  position: fixed; z-index: 12000; width: 220px; height: 220px;
  border-radius: 18px; overflow: hidden; pointer-events: none;
  border: 3px solid #fff; box-shadow: 0 18px 50px rgba(15, 23, 42, 0.35);
}
.sh-peek-pop img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sh-peek-lightbox {
  position: fixed; inset: 0; z-index: 12001; background: rgba(15, 23, 42, 0.8);
  display: flex; align-items: center; justify-content: center; cursor: zoom-out;
}
.sh-peek-lightbox img { max-width: 92vw; max-height: 86vh; border-radius: 14px; box-shadow: 0 24px 80px rgba(0,0,0,0.5); }

/* ─── Rental detail: two-column on desktop ────────────────────────────
   The page shipped as a single narrow column with the right half of a laptop
   screen empty, and the two things a studio acts on — the money and the
   buttons — sat at the very bottom under the item list. Built by MOVING the
   existing nodes (see Rental._restructureRentalDetailForDesktop), so no id or
   handler changes; this file only places them.
   Mobile is untouched: the grid only exists at >=1024px. */
@media (min-width: 1024px) {
  .rd-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 16px;
    align-items: start;
  }

  .rd-rail {
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* Lifted out of the card, the money block needs its own surface. */
  .rd-rail .rd-money {
    margin-top: 0;
    padding: 14px;
    border: 1px solid var(--border-light);
    border-top: 1px solid var(--border-light);
    border-radius: 16px;
    background: var(--card);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
  }

  .rd-rail .rd-status { margin-bottom: 0; }
}

/* ─── Rental detail: actions live on their objects ─────────────────────
   Bill / WhatsApp / Cancel act on the document → header. Collect acts on the
   Due amount → inside the money block. Wapsi / Extend resolve the rental's
   state → inside the status card. Exactly one button is filled per state
   (see Rental._renderDetail). No action stack anywhere. */
.rd-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.rd-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.rd-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.rd-chip .material-symbols-rounded { font-size: 1.1rem; }
.rd-chip:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-50); }
.rd-chip--wa { color: #128c4b; }
.rd-chip--wa:hover { border-color: #25d366; color: #128c4b; background: rgba(37, 211, 102, 0.08); }
.rd-chip--icon { width: 44px; padding: 0; color: var(--text-secondary); }

.rd-more { position: relative; }
.rd-more > summary::-webkit-details-marker { display: none; }
.rd-more > summary::marker { content: ""; }
.rd-more[open] > summary { border-color: var(--primary); color: var(--primary); }

.rd-more-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  min-width: 190px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14);
}

.rd-more-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.rd-more-item .material-symbols-rounded { font-size: 1.1rem; }
.rd-more-item:hover { background: var(--muted); }
.rd-more-item--danger { color: var(--danger); }
.rd-more-item--danger:hover { background: rgba(220, 38, 38, 0.07); }

/* Collect sits under the Due tile it acts on. Filled only once the item is
   back and money is the only thing left. */
.rd-pay {
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
  border-radius: 10px;
  font-weight: 700;
}

.rd-pay--primary { background: var(--success); border-color: var(--success); color: #fff; }
.rd-pay--primary:hover { filter: brightness(0.94); }
.rd-pay--outline { background: var(--card); border: 1.5px solid var(--success); color: var(--success); }
.rd-pay--outline:hover { background: rgba(34, 197, 94, 0.08); }

.rd-status {
  margin-bottom: 10px;
  padding: 12px 13px;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  background: var(--card);
}

.rd-status-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.rd-status-head > .material-symbols-rounded { font-size: 1.15rem; color: var(--primary); flex-shrink: 0; }
.rd-status-title { font-weight: 700; font-size: 0.86rem; color: var(--text-primary); }
.rd-status-sub { font-size: 0.75rem; color: var(--text-secondary); margin-top: 1px; }
.rd-status-sub:empty { display: none; }

.rd-status--late { background: rgba(220, 38, 38, 0.06); border-color: rgba(220, 38, 38, 0.22); }
.rd-status--late .rd-status-head > .material-symbols-rounded,
.rd-status--late .rd-status-title { color: var(--danger); }

.rd-status--done { background: rgba(34, 197, 94, 0.05); border-color: rgba(34, 197, 94, 0.25); }
.rd-status--done .rd-status-head { margin-bottom: 0; align-items: center; }
.rd-status--done .rd-status-head > .material-symbols-rounded { color: var(--success); }
.rd-status--done .rd-pay { margin-top: 10px; }

.rd-status-cta { width: 100%; min-height: 44px; border-radius: 10px; font-weight: 700; }

/* The alternative to Wapsi is the same decision, so it sits under it as a
   text button, never as a second filled button. */
.rd-status-alt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 40px;
  margin-top: 2px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
}

.rd-status-alt .material-symbols-rounded { font-size: 1rem; }
.rd-status-alt:hover { color: var(--primary); background: var(--primary-50); }

/* 375px: the number and the chips do not fit on one line, so the chips take
   the row under it as an equal-width toolbar. */
@media (max-width: 639px) {
  .rd-head-actions { flex-basis: 100%; margin-left: 0; }
  .rd-head-actions > .rd-chip, .rd-head-actions > .rd-more { flex: 1; }
  .rd-head-actions > .rd-more > summary { width: 100%; }
  .rd-chip--icon { width: auto; }
}

/* ─── Inventory item photo ────────────────────────────────────────────
   The tile already reserved a 52px square for the category icon, so a photo
   drops straight into it — no layout change, and an item without one keeps
   the icon exactly as before. A broken/missing file falls back to the icon at
   runtime (see the onerror in rental.js) rather than showing a torn image. */
.inv-card-icon.has-photo {
  /* display:block, not the inherited flex — a flex child with width/height
     100% still shrinks (min-width:auto), so the photo sat inset inside its
     own tile instead of filling it. */
  display: block;
  padding: 0;
  overflow: hidden;
  background: var(--muted);
}

.inv-card-icon.has-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Edit modal photo slot */
.inv-photo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.inv-photo-thumb {
  position: relative;
  width: 76px;
  height: 76px;
  flex-shrink: 0;
  border-radius: 14px;
  border: 1px dashed var(--border);
  background: var(--muted);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--text-muted);
}

.inv-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.inv-photo-thumb.has-photo { border-style: solid; }

.inv-photo-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
/* Upload progress sits ON the tile — the studio watches the photo they just
   picked fill up, instead of hunting for a percentage in a text line. */
.inv-photo-up {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, #0f172a 62%, transparent);
}

.inv-photo-ring {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--primary) calc(var(--p, 0) * 1%), rgba(255, 255, 255, 0.22) 0);
}

.inv-photo-ring::before {
  content: '';
  position: absolute;
  width: 33px;
  height: 33px;
  border-radius: 50%;
  background: color-mix(in srgb, #0f172a 78%, transparent);
}

.inv-photo-pct {
  position: relative;
  font-size: 0.58rem;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

/* Before the first progress event there is nothing honest to show as a number,
   so the ring sweeps instead of sitting at a fake 0%. */
.inv-photo-up[data-indeterminate="1"] .inv-photo-ring {
  background: conic-gradient(var(--primary) 0 28%, rgba(255, 255, 255, 0.22) 0);
  animation: invPhotoSpin 0.9s linear infinite;
}

.inv-photo-up[data-indeterminate="1"] .inv-photo-pct { display: none; }

@keyframes invPhotoSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .inv-photo-up[data-indeterminate="1"] .inv-photo-ring { animation: none; }
}

.inv-photo-hint { font-size: 0.72rem; color: var(--text-muted); }

/* ═══════════════════════════════════════════════════════
   Invoice Design picker (Settings → Invoice Design)
   4 template cards with pure-CSS mini invoice previews.
   Mobile-first: 2×2 at 375px, 4-up on desktop.
   ═══════════════════════════════════════════════════════ */
body .inv-tpl-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}
body .inv-tpl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: var(--space-md) var(--space-sm) var(--space-md);
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
  animation: sh-life-reveal var(--sh-dur-entrance, 400ms) var(--sh-ease-out, ease-out) both;
  animation-delay: calc(var(--sh-i, 0) * var(--sh-stagger, 50ms));
}
body .inv-tpl-card:hover { border-color: var(--primary-300); box-shadow: var(--shadow-sm); }
body .inv-tpl-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
body .inv-tpl-card:active { transform: scale(0.98); }
body .inv-tpl-card.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--glow-primary, hsla(200, 80%, 44%, 0.18));
}
body .inv-tpl-name { font-size: 0.82rem; font-weight: 600; color: var(--foreground); margin-top: 2px; }
body .inv-tpl-hint { font-size: 0.68rem; color: var(--text-muted); line-height: 1.3; }
body .inv-tpl-check {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 1.1rem;
  color: var(--primary);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 150ms ease, transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
body .inv-tpl-card.active .inv-tpl-check { opacity: 1; transform: scale(1); }

/* Mini invoice preview — a tiny "paper" with variant-styled bars */
body .inv-tpl-thumb {
  width: 64px;
  height: 84px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 7px 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
body .inv-tpl-thumb .itp { display: block; border-radius: 2px; height: 5px; background: hsl(210, 25%, 90%); }
body .inv-tpl-thumb .itp-head { height: 9px; }
body .inv-tpl-thumb .itp-l3 { width: 70%; }
body .inv-tpl-thumb .itp-total { margin-top: auto; height: 8px; }

/* Current — today's slate-header bill */
body .inv-tpl-thumb--current .itp-head { background: hsl(215, 28%, 22%); }
body .inv-tpl-thumb--current .itp-total { background: hsl(215, 28%, 40%); width: 55%; align-self: flex-end; }

/* Minimal — monochrome typographic rules */
body .inv-tpl-thumb--minimal { padding-top: 9px; }
body .inv-tpl-thumb--minimal .itp-head { height: 3px; background: hsl(220, 15%, 15%); }
body .inv-tpl-thumb--minimal .itp-total { height: 3px; background: hsl(220, 15%, 15%); }

/* Bold — accent bars top/bottom + accent table head */
body .inv-tpl-thumb--bold { position: relative; padding-top: 12px; }
body .inv-tpl-thumb--bold::before,
body .inv-tpl-thumb--bold::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  background: #C0392B;
}
body .inv-tpl-thumb--bold::before { top: 0; }
body .inv-tpl-thumb--bold::after { bottom: 0; }
body .inv-tpl-thumb--bold .itp-head { background: hsla(6, 63%, 46%, 0.85); }
body .inv-tpl-thumb--bold .itp-total { background: #C0392B; width: 55%; align-self: flex-end; margin-bottom: 4px; }

/* Modern — rounded blue pills */
body .inv-tpl-thumb--modern .itp { border-radius: 4px; }
body .inv-tpl-thumb--modern .itp-head { background: hsl(221, 83%, 53%); border-radius: 5px; }
body .inv-tpl-thumb--modern .itp-l1,
body .inv-tpl-thumb--modern .itp-l2,
body .inv-tpl-thumb--modern .itp-l3 { background: hsl(210, 40%, 93%); height: 6px; }
body .inv-tpl-thumb--modern .itp-total { background: hsl(221, 83%, 53%); border-radius: 5px; }

@media (min-width: 768px) {
  body .inv-tpl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 640px; }
  body .inv-tpl-thumb { width: 72px; height: 94px; }
}
@media (prefers-reduced-motion: reduce) {
  body .inv-tpl-card { animation: none; }
  body .inv-tpl-check { transition: none; }
}

/* Invoice template chips on share/print sheets */
body .invtpl-chip-row { margin: var(--space-sm) 0 var(--space-md); }
body .invtpl-chip-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
body .invtpl-chip-scroll {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
body .invtpl-chip-scroll::-webkit-scrollbar { display: none; }
body .invtpl-chip {
  flex: 0 0 auto;
  min-height: 44px;
  white-space: nowrap;
  padding: 0 var(--space-lg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--card);
  color: var(--foreground);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}
body .invtpl-chip:hover { border-color: var(--primary-300); }
body .invtpl-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
body .invtpl-chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* Booking cancellation — outcome-first money choices. The old segmented
   labels hid that an unchecked checkbox created client credit. */
body .bk-cancel-form .form-group {
  margin-bottom: var(--space-lg);
}
body .bk-cancel-form .form-label {
  margin-bottom: var(--space-sm);
  color: var(--foreground);
  font-size: 0.82rem;
}
body .bk-cancel-choices {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}
body .bk-cancel-form > .form-group:first-child .bk-cancel-choices {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
body .bk-cancel-choice {
  --choice-tone: var(--primary);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  min-height: 52px;
  padding: var(--space-md);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--foreground);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}
body .bk-cancel-choice[data-tone="success"] { --choice-tone: var(--success); }
body .bk-cancel-choice[data-tone="warning"] { --choice-tone: var(--warning); }
body .bk-cancel-choice[data-tone="info"]    { --choice-tone: var(--info); }
body .bk-cancel-choice[data-tone="danger"]  { --choice-tone: var(--danger); }
body .bk-cancel-choice:hover {
  border-color: color-mix(in srgb, var(--choice-tone) 45%, var(--border));
  background: color-mix(in srgb, var(--choice-tone) 4%, var(--card));
}
body .bk-cancel-choice:active { transform: scale(0.99); }
body .bk-cancel-choice:focus-visible {
  outline: 2px solid var(--choice-tone);
  outline-offset: 2px;
}
body .bk-cancel-choice.is-selected {
  border-color: var(--choice-tone);
  background: color-mix(in srgb, var(--choice-tone) 9%, var(--card));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--choice-tone) 12%, transparent);
}
body .bk-cancel-choice-icon {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 1.15rem;
}
body .bk-cancel-choice.is-selected .bk-cancel-choice-icon { color: var(--choice-tone); }
body .bk-cancel-choice[data-tone] .bk-cancel-choice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--choice-tone) 12%, var(--card));
  color: var(--choice-tone);
  font-size: 1.2rem;
  transition: background var(--transition-fast), color var(--transition-fast);
}
body .bk-cancel-choice[data-tone].is-selected .bk-cancel-choice-icon {
  background: var(--choice-tone);
  color: #fff;
}
body .bk-cancel-choice-copy {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
body .bk-cancel-choice-copy strong {
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.3;
}
body .bk-cancel-choice-copy small {
  color: var(--muted-foreground);
  font-size: 0.74rem;
  line-height: 1.4;
}
body .bk-cancel-choice-check {
  flex: 0 0 auto;
  color: transparent;
  font-size: 1.1rem;
}
body .bk-cancel-choice.is-selected .bk-cancel-choice-check { color: var(--choice-tone); }
body .bk-cancel-form > .form-group:first-child .bk-cancel-choice {
  justify-content: center;
  min-height: 48px;
  padding: var(--space-sm);
  text-align: center;
}
body .bk-cancel-form > .form-group:first-child .bk-cancel-choice-copy { flex: 0 1 auto; }
body .bk-cancel-form > .form-group:first-child .bk-cancel-choice-check { display: none; }
body .bk-cancel-form > .form-group:first-child .bk-cancel-choice-copy small { display: none; }
body .bk-cancel-money { margin-top: var(--space-md); }
body .bk-cancel-refund-details {
  margin: calc(var(--space-sm) * -1) 0 var(--space-lg);
  padding: var(--space-md);
  border: 1px solid color-mix(in srgb, var(--success) 30%, var(--border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--success) 7%, var(--card));
}
body .bk-cancel-refund-details[hidden] { display: none; }
body .bk-cancel-refund-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  color: var(--foreground);
}
body .bk-cancel-refund-head > .material-symbols-rounded {
  color: var(--success);
  font-size: 1.15rem;
}
body .bk-cancel-refund-head > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body .bk-cancel-refund-head strong { font-size: 0.82rem; }
body .bk-cancel-refund-head small {
  color: var(--muted-foreground);
  font-size: 0.72rem;
}
body .bk-cancel-refund-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}
body .bk-cancel-refund-fields label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--foreground);
  font-size: 0.75rem;
  font-weight: 600;
}
body .bk-cancel-refund-fields label > span small {
  color: var(--muted-foreground);
  font-weight: 400;
}
body .bk-cancel-outcome {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: 0.78rem;
  line-height: 1.45;
}
body .bk-cancel-outcome .material-symbols-rounded {
  flex: 0 0 auto;
  margin-top: 1px;
  font-size: 1rem;
}
body .bk-cancel-outcome.is-ready {
  border-color: color-mix(in srgb, var(--success) 30%, var(--border));
  background: color-mix(in srgb, var(--success) 8%, var(--card));
  color: var(--foreground);
}
body .bk-cancel-outcome.is-ready .material-symbols-rounded { color: var(--success); }

@media (min-width: 640px) {
  body .bk-cancel-money .bk-cancel-choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body .bk-cancel-money .bk-cancel-choice {
    align-items: flex-start;
    min-height: 116px;
  }
  body .bk-cancel-money .bk-cancel-choice-check {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
  }
  body .bk-cancel-money .bk-cancel-choice { position: relative; }
  body .bk-cancel-refund-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  body .bk-cancel-form > .form-group:first-child .bk-cancel-choice {
    flex-direction: column;
    gap: 3px;
    min-height: 60px;
  }
  body .bk-cancel-form > .form-group:first-child .bk-cancel-choice-icon { font-size: 1rem; }
  body .bk-cancel-choice { padding: var(--space-sm) var(--space-md); }
}

/* ===== css/custom-select.css ===== */
/* custom-select.css — themed dropdown overlay (light + dark via CSS vars) */

.cs-host {
  position: relative;
  width: 100%;
}

/* Native select kept for value/events, but visually removed. */
.cs-host > select.cs-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

/* Trigger reuses .form-control/.form-select look; just make it a flex button. */
.cs-trigger {
  display: flex;
  align-items: center;
  text-align: left;
  cursor: pointer;
  gap: 8px;
}
.cs-trigger[aria-expanded="true"] {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px hsla(200, 80%, 44%, 0.1);
}
.cs-host.cs-disabled .cs-trigger {
  cursor: not-allowed;
  opacity: 0.6;
}

.cs-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-label.cs-placeholder {
  color: var(--text-muted);
}

/* The "nothing chosen" row reads as the absence of a value, matching how the
   closed trigger renders the same word. Without this it looked like a real
   option that happened to be selected. */
.cs-option.cs-opt-empty .cs-opt-text {
  color: var(--text-muted);
  font-style: italic;
}

/* Portaled menu (appended to <body>, position:fixed). */
.cs-menu {
  position: fixed;
  z-index: 10050;
  min-width: 160px;
  max-width: 92vw;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px hsla(210, 50%, 10%, 0.18), 0 2px 8px hsla(210, 50%, 10%, 0.08);
  padding: 6px;
  transform-origin: top center;
  animation: csIn 0.12s ease;
  color: var(--foreground);
}
@keyframes csIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.cs-search {
  padding: 2px 2px 6px;
}
.cs-search .form-control {
  min-height: 40px;
  font-size: 0.88rem;
}

.cs-list {
  max-height: 264px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.cs-group {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 8px 12px 4px;
}

.cs-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--foreground);
  font-size: 0.9rem;
  line-height: 1.25;
}
.cs-opt-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-opt-check {
  font-size: 1.1rem;
  color: var(--primary);
}
.cs-option.cs-active,
.cs-option:hover {
  background: var(--primary-50);
  color: var(--primary);
}
.cs-option[aria-selected="true"] {
  font-weight: 600;
}
.cs-option[data-disabled="1"] {
  opacity: 0.45;
  cursor: not-allowed;
}

.cs-empty {
  padding: 14px 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* Edit / delete on user-added options */
.cs-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  flex: none;
}
.cs-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}
.cs-act:hover {
  background: var(--muted);
  color: var(--foreground);
}
.cs-act.cs-del:hover {
  background: var(--danger-light, hsl(0, 70%, 95%));
  color: var(--destructive);
}
.cs-act.cs-save {
  color: var(--primary);
}

.cs-option.cs-editing {
  gap: 4px;
}
.cs-edit-input {
  flex: 1;
  min-width: 0;
  min-height: 34px;
  padding: 4px 8px;
  font-size: 0.88rem;
}

/* ===== css/journey.css ===== */
/* ═══════════════════════════════════════════════════════
   Onboarding Journey + Profile Meter Styles
   Spec: docs/superpowers/specs/2026-04-11-onboarding-journey-and-profile-meter-design.md
   ═══════════════════════════════════════════════════════ */

/* ─── Journey pitch card ─── */
.journey-card {
  position: relative;
  margin: 12px 0;
  padding: 20px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary-50, #e0f2fe), var(--gray-50, #f9fafb));
  border: 1px solid var(--primary-200, #bae6fd);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.journey-pitch h2 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--text-primary);
}
.journey-pitch-subtitle {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin: 0 0 10px;
}
.journey-pitch-promise {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0 0 14px;
  font-style: italic;
}
.journey-start-btn {
  min-height: 44px;
  padding: 10px 18px;
  font-size: 0.95rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.journey-dismiss {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
}
.journey-dismiss:hover {
  background: var(--gray-100);
}

/* ─── Journey resume chip ─── */
.journey-resume-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin: 8px 0;
  background: var(--primary-50, #e0f2fe);
  border: 1px solid var(--primary-200, #bae6fd);
  border-radius: 10px;
  font-size: 0.85rem;
}
.journey-resume-label { flex: 1; color: var(--text-secondary); }
.journey-dismiss-chip {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px;
}

/* ─── Journey modals ─── */
.journey-modal {
  padding: 20px;
  border-radius: 14px;
}
.journey-modal-subtitle {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0 0 16px;
}
.journey-modal-body { font-size: 0.88rem; color: var(--text-secondary); margin-bottom: 18px; }
.journey-modal-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  margin: 10px 0;
}
.journey-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.journey-modal-actions .btn {
  flex: 1;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* ─── PDF iframe ─── */
.journey-pdf-frame {
  width: 100%;
  height: 360px;
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
}
.journey-pdf-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* ─── Profit reveal ─── */
.journey-profit-reveal {
  text-align: center;
  padding: 28px 20px;
}
.journey-profit-icon .material-symbols-rounded {
  font-size: 3rem;
  color: var(--success);
}
.journey-profit-reveal h2 {
  font-size: 1.25rem;
  margin: 8px 0 18px;
}
.journey-profit-math {
  background: var(--gray-50);
  padding: 14px 18px;
  border-radius: 10px;
  text-align: left;
  margin: 0 auto 16px;
  max-width: 320px;
}
.journey-profit-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.journey-profit-row.net {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
}
.journey-profit-row .positive { color: var(--text-primary); }
.journey-profit-row .negative { color: var(--danger); }
.journey-profit-row .net-amount { color: var(--success); font-size: 1.1rem; }
.journey-profit-divider {
  height: 1px;
  background: var(--gray-200);
  margin: 8px 0;
}
.journey-profit-subtitle {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0 0 18px;
}

/* ─── Journey pre-fill banner + tooltips (inside quotation wizard) ─── */
.journey-prefilled-banner {
  background: #fef3c7;
  border: 1px solid #fcd34d;
  color: #92400e;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  margin-bottom: 14px;
}
.journey-tooltip {
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--gray-50);
  padding: 6px 10px;
  border-left: 3px solid var(--primary);
  border-radius: 4px;
  margin-top: 4px;
}

/* ─── Journey expense suggestions (inside finance modal) ─── */
.journey-expense-header {
  background: linear-gradient(135deg, rgba(14,165,233,0.08), rgba(245,158,11,0.05));
  border: 1px solid rgba(14,165,233,0.22);
  padding: 14px 16px;
  border-radius: 12px;
  margin-bottom: 16px;
}
.journey-expense-header h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.journey-expense-header p {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin: 0 0 6px;
  line-height: 1.4;
}
.journey-expense-hint {
  font-size: 0.74rem;
  color: var(--text-muted);
  font-style: italic;
  margin: 0;
}
.journey-expense-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin-top: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding: 2px 0 6px;
  mask-image: linear-gradient(to right, black 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
}
.journey-expense-chips::-webkit-scrollbar {
  height: 4px;
}
.journey-expense-chips::-webkit-scrollbar-track {
  background: transparent;
}
.journey-expense-chips::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,0.35);
  border-radius: 2px;
}
.journey-expense-chips .chip {
  min-height: 34px;
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 500;
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.38);
  color: #b45309;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  white-space: nowrap;
  scroll-snap-align: start;
}
.journey-expense-chips .chip::before {
  content: '+';
  font-size: 0.95rem;
  font-weight: 600;
  opacity: 0.55;
  line-height: 1;
}
.journey-expense-chips .chip:hover {
  background: rgba(245,158,11,0.22);
  border-color: rgba(245,158,11,0.6);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(245,158,11,0.2);
}

/* Dark mode overrides for journey-expense-header + chips */
body.dark-mode .journey-expense-header {
  background: linear-gradient(135deg, rgba(14,165,233,0.12), rgba(245,158,11,0.06));
  border-color: rgba(14,165,233,0.32);
}
body.dark-mode .journey-expense-chips .chip {
  background: rgba(245,158,11,0.16);
  border-color: rgba(245,158,11,0.42);
  color: #fcd34d;
}
body.dark-mode .journey-expense-chips .chip:hover {
  background: rgba(245,158,11,0.28);
  border-color: rgba(245,158,11,0.68);
}

/* ─── Journey prefilled banner (quotation wizard) — dark mode ─── */
body.dark-mode .journey-prefilled-banner {
  background: rgba(252,211,77,0.12);
  border-color: rgba(252,211,77,0.35);
  color: #fcd34d;
}
body.dark-mode .journey-tooltip {
  background: rgba(148,163,184,0.12);
  color: #cbd5e1;
  border-left-color: var(--primary);
}
/* Empty-state banners (client + package) use inline styles with low-alpha
   gradients that render correctly in both modes — no dark override needed. */

/* ═══════════════════════════════════════════════════════
   Profile Meter Styles
   Warm amber/primary theming — deliberately softer than the rest of the
   dashboard so "incomplete setup" feels encouraging, not alarming.
   Uses transparent tints that work in both light and dark modes.
   ═══════════════════════════════════════════════════════ */

.meter-card {
  position: relative;
  margin: 10px 0 14px;
  padding: 16px 18px 18px;
  background:
    linear-gradient(135deg, rgba(14,165,233,0.04), rgba(245,158,11,0.03));
  border: 1px solid rgba(14,165,233,0.18);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.meter-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.meter-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.meter-percent {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.meter-bar {
  position: relative;
  height: 8px;
  background: rgba(148,163,184,0.18);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
}
.meter-bar-fill {
  height: 100%;
  min-width: 6px;
  background: linear-gradient(90deg, #f59e0b, var(--primary));
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(.4,1.6,.5,1);
  box-shadow: 0 0 8px rgba(14,165,233,0.35);
}
.meter-subtitle {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-bottom: 14px;
}
.meter-pending-label {
  font-size: 0.74rem;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 4px 0 8px;
}
.meter-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding: 2px 0 6px;
  /* Subtle fade on right edge to hint at scrollability */
  mask-image: linear-gradient(to right, black 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
}
.meter-chips::-webkit-scrollbar {
  height: 4px;
}
.meter-chips::-webkit-scrollbar-track {
  background: transparent;
}
.meter-chips::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,0.35);
  border-radius: 2px;
}
.meter-chip {
  min-height: 34px;
  padding: 6px 14px;
  background: rgba(245,158,11,0.10);
  border: 1px solid rgba(245,158,11,0.35);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  color: #b45309;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  white-space: nowrap;
  scroll-snap-align: start;
}
.meter-chip::before {
  content: '+';
  font-size: 0.95rem;
  font-weight: 600;
  opacity: 0.55;
  line-height: 1;
}
.meter-chip:hover {
  background: rgba(245,158,11,0.18);
  border-color: rgba(245,158,11,0.6);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(245,158,11,0.18);
}
.meter-dismiss {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  opacity: 0.5;
  transition: opacity 0.15s;
}
.meter-dismiss:hover {
  opacity: 1;
  background: rgba(0,0,0,0.05);
}

/* Dark mode overrides — muted amber text needs lighter shade on dark bg */
body.dark-mode .meter-card {
  background:
    linear-gradient(135deg, rgba(14,165,233,0.08), rgba(245,158,11,0.05));
  border-color: rgba(14,165,233,0.28);
}
body.dark-mode .meter-chip {
  background: rgba(245,158,11,0.15);
  border-color: rgba(245,158,11,0.4);
  color: #fcd34d;
}
body.dark-mode .meter-chip:hover {
  background: rgba(245,158,11,0.25);
  border-color: rgba(245,158,11,0.65);
}
body.dark-mode .meter-bar {
  background: rgba(148,163,184,0.15);
}
body.dark-mode .meter-dismiss:hover {
  background: rgba(255,255,255,0.08);
}

.meter-complete {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--success-light, #d1fae5);
  border-color: var(--success, #10b981);
  color: var(--success-dark, #065f46);
  animation: meterFadeOut 5s linear forwards;
  animation-delay: 3s;
}
.meter-check { color: var(--success); font-size: 1.5rem; }
@keyframes meterFadeOut {
  to { opacity: 0; visibility: hidden; }
}

.meter-collapsed-chip {
  display: inline-block;
  padding: 4px 10px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin: 4px 0;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════
   Inventory Onboarding Step
   2x3 category grid + pre-seeded item pills with qty stepper.
   Mobile-first 375px, big touch targets, minimal text.
   ═══════════════════════════════════════════════════════ */

.inv-ob-modal {
  padding: 16px 12px 0;
}
.inv-ob-subtitle {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0 0 16px;
  text-align: center;
}

/* ─── 2x3 Category Grid ─── */
.inv-ob-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.inv-ob-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 80px;
  padding: 12px 6px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  cursor: pointer;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.inv-ob-tile-icon {
  font-size: 1.6rem;
  color: var(--text-secondary);
  transition: color 0.15s ease;
}
.inv-ob-tile-label {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: capitalize;
  letter-spacing: 0.02em;
}
.inv-ob-tile:hover {
  border-color: var(--primary-300, #7dd3fc);
  background: var(--primary-50, #e0f2fe);
}
.inv-ob-tile.active {
  border-color: var(--primary);
  background: var(--primary-50, #e0f2fe);
  box-shadow: 0 0 0 2px rgba(14,165,233,0.18);
}
.inv-ob-tile.active .inv-ob-tile-icon {
  color: var(--primary);
}
.inv-ob-tile.active .inv-ob-tile-label {
  color: var(--primary);
  font-weight: 600;
}

/* ─── Item Pills Area ─── */
.inv-ob-pills-area {
  max-height: 280px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.inv-ob-cat-section {
  margin-bottom: 14px;
}
.inv-ob-cat-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.inv-ob-cat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ─── Individual pill ─── */
.inv-ob-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  cursor: pointer;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.inv-ob-pill.active {
  border-color: var(--primary);
  background: var(--primary-50, #e0f2fe);
}
.inv-ob-pill-name {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
}

/* ─── Qty Stepper ─── */
.inv-ob-qty-stepper {
  display: flex;
  align-items: center;
  gap: 2px;
}
.inv-ob-qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--card);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.1s ease;
}
.inv-ob-qty-btn:hover {
  background: var(--gray-100);
}
.inv-ob-qty-btn:active {
  background: var(--gray-200);
}
.inv-ob-qty-input {
  width: 28px;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  background: none;
  border: none;
  padding: 0;
  font-variant-numeric: tabular-nums;
}

/* ─── Footer (sticky add button + skip) ─── */
.inv-ob-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 0;
}
.inv-ob-add-btn {
  min-height: 48px;
  font-size: 0.95rem;
  font-weight: 600;
  width: 100%;
}
.inv-ob-add-btn:disabled {
  opacity: 0.45;
}
.inv-ob-skip-btn {
  min-height: 44px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  width: 100%;
  text-align: center;
}

/* ─── Dark mode ─── */
body.dark-mode .inv-ob-tile {
  background: var(--card);
  border-color: var(--border);
}
body.dark-mode .inv-ob-tile:hover {
  background: rgba(14,165,233,0.08);
  border-color: rgba(14,165,233,0.4);
}
body.dark-mode .inv-ob-tile.active {
  background: rgba(14,165,233,0.12);
  border-color: var(--primary);
}
body.dark-mode .inv-ob-pill {
  background: var(--card);
  border-color: var(--border);
}
body.dark-mode .inv-ob-pill.active {
  background: rgba(14,165,233,0.12);
  border-color: var(--primary);
}
body.dark-mode .inv-ob-qty-btn {
  background: var(--card);
  border-color: var(--border);
}
body.dark-mode .inv-ob-qty-btn:hover {
  background: rgba(255,255,255,0.06);
}

/* ─── Mobile — 375px base ─── */
@media (max-width: 480px) {
  .journey-pdf-frame { height: 280px; }
  .journey-modal-actions { flex-direction: column; }
  .journey-profit-math { max-width: 100%; }
  .inv-ob-grid { gap: 8px; }
  .inv-ob-tile { min-height: 74px; padding: 10px 4px; }
  .inv-ob-tile-icon { font-size: 1.4rem; }
  .inv-ob-pills-area { max-height: 220px; }
}

/* ===== css/munim.css ===== */
/* ═══════════════════════════════════════════════════════
   Munim-ji widget
   Two states:
     .munim-collapsed → small persistent circle (always visible)
     .munim-expanded  → full character + speech bubble (with menu/actions)
   Mobile-first (375px base), scales up on desktop.
   ═══════════════════════════════════════════════════════ */

.munim-root {
  position: fixed;
  right: 16px;                     /* match WhatsApp floater right offset */
  bottom: 146px;                   /* sit just above WA (bottom 90 + 44 height + 12 gap = 146) */
  z-index: 1050;                   /* above WhatsApp/Install floaters (≤1000) but BELOW .modal-overlay (1100) and SH.modal inline (99999+) */
  display: flex;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.munim-root.munim-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* When the PWA install button is showing it takes the bottom slot, pushing
   WhatsApp to 150 and Munim up one more step (150 + 48 + 12 = 210). */
body.pwa-installable .munim-root { bottom: 206px; }

/* Hard-hide Munim whenever ANY modal is open. The app toggles body.modal-open
   for both .modal-overlay and .bottom-sheet (studio/js/utils.js:377,
   studio/js/app.js:4681), so this single rule covers every modal type
   without playing the z-index whack-a-mole. */
body.modal-open .munim-root {
  display: none;
}

/* Sheets that never set body.modal-open (dynamic, own class only): the
   notification sheet and the quick-create sheet sit below Munim's z-index
   (1002/1001 vs 1050), so hide Munim while they're open. */
body:has(.notif-sheet.open) .munim-root,
body:has(.quick-create-sheet.open) .munim-root {
  display: none;
}

/* ─── Character image ─────────────────────────────────── */
.munim-char {
  object-fit: contain;
  flex-shrink: 0;
  pointer-events: auto;
  cursor: pointer;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.18));
  transition: opacity 0.18s ease, transform 0.18s ease, width 0.24s ease, height 0.24s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.munim-char:active { transform: scale(0.96); }
.munim-char.munim-fading { opacity: 0; }

/* ─── Collapsed state: small floating circle ──────────── */
/* Uses dedicated head-and-shoulders icon (munim-icon.png) which is already
   pre-cropped, so we display with object-fit:contain and no offset. */
.munim-root.munim-collapsed .munim-bubble { display: none; }
/* ─── Collapsed icon: wrap the img so we can overlay a blink ───── */
.munim-root.munim-collapsed .munim-char {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid rgba(59,130,246,0.14);
  padding: 2px;
  object-fit: contain;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.10);
  /* breathe + occasional head sway (every 6s, very subtle) */
  animation:
    munim-breathe 4s ease-in-out infinite,
    munim-head-sway 6s ease-in-out infinite;
  /* cross-fade between activity icon variants when JS rotates _img.src */
  transition: opacity 0.18s ease, transform 0.18s ease, width 0.24s ease, height 0.24s ease;
}
.munim-root.munim-collapsed .munim-char:hover {
  border-color: rgba(59,130,246,0.5);
  transform: scale(1.04);
  animation-play-state: paused;
}
/* Full-body pose displayed inside the 56px circle: zoom + crop to the head
   region. object-fit:cover scales the image to fill the circle; object-position
   pushes it up so the head sits in view (cap at the top, shoulders barely visible). */
.munim-root.munim-collapsed .munim-char.munim-fullbody-crop {
  object-fit: cover;
  object-position: center 14%;
  /* Slight zoom so head feels weighty in the circle. */
  transform: scale(1.18);
}
@keyframes munim-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-2px) scale(1.015); }
}
/* Soft head sway — much gentler than the old wiggle. ~5% of the cycle has motion. */
@keyframes munim-head-sway {
  0%, 92%, 100% { transform: rotate(0deg); }
  95%           { transform: rotate(-4deg); }
  98%           { transform: rotate(4deg); }
}

/* (Blink is now a JS-driven 2-frame swap to munim-icon-blink.png — see
   _startBlinking() in munim.js. CSS-overlay blink removed because the flat
   white bar didn't read as a real eye-close.) */

/* ─── Typing-bubble teaser (click → typing → real bubble) ─── */
.munim-typing {
  position: absolute;
  right: 70px;   /* sits to the left of the 48px icon */
  bottom: 20px;
  background: #fff;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(15,23,42,0.16);
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transform-origin: 100% 50%;
  animation: munim-typing-in 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
  pointer-events: none;
}
.munim-typing.munim-typing-out {
  animation: munim-typing-out 0.18s ease-in both;
}
.munim-typing-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #6366f1;
  opacity: 0.45;
  animation: munim-typing-dot 1.1s ease-in-out infinite;
}
.munim-typing-dot:nth-child(2) { animation-delay: 0.18s; }
.munim-typing-dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes munim-typing-in {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1);   }
}
@keyframes munim-typing-out {
  from { opacity: 1; transform: scale(1);   }
  to   { opacity: 0; transform: scale(0.6); }
}
@keyframes munim-typing-dot {
  0%, 60%, 100% { transform: translateY(0)   scale(1);   opacity: 0.45; }
  30%           { transform: translateY(-4px) scale(1.15); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .munim-root.munim-collapsed .munim-char,
  .munim-root.munim-collapsed::before,
  .munim-root.munim-collapsed::after,
  .munim-typing,
  .munim-typing-dot { animation: none; }
}

/* ─── Expanded state: full character + bubble ─────────── */
.munim-root.munim-expanded .munim-char {
  width: 88px;
  height: 88px;
  border-radius: 0;
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
  animation: none;
}

/* ─── Speech bubble ───────────────────────────────────── */
.munim-bubble {
  position: relative;
  max-width: 260px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
  padding: 12px 14px 10px;
  pointer-events: auto;
  font-family: var(--font-body, system-ui, -apple-system, sans-serif);
  color: var(--text-primary, #1a1a2e);
}
.munim-bubble::after {
  content: "";
  position: absolute;
  right: -7px;
  bottom: 28px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-right: 1px solid rgba(15, 23, 42, 0.08);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  transform: rotate(-45deg);
}

.munim-close {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--text-muted, #94a3b8);
  cursor: pointer;
  border-radius: 6px;
  padding: 0;
}
.munim-close:hover {
  background: rgba(15,23,42,0.06);
  color: var(--text-primary, #1a1a2e);
}

/* Keyboard/tap-reachable twin of the long-press "hide for today" gesture —
   sits left of the close (×) button, same size/treatment. */
.munim-hide-today {
  position: absolute;
  top: 4px;
  right: 32px;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  line-height: 1;
  color: var(--text-muted, #94a3b8);
  cursor: pointer;
  border-radius: 6px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.munim-hide-today .material-symbols-rounded {
  font-size: 1rem;
}
.munim-hide-today:hover {
  background: rgba(15,23,42,0.06);
  color: var(--text-primary, #1a1a2e);
}

.munim-text {
  font-size: 0.84rem;
  line-height: 1.45;
  font-weight: 500;
  padding-right: 18px;
  /* Clears the two absolutely-positioned 24px buttons (close + hide-today,
     both top:4px) which sit OUTSIDE normal flow and don't push this block
     down on their own — without this the first line runs under them. */
  padding-top: 20px;
  word-break: break-word;
}
.munim-text b { font-weight: 700; color: var(--primary, #3b82f6); }
.munim-text i { color: var(--text-muted, #6b7280); }

/* Inline navigable hot-words inside FAQ answers. Reads as bold + underline
   + faint blue tint so the user knows it's tappable without it feeling
   like a 1995 hyperlink. */
.munim-nav,
.munim-nav:visited {
  color: var(--primary, #3b82f6);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  text-decoration-color: rgba(59,130,246,0.5);
  cursor: pointer;
  background: rgba(59,130,246,0.06);
  padding: 0 3px;
  border-radius: 4px;
  transition: background 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.munim-nav:hover,
.munim-nav:active {
  background: rgba(59,130,246,0.14);
  text-decoration-color: var(--primary, #3b82f6);
}
.munim-nav b { color: inherit; }

/* Primary CTA button below an FAQ answer — single tap → destination. */
.munim-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 12px;
  padding: 11px 14px;
  background: var(--primary, #3b82f6);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.12s ease;
  box-shadow: 0 2px 6px rgba(59,130,246,0.25);
  -webkit-tap-highlight-color: transparent;
}
.munim-cta:hover { background: var(--primary-600, #2563eb); }
.munim-cta:active { transform: scale(0.97); }
.munim-cta-icon { font-size: 1.1rem; line-height: 1; }
.munim-cta-label { line-height: 1.2; }

/* ─── Action buttons (2-option asks) ──────────────────── */
.munim-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.munim-btn {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  padding: 7px 12px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: transform 0.12s ease, background 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.munim-btn:active { transform: scale(0.96); }
.munim-btn-primary {
  background: var(--primary, #3b82f6);
  color: #fff;
  border-color: var(--primary, #3b82f6);
}
.munim-btn-primary:hover {
  background: var(--primary-600, #2563eb);
  border-color: var(--primary-600, #2563eb);
}
.munim-btn-secondary {
  background: #fff;
  color: var(--text-secondary, #475569);
  border-color: rgba(15, 23, 42, 0.12);
}
.munim-btn-secondary:hover { background: rgba(15,23,42,0.04); }

/* ─── Streak badge on collapsed circle ────────────────── */
/* Brand-aligned: deep sea-blue gradient (same family as --primary).
   Fire icon stays as a single warm accent for semantic recognition. */
.munim-streak-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  min-width: 22px;
  height: 20px;
  padding: 0 5px 0 4px;
  display: flex;
  align-items: center;
  gap: 1px;
  background: linear-gradient(135deg, var(--primary, #3b82f6) 0%, #6366f1 100%);
  color: #fff;
  border-radius: 10px;
  border: 1.5px solid #fff;
  box-shadow: 0 2px 5px rgba(59,130,246,0.4);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
  animation: munim-badge-pop 0.4s ease-out;
}
.munim-streak-badge .material-symbols-rounded {
  font-size: 0.85rem;
  line-height: 1;
  color: #fdba74;        /* warm fire accent — single hot note against blue */
}
.munim-streak-num { font-variant-numeric: tabular-nums; }
@keyframes munim-badge-pop {
  0%   { transform: scale(0) rotate(-12deg); }
  60%  { transform: scale(1.15) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}
.munim-root.munim-expanded .munim-streak-badge { display: none; }

/* ─── Stats banner above tabs in expanded bubble (mobile-first) ─── */
/* Brand-coherent: subtle blue tint background, streak pill + progress bar
   share the same sea-blue → indigo gradient family. */
.munim-stats-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  margin: -2px -2px 8px;
  background: rgba(59,130,246,0.05);
  border: 1px solid rgba(59,130,246,0.14);
  border-radius: 10px;
}

/* Compact streak pill — same blue family as progress bar, fire icon as the
   single warm semantic accent (a flame should look like a flame). */
.munim-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 7px 3px 5px;
  background: linear-gradient(135deg, var(--primary, #3b82f6) 0%, #6366f1 100%);
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1.1;
  letter-spacing: 0;
}
.munim-stat-pill b {
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}
.munim-stat-pill .material-symbols-rounded {
  font-size: 0.95rem;
  line-height: 1;
  color: #fdba74;        /* warm fire accent on blue pill — single hot note */
}
.munim-stat-pill-suf { font-size: 0.7rem; opacity: 0.92; font-weight: 700; }

/* Progress (takes remaining horizontal space) */
.munim-stat-progress {
  flex: 1;
  min-width: 0;
}
.munim-stat-progress-text {
  font-size: 0.72rem;
  color: var(--text-secondary, #475569);
  margin-bottom: 3px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.munim-stat-progress-text b {
  color: var(--primary, #3b82f6);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.munim-stat-rem { color: var(--text-muted, #94a3b8); font-weight: 500; }
.munim-stat-progress-bar {
  height: 5px;
  background: rgba(59,130,246,0.12);
  border-radius: 3px;
  overflow: hidden;
}
.munim-stat-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6 0%, #6366f1 100%);
  border-radius: 3px;
  transition: width 0.4s ease;
}

/* Tablet/desktop: more breathing room */
@media (min-width: 768px) {
  .munim-stats-banner { padding: 9px 12px; gap: 10px; }
  .munim-stat-pill b  { font-size: 0.88rem; }
  .munim-stat-progress-text { font-size: 0.78rem; }
}

/* ─── 3-tab menu (Feedback / Help / Channel) ───────────── */
.munim-tabs {
  display: flex;
  gap: 4px;
  margin: -4px -2px 10px;
  padding: 2px;
  background: rgba(15,23,42,0.04);
  border-radius: 10px;
}
.munim-tab {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 8px 2px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.15s ease, color 0.15s ease;
}
/* With 4 tabs the bubble is too tight for icons + labels, so hide the
   leading icon and rely on color + label alone. Active tab still pops
   via the white pill background. */
.munim-tab .munim-tab-icon,
.munim-tab > .material-symbols-rounded { display: none; }
.munim-tab:hover { color: var(--text-primary, #1a1a2e); }
.munim-tab.active {
  background: #fff;
  color: var(--primary, #3b82f6);
  box-shadow: 0 1px 3px rgba(15,23,42,0.08);
}
.munim-pane {
  max-height: 360px;
  overflow-y: auto;
  margin: 0 -2px;
  padding: 0 2px;
}

/* Feedback tab — emoji row + problem chips */
.munim-fb-prompt {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary, #1a1a2e);
  margin: 0 0 8px;
}
.munim-fb-prompt-sub {
  margin-top: 12px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary, #475569);
}
.munim-emoji-row {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
}
.munim-emoji-btn {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  background: transparent;
  border: 1.5px solid rgba(15,23,42,0.10);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, transform 0.12s, border-color 0.12s;
}
.munim-emoji-btn:hover { background: rgba(59,130,246,0.06); border-color: rgba(59,130,246,0.3); }
.munim-emoji-btn.selected {
  background: rgba(59,130,246,0.12);
  border-color: var(--primary, #3b82f6);
  transform: translateY(-1px);
}
.munim-emoji-icon { font-size: 1.4rem; line-height: 1; }
.munim-emoji-label { font-size: 0.66rem; font-weight: 600; color: var(--text-secondary, #475569); }

.munim-problems {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
}
.munim-problem-chip {
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 500;
  padding: 5px 9px;
  background: #fff;
  border: 1px solid rgba(15,23,42,0.12);
  border-radius: 14px;
  color: var(--text-primary, #1a1a2e);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.munim-problem-chip:hover { background: rgba(59,130,246,0.06); border-color: rgba(59,130,246,0.3); }
.munim-problem-chip.selected {
  background: var(--primary, #3b82f6);
  color: #fff;
  border-color: var(--primary, #3b82f6);
}

/* Help tab — FAQ list */
.munim-faq-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.munim-faq-q {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  padding: 8px 10px;
  background: rgba(59,130,246,0.05);
  border: 1px solid rgba(59,130,246,0.12);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.79rem;
  font-weight: 500;
  text-align: left;
  color: var(--text-primary, #1a1a2e);
  cursor: pointer;
  line-height: 1.35;
  transition: background 0.12s ease, transform 0.12s ease;
}
.munim-faq-q:hover { background: rgba(59,130,246,0.1); transform: translateX(2px); }
.munim-faq-arrow {
  color: var(--primary, #3b82f6);
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
  line-height: 1.35;
}
.munim-faq-q-text { flex: 1; min-width: 0; }
.munim-faq-section-title {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #94a3b8);
  margin: 12px 0 4px;
}
.munim-faq-q-shown {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--primary, #3b82f6);
  margin-bottom: 6px;
  line-height: 1.35;
}
.munim-ask-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-top: 12px;
  padding: 9px 10px;
  background: rgba(16,185,129,0.08);
  border: 1px dashed rgba(16,185,129,0.35);
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: #047857;
  cursor: pointer;
  text-align: left;
}
.munim-ask-btn:hover { background: rgba(16,185,129,0.15); }
.munim-ask-btn .material-symbols-rounded { font-size: 1.05rem; line-height: 1; flex-shrink: 0; }
.munim-channel-card .munim-btn .material-symbols-rounded { font-size: 1.1rem; line-height: 1; vertical-align: -3px; margin-right: 4px; }

/* Channel tab */
.munim-channel-card {
  padding: 14px 12px;
  background: rgba(37,211,102,0.08);
  border: 1px solid rgba(37,211,102,0.25);
  border-radius: 12px;
  text-align: center;
}
.munim-channel-title {
  font-size: 1rem;
  font-weight: 700;
  color: #128c7e;
  margin-bottom: 4px;
}
.munim-channel-sub {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-secondary, #475569);
  margin-bottom: 14px;
}
.munim-channel-card .munim-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  width: 100%;
  background: #25D366;
  border-color: #25D366;
  color: #fff;
  font-weight: 700;
}
.munim-channel-card .munim-btn:hover { background: #1da851; border-color: #1da851; }

/* ─── First-time welcome screen (one-time takeover) ──── */
.munim-welcome-overlay {
  position: fixed; inset: 0; z-index: 100000;
  background: rgba(15, 23, 42, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: opacity 0.22s ease;
  -webkit-tap-highlight-color: transparent;
}
.munim-welcome-overlay.visible { opacity: 1; }

.munim-welcome-card {
  position: relative;
  width: 100%; max-width: 380px;
  background: #fff;
  border-radius: 22px;
  padding: 28px 22px 20px;
  box-shadow: 0 20px 60px -10px rgba(0,0,0,0.4);
  text-align: center;
  transform: translateY(16px) scale(0.96);
  transition: transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-height: 90vh; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.munim-welcome-overlay.visible .munim-welcome-card { transform: translateY(0) scale(1); }

.munim-welcome-close {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px;
  background: rgba(15,23,42,0.05);
  border: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: #475569;
  transition: background 0.15s;
}
.munim-welcome-close:hover { background: rgba(15,23,42,0.10); }
.munim-welcome-close .material-symbols-rounded { font-size: 1.1rem; }

.munim-welcome-hero {
  position: relative;
  display: inline-block;
  margin: 0 auto 4px;
}
.munim-welcome-img {
  display: block;
  width: 170px; height: 170px;
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(99,102,241,0.28));
  animation: munimWaveBob 2.6s ease-in-out infinite;
}
@keyframes munimWaveBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-5px) rotate(-1.5deg); }
}
.munim-welcome-badge {
  position: absolute;
  top: -8px; right: -16px;
  background: #fff;
  border: 1px solid rgba(99,102,241,0.25);
  color: #4f46e5;
  font-size: 0.74rem; font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(15,23,42,0.12);
  animation: munimBadgePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s both;
}
@keyframes munimBadgePop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.munim-welcome-title {
  margin: 6px 0 4px;
  font-size: 1.4rem; font-weight: 800;
  color: #1a1a2e;
  letter-spacing: -0.02em;
}
.munim-welcome-sub {
  margin: 0 0 18px;
  font-size: 0.88rem; line-height: 1.5;
  color: #475569;
}

.munim-welcome-list {
  list-style: none; margin: 0 0 18px; padding: 0;
  text-align: left;
  display: flex; flex-direction: column; gap: 10px;
}
.munim-welcome-list li {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: rgba(99,102,241,0.05);
  border: 1px solid rgba(99,102,241,0.12);
  border-radius: 12px;
  font-size: 0.85rem;
  color: #1a1a2e;
}
.munim-welcome-list li .material-symbols-rounded {
  font-size: 1.2rem;
  color: #6366f1;
  background: #fff;
  border-radius: 50%;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.munim-welcome-streak {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(249,115,22,0.08));
  border: 1px solid rgba(245,158,11,0.28);
  border-radius: 14px;
  font-size: 0.82rem;
  color: #78350f;
  text-align: left;
  line-height: 1.4;
}
.munim-welcome-streak .material-symbols-rounded {
  font-size: 1.4rem;
  color: #f97316;
  flex-shrink: 0;
  animation: munimFlameFlicker 1.4s ease-in-out infinite;
}
@keyframes munimFlameFlicker {
  0%, 100% { transform: rotate(-3deg) scale(1); }
  50%      { transform: rotate(3deg)  scale(1.08); }
}
.munim-welcome-streak b { color: #92400e; }

.munim-welcome-actions {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 12px;
}
.munim-welcome-start {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 50px;
  font-weight: 700; font-size: 0.98rem;
  background: linear-gradient(180deg, #6366f1, #4f46e5);
  color: #fff;
  border: none;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(99,102,241,0.32), inset 0 1px 0 rgba(255,255,255,0.18);
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.18s, background 0.18s;
}
.munim-welcome-start:hover {
  background: linear-gradient(180deg, #7375f5, #5b53ea);
  box-shadow: 0 8px 22px rgba(99,102,241,0.42), inset 0 1px 0 rgba(255,255,255,0.22);
  transform: translateY(-1px);
}
.munim-welcome-start:active {
  transform: translateY(1px);
  box-shadow: 0 3px 8px rgba(99,102,241,0.32), inset 0 1px 2px rgba(0,0,0,0.10);
}
.munim-welcome-start .material-symbols-rounded { font-size: 1.25rem; }
.munim-welcome-later {
  width: 100%; min-height: 40px;
  background: transparent;
  color: #64748b;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.munim-welcome-later:hover { background: rgba(15,23,42,0.04); color: #1a1a2e; }
.munim-welcome-later:active { background: rgba(15,23,42,0.08); }

.munim-welcome-tip {
  margin: 0;
  font-size: 0.72rem;
  color: #94a3b8;
  font-style: italic;
}

/* ─── Tours tab (Driver.js walkthroughs picker) ──────── */
.munim-tour-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 360px;
  overflow-y: auto;
  margin: 0 -2px;
  padding: 0 2px;
  -webkit-overflow-scrolling: touch;
}
.munim-tour-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(99,102,241,0.04);
  border: 1px solid rgba(99,102,241,0.18);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
  min-height: 48px;
}
.munim-tour-row:hover {
  background: rgba(99,102,241,0.10);
  border-color: rgba(99,102,241,0.35);
}
.munim-tour-row:active { transform: scale(0.985); }
.munim-tour-icon {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #6366f1; color: #fff; border-radius: 999px; flex-shrink: 0;
}
.munim-tour-icon .material-symbols-rounded { font-size: 1.05rem; line-height: 1; }
.munim-tour-label {
  flex: 1; min-width: 0;
  font-size: 0.82rem; font-weight: 600;
  color: var(--text-primary, #1a1a2e);
  line-height: 1.3;
  /* Allow up to 2 lines instead of ellipsis — labels were getting cut
     mid-word ("Analytics — in...") which kills the entire purpose of
     a tour catalog. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.munim-tour-meta {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.munim-tour-where {
  font-size: 0.65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted, #64748b);
  background: rgba(0,0,0,0.04);
  padding: 2px 6px; border-radius: 6px;
}
.munim-tour-here {
  font-size: 0.65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: #6366f1;
  background: rgba(99,102,241,0.12);
  padding: 2px 6px; border-radius: 6px;
}
.munim-tour-done {
  font-size: 1.05rem; color: #10b981;
}

/* ─── Legacy menu (kept for safety, unused) ────────────── */
.munim-menu-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary, #1a1a2e);
  margin-bottom: 8px;
}
.munim-topics {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
  margin: 0 -2px;
  padding: 0 2px;
}
.munim-topic {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: rgba(59,130,246,0.06);
  border: 1px solid rgba(59,130,246,0.14);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  text-align: left;
  color: var(--text-primary, #1a1a2e);
  transition: transform 0.12s ease, background 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.munim-topic:hover {
  background: rgba(59,130,246,0.12);
  transform: translateX(2px);
}
.munim-topic:active { transform: scale(0.98); }
.munim-topic-icon {
  flex-shrink: 0;
  font-size: 1rem;
  width: 22px;
  text-align: center;
}
.munim-topic-label { flex: 1; min-width: 0; line-height: 1.3; }
.munim-topic-feedback {
  background: rgba(16,185,129,0.06);
  border-color: rgba(16,185,129,0.14);
}
.munim-topic-feedback:hover { background: rgba(16,185,129,0.12); }

/* ─── FAQ answer + back button ─────────────────────────── */
.munim-faq-answer {
  font-size: 0.82rem;
  line-height: 1.5;
  white-space: pre-line;
  margin-bottom: 10px;
}
.munim-back {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--primary, #3b82f6);
  background: transparent;
  border: none;
  padding: 4px 0;
  cursor: pointer;
  margin-top: 2px;
}
.munim-back:hover { text-decoration: underline; }

/* ─── Feedback textarea form ───────────────────────────── */
.munim-fb-title {
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.munim-fb-input {
  width: 100%;
  font-family: inherit;
  font-size: 0.82rem;
  padding: 8px 10px;
  border: 1px solid rgba(15,23,42,0.14);
  border-radius: 8px;
  resize: vertical;
  min-height: 80px;
  box-sizing: border-box;
}
.munim-fb-input:focus {
  outline: none;
  border-color: var(--primary, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
.munim-fb-row {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.munim-fb-row .munim-btn { flex: 1; }

/* ─── Target highlight ring (Munim.point) ──────────────── */
.munim-target-highlight {
  animation: munim-pulse-ring 1.6s ease-in-out 2;
  border-radius: 8px;
  position: relative;
  z-index: 1;
}
@keyframes munim-pulse-ring {
  0%   { box-shadow: 0 0 0 0   rgba(59,130,246,0.55); }
  60%  { box-shadow: 0 0 0 12px rgba(59,130,246,0);   }
  100% { box-shadow: 0 0 0 0   rgba(59,130,246,0);    }
}

/* ─── Desktop scale-up ───────────────────────────────── */
@media (min-width: 768px) {
  .munim-root {
    right: 16px;                   /* align with WA + install column */
    bottom: 88px;                  /* desktop has no tabbar; above WA (28 + 48 + 12) */
    gap: 10px;
  }
  body.pwa-installable .munim-root { bottom: 148px; }
  .munim-root.munim-collapsed .munim-char { width: 48px; height: 48px; }
  .munim-root.munim-expanded  .munim-char { width: 120px; height: 120px; }
  .munim-bubble { max-width: 320px; padding: 14px 16px 12px; }
  .munim-bubble::after { bottom: 40px; }
  .munim-text  { font-size: 0.88rem; }
  .munim-btn   { font-size: 0.82rem; min-height: 38px; padding: 8px 14px; }
  .munim-topic { font-size: 0.85rem; padding: 9px 11px; }
}

/* ─── Reduced motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .munim-root, .munim-char { transition: opacity 0.12s ease; }
  .munim-root { transform: none; }
  .munim-root.munim-collapsed .munim-char { animation: none; }
  .munim-target-highlight { animation: none; }
}

/* ─── Driver.js popover skin (brand-aligned) ──────────── */
.munim-driver-popover {
  background: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  font-family: var(--font-body, system-ui, -apple-system, sans-serif);
  max-width: 320px;
}
.munim-driver-popover .driver-popover-title {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--primary, #3b82f6) !important;
  padding-right: 30px !important;
}
.munim-driver-popover .driver-popover-description {
  font-size: 0.84rem !important;
  line-height: 1.45 !important;
  color: var(--text-primary, #1a1a2e) !important;
}
.munim-driver-popover .driver-popover-footer button.driver-popover-next-btn {
  background: var(--primary, #3b82f6) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  text-shadow: none !important;
  font-weight: 700 !important;
  padding: 7px 14px !important;
}
.munim-driver-popover .driver-popover-footer button.driver-popover-prev-btn {
  background: #fff !important;
  color: var(--text-secondary, #475569) !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  border-radius: 8px !important;
  text-shadow: none !important;
  font-weight: 600 !important;
  padding: 7px 12px !important;
}
.munim-driver-popover .driver-popover-progress-text {
  color: var(--text-muted, #94a3b8) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
}
.munim-driver-popover .driver-popover-close-btn {
  font-size: 1.4rem !important;
  color: var(--text-muted, #94a3b8) !important;
  width: 26px !important;
  height: 26px !important;
}

/* ─── Dark mode ────────────────────────────────────────── */
:root.dark-mode .munim-bubble {
  background: #1e293b;
  border-color: rgba(255,255,255,0.08);
  color: #e2e8f0;
}
:root.dark-mode .munim-bubble::after {
  background: #1e293b;
  border-right-color: rgba(255,255,255,0.08);
  border-bottom-color: rgba(255,255,255,0.08);
}
:root.dark-mode .munim-btn-secondary {
  background: #0f172a;
  border-color: rgba(255,255,255,0.12);
  color: #cbd5e1;
}
:root.dark-mode .munim-topic {
  background: rgba(59,130,246,0.10);
  border-color: rgba(59,130,246,0.22);
  color: #e2e8f0;
}
:root.dark-mode .munim-fb-input {
  background: #0f172a;
  color: #e2e8f0;
  border-color: rgba(255,255,255,0.14);
}
:root.dark-mode .munim-root.munim-collapsed .munim-char {
  background: #1e293b;
  border-color: rgba(96,165,250,0.3);
}

/* ─── Dark mode: tabs + active pill ─────────────────────── */
:root.dark-mode .munim-tabs { background: rgba(255,255,255,0.04); }
:root.dark-mode .munim-tab { color: #94a3b8; }
:root.dark-mode .munim-tab:hover { color: #e2e8f0; }
:root.dark-mode .munim-tab.active {
  background: #0f172a;
  color: #93c5fd;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* ─── Dark mode: typing teaser chip ─────────────────────── */
:root.dark-mode .munim-typing {
  background: #1e293b;
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 8px 20px rgba(0,0,0,0.45);
}
:root.dark-mode .munim-typing-dot { background: #93c5fd; }

/* ─── Dark mode: welcome takeover ───────────────────────── */
:root.dark-mode .munim-welcome-overlay { background: rgba(0,0,0,0.72); }
:root.dark-mode .munim-welcome-card {
  background: #1e293b;
  box-shadow: 0 20px 60px -10px rgba(0,0,0,0.6);
}
:root.dark-mode .munim-welcome-close {
  background: rgba(255,255,255,0.06);
  color: #cbd5e1;
}
:root.dark-mode .munim-welcome-close:hover { background: rgba(255,255,255,0.12); }
:root.dark-mode .munim-welcome-badge {
  background: #0f172a;
  border-color: rgba(147,197,253,0.30);
  color: #93c5fd;
}
:root.dark-mode .munim-welcome-title { color: #f1f5f9; }
:root.dark-mode .munim-welcome-sub { color: #94a3b8; }
:root.dark-mode .munim-welcome-list li {
  background: rgba(147,197,253,0.06);
  border-color: rgba(147,197,253,0.16);
  color: #e2e8f0;
}
:root.dark-mode .munim-welcome-list li .material-symbols-rounded {
  background: #0f172a;
  color: #93c5fd;
}
:root.dark-mode .munim-welcome-streak {
  background: linear-gradient(135deg, rgba(245,158,11,0.18), rgba(249,115,22,0.10));
  border-color: rgba(245,158,11,0.32);
  color: #fbbf24;
}
:root.dark-mode .munim-welcome-streak b { color: #fde68a; }
:root.dark-mode .munim-welcome-later { color: #94a3b8; }
:root.dark-mode .munim-welcome-later:hover { background: rgba(255,255,255,0.04); color: #f1f5f9; }
:root.dark-mode .munim-welcome-tip { color: #64748b; }

/* ─── Dark mode: Tours tab + rows ───────────────────────── */
:root.dark-mode .munim-tour-row {
  background: rgba(147,197,253,0.06);
  border-color: rgba(147,197,253,0.16);
}
:root.dark-mode .munim-tour-row:hover {
  background: rgba(147,197,253,0.12);
  border-color: rgba(147,197,253,0.32);
}
:root.dark-mode .munim-tour-icon {
  background: #4f46e5;       /* keep brand color, looks fine in dark */
  color: #fff;
}
:root.dark-mode .munim-tour-label { color: #e2e8f0; }
:root.dark-mode .munim-tour-where {
  background: rgba(255,255,255,0.06);
  color: #94a3b8;
}
:root.dark-mode .munim-tour-here {
  background: rgba(147,197,253,0.16);
  color: #93c5fd;
}
:root.dark-mode .munim-tour-done { color: #34d399; }

/* ─── Dark mode: streak badge on icon ───────────────────── */
:root.dark-mode .munim-streak-badge {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #1e293b;
}

/* ─── Dark mode: FAQ chips + answer area + Channel card ── */
:root.dark-mode .munim-fb-prompt { color: #cbd5e1; }
:root.dark-mode .munim-emoji-btn {
  background: rgba(59,130,246,0.10);
  border-color: rgba(59,130,246,0.20);
  color: #cbd5e1;
}
:root.dark-mode .munim-emoji-btn:hover {
  background: rgba(59,130,246,0.18);
  border-color: rgba(59,130,246,0.36);
}
:root.dark-mode .munim-emoji-btn.selected {
  background: rgba(59,130,246,0.22);
  border-color: rgba(59,130,246,0.55);
}
:root.dark-mode .munim-emoji-label { color: #e2e8f0; }
:root.dark-mode .munim-problem-chip {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
  color: #cbd5e1;
}
:root.dark-mode .munim-problem-chip.selected {
  background: rgba(59,130,246,0.20);
  border-color: rgba(59,130,246,0.50);
  color: #93c5fd;
}
:root.dark-mode .munim-channel-card {
  background: rgba(37,211,102,0.10);
  border-color: rgba(37,211,102,0.32);
}
:root.dark-mode .munim-channel-title { color: #4ade80; }
:root.dark-mode .munim-channel-sub { color: #94a3b8; }
:root.dark-mode .munim-ask-btn {
  background: rgba(16,185,129,0.14);
  border-color: rgba(16,185,129,0.32);
  color: #34d399;
}
:root.dark-mode .munim-ask-btn:hover { background: rgba(16,185,129,0.22); }

/* ═══════════════════════════════════════════════════════
   System dark preference (theme='system' on dark OS)
   ─────────────────────────────────────────────────────────
   When user picks "System" theme, no .dark-mode class is added → the
   :root.dark-mode rules above don't fire. Apply the same overrides under
   the OS-level media query, scoped to :root:not(.light-mode) so explicit
   light-pref users stay light even on a dark OS.
   ═══════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) .munim-bubble {
    background: #1e293b; border-color: rgba(255,255,255,0.08); color: #e2e8f0;
  }
  :root:not(.light-mode) .munim-bubble::after {
    background: #1e293b;
    border-right-color: rgba(255,255,255,0.08);
    border-bottom-color: rgba(255,255,255,0.08);
  }
  :root:not(.light-mode) .munim-btn-secondary {
    background: #0f172a; border-color: rgba(255,255,255,0.12); color: #cbd5e1;
  }
  :root:not(.light-mode) .munim-topic {
    background: rgba(59,130,246,0.10); border-color: rgba(59,130,246,0.22); color: #e2e8f0;
  }
  :root:not(.light-mode) .munim-fb-input {
    background: #0f172a; color: #e2e8f0; border-color: rgba(255,255,255,0.14);
  }
  :root:not(.light-mode) .munim-root.munim-collapsed .munim-char {
    background: #1e293b; border-color: rgba(96,165,250,0.3);
  }

  /* Tabs */
  :root:not(.light-mode) .munim-tabs { background: rgba(255,255,255,0.04); }
  :root:not(.light-mode) .munim-tab { color: #94a3b8; }
  :root:not(.light-mode) .munim-tab:hover { color: #e2e8f0; }
  :root:not(.light-mode) .munim-tab.active {
    background: #0f172a; color: #93c5fd; box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  }

  /* Typing teaser */
  :root:not(.light-mode) .munim-typing {
    background: #1e293b; border-color: rgba(255,255,255,0.08);
    box-shadow: 0 8px 20px rgba(0,0,0,0.45);
  }
  :root:not(.light-mode) .munim-typing-dot { background: #93c5fd; }

  /* Welcome takeover */
  :root:not(.light-mode) .munim-welcome-overlay { background: rgba(0,0,0,0.72); }
  :root:not(.light-mode) .munim-welcome-card {
    background: #1e293b; box-shadow: 0 20px 60px -10px rgba(0,0,0,0.6);
  }
  :root:not(.light-mode) .munim-welcome-close {
    background: rgba(255,255,255,0.06); color: #cbd5e1;
  }
  :root:not(.light-mode) .munim-welcome-close:hover { background: rgba(255,255,255,0.12); }
  :root:not(.light-mode) .munim-welcome-badge {
    background: #0f172a; border-color: rgba(147,197,253,0.30); color: #93c5fd;
  }
  :root:not(.light-mode) .munim-welcome-title { color: #f1f5f9; }
  :root:not(.light-mode) .munim-welcome-sub { color: #94a3b8; }
  :root:not(.light-mode) .munim-welcome-list li {
    background: rgba(147,197,253,0.06);
    border-color: rgba(147,197,253,0.16);
    color: #e2e8f0;
  }
  :root:not(.light-mode) .munim-welcome-list li .material-symbols-rounded {
    background: #0f172a; color: #93c5fd;
  }
  :root:not(.light-mode) .munim-welcome-streak {
    background: linear-gradient(135deg, rgba(245,158,11,0.18), rgba(249,115,22,0.10));
    border-color: rgba(245,158,11,0.32); color: #fbbf24;
  }
  :root:not(.light-mode) .munim-welcome-streak b { color: #fde68a; }
  :root:not(.light-mode) .munim-welcome-later { color: #94a3b8; }
  :root:not(.light-mode) .munim-welcome-later:hover { background: rgba(255,255,255,0.04); color: #f1f5f9; }
  :root:not(.light-mode) .munim-welcome-tip { color: #64748b; }

  /* Tours tab + rows */
  :root:not(.light-mode) .munim-tour-row {
    background: rgba(147,197,253,0.06); border-color: rgba(147,197,253,0.16);
  }
  :root:not(.light-mode) .munim-tour-row:hover {
    background: rgba(147,197,253,0.12); border-color: rgba(147,197,253,0.32);
  }
  :root:not(.light-mode) .munim-tour-icon { background: #4f46e5; color: #fff; }
  :root:not(.light-mode) .munim-tour-label { color: #e2e8f0; }
  :root:not(.light-mode) .munim-tour-where {
    background: rgba(255,255,255,0.06); color: #94a3b8;
  }
  :root:not(.light-mode) .munim-tour-here {
    background: rgba(147,197,253,0.16); color: #93c5fd;
  }
  :root:not(.light-mode) .munim-tour-done { color: #34d399; }

  /* Streak badge */
  :root:not(.light-mode) .munim-streak-badge {
    background: linear-gradient(135deg, #f59e0b, #ef4444); color: #1e293b;
  }

  /* FAQ chips + Help tab */
  :root:not(.light-mode) .munim-fb-prompt { color: #cbd5e1; }
  :root:not(.light-mode) .munim-emoji-btn {
    background: rgba(59,130,246,0.10); border-color: rgba(59,130,246,0.20); color: #cbd5e1;
  }
  :root:not(.light-mode) .munim-emoji-btn:hover {
    background: rgba(59,130,246,0.18); border-color: rgba(59,130,246,0.36);
  }
  :root:not(.light-mode) .munim-emoji-btn.selected {
    background: rgba(59,130,246,0.22); border-color: rgba(59,130,246,0.55);
  }
  :root:not(.light-mode) .munim-emoji-label { color: #e2e8f0; }
  :root:not(.light-mode) .munim-problem-chip {
    background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.10); color: #cbd5e1;
  }
  :root:not(.light-mode) .munim-problem-chip.selected {
    background: rgba(59,130,246,0.20); border-color: rgba(59,130,246,0.50); color: #93c5fd;
  }
  :root:not(.light-mode) .munim-channel-card {
    background: rgba(37,211,102,0.10); border-color: rgba(37,211,102,0.32);
  }
  :root:not(.light-mode) .munim-channel-title { color: #4ade80; }
  :root:not(.light-mode) .munim-channel-sub { color: #94a3b8; }
  :root:not(.light-mode) .munim-ask-btn {
    background: rgba(16,185,129,0.14); border-color: rgba(16,185,129,0.32); color: #34d399;
  }
  :root:not(.light-mode) .munim-ask-btn:hover { background: rgba(16,185,129,0.22); }

  /* FAQ list rows (Help tab body) — were rendering as light cards w/ near-invisible text */
  :root:not(.light-mode) .munim-faq-q {
    background: rgba(59,130,246,0.08); border-color: rgba(59,130,246,0.22); color: #e2e8f0;
  }
  :root:not(.light-mode) .munim-faq-q:hover { background: rgba(59,130,246,0.14); }
  :root:not(.light-mode) .munim-faq-arrow { color: #93c5fd; }
  :root:not(.light-mode) .munim-faq-section-title { color: #94a3b8; }
  :root:not(.light-mode) .munim-faq-q-shown { color: #93c5fd; }
  :root:not(.light-mode) .munim-faq-answer { color: #cbd5e1; }
}

/* Explicit dark-mode toggle — FAQ rows (mirror of the @media block above) */
:root.dark-mode .munim-faq-q {
  background: rgba(59,130,246,0.08); border-color: rgba(59,130,246,0.22); color: #e2e8f0;
}
:root.dark-mode .munim-faq-q:hover { background: rgba(59,130,246,0.14); }
:root.dark-mode .munim-faq-arrow { color: #93c5fd; }
:root.dark-mode .munim-faq-section-title { color: #94a3b8; }
:root.dark-mode .munim-faq-q-shown { color: #93c5fd; }
:root.dark-mode .munim-faq-answer { color: #cbd5e1; }

/* ===== css/tours.css ===== */
/* ═══════════════════════════════════════════════════════════════
   SahiHisab — Product tour popover skin (Driver.js)
   Scoped to .sh-tour-popover so it never affects Munim's own tours.
   Light + dark aware, mobile-friendly, sits above the bottom nav.
   No !important.
   ═══════════════════════════════════════════════════════════════ */

/* Popover box */
.driver-popover.sh-tour-popover {
  --sh-tour-accent: #0288D1;
  background: #ffffff;
  color: #0F2A43;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(2, 12, 27, 0.28), 0 4px 14px rgba(2, 12, 27, 0.14);
  padding: 18px 18px 14px;
  max-width: 320px;
  font-family: 'DM Sans', system-ui, sans-serif;
}

.driver-popover.sh-tour-popover .driver-popover-title {
  font-family: 'Plus Jakarta Sans', 'DM Sans', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #0F2A43;
  margin-bottom: 6px;
}

.driver-popover.sh-tour-popover .driver-popover-description {
  font-size: 0.84rem;
  line-height: 1.5;
  color: #51677C;
}

/* Arrow follows the surface colour */
.driver-popover.sh-tour-popover .driver-popover-arrow-side-left.driver-popover-arrow { border-left-color: #ffffff; }
.driver-popover.sh-tour-popover .driver-popover-arrow-side-right.driver-popover-arrow { border-right-color: #ffffff; }
.driver-popover.sh-tour-popover .driver-popover-arrow-side-top.driver-popover-arrow { border-top-color: #ffffff; }
.driver-popover.sh-tour-popover .driver-popover-arrow-side-bottom.driver-popover-arrow { border-bottom-color: #ffffff; }

/* Footer: progress + buttons */
.driver-popover.sh-tour-popover .driver-popover-footer { margin-top: 14px; gap: 8px; }

.driver-popover.sh-tour-popover .driver-popover-progress-text {
  font-size: 0.72rem;
  font-weight: 700;
  color: #93A7BC;
}

.driver-popover.sh-tour-popover .driver-popover-navigation-buttons { gap: 8px; }

.driver-popover.sh-tour-popover button.driver-popover-next-btn,
.driver-popover.sh-tour-popover button.driver-popover-prev-btn {
  text-shadow: none;
  border-radius: 10px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 8px 16px;
  min-height: 38px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

/* Primary (Next / Done) */
.driver-popover.sh-tour-popover button.driver-popover-next-btn {
  background: var(--sh-tour-accent);
  color: #ffffff;
}
.driver-popover.sh-tour-popover button.driver-popover-next-btn:hover {
  background: #0277BD;
}

/* Secondary (Back) */
.driver-popover.sh-tour-popover button.driver-popover-prev-btn {
  background: #F1F6FA;
  color: #0F2A43;
  border-color: #E2E8F0;
}
.driver-popover.sh-tour-popover button.driver-popover-prev-btn:hover {
  background: #E7EFF5;
}

/* Close (×) */
.driver-popover.sh-tour-popover button.driver-popover-close-btn {
  color: #93A7BC;
  transition: color 160ms ease;
}
.driver-popover.sh-tour-popover button.driver-popover-close-btn:hover {
  color: #0F2A43;
}

/* Mobile: keep the popover readable and away from the floating nav. */
@media (max-width: 480px) {
  .driver-popover.sh-tour-popover {
    max-width: calc(100vw - 28px);
    padding: 16px 16px 12px;
  }
}

/* ── Dark mode ── */
body.dark-mode .driver-popover.sh-tour-popover,
[data-theme="dark"] .driver-popover.sh-tour-popover,
.dark .driver-popover.sh-tour-popover {
  --sh-tour-accent: #29B6F6;
  background: #0B2034;
  color: #E1F5FE;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), 0 4px 14px rgba(0, 0, 0, 0.4);
}
body.dark-mode .driver-popover.sh-tour-popover .driver-popover-title,
[data-theme="dark"] .driver-popover.sh-tour-popover .driver-popover-title,
.dark .driver-popover.sh-tour-popover .driver-popover-title { color: #ffffff; }
body.dark-mode .driver-popover.sh-tour-popover .driver-popover-description,
[data-theme="dark"] .driver-popover.sh-tour-popover .driver-popover-description,
.dark .driver-popover.sh-tour-popover .driver-popover-description { color: rgba(179, 229, 252, 0.72); }
body.dark-mode .driver-popover.sh-tour-popover button.driver-popover-prev-btn,
[data-theme="dark"] .driver-popover.sh-tour-popover button.driver-popover-prev-btn,
.dark .driver-popover.sh-tour-popover button.driver-popover-prev-btn {
  background: rgba(255, 255, 255, 0.06);
  color: #E1F5FE;
  border-color: rgba(129, 212, 250, 0.18);
}
body.dark-mode .driver-popover.sh-tour-popover button.driver-popover-next-btn,
[data-theme="dark"] .driver-popover.sh-tour-popover button.driver-popover-next-btn,
.dark .driver-popover.sh-tour-popover button.driver-popover-next-btn { color: #04263b; }
/* Dark-mode arrow colours */
body.dark-mode .driver-popover.sh-tour-popover .driver-popover-arrow-side-left.driver-popover-arrow,
[data-theme="dark"] .driver-popover.sh-tour-popover .driver-popover-arrow-side-left.driver-popover-arrow { border-left-color: #0B2034; }
body.dark-mode .driver-popover.sh-tour-popover .driver-popover-arrow-side-right.driver-popover-arrow,
[data-theme="dark"] .driver-popover.sh-tour-popover .driver-popover-arrow-side-right.driver-popover-arrow { border-right-color: #0B2034; }
body.dark-mode .driver-popover.sh-tour-popover .driver-popover-arrow-side-top.driver-popover-arrow,
[data-theme="dark"] .driver-popover.sh-tour-popover .driver-popover-arrow-side-top.driver-popover-arrow { border-top-color: #0B2034; }
body.dark-mode .driver-popover.sh-tour-popover .driver-popover-arrow-side-bottom.driver-popover-arrow,
[data-theme="dark"] .driver-popover.sh-tour-popover .driver-popover-arrow-side-bottom.driver-popover-arrow { border-bottom-color: #0B2034; }

/* ─── What's New popovers (js/whats-new.js) ───────────────────────────────
   Driver.js ships a deliberately plain popover so it blends into any host.
   Inside SahiHisab that reads as a browser dialog rather than part of the
   app, so .wn-popover re-skins it: the app's radius, its shadow ramp, Outfit
   for the heading and the same pill buttons used everywhere else.
   Scoped to .wn-popover so the Munim tours keep the look they were tuned for. */
.driver-popover.wn-popover {
  max-width: 340px;
  padding: 18px 18px 14px;
  border-radius: 16px;
  background: var(--card, #fff);
  box-shadow: 0 1px 2px rgba(16, 42, 67, 0.06),
              0 12px 32px -8px rgba(16, 42, 67, 0.22);
}

/* The arrow is a separate element and keeps driver's own white — repaint it
   so it matches a themed card. */
.driver-popover.wn-popover .driver-popover-arrow {
  border-color: var(--card, #fff) transparent transparent transparent;
}
.driver-popover.wn-popover .driver-popover-arrow-side-bottom { border-bottom-color: var(--card, #fff); }
.driver-popover.wn-popover .driver-popover-arrow-side-top    { border-top-color: var(--card, #fff); }
.driver-popover.wn-popover .driver-popover-arrow-side-left   { border-left-color: var(--card, #fff); }
.driver-popover.wn-popover .driver-popover-arrow-side-right  { border-right-color: var(--card, #fff); }

/* Badge on its own line. Inline it fought the heading for the first line and
   pushed the wrap to an awkward place. */
.wn-badge {
  display: inline-block;
  margin-bottom: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--primary, #2563eb);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.6;
}

.wn-title { display: block; }

.driver-popover.wn-popover .driver-popover-title {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary, #0d1a26);
  margin: 0;
}

.driver-popover.wn-popover .driver-popover-description {
  margin: 7px 0 0;
  font-size: 0.83rem;
  line-height: 1.6;
  color: var(--text-secondary, #4b5563);
}

.driver-popover.wn-popover .driver-popover-footer {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border, rgba(16, 42, 67, 0.08));
  align-items: center;
}

.driver-popover.wn-popover .driver-popover-progress-text {
  font-size: 0.7rem;
  color: var(--text-muted, #6b7280);
}

.driver-popover.wn-popover .driver-popover-navigation-btns button {
  min-height: 34px;
  padding: 0 15px;
  border-radius: 999px;
  border: none;
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  text-shadow: none;
  cursor: pointer;
}

/* "Theek hai" / "Aage" — the one thing to press. */
.driver-popover.wn-popover .driver-popover-next-btn {
  background: var(--primary, #2563eb);
  color: #fff;
}

.driver-popover.wn-popover .driver-popover-prev-btn {
  background: transparent;
  color: var(--text-secondary, #4b5563);
  margin-right: 4px;
}

/* 28px of hit area instead of a 10px glyph jammed into the corner. */
.driver-popover.wn-popover .driver-popover-close-btn {
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  line-height: 26px;
  border-radius: 50%;
  color: var(--text-muted, #6b7280);
  font-size: 20px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.driver-popover.wn-popover .driver-popover-close-btn:hover {
  background: var(--gray-100, #f1f5f9);
  color: var(--text-primary, #0d1a26);
}

@media (prefers-reduced-motion: reduce) {
  .driver-popover.wn-popover .driver-popover-close-btn,
  .driver-popover.wn-popover .driver-popover-navigation-btns button { transition: none; }
}

/* ===== css/shot-list.css ===== */
/* ═══════════════════════════════════════════════════════
   SahiHisab — Shot List styles
   Embedded inside booking detail. Mobile-first. Tap targets ≥ 44px.
   ═══════════════════════════════════════════════════════ */

.sl-host {
  padding: 4px 2px 0;
  font-family: var(--font-body, system-ui, -apple-system, sans-serif);
  color: var(--text-primary, #1a1a2e);
}

/* ─── Compact link card (booking modal entry point) ─── */
.sl-link-card {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 12px 14px;
  margin: var(--space-sm, 8px) 0 0;
  background: linear-gradient(135deg, rgba(99,102,241,0.06), rgba(139,92,246,0.04));
  border: 1px solid rgba(99,102,241,0.20);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: transform 0.12s, box-shadow 0.18s, border-color 0.18s;
  -webkit-tap-highlight-color: transparent;
}
.sl-link-card:hover {
  border-color: rgba(99,102,241,0.40);
  box-shadow: 0 4px 14px rgba(99,102,241,0.12);
  transform: translateY(-1px);
}
.sl-link-card:active { transform: translateY(0) scale(0.99); }
.sl-link-card.sl-link-card-done {
  background: linear-gradient(135deg, rgba(16,185,129,0.06), rgba(34,197,94,0.04));
  border-color: rgba(16,185,129,0.28);
}
.sl-link-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  background: #fff;
  border: 1px solid rgba(99,102,241,0.20);
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
}
.sl-link-card-done .sl-link-icon {
  background: #fff; border-color: rgba(16,185,129,0.32);
}
.sl-link-icon .material-symbols-rounded {
  font-size: 1.3rem; color: #4f46e5;
}
.sl-link-card-done .sl-link-icon .material-symbols-rounded { color: #059669; }
.sl-link-body { flex: 1; min-width: 0; }
.sl-link-label {
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: #4f46e5;
  margin-bottom: 2px;
}
.sl-link-card-done .sl-link-label { color: #059669; }
.sl-link-meta {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary, #1a1a2e);
  font-variant-numeric: tabular-nums;
}
.sl-link-action { flex-shrink: 0; color: var(--text-muted, #94a3b8); }
.sl-link-action .material-symbols-rounded { font-size: 1rem; }

/* ─── Booking detail full-page route (#booking?id=N) ─── */
.bd-page-host { padding: 0 !important; }
.bd-page {
  display: flex; flex-direction: column;
  min-height: 100dvh;
  background: var(--app-bg, #f8fafc);
  transform: translateX(0);
  opacity: 1;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease;
}
.bd-page.bd-page-entering {
  transform: translateX(18px);
  opacity: 0;
}
.bd-page-topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px 12px;
  background: linear-gradient(180deg, #fff, rgba(255,255,255,0.92));
  border-bottom: 1px solid rgba(15,23,42,0.06);
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.bd-page-back {
  flex-shrink: 0;
  width: 40px; height: 40px;
  background: rgba(15,23,42,0.04);
  border: none; border-radius: 50%;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s, transform 0.08s;
  -webkit-tap-highlight-color: transparent;
}
.bd-page-back:hover { background: rgba(15,23,42,0.08); }
.bd-page-back:active { transform: scale(0.94); }
.bd-page-back .material-symbols-rounded { font-size: 1.3rem; color: var(--text-primary, #1a1a2e); }
.bd-page-title { flex: 1; min-width: 0; }
.bd-page-title-main {
  font-size: 1.05rem; font-weight: 800;
  color: var(--text-primary, #1a1a2e);
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bd-page-title-sub {
  font-size: 0.78rem;
  color: var(--text-muted, #64748b);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bd-page-body {
  flex: 1;
  padding: 16px;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.bd-page-content { display: flex; flex-direction: column; gap: 12px; }
.bd-page-footer {
  position: sticky; bottom: 0;
  background: linear-gradient(180deg, rgba(248,250,252,0), #fff 22%);
  padding: 12px 0 0;
  margin-top: 8px;
}

/* ─── Desktop: 2-column auto-balanced layout ─────────── */
/* On wider screens, flow the booking detail sections into 2 columns so
   the team doesn't scroll a phone-length page on a laptop. CSS
   multicolumn auto-balances and never breaks a card across columns. */
@media (min-width: 980px) {
  .bd-page-body {
    max-width: 1200px;
    padding: 20px 24px;
  }
  .bd-page-content {
    display: block;            /* multicolumn needs block, not flex */
    column-count: 2;
    column-gap: 20px;
  }
  .bd-page-content > * {
    break-inside: avoid;
    page-break-inside: avoid;  /* legacy Safari */
    -webkit-column-break-inside: avoid;
    display: block;
    width: 100%;
    margin: 0 0 14px;
  }
  /* The sticky footer should span both columns. */
  .bd-page-footer {
    column-span: all;
    background: linear-gradient(180deg, rgba(248,250,252,0), #fff 30%);
  }
}
@media (min-width: 1400px) {
  .bd-page-body { max-width: 1440px; }
  .bd-page-content { column-count: 3; }
}

/* ─── Dedicated full-page route (#shot-list?id=N) ───── */
.sl-page-host { padding: 0 !important; }
.sl-page {
  display: flex; flex-direction: column;
  min-height: 100dvh;
  background: var(--app-bg, #f8fafc);
  /* Slide-in from right on entry. Class sl-page-entering applied for 1 frame,
     then removed → CSS transition kicks in for the slide. */
  transform: translateX(0);
  opacity: 1;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease;
}
.sl-page.sl-page-entering {
  transform: translateX(18px);
  opacity: 0;
}

.sl-page-topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px 12px;
  background: linear-gradient(180deg, #fff, rgba(255,255,255,0.92));
  border-bottom: 1px solid rgba(15,23,42,0.06);
  position: sticky; top: 0;
  z-index: 10;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.sl-page-back {
  flex-shrink: 0;
  width: 40px; height: 40px;
  background: rgba(15,23,42,0.04);
  border: none; border-radius: 50%;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s, transform 0.08s;
  -webkit-tap-highlight-color: transparent;
}
.sl-page-back:hover { background: rgba(15,23,42,0.08); }
.sl-page-back:active { transform: scale(0.94); }
.sl-page-back .material-symbols-rounded {
  font-size: 1.3rem; color: var(--text-primary, #1a1a2e);
}
.sl-page-title { flex: 1; min-width: 0; }
.sl-page-title-main {
  font-size: 1.05rem; font-weight: 800;
  color: var(--text-primary, #1a1a2e);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.sl-page-title-sub {
  font-size: 0.78rem;
  color: var(--text-muted, #64748b);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sl-page-body {
  flex: 1;
  padding: 16px;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.sl-skeleton {
  height: 80px;
  background: linear-gradient(90deg, rgba(15,23,42,0.04) 25%, rgba(15,23,42,0.08) 50%, rgba(15,23,42,0.04) 75%);
  background-size: 200% 100%;
  animation: sl-skel 1.4s ease-in-out infinite;
  border-radius: 12px;
}
@keyframes sl-skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.sl-error {
  padding: 14px;
  background: rgba(239,68,68,0.06);
  border: 1px solid rgba(239,68,68,0.20);
  border-radius: 10px;
  color: #b91c1c;
  font-size: 0.85rem;
}

/* ─── Header / progress ───────────────────────────────── */
.sl-header { margin-bottom: 12px; }
.sl-progress {
  display: flex; flex-direction: column; gap: 6px;
}
.sl-progress-bar {
  height: 6px;
  background: rgba(15,23,42,0.06);
  border-radius: 999px;
  overflow: hidden;
}
.sl-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  transition: width 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.sl-progress-meta {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 0.78rem;
  color: var(--text-muted, #64748b);
}
.sl-progress-num {
  font-size: 1.1rem; font-weight: 800;
  color: var(--text-primary, #1a1a2e);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.sl-of { color: var(--text-muted, #64748b); font-weight: 600; font-size: 0.95rem; }
.sl-progress-label { text-transform: lowercase; }

/* ─── Empty state ─────────────────────────────────────── */
.sl-empty {
  padding: 24px 16px;
  text-align: center;
  background: rgba(99,102,241,0.04);
  border: 1px dashed rgba(99,102,241,0.28);
  border-radius: 14px;
  margin-bottom: 8px;
}
.sl-empty-icon {
  width: 56px; height: 56px;
  margin: 0 auto 10px;
  background: #fff;
  border: 1px solid rgba(99,102,241,0.20);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(99,102,241,0.12);
}
.sl-empty-icon .material-symbols-rounded {
  font-size: 1.5rem; color: #6366f1;
}
.sl-empty-title {
  font-size: 1rem; font-weight: 700;
  color: var(--text-primary, #1a1a2e);
  margin-bottom: 4px;
}
.sl-empty-sub {
  font-size: 0.82rem;
  color: var(--text-muted, #64748b);
  margin-bottom: 14px;
  line-height: 1.45;
}
.sl-tpl-btn, .sl-tpl-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  background: linear-gradient(180deg, #6366f1, #4f46e5);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-weight: 700; font-size: 0.92rem;
  cursor: pointer;
  min-height: 44px;
  box-shadow: 0 4px 14px rgba(99,102,241,0.28);
  transition: transform 0.1s, box-shadow 0.18s, background 0.15s;
}
.sl-tpl-btn:hover { background: linear-gradient(180deg, #7375f5, #5b53ea); box-shadow: 0 6px 18px rgba(99,102,241,0.38); transform: translateY(-1px); }
.sl-tpl-btn:active { transform: translateY(1px); }
.sl-tpl-btn .material-symbols-rounded { font-size: 1.15rem; }
.sl-tpl-more {
  display: inline-block;
  margin-left: 8px;
  padding: 8px 12px;
  background: transparent;
  color: #4f46e5;
  border: none;
  font-weight: 600; font-size: 0.85rem;
  cursor: pointer;
  border-radius: 8px;
}
.sl-tpl-more:hover { background: rgba(99,102,241,0.08); }

/* ─── List rows ───────────────────────────────────────── */
.sl-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.sl-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 6px 6px 2px;
  border-radius: 10px;
  background: transparent;
  transition: background 0.15s, opacity 0.2s, transform 0.18s;
}
.sl-row:hover { background: rgba(15,23,42,0.03); }
.sl-row.sl-row-done { opacity: 0.55; }
.sl-row.sl-row-done .sl-row-title { text-decoration: line-through; }
.sl-row.sl-row-removing { opacity: 0; transform: translateX(-12px); pointer-events: none; }

.sl-check {
  flex-shrink: 0;
  width: 32px; height: 32px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
  border-radius: 50%;
  transition: background 0.15s;
}
.sl-check:hover { background: rgba(99,102,241,0.08); }
.sl-check:active { transform: scale(0.92); }
.sl-check .material-symbols-rounded {
  font-size: 1.35rem;
  color: var(--text-muted, #94a3b8);
  transition: color 0.18s;
}
.sl-row-done .sl-check .material-symbols-rounded { color: #10b981; }

.sl-row-body {
  flex: 1; min-width: 0;
}
.sl-row-title {
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text-primary, #1a1a2e);
  line-height: 1.3;
  word-break: break-word;
}
.sl-row-cat {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #94a3b8);
  margin-top: 1px;
  font-weight: 600;
}

.sl-row-del {
  flex-shrink: 0;
  width: 32px; height: 32px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
}
.sl-row:hover .sl-row-del,
.sl-row:focus-within .sl-row-del { opacity: 0.6; }
.sl-row-del:hover { opacity: 1 !important; background: rgba(239,68,68,0.10); }
.sl-row-del .material-symbols-rounded {
  font-size: 1rem;
  color: var(--text-muted, #94a3b8);
}
.sl-row-del:hover .material-symbols-rounded { color: #b91c1c; }

@media (hover: none) {
  /* Mobile: keep delete subtly visible at all times */
  .sl-row-del { opacity: 0.4; }
}

/* ─── Add input ───────────────────────────────────────── */
.sl-add {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(15,23,42,0.08);
}
.sl-add-input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  background: rgba(99,102,241,0.04);
  border: 1px solid rgba(99,102,241,0.18);
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--text-primary, #1a1a2e);
  outline: none;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
.sl-add-input::placeholder { color: var(--text-muted, #94a3b8); }
.sl-add-input:focus {
  border-color: rgba(99,102,241,0.55);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(99,102,241,0.10);
}

/* ─── Template picker bottom sheet ───────────────────── */
.sl-tpl-sheet {
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.45);
  backdrop-filter: blur(4px);
  z-index: 100000;
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.sl-tpl-sheet.visible { opacity: 1; }
.sl-tpl-sheet-card {
  width: 100%; max-width: 420px;
  background: #fff;
  border-radius: 18px 18px 0 0;
  padding: 18px 14px 14px;
  transform: translateY(20%);
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 70vh; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.sl-tpl-sheet.visible .sl-tpl-sheet-card { transform: translateY(0); }
.sl-tpl-sheet-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted, #64748b);
  margin-bottom: 10px;
  padding: 0 4px;
}
.sl-tpl-row {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 13px 14px;
  background: rgba(99,102,241,0.05);
  border: 1px solid rgba(99,102,241,0.14);
  border-radius: 12px;
  margin-bottom: 6px;
  cursor: pointer;
  font-size: 0.92rem; font-weight: 600;
  color: var(--text-primary, #1a1a2e);
  text-align: left;
  min-height: 48px;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
}
.sl-tpl-row:hover { background: rgba(99,102,241,0.10); border-color: rgba(99,102,241,0.30); }
.sl-tpl-row:active { transform: scale(0.985); }
.sl-tpl-row .material-symbols-rounded { font-size: 1.15rem; color: #6366f1; flex-shrink: 0; }
.sl-tpl-sheet-cancel {
  width: 100%;
  margin-top: 8px;
  padding: 12px;
  background: transparent;
  border: none;
  color: var(--text-muted, #64748b);
  font-weight: 600;
  cursor: pointer;
  border-radius: 10px;
}
.sl-tpl-sheet-cancel:hover { background: rgba(15,23,42,0.04); color: var(--text-primary, #1a1a2e); }

/* ─── Group sections (Studio plan vs Client refs) ─────── */
.sl-group { margin-bottom: 10px; }
.sl-group-title {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 4px 8px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #64748b);
}
.sl-group-title .material-symbols-rounded { font-size: 1rem; color: #4f46e5; }
.sl-group-count {
  background: rgba(99,102,241,0.10);
  color: #4f46e5;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 800;
  margin-left: 2px;
}
.sl-group-client .sl-group-title .material-symbols-rounded { color: #d97706; }
.sl-group-client .sl-group-count { background: rgba(217,119,6,0.10); color: #d97706; }

/* Client rows: amber accent + thumbnail */
.sl-row-client {
  background: rgba(245,158,11,0.04);
  border-left: 2px solid rgba(217,119,6,0.32);
  padding-left: 6px;
}
.sl-row-ref {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(15,23,42,0.06);
  margin-top: 4px;
}
.sl-row-ref img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-row-desc {
  font-size: 0.78rem;
  color: var(--text-secondary, #475569);
  margin-top: 3px;
  line-height: 1.4;
}

/* ─── "Shoot Done" bulk action ────────────────────────── */
.sl-done-all {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto;
  padding: 6px 12px;
  background: linear-gradient(180deg, #10b981, #059669);
  border: 1px solid #047857;
  border-radius: 999px;
  font-size: 0.75rem; font-weight: 700;
  color: #fff;
  cursor: pointer;
  min-height: 36px;
  box-shadow: 0 2px 8px rgba(16,185,129,0.32);
  transition: transform 0.1s, box-shadow 0.18s;
}
.sl-done-all + .sl-mode-toggle { margin-left: 6px; }   /* tighter when both present */
.sl-done-all:hover { box-shadow: 0 4px 14px rgba(16,185,129,0.45); transform: translateY(-1px); }
.sl-done-all:active { transform: translateY(0); }
.sl-done-all .material-symbols-rounded { font-size: 1rem; }

/* In shoot mode, make this button bigger + more prominent — it's the
   primary "we're done!" action of the entire event */
.sl-host.sl-shoot-mode .sl-done-all {
  padding: 10px 16px;
  font-size: 0.92rem;
  min-height: 44px;
  box-shadow: 0 4px 16px rgba(16,185,129,0.42);
}
.sl-host.sl-shoot-mode .sl-done-all .material-symbols-rounded { font-size: 1.2rem; }

/* ─── Mode toggle button ──────────────────────────────── */
.sl-mode-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto;
  padding: 6px 10px;
  background: rgba(99,102,241,0.08);
  border: 1px solid rgba(99,102,241,0.22);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #4f46e5;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  min-height: 36px;
}
.sl-mode-toggle:hover { background: rgba(99,102,241,0.16); border-color: rgba(99,102,241,0.40); }
.sl-mode-toggle .material-symbols-rounded { font-size: 0.95rem; }

/* ─── Shoot Day Mode — glanceable, low-friction ──────── */
.sl-host.sl-shoot-mode {
  /* Calmer background so the bright check icons pop */
  background: rgba(15,23,42,0.02);
  border-radius: 14px;
  padding: 12px 8px 8px;
  margin: -4px -2px 0;
}
.sl-host.sl-shoot-mode .sl-progress-num {
  font-size: 1.85rem;        /* glanceable from arm's length */
  letter-spacing: -0.03em;
}
.sl-host.sl-shoot-mode .sl-progress-bar { height: 8px; }
.sl-host.sl-shoot-mode .sl-progress-meta { padding: 4px 0; }
.sl-host.sl-shoot-mode .sl-mode-toggle {
  background: linear-gradient(180deg, #f97316, #ea580c);
  border-color: #ea580c;
  color: #fff;
}
.sl-host.sl-shoot-mode .sl-mode-toggle:hover { background: linear-gradient(180deg, #fb923c, #f97316); }

.sl-host.sl-shoot-mode .sl-row {
  padding: 14px 6px;          /* bigger row */
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(15,23,42,0.06);
  margin-bottom: 8px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.sl-host.sl-shoot-mode .sl-check {
  width: 56px; height: 56px;  /* huge tap target */
  background: rgba(99,102,241,0.06);
}
.sl-host.sl-shoot-mode .sl-check .material-symbols-rounded { font-size: 2.2rem; }
.sl-host.sl-shoot-mode .sl-row-done .sl-check {
  background: rgba(16,185,129,0.10);
}
.sl-host.sl-shoot-mode .sl-row-title { font-size: 1.05rem; font-weight: 600; }
.sl-host.sl-shoot-mode .sl-row-cat { font-size: 0.7rem; margin-top: 4px; }
.sl-host.sl-shoot-mode .sl-row-del { display: none; }   /* no deletes during shoot */

/* Hide done rows entirely in shoot mode (out-of-sight = less scrolling) */
.sl-host.sl-shoot-mode .sl-row.sl-row-done { display: none; }
.sl-host.sl-shoot-mode .sl-row-fading {
  transition: opacity 0.18s, transform 0.18s;
  opacity: 0;
  transform: scale(0.98);
}
.sl-host.sl-shoot-mode .sl-group-title {
  position: sticky;
  top: 0;
  background: rgba(248,250,252,0.96);
  backdrop-filter: blur(6px);
  z-index: 1;
  padding: 8px 4px;
  font-size: 0.78rem;
}
.sl-host.sl-shoot-mode .sl-row-ref { width: 60px; height: 60px; }

/* ─── Dark-mode overrides ─────────────────────────────── */
:root.dark-mode .sl-host { color: #e2e8f0; }
:root.dark-mode .sl-error {
  background: rgba(239,68,68,0.12);
  border-color: rgba(239,68,68,0.32);
  color: #fca5a5;
}
:root.dark-mode .sl-progress-bar { background: rgba(255,255,255,0.10); }
:root.dark-mode .sl-progress-num { color: #f1f5f9; }
:root.dark-mode .sl-of, :root.dark-mode .sl-progress-label { color: #94a3b8; }

:root.dark-mode .sl-empty {
  background: rgba(99,102,241,0.06);
  border-color: rgba(99,102,241,0.30);
}
:root.dark-mode .sl-empty-icon {
  background: #1e293b;
  border-color: rgba(99,102,241,0.30);
}
:root.dark-mode .sl-empty-icon .material-symbols-rounded { color: #93c5fd; }
:root.dark-mode .sl-empty-title { color: #f1f5f9; }
:root.dark-mode .sl-empty-sub { color: #94a3b8; }
:root.dark-mode .sl-tpl-more { color: #93c5fd; }
:root.dark-mode .sl-tpl-more:hover { background: rgba(147,197,253,0.10); }

:root.dark-mode .sl-row { color: #e2e8f0; }
:root.dark-mode .sl-row:hover { background: rgba(255,255,255,0.04); }
:root.dark-mode .sl-row-title { color: #e2e8f0; }
:root.dark-mode .sl-row-cat { color: #94a3b8; }
:root.dark-mode .sl-row-desc { color: #cbd5e1; }
:root.dark-mode .sl-check .material-symbols-rounded { color: #64748b; }
:root.dark-mode .sl-row-done .sl-check .material-symbols-rounded { color: #34d399; }
:root.dark-mode .sl-row-del .material-symbols-rounded { color: #64748b; }
:root.dark-mode .sl-row-del:hover { background: rgba(239,68,68,0.16); }
:root.dark-mode .sl-row-del:hover .material-symbols-rounded { color: #fca5a5; }

:root.dark-mode .sl-add { border-top-color: rgba(255,255,255,0.08); }
:root.dark-mode .sl-add-input {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
  color: #e2e8f0;
}
:root.dark-mode .sl-add-input::placeholder { color: #64748b; }
:root.dark-mode .sl-add-input:focus {
  background: #0f172a;
  border-color: rgba(147,197,253,0.55);
  box-shadow: 0 0 0 4px rgba(147,197,253,0.10);
}

:root.dark-mode .sl-tpl-sheet { background: rgba(0,0,0,0.65); }
:root.dark-mode .sl-tpl-sheet-card { background: #1e293b; }
:root.dark-mode .sl-tpl-sheet-title { color: #94a3b8; }
:root.dark-mode .sl-tpl-row {
  background: rgba(147,197,253,0.06);
  border-color: rgba(147,197,253,0.16);
  color: #e2e8f0;
}
:root.dark-mode .sl-tpl-row:hover {
  background: rgba(147,197,253,0.14);
  border-color: rgba(147,197,253,0.32);
}
:root.dark-mode .sl-tpl-row .material-symbols-rounded { color: #93c5fd; }
:root.dark-mode .sl-tpl-sheet-cancel { color: #94a3b8; }
:root.dark-mode .sl-tpl-sheet-cancel:hover { background: rgba(255,255,255,0.04); color: #f1f5f9; }

:root.dark-mode .sl-group-title { color: #94a3b8; }
:root.dark-mode .sl-group-title .material-symbols-rounded { color: #93c5fd; }
:root.dark-mode .sl-group-count {
  background: rgba(147,197,253,0.18);
  color: #93c5fd;
}
:root.dark-mode .sl-group-client .sl-group-title .material-symbols-rounded { color: #fbbf24; }
:root.dark-mode .sl-group-client .sl-group-count { background: rgba(251,191,36,0.18); color: #fbbf24; }
:root.dark-mode .sl-row-client {
  background: rgba(251,191,36,0.06);
  border-left-color: rgba(251,191,36,0.40);
}
:root.dark-mode .sl-row-ref { background: rgba(255,255,255,0.05); }

:root.dark-mode .sl-mode-toggle {
  background: rgba(147,197,253,0.10);
  border-color: rgba(147,197,253,0.30);
  color: #93c5fd;
}
:root.dark-mode .sl-mode-toggle:hover {
  background: rgba(147,197,253,0.20);
  border-color: rgba(147,197,253,0.50);
}
:root.dark-mode .sl-host.sl-shoot-mode {
  background: rgba(255,255,255,0.02);
}
:root.dark-mode .sl-host.sl-shoot-mode .sl-row {
  background: #1e293b;
  border-color: rgba(255,255,255,0.06);
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
:root.dark-mode .sl-host.sl-shoot-mode .sl-check {
  background: rgba(147,197,253,0.08);
}
:root.dark-mode .sl-host.sl-shoot-mode .sl-row-done .sl-check {
  background: rgba(16,185,129,0.16);
}
:root.dark-mode .sl-host.sl-shoot-mode .sl-group-title {
  background: rgba(15,23,42,0.92);
}

:root.dark-mode .sl-card-chip {
  background: rgba(147,197,253,0.14);
  border-color: rgba(147,197,253,0.32);
  color: #93c5fd;
}
:root.dark-mode .sl-card-chip.sl-card-done {
  background: rgba(16,185,129,0.16);
  border-color: rgba(16,185,129,0.34);
  color: #34d399;
}

/* ─── Booking card chip (referenced from orders.js) ───── */
.sl-card-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  background: rgba(99,102,241,0.08);
  border: 1px solid rgba(99,102,241,0.20);
  border-radius: 999px;
  font-size: 0.7rem; font-weight: 700;
  color: #4f46e5;
  font-variant-numeric: tabular-nums;
  margin-left: 6px;
  vertical-align: 2px;
}
.sl-card-chip.sl-card-done { background: rgba(16,185,129,0.10); border-color: rgba(16,185,129,0.28); color: #047857; }
.sl-card-chip .material-symbols-rounded { font-size: 0.8rem; line-height: 1; }

/* ═══════════════════════════════════════════════════════
   System dark preference (theme='system' on dark OS)
   Mirror of the :root.dark-mode rules above so the shot list also adapts
   when the user's theme is 'system' and the OS is dark.
   ═══════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) .sl-host { color: #e2e8f0; }
  :root:not(.light-mode) .sl-error {
    background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.32); color: #fca5a5;
  }
  :root:not(.light-mode) .sl-progress-bar { background: rgba(255,255,255,0.10); }
  :root:not(.light-mode) .sl-progress-num { color: #f1f5f9; }
  :root:not(.light-mode) .sl-of,
  :root:not(.light-mode) .sl-progress-label { color: #94a3b8; }

  :root:not(.light-mode) .sl-empty {
    background: rgba(99,102,241,0.06); border-color: rgba(99,102,241,0.30);
  }
  :root:not(.light-mode) .sl-empty-icon {
    background: #1e293b; border-color: rgba(99,102,241,0.30);
  }
  :root:not(.light-mode) .sl-empty-icon .material-symbols-rounded { color: #93c5fd; }
  :root:not(.light-mode) .sl-empty-title { color: #f1f5f9; }
  :root:not(.light-mode) .sl-empty-sub { color: #94a3b8; }
  :root:not(.light-mode) .sl-tpl-more { color: #93c5fd; }
  :root:not(.light-mode) .sl-tpl-more:hover { background: rgba(147,197,253,0.10); }

  :root:not(.light-mode) .sl-row { color: #e2e8f0; }
  :root:not(.light-mode) .sl-row:hover { background: rgba(255,255,255,0.04); }
  :root:not(.light-mode) .sl-row-title { color: #e2e8f0; }
  :root:not(.light-mode) .sl-row-cat { color: #94a3b8; }
  :root:not(.light-mode) .sl-row-desc { color: #cbd5e1; }
  :root:not(.light-mode) .sl-check .material-symbols-rounded { color: #64748b; }
  :root:not(.light-mode) .sl-row-done .sl-check .material-symbols-rounded { color: #34d399; }
  :root:not(.light-mode) .sl-row-del .material-symbols-rounded { color: #64748b; }
  :root:not(.light-mode) .sl-row-del:hover { background: rgba(239,68,68,0.16); }
  :root:not(.light-mode) .sl-row-del:hover .material-symbols-rounded { color: #fca5a5; }

  :root:not(.light-mode) .sl-add { border-top-color: rgba(255,255,255,0.08); }
  :root:not(.light-mode) .sl-add-input {
    background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.10); color: #e2e8f0;
  }
  :root:not(.light-mode) .sl-add-input::placeholder { color: #64748b; }
  :root:not(.light-mode) .sl-add-input:focus {
    background: #0f172a; border-color: rgba(147,197,253,0.55);
    box-shadow: 0 0 0 4px rgba(147,197,253,0.10);
  }

  :root:not(.light-mode) .sl-tpl-sheet { background: rgba(0,0,0,0.65); }
  :root:not(.light-mode) .sl-tpl-sheet-card { background: #1e293b; }
  :root:not(.light-mode) .sl-tpl-sheet-title { color: #94a3b8; }
  :root:not(.light-mode) .sl-tpl-row {
    background: rgba(147,197,253,0.06); border-color: rgba(147,197,253,0.16); color: #e2e8f0;
  }
  :root:not(.light-mode) .sl-tpl-row:hover {
    background: rgba(147,197,253,0.14); border-color: rgba(147,197,253,0.32);
  }
  :root:not(.light-mode) .sl-tpl-row .material-symbols-rounded { color: #93c5fd; }
  :root:not(.light-mode) .sl-tpl-sheet-cancel { color: #94a3b8; }
  :root:not(.light-mode) .sl-tpl-sheet-cancel:hover { background: rgba(255,255,255,0.04); color: #f1f5f9; }

  :root:not(.light-mode) .sl-group-title { color: #94a3b8; }
  :root:not(.light-mode) .sl-group-title .material-symbols-rounded { color: #93c5fd; }
  :root:not(.light-mode) .sl-group-count {
    background: rgba(147,197,253,0.18); color: #93c5fd;
  }
  :root:not(.light-mode) .sl-group-client .sl-group-title .material-symbols-rounded { color: #fbbf24; }
  :root:not(.light-mode) .sl-group-client .sl-group-count { background: rgba(251,191,36,0.18); color: #fbbf24; }
  :root:not(.light-mode) .sl-row-client {
    background: rgba(251,191,36,0.06); border-left-color: rgba(251,191,36,0.40);
  }
  :root:not(.light-mode) .sl-row-ref { background: rgba(255,255,255,0.05); }

  :root:not(.light-mode) .sl-mode-toggle {
    background: rgba(147,197,253,0.10); border-color: rgba(147,197,253,0.30); color: #93c5fd;
  }
  :root:not(.light-mode) .sl-mode-toggle:hover {
    background: rgba(147,197,253,0.20); border-color: rgba(147,197,253,0.50);
  }
  :root:not(.light-mode) .sl-host.sl-shoot-mode { background: rgba(255,255,255,0.02); }
  :root:not(.light-mode) .sl-host.sl-shoot-mode .sl-row {
    background: #1e293b; border-color: rgba(255,255,255,0.06); box-shadow: 0 1px 2px rgba(0,0,0,0.3);
  }
  :root:not(.light-mode) .sl-host.sl-shoot-mode .sl-check { background: rgba(147,197,253,0.08); }
  :root:not(.light-mode) .sl-host.sl-shoot-mode .sl-row-done .sl-check { background: rgba(16,185,129,0.16); }
  :root:not(.light-mode) .sl-host.sl-shoot-mode .sl-group-title { background: rgba(15,23,42,0.92); }

  :root:not(.light-mode) .sl-card-chip {
    background: rgba(147,197,253,0.14); border-color: rgba(147,197,253,0.32); color: #93c5fd;
  }
  :root:not(.light-mode) .sl-card-chip.sl-card-done {
    background: rgba(16,185,129,0.16); border-color: rgba(16,185,129,0.34); color: #34d399;
  }
}

/* ===== css/intro.css ===== */
/* =====================================================
   SahiHisab — Intro Carousel
   First-run welcome overlay shown once per studio.
   Mobile-first 375px, scales gracefully on desktop.
   ===================================================== */

.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg-page, #fff);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: intro-fade-in 240ms ease-out;
}

@keyframes intro-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Top bar — skip + progress dots */
.intro-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  flex-shrink: 0;
}

.intro-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}

.intro-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border, #e5e7eb);
  transition: all 220ms ease;
}

.intro-dot.is-active {
  width: 22px;
  border-radius: 4px;
  background: var(--brand-color, #c4583c);
}

.intro-dot.is-past {
  background: var(--brand-color, #c4583c);
  opacity: 0.4;
}

.intro-skip {
  background: transparent;
  border: none;
  color: var(--text-secondary, #6b7280);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 8px 4px;
  min-height: 44px;
  cursor: pointer;
  font-family: inherit;
}

.intro-skip:hover {
  color: var(--text-primary, #111);
}

/* Slide track */
.intro-track {
  flex: 1;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.intro-track::-webkit-scrollbar { display: none; }

.intro-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 28px 16px;
  text-align: center;
}

/* Slide visual — illustration container */
.intro-visual {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1 / 1;
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
  color: var(--brand-color, #c4583c);
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-color, #c4583c) 6%, transparent) 0%, color-mix(in srgb, var(--brand-color, #c4583c) 14%, transparent) 100%);
}

/* Per-slide accent tints — soft, brand-leaning */
.intro-visual--welcome { background: linear-gradient(135deg, #fef3f0 0%, #fad8cc 100%); color: var(--brand-color, #c4583c); }
.intro-visual--quote   { background: linear-gradient(135deg, #f4f0ff 0%, #ddd0ff 100%); color: #6d4ad6; }
.intro-visual--pay     { background: linear-gradient(135deg, #ecfdf5 0%, #c8f0db 100%); color: #059669; }
.intro-visual--cal     { background: linear-gradient(135deg, #fef6e7 0%, #fce5b8 100%); color: #d97706; }
.intro-visual--cta     { background: linear-gradient(135deg, #fef3f0 0%, #fad8cc 100%); color: var(--brand-color, #c4583c); }

/* SVG illustration — fills the visual cleanly */
.intro-visual-svg {
  width: 88%;
  height: 88%;
  display: block;
}

/* Real-image slot (when path provided in Intro._images).
   Overlays the SVG so a failed-to-load image (img.remove() in onerror)
   reveals the SVG fallback underneath. */
.intro-visual-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Headlines */
.intro-headline {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary, #0077b6);
  margin: 0 0 10px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.intro-sub {
  font-size: 0.95rem;
  color: var(--text-secondary, #6b7280);
  line-height: 1.5;
  margin: 0;
  max-width: 320px;
}

/* Bottom CTA bar */
.intro-actions {
  flex-shrink: 0;
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.intro-btn {
  width: 100%;
  min-height: 52px;
  border-radius: 14px;
  border: none;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.intro-btn--primary {
  background: var(--brand-color, #c4583c);
  color: #fff;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--brand-color, #c4583c) 30%, transparent);
}

.intro-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--brand-color, #c4583c) 40%, transparent);
}

.intro-btn--primary:active { transform: translateY(0); }

.intro-btn--ghost {
  background: transparent;
  color: var(--text-secondary, #6b7280);
  min-height: 44px;
  font-size: 0.9rem;
  font-weight: 500;
}

.intro-btn--ghost:hover { color: var(--text-primary, #111); }

.intro-btn .material-symbols-rounded { font-size: 1.2rem; }

/* Final CTA slide gets two buttons */
.intro-cta-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 320px;
}

/* ─── Desktop ─────────────────────────────────────── */
@media (min-width: 768px) {
  .intro-overlay {
    padding: 0;
  }
  .intro-slide {
    padding: 40px 48px 24px;
  }
  .intro-visual {
    max-width: 380px;
    margin-bottom: 36px;
  }
  .intro-visual-icon { font-size: 5rem; }
  .intro-headline { font-size: 1.85rem; }
  .intro-sub { font-size: 1rem; max-width: 420px; }
  .intro-actions {
    max-width: 420px;
    margin: 0 auto;
    width: 100%;
  }
  .intro-topbar { padding: 18px 32px; }
}

/* Honor reduced motion */
@media (prefers-reduced-motion: reduce) {
  .intro-overlay { animation: none; }
  .intro-track { scroll-behavior: auto; }
  .intro-btn { transition: none; }
}

/* ===== css/onboard-v2.css ===== */
/* ═══════════════════════════════════════════════════════
   Onboarding v2 — three questions + the first-task checklist
   Mobile-first at 375px. Every tap target is at least 44px.
   Uses the app's existing tokens only; no !important anywhere.
   ═══════════════════════════════════════════════════════ */

/* ─── The questions overlay ──────────────────────────── */
.ob-lock { overflow: hidden; }

.ob-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-end;
  background: rgba(15, 18, 24, 0.55);
  backdrop-filter: blur(6px);
  animation: ob-fade 180ms ease-out;
}

.ob-sheet {
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--surface, #fff);
  border-radius: var(--radius-xl, 20px) var(--radius-xl, 20px) 0 0;
  box-shadow: var(--shadow-xl, 0 -8px 40px rgba(0, 0, 0, 0.18));
  animation: ob-rise 260ms cubic-bezier(0.22, 1, 0.36, 1);
  /* Clears the home-bar on a notched phone without eating space elsewhere. */
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

.ob-body { padding: 18px 16px 8px; }

.ob-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.ob-dots { display: flex; gap: 6px; }

.ob-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full, 999px);
  background: var(--border, #e2e5ea);
  transition: width 200ms ease, background 200ms ease;
}
.ob-dot.is-on { width: 22px; background: var(--primary, #4f46e5); }
.ob-dot.is-done { background: var(--success, #16a34a); }

.ob-skip {
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  background: none;
  color: var(--text-muted, #8b93a1);
  font-size: 0.8125rem;
  cursor: pointer;
}

.ob-q {
  margin: 0 0 6px;
  font-size: 1.1875rem;
  line-height: 1.35;
  font-weight: 650;
  color: var(--text-primary, #16191f);
  letter-spacing: -0.01em;
}

.ob-sub {
  margin: 0 0 20px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-secondary, #6b7280);
}

/* ── Yes / No ── */
.ob-choices { display: grid; gap: 10px; }

.ob-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 16px;
  border: 1.5px solid var(--primary, #4f46e5);
  border-radius: var(--radius-lg, 14px);
  background: var(--primary, #4f46e5);
  color: var(--primary-foreground, #fff);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.ob-choice:active { transform: scale(0.985); }
.ob-choice .material-symbols-rounded { font-size: 20px; }

.ob-choice--no {
  border-color: var(--border, #e2e5ea);
  background: var(--surface, #fff);
  color: var(--text-secondary, #6b7280);
}

/* ── Multi-select chips (Q2) ── */
.ob-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}

.ob-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 12px;
  border: 1.5px solid var(--border, #e2e5ea);
  border-radius: var(--radius-md, 12px);
  background: var(--surface, #fff);
  color: var(--text-primary, #16191f);
  font-size: 0.8125rem;
  font-weight: 550;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}
.ob-chip .material-symbols-rounded {
  flex: 0 0 auto;
  font-size: 19px;
  color: var(--text-muted, #8b93a1);
}
.ob-chip-label { min-width: 0; overflow-wrap: anywhere; }

.ob-chip.is-on {
  border-color: var(--primary, #4f46e5);
  background: var(--info-light, #eef2ff);
}
.ob-chip.is-on .material-symbols-rounded { color: var(--primary, #4f46e5); }

.ob-next {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: var(--radius-lg, 14px);
  background: var(--primary, #4f46e5);
  color: var(--primary-foreground, #fff);
  font-size: 0.9375rem;
  font-weight: 650;
  cursor: pointer;
}

/* ─── The first-task checklist (on the dashboard) ─────── */
.ob-card {
  margin: 0 0 14px;
  padding: 14px;
  border: 1px solid var(--border-light, #eef0f4);
  border-radius: var(--radius-lg, 14px);
  background: var(--card, #fff);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(16, 24, 40, 0.06));
}

.ob-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.ob-card-head h3 {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 650;
  color: var(--text-primary, #16191f);
}
.ob-card-count {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted, #8b93a1);
  font-variant-numeric: tabular-nums;
}

.ob-task {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--border-light, #eef0f4);
}
.ob-task:first-of-type { border-top: 0; padding-top: 0; }

.ob-task-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full, 999px);
  background: var(--info-light, #eef2ff);
  color: var(--primary, #4f46e5);
}
.ob-task-ico .material-symbols-rounded { font-size: 19px; }

.ob-task.is-done .ob-task-ico {
  background: var(--success-light, #dcfce7);
  color: var(--success, #16a34a);
}

.ob-task-main { min-width: 0; }

.ob-task-title {
  margin: 0 0 4px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary, #16191f);
}
.ob-task.is-done .ob-task-title {
  color: var(--text-muted, #8b93a1);
  text-decoration: line-through;
}

.ob-task-steps {
  margin: 0;
  padding-left: 18px;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--text-secondary, #6b7280);
}
.ob-task.is-done .ob-task-steps { display: none; }

/* Why a task is not done yet — e.g. the quotation exists but was never sent. */
.ob-task-note {
  margin: 6px 0 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--warning, #b45309);
}
.ob-task.is-done .ob-task-note { display: none; }

.ob-task-cta {
  grid-column: 2;
  justify-self: start;
  min-height: 44px;
  margin-top: 8px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-md, 12px);
  background: var(--primary, #4f46e5);
  color: var(--primary-foreground, #fff);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

/* ─── Desktop: the sheet becomes a centred dialog ─────── */
@media (min-width: 768px) {
  .ob-overlay { align-items: center; justify-content: center; }
  .ob-sheet {
    max-width: 480px;
    border-radius: var(--radius-xl, 20px);
    padding-bottom: 8px;
    animation: ob-pop 220ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .ob-body { padding: 24px 24px 16px; }
  .ob-q { font-size: 1.375rem; }
  .ob-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@keyframes ob-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ob-rise { from { transform: translateY(18px); } to { transform: none; } }
@keyframes ob-pop  { from { transform: scale(0.97); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .ob-overlay, .ob-sheet { animation: none; }
  .ob-choice:active { transform: none; }
}

/* ===== assistant/css/assistants.css ===== */
/* =====================================================
   SahiHisab — Assistant Module Styles
   Extracted from app.css for modular separation
   ===================================================== */

/* ─── Page layout ──────────────────────────────────── */
.assistants-page { padding: 0 0 80px; }

@media (min-width: 1024px) {
  .assistants-page { max-width: 900px; margin: 0 auto; }
}

/* ─── Assistant specific ───────────────────────────── */
.asst-type-badge {
  display: inline-block; padding: 1px 8px; border-radius: 8px;
  font-size: 10px; font-weight: 700; border: 1px solid;
  font-family: 'DM Sans', sans-serif;
}

.asst-stats-row {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px;
}
.asst-stat {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; font-family: 'DM Sans', sans-serif; color: var(--text-secondary);
}
.asst-stat.green { color: var(--success); }
.asst-stat.blue { color: var(--primary); }

/* Task money breakdown */
.asst-task-money {
  display: flex; gap: 12px; margin-top: 4px;
}
.task-money-item { display: flex; flex-direction: column; gap: 2px; }
.task-money-label { font-size: 11px; color: var(--text-muted); font-family: 'DM Sans', sans-serif; }
.task-money-value { font-size: 14px; font-weight: 700; font-family: 'DM Sans', sans-serif; color: var(--text-primary); }

/* Performance row */
.perf-row { display: flex; gap: 8px; }
.perf-box {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  padding: 14px; border-radius: 14px; gap: 6px;
}
.perf-box.green { background: #F0FDF4; }
.perf-box.red { background: #FEF2F2; }
.perf-box.blue { background: #EFF6FF; }
.perf-value { font-size: 20px; font-weight: 800; font-family: 'DM Sans', sans-serif; }
.perf-label { font-size: 11px; color: var(--text-secondary); font-family: 'DM Sans', sans-serif; }

/* ─── Assistant Detail Redesign (Hero + Tabs) ──────── */

/* Hero card */
.ad-hero {
  background:
    radial-gradient(120% 80% at 85% -10%, rgba(56,189,248,0.32) 0%, rgba(56,189,248,0) 55%),
    linear-gradient(140deg, #0a3a5c 0%, #0b6aa3 100%);
  color: #fff;
  padding: 18px 18px 36px;
  position: relative;
}
/* Actions float quietly top-right; the bar no longer costs a full row */
.ad-hero-bar {
  position: absolute; top: 12px; right: 12px; margin: 0;
  display: flex; align-items: center; justify-content: flex-end;
}
.ad-hero-id {
  display: flex; align-items: center; gap: 14px;
}
.ad-status-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 5px; vertical-align: middle;
}
.ad-status-dot.on  { background: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,0.25); }
.ad-status-dot.off { background: #94a3b8; box-shadow: 0 0 0 3px rgba(148,163,184,0.2); }
.ad-hero-btn.ghost { background: rgba(255,255,255,0.14); color: rgba(255,255,255,0.92); }
.ad-hero-top {
  display: flex; align-items: center; gap: 14px;
  margin: 14px 0 16px; /* clears the floating top-right actions */
}
.ad-hero-avatar {
  width: 60px; height: 60px; border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 20px; font-family: 'DM Sans', sans-serif;
  color: #fff; flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.25);
}
.ad-hero-info { flex: 1; min-width: 0; }
.ad-hero-name {
  font-size: 18px; font-weight: 800; font-family: 'DM Sans', sans-serif;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ad-hero-badge {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; font-family: 'DM Sans', sans-serif;
}
.ad-hero-badge.staff { background: rgba(14,165,233,0.2); color: #7dd3fc; }
.ad-hero-badge.freelancer { background: rgba(245,158,11,0.2); color: #fcd34d; }
.ad-hero-meta {
  font-size: 13px; color: rgba(255,255,255,0.7);
  font-family: 'DM Sans', sans-serif;
  display: flex; align-items: center; gap: 6px; margin-top: 2px;
}
.ad-hero-sub {
  font-size: 12px; color: rgba(255,255,255,0.5);
  font-family: 'DM Sans', sans-serif; margin-top: 2px;
}
.ad-hero-actions {
  display: flex; gap: 8px; flex-shrink: 0;
}
/* One quiet frosted style for all hero actions — icon tint alone
   differentiates them; no competing color blocks */
.ad-hero-btn {
  width: 44px; height: 44px; border-radius: 50%; border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: transform 0.15s;
  background: rgba(255,255,255,0.13); color: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.ad-hero-btn .material-symbols-rounded { font-size: 20px; }
.ad-hero-btn:active { transform: scale(0.9); }

/* Labelled variant. A bare circle of dots does not say it opens a menu, so the
   one hero control that IS a menu carries its name. Still 44px tall. */
.ad-hero-btn--labelled {
  width: auto; padding: 0 12px; gap: 6px; height: 44px;
  border-radius: var(--radius-full, 9999px);
  font-family: 'DM Sans', sans-serif; font-size: 0.82rem; font-weight: 600;
}
.ad-hero-btn--labelled .material-symbols-rounded { font-size: 18px; }
.ad-hero-btn--labelled .ad-hero-btn-caret { transition: transform 0.15s; }
.ad-hero-btn--labelled[aria-expanded="true"] .ad-hero-btn-caret { transform: rotate(180deg); }

/* ⋮ dropdown — call / WhatsApp / edit */
.ad-hero-actions { position: relative; }
.ad-hero-menu {
  position: absolute; top: 50px; right: 0; z-index: 20; min-width: 184px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg, 16px);
  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.18), 0 3px 10px rgba(15, 23, 42, 0.08);
  padding: 6px; display: flex; flex-direction: column;
}
.ad-hero-menu[hidden] { display: none; }
.ad-hero-menu-item {
  display: flex; align-items: center; gap: 10px; min-height: 44px;
  padding: 0 12px; border: none; background: none;
  border-radius: var(--radius-sm, 8px); text-align: left;
  font-size: 0.85rem; font-weight: 600; color: var(--text-primary);
  font-family: 'DM Sans', sans-serif; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ad-hero-menu-item:hover { background: var(--gray-100, #f1f5f9); }
.ad-hero-menu-item .material-symbols-rounded { font-size: 20px; color: var(--text-secondary); }

/* Venue on a task card. Its own row — at 375px the date, the event type and an
   address do not share a line — and it truncates, because a venue_address can be
   a paragraph. .detail-item-top is a flex row whose first child had no class, so
   it sized to max-content and a long address pushed the card past 375px instead
   of ellipsing; a flex item will not shrink below its content without
   min-width:0, and that has to hold all the way down the chain. */
.asst-task-head { flex: 1; min-width: 0; }
.asst-task-venue {
  display: flex; align-items: center; gap: 3px; margin-top: 2px; min-width: 0;
  font-size: 12px; color: var(--text-secondary);
  font-family: 'DM Sans', sans-serif;
}
.asst-task-venue .material-symbols-rounded { font-size: 14px; flex-shrink: 0; }
.asst-task-venue-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Money strip */
.ad-money-strip {
  display: flex; gap: 1px; margin: -12px 16px 0;
  position: relative; z-index: 2;
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.ad-money-box {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  padding: 14px 8px; background: var(--card);
  gap: 2px;
}
.ad-money-box:first-child { border-radius: 16px 0 0 16px; }
.ad-money-box:last-child { border-radius: 0 16px 16px 0; }
.ad-money-label {
  font-size: 11px; font-weight: 600; font-family: 'DM Sans', sans-serif;
  text-transform: uppercase; letter-spacing: 0.3px;
}
.ad-money-value {
  font-size: 20px; font-weight: 800; font-family: 'DM Sans', sans-serif;
  word-break: break-all;
}
.ad-money-label.earned { color: var(--text-secondary); }
.ad-money-value.earned { color: var(--text-primary); }
.ad-money-label.paid { color: var(--success); }
.ad-money-value.paid { color: var(--success); }
.ad-money-label.due { color: var(--danger); }
.ad-money-value.due { color: var(--danger); }

/* Quick actions row — solid color so buttons clearly look tappable
   (BDS Events feedback 2026-05-20: "not visible properly"). */
.ad-quick-actions {
  display: flex; gap: 10px; padding: 16px 16px 8px;
}
.ad-quick-btn {
  flex: 1; display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 14px 12px; border-radius: 12px; border: none;
  font-size: 15px; font-weight: 700; font-family: 'DM Sans', sans-serif;
  cursor: pointer; min-height: 52px;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  transition: transform 0.1s, box-shadow 0.15s, opacity 0.15s;
}
.ad-quick-btn:hover { box-shadow: 0 4px 10px rgba(0,0,0,0.12); }
.ad-quick-btn:active { transform: scale(0.98); opacity: 0.92; }
.ad-quick-btn.assign {
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
}
.ad-quick-btn.pay {
  background: linear-gradient(135deg, #16A34A 0%, #15803D 100%);
}
.ad-quick-btn .material-symbols-rounded { font-size: 22px; color: #fff; }

/* Performance compact bar */
.ad-perf-bar {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 16px; margin: 4px 16px 0;
  background: var(--gray-50); border-radius: 12px;
}
.ad-perf-item {
  display: flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 600; font-family: 'DM Sans', sans-serif;
}
.ad-perf-item .material-symbols-rounded { font-size: 18px; }
.ad-perf-item.good { color: var(--success); }
.ad-perf-item.bad { color: var(--danger); }
.ad-perf-item.rating { color: var(--primary); }
.ad-perf-divider {
  width: 1px; height: 16px; background: var(--border);
}

/* Tabs */
/* Segmented pills on a white track — same family as the hub/finance tabs.
   Tabs are content-sized and the track scrolls; no more 4-way squeeze. */
.ad-tabs {
  display: flex; gap: 8px; padding: 6px; margin: 12px 12px 0;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-full, 9999px);
  box-shadow: 0 1px 3px rgba(16, 42, 67, 0.05);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  position: sticky; top: 0; z-index: 5;
}
.ad-tabs::-webkit-scrollbar { display: none; }
.ad-tab {
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 14px; border: none;
  border-radius: var(--radius-full, 9999px);
  background: var(--primary-100); color: var(--primary-800);
  font-size: 0.83rem; font-weight: 600; font-family: 'DM Sans', sans-serif;
  white-space: nowrap; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.ad-tab:hover { background: var(--primary-200); }
.ad-tab.active { background: var(--primary-500); color: #fff; }
:root.dark-mode .ad-tab { background: hsla(200, 75%, 50%, 0.16); color: hsl(200, 85%, 74%); }
:root.dark-mode .ad-tab:hover { background: hsla(200, 75%, 50%, 0.26); }
:root.dark-mode .ad-tab.active { background: var(--primary-500); color: #fff; }
.ad-tab .material-symbols-rounded { font-size: 18px; }
.ad-tab-badge {
  font-size: 10px; font-weight: 700; padding: 1px 6px;
  border-radius: 10px; background: var(--danger); color: #fff;
  min-width: 18px; text-align: center;
}
.ad-tab.active .ad-tab-badge { background: rgba(255, 255, 255, 0.25); color: #fff; }

/* Tab content */
.ad-tab-content { padding: 16px; min-height: 200px; }
.ad-tab-pane { display: none; }
.ad-tab-pane.active { display: block; }

/* Opening balance inline */
.ad-opening-bal {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; margin: 0 0 12px; border-radius: 10px;
  background: var(--warning)10; border: 1px dashed var(--warning);
  font-size: 13px; font-weight: 600; color: var(--warning);
  font-family: 'DM Sans', sans-serif;
}
.ad-opening-bal .material-symbols-rounded { font-size: 16px; }

/* Section titles inside tabs */
.ad-section-title {
  font-size: 14px; font-weight: 700; color: var(--text-primary);
  font-family: 'DM Sans', sans-serif; margin: 0 0 10px;
  display: flex; align-items: center; gap: 6px;
}

/* Bottom actions */
.ad-bottom-actions {
  display: flex; gap: 8px; flex-wrap: wrap; padding: 8px 16px 24px;
  border-top: 1px solid var(--border); margin-top: 8px;
}

/* ─── Dashboard metric grid (replaces money-strip + perf-bar) ───────── */
.ad-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--border);
  margin: -28px 16px 0; position: relative; z-index: 2;
  border-radius: 22px; overflow: hidden;
  box-shadow: 0 12px 30px rgba(8, 47, 73, 0.16);
}
.ad-metric {
  background: var(--card); padding: 15px 11px 13px;
  display: flex; flex-direction: column; gap: 3px;
}
.ad-metric-val {
  font-size: 19px; font-weight: 800; line-height: 1.12;
  font-family: 'DM Sans', sans-serif; color: var(--text-primary);
  display: flex; align-items: center; gap: 3px;
}
.ad-metric-lbl {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.3px;
  text-transform: uppercase; color: var(--text-secondary);
  font-family: 'DM Sans', sans-serif; line-height: 1.2;
}
.ad-metric.primary .ad-metric-val { color: #0284c7; }
.ad-metric.warn .ad-metric-val { color: var(--danger); }
.ad-metric-ic { font-size: 16px; color: #f59e0b; }

/* ─── Secondary action row (de-emphasised vs the metrics) ──────────── */
.ad-actions { display: flex; gap: 10px; padding: 14px 16px 4px; }
.ad-act-btn {
  flex: 1; display: flex; align-items: center; justify-content: center;
  gap: 7px; min-height: 46px; border-radius: 14px;
  font-size: 14px; font-weight: 700; font-family: 'DM Sans', sans-serif;
  cursor: pointer; border: 1px solid var(--border);
  background: var(--gray-50); color: var(--text-primary);
  transition: transform 0.1s, box-shadow 0.15s;
}
.ad-act-btn .material-symbols-rounded { font-size: 20px; }
.ad-act-btn:active { transform: scale(0.98); }
.ad-act-btn.primary {
  background: #0284c7; color: #fff; border-color: #0284c7;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.28);
}
.ad-act-btn.primary .material-symbols-rounded { color: #fff; }

/* ─── Tab badge variants ───────────────────────────────────────────── */
.ad-tab-badge.accent { background: rgba(2,132,199,0.12); color: #0284c7; }
.ad-tab.active .ad-tab-badge.accent { background: #0284c7; color: #fff; }
.ad-tab-badge.muted { background: var(--gray-100, #e5e7eb); color: var(--text-secondary); }

/* ─── Desktop: single-row metric strip ─────────────────────────────── */
@media (min-width: 768px) {
  .ad-metrics { grid-template-columns: repeat(6, 1fr); }
  .ad-metric { padding: 16px 12px; }
  .ad-actions { max-width: 420px; }
  /* .ad-actions got a desktop cap; .ad-tabs never did, so a ~900px pill bar
     carried ~280px of tabs and read as an empty white slab. It hugs its tabs
     now and sits centred. max-width keeps the original 12px side margins as
     the ceiling, so an assistant with every tab (Tasks / Payments /
     Attendance / Settings) still falls back to the existing overflow-x
     scroll rather than bursting the page. */
  .ad-tabs {
    width: fit-content;
    max-width: calc(100% - 24px);
    margin-left: auto;
    margin-right: auto;
  }
}

/* ─── Deactivate is reversible, Delete is not ──────────────────────────
   Both shipped as .btn-danger, so they sat side by side in identical solid
   red with identical weight — nothing told you which one you could undo.
   Solid red now means "this is permanent" and belongs to Delete alone.
   Outline, not grey: deactivating is still destructive enough to hesitate
   over. Hover fills it so the affordance stays obvious. */
.btn-danger-soft {
  background: transparent;
  border: 1.5px solid var(--destructive);
  color: var(--destructive);
}
.btn-danger-soft:hover {
  background: var(--destructive);
  color: #fff;
}
.btn-danger-soft .material-symbols-rounded { color: inherit; }

/* ─── Card action row: stop the third button spilling out of the card ──
   .client-quick-action is `flex: 1` with the default `min-width: auto`, so a
   flex item can never shrink below its own content — the row overflowed the
   card instead, and .client-card clipped whatever hung past it. That is the
   "Assi…" cut-off: at the 3-column desktop width a card is 281px, the action
   row 247px, and three labelled buttons need 253px in English and 262px in
   Tamil. Measured, not estimated.

   `min-width: 0` lets them shrink at all; `flex: 1 1 auto` sizes each button
   to its OWN label and shares the leftover, instead of forcing equal thirds
   that the longest word ("WhatsApp") cannot live in. Verified no overflow and
   no clipped button at 375 / 768 / 1024 / 1200 / 1440px in English, Hindi and
   Tamil. `overflow: hidden` is a last-resort guard for a language longer than
   any of those — a tidy cut inside the button beats bursting the card.

   Only the Team card uses the labelled variant; every Clients card renders
   .client-card-actions--icon, whose own `flex: 0 0 auto` and 44px min-width
   are more specific and therefore untouched by this. */
.client-quick-action { min-width: 0; }

.assistant-card .client-card-actions { gap: 6px; }
.assistant-card .client-quick-action {
  flex: 1 1 auto;
  gap: 3px;
  padding: 8px 6px;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════
   WORK AGREEMENT (migration 143)
   Studio-side modal: what the freelancer owes, by when, and by
   when the money follows. Mobile-first — a studio owner sets
   this up on a phone between shoots.
   ═══════════════════════════════════════════════════════════ */

.agr-loading {
  display: flex;
  justify-content: center;
  padding: 36px 0;
}

.agr-task {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.agr-sec-title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--text-muted, #9ca3af);
  margin: 16px 0 7px;
}

.agr-fields { border: 0; margin: 0; padding: 0; min-width: 0; }

/* A signed agreement is read-only, so the form says so by looking spent
   rather than by silently rejecting the save. */
.agr-fields[disabled] { opacity: 0.6; }

.agr-checks { display: flex; flex-direction: column; gap: 2px; }

.agr-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 2px 4px;
  font-size: 0.88rem;
  color: var(--text-primary);
  cursor: pointer;
}

.agr-check input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--primary, #0369A1); }

.agr-input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  background: var(--card, #fff);
  color: var(--text-primary);
  font-size: 0.9rem;
}

.agr-input:focus { outline: none; border-color: var(--primary, #0369A1); }

.agr-other { margin: 2px 0 4px 28px; width: calc(100% - 28px); }

.agr-when { display: flex; flex-direction: column; gap: 2px; }

.agr-when-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
}

.agr-when-row label { font-size: 0.88rem; color: var(--text-primary); }

.agr-days { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }

.agr-days span { font-size: 0.82rem; color: var(--text-muted, #9ca3af); }

.agr-num { width: 74px; text-align: center; }

/* The computed date. This is the whole point of the two number boxes — the
   studio should see the deadline it is agreeing to, not do the sum itself. */
.agr-when-note {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary, #0369A1);
  min-height: 18px;
  margin: -2px 0 8px;
}

.agr-signed-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-radius: 10px;
  background: var(--success-light, #ecfdf5);
  border: 1px solid var(--success, #10b981);
  margin-bottom: 8px;
}

.agr-signed-banner .material-symbols-rounded { color: var(--success, #10b981); font-size: 1.35rem; }
.agr-signed-title { font-size: 0.88rem; font-weight: 700; color: var(--success-dark, #047857); }
.agr-signed-sub { font-size: 0.78rem; color: var(--text-secondary); }

.agr-locked-note {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-muted, #9ca3af);
  margin-bottom: 10px;
}

/* ─── In-person signing, collapsed ──────────────────────── */
/* Kept behind a disclosure because it is the weaker record: the studio's own
   device. The link is the path that should be reached for first. */
.agr-inperson {
  margin-top: 18px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  overflow: hidden;
}

.agr-inperson summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 13px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  list-style: none;
}

.agr-inperson summary::-webkit-details-marker { display: none; }
.agr-inperson summary .material-symbols-rounded { font-size: 1.1rem; color: var(--text-muted, #9ca3af); }
.agr-inperson[open] summary { border-bottom: 1px solid var(--border, #e5e7eb); }

.agr-inperson-body { padding: 13px; display: flex; flex-direction: column; gap: 10px; }

.agr-inperson-warn {
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--warning-dark, #92400e);
  background: var(--warning-light, #fffbeb);
  border: 1px solid var(--warning, #f59e0b);
  border-radius: 8px;
  padding: 9px 11px;
}

.agr-padwrap { background: #fff; border-radius: 10px; padding: 4px; border: 1px solid var(--border, #e5e7eb); }

.agr-pad {
  display: block;
  width: 100%;
  height: 150px;
  border-radius: 7px;
  border: 1px dashed rgba(17, 24, 39, 0.22);
  touch-action: none;
  cursor: crosshair;
}

.agr-inperson-actions { display: flex; gap: 8px; }
.agr-inperson-actions .btn { flex: 1; min-height: 44px; }

.agr-footer { display: flex; gap: 8px; width: 100%; justify-content: flex-end; flex-wrap: wrap; }
.agr-footer .btn { min-height: 44px; }

.btn-wa { background: #25D366; color: #fff; border: none; display: inline-flex; align-items: center; gap: 6px; }
.btn-wa:hover { background: #1faa52; }

@media (min-width: 768px) {
  .agr-pad { height: 170px; }
}

/* ═══════════════════════════════════════════════════════════
   TASK CARD ACTION ROW
   Was four flex:1 buttons in one row with their styling inline.
   Measured at 375px: the row overflowed and ALL FOUR labels were
   clipped ("Agreeme", "gotiation H"), at 37px tall against the
   project's 44px minimum. Inline styles are why it broke — the
   row could not respond to width at all.

   Two per row on a phone, four across once there is room. Nothing
   is hidden behind a hover or a menu: on touch there is no cursor,
   so an affordance you cannot see is an affordance you do not have.
   Loads after css/app.css in the bundle, so these win on order.
   ═══════════════════════════════════════════════════════════ */

.neg-task-footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

@media (min-width: 600px) {
  .neg-task-footer { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ntf-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  min-width: 0;                 /* lets a long label shrink instead of pushing the grid */
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}

.ntf-btn .material-symbols-rounded { font-size: 18px; flex: 0 0 auto; }

/* A label that still will not fit gets an ellipsis, not a clip. */
.ntf-btn span:not(.material-symbols-rounded) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.ntf-btn:active { opacity: 0.85; }

/* One primary per card. Money is the action with consequences. */
.ntf-btn--pay {
  background: var(--success, #10b981);
  color: #fff;
}

/* The new setup action. Louder than the quiet pair so it is found,
   quieter than the solid green so it does not compete with it. */
.ntf-btn--agreement {
  background: var(--card, #fff);
  border-color: var(--primary, #0369A1);
  color: var(--primary, #0369A1);
}

.ntf-btn--wa {
  background: var(--card, #fff);
  border-color: #25D366;
  color: #1a9e4b;
}

/* Reference, reached for rarely — so it carries the least weight. */
.ntf-btn--history {
  background: var(--gray-50, #f3f4f6);
  color: var(--text-secondary);
}

/* ===== css/a11y.css ===== */
/* =====================================================
   SahiHisab — Accessibility & UX Enhancements
   Focus management, ARIA, keyboard, toast limits,
   dashboard grid classes, reduced motion
   ===================================================== */

/* ─── Focus Visible Ring ─────────────────────────────
   Show focus outlines only for keyboard navigation
   (not mouse clicks). Uses :focus-visible.
   ───────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 8px);
}

/* Remove default outlines (replaced by :focus-visible above) */
:focus:not(:focus-visible) {
  outline: none;
}

/* ─── Layout containers are focus DESTINATIONS, not controls ──────────
   <main id="app" tabindex="-1"> exists so skip-links and route changes can
   move focus into the page. It is not something you operate, and it is taller
   than the viewport — so the ring above painted a 2px line down both edges of
   the whole content column, which reads as a rendering bug rather than a focus
   indicator.

   Chrome matches :focus-visible here even on plain programmatic focus (an
   element that takes no keyboard input), so this fires whenever focus is
   restored to the container — e.g. after a modal closes.

   Dropping the ring is safe: screen readers still announce the container when
   focus lands, and the skip-link's own visible ring is unaffected. Every
   actual control keeps its ring from the rule above.
   ───────────────────────────────────────────────────────────────────── */
#app:focus,
#app:focus-visible,
.page-content:focus,
.page-content:focus-visible,
.main-content:focus,
.main-content:focus-visible {
  outline: none;
}

/* ─── Interactive Cards: role="button" styling ───────
   Stat cards, summary items that act as buttons need
   proper focus + keyboard feedback.
   ───────────────────────────────────────────────────── */
[role="button"] {
  cursor: pointer;
}

[role="button"]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-md, 12px);
}

.stat-card[role="button"]:focus-visible,
.aaj-summary-item[role="button"]:focus-visible {
  box-shadow: 0 0 0 3px var(--glow-primary, hsla(200, 90%, 50%, 0.15));
}

/* ─── Toast Container: Max Visible Limit ─────────────
   Cap at 3 visible toasts; oldest get pushed off.
   ───────────────────────────────────────────────────── */
#toastContainer {
  max-height: calc(3 * 60px + 2 * 8px);
  overflow: hidden;
}

#toastContainer .toast {
  cursor: pointer;
}

/* ─── Dashboard Grid: Replace Inline Styles ──────────
   Classes for the 2-column dashboard layout so CSS
   cascade can override on mobile without !important.
   ───────────────────────────────────────────────────── */
.dash-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-template-rows: auto auto;
  gap: var(--space-lg, 16px);
}

.dash-grid> :first-child {
  grid-row: 1 / 3;
}

.dash-grid> :nth-child(2) {
  grid-row: 1;
  grid-column: 2;
}

.dash-grid> :nth-child(3) {
  grid-row: 2;
  grid-column: 2;
}

@media (max-width: 768px) {
  .dash-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .dash-grid> :first-child {
    grid-row: auto;
  }

  .dash-grid> :nth-child(2) {
    grid-row: auto;
    grid-column: auto;
  }

  .dash-grid> :nth-child(3) {
    grid-row: auto;
    grid-column: auto;
  }
}

/* ─── Reduced Motion ─────────────────────────────────
   Respect user's prefers-reduced-motion setting.
   Disables animations but keeps functional transitions.
   ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .skeleton {
    animation: none !important;
  }
}

/* ─── Skip to Content Link ───────────────────────────
   Hidden link for screen readers, visible on focus.
   ───────────────────────────────────────────────────── */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 9999;
  padding: 12px 24px;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  border-radius: var(--radius-md, 12px);
  text-decoration: none;
  transition: top 0.2s;
}

.skip-to-content:focus {
  top: 16px;
}

/* ─── Modal Focus Trap Visual ────────────────────────
   Ensure modal content is clearly focused on open.
   ───────────────────────────────────────────────────── */
.modal-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ─── Touch Target Minimum ───────────────────────────
   WCAG 2.5.5: 44x44px minimum for touch targets.
   Only apply on touch devices to avoid desktop bloat.
   ───────────────────────────────────────────────────── */
@media (pointer: coarse) {
  .btn-sm {
    min-height: 44px;
    min-width: 44px;
  }

  .modal-close {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ─── Screen Reader Only ─────────────────────────────
   Utility class for visually hidden but accessible text.
   ───────────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── High Contrast Mode ────────────────────────────
   Respect OS-level forced-colors for accessibility.
   ───────────────────────────────────────────────────── */
@media (forced-colors: active) {

  .btn-primary,
  .btn-danger,
  .btn-success {
    border: 2px solid ButtonText;
  }

  .chip::before {
    forced-color-adjust: none;
  }

  .form-control:focus {
    outline: 2px solid Highlight;
  }
}

/* ===== css/feedback.css ===== */
/* =====================================================
   SahiHisab — Feedback Widget Styles
   Floating pill + expandable panel
   ===================================================== */

/* When any modal / bottom-sheet / sidebar is open app-wide, the feedback
   pill + panel must step out of the way. Covers SH.modal (body.modal-open),
   mobile sidebar (body.sidebar-open), and any consumer that flips either. */
body.modal-open .fb-pill,
body.modal-open .fb-panel,
body.sidebar-open .fb-pill,
body.sidebar-open .fb-panel {
  opacity: 0;
  transform: translateY(24px) scale(0.9);
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

/* ── Floating pill ── */
.fb-pill .nav-art {
  display: block;
  width: 100%;
  height: 100%;
  padding: 2px;
  box-sizing: border-box;
  object-fit: contain;
  /* The pill has no circle behind it any more, so the lift has to come from
     the art's own silhouette — a box-shadow would draw a circle around nothing. */
  filter: drop-shadow(0 3px 6px rgba(16, 42, 67, 0.28));
}

.fb-pill {
  position: fixed;
  bottom: 80px;
  right: 16px;
  z-index: 9998;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: transparent;   /* the 3D art is the button — no plate behind it */
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: none;
  transition: transform 0.2s, filter 0.2s;
}
.fb-pill:hover {
  transform: scale(1.08);
}
.fb-pill:hover .nav-art {
  filter: drop-shadow(0 5px 9px rgba(16, 42, 67, 0.36));
}
.fb-pill:active {
  transform: scale(0.95);
}

/* ── Streak badge on the pill ──────────────────────────────────────
   Moved off the Munim-ji character (2026-09-30). Visually identical to the
   old .munim-streak-badge so the streak reads as the same object that just
   changed home: same size, same gradient, same warm flame against it.
   .fb-pill is position:fixed, so this anchors to the pill itself. */
.fb-streak-badge {
  position: absolute;
  /* The pill lost its solid circle, so -4/-4 now lands the badge ON the
     artwork instead of on a plate. Pushed clear of the silhouette. */
  bottom: -6px;
  right: -9px;
  min-width: 22px;
  height: 20px;
  padding: 0 5px 0 4px;
  display: flex;
  align-items: center;
  gap: 1px;
  background: linear-gradient(135deg, var(--primary, #3b82f6) 0%, #6366f1 100%);
  color: #fff;
  border-radius: 10px;
  border: 1.5px solid var(--card, #fff);
  box-shadow: 0 2px 5px rgba(0,0,0,0.22);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
  animation: fbStreakPop 0.4s ease-out;
}
.fb-streak-badge .material-symbols-rounded {
  font-size: 0.85rem;
  line-height: 1;
  color: #fdba74;          /* warm fire accent — a flame should look like one */
}
.fb-streak-num { font-variant-numeric: tabular-nums; }
@keyframes fbStreakPop {
  0%   { transform: scale(0) rotate(-12deg); }
  60%  { transform: scale(1.15) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}

/* ── Panel ── */
.fb-panel {
  position: fixed;
  bottom: 80px;
  right: 16px;
  z-index: 9998;
  width: 280px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  padding: 14px;
  opacity: 0;
  transform: translateY(12px) scale(0.95);
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.fb-panel.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* ── Panel header ── */
.fb-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.fb-headline {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--foreground);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.fb-page-tag {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: rgba(8, 47, 73, 0.06);
  padding: 2px 8px;
  border-radius: 99px;
  margin-bottom: 10px;
}

/* ── Seedha-message skip link ── */
.fb-skip-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1px dashed var(--border);
  color: var(--text-secondary);
  font-size: 0.74rem;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 10px;
  margin: 2px 0 10px;
  width: 100%;
  justify-content: center;
  font-family: inherit;
  transition: all 0.15s;
}
.fb-skip-link:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(8, 145, 178, 0.04);
}

/* ── Page-topic chips ── */
.fb-topics {
  margin-bottom: 10px;
  animation: fbSlideIn 0.22s ease-out;
}
.fb-topics-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 8px;
  line-height: 1.4;
}
.fb-topics-hint {
  font-weight: 500;
  color: var(--text-secondary);
  font-size: 0.68rem;
}
.fb-topics-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fb-chip {
  padding: 5px 11px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 99px;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--foreground);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.fb-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.fb-chip.selected {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 2px 8px -2px rgba(8, 145, 178, 0.4);
}
@keyframes fbSlideIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Dark mode tweaks for new elements */
body.dark-mode .fb-page-tag {
  background: rgba(148,163,184,0.12);
}
body.dark-mode .fb-chip {
  background: rgba(148,163,184,0.08);
}
.fb-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
}
.fb-close:hover {
  background: var(--hover);
}

/* ── Emoji row ── */
.fb-emoji-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
}
.fb-emoji {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 10px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  cursor: pointer;
  transition: all 0.15s;
  min-width: 52px;
  min-height: 52px;
}
.fb-emoji:hover {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb, 59,130,246), 0.06);
}
.fb-emoji.selected {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb, 59,130,246), 0.1);
  transform: scale(1.08);
}
.fb-emoji-icon {
  font-size: 1.4rem;
  line-height: 1;
}

/* 3D faces instead of the native emoji glyph: the glyph rendered differently
   on every device (old Android draws a different face entirely), and people
   here pick the reaction by the FACE, not the label. 28px, same call as the
   header art — at the glyph's 22px the steam and the blush stop reading. */
.fb-emoji-img {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.fb-emoji-label {
  font-size: 0.65rem;
  color: var(--text-secondary);
  font-weight: 600;
  white-space: nowrap;
}

/* ── Textarea ── */
.fb-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 0.85rem;
  font-family: inherit;
  resize: none;
  outline: none;
  background: var(--card);
  color: var(--foreground);
  box-sizing: border-box;
  min-height: 56px;
  transition: border-color 0.2s;
}
.fb-textarea:focus {
  border-color: var(--primary);
}

/* ── Actions ── */
.fb-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.fb-submit {
  padding: 8px 20px;
  border: none;
  border-radius: 10px;
  background: var(--primary);
  color: white;
  font-weight: 700;
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
  min-height: 40px;
  transition: background 0.15s, transform 0.1s;
}
.fb-submit:hover {
  filter: brightness(1.1);
}
.fb-submit:active {
  transform: scale(0.97);
}
.fb-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Thank you ── */
.fb-thankyou {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 0;
  text-align: center;
}

/* ── Text area wrapper ── */
.fb-text-area {
  margin-bottom: 2px;
}

/* Desktop with the PWA install button up: WhatsApp moves to bottom 88 and
   would sit under the pill's default 80 — step the pill over it. */
body.pwa-installable .fb-pill { bottom: 144px; }

/* ── Call for Help bubble ── */
.fb-help-bubble {
  position: fixed;
  bottom: 138px;
  right: 16px;
  z-index: 9997;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  max-width: 220px;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.2s, transform 0.2s;
  animation: fbHelpPulse 0.4s ease-out;
}
@keyframes fbHelpPulse {
  0% { opacity: 0; transform: translateY(8px) scale(0.9); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.fb-help-close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: var(--gray-100, #f3f4f6);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.fb-help-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text-primary);
  padding-right: 14px;
}
.fb-help-link .material-symbols-rounded {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #22c55e;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fb-help-text {
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--text-secondary);
}
.fb-help-text strong {
  color: var(--primary);
  font-size: 0.82rem;
}
body.pwa-installable .fb-help-bubble { bottom: 202px; }

/* ── Mobile: pill above bottom nav ── */
@media (max-width: 768px) {
  /* Takes the slot the Munim character used to hold: one step above the
     WhatsApp floater (bottom 90 + 44 height + 12 gap = 146). At the old
     bottom:76 the two circles physically overlapped on every page where
     WhatsApp is visible. */
  .fb-pill {
    bottom: 146px;
    right: 12px;
    width: 44px;
    height: 44px;
  }
  /* PWA install button takes the bottom slot → WhatsApp moves to 150, so
     the pill steps up with it (150 + 44 + 12 = 206), same as Munim did. */
  body.pwa-installable .fb-pill { bottom: 206px; }
  .fb-panel {
    bottom: 76px;
    right: 8px;
    left: 8px;
    width: auto;
  }
  .fb-help-bubble {
    bottom: 202px;
    right: 12px;
    max-width: 200px;
  }
  body.pwa-installable .fb-help-bubble { bottom: 262px; }
}

/* ── Don't show when print ── */
@media print {
  .fb-pill, .fb-panel, .fb-help-bubble { display: none; }
}

/* ===== css/desktop.css ===== */
/* =====================================================
   SahiHisab — Desktop & Tablet Responsive Enhancements
   Optimized for 768px+ screens. Mobile-first overrides.
   ===================================================== */

/* ─────────────────────────────────────────────────────
   LARGE DESKTOP (1440px+)
   Wider sidebar, more content space
   ───────────────────────────────────────────────────── */
@media (min-width: 1440px) {
  :root {
    /* Wider sidebar via the shared token — hardcoded width/margin/left
       values here used to pin the content at 280px even when html.sb-mini
       collapsed the sidebar to 74px (dead strip on large screens). Every
       surface (sidebar, main-content, total-bar, wizard nav) tracks
       var(--sidebar-width), and html.sb-mini out-specifies :root. */
    --content-max-width: 1280px;
    --sidebar-width: 280px;
  }
}

/* ─────────────────────────────────────────────────────
   WIDE DESKTOP (1200px+)
   Content padding, typography, modal sizing
   ───────────────────────────────────────────────────── */
@media (min-width: 1200px) {
  .page-content {
    max-width: var(--content-max-width);
    padding: var(--space-3xl) var(--space-4xl);
  }

  .wizard-section-title {
    font-size: 1.4rem;
  }

  .stat-value {
    font-size: 1.5rem;
  }

  .header-left .page-title {
    font-size: 1.25rem;
  }

  .modal-panel {
    max-width: 580px;
  }
}


/* ─────────────────────────────────────────────────────
   DESKTOP (1024px+)
   Grid layouts, card widths
   ───────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .package-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }

  .addon-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
}


/* ─────────────────────────────────────────────────────
   TABLET+ (768px+)
   Quick create as centered modal, not bottom sheet
   ───────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .quick-create-sheet {
    left: 50%;
    right: auto;
    width: 420px;
    transform: translate(-50%, 100%);
    border-radius: var(--radius-xl, 20px);
    bottom: auto;
    top: 50%;
    margin-top: -140px;
  }

  .quick-create-sheet.open {
    transform: translate(-50%, 0);
  }
}


/* ─────────────────────────────────────────────────────
   HOVER STATES
   Desktop users expect hover feedback on interactive
   elements. Only applies when hover is supported.
   ───────────────────────────────────────────────────── */
@media (hover: hover) {

  /* Form controls — subtle border color on hover */
  .form-control:hover:not(:focus) {
    border-color: var(--primary-300);
  }

  /* Toggle switch hover hint */
  .toggle-switch:hover .toggle-track {
    box-shadow: 0 0 0 2px var(--primary-100);
  }

  /* Quick create action cards */
  .quick-create-action:hover {
    background: var(--primary-50);
    border-color: var(--primary-300);
    transform: translateY(-1px);
  }

  /* Bottom nav FAB — grow on hover */
  .bottom-nav-fab:hover {
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 6px 20px hsla(200, 80%, 44%, 0.4);
  }

  /* Wizard step items */
  .step-item:hover .step-number {
    background: var(--primary-200);
    color: var(--primary-700);
  }

  .step-item.active:hover .step-number {
    background: var(--primary);
    color: white;
  }

  .step-item.completed:hover .step-number {
    background: var(--success);
    color: white;
  }

  /* Plan card — lift effect */
  .plan-card:hover {
    border-color: var(--primary-300);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
  }

  /* Addon card — lift effect */
  .addon-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
  }

  /* Client row */
  .client-row:hover {
    background: var(--muted);
  }

  /* Calendar day */
  .calendar-day:hover {
    background: var(--primary-50);
  }

  /* Notification card */
  .notif-card:hover {
    background: var(--primary-50);
  }

  /* Search result row */
  .search-result-row:hover {
    background: var(--primary-50);
  }
}


/* ─────────────────────────────────────────────────────
   ORDERS PAGE — Desktop Grid & Enhancements
   ───────────────────────────────────────────────────── */

/* Skeleton loading animation */
@keyframes skeletonPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Desktop-only utility */
.desktop-only { display: none; }
@media (min-width: 768px) {
  .desktop-only { display: flex; }
}

/* Orders grid — 2 cols at 1024, 3 cols at 1200+ */
@media (min-width: 1024px) {
  .orders-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .orders-grid > .card.mb-md {
    margin-bottom: 0;
  }

  .orders-toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
  }

  .orders-search {
    flex: 1;
    max-width: 400px;
  }
}

@media (min-width: 1200px) {
  .orders-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .modal-panel {
    max-width: 700px;
  }
}

/* Card hover effect — desktop only */
@media (hover: hover) {
  .order-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
}


/* ─────────────────────────────────────────────────────
   CURSOR: POINTER
   Ensure all clickable elements show pointer cursor.
   ───────────────────────────────────────────────────── */
[role="button"],
[onclick],
.nav-item,
.bottom-nav-item,
.bottom-nav-fab,
.header-icon-btn,
.header-avatar,
.header-nav-btn:not(:disabled),
.modal-close,
.calendar-day,
.client-row,
.stat-card[role="button"],
.quick-action-btn,
.quick-create-action,
.package-card,
.addon-card,
.plan-card,
.step-item,
.toggle-switch {
  cursor: pointer;
}

/* ===== css/walk-in-orders.css ===== */
/* =====================================================
   SahiHisab — Walk-in Orders (Seedhi Booking) Styles
   Matches Pencil design: List View + Grid View
   ===================================================== */

/* ─── Page Header ─────────────────────────────────── */
.wi-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 8px 20px 12px;
}

.wi-header-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wi-header-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--foreground);
}

.wi-header-subtitle {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.wi-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ─── View Toggle (List/Grid) ─────────────────────── */
/* Quick Order mode joins the header group instead of sitting loose in the page
   body as a checkbox. Same 44px height as the view toggle and the + button so
   the three read as one control strip. Label drops below 768px, where the
   title block already competes for the row. */
.wi-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  background: var(--muted);
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
  -webkit-tap-highlight-color: transparent;
}

.wi-mode-toggle .material-symbols-rounded { font-size: 1.15rem; }

.wi-mode-toggle[aria-pressed="true"] {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border-color: color-mix(in srgb, var(--primary) 32%, transparent);
  color: var(--primary);
}

@media (hover: hover) {
  .wi-mode-toggle:hover { color: var(--primary); }
}

.wi-mode-toggle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.wi-view-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--muted);
  border-radius: 12px;
  padding: 4px;
  height: 44px;
}

.wi-view-toggle-btn {
  width: 38px;
  height: 36px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 150ms ease;
}

.wi-view-toggle-btn.active {
  background: var(--primary);
  color: #fff;
}

.wi-view-toggle-btn .material-symbols-rounded {
  font-size: 1rem;
}

/* ─── Add FAB (header) ────────────────────────────── */
.wi-add-fab {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--primary);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.wi-add-fab:active {
  transform: scale(0.95);
}

.wi-add-fab .material-symbols-rounded {
  font-size: 1.25rem;
}

/* ─── Filter Pills ────────────────────────────────── */
.wi-filters {
  display: flex;
  gap: 8px;
  padding: 8px 20px 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  mask-image: linear-gradient(to right, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, black 92%, transparent);
}

.wi-filters::-webkit-scrollbar {
  display: none;
}

.wi-filter-pill {
  height: 36px;
  border-radius: 18px;
  padding: 0 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 150ms ease;
  display: flex;
  align-items: center;
}

.wi-filter-pill.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  font-weight: 600;
}

/* ─── Search row: input + Type / Status filters ─────
   The search input used to own this row by itself, leaving roughly two
   thirds of it empty on a desktop — while the only order-TYPE filter in the
   app sat in the ≥1120px table header, out of reach on a phone, in grid
   view and in a narrow window. The two dropdowns fill that space.

   Below 560px the row wraps: search on its own line, the two filters
   splitting the next one. Both keep the 48px height of .form-control, so
   the row reads as one control strip and every target clears 44px. */
.wi-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  padding: 0 4px;
}

.wi-toolbar-search {
  position: relative;
  flex: 1 1 240px;
  min-width: 0;
}

.wi-toolbar-search-ico {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 1.15rem;
  pointer-events: none;
}

.wi-toolbar-clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1;
  padding: 4px;
  cursor: pointer;
}

.wi-sf {
  position: relative;
  flex: 0 0 auto;
}

.wi-sf-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 48px;
  max-width: 180px;
  padding: 0 8px 0 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}

.wi-sf-btn:hover {
  border-color: var(--primary);
}

.wi-sf-lbl {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wi-sf-cv {
  font-size: 1.05rem;
  opacity: 0.6;
  flex-shrink: 0;
}

/* A persisted filter is still on after a refresh, so it must never be on
   without saying so: the button wears the chosen value and the brand colour. */
.wi-sf.is-on .wi-sf-btn {
  border-color: var(--primary);
  background: var(--primary-50);
  color: var(--primary);
}

.wi-sf.is-on .wi-sf-cv {
  opacity: 1;
}

.wi-sf-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  max-height: 320px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
}

.wi-sf-opt {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}

.wi-sf-opt:hover {
  background: var(--gray-50);
}

.wi-sf-opt.is-on {
  background: var(--primary-50);
  color: var(--primary);
}

@media (max-width: 560px) {
  .wi-toolbar {
    padding: 0 12px;
    gap: 6px;
  }

  .wi-toolbar-search {
    flex: 1 1 100%;
  }

  /* Two equal halves of the second line — a 170px-wide dropdown next to a
     shrunken search box is unusable at 375px. */
  .wi-sf {
    flex: 1 1 0;
    min-width: 0;
  }

  .wi-sf-btn {
    width: 100%;
    max-width: none;
  }

  .wi-sf-cv {
    margin-left: auto;
  }

  .wi-sf-menu {
    left: 0;
    right: 0;
    min-width: 0;
  }
}

/* ─── Orders Container ────────────────────────────── */
.wi-orders-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 16px 16px;
}

.wi-orders-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 8px 16px 16px;
}

/* ─── List Card ───────────────────────────────────── */
.wi-card {
  background: var(--card);
  border-radius: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform 100ms ease, box-shadow 150ms ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wi-card:active {
  transform: scale(0.985);
}

.wi-card.overdue {
  border-color: hsla(0, 72%, 51%, 0.19);
  box-shadow: -3px 0 0 0 var(--destructive);
}

/* Card Top Row */
.wi-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wi-card-type-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wi-card-type-icon .material-symbols-rounded {
  font-size: 1.25rem;
}

.wi-card-info {
  flex: 1;
  min-width: 0;
}

.wi-card-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wi-card-name .material-symbols-rounded {
  font-size: 0.85rem;
  color: var(--warning);
  vertical-align: middle;
  margin-left: 4px;
}

.wi-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
}

.wi-card-type-label {
  color: var(--text-secondary);
}

.wi-card-order-num {
  color: var(--text-muted);
}

/* Status Badge */
.wi-status-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
}

.wi-status-badge.pending {
  background: #FEF3C7;
  color: #D97706;
}

.wi-status-badge.in_progress {
  background: var(--primary-50);
  color: var(--primary);
}

.wi-status-badge.ready {
  background: #DCFCE7;
  color: #16A34A;
}

.wi-status-badge.delivered {
  background: var(--primary-50);
  color: var(--primary);
}

.wi-status-badge.cancelled {
  background: var(--danger-light);
  color: var(--destructive);
}

/* Card Bottom Row (Payment) */
.wi-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wi-card-total {
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--foreground);
}

.wi-card-payment-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wi-card-paid {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  color: #22C55E;
}

.wi-card-due {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: #EF4444;
}

.wi-card-paid-full {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: #22C55E;
}

.wi-card-waived {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: #F59E0B;
}

/* Card Date/Overdue Row */
.wi-card-date {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.wi-card-date .material-symbols-rounded {
  font-size: 0.82rem;
}

.wi-card-date.overdue {
  color: #EF4444;
  font-weight: 600;
}

/* ─── Grid Card (compact) ─────────────────────────── */
.wi-grid-card {
  background: var(--card);
  border-radius: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform 100ms ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wi-grid-card:active {
  transform: scale(0.97);
}

.wi-grid-card.overdue {
  border-color: hsla(0, 72%, 51%, 0.19);
  box-shadow: -3px 0 0 0 var(--destructive);
}

.wi-grid-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wi-grid-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wi-grid-card-icon .material-symbols-rounded {
  font-size: 1rem;
}

.wi-grid-card .wi-status-badge {
  height: 22px;
  padding: 0 8px;
  border-radius: 11px;
  font-size: 0.69rem;
}

.wi-grid-card-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wi-grid-card-type {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.wi-grid-card-divider {
  height: 1px;
  background: var(--muted);
  width: 100%;
}

.wi-grid-card-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wi-grid-card-amount {
  font-family: 'Outfit', sans-serif;
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--foreground);
}

.wi-grid-card-due-tag {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.69rem;
  font-weight: 600;
  color: #EF4444;
}

.wi-grid-card-paid-tag {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.69rem;
  font-weight: 700;
  color: #22C55E;
}

.wi-grid-card-waived-tag {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.69rem;
  font-weight: 600;
  color: #F59E0B;
}

/* Invoice number + richer card info */
.wi-grid-card-invoice {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 1px;
}

.wi-grid-card-pay-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.wi-grid-card-paid-amt {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.69rem;
  font-weight: 600;
  color: #22C55E;
}

.wi-grid-card .wi-card-date {
  margin-top: 8px;
}

.wi-grid-card-invoice-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 1px;
}

.wi-grid-card-storage {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: 58%;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.7rem;
  color: var(--text-secondary);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.wi-grid-card-storage .material-symbols-rounded {
  font-size: 0.9rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ─── Dates row (3-up on desktop, stacked on mobile) ── */
.wi-dates-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.wi-dates-grid .form-group {
  margin-bottom: 0;
}

@media (min-width: 600px) {
  .wi-dates-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ─── Empty State ─────────────────────────────────── */
.wi-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  color: var(--text-secondary);
}

.wi-empty .material-symbols-rounded {
  font-size: 3rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.wi-empty p {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
}

/* Keep the CTA's own icon small — the big .wi-empty icon rule must not bleed into it */
.wi-empty .empty-state-cta .material-symbols-rounded {
  font-size: 1.1rem;
  margin-bottom: 0;
}

/* First-run empty state — mirrors Clients .cl-empty / Quotations .qt-activate pattern */
.wi-empty-first { min-height: min(58vh, 480px); padding: 24px 16px; }
.wi-empty-first .wi-empty-ico {
  width: 64px; height: 64px; border-radius: 20px;
  background: linear-gradient(140deg, rgba(14,165,233,.14), rgba(20,184,166,.12));
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.wi-empty-first .wi-empty-ico .material-symbols-rounded { font-size: 2rem; color: #0EA5E9; margin-bottom: 0; }
.wi-empty-title {
  font-family: 'DM Sans', sans-serif; font-size: 1.25rem; font-weight: 800;
  color: var(--text-primary); letter-spacing: -0.02em; line-height: 1.3; margin: 0; max-width: 320px;
}
.wi-empty-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; max-width: 300px; min-height: 50px; margin-top: 24px; padding: 13px 28px;
  font-family: 'DM Sans', sans-serif; font-size: 1rem; font-weight: 700; color: #fff; cursor: pointer;
  border: none; border-radius: var(--radius-full);
  background: linear-gradient(135deg, hsl(200, 85%, 50%), hsl(204, 82%, 40%));
  box-shadow: 0 10px 24px -8px hsla(202, 85%, 40%, .55), inset 0 1px 0 hsla(0, 0%, 100%, .22);
  transition: transform .15s ease, box-shadow .2s ease;
}
.wi-empty-cta:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -8px hsla(202, 85%, 40%, .6), inset 0 1px 0 hsla(0, 0%, 100%, .22); }
.wi-empty-cta:active { transform: translateY(0); }
.wi-empty-cta .material-symbols-rounded { font-size: 1.2rem; color: #fff; margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  .wi-empty-cta { transition: none; }
  .wi-empty-cta:hover { transform: none; }
}

/* Clear search/filter button (shown on the "no match" empty state) */
.wi-empty-clear {
  margin-top: 14px;
  padding: 9px 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 150ms ease;
}

.wi-empty-clear:hover {
  background: var(--muted);
}

/* ─── Order Type grid: responsive columns — ~4/row mobile, exactly 6/row desktop ─── */
body .wi-type-grid {
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}
@media (min-width: 1024px) {
  body .wi-type-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* ─── Step 0 density: SQUARE type cards, content centered + filled ─── */
body .wi-type-card {
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 140px;
  justify-self: center;
  justify-content: center;
  align-items: center;
  min-height: 0;
  padding: 10px;
  gap: 10px;
}

body .wi-type-card .wi-type-icon.material-symbols-rounded {
  font-size: 32px;
}

body .wi-type-card .wi-type-label {
  font-size: 13px;
  line-height: 1.2;
}

/* During the create wizard the floating tab bar is hidden, so drop the Next bar
   to the true bottom (it was raised above the tab bar) + handle the safe area. */
body.wizard-active .wi-wizard-nav {
  bottom: 0;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}

/* Hide the floating FABs (install / WhatsApp / Munim) during the create wizard so
   they don't overlap the Order Type cards / Next bar. (Mirrors the quotation
   wizard's :has(.wizard-wrap) rule, but for the walk-in wizard-active state.) */
body.wizard-active .pwa-install-btn,
body.wizard-active .sh-wa-float,
body.wizard-active .munim-root {
  display: none;
}
/* ── Card-level voice notes (play straight from list/grid) ────────────── */
.wi-card-voice {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.wi-voice-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 34px;
  padding: 5px 10px 5px 6px;
  border: 1px solid var(--primary);
  border-radius: 18px;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
}
.wi-voice-chip:active {
  background: color-mix(in srgb, var(--primary) 16%, transparent);
}
.wi-voice-chip-icon {
  font-size: 18px;
}
.wi-voice-chip-dur {
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
  font-weight: 500;
}

/* ── Card-level reference thumbnails (tap to open full-size) ──────────── */
.wi-card-refs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.wi-ref-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--card);
  text-decoration: none;
  flex-shrink: 0;
}
.wi-ref-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wi-ref-thumb.pdf {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
}
.wi-ref-thumb.pdf .material-symbols-rounded {
  font-size: 20px;
}
.wi-ref-more {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 0 4px;
}

/* ── List-card storage chip (parity with grid card) ──────────────────── */
.wi-card-storage {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 3px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.wi-card-storage .material-symbols-rounded {
  font-size: 0.9rem;
  flex-shrink: 0;
}

/* ── The studio's own name for the job, on list and grid cards ───────── */
/* Reads stronger than the storage line: it is how a card is recognised a
   month later, when the order number means nothing to anyone. */
.wi-card-project {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 3px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.wi-card-project .material-symbols-rounded {
  font-size: 0.9rem;
  flex-shrink: 0;
}

/* ── Compact the Details-step storage card ───────────────────────────── */
.wi-storage-section .card-body {
  padding: 12px 14px;
}
.wi-storage-section .form-label {
  margin-bottom: 8px;
}
.wi-storage-section .wi-store-row:last-child {
  margin-bottom: 0;
}

/* ── Details step: horizontal storage + side-by-side voice/reference ──── */
.wi-store-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px 16px;
}
.wi-attach-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 12px;
}
.wi-attach-grid > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
@media (min-width: 640px) {
  .wi-store-grid {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }
  .wi-attach-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

/* ─── Active-card cue: the card you're typing in glows, others recede ───
   Low-literacy users lose track of "where am I" on the merged Order+Payment
   step — the focused card gets a primary border + soft glow via :focus-within
   (pure CSS, works for every input/select/textarea/button inside). */
body.wizard-active #wiStepContent .card {
  transition: border-color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}
body.wizard-active #wiStepContent .card:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-50, rgba(59, 130, 246, 0.18)), 0 4px 18px rgba(0, 0, 0, 0.10);
}
/* Gently recede the cards you're NOT in (only while some card has focus) */
body.wizard-active #wiStepContent:has(.card:focus-within) .card:not(:focus-within) {
  opacity: 0.72;
}

/* ─── One-tap date suggestion chips (Aaj / Kal / +3 din / aksar) ─── */
.wi-date-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}
.wi-date-chip {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 30px;
  line-height: 1.2;
  transition: all 0.12s ease;
}
.wi-date-chip.hot {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-50, rgba(59, 130, 246, 0.08));
}
.wi-date-chip.sel,
.wi-date-chip.sel.hot {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* ══ Live per-input progress meter (gated sh_wi_livemeter) — 2026-07-10 ══ */
/* Sticky under the app header (page-level scroll; .app-header is sticky top:0,
   so we pin just below it). Opaque bg + hairline so content scrolls cleanly under. */
.wi-lm-wrap {
  position: sticky;
  top: var(--header-height, 56px);
  z-index: 15;
  margin: 0 0 16px;
  padding: 12px 0 14px;
  /* Page-coloured, not frosted white: the 72%-white glass read as a mismatched
     band against the page background at rest. Solid --background = invisible
     when unscrolled AND a clean cover while sticky. Dark-mode safe. */
  background: var(--background, hsl(200, 40%, 96%));
}
.wi-lm-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.wi-lm-l { display: flex; align-items: center; gap: 6px; min-width: 0; }
.wi-lm-l .material-symbols-rounded { font-size: 1.1rem; color: var(--primary); }
.wi-lm-name { font-size: 0.86rem; font-weight: 700; color: var(--primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wi-lm-r { display: flex; align-items: baseline; gap: 6px; flex-shrink: 0; }
.wi-lm-pct { font-size: 0.95rem; font-weight: 800; color: var(--success); font-variant-numeric: tabular-nums; }
.wi-lm-cnt { font-size: 0.72rem; color: var(--text-muted); }
.wi-lm-track { position: relative; height: 10px; border-radius: 999px; background: var(--gray-100, #f3f4f6); border: 1px solid var(--border); overflow: hidden; }
.wi-lm-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; transition: width 0.45s cubic-bezier(.22,1.2,.36,1); }
.wi-lm-fill::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 26px; border-radius: 999px; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 60%, rgba(255,255,255,0) 100%); opacity: 0; }
.wi-lm-fill.wi-lm-sprint::after { animation: wiLmSprint 0.5s ease-out; }
@keyframes wiLmSprint { 0% { opacity: 0; transform: translateX(-4px); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateX(8px); } }
.wi-lm-track.wi-lm-done { animation: wiLmDone 0.6s ease-out; }
@keyframes wiLmDone { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.45); } 100% { box-shadow: 0 0 0 9px rgba(22,163,74,0); } }
/* guiding hint pill */
.wi-lm-hint { display: inline-flex; align-items: center; gap: 7px; margin-top: 9px; padding: 6px 11px 6px 8px; border-radius: 9px; background: var(--primary-50); border: 1px solid var(--primary-100); font-size: 0.78rem; color: var(--text-secondary, #334155); max-width: 100%; }
.wi-lm-hint:empty { display: none; }
.wi-lm-hint .material-symbols-rounded { font-size: 1.05rem; color: var(--primary); flex-shrink: 0; }
.wi-lm-htxt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wi-lm-hint b { font-weight: 700; color: var(--text-primary, #0f172a); }
.wi-lm-eg { color: var(--text-secondary, #64748b); font-weight: 500; margin-left: 4px; }
.wi-lm-hint.done { background: var(--success-light); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.wi-lm-hint.done .material-symbols-rounded { color: var(--success); }
/* Green bold on a green pill measured 2.09:1 in light mode — the "Ho gaya!"
   line was the least readable text in the wizard. Darkened for light; dark
   mode keeps the plain token, which already measures 6.21:1 there. */
.wi-lm-hint.done b { color: color-mix(in srgb, var(--success) 58%, black); }

:root.dark-mode .wi-lm-hint.done b,
body.dark-mode .wi-lm-hint.done b { color: var(--success); }

@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) .wi-lm-hint.done b { color: var(--success); }
}
.wi-lm-hint.pulse { animation: wiLmPulse 1.3s ease-in-out infinite; }
@keyframes wiLmPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); } 50% { box-shadow: 0 0 0 4px rgba(37,99,235,.12); } }
/* soft, non-shaming validation — the red outline is applied via inline style
   in JS (so it beats the field's own inline border without needing !important). */
@media (prefers-reduced-motion: reduce) {
  .wi-lm-fill { transition: width 0.12s linear; }
  .wi-lm-fill.wi-lm-sprint::after, .wi-lm-track.wi-lm-done, .wi-lm-hint.pulse { animation: none; }
}


/* ═══ Chip overflow — "More" + its sheet ════════════════════════════════
   Lists over four options show the studio's three most-used chips and park
   the rest here. The chip inherits .wi-chip, so sizing, tap target and the
   coarse-pointer bump all come along; only the affordance differs — a caret
   instead of a value, and the muted treatment of a navigation control rather
   than a choice. */

.wi-chip-more {
  color: var(--text-secondary);
  gap: 2px;
}

.wi-chip-more:hover { color: var(--primary); }

.wi-chip-morecaret {
  font-size: 1.05rem;
  line-height: 1;
}

/* The sheet. Deliberately NOT the native <select> popup: a studio with no
   usage history yet lands here on most fields, so it has to be a first-class
   list — full-width rows, real tap targets, and a filter once it gets long. */
.wi-more-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 58vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.wi-more-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 0;
  border-radius: 12px;
  background: none;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.wi-more-row + .wi-more-row { border-top: 1px solid var(--border-light); border-radius: 0; }
.wi-more-row:active { background: var(--muted); }

@media (hover: hover) {
  .wi-more-row:hover { background: var(--muted); }
}

.wi-more-row:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.wi-more-row.on {
  color: var(--primary);
  font-weight: 700;
}

.wi-more-row .material-symbols-rounded {
  font-size: 20px;
  color: var(--primary);
  flex-shrink: 0;
}

.wi-more-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }


/* ═══ Number stepper ════════════════════════════════════════════════════
   Number fields are taps, not typing — typing a value costs this audience
   real seconds. A slider was the alternative and is wrong for quantity: you
   cannot reliably land on 7, and there is no numeric certainty. The field
   stays typeable in the middle so a large quantity is one entry, not twenty
   taps. */

.wi-step {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  overflow: hidden;
}

.wi-step-btn {
  flex: 0 0 52px;
  display: grid;
  place-items: center;
  border: 0;
  background: var(--muted);
  color: var(--text-primary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 140ms ease, color 140ms ease;
}

.wi-step-btn .material-symbols-rounded { font-size: 20px; }
.wi-step-btn:active { background: var(--border); }

.wi-step-btn:disabled {
  color: var(--text-muted);
  cursor: default;
  opacity: 0.45;
}

.wi-step-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

/* The value sits flush between the two controls — no inner border, no radius,
   so the three read as one object rather than three. */
.wi-step-val.form-control {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  border: 0;
  border-radius: 0;
  background: none;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: none;
}

.wi-step-val.form-control:focus {
  box-shadow: none;
  background: var(--primary-50);
}

/* Chrome/Safari spinners would sit next to our own buttons. */
.wi-step-val::-webkit-outer-spin-button,
.wi-step-val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wi-step-val { -moz-appearance: textfield; appearance: textfield; }

@media (prefers-reduced-motion: reduce) {
  .wi-step-btn { transition: none; }
}

@media (max-width: 767px) {
  /* Icon-only, and the strip tightens up: adding a third control here cost the
     title the 6px it needed to stay on one line at 375px. Heights stay 44px. */
  .wi-mode-toggle { padding: 0 9px; }
  .wi-mode-toggle-label { display: none; }
  .wi-header-actions { gap: 6px; }
  .wi-view-toggle { padding: 3px; gap: 0; }
}

/* Below 375 (Galaxy-class 360px) the third header control costs the title the
   room it needs, and it wrapped to two lines. Gated at 370 so the 375px base
   keeps the full 1.35rem. 320px wrapped before this change too. */
@media (max-width: 370px) {
  .wi-header-title { font-size: 1.18rem; }
}

/* ─── Mobile grid-card aesthetic pass (2026-08-26) ──────────────
   The 44px coarse-pointer chips swamped the narrow 2-up cards: giant
   stacked pills, a hero-sized status circle, and wrapping mono order
   numbers. Inside grid cards everything scales to card size. */
@media (max-width: 768px) {
  .wi-card .wi-card-actions,
  .wi-grid-card .wi-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
  }

  .wi-card .wi-repeat-btn,
  .wi-grid-card .wi-repeat-btn,
  .wi-card .wi-bill-btn,
  .wi-grid-card .wi-bill-btn {
    min-height: 36px;
    padding: 5px 11px;
    font-size: 0.7rem;
    margin-top: 0;
  }

  .wi-card .wi-repeat-btn .material-symbols-rounded,
  .wi-grid-card .wi-repeat-btn .material-symbols-rounded,
  .wi-card .wi-bill-btn .material-symbols-rounded,
  .wi-grid-card .wi-bill-btn .material-symbols-rounded {
    font-size: 0.9rem;
  }

  .wi-card .wi-status-next,
  .wi-grid-card .wi-status-next {
    min-height: 36px;
    padding: 0 11px 0 8px;
    font-size: 0.68rem;
  }

  .wi-card .wi-status-next .material-symbols-rounded,
  .wi-grid-card .wi-status-next .material-symbols-rounded {
    font-size: 1.05rem;
  }

  .wi-card .wi-grid-card-invoice-row,
  .wi-grid-card .wi-grid-card-invoice-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }

  .wi-card .wi-card-order-num,
  .wi-card .wi-grid-card-invoice,
  .wi-grid-card .wi-grid-card-invoice,
  .wi-card .wi-grid-card-storage,
  .wi-grid-card .wi-grid-card-storage {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    font-size: 0.66rem;
  }

  .wi-card .wi-card-date,
  .wi-grid-card .wi-card-date {
    font-size: 0.68rem;
  }
}

/* ─── Card payment meter (2026-08-27) — total | bar | due/paid ─── */
.wi-pay-meter {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.wi-pay-total {
  flex-shrink: 0;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.wi-pay-track {
  flex: 1;
  min-width: 24px;
  height: 6px;
  border-radius: 4px;
  background: var(--gray-100, #eef2f6);
  overflow: hidden;
}

.wi-pay-fill {
  display: block;
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.wi-pay-state {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.wi-pay-state.due { color: var(--destructive, #dc2626); }
.wi-pay-state.ok { color: var(--success, #16a34a); }
.wi-pay-state.void { color: var(--text-muted); font-weight: 600; }

.wi-pay-sub {
  font-size: 0.68rem;
  color: var(--text-secondary);
  margin-top: 3px;
}

/* ===== css/walk-in-orders-fix.css ===== */
/* =====================================================
   SahiHisab — Walk-in Orders Mobile Fixes
   Targeted fixes for phone-sized screens
   ===================================================== */

/* ─── Header: tighter padding on mobile ────────────── */
@media (max-width: 480px) {
  body .wi-header {
    padding: 8px 14px 10px;
    align-items: center;
  }

  body .wi-header-title {
    font-size: 1.15rem;
  }

  body .wi-header-subtitle {
    font-size: 0.7rem;
  }

  body .wi-header-actions {
    gap: 8px;
  }

  body .wi-add-fab {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  body .wi-add-fab .material-symbols-rounded {
    font-size: 1.1rem;
  }
}

/* ─── Filter Pills: tighter on small screens ──────── */
@media (max-width: 480px) {
  body .wi-filters {
    padding: 6px 14px 10px;
    gap: 6px;
  }

  body .wi-filter-pill {
    min-height: 44px;
    padding: 0 12px;
    font-size: 1rem;
  }
}

/* ─── List Cards: compact on mobile ───────────────── */
@media (max-width: 480px) {
  body .wi-orders-list {
    padding: 6px 12px 16px;
    gap: 8px;
  }

  body .wi-card {
    padding: 12px;
    border-radius: 12px;
    gap: 8px;
  }

  body .wi-card-type-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
  }

  body .wi-card-type-icon .material-symbols-rounded {
    font-size: 1.1rem;
  }

  body .wi-card-name {
    font-size: 0.82rem;
  }

  body .wi-card-meta {
    font-size: 0.72rem;
  }

  body .wi-status-badge {
    height: 22px;
    padding: 0 8px;
    font-size: 0.69rem;
  }

  body .wi-card-total {
    font-size: 0.92rem;
  }

  body .wi-card-paid,
  body .wi-card-due,
  body .wi-card-paid-full {
    font-size: 0.7rem;
  }

  body .wi-card-payment-info {
    gap: 6px;
  }

  body .wi-card-date {
    font-size: 0.69rem;
  }

  body .wi-card-date .material-symbols-rounded {
    font-size: 0.75rem;
  }
}

/* ─── Grid Cards: single column on tiny phones ────── */
@media (max-width: 380px) {
  body .wi-orders-grid {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 6px 12px 16px;
  }
}

@media (min-width: 381px) and (max-width: 480px) {
  body .wi-orders-grid {
    gap: 8px;
    padding: 6px 12px 16px;
  }

  body .wi-grid-card {
    padding: 10px;
    border-radius: 12px;
    gap: 8px;
  }

  body .wi-grid-card-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
  }

  body .wi-grid-card-icon .material-symbols-rounded {
    font-size: 0.9rem;
  }

  body .wi-grid-card .wi-status-badge {
    height: 20px;
    padding: 0 6px;
    font-size: 0.65rem;
  }

  body .wi-grid-card-name {
    font-size: 0.78rem;
  }

  body .wi-grid-card-type {
    font-size: 0.69rem;
  }

  body .wi-grid-card-amount {
    font-size: 0.85rem;
  }

  body .wi-grid-card-due-tag,
  body .wi-grid-card-paid-tag {
    font-size: 0.65rem;
  }
}

/* ─── Wizard Stepper: 7 steps fit on mobile ────────── */
@media (max-width: 480px) {

  /* Ensure stepper scrolls smoothly with active step visible */
  body .wizard-stepper {
    scroll-snap-type: x proximity;
    scroll-padding: 0 12px;
  }

  body .step-item {
    scroll-snap-align: center;
    padding: 2px;
  }

  body .step-number {
    width: 22px;
    height: 22px;
  }

  body .step-number .material-symbols-rounded {
    font-size: 0.72rem;
  }

  body .step-connector {
    width: 10px;
    margin: 0 1px;
  }
}

/* ─── Wizard Nav: proper spacing above bottom nav ──── */
@media (max-width: 768px) {
  body .wi-wizard-nav {
    padding: 10px 14px calc(env(safe-area-inset-bottom, 0px) + 10px);
  }

  body .wi-wizard-nav .btn {
    font-size: 1rem;
    min-height: 44px;
  }
}

/* ─── Type Grid: compact cards on mobile ──────────── */
@media (max-width: 480px) {
  body .wi-type-card {
    padding: 10px 6px;
    min-width: 78px;
  }

  body .wi-type-card .material-symbols-rounded {
    font-size: 1.25rem;
  }

  body .wi-type-card > div {
    font-size: 0.72rem;
  }
}

/* ─── Wizard Content: enough bottom padding ────────── */
@media (max-width: 768px) {
  body #wiStepContent {
    padding-bottom: 140px;
  }
}

/* ─── Spec Fields: tighter layout on mobile ────────── */
@media (max-width: 480px) {

  /* Multiselect chips smaller */
  body .wi-multiselect label {
    padding: 5px 10px;
    font-size: 0.8rem;
  }

  /* Item row grid: better columns */
  body .wi-item-row {
    padding: 8px;
    margin-bottom: 6px;
  }
}

/* ─── FB Package Cards: responsive grid ────────────── */
@media (max-width: 480px) {
  body #fbPackageGrid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body #fbPackageGrid .package-card {
    padding: 12px;
  }
}

/* ─── FB Addon Cards: responsive grid ──────────────── */
@media (max-width: 480px) {
  body #fbAddonGrid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  body .fb-addon-card {
    padding: 10px;
  }
}

/* ─── FB Expenses: input widths on mobile ──────────── */
@media (max-width: 480px) {
  body .fb-expense-input {
    width: 100px;
    min-height: 44px;
    font-size: 1rem;
  }
}

/* ─── FB Payment: delivery days grid ───────────────── */
@media (max-width: 380px) {

  /* On very small phones, stack delivery days 2+1 */
  body #wiStepContent [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr;
  }
}

/* ─── FB Review: compact pricing section ───────────── */
@media (max-width: 480px) {

  /* Delivery timeline badges */
  body #wiStepContent .review-section+div[style*="display:flex;gap:8px"] > div {
    padding: 6px 8px;
    font-size: 0.72rem;
  }
}

/* ─── Detail Modal: action buttons on mobile ──────── */
@media (max-width: 480px) {
  body .wi-detail-actions {
    gap: 6px;
  }

  body .wi-detail-actions .btn {
    font-size: 1rem;
    min-height: 44px;
    padding: 6px 8px;
  }
}

/* ─── Empty State: compact on mobile ──────────────── */
@media (max-width: 480px) {
  body .wi-empty {
    padding: 36px 20px;
  }

  body .wi-empty .material-symbols-rounded {
    font-size: 2.5rem;
    margin-bottom: 8px;
  }

  body .wi-empty p {
    font-size: 0.82rem;
  }
}

/* ─── Pagination: compact on mobile ───────────────── */
@media (max-width: 480px) {
  body #walkInPagination {
    padding: 0 12px 16px;
  }
}

/* ─── Mobile overflow containment ────────────────── */
@media (max-width: 768px) {

  /* Walk-in header — prevent actions from pushing wider */
  body .wi-header {
    max-width: 100%;
    overflow: hidden;
  }

  /* Walk-in filters — already overflow-x:auto, ensure mask doesn't escape */
  body .wi-filters {
    max-width: 100%;
  }

  /* Walk-in cards — truncate long names */
  body .wi-card-info {
    overflow: hidden;
  }

  /* Grid cards — prevent overflow */
  body .wi-grid-card {
    overflow: hidden;
  }
}

@media (max-width: 480px) {

  /* Card bottom row — truncate long payment text */
  body .wi-card-total {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
/* ─── Grid Cards: three across on a desktop ─────────
   The grid was hard-wired to two columns at every width above 380px, so a
   1900px screen showed two cards and a lot of nothing. Three from 1200px —
   the same breakpoint the bookings grid uses, so the two pages agree.
   At 1200px that is ~296px per card (1200 − 260px sidebar − padding ÷ 3),
   which still fits the widest top row ("Given to Customer" + badge). */
@media (min-width: 1200px) {
  body .wi-orders-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
}

/* ─── Status dropdown on order cards ────────────────
   Replaces the badge + "next step" button pair. The badge is now the trigger,
   so the card shows the state once instead of twice, and every step is
   reachable — the old button only moved forward. */
.wi-stat-dd { position: relative; display: inline-flex; }

.wi-stat-dd-btn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 0;
  font: inherit;
  cursor: pointer;
  min-height: 32px;
}
.wi-stat-dd-cv { font-size: 1rem; opacity: 0.75; }

.wi-stat-dd-panel {
  position: absolute;
  z-index: 8;
  top: calc(100% + 4px);
  right: 0;
  min-width: 172px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card, #fff);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
}

.wi-stat-dd-opt {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.wi-stat-dd-opt .material-symbols-rounded { font-size: 1.05rem; color: var(--text-secondary); }
.wi-stat-dd-opt:not(:disabled):hover { background: var(--gray-50); }
/* The step it is already on: shown so the order is readable, not tappable. */
.wi-stat-dd-opt.is-on { background: var(--primary-50, #E0F2FE); color: var(--primary); cursor: default; }
.wi-stat-dd-opt.is-on .material-symbols-rounded { color: var(--primary); }

/* ─── "+ Create Bill/Order" ─────────────────────────
   A bare "+" is only obvious to whoever built it. On a phone this button is
   hidden anyway (the floating pill takes over), so the label costs nothing
   where it shows and explains the button where it matters. */
@media (min-width: 768px) {
  body .wi-add-fab {
    width: auto;
    gap: 6px;
    padding: 0 16px 0 12px;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
  }
  body .wi-add-lbl { display: inline; }
}

/* Below 768px the button is display:none already; the label never renders. */
.wi-add-lbl { display: none; }

/* ─── Card / list toggle is desktop-only ────────────
   On a phone BOTH modes render the same stacked cards — the desktop table is
   gated at 900px — so the control changed nothing and cost a row of header.
   Scoped to .wi-header-actions on purpose: .wi-view-toggle is shared with the
   Clients page, where the toggle does still do something on a phone. */
@media (max-width: 767px) {
  body .wi-header-actions .wi-view-toggle { display: none; }
}

/* ===== css/walk-in-table.css ===== */
/* =====================================================
   SahiHisab — Quick Order desktop table (PREVIEW)
   Sea-blue, matching the studio app. The reference this came from is a
   black/red admin panel; that palette belongs to a different product.
   Desktop only — see walk-in-table.js for why.
   ===================================================== */

/* No overflow:hidden here. It would clip the "⋯" menu and the status panel,
   which hang below their row — the last rows' menus would simply not appear.
   The corners are rounded on the first and last row instead. */
.wt-table {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin: 8px 16px 16px;
  /* Only CLIENT and TYPE can grow, so on a wide monitor every spare pixel
     pooled into those two: 470px and 430px at 1920, 803px at 2560, for
     content that needs about 180px. The row turned into two empty gaps with
     the money and the date pinched at the edges. Capping the table keeps each
     column at a readable width; the cap only bites above ~1600px, so nothing
     below that changes. */
  max-width: 1280px;
}
.wt-head { border-radius: 13px 13px 0 0; }
.wt-row:last-child { border-radius: 0 0 13px 13px; }

/* order | client | type | paisa | delivery | status | ⋯
   Widths carry ~50px of deliberate slack at the 1360px switch. A vertical
   scrollbar is 15-17px on Windows and Linux and 0 on a Mac, so a layout that
   only just fits in the measurement overflows for most of the people using
   it. */
.wt-row {
  display: grid;
  grid-template-columns: 140px minmax(140px, 1.2fr) minmax(130px, 1.1fr) 142px 124px 142px 44px;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.wt-row:last-child { border-bottom: 0; }

/* Sticky, because a column's meaning is two lines away from its value once
   you have scrolled — which is the one real cost of a table over a card. */
.wt-head {
  position: sticky;
  /* .page-content is the scroller here and its top edge already sits under the
     app header, so an offset would park the header 60px INSIDE the list and
     let the first row show through the gap above it. SH.stickyTabsTop() sets
     this per layout; 0 is the right default for this page. */
  top: 0;
  z-index: 3;
  padding: 9px 14px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--border);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.wt-order { cursor: pointer; transition: background 0.12s ease; }
.wt-order:hover { background: var(--primary-50, #F0F9FF); }

/* Overdue: a left edge, not a red row. A whole red row reads as "broken",
   and on a busy list half the rows would be shouting at once. */
.wt-order.is-overdue { box-shadow: inset 3px 0 0 var(--danger); }

.wt-c { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* Status column: the column is a flex column, whose default stretch made the
   bare Cancelled badge as wide as the column. The dropdown pills never showed
   it because they sit inside their own inline-flex wrapper. Hug the text, and
   give the bare badge the dropdown's height so cancelled rows read as one row. */
.wt-c5 { align-items: flex-start; }
.wt-c5 > .wi-status-badge { min-height: 32px; height: auto; }
.wt-c6 { align-items: flex-end; }

.wt-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.wt-num-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
.wt-num { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-lock { font-size: 0.9rem; color: var(--text-muted); }

/* Where the files are. It belongs next to the order number because that pair
   is what a studio uses to actually go and find the work. */
.wt-store {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wt-store i { font-size: 0.85rem; flex: 0 0 auto; }

.wt-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wt-sub {
  font-size: 0.74rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wt-type {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wt-type i { font-size: 1rem; flex: 0 0 auto; }

/* Money: the numbers are what gets read, so nothing else in the row competes. */
.wt-money-top {
  font-family: Outfit, sans-serif;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.wt-money-due {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--danger);
  font-variant-numeric: tabular-nums;
}
.wt-money-paid { font-size: 0.78rem; font-weight: 700; color: var(--success); }
.wt-money-void { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); }

.wt-bar {
  height: 3px;
  width: 72px;
  border-radius: 2px;
  background: var(--danger, #dc2626);
  overflow: hidden;
  margin-top: 3px;
}
.wt-bar i { display: block; height: 100%; background: var(--success); border-radius: 2px; }

.wt-date { font-size: 0.82rem; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.wt-date.is-overdue { color: var(--danger); font-weight: 700; }

.wt-overdue-tag {
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--danger);
}

/* ── The "⋯" menu — second-order actions only ───────────────────────────── */
.wt-more { position: relative; }

.wt-more-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
.wt-more-btn:hover { background: var(--gray-100, #F4F4F5); border-color: var(--border); }

.wt-more-menu {
  position: absolute;
  z-index: 9;
  top: calc(100% + 4px);
  right: 0;
  min-width: 180px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card, #fff);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
}

.wt-more-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.wt-more-item:hover { background: var(--gray-50); }
.wt-more-item .material-symbols-rounded { font-size: 1.05rem; color: var(--text-secondary); }

/* Narrower desktops drop the Delivery column rather than squeezing every other
   one. The switch is at 1360px, not 1280: the seven-column layout cannot go
   below 994px, and a 1280px window with the 260px sidebar only leaves 940px —
   so the full layout was overflowing on exactly the laptops it was meant for.
   1360px leaves 1020px, which fits with room to spare. */
@media (max-width: 1359px) {
  .wt-row { grid-template-columns: 120px minmax(120px, 1.2fr) minmax(110px, 1fr) 132px 140px 44px; gap: 10px; }
  .wt-c4 { display: none; }
}

/* Cancel Order sits apart and red — it is the one item here that destroys
   something, and a menu where every row looks the same invites a mis-tap. */
.wt-more-item.is-danger { color: var(--danger); }
.wt-more-item.is-danger .material-symbols-rounded { color: var(--danger); }
.wt-more-item.is-danger { border-top: 1px solid var(--border); border-radius: 0 0 8px 8px; margin-top: 2px; }

/* ── TYPE / STATUS column headers double as filters ───────────────────────
   The pill row above already filters by status; this is the same filter in
   the place the eye is already looking when scanning a column. An active
   filter colours its header, so it is never on without saying so. */
.wt-hf { position: relative; display: inline-flex; }

.wt-hf-btn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 4px;
  margin: -2px -4px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
}
.wt-hf-btn:hover { background: var(--gray-100, #F4F4F5); }
.wt-hf-cv { font-size: 0.95rem; opacity: 0.7; }
.wt-hf.is-on .wt-hf-btn { color: var(--primary); }
.wt-hf.is-on .wt-hf-cv { opacity: 1; }

.wt-hf-menu {
  position: absolute;
  z-index: 10;
  top: calc(100% + 6px);
  left: 0;
  min-width: 168px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card, #fff);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
}

.wt-hf-opt {
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.wt-hf-opt:hover { background: var(--gray-50); }
.wt-hf-opt.is-on { background: var(--primary-50, #E0F2FE); color: var(--primary); }

/* Header shown alone when a filter matched nothing — it carries the TYPE
   dropdown, which is the way back out. */
.wt-table--head-only { margin-bottom: 0; }
.wt-table--head-only .wt-head { border-radius: 13px; border-bottom: 0; }

/* Which filters are actually on, under the "nothing matched" line. */
.wi-empty-what {
  margin-top: -4px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--primary);
}

/* ===== css/bill-modal.css ===== */
/* Create Bill / Order modal — see js/bill-modal.js.
   The nodes exist only while the modal is open (>=768px), so nothing here can
   reach the phone wizard. Layers: Munim 1050 < modal 1060/1061 < .modal-overlay
   1100 (the wizard's own dialogs stack on top) < toasts 2000 < custom-select 10050. */
html.bm-open {
  overflow: hidden;
}
/* Floating helpers would sit on top of the footer buttons. */
html.bm-open .sh-wa-float,
html.bm-open .pwa-install-btn,
html.bm-open .munim-root {
  display: none;
}

.bm-scrim {
  position: fixed;
  inset: 0;
  z-index: 1060;
  background: rgba(15, 23, 42, 0.45);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.bm-scrim.is-in {
  opacity: 1;
}

/* Tablet base: near full-screen, one scrolling column. */
.bm {
  position: fixed;
  inset: 12px;
  z-index: 1061;
  display: flex;
  flex-direction: column;
  background: var(--background);
  border: 1px solid var(--border-light);
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28);
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px) scale(0.985);
  transition: opacity 0.22s ease, transform 0.26s cubic-bezier(0.32, 0.72, 0, 1);
  outline: none;
  font-size: 0.9rem;
}
/* none, not an identity transform: a transformed ancestor would become the
   containing block for position:fixed widgets inside the forms. */
.bm.is-in {
  opacity: 1;
  transform: none;
}

/* ── Header ── */
.bm-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-light);
  background: var(--card);
  flex-shrink: 0;
}
.bm-head-ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  flex-shrink: 0;
}
.bm-head-txt {
  flex: 1;
  min-width: 0;
}
.bm-head-txt h2 {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.bm-head-txt p {
  margin: 2px 0 0;
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.bm-x {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.bm-x:hover {
  background: var(--gray-100, rgba(15, 23, 42, 0.06));
  color: var(--text-primary);
}
.bm-x:focus-visible,
.bm-alt:focus-visible,
.bm-sum-row:focus-visible,
.bm-textlink:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ── Body ── */
.bm-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
}
.bm-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.bm-main > #bmSecClient { order: 1; }
.bm-main > #bmSecType { order: 2; }
.bm-main > #bmSecForms { order: 4; }
.bm-main > #bmSecItems { order: 5; }
/* Shop sale / operators / plain custom: lines first, details after. */
.bm.bm-items-first .bm-main > #bmSecItems { order: 3; }
.bm-side {
  min-width: 0;
  padding: 14px 18px 18px;
  border-top: 1px solid var(--border-light);
  background: color-mix(in srgb, var(--card) 55%, var(--background));
}

.bm-sec {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-light);
}
.bm-sec[hidden] {
  display: none;
}
.bm-sec-h {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}
.bm-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  background: var(--primary);
  flex-shrink: 0;
}
.bm-req {
  color: var(--destructive, var(--danger));
}
.bm-hint,
.bm-empty {
  margin: 0 0 10px;
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.bm-empty {
  margin: 4px 0;
  text-align: center;
  padding: 14px 8px;
}

/* Resting inputs muted, the focused one unmistakable (mirrors the wizard). */
.bm .form-control {
  border-color: var(--border);
  box-shadow: none;
}
.bm .form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px hsla(200, 80%, 44%, 0.22);
}
/* A pill click hands focus to its group (so Enter moves on) — ring that group
   only when the focus came from the keyboard, never after a mouse click. */
.bm .wi-chip-group:focus {
  outline: none;
  box-shadow: none;
}
.bm .wi-chip-group:focus-visible {
  box-shadow: 0 0 0 2px hsla(200, 80%, 44%, 0.45);
}
.bm .form-group {
  margin-bottom: 12px;
}
.bm .form-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

/* ── 1 · Client ── */
.bm-search {
  position: relative;
}
.bm-search-ico {
  position: absolute;
  left: 14px;
  top: 22px;
  transform: translateY(-50%);
  font-size: 1.15rem;
  color: var(--text-muted);
  pointer-events: none;
}
.bm-search .form-control {
  min-height: 44px;
  padding-left: 42px;
  padding-right: 44px;
  border-radius: 12px;
}
.bm-dd {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 5;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
}
.bm-dd[hidden] {
  display: none;
}
.bm-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 6px 10px;
  border-radius: 10px;
  cursor: pointer;
}
.bm-opt:hover,
.bm-opt.hi {
  background: color-mix(in srgb, var(--primary) 9%, transparent);
}
/* Sound-alike results from the spelling-tolerant search — offered, not pushed. */
.bm-dd-label {
  padding: 8px 10px 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
}
.bm-opt-weak .bm-avatar {
  color: var(--text-secondary);
  background: var(--gray-100, rgba(15, 23, 42, 0.06));
}
.bm-opt-weak .bm-opt-txt strong {
  font-weight: 500;
  color: var(--text-secondary);
}
.bm-opt-add {
  margin-top: 4px;
  border-top: 1px solid var(--border-light);
  border-radius: 0 0 10px 10px;
}
.bm-opt-txt,
.bm-client-txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.bm-opt-txt strong,
.bm-client-txt strong {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bm-opt-txt span,
.bm-client-txt span {
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.bm-opt-due {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--warning, #d97706);
  white-space: nowrap;
}
.bm-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  background: var(--primary);
  flex-shrink: 0;
}
.bm-avatar.material-symbols-rounded {
  font-size: 1.15rem;
}
.bm-avatar-add {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.bm .bm-client-walkin .bm-avatar {
  color: var(--text-secondary);
  background: var(--gray-100, rgba(15, 23, 42, 0.06));
}

.bm-client-alt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
.bm-alt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.bm-alt:first-child {
  border: 1.5px dashed var(--primary);
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, var(--card));
}
.bm-alt:hover {
  border-color: var(--primary);
}
.bm-alt .material-symbols-rounded {
  font-size: 1.15rem;
}
.bm #wiRecentClients:not(:empty) {
  margin-top: 10px;
}

.bm-client-sel {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--success, #10b981) 55%, transparent);
  background: color-mix(in srgb, var(--success, #10b981) 8%, var(--card));
}
.bm-client-sel .bm-avatar {
  background: var(--success, #10b981);
}
.bm .bm-client-walkin {
  border-color: var(--border);
  background: var(--card);
}
.bm-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  color: var(--primary);
  font-weight: 600;
  white-space: nowrap;
}
.bm-link .material-symbols-rounded {
  font-size: 1.05rem;
}

.bm-newclient {
  padding: 12px 14px 10px;
  border-radius: 14px;
  border: 1.5px dashed color-mix(in srgb, var(--primary) 60%, transparent);
  background: color-mix(in srgb, var(--primary) 4%, var(--card));
}
.bm-nc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.bm-nc-head > .material-symbols-rounded {
  color: var(--primary);
  font-size: 1.2rem;
}
.bm-nc-head strong {
  font-size: 0.9rem;
  color: var(--text-primary);
}
.bm-nc-head small {
  flex: 1;
  min-width: 160px;
  font-size: 0.76rem;
  color: var(--text-secondary);
}
.bm-nc-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 8px;
}
.bm-nc-row[hidden] {
  display: none;
}
.bm-fld {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}
.bm-fld > span {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.bm-fld .form-control {
  min-height: 42px;
}
.bm-fld > label {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.bm-name-row {
  display: flex;
  gap: 6px;
}
.bm-name-row > select {
  flex: 0 0 auto;
  width: auto;
  min-width: 76px;
}
.bm-name-row > input {
  flex: 1;
  min-width: 0;
}
.bm-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  font-size: 0.84rem;
  color: var(--text-secondary);
  cursor: pointer;
}
.bm-check input {
  width: 18px;
  height: 18px;
}
.bm-textlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--primary);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.bm-textlink .material-symbols-rounded {
  font-size: 1.05rem;
}
.bm-match {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--warning, #f59e0b) 12%, var(--card));
  font-size: 0.82rem;
  color: var(--text-primary);
}
.bm-match > span:nth-child(2) {
  flex: 1;
}
.bm-match > .material-symbols-rounded {
  color: var(--warning, #d97706);
}

/* ── 2 · Type ── */
.bm .bm-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
}
.bm .bm-type-grid .wi-type-card {
  aspect-ratio: auto;
  min-height: 80px;
  padding: 12px 8px;
  gap: 6px;
}
.bm .bm-type-grid .wi-type-card .wi-type-icon.material-symbols-rounded {
  font-size: 24px;
}
.bm .bm-type-grid .wi-type-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}
.bm-type-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 6px 8px 6px 14px;
  border-radius: 14px;
  border: 1.5px solid var(--tc, var(--primary));
  background: color-mix(in srgb, var(--tc, var(--primary)) 8%, var(--card));
}
.bm-type-bar {
  cursor: pointer;
}
.bm-type-bar:hover {
  background: color-mix(in srgb, var(--tc, var(--primary)) 13%, var(--card));
}
.bm-type-bar:focus-visible {
  outline: 2px solid var(--tc, var(--primary));
  outline-offset: 2px;
}
.bm .wi-inst-card.bm-collapsed {
  cursor: pointer;
}
.bm .wi-inst-card.bm-collapsed:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
}
.bm-type-bar > .material-symbols-rounded {
  font-size: 1.4rem;
  color: var(--tc, var(--primary));
}
.bm-type-bar strong {
  flex: 1;
  font-size: 0.95rem;
  color: var(--tc, var(--primary));
}
.bm #wiCustomTypePills {
  margin-top: 12px;
}

/* ── Forms: the type's spec cards, two fields a row ── */
.bm-forms {
  padding-top: 4px;
}
.bm #wiSpecsFields,
.bm .wi-inst-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 14px;
}
.bm #wiSpecsFields > :not(.form-group),
.bm .wi-inst-card > :not(.form-group),
.bm #wiSpecsFields > .form-group:has(textarea, .wi-multiselect),
.bm .wi-inst-card > .form-group:has(textarea, .wi-multiselect) {
  grid-column: 1 / -1;
}
.bm #wiSpecsFields .wi-inst-card {
  margin-bottom: 12px;
  padding: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 1px 2px hsla(220, 25%, 25%, 0.05);
}
.bm #wiSpecsFields .wi-inst-card:focus-within {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
}
.bm #wiSpecsFields .wi-inst-add {
  min-height: 44px;
  border-radius: 12px;
  font-weight: 600;
}
.bm .wi-type-group,
.bm .wi-custom-type-section {
  background: var(--card);
}
.bm .wi-storage-section,
.bm #wiSpecsFields .card {
  margin-top: 12px;
  border-radius: 14px;
}
.bm .wi-attach-grid {
  margin-top: 12px;
}

/* The line (name · qty · rate · total · more details) inside its form card. */
.bm-inst-price {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
/* The card already frames it — no second box around the line. */
.bm .bm-inst-price .wi-item-row {
  margin-bottom: 0;
  padding: 0;
  background: transparent;
  border: 0;
}
.bm-inst-price .wi-item-del,
.bm-inst-price .wi-item-type {
  display: none;
}

/* Folding form cards: header toggles, a folded card keeps one money line. */
.bm-cards-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 6px;
}
.bm-cards-bar[hidden] {
  display: none;
}
.bm .bm-inst-head {
  cursor: pointer;
  border-radius: 8px;
  min-height: 32px;
  align-items: center;
}
.bm .bm-inst-head:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.bm-chev {
  margin-left: 4px;
  font-size: 1.1rem;
  vertical-align: middle;
  color: var(--text-muted);
  transition: transform 0.18s ease;
}
.bm .wi-inst-card.bm-collapsed .bm-chev {
  transform: rotate(-90deg);
}
.bm .wi-inst-card.bm-collapsed {
  padding-top: 10px;
  padding-bottom: 10px;
}
.bm .wi-inst-card.bm-collapsed > :not(.bm-inst-head):not(.bm-inst-sumline) {
  display: none;
}
.bm .wi-inst-card.bm-collapsed > .bm-inst-head {
  margin-bottom: 4px;
}
.bm .wi-inst-card:not(.bm-collapsed) > .bm-inst-sumline {
  display: none;
}
.bm-inst-sumline {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.84rem;
  cursor: pointer;
}
.bm-sl-name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bm-sl-meta {
  color: var(--text-secondary);
  white-space: nowrap;
}
.bm-sl-meta em {
  font-style: normal;
  font-weight: 600;
  color: var(--warning, #d97706);
}
.bm-inst-sumline strong {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bm-inc {
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--danger, #dc2626);
  background: color-mix(in srgb, var(--danger, #dc2626) 10%, transparent);
  white-space: nowrap;
}

/* Hand-added lines (shop sale, operators…) and the wizard's own cards. */
.bm-items > .card,
.bm #bmTotals > .card,
.bm .bm-pay > .card {
  margin: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.bm-items > .card,
.bm #bmTotals > .card {
  overflow: visible;
}
.bm-items > .card > .card-body,
.bm #bmTotals > .card > .card-body {
  padding: 0;
}
.bm-items h4 {
  font-size: 0.95rem;
}

/* Number boxes: no browser spinner arrows — steppers have the app's own ± buttons. */
.bm input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.bm input[type="number"]::-webkit-inner-spin-button,
.bm input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Product suggestions under a shop-sale line's name box. */
.bm #bmSecItems .wi-item-top {
  position: relative;
}
.bm-prod-menu {
  position: absolute;
  left: 0;
  right: 44px;
  top: calc(100% + 4px);
  z-index: 6;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.18);
}
.bm-prod-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.86rem;
}
.bm-prod-opt:hover,
.bm-prod-opt.hi {
  background: color-mix(in srgb, var(--primary) 9%, transparent);
}
.bm-prod-name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bm-prod-stock {
  font-size: 0.72rem;
  color: var(--text-secondary);
  white-space: nowrap;
}
.bm-prod-opt.out .bm-prod-stock {
  color: var(--danger, #dc2626);
  font-weight: 600;
}
.bm-prod-opt strong {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bm-save-prod {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  cursor: pointer;
}
.bm-save-prod input {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
}

/* Selling below cost: red fields + a plain-words line. */
.bm .bm-loss .wi-item-rate,
.bm .bm-loss .wi-item-cost {
  border-color: var(--danger, #dc2626);
  background: color-mix(in srgb, var(--danger, #dc2626) 5%, var(--card));
}
.bm-loss-note,
.bm-below-cost {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--danger, #dc2626);
  background: color-mix(in srgb, var(--danger, #dc2626) 9%, transparent);
}
.bm-loss-note .material-symbols-rounded,
.bm-below-cost .material-symbols-rounded {
  font-size: 1.05rem;
}
.bm-sum-loss {
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--danger, #dc2626);
  background: color-mix(in srgb, var(--danger, #dc2626) 10%, transparent);
}

/* ── Right: summary + payment ── */
.bm-card {
  margin-bottom: 12px;
  padding: 14px;
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: 14px;
}
.bm-card-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}
.bm-card-h > .material-symbols-rounded {
  font-size: 1.2rem;
  color: var(--primary);
}
.bm-card-h small {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
}
.bm-sum-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.bm-sum-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name total" "meta total";
  align-items: center;
  column-gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: color-mix(in srgb, var(--background) 60%, var(--card));
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.bm-sum-row:hover {
  border-color: var(--primary);
}
.bm-sum-name {
  grid-area: name;
  font-size: 0.84rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bm-sum-meta {
  grid-area: meta;
  font-size: 0.74rem;
  color: var(--text-secondary);
}
.bm-sum-meta em {
  font-style: normal;
  color: var(--warning, #d97706);
  font-weight: 600;
}
.bm-sum-row strong {
  grid-area: total;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}
.bm #bmTotals {
  padding-top: 8px;
  border-top: 1px solid var(--border-light);
}
.bm #bmTotals:empty {
  display: none;
}

.bm .bm-pay > .card {
  margin-bottom: 12px;
  padding: 14px;
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: 14px;
}
.bm .bm-pay > .card > .card-body {
  padding: 0;
}
.bm .bm-pay h4 {
  font-size: 0.95rem;
}
.bm .bm-pay .wi-dates-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 12px;
}

/* Payment modes: four equal pills on one row; "usually" rides the top edge
   of the chosen pill's wrapper (the button itself clips overflow). */
.bm #wiPaymentModes {
  padding-top: 8px;
}
.bm .bm-pm {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
}
.bm .bm-pm > .btn {
  flex: 1;
  min-width: 0;
  justify-content: center;
  padding-left: 8px;
  padding-right: 8px;
}
.bm .bm-pm > .bm-usual {
  position: absolute;
  top: -9px;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--primary);
  background: var(--card);
  color: var(--primary);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.4;
  text-transform: capitalize;
  white-space: nowrap;
  pointer-events: none;
}

/* ── Footer ── */
.bm-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--border-light);
  background: var(--card);
  flex-shrink: 0;
}
.bm-foot-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  border-radius: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.bm-foot-btn .material-symbols-rounded {
  font-size: 1.1rem;
}
.bm-foot-sum {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.bm-foot-sum strong {
  color: var(--text-primary);
}
.bm-due strong {
  color: var(--danger, #dc2626);
}
.bm-create {
  min-width: 170px;
  justify-content: center;
}
.bm-create .wi-kbd {
  margin-left: 4px;
}

/* ── Desktop: two panes that scroll on their own ── */
@media (min-width: 1024px) {
  .bm {
    inset: 0;
    margin: auto;
    width: min(1240px, calc(100vw - 48px));
    height: min(920px, calc(100dvh - 40px));
  }
  .bm-grid {
    overflow: hidden;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
  }
  .bm-main,
  .bm-side {
    overflow-y: auto;
    overscroll-behavior: contain;
    min-height: 0;
  }
  .bm-side {
    border-top: 0;
    border-left: 1px solid var(--border-light);
  }
  .bm-sec {
    padding: 18px 22px;
  }
  .bm #wiSpecsFields,
  .bm .wi-inst-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .bm,
  .bm-scrim {
    transition: none;
  }
}

/* ===== css/quotation-modal.css ===== */
/* Create Quotation modal — see js/quotation-modal.js.
   The nodes exist only while the modal is open (>=768px), so nothing here can
   reach the phone wizard. Layers match bill-modal.css: Munim 1050 < modal
   1060/1061 < .modal-overlay 1100 (the wizard's own dialogs stack on top)
   < toasts 2000 < custom-select 10050. */
html.qm-open {
  overflow: hidden;
}
/* Floating helpers would sit on top of the footer buttons. */
html.qm-open .sh-wa-float,
html.qm-open .pwa-install-btn,
html.qm-open .munim-root {
  display: none;
}

/* The wizard still renders itself into #app behind the scrim, so its progress
   meter and step bars poke out above the dialog. Hide those two, not the whole
   page: generateQuotation writes its success screen into .wizard-body, and
   closing the modal drops this class, so that screen is what the user lands on. */
html.qm-open #qtLmMount,
html.qm-open .wizard-wrap {
  visibility: hidden;
}

.qm-scrim {
  position: fixed;
  inset: 0;
  z-index: 1060;
  background: rgba(15, 23, 42, 0.45);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.qm-scrim.is-in {
  opacity: 1;
}

/* Tablet base: near full-screen, one scrolling column. */
.qm {
  position: fixed;
  inset: 12px;
  z-index: 1061;
  display: flex;
  flex-direction: column;
  background: var(--background);
  border: 1px solid var(--border-light);
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28);
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px) scale(0.985);
  transition: opacity 0.22s ease, transform 0.26s cubic-bezier(0.32, 0.72, 0, 1);
  outline: none;
  font-size: 0.9rem;
}
/* none, not an identity transform: a transformed ancestor would become the
   containing block for position:fixed widgets inside the forms. */
.qm.is-in {
  opacity: 1;
  transform: none;
}

/* ── Header ── */
.qm-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-light);
  background: var(--card);
  flex-shrink: 0;
}
.qm-head-ico {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--primary-light);
  color: var(--primary);
  flex-shrink: 0;
}
.qm-head-txt {
  min-width: 0;
  flex: 1;
}
.qm-head-txt h2 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
}
.qm-head-txt p {
  margin: 2px 0 0;
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.qm-x {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
}
.qm-x:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

/* ── Body ── */
.qm-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.qm-main,
.qm-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.qm-sec {
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 16px;
}
/* The wizard's step renderers open with their own step heading and helper
   line; inside a single screen the first one would double up with the modal
   title, so the section supplies the frame and the renderer the content. */
.qm-sec > div > h2:first-child {
  font-size: 1rem;
  margin-top: 0;
}

/* ── Client list as chips ── */
/* Restyled, not rebuilt: these are the wizard's own .client-row nodes, so the
   click handlers, keyboard activation and .selected state all keep working. */
.qm #qmClient .card {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}
.qm #qmClient .client-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  min-height: 44px;
  padding: 7px 14px;
  border: 1px solid var(--border-light);
  border-radius: 14px;
  background: var(--card);
  cursor: pointer;
}
.qm #qmClient .client-row:hover,
.qm #qmClient .client-row.selected {
  border-color: var(--primary);
}
/* The avatar and the radio glyph are row furniture — a chip carries the name
   and the number, and the border shows which one is picked. */
.qm #qmClient .client-avatar,
.qm #qmClient .client-row > .material-symbols-rounded {
  display: none;
}
.qm #qmClient .client-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
}
.qm #qmClient .client-name {
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.qm #qmClient .client-phone {
  font-size: 0.76rem;
  color: var(--text-secondary);
  line-height: 1.3;
  white-space: nowrap;
}

/* ── Collapsed client row ── */
.qm-pick {
  display: flex;
  align-items: center;
  gap: 12px;
}
.qm-pick-av {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 600;
  flex-shrink: 0;
}
.qm-pick-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.qm-pick-txt strong {
  font-size: 0.95rem;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qm-pick-txt small {
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.qm-pick-btn {
  min-height: 44px;
  flex-shrink: 0;
}

/* A class, not the hidden attribute: app.css gives .btn display:inline-flex,
   which beats [hidden]'s display:none. */
.qm .qm-hide {
  display: none;
}

/* ── "+ Add Date" inside the open date card ── */
.qm-add-date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  margin-top: 10px;
  border: 1px dashed var(--border-color, #cbd5e1);
  border-radius: 10px;
  background: transparent;
  color: var(--primary);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
}
.qm-add-date:hover {
  border-style: solid;
  border-color: var(--primary);
  background: var(--primary-light);
}
.qm-add-date .material-symbols-rounded {
  font-size: 1.1rem;
}

/* ── Package card is a teaser, View has the rest ── */
/* Cards hug their own content instead of stretching to the tallest in the row. */
.qm #packageGrid {
  align-items: start;
}
.qm #packageGrid .package-features li:nth-child(n+4) {
  display: none;
}
.qm-pkg-more {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ── View on a package card ── */
/* Editing stays with the card's own .pkgq-edit ("tune Edit"), which changes the
   package for THIS QUOTE and can be reset. This row only adds View. */
.qm-pkg-acts {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
}
.qm-pkg-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 1;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--card);
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.qm-pkg-act:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.qm-pkg-act .material-symbols-rounded {
  font-size: 1rem;
}

/* ── Package detail (View) ── */
.qm-view-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.qm-view-top strong {
  font-size: 1.25rem;
  color: var(--primary);
}
.qm-view-cat {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  background: var(--surface-hover);
  border-radius: 999px;
  padding: 3px 10px;
}
.qm-view-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0 0 12px;
}
.qm-view-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.qm-view-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.86rem;
}
.qm-view-list .material-symbols-rounded {
  font-size: 1.05rem;
  color: var(--success);
  flex-shrink: 0;
}
.qm-view-empty {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0;
}

/* ── Right column ── */
.qm-side > div:first-child {
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 16px;
}
.qm-tot {
  background: var(--primary-light);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 16px;
}
.qm-tot-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.qm-tot-head span {
  font-size: 0.95rem;
  font-weight: 600;
}
.qm-tot-head strong {
  font-size: 1.35rem;
  color: var(--primary);
}
.qm-tot-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.qm-tot-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

/* ── Footer ── */
.qm-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-light);
  background: var(--card);
  flex-shrink: 0;
}
.qm-foot-sp {
  flex: 1;
}
.qm-foot-btn {
  min-height: 44px;
}

/* ── Desktop: the two columns of the mockup ── */
@media (min-width: 1024px) {
  /* Shorter than the viewport on purpose — the page stays visible around it so
     this reads as a dialog, not a second screen. No transform is used to centre
     it: a transformed ancestor becomes the containing block for the position:
     fixed dropdowns the forms open (custom-select, date and time pickers). */
  .qm {
    inset: 7vh 24px;
    max-width: 1320px;
    margin-inline: auto;
  }
  .qm-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    align-items: start;
    gap: 16px;
    padding: 18px;
  }
  /* Each column scrolls on its own so the money column stays beside the form
     instead of running off the bottom of a long event-date list. */
  .qm-main,
  .qm-side {
    max-height: 100%;
    overflow-y: auto;
  }
}

@media (min-width: 1440px) {
  .qm-grid {
    grid-template-columns: minmax(0, 1fr) 420px;
  }
}

/* ===== css/clients-table.css ===== */
/* =====================================================
   SahiHisab — Clients desktop table
   Only the column grid and a few client-specific bits. Everything else —
   sticky header, row hover, money colours, the width cap, the scrollbar
   headroom — comes from css/walk-in-table.css via the shared .wt-* classes.
   ===================================================== */

/* client | phone | city | next event | remaining | actions
   Widths follow the same rule the Quick Order grid was measured against: the
   minimum must clear  window − sidebar − 48px page padding − 32px table
   margin − 17px scrollbar  at 1120px, which leaves 763px.
     fixed 150 + 120 + 130 + 150 = 550, gaps 5×10 = 50, padding 28,
     flexible minimum 190  →  618px minimum, 145px of slack. */
.ct-row {
  /* CLIENT is capped and ACTIONS takes the remainder. Left as the only fr
     column, CLIENT grew to ~500px at the table's 1280px cap — the same
     "one column swallows the screen" shape the Quick Order grid had. The
     buttons are right-aligned in their cell, so the spare width reads as a
     gap before them rather than a stretched column. */
  grid-template-columns: minmax(190px, 420px) 150px 120px 130px 150px minmax(160px, 1fr);
  gap: 10px;
}

.ct-c5 {
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.ct-name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }

/* _avatarHtml(c, cls) does NOT wrap a photo in the initials box — it SWAPS the
   class, emitting <img class="{cls}-img"> instead of <div class="{cls}">. Both
   names have to be styled here or a client with a photo renders it at its
   natural size: a 700px scan pushed the name clean out of the row. */
.ct-avatar,
.ct-avatar-img {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
}
.ct-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-100, #E0F2FE);
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 800;
}
.ct-avatar-img { display: block; object-fit: cover; }

/* VIP / upcoming-event / gone-quiet chips, on their own line under the name
   so a long name never has to fight them for room. */
.ct-badges { display: flex; flex-wrap: wrap; gap: 4px; }

.ct-phone { font-variant-numeric: tabular-nums; }

/* The quick actions keep the size they have on the cards — they are the point
   of this page, so they stay visible rather than going behind a "⋯". */
.ct-row .client-quick-action {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
}

/* The "⋯" sits with them and matches their box, not walk-in-table.css's 36px
   default — four buttons at 36 overflowed the ACTIONS column at its minimum. */
.ct-row .wt-more-btn { width: 34px; height: 34px; flex: 0 0 auto; }

/* The menu hangs off the last rows too, where there is no table left below it
   to draw on. It is the only thing in the row that must sit above its
   neighbours, so the stacking context is raised only while it is open. */
.ct-more { display: inline-flex; }
.ct-row:has(.ct-more .wt-more-menu:not([hidden])) { z-index: 3; position: relative; }

/* Below 1360px the city is the first thing to go: a phone number identifies a
   client, a city rarely does. Widths are cut so the row still clears 1120px
   MINUS a 17px scrollbar — the measurement that caught the Quick Order table
   overflowing on Windows while looking fine on a Mac. */
@media (max-width: 1359px) {
  .ct-row { grid-template-columns: minmax(170px, 380px) 128px 116px 132px minmax(160px, 1fr); }
  .ct-c2 { display: none; }
}

/* The NEXT EVENT column prints the date already, and _statusBadges() builds the
   same date as a chip under the name — the card needs that chip because a card
   has no columns, the table does not. Hidden rather than removed from the
   builder so the cards keep it and the two surfaces stay one function. */
.ct-row .client-badge.upcoming { display: none; }

/* Rows without the VIP / gone-quiet chip were shorter than rows with it, so the
   list stepped up and down as you scanned it. A floor evens them out. */
.ct-row { min-height: 54px; }

/* "No dues" is the resting state of most of the list. In success green it was
   the loudest thing on screen while the actual dues — the reason this column
   exists — sat quietly two rows down. Muted, so red is the only colour here. */
.ct-nodue { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); }

/* The wrapper is .clients-cards, which from 1024px up is a CARD grid
   (repeat(2, 1fr), then repeat(3, 1fr) at 1200px). clients-core.js already
   puts .is-table on it when the table renders — but nothing ever consumed
   that class, so the wrapper stayed a grid and the table became a grid ITEM
   sized to one card track. That is why the table stopped ~230px short of the
   search bar and the KPI row above it, which are plain blocks at the page's
   full width.

   Bookings (.orders-grid.bk-is-table) and Quotations (.qtl-grid.qtl-is-table)
   both already do exactly this; Clients is the one that was missed. Two
   classes beat app.css's one, in or out of a media query, so no !important.

   Padding is deliberately NOT touched: .clients-cards keeps its 0 16px, which
   is the same 16px inset .clients-header, .clients-filters and
   .clients-overview use — that is what lines the table up with them. */
.clients-cards.is-table {
  display: block;
  grid-template-columns: none;
  gap: 0;
  align-items: stretch;
  max-width: none;
}

/* app.css caps .clients-page at 900px from 769px up. That cap was measured for
   a card grid; the table's six columns need 968px at their minimum, so it hung
   ~100px past the search bar and the KPI row instead of shrinking — a grid with
   fixed tracks overflows rather than compressing.

   Two classes beat app.css's one, and this file loads after it, so no
   !important is needed. Scoped to the width the table itself needs, so a narrow
   desktop that renders cards keeps the 900px cap it was designed for.

   The table's own side margin goes with it: the page already supplies the
   padding, and 16px more only pushed the rows out of line with everything
   above them. */
@media (min-width: 1120px) {
  .clients-page.has-table { max-width: 1280px; }
  .clients-page.has-table .ct-table { margin-left: 0; margin-right: 0; }
}

/* Money reads by digit, not by first letter. Left-aligned, ₹3,30,000 and ₹9,000
   started at the same x and ended 40px apart, so "who owes the most" needed
   reading rather than glancing. Right-aligned they stack by place value, and
   tabular-nums (from .wt-money-due) keeps the columns of digits true. The
   header moves with the cell or it stops pointing at anything. */
.ct-c4 { align-items: flex-end; text-align: right; }

/* REMAINING doubles as the sort control. It inherits the header's own type so
   it still reads as a column heading, not a button parked in one. */
.ct-sort {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 4px;
  margin: -2px -4px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
}
.ct-sort:hover { background: var(--gray-100, #F4F4F5); }
.ct-sort-i { font-size: 0.95rem; opacity: 0.55; }
/* Coloured while on, so the list is never in a non-default order silently. */
.ct-sort.is-on { color: var(--primary); }
.ct-sort.is-on .ct-sort-i { opacity: 1; }

/* ===== css/assistants-table.css ===== */
/* =====================================================
   SahiHisab — Assistants desktop table
   Only the column grid, the two cells unique to this page (TODAY, kebab) and
   the shared popover. Everything else — sticky header, row hover, money
   colours, width cap, scrollbar headroom — comes from css/walk-in-table.css
   via the .wt-* classes, so this file must load AFTER it.
   ===================================================== */

/* The filter pills and the grid/list toggle share one row: the pills scroll
   horizontally on a narrow screen, the toggle stays pinned to the right. */
.asst-filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.asst-filter-row .clients-filters { flex: 1; min-width: 0; }
.asst-view-toggle { flex: 0 0 auto; }

/* Below the table's floor the list view falls back to cards, so the toggle
   would be a control with no visible effect. */
@media (max-width: 1119px) {
  .asst-view-toggle { display: none; }
}

/* member | role | phone | today | tasks | paid | pending | kebab
   Eight columns against the Clients table's six, so the budget is tighter.
   At 1120px the usable width is  window − sidebar(260) − page padding(48)
   − table margin(32) − scrollbar(17) = 763px.
     fixed 120 + 130 + 112 + 96 + 100 + 100 + 44 = 702, gaps 7×8 = 56,
     padding 28  →  786px at the flexible column's 190px floor, which is why
   MEMBER's floor is 170 and not 190: 766px, clearing 763px by 3. Every fixed
   width below was cut to its content, not chosen round. */
.at-row {
  grid-template-columns:
    minmax(170px, 360px)   /* member — capped so it cannot swallow a wide monitor */
    120px                  /* role */
    130px                  /* phone */
    112px                  /* today */
    96px                   /* tasks */
    100px                  /* paid */
    100px                  /* pending */
    minmax(44px, 1fr);     /* kebab — takes the slack, right-aligned */
  gap: 8px;
}

/* ── Member ── */
.at-name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }

.at-name-stack {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

/* The avatar is an <img> when there is a photo and a <span> of initials when
   there is not, so BOTH have to be sized here — a 700px upload would
   otherwise render at its natural size and shove the name out of the row. */
.at-avatar,
.at-avatar-img {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
}
.at-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-100, #E0F2FE);
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 800;
}
.at-avatar-img { display: block; object-fit: cover; }

.at-name {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.at-trust { font-size: 14px; color: var(--success, #10b981); flex: 0 0 auto; }

/* Type reads as a caption under the name rather than the card's outlined
   badge: at row height an outlined pill next to the name competed with it. */
.at-type {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.at-phone { font-variant-numeric: tabular-nums; }

/* ── Today ── */
/* .wt-c is a column flexbox with the default align-items:stretch, which made
   the pill fill the whole 112px cell and park its check-in time against the
   TASKS column. The pill has to hug its own content. */
.at-c3 { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }

.at-today {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid var(--at-s, var(--border));
  border-radius: 999px;
  background: var(--at-sbg, transparent);
  color: var(--at-s, var(--text-secondary));
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: filter 0.15s, border-color 0.15s;
}
.at-today:hover { filter: brightness(0.96); }
.at-today-i { font-size: 15px; flex: 0 0 auto; }
.at-today-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Sits under the pill, not inside it — a sibling, so it never competes with
   the status word for the pill's width. Same shape as the TASKS cell. */
.at-today-time {
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  padding-left: 2px;
}

/* Staff sessions read the column, never write it. */
.at-today--ro { cursor: default; }
.at-today--ro:hover { filter: none; }
.at-today-none { color: var(--text-muted); }

/* Unmarked is an invitation, not an em dash — marking attendance is the thing
   owners open this page to do. Dashed so it reads as an empty slot. */
.at-today--empty {
  border-style: dashed;
  border-color: var(--border);
  color: var(--text-muted);
  background: transparent;
}
.at-today--empty:hover {
  border-style: solid;
  border-color: var(--primary);
  color: var(--primary);
  filter: none;
}

/* ── Tasks ── */
.at-c4 { flex-direction: column; align-items: flex-start; gap: 1px; }
.at-tasks { font-size: 0.85rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.at-tasks-act {
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

/* ── Money ── */
.at-paid {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--success, #10b981);
  font-variant-numeric: tabular-nums;
}
.at-nodue {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.at-mask { color: var(--text-muted); font-weight: 700; }

/* ── Kebab ── */
.at-c7 {
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}
.at-kebab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.at-kebab:hover,
.at-kebab[aria-expanded="true"] {
  background: var(--primary-100, #E0F2FE);
  border-color: var(--border-light, transparent);
  color: var(--primary);
}
.at-kebab .material-symbols-rounded { font-size: 20px; }

/* ── Header sort / filter controls ── */
.at-sort,
.at-filter {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: 100%;
  padding: 2px 4px;
  margin-left: -4px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.at-sort:hover,
.at-filter:hover { background: var(--primary-100, #E0F2FE); color: var(--primary); }
.at-sort.is-on,
.at-filter.is-on { color: var(--primary); }
.at-sort-i,
.at-filter-i { font-size: 14px; flex: 0 0 auto; opacity: 0.7; }
.at-sort.is-on .at-sort-i,
.at-filter.is-on .at-filter-i { opacity: 1; }
.at-filter-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Popover (filter list, attendance picker, kebab menu) ── */
/* position:fixed, not absolute: the table scrolls horizontally inside its own
   box, so an absolutely positioned menu would ride away from its button. */
.at-pop {
  position: fixed;
  z-index: 1200;
  min-width: 168px;
  max-height: 320px;
  overflow-y: auto;
  padding: 5px;
  background: var(--card, #fff);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 32px rgba(0,0,0,0.16);
  animation: atPopIn 0.13s ease-out;
}
@keyframes atPopIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.at-pop-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  padding: 7px 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-primary);
  font-size: 0.82rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.at-pop-item:hover,
.at-pop-item:focus-visible { background: var(--primary-100, #E0F2FE); outline: none; }
.at-pop-item.is-on { color: var(--primary); }
.at-pop-i { font-size: 18px; flex: 0 0 auto; color: var(--at-i, var(--text-secondary)); }
.at-pop-l { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-pop-ck { font-size: 16px; flex: 0 0 auto; color: var(--primary); }

/* Empty result of a header filter — distinct from the page's own empty state,
   which offers "add your first member" and would be wrong here. */
.at-nofilter {
  padding: 22px 16px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

/* The table needs the room the card grid did not: .assistants-page inherits
   the 900px cap from .clients-page, and capped, the table hung past the
   filters above it. Lift the cap for the whole page while it is on. */
.assistants-page.has-table { max-width: none; }

/* Grid view stays cards at every width — the toggle is the only way in. */
@media (max-width: 1119px) {
  .at-table { display: none; }
}

/* ===== css/quotations-table.css ===== */
/* =====================================================
   SahiHisab — Quotations desktop table
   Column grid + the cells unique to this page. Everything else — sticky
   header, row hover, width cap, scrollbar headroom — comes from
   css/walk-in-table.css via .wt-*, so this file must load AFTER it.
   ===================================================== */

/* The wrapper is .qtl-grid, which at >=900px is a CARD grid
   (repeat(auto-fill, minmax(400px, 1fr))). Left alone, the table becomes a
   grid ITEM sized to one ~400px track while its own row grid overflows it —
   Amount, Status and the kebab render outside the table's own box. The table
   owns its width, so the wrapper has to stop being a grid for this one case.
   .qtl-grid.qtl-is-table (0,2,0) beats .qtl-grid (0,1,0) in or out of the
   media query. */
.qtl-grid.qtl-is-table {
  display: block;
  grid-template-columns: none;
  gap: 0;
  align-items: stretch;
  max-width: none;
}

/* date | quotation | client | venue | amount | valid till | status | kebab
   Eight columns. At the 1120px floor the usable width is  window
   − sidebar(260) − page padding(48) − table margin(32) − scrollbar(17) = 763.
   Every track is at its BASE there: 78+140+130+0+105+84+92+44 = 673,
   gaps 7×8 = 56, padding 28 → 757, clearing 763px by 6.
   Those 6 go to VENUE / AMOUNT / VALID TILL, because a non-flexible track is
   maximized before an fr track expands — which is also why they are written
   as minmax(base, cap): they take the slack a wide monitor has and hand it
   straight back the moment the row is tight. */
.qt-row {
  grid-template-columns:
    78px                  /* date — "14 SEPT '27" needs ~77 */
    minmax(140px, 1fr)    /* quotation — title + number */
    minmax(130px, 0.6fr)  /* client — flexible now: at 130 the phone always
                             truncated ("+91 62025 467…"), and QUOTATION was
                             the only sink for the slack, so the title sat in
                             a column twice its own width. */
    minmax(0, 160px)      /* venue — capped; city names are short. Non-flexible,
                             so it still collapses toward 0 before either fr
                             track gives anything up. */
    minmax(105px, 130px)  /* amount — grows when there is room; the extra sits
                             to the LEFT because the cell is right-aligned, so
                             it is width for the number, not a bigger gap. */
    minmax(84px, 110px)   /* valid till — the 10px padding below is what
                             actually separates "Expired" from the amount. */
    92px                  /* status */
    44px;                 /* kebab */
  gap: 8px;
}

/* .wt-c sets min-width:0 but NOT overflow, so a nowrap child escaped into the
   next column. Every cell clips to its own track and the spans ellipsise
   inside it. */
.qt-row > .wt-c { overflow: hidden; }
/* The kebab cell holds the hidden .qtl-send (position:absolute) and anchors a
   menu — clipping it would hide the very button the menu clicks. */
.qt-row > .qt-c7 { overflow: visible; }

/* ── Date ── */
.qt-c0 { flex-direction: row; align-items: center; gap: 6px; }
.qt-date {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
}
.qt-date-d { flex: 0 0 auto; }
.qt-date-d {
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.qt-date-m {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* A past event date is context, not an alert — muted, never red. */
.qt-date.is-past .qt-date-d { color: var(--text-muted); }
.qt-nodate { font-size: 0.72rem; color: var(--text-muted); }

/* ── Quotation ── */
.qt-c1 { flex-direction: column; align-items: flex-start; gap: 1px; justify-content: center; }
/* Same reason as .bk-name: text-overflow does not apply to an anonymous flex
   item, so the title needs its own shrinkable span or it pushes the version
   badge out of the cell. */
.qt-title {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
}
.qt-title-t {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qtl-ver { flex: 0 0 auto; }
.qt-num {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* ── Client: name with the phone + a small copy button under it ── */
.qt-c2 { flex-direction: column; align-items: flex-start; gap: 1px; justify-content: center; }
.qt-client { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.qt-phone-row { display: flex; align-items: center; gap: 2px; min-width: 0; max-width: 100%; }
.qt-phone {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Hidden until row hover — a permanent icon on every row competes with the
   name, and this is a convenience, not a primary action. */
.qt-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.qt-copy .material-symbols-rounded { font-size: 13px; }
.qt-row:hover .qt-copy,
.qt-copy:focus-visible { opacity: 1; }
.qt-copy:hover { background: var(--primary-100, #E0F2FE); color: var(--primary); }
/* Touch gets no :hover, and 20px is under the 44px a finger needs — so it
   stays visible AND the hit area grows, without changing the row height. */
@media (hover: none) {
  .qt-copy { opacity: 1; width: 44px; height: 44px; margin: -12px 0; }
}

/* ── Venue ── */
.qt-c3 { flex-direction: column; align-items: flex-start; gap: 1px; justify-content: center; }
.qt-venue { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.qt-events { font-size: 0.68rem; font-weight: 700; color: var(--primary); }

/* ── Amount ── */
.qt-c4 { align-items: flex-end; justify-content: center; }
.qt-amt {
  font-size: 0.9rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ── Valid till ── */
/* quotations.php ENFORCES valid_until — an expired quote is refused on the
   client view — so "Expired" here is a fact, not a hint. It only shouts while
   the quote is still in play; once accepted/booked/rejected it greys out. */
/* Amount is right-aligned and this cell is left-aligned, so the only thing
   between the two numbers was the 8px track gap. */
.qt-c5 { align-items: flex-start; justify-content: center; padding-left: 10px; }
.qt-valid {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  max-width: 100%;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qt-valid.is-done { color: var(--text-muted); font-weight: 600; }
.qt-valid.is-soon { color: #92400E; }
.qt-valid.is-expired { color: var(--danger, #dc2626); }
.qt-valid-n { font-size: 0.64rem; font-weight: 800; opacity: 0.85; }
.qt-noamt { color: var(--text-muted); }

/* ── Status ── */
.qt-c6 { align-items: flex-start; justify-content: center; }

/* ── Actions ── */
/* The row keeps its REAL .qtl-send button so quotation.js still wires it; the
   kebab clicks it. Hidden without display:none, which would also stop the
   click from dispatching in some engines. */
.qt-send-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.qt-c7 { flex-direction: row; align-items: center; justify-content: flex-end; position: relative; }
.qt-kebab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.qt-kebab:hover,
.qt-kebab[aria-expanded="true"] {
  background: var(--primary-100, #E0F2FE);
  border-color: var(--border-light, transparent);
  color: var(--primary);
}
.qt-kebab .material-symbols-rounded { font-size: 20px; }

/* ── Kebab popover ── */
/* position:fixed — the table scrolls horizontally inside its own box, so an
   absolutely positioned menu would ride away from its button. */
.qt-pop {
  position: fixed;
  z-index: 1200;
  min-width: 196px;
  padding: 5px;
  background: var(--card, #fff);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 32px rgba(0,0,0,0.16);
  animation: qtPopIn 0.13s ease-out;
}
@keyframes qtPopIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.qt-pop-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 38px;
  padding: 7px 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-primary);
  font-size: 0.83rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.qt-pop-item:hover,
.qt-pop-item:focus-visible { background: var(--primary-100, #E0F2FE); outline: none; }
.qt-pop-i { font-size: 18px; flex: 0 0 auto; color: var(--text-secondary); }

/* Delete sits last and reads as destructive before it is pressed. It still
   goes through delete_preview + confirm — the colour is a warning, not the
   guard. */
.qt-pop-item.is-danger { color: var(--danger, #dc2626); }
.qt-pop-item.is-danger .qt-pop-i { color: var(--danger, #dc2626); }
.qt-pop-item.is-danger:hover,
.qt-pop-item.is-danger:focus-visible { background: rgba(220,38,38,0.08); }
.qt-pop-item.is-danger { margin-top: 4px; border-top: 1px solid var(--border-light, var(--border)); padding-top: 9px; }
.qt-pop-item:hover .qt-pop-i { color: var(--primary); }
.qt-pop-l { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Select mode: the checkbox takes the date cell's left edge. */
.qt-row .q-select-cb {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  cursor: pointer;
  flex: 0 0 auto;
}

/* The hub is capped for a card grid; a seven-column table needs the room. */
.quotations-page.has-qt-table,
.qt-has-table { max-width: none; }

/* Below the table's floor the list view falls back to the stacked cards. */
@media (max-width: 1119px) {
  .qt-table { display: none; }
}

/* ===== css/bookings-table.css ===== */
/* =====================================================
   SahiHisab — Bookings desktop table
   Column grid + the cells unique to this page. Everything else — sticky
   header, row hover, width cap, scrollbar headroom — comes from
   css/walk-in-table.css via .wt-*, so this file must load AFTER it.
   ===================================================== */

/* The wrapper is .orders-grid, which at >=1024px is a CARD grid. Left alone
   the table becomes a grid ITEM sized to one card track while its own row grid
   overflows it (the exact bug the Quotations table shipped with). The table
   owns its width, so the wrapper stops being a grid for this one case. */
.orders-grid.bk-is-table {
  display: block;
  grid-template-columns: none;
  gap: 0;
  max-width: none;
}

/* client | event | date | venue | payment | status | kebab
   Seven columns now, so the fixed widths came down to keep the 1120px floor.
   Usable there is  window − sidebar(260) − page padding(48) − table margin(32)
   − scrollbar(17) = 763px.
     fixed 95 + 155 + 165 + 44 = 459, gaps 6×10 = 60, padding 28 → 547,
     plus the client floor 150 and the event floor 60 = 757, clearing 763px
     by 6 — which is all VENUE gets at the narrowest. Every one of the three
     text columns ellipsises, so none of them pushes the row wider. */
.bk-row {
  grid-template-columns:
    minmax(150px, 1.3fr)  /* client + phone */
    minmax(60px, 1fr)     /* event — floored, see VENUE below */
    95px                  /* date */
    minmax(0, 160px)      /* venue — capped; venues are short names, so the
                             slack belongs to CLIENT and EVENT. A non-flexible
                             track is fed before the fr ones, hence EVENT's
                             floor: without it venue would eat the last 66px
                             at 1120 and leave event at zero. Still collapses
                             toward 0 once there is no free space at all. */
    155px                 /* payment — "\20B91,95,000 / \20B91,95,000" needs ~150 */
    165px                 /* status chips — fits the common 2-chip row on one line */
    44px;                 /* kebab */
  gap: 10px;
}

/* .wt-c sets min-width:0 but NOT overflow, so any nowrap child escaped into
   the next column — that is why "\20B91,95,000 / \20B91,95,000" was touching the
   status badge. Every cell clips to its own track; the text spans below
   ellipsise inside it. The two chip cells opt back out: chips wrap, they
   never overflow, and hiding overflow there would cut a wrapped second row. */
.bk-row > .wt-c { overflow: hidden; }
.bk-row > .bk-c5 { overflow: visible; }
/* The kebab cell holds the hidden real action buttons (position:absolute) and
   anchors a menu — clipping it would hide the buttons the menu clicks. */
.bk-row > .bk-c6 { overflow: visible; }

/* A cancelled booking is dimmed exactly as the card dims it. */
.bk-row.is-cancelled { opacity: 0.6; }

/* ── Client ── */
.bk-name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bk-name-stack { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.bk-avatar,
.bk-avatar-img {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
}
.bk-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-100, #E0F2FE);
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 800;
}
.bk-avatar-img { display: block; object-fit: cover; }

/* text-overflow does NOT apply to an anonymous flex item, so a bare text node
   here could not ellipsise — it overflowed and shoved the D badge out of the
   cell. The name gets its own shrinkable span; the badge stays put. */
.bk-name {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
}
.bk-name-t {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bk-d {
  flex: 0 0 auto;
  padding: 1px 5px;
  border: 1px solid var(--primary);
  border-radius: 5px;
  background: var(--primary-50, #E0F2FE);
  color: var(--primary);
  font-size: 0.6rem;
  font-weight: 800;
  line-height: 1.4;
}
/* ── Phone + copy (under the client name) ── */
.bk-phone-row { display: flex; align-items: center; gap: 2px; min-width: 0; }
.bk-phone {
  font-size: 0.74rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The copy button only appears on row hover or keyboard focus — a permanent
   icon on every row competes with the name for attention, and this is a
   convenience, not a primary action. */
.bk-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.bk-copy .material-symbols-rounded { font-size: 14px; }
.bk-row:hover .bk-copy,
.bk-copy:focus-visible { opacity: 1; }
.bk-copy:hover { background: var(--primary-100, #E0F2FE); color: var(--primary); }
/* Touch devices never get :hover, so the icon stays visible there — and a
   22px target is below the 44px floor a finger needs, so it grows too. The
   glyph stays 14px; only the hit area changes. */
@media (hover: none) {
  .bk-copy { opacity: 1; width: 44px; height: 44px; margin: -11px 0; }
}

/* ── Event ── */
.bk-c1 { align-items: flex-start; justify-content: center; }
.bk-event {
  font-size: 0.8rem;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* ── Date ── */
.bk-c2 { flex-direction: column; align-items: flex-start; gap: 1px; justify-content: center; }
.bk-date {
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.bk-more { font-size: 0.66rem; font-weight: 700; color: var(--primary); }

/* ── Venue ── */
.bk-venue { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.bk-dash { color: var(--text-muted); }

/* ── Payment ── */
/* Paid / total on one line, a thin bar under it, then the balance. The card's
   full-width 8px bar is what made every row ~230px tall. */
.bk-c4 { flex-direction: column; align-items: flex-start; gap: 3px; justify-content: center; }
.bk-pay-top {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  font-variant-numeric: tabular-nums;
}
.bk-paid {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--success, #10b981);
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bk-paid.is-off { color: var(--text-muted); }
/* The "of total" half gives way first — the amount PAID is the number being
   compared down the column; the total is context. */
.bk-of {
  font-size: 0.7rem;
  color: var(--text-secondary);
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bk-bar {
  display: block;
  width: 100%;
  height: 4px;
  border-radius: 3px;
  background: var(--danger, #dc2626);
  overflow: hidden;
}
.bk-bar.is-off { background: var(--gray-200, #E4E4E7); }
.bk-bar-fill { display: block; height: 100%; border-radius: 3px; background: var(--success, #10b981); }
.bk-bar.is-off .bk-bar-fill { background: var(--text-muted); }

.bk-due {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--danger, #dc2626);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.bk-due.is-off { color: var(--text-muted); }
.bk-pct { font-size: 0.7rem; font-weight: 700; color: var(--success, #10b981); }
.bk-mask { color: var(--text-muted); font-weight: 700; }

/* ── Status chips ── */
/* Chips wrap, but the set is now small enough that most rows sit on one line:
   the "Done" chip is gone (the PAYMENT column said it), a past days-ago chip
   is gone (the DATE column said it), and 'delivered' is dropped when the
   status badge already says completed. Worst case is two lines. */
.bk-c5 {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  gap: 3px;
  row-gap: 3px;
}
/* The status badge is the canonical one — keep it from being out-sized by
   the smaller chips beside it. */
.bk-c5 .status-badge { font-size: 0.66rem; }
.bk-chip {
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.63rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  background: var(--gray-100, #F4F4F5);
  color: var(--text-secondary);
}
.bk-chip--soon      { background: #FEF3C7; color: #92400E; }
.bk-chip--today     { background: var(--danger-light, #FEE2E2); color: #ef4444; }
.bk-chip--past      { background: var(--gray-100, #F4F4F5); color: var(--text-secondary); }
.bk-chip--delivered { background: var(--success-light, #DCFCE7); color: var(--success); }
.bk-chip--editing   { background: var(--warning-light, #FEF3C7); color: #92400E; }
.bk-chip--partial   { background: var(--info-light, #E0F2FE); color: #0369A1; }
.bk-chip--done      { background: var(--success-light, #DCFCE7); color: var(--success); }

/* ── Actions ── */
/* The REAL buttons orders.js wires stay in the row so its selectors still find
   them; the kebab clicks them. Hidden WITHOUT display:none, which would stop
   .click() dispatching in some engines. */
.bk-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.bk-c6 {
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  position: relative;
}
.bk-taskn {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--primary-50, #E0F2FE);
  color: var(--primary);
  font-size: 0.66rem;
  font-weight: 800;
}
.bk-kebab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.bk-kebab:hover,
.bk-kebab[aria-expanded="true"] {
  background: var(--primary-100, #E0F2FE);
  border-color: var(--border-light, transparent);
  color: var(--primary);
}
.bk-kebab .material-symbols-rounded { font-size: 20px; }

/* ── Kebab popover ── */
.bk-pop {
  position: fixed;
  z-index: 1200;
  min-width: 196px;
  padding: 5px;
  background: var(--card, #fff);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 32px rgba(0,0,0,0.16);
  animation: bkPopIn 0.13s ease-out;
}
@keyframes bkPopIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bk-pop-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 38px;
  padding: 7px 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-primary);
  font-size: 0.83rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.bk-pop-item:hover,
.bk-pop-item:focus-visible { background: var(--primary-100, #E0F2FE); outline: none; }
.bk-pop-i { font-size: 18px; flex: 0 0 auto; color: var(--text-secondary); }
.bk-pop-item:hover .bk-pop-i { color: var(--primary); }
.bk-pop-l { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Below the table's floor the list view falls back to the stacked cards. */
@media (max-width: 1119px) {
  .bk-table { display: none; }
}

/* ===== css/shortcuts.css ===== */
/* =====================================================
   SahiHisab — Keyboard shortcuts (js/shortcuts.js)
   The floating keyboard button, the "g …" sequence chip, and the cheat-sheet
   laid out inside SH.modal.
   ===================================================== */

/* ── Floating button ──────────────────────────────────
   Hidden everywhere by default: this is a physical-keyboard affordance, and
   on a phone it would only take a slot from WhatsApp. It appears at 1024px,
   the same floor js/shortcuts.js gates the key layer on. */
.sh-kbd-fab { display: none; }

@media (min-width: 1024px) {
  /* Bottom of the right-edge stack, BELOW the WhatsApp button — so the two
     floaters above it (WhatsApp, then the feedback pill) each step up by one
     slot: 28 + 44 + 12 = 84, then 84 + 44 + 12 = 140. */
  .sh-kbd-fab {
    position: fixed;
    right: 16px;
    bottom: 28px;
    z-index: 998;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--card);
    color: var(--text-secondary);
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(0,0,0,0.12);
    transition: transform 0.2s, box-shadow 0.2s, color 0.2s, border-color 0.2s;
  }
  .sh-kbd-fab:hover {
    transform: scale(1.08);
    color: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 5px 16px rgba(0,0,0,0.18);
  }
  .sh-kbd-fab:active { transform: scale(0.95); }
  .sh-kbd-fab .material-symbols-rounded { font-size: 22px; }

  /* The two floaters above it move up one slot each. Scoped to
     :not(.pwa-installable): while the install button is showing it takes the
     bottom slot and the whole stack is already shifted by its own rules —
     adding a fourth circle there would pile them up, so the keyboard button
     simply steps aside (below) until the prompt is gone. */
  body:not(.pwa-installable) .sh-wa-float { bottom: 84px; }
  body:not(.pwa-installable) .fb-pill { bottom: 140px; }
  body:not(.pwa-installable) .fb-help-bubble { bottom: 198px; }

  body.pwa-installable .sh-kbd-fab { display: none; }
}

/* Same retreats the other floaters already make: a modal, a sheet, a wizard
   or print must not have a keyboard button floating over it. */
body.modal-open .sh-kbd-fab,
body.sidebar-open .sh-kbd-fab,
body:has(.wizard-wrap) .sh-kbd-fab,
html.bm-open .sh-kbd-fab {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
@media print { .sh-kbd-fab, .sh-kbd-seq { display: none; } }

/* ── "g …" sequence chip ──────────────────────────────
   Shown for the 1.5s window after g. Without it a half-typed sequence is
   indistinguishable from the app ignoring the key. */
.sh-kbd-seq {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 1150;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(17,24,39,0.92);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  animation: shKbdSeqIn 0.12s ease-out;
  pointer-events: none;
}
@keyframes shKbdSeqIn {
  from { opacity: 0; transform: translateX(-50%) translateY(6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.sh-kbd-seq kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(255,255,255,0.16);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
}
.sh-kbd-seq-dots { opacity: 0.7; letter-spacing: 0.08em; }

/* ── Cheat-sheet ──────────────────────────────────────
   Two columns on a desktop modal, one below the other if the modal is ever
   narrower than the pair needs. */
.sh-kbd-sheet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 10px 28px;
}
@media (max-width: 720px) {
  .sh-kbd-sheet { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

.sh-kbd-col { min-width: 0; }

.sh-kbd-colhead {
  margin: 2px 0 8px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.sh-kbd-col--nav { border-left: 1px solid var(--border-light, var(--border)); padding-left: 24px; }
@media (max-width: 720px) {
  .sh-kbd-col--nav { border-left: 0; padding-left: 0; margin-top: 14px; }
}

.sh-kbd-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 7px 4px;
  border: 0;
  border-bottom: 1px solid var(--border-light, var(--border));
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  text-align: left;
}
.sh-kbd-row:last-child { border-bottom: 0; }

/* Navigation rows double as buttons for anyone who opened the sheet with a
   mouse and does not want to learn the keys. */
.sh-kbd-row--go { cursor: pointer; border-radius: 8px; }
.sh-kbd-row--go:hover,
.sh-kbd-row--go:focus-visible {
  background: var(--primary-100, #E0F2FE);
  outline: none;
}

.sh-kbd-keys {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  min-width: 76px;
}

.sh-kbd-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--card);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
}

.sh-kbd-label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 0.88rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sh-kbd-i { font-size: 18px; color: var(--text-muted); flex: 0 0 auto; }
.sh-kbd-row--go:hover .sh-kbd-i { color: var(--primary); }

.sh-kbd-foot {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border-light, var(--border));
  font-size: 0.78rem;
  color: var(--text-secondary);
}

/* ===== css/dashboard-mobile.css ===== */
/* =====================================================
   SahiHisab — Mobile Dashboard Styles
   Floating tab bar, Aaj Ka Summary, Quick Actions
   ===================================================== */

/* ─── Floating Tab Bar ──────────────────────────────
   z-index 999 sits below .modal-overlay (1100) so modals take visual
   priority — the tabbar hides behind any open modal/bottom sheet,
   preventing overlap with the modal's primary action buttons. */
.floating-tabbar {
  position: fixed;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  left: 14px;
  right: 14px;
  height: 62px;
  background: var(--card);
  border-radius: 22px;
  border: 1px solid hsla(210, 25%, 88%, 0.7);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  z-index: 999;
  box-shadow: 0 10px 30px hsla(210, 35%, 20%, 0.13), 0 2px 8px hsla(210, 30%, 20%, 0.05);
  /* visibility listed so the P10 visibility:hidden below (ghost-tab-stop fix)
     defers to the end of the slide-out — same discrete-property transition
     timing the quick-create-sheet already relies on (app.css) — instead of
     killing the animation by hiding instantly. */
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.32s;
}

/* Scroll-direction-aware tab bar during a wizard (WhatsApp/Chrome style):
   SH.tabbarScroll toggles body.sh-tabhide on scroll-down/up. Default wizard
   state = tab bar visible; only sh-tabhide slides it away. Covers both the
   walk-in (body.wizard-active) and quotation (.wizard-wrap) wizards. env()
   extends the travel so it fully clears the safe-area inset. */
body.wizard-active.sh-tabhide .floating-tabbar,
body:has(.wizard-wrap).sh-tabhide .floating-tabbar {
  transform: translateY(calc(100% + 30px + env(safe-area-inset-bottom, 0px)));
  pointer-events: none;
  /* P10: without this the slid-away tabbar's links were still real tab
     stops — Tab would silently land on an invisible item. Mirrors the
     quick-create-sheet closed-state convention (app.css). */
  visibility: hidden;
}

.floating-tabbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.floating-tabbar-item .material-symbols-rounded {
  font-size: 1.35rem;
  color: var(--text-secondary);
  transition: color 150ms ease;
}

.floating-tabbar-item span:last-child {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.69rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color 150ms ease;
}

.floating-tabbar-item.active .material-symbols-rounded {
  color: var(--primary);
  font-variation-settings: 'FILL' 1, 'wght' 500;
}

.floating-tabbar-item.active span:last-child {
  color: var(--primary);
  font-weight: 700;
}

.floating-tabbar-fab {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, hsl(200, 85%, 50%), hsl(200, 82%, 40%));
  color: #fff;
  border: 3px solid var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 7px 18px hsla(200, 80%, 44%, 0.42);
  transition: transform 150ms ease, box-shadow 150ms ease;
  flex-shrink: 0;
  margin: 0 4px;
  transform: translateY(-12px);   /* raise above the bar — premium floating center */
}

.floating-tabbar-fab:active {
  transform: translateY(-12px) scale(0.92);
}

.floating-tabbar-fab .material-symbols-rounded {
  font-size: 1.5rem;
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.floating-tabbar-fab.open .material-symbols-rounded {
  transform: rotate(45deg);
}

/* v1 fallback for pill-wrapped navs (rental mode-nav, nav-v2 markup):
   under v1 the bar itself is the card, so the pill is just a flex row and
   the gear an inline item. nav-v2.css overrides all of this under v2. */
.floating-tabbar .ft-pill {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.floating-tabbar-item.ft-gear {
  flex: 0 0 48px;
}

.floating-tabbar-item.ft-gear .material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
}

/* Hide old bottom-nav (replaced by floating tabbar) */
.bottom-nav {
  display: none !important;
}

/* Hide floating tabbar on desktop (sidebar handles navigation) */
@media (min-width: 769px) {
  .floating-tabbar {
    display: none !important;
  }

  .quick-create-sheet,
  .quick-create-backdrop {
    display: none !important;
  }
}

/* ─── Mobile Stat Cards 2x2 Grid ─────────────────── */
.stats-grid-mobile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.stat-card-mobile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--card);
  border-radius: 14px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform 100ms ease;
}

.stat-card-mobile:active {
  transform: scale(0.97);
}

.stat-card-mobile-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-card-mobile-icon .material-symbols-rounded {
  font-size: 1.1rem;
}

.stat-card-mobile-value {
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--foreground);
  line-height: 1.2;
}

.stat-card-mobile-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* ─── Payment Dues Alert (Mobile) ─────────────────── */
.payment-dues-alert {
  background: hsl(0, 70%, 97%);
  border: 1px solid hsl(0, 70%, 90%);
  border-radius: 16px;
  padding: 14px 16px;
}

.payment-dues-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.payment-dues-header .material-symbols-rounded {
  font-size: 1.1rem;
  color: var(--destructive);
}

.payment-dues-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--destructive);
}

.payment-dues-badge {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: var(--destructive);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.69rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.payment-dues-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid hsl(0, 70%, 90%);
}

.payment-dues-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.payment-dues-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--foreground);
}

.payment-dues-detail {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.payment-dues-amount {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--destructive);
  flex-shrink: 0;
}

/* ─── Mobile text truncation ────────────────── */
@media (max-width: 768px) {
  .stat-card-mobile-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ─── Phase 5 Verfication Fixes ────────────────── */
/* Fix 1: Aaj Ka Summary Desktop Layout */
.aaj-ka-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.aaj-summary-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid currentColor;
  border-radius: 16px;
  padding: 20px 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.aaj-summary-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.aaj-summary-value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.aaj-summary-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  /* Fix 1/Fix 3: Aaj Ka Summary strictly 2x2 grid mobile override */
  body .aaj-ka-summary {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  /* Phase 5/12: Dashboard upcoming bookings space-between & no overflow */
  body .dash-grid .client-row {
    display: flex;
    justify-content: space-between;
  }
  
  body .dash-grid .client-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body .dash-grid .client-name,
  body .dash-grid .client-phone {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body .dash-grid .client-balance {
    display: block;
    flex-shrink: 0;
    margin-left: 8px;
  }

  /* Fix 3: Analytics page stat cards to 2-col with no overflow */
  body .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .stat-card {
    min-width: 0;
    overflow: hidden;
  }
  .stat-card > div,
  .stat-value,
  .stat-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
/* =====================================================
   Phase 15: Final 375px Fixes (Orders, Analytics, Tooltips, Toggles)
   ===================================================== */

@media (max-width: 768px) {
  /* Fix 1: Orders stat cards text truncating */
  body #ordersList ~ .stats-grid .stat-label, 
  body .stats-grid .stat-label {
    white-space: normal;
    line-height: 1.2;
    font-size: clamp(0.65rem, 2vw, 0.8rem);
  }

  /* Fix 2: Orders filter pills wrapping 2 rows */
  body .wi-filters, 
  body [data-filter] {
    overflow-x: auto;
    white-space: nowrap;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body .wi-filters::-webkit-scrollbar,
  body [data-filter]::-webkit-scrollbar {
    display: none;
  }
  body .d-flex.gap-sm.mb-xl {
    flex-wrap: nowrap;
  }

  /* Fix 3: Analytics header period pills */
  body [data-period] {
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  body .d-flex.gap-sm.mb-xl {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body .d-flex.gap-sm.mb-xl::-webkit-scrollbar {
    display: none;
  }
}

/* Fix 4: Tooltip text invisible in dark mode */
body.dark-mode .tooltip-icon[data-tooltip]::after,
body.dark-mode .tooltip-icon:hover::after,
body.dark-mode .tooltip-icon:focus::after,
body.dark-mode .tooltip-icon.tooltip-active::after {
  background: var(--card);
  color: var(--text-primary);
  border: 1px solid var(--border);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

/* Fix 5: Settings Toggle slider broken */
body .toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  margin: 0;
}
body .toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
body .toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--border);
  transition: .3s;
  border-radius: 24px;
}
body .toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
body .toggle-switch input:checked + .toggle-slider {
  background-color: var(--primary);
}
body .toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(20px);
}
body.dark-mode .toggle-switch input:checked + .toggle-slider,
body.dark-mode .toggle-switch input:not(:checked) + .toggle-slider {
  background-color: var(--card);
  border: 1px solid var(--border);
}
body.dark-mode .toggle-switch input:checked + .toggle-slider {
  background-color: var(--primary);
  border-color: var(--primary);
}

/* ===== css/finance.css ===== */
/* =====================================================
   SahiHisab — Finance Page Styles (Redesign v2)
   Overview, Payments, Expenses, Track Record tabs
   Area chart, hero banner, animated strips
   ===================================================== */

/* ─── Tab Navigation ──────────────────────── */
/* Segmented pills on a white track, per the wireframe.
   Sticky below the app header (SH.stickyTabsTop adjusts when the
   page-content is the scroller), with an opaque apron so list content
   disappears behind the rounded track instead of sliding around it. */
.finance-tabs {
  position: sticky;
  top: var(--header-height, 60px);
  z-index: 30;
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 100px;
  box-shadow: 0 1px 3px rgba(16, 42, 67, 0.05);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.finance-tabs::-webkit-scrollbar { display: none; }

.finance-tabs::before {
  content: '';
  position: absolute;
  left: -16px;
  right: -16px;
  top: -14px;
  bottom: -2px;
  background: var(--background);
  z-index: -1;
}

.finance-tab {
  height: 44px;
  padding: 0 16px;
  border-radius: 100px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  border: 0;
  background: var(--primary-100);
  color: var(--primary-800);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
  display: flex;
  align-items: center;
  gap: 6px;
  -webkit-tap-highlight-color: transparent;
}

.finance-tab:hover { background: var(--primary-200); }

:root.dark-mode .finance-tab {
  background: hsla(200, 75%, 50%, 0.16);
  color: hsl(200, 85%, 74%);
}

:root.dark-mode .finance-tab:hover { background: hsla(200, 75%, 50%, 0.26); }
.finance-tab .material-symbols-rounded { font-size: 1rem; }
.finance-tab:active { transform: scale(0.96); }
body .finance-tab.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  font-weight: 600;
}

/* ─── Tab Content Switching ──────────────── */
.finance-tab-content { display: none; }
.finance-tab-content.active { display: block; }

/* ═══════════════════════════════════════════════
   HERO STATS BANNER
   ═══════════════════════════════════════════════ */
.fin-hero {
  margin: var(--space-md, 16px) 16px;
  border-radius: 20px;
  padding: var(--space-lg, 24px) var(--space-lg, 24px) var(--space-md, 16px);
  background: linear-gradient(135deg, hsl(215, 45%, 14%) 0%, hsl(200, 55%, 20%) 50%, hsl(215, 40%, 16%) 100%);
  color: #fff;
  position: relative;
  overflow: visible;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
/* Glow effects contained in a clipped inner layer */
.fin-hero::before {
  content: '';
  position: absolute; inset: 0; border-radius: 20px;
  overflow: hidden; pointer-events: none;
  background:
    radial-gradient(circle at 90% 10%, hsla(200, 80%, 50%, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 10% 90%, hsla(152, 60%, 50%, 0.1) 0%, transparent 50%);
}
.fin-hero-label {
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; opacity: 0.65; margin-bottom: 4px;
}
.fin-hero-amount {
  font-family: 'Outfit', sans-serif; font-size: 2.2rem; font-weight: 900;
  letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 2px;
  white-space: nowrap; overflow: visible;
}
.fin-hero-sub {
  font-size: 0.78rem; opacity: 0.6; margin-bottom: var(--space-md, 16px);
}
.fin-hero-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
  position: relative; z-index: 1;
}
.fin-hero-stat {
  padding: 10px; border-radius: 12px;
  background: hsla(0, 0%, 100%, 0.08);
  border: 1px solid hsla(0, 0%, 100%, 0.08);
}
.fin-hero-stat-label {
  font-size: 0.65rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; opacity: 0.55; margin-bottom: 2px;
}
.fin-hero-stat-value {
  font-family: 'Outfit', sans-serif; font-size: 1.15rem; font-weight: 800;
  white-space: nowrap; overflow: visible;
}
.fin-hero-stat[data-type="revenue"] .fin-hero-stat-value { color: hsl(152, 70%, 60%); }
.fin-hero-stat[data-type="expense"] .fin-hero-stat-value { color: hsl(0, 70%, 68%); }
.fin-hero-stat[data-type="dues"] .fin-hero-stat-value { color: hsl(38, 85%, 65%); }

/* ═══ REVENUE / EXPENSE BREAKDOWN STRIP ═══ */
.fin-breakdown-strip {
  margin: 0 16px var(--space-md, 16px);
  display: flex; gap: 8px; overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.fin-breakdown-strip::-webkit-scrollbar { display: none; }

.fin-strip-card {
  flex: 1; min-width: 110px;
  padding: 12px 14px;
  background: var(--card);
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  position: relative; overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
  cursor: pointer;
}
.fin-strip-card:active { transform: scale(0.97); }
@media (hover: hover) {
  body .fin-strip-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-1px); }
}
.fin-strip-card::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
}
.fin-strip-card[data-src="booking"]::before { background: #3b82f6; }
.fin-strip-card[data-src="walkin"]::before { background: #8b5cf6; }
.fin-strip-card[data-src="rental"]::before { background: #0ea5e9; }
.fin-strip-card[data-src="studio"]::before { background: #ef4444; }
.fin-strip-card[data-src="cogs"]::before { background: #f97316; }
.fin-strip-card[data-src="team"]::before { background: #ec4899; }

.fin-strip-icon {
  width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
}
.fin-strip-icon .material-symbols-rounded { font-size: 1rem; }
.fin-strip-card[data-src="booking"] .fin-strip-icon { background: #3b82f615; color: #3b82f6; }
.fin-strip-card[data-src="walkin"] .fin-strip-icon { background: #8b5cf615; color: #8b5cf6; }
.fin-strip-card[data-src="rental"] .fin-strip-icon { background: #0ea5e915; color: #0ea5e9; }
.fin-strip-card[data-src="studio"] .fin-strip-icon { background: #ef444415; color: #ef4444; }
.fin-strip-card[data-src="cogs"] .fin-strip-icon { background: #f9731615; color: #f97316; }
.fin-strip-card[data-src="team"] .fin-strip-icon { background: #ec489915; color: #ec4899; }

.fin-strip-label {
  font-size: 0.68rem; font-weight: 600; color: var(--text-muted, #999);
  margin-bottom: 2px;
}
.fin-strip-value {
  font-family: 'Outfit', sans-serif; font-size: 1.05rem; font-weight: 800;
  color: var(--text-primary, #111); line-height: 1.2;
  white-space: nowrap; overflow: visible;
}

/* ═══ SEGMENTED PROGRESS BAR ═══ */
.fin-segmented-bar {
  margin: 0 16px var(--space-md, 16px);
  background: var(--card);
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.fin-seg-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.fin-seg-title {
  font-family: 'Outfit', sans-serif; font-size: 0.85rem; font-weight: 700;
  color: var(--text-primary, #111);
}
.fin-seg-total {
  font-family: 'Outfit', sans-serif; font-size: 0.85rem; font-weight: 800;
  color: var(--text-primary, #111); white-space: nowrap; overflow: visible;
}
.fin-seg-track {
  height: 10px; border-radius: 5px; background: var(--gray-200, #e5e5e5);
  display: flex; overflow: hidden; gap: 2px;
}
.fin-seg-fill {
  height: 100%; border-radius: 5px;
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.fin-seg-fill[data-seg="booking"] { background: #3b82f6; }
.fin-seg-fill[data-seg="walkin"] { background: #8b5cf6; }
.fin-seg-fill[data-seg="rental"] { background: #0ea5e9; }
.fin-seg-legend {
  display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap;
}
.fin-seg-legend-item {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.7rem; font-weight: 600; color: var(--text-secondary, #666);
}
.fin-seg-legend-dot { width: 8px; height: 8px; border-radius: 50%; }

/* ═══ AREA CHART ═══ */
.fin-chart-card {
  margin: 0 16px var(--space-md, 16px);
  background: var(--card);
  border-radius: 16px;
  border: 1px solid var(--border);
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.fin-chart-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.fin-chart-title {
  font-family: 'Outfit', sans-serif; font-size: 0.95rem; font-weight: 700;
  color: var(--text-primary, #111); display: flex; align-items: center; gap: 6px;
}
.fin-chart-title .material-symbols-rounded { font-size: 1.1rem; color: var(--primary); }
.fin-chart-toggle {
  font-family: 'DM Sans', sans-serif; font-size: 0.75rem;
  color: var(--text-secondary); background: var(--secondary, #f0f0f0);
  padding: 4px 10px; border-radius: 8px; cursor: pointer;
  border: none; transition: background 0.15s;
}
.fin-chart-toggle:active { opacity: 0.8; }

.fin-chart-svg-wrap {
  position: relative; width: 100%; overflow: visible;
}
.fin-chart-svg-wrap svg {
  width: 100%; height: auto; display: block; max-height: 200px;
}

/* Desktop: chart + dues side by side */
.fin-chart-dues-row {
  display: flex; flex-direction: column; gap: 16px;
  margin: 0 16px var(--space-md, 16px);
}
.fin-chart-dues-row > .fin-chart-card,
.fin-chart-dues-row > .fin-dues-card {
  margin: 0;
}
@media (min-width: 769px) {
  .fin-chart-dues-row {
    flex-direction: row; align-items: stretch;
  }
  .fin-chart-dues-row > .fin-chart-card {
    flex: 1; min-width: 0;
  }
  .fin-chart-dues-row > .fin-dues-card {
    width: 280px; flex-shrink: 0;
  }
  .fin-chart-svg-wrap svg {
    max-height: 300px;
  }
}
@media (min-width: 1200px) {
  .fin-chart-dues-row > .fin-dues-card {
    width: 320px;
  }
  .fin-chart-svg-wrap svg {
    max-height: 340px;
  }
}
.fin-area-income {
  fill: none; stroke: hsl(152, 68%, 42%);
  stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round;
}
.fin-area-expense {
  fill: none; stroke: hsl(0, 68%, 56%);
  stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round;
}
.fin-chart-dot {
  r: 4; stroke-width: 2; stroke: var(--card);
  transition: r 0.15s ease; cursor: pointer;
}
.fin-chart-dot:hover { r: 6; }
.fin-chart-dot.active { r: 6.5; filter: drop-shadow(0 1px 3px rgba(15, 23, 42, 0.25)); }
.fin-chart-dot.income { fill: hsl(152, 68%, 42%); }
.fin-chart-dot.expense { fill: hsl(0, 68%, 56%); }
/* Vertical crosshair shown while hovering/tapping a month column */
.fin-chart-guide {
  stroke: var(--text-muted, #94a3b8); stroke-width: 1; stroke-dasharray: 3 3;
  opacity: 0; transition: opacity 0.12s ease; pointer-events: none;
}
.fin-chart-gridline {
  stroke: var(--border-light, #eee); stroke-width: 1; stroke-dasharray: 4 4;
}
body.dark-mode .fin-chart-gridline { stroke: var(--border); }
.fin-chart-x-label {
  font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 600;
  fill: var(--text-muted, #999); text-anchor: middle;
}
.fin-chart-y-label {
  font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 500;
  fill: var(--text-muted, #999); text-anchor: end;
}

/* Tooltip on dot hover/touch */
.fin-chart-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--foreground, #111);
  color: var(--card, #fff);
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.fin-chart-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--foreground, #111);
}
body.dark-mode .fin-chart-tooltip {
  background: hsl(210, 18%, 88%);
  color: hsl(215, 28%, 10%);
}
body.dark-mode .fin-chart-tooltip::after {
  border-top-color: hsl(210, 18%, 88%);
}
/* Flipped tooltip (arrow points up, tooltip below dot) */
.fin-chart-tooltip.flip-below::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--foreground, #111);
}
body.dark-mode .fin-chart-tooltip.flip-below::after {
  border-top-color: transparent;
  border-bottom-color: hsl(210, 18%, 88%);
}

.fin-chart-legend {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border-light, #eee);
}
.fin-chart-legend-item {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.72rem; font-weight: 600; color: var(--text-secondary, #666);
}
.fin-chart-legend-dot { width: 8px; height: 8px; border-radius: 50%; }

/* ═══ PENDING DUES ═══ */
.fin-dues-card {
  margin: 0 16px var(--space-md, 16px);
  background: var(--card);
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.fin-dues-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.fin-dues-title {
  font-family: 'Outfit', sans-serif; font-size: 0.85rem; font-weight: 700;
  color: var(--danger, #ef4444); display: flex; align-items: center; gap: 5px;
}
.fin-dues-title .material-symbols-rounded { font-size: 1rem; }
.fin-dues-total {
  font-family: 'Outfit', sans-serif; font-size: 1.1rem; font-weight: 800;
  color: var(--danger, #ef4444); white-space: nowrap; overflow: visible;
}
.fin-dues-rows { display: flex; flex-direction: column; gap: 6px; }
.fin-due-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; border-radius: 8px;
  background: var(--danger-light, #fef2f2);
  border: 1px solid hsla(0, 50%, 50%, 0.08);
}
body.dark-mode .fin-due-row { border-color: hsla(0, 50%, 50%, 0.15); }
.fin-due-row-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.78rem; font-weight: 600; color: var(--text-secondary, #666);
}
.fin-due-row-label .material-symbols-rounded { font-size: 0.9rem; }
.fin-due-row-value {
  font-family: 'Outfit', sans-serif; font-size: 0.9rem; font-weight: 700;
  color: var(--danger, #ef4444); white-space: nowrap; overflow: visible;
}

/* ═══ WAIVER BANNER ═══ */
.fin-waiver {
  margin: 0 16px var(--space-md, 16px);
  padding: 12px 14px; border-radius: 12px;
  border: 1.5px dashed hsl(38, 70%, 60%);
  background: var(--warning-light, #fef3c7);
  display: flex; align-items: center; justify-content: space-between;
}
.fin-waiver-left { display: flex; align-items: center; gap: 10px; }
.fin-waiver-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: hsl(38, 80%, 55%); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.fin-waiver-icon .material-symbols-rounded { font-size: 1.1rem; }
.fin-waiver-label { font-size: 0.82rem; font-weight: 700; color: var(--text-primary, #111); }
.fin-waiver-sub { font-size: 0.68rem; color: var(--text-muted, #999); }
.fin-waiver-amount {
  font-family: 'Outfit', sans-serif; font-size: 1.15rem; font-weight: 800;
  color: hsl(38, 80%, 40%); white-space: nowrap; overflow: visible;
}
body.dark-mode .fin-waiver-amount { color: hsl(38, 75%, 60%); }

/* ═══ EXPENSE BREAKDOWN CARD ═══ */
.fin-expense-card {
  margin: 0 16px var(--space-md, 16px);
  background: var(--card);
  border-radius: 16px;
  border: 1px solid var(--border);
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.fin-expense-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.fin-expense-title {
  font-family: 'Outfit', sans-serif; font-size: 0.95rem; font-weight: 700;
  color: var(--text-primary, #111);
}
.fin-expense-rows { display: flex; flex-direction: column; gap: 4px; }
.fin-expense-row {
  display: flex; align-items: center; gap: 10px; padding: 6px 0;
}
.fin-expense-row + .fin-expense-row { border-top: 1px solid var(--border-light, #eee); }
.fin-expense-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.fin-expense-info { flex: 1; min-width: 0; }
.fin-expense-name { font-size: 0.82rem; font-weight: 600; color: var(--text-primary, #111); }
.fin-expense-pct { font-size: 0.68rem; color: var(--text-muted, #999); }
.fin-expense-bar-wrap {
  width: 60px; height: 5px; border-radius: 3px;
  background: var(--gray-200, #e5e5e5); overflow: hidden; flex-shrink: 0;
}
.fin-expense-bar-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; }
.fin-expense-amt {
  font-family: 'Outfit', sans-serif; font-size: 0.85rem; font-weight: 700;
  color: var(--text-primary, #111); white-space: nowrap; min-width: 70px; text-align: right;
  overflow: visible;
}

/* ═══ PAYMENTS TAB ═══ */
.fin-pay-date-row {
  display: flex; gap: 8px; margin: 0 16px var(--space-md, 16px);
  align-items: center; flex-wrap: wrap;
}
/* One combined range pill: [📅 from → to]. The visible dates are BUTTONS
   (deterministic layout); the native inputs are invisible 1×1 elements that
   exist only to anchor/open the app's SHDatePicker.
   min-width guarantees both full DD-MM-YYYY dates always fit — the pill
   never cedes width to the pagination sharing its wrap-row. */
/* Pill + Filter live in ONE non-wrapping sub-row that spans the line;
   only the pagination div wraps below it. */
body .fin-range-row {
  flex: 1 1 100%; min-width: 0;
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
}
body .fin-range {
  flex: 1 1 auto; min-width: 0; height: 44px; position: relative;
  display: flex; align-items: center; gap: 4px;
  padding: 0 10px 0 12px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-full, 9999px);
}
body .fin-range > .material-symbols-rounded { font-size: 1.05rem; color: var(--text-muted); flex-shrink: 0; }
body .fin-range-sep { color: var(--text-muted); font-size: 0.8rem; flex-shrink: 0; }
body .fin-range:focus-within { border-color: var(--primary); }
body .fin-range-btn {
  flex: 1 1 0; min-width: 0; height: 100%;
  border: 0; background: transparent; cursor: pointer;
  font-size: 0.83rem; font-weight: 600; line-height: 1;
  color: var(--text-primary, #111); font-family: 'DM Sans', sans-serif;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; padding: 0 2px;
  -webkit-tap-highlight-color: transparent;
}
body .fin-range-input {
  position: absolute; left: 50%; bottom: 0;
  width: 1px; height: 1px; min-height: 0;
  opacity: 0; border: 0; padding: 0; margin: 0; pointer-events: none;
}
.fin-filter-btn {
  min-height: 44px; padding: 0 18px; border-radius: 100px;
  background: var(--primary); color: #fff; border: none;
  font-family: 'DM Sans', sans-serif; font-size: 0.85rem; font-weight: 600;
  cursor: pointer; transition: opacity 0.15s;
}
.fin-filter-btn:active { opacity: 0.85; }

.fin-filter-pills {
  display: flex; gap: 6px; margin: 0 16px var(--space-md, 16px);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.fin-filter-pills::-webkit-scrollbar { display: none; }

.fin-pill {
  height: 36px; padding: 0 14px; border-radius: 18px;
  font-family: 'DM Sans', sans-serif; font-size: 0.75rem; font-weight: 600;
  white-space: nowrap; flex-shrink: 0;
  border: 1.5px solid var(--border); background: transparent;
  color: var(--text-secondary, #666); cursor: pointer; transition: all 0.15s;
  display: flex; align-items: center; gap: 5px;
}
.fin-pill:active { transform: scale(0.95); }
body .fin-pill.active {
  background: var(--primary); color: #fff; border-color: var(--primary);
}

/* Recurring view caption. The date range above it is deliberately ignored in
   this view, and an unexplained ignored control reads as a broken one. */
.fin-recurring-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 16px var(--space-md, 16px);
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-muted);
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--text-secondary);
}
.fin-recurring-note .material-symbols-rounded {
  font-size: 16px;
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--primary);
}

.fin-ledger-title {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 16px var(--space-sm, 8px);
}
.fin-ledger-title h3 {
  font-family: 'Outfit', sans-serif; font-size: 1rem; font-weight: 700;
  color: var(--text-primary, #111); margin: 0;
}
.fin-ledger-title span {
  font-size: 0.75rem; color: var(--text-muted, #999);
}

/* Payment / Expense Row */
.fin-pay-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light, #eee);
  cursor: pointer; transition: background 0.1s;
}
.fin-pay-row:active { background: var(--gray-50, #fafafa); }
.fin-pay-icon {
  width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fin-pay-icon .material-symbols-rounded { font-size: 1.1rem; }
.fin-pay-info { flex: 1; min-width: 0; }
.fin-pay-name {
  font-size: 0.88rem; font-weight: 600; color: var(--text-primary, #111);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fin-pay-sub {
  font-size: 0.72rem; color: var(--text-muted, #999);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 1px;
}
.fin-pay-right-group {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.fin-pay-right { text-align: right; flex-shrink: 0; }
.fin-pay-amt {
  font-family: 'Outfit', sans-serif; font-size: 0.95rem; font-weight: 700;
  white-space: nowrap; overflow: visible;
}
.fin-pay-amt.green { color: var(--success, #16a34a); }
.fin-pay-amt.red { color: var(--danger, #ef4444); }
.fin-pay-mode {
  font-size: 0.68rem; color: var(--text-muted, #999); margin-top: 1px;
}
.fin-pay-actions {
  display: grid; grid-template-columns: repeat(2, auto); gap: 2px;
  flex-shrink: 0; justify-items: center;
}
.fin-pay-act {
  width: 32px; height: 28px; border-radius: 6px;
  border: none; background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted, #999); transition: background 0.15s, color 0.15s;
}
.fin-pay-act:active { transform: scale(0.9); }
.fin-pay-act .material-symbols-rounded { font-size: 0.95rem; }
.fin-pay-act[data-act="edit"]:hover { background: var(--primary-50); color: var(--primary); }
.fin-pay-act[data-act="delete"]:hover { background: var(--danger-light); color: var(--danger); }
.fin-pay-act[data-act="receipt"]:hover { background: var(--success-light, #dcfce7); color: var(--success, #16a34a); }

/* ═══ EXPENSES TAB ═══ */
.fin-expense-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin: 0 16px var(--space-md, 16px);
}
.fin-expense-stat {
  padding: 12px; background: var(--card); border-radius: 12px;
  border: 1px solid var(--border); text-align: center;
}
.fin-expense-stat-value {
  font-family: 'Outfit', sans-serif; font-size: 1.1rem; font-weight: 800;
  line-height: 1.2; white-space: nowrap; overflow: visible;
}
.fin-expense-stat-label {
  font-size: 0.68rem; font-weight: 600; color: var(--text-muted, #999); margin-top: 2px;
}
.fin-add-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 8px 16px; border-radius: 12px;
  background: var(--primary); color: #fff; border: none;
  font-family: 'DM Sans', sans-serif; font-size: 0.82rem; font-weight: 600;
  cursor: pointer; min-height: 44px; transition: opacity 0.15s;
}
.fin-add-btn:active { opacity: 0.85; }
.fin-add-btn .material-symbols-rounded { font-size: 1rem; }

.fin-quick-chips {
  display: flex; gap: 6px; margin: 0 16px var(--space-md, 16px);
  flex-wrap: wrap;
}
.fin-quick-chip {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 12px; border-radius: 20px;
  border: 1.5px solid var(--border); background: var(--card);
  color: var(--text-secondary, #666); font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem; font-weight: 600; cursor: pointer;
  transition: all 0.15s;
}
.fin-quick-chip:active { transform: scale(0.95); background: var(--gray-100, #f0f0f0); }
.fin-quick-chip .material-symbols-rounded { font-size: 0.9rem; }

/* ═══ TRACK RECORD TAB ═══ */
.fin-tr-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin: 0 16px var(--space-md, 16px);
}
.fin-tr-stat {
  padding: 14px 10px; background: var(--card); border-radius: 12px;
  border: 1px solid var(--border); text-align: center;
}
.fin-tr-stat-value {
  font-family: 'Outfit', sans-serif; font-size: 1.3rem; font-weight: 800;
  line-height: 1.2; white-space: nowrap; overflow: visible;
}
.fin-tr-stat-label {
  font-size: 0.68rem; font-weight: 600; color: var(--text-muted, #999); margin-top: 3px;
}

.fin-tr-type-card {
  margin: 0 16px var(--space-md, 16px);
  background: var(--card); border-radius: 12px;
  border: 1px solid var(--border); padding: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.fin-tr-type-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
}
.fin-tr-type-row + .fin-tr-type-row { border-top: 1px solid var(--border-light, #eee); }
.fin-tr-type-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fin-tr-type-icon .material-symbols-rounded { font-size: 1.1rem; }
.fin-tr-type-info { flex: 1; }
.fin-tr-type-name { font-size: 0.88rem; font-weight: 600; color: var(--text-primary, #111); }
.fin-tr-type-bar {
  height: 5px; background: var(--gray-200, #e5e5e5); border-radius: 3px;
  margin-top: 4px; overflow: hidden;
}
.fin-tr-type-fill { height: 100%; border-radius: 3px; transition: width 0.5s; }
.fin-tr-type-right { text-align: right; flex-shrink: 0; }
.fin-tr-type-count {
  font-family: 'Outfit', sans-serif; font-size: 1rem; font-weight: 800;
  color: var(--text-primary, #111); white-space: nowrap; overflow: visible;
}
.fin-tr-type-earned {
  font-size: 0.7rem; color: var(--text-muted, #999);
  white-space: nowrap; overflow: visible;
}

.fin-tr-month-header {
  display: flex; align-items: center; gap: 8px;
  margin: 0 16px 8px;
}
.fin-tr-month-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--primary); flex-shrink: 0;
}
.fin-tr-month-name {
  font-family: 'Outfit', sans-serif; font-size: 0.88rem; font-weight: 700;
  color: var(--text-primary, #111);
}
.fin-tr-month-meta {
  font-size: 0.72rem; color: var(--text-muted, #999); white-space: nowrap; overflow: visible;
}
.fin-tr-month-line { flex: 1; height: 1px; background: var(--border-light, #eee); }

.fin-tr-job {
  margin: 0 16px 8px;
  background: var(--card); border-radius: 12px;
  border: 1px solid var(--border); padding: 14px;
  cursor: pointer; transition: transform 0.15s, box-shadow 0.15s;
}
.fin-tr-job:active { transform: scale(0.985); }
@media (hover: hover) { body .fin-tr-job:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); } }
.fin-tr-job-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
}
.fin-tr-job-client {
  font-size: 0.88rem; font-weight: 700; color: var(--text-primary, #111);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0;
}
.fin-tr-job-amount {
  font-family: 'Outfit', sans-serif; font-size: 1rem; font-weight: 800;
  flex-shrink: 0; margin-left: 8px; white-space: nowrap; overflow: visible;
}
.fin-tr-job-event {
  font-size: 0.72rem; color: var(--text-muted, #999); margin-bottom: 8px;
}
.fin-tr-job-progress {
  height: 6px; background: var(--gray-200, #e5e5e5); border-radius: 3px; overflow: hidden;
}
.fin-tr-job-progress-fill {
  height: 100%; border-radius: 3px; transition: width 0.4s;
}
.fin-tr-job-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 6px; font-size: 0.72rem; font-weight: 600;
}
.fin-tr-job-paid { color: var(--success, #16a34a); }
.fin-tr-job-due { color: var(--danger, #ef4444); }

/* ═══ ANIMATIONS ═══ */
@keyframes finFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes finSlideIn {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}

.fin-hero { animation: finFadeUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
.fin-breakdown-strip { animation: finFadeUp 0.4s 0.08s cubic-bezier(0.22, 1, 0.36, 1) both; }
.fin-segmented-bar { animation: finFadeUp 0.4s 0.14s cubic-bezier(0.22, 1, 0.36, 1) both; }
.fin-chart-card { animation: finFadeUp 0.4s 0.18s cubic-bezier(0.22, 1, 0.36, 1) both; }
.fin-dues-card { animation: finFadeUp 0.4s 0.22s cubic-bezier(0.22, 1, 0.36, 1) both; }
.fin-expense-card { animation: finFadeUp 0.4s 0.26s cubic-bezier(0.22, 1, 0.36, 1) both; }
.fin-waiver { animation: finFadeUp 0.4s 0.30s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* Payment rows stagger */
.fin-pay-row { animation: finSlideIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both; }
.fin-pay-row:nth-child(1) { animation-delay: 50ms; }
.fin-pay-row:nth-child(2) { animation-delay: 80ms; }
.fin-pay-row:nth-child(3) { animation-delay: 110ms; }
.fin-pay-row:nth-child(4) { animation-delay: 140ms; }
.fin-pay-row:nth-child(5) { animation-delay: 170ms; }
.fin-pay-row:nth-child(6) { animation-delay: 200ms; }
.fin-pay-row:nth-child(7) { animation-delay: 230ms; }
.fin-pay-row:nth-child(8) { animation-delay: 260ms; }

/* Strip cards stagger */
.fin-strip-card { animation: finFadeUp 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; }
.fin-strip-card:nth-child(1) { animation-delay: 60ms; }
.fin-strip-card:nth-child(2) { animation-delay: 120ms; }
.fin-strip-card:nth-child(3) { animation-delay: 180ms; }

/* Track record jobs stagger */
.fin-tr-job { animation: finFadeUp 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; }
.fin-tr-job:nth-child(1) { animation-delay: 50ms; }
.fin-tr-job:nth-child(2) { animation-delay: 100ms; }
.fin-tr-job:nth-child(3) { animation-delay: 150ms; }
.fin-tr-job:nth-child(4) { animation-delay: 200ms; }
.fin-tr-job:nth-child(5) { animation-delay: 250ms; }

/* Stat cards */
.fin-expense-stat, .fin-tr-stat { animation: finFadeUp 0.3s cubic-bezier(0.22, 1, 0.36, 1) both; }
.fin-expense-stat:nth-child(1), .fin-tr-stat:nth-child(1) { animation-delay: 50ms; }
.fin-expense-stat:nth-child(2), .fin-tr-stat:nth-child(2) { animation-delay: 100ms; }
.fin-expense-stat:nth-child(3), .fin-tr-stat:nth-child(3) { animation-delay: 150ms; }

/* Type breakdown rows */
.fin-tr-type-row { animation: finSlideIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both; }
.fin-tr-type-row:nth-child(1) { animation-delay: 60ms; }
.fin-tr-type-row:nth-child(2) { animation-delay: 110ms; }
.fin-tr-type-row:nth-child(3) { animation-delay: 160ms; }
.fin-tr-type-row:nth-child(4) { animation-delay: 210ms; }
.fin-tr-type-row:nth-child(5) { animation-delay: 260ms; }

/* Due rows */
.fin-due-row { animation: finSlideIn 0.25s cubic-bezier(0.22, 1, 0.36, 1) both; }
.fin-due-row:nth-child(1) { animation-delay: 40ms; }
.fin-due-row:nth-child(2) { animation-delay: 80ms; }
.fin-due-row:nth-child(3) { animation-delay: 120ms; }
.fin-due-row:nth-child(4) { animation-delay: 160ms; }

/* Quick chips */
.fin-quick-chip { animation: finFadeUp 0.25s cubic-bezier(0.22, 1, 0.36, 1) both; }
.fin-quick-chip:nth-child(1) { animation-delay: 40ms; }
.fin-quick-chip:nth-child(2) { animation-delay: 70ms; }
.fin-quick-chip:nth-child(3) { animation-delay: 100ms; }
.fin-quick-chip:nth-child(4) { animation-delay: 130ms; }
.fin-quick-chip:nth-child(5) { animation-delay: 160ms; }
.fin-quick-chip:nth-child(6) { animation-delay: 190ms; }

/* ═══ RESPONSIVE — 375px base ═══ */
@media (max-width: 480px) {
  .fin-pay-icon { width: 36px; height: 36px; }
  .fin-pay-icon .material-symbols-rounded { font-size: 1rem; }
  .fin-pay-right-group { gap: 4px; }
  .fin-pay-actions { gap: 1px; }
  .fin-pay-act { width: 28px; height: 24px; }
  .fin-pay-act .material-symbols-rounded { font-size: 0.85rem; }

  .fin-hero-stat-value { font-size: 1rem; }
  .fin-hero-stat { padding: 8px; }
  .fin-hero-row { gap: 6px; }
  .fin-hero-amount { font-size: 2rem; }

  .fin-expense-stats, .fin-tr-stats { gap: 6px; }
  .fin-expense-stat-value, .fin-tr-stat-value { font-size: 0.95rem; }
  .fin-expense-stat, .fin-tr-stat { padding: 10px 6px; }

  .fin-strip-card { min-width: 100px; padding: 10px 12px; }
  .fin-strip-value { font-size: 0.95rem; }

  .fin-quick-chips { gap: 5px; }
  .fin-quick-chip { padding: 5px 10px; font-size: 0.72rem; }

  .fin-tr-job-amount { font-size: 0.9rem; }
  .fin-tr-type-earned { font-size: 0.65rem; }

  .fin-pay-date-row { gap: 6px; }
  .fin-date-input { font-size: 0.85rem; padding: 8px; }
}

@media (max-width: 374px) {
  .fin-hero-amount { font-size: 1.7rem; }
  .fin-hero-stat-value { font-size: 0.82rem; }
  .fin-hero-stat-label { font-size: 0.58rem; }
  .fin-hero-row { gap: 4px; }
  .fin-strip-card { min-width: 90px; padding: 8px 10px; }
  .fin-strip-value { font-size: 0.82rem; }
  .fin-strip-label { font-size: 0.62rem; }
  .fin-expense-stat-value, .fin-tr-stat-value { font-size: 0.82rem; }
  .fin-expense-stat-label, .fin-tr-stat-label { font-size: 0.6rem; }
  .fin-pay-name { font-size: 0.8rem; }
  .fin-pay-amt { font-size: 0.82rem; }
  .fin-pay-mode { font-size: 0.62rem; }
  .fin-tr-job-client { font-size: 0.8rem; }
  .fin-tr-job-amount { font-size: 0.82rem; }
  .fin-tr-type-name { font-size: 0.8rem; }
  .fin-tr-type-count { font-size: 0.88rem; }
  .fin-dues-total { font-size: 0.95rem; }
  .fin-due-row-value { font-size: 0.82rem; }
  .fin-waiver-amount { font-size: 1rem; }
  .fin-seg-total { font-size: 0.78rem; }
  .fin-expense-amt { font-size: 0.78rem; min-width: 60px; }
}

/* ─── Legacy compat (keep old classes for modals/helpers that still use them) ─── */
.finance-stats-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px;
}
.finance-stat-card {
  padding: 14px; background: var(--card); border-radius: 14px;
  border: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px;
}
.finance-stat-label {
  font-family: 'DM Sans', sans-serif; font-size: 0.75rem; color: var(--text-secondary, #666);
}
.finance-stat-value {
  font-family: 'Outfit', sans-serif; font-size: 1.2rem; font-weight: 700;
}
.finance-stat-value.green { color: #16a34a; }
.finance-stat-value.red { color: #ef4444; }
.finance-stat-value.blue { color: var(--primary); }

.finance-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; background: var(--card);
  border-bottom: 1px solid var(--border-light, #eee);
  cursor: pointer; transition: background 100ms ease;
}
.finance-row:active { background: var(--gray-50, #fafafa); }
.finance-row-icon {
  width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.finance-row-icon .material-symbols-rounded { font-size: 1.15rem; }
.finance-row-info { flex: 1; min-width: 0; }
.finance-row-title {
  font-family: 'DM Sans', sans-serif; font-size: 0.875rem; font-weight: 600;
  color: var(--foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.finance-row-subtitle {
  font-family: 'DM Sans', sans-serif; font-size: 0.72rem; color: var(--text-secondary, #666);
}
.finance-row-amount {
  font-family: 'Outfit', sans-serif; font-size: 0.94rem; font-weight: 700; flex-shrink: 0;
}
.finance-row-amount.green { color: #16a34a; }
.finance-row-amount.red { color: #ef4444; }
.finance-row-method {
  font-family: 'DM Sans', sans-serif; font-size: 0.69rem;
  color: var(--text-secondary, #666); text-align: right;
}

.filter-pill {
  height: 36px; padding: 0 14px; border-radius: 18px;
  font-family: 'DM Sans', sans-serif; font-size: 0.75rem; font-weight: 600;
  white-space: nowrap; flex-shrink: 0;
  border: 1px solid var(--border); background: var(--card);
  color: var(--text-secondary, #666); cursor: pointer; transition: all 0.15s;
  display: flex; align-items: center; gap: 5px;
}
body .filter-pill.active {
  background: var(--primary); color: #fff; border-color: var(--primary);
}

.expense-breakdown { background: var(--card); border-radius: 16px; border: 1px solid var(--border); padding: 16px; margin: 0 16px; }
.expense-breakdown-title { font-family: 'Outfit', sans-serif; font-size: 1rem; font-weight: 700; margin-bottom: 12px; }
.expense-breakdown-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; }
.expense-breakdown-label { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; }
.expense-breakdown-dot { width: 8px; height: 8px; border-radius: 4px; flex-shrink: 0; }
.expense-breakdown-value { font-size: 0.82rem; font-weight: 600; }

.track-record-card { background: var(--card); border-radius: 14px; border: 1px solid var(--border); padding: 14px; margin: 0 16px 10px; display: flex; flex-direction: column; gap: 8px; }
.track-record-header { display: flex; align-items: center; justify-content: space-between; }
.track-record-client { font-size: 0.875rem; font-weight: 600; }
.track-record-event { font-size: 0.72rem; color: var(--text-secondary, #666); }
.track-record-amount { font-family: 'Outfit', sans-serif; font-size: 1rem; font-weight: 700; }
.track-record-progress { height: 6px; background: var(--muted, #e5e5e5); border-radius: 3px; overflow: hidden; }
.track-record-progress-bar { height: 100%; border-radius: 3px; background: #22c55e; transition: width 300ms ease; }
.track-record-progress-bar.partial { background: #f59e0b; }
.track-record-footer { display: flex; align-items: center; justify-content: space-between; font-size: 0.75rem; color: var(--text-secondary, #666); }
.track-record-paid { color: #16a34a; font-weight: 600; }
.track-record-due { color: #ef4444; font-weight: 600; }

.finance-filters { display: flex; gap: 8px; padding: 8px 16px; overflow-x: auto; scrollbar-width: none; }
.finance-filters::-webkit-scrollbar { display: none; }
.finance-filter-pill {
  height: 36px; padding: 0 14px; border-radius: 18px;
  font-family: 'DM Sans', sans-serif; font-size: 0.72rem; font-weight: 500;
  white-space: nowrap; flex-shrink: 0;
  border: 1px solid var(--border); background: var(--card);
  color: var(--text-secondary, #666); cursor: pointer; transition: all 0.15s;
  display: flex; align-items: center; gap: 5px;
}
body .finance-filter-pill.active {
  background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600;
}

/* Bar chart (legacy for graph/table toggle) */
.finance-bar-chart { background: var(--card); border-radius: 16px; border: 1px solid var(--border); padding: 16px; margin: 0 16px; }
.finance-bar-chart-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.finance-bar-chart-title { font-family: 'Outfit', sans-serif; font-size: 1rem; font-weight: 700; }
.finance-bar-chart-period { font-size: 0.75rem; color: var(--text-secondary); background: var(--secondary, #f0f0f0); padding: 4px 10px; border-radius: 8px; cursor: pointer; }
.finance-bar-chart-area { display: flex; align-items: flex-end; gap: 8px; height: 160px; padding: 0 4px; }
.finance-bar-group { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.finance-bar-pair { display: flex; align-items: flex-end; gap: 3px; width: 100%; justify-content: center; }
.finance-bar { width: 12px; border-radius: 4px 4px 0 0; min-height: 4px; transition: height 300ms ease; }
.finance-bar.income { background: #22c55e; }
.finance-bar.expense { background: #ef4444; }
.finance-bar-label { font-size: 0.75rem; color: var(--text-secondary); text-align: center; }
.finance-bar-legend { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.finance-bar-legend-item { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--text-secondary); }
.finance-bar-legend-dot { width: 8px; height: 8px; border-radius: 4px; }
.finance-bar-legend-dot.income { background: #22c55e; }
.finance-bar-legend-dot.expense { background: #ef4444; }
.finance-bar-profit { text-align: center; margin-top: 8px; font-family: 'Outfit', sans-serif; font-size: 0.875rem; font-weight: 700; color: #16a34a; }

/* Mobile containment */
@media (max-width: 768px) {
  .finance-row-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .finance-row { width: 100%; overflow: hidden; }
}
@media (max-width: 480px) {
  .finance-stats-grid { padding: 0 12px; }
  .finance-bar { width: 10px; }
  .finance-bar-chart-area { gap: 4px; height: 120px; }
}

/* ─── Desktop: tabs + date-range share one row (2026-08-30) ────────
   The track hugs its pills on the left; the date row lifts out of the
   content flow into the empty space on the right of the same line.

   1180px, not the 1024px this shipped with. Measured: the four pills need
   542px and .fin-range-row needs 540px, so the pair needs ~1102px of content
   box — about 1134px of viewport once the page padding is counted. At 1024px
   the tabs were handed calc(100% - 560px) = 432px for 542px of content, and
   because the track is overflow-x:auto with the scrollbar hidden, "Track
   Record" was simply cut off with nothing to say it was still there.
   1180 leaves ~46px of headroom for languages whose labels run longer than
   English. Below it the date row drops back into normal flow on its own line,
   which always fits. */
@media (min-width: 1180px) {
  .finance-tabs {
    width: fit-content;
  }

  .finance-tabs--with-date-row {
    max-width: calc(100% - 560px);
  }

  #financeContent {
    position: relative;
  }

  #financeContent > .fin-pay-date-row {
    position: absolute;
    top: -72px; /* tabs height (56) + gap (16) — rides the tabs row */
    right: 0;
    margin: 0;
    width: 540px;
    /* below the sticky tabs so it slides UNDER them when scrolling */
    z-index: 29;
  }
}

/* ===== css/subscription.css ===== */
/* =====================================================
   SahiHisab — Subscription UI Styles
   Upgrade modal, lock overlays, nudge banners,
   fullscreen conversion, sunk cost cards
   ===================================================== */

/* ─── Feature Lock (sidebar/tabbar greyed items) ────── */
.feature-locked {
  opacity: 0.4;
  pointer-events: none;
  position: relative;
}

.feature-locked::after {
  content: '';
  position: absolute;
  inset: 0;
  cursor: not-allowed;
  pointer-events: all;
}

/* Re-enable click to show lock overlay */
.sidebar .nav-item.feature-locked {
  pointer-events: all;
  cursor: pointer;
}

.sidebar .nav-item.feature-locked::after {
  display: none;
}

/* ─── Lock Overlay (full page) ────────────────────── */
.sub-lock-overlay {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.sub-lock-card {
  text-align: center;
  max-width: 400px;
  width: 100%;
}

.sub-lock-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: hsl(0, 0%, 95%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.sub-lock-icon .material-symbols-rounded {
  font-size: 2rem;
  color: var(--text-secondary);
}

.sub-lock-card h2 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.sub-lock-card p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 0;
}

.sub-sunk-cost-mini {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: hsl(45, 100%, 96%);
  border: 1px solid hsl(45, 80%, 85%);
  border-radius: 12px;
  padding: 12px;
  margin: 16px 0;
  font-size: 0.82rem;
  text-align: left;
}

.sub-sunk-cost-mini .material-symbols-rounded {
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ─── Top Banner (persistent warning/danger strip) ─── */
.sub-top-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 0.82rem;
  font-weight: 500;
  text-align: center;
  flex-wrap: wrap;
  z-index: 50;
}

.sub-top-banner-warning {
  background: hsl(45, 100%, 95%);
  color: hsl(30, 80%, 30%);
  border-bottom: 1px solid hsl(45, 80%, 85%);
}

.sub-top-banner-danger {
  background: hsl(0, 80%, 95%);
  color: hsl(0, 70%, 35%);
  border-bottom: 1px solid hsl(0, 70%, 85%);
}

.sub-top-banner .material-symbols-rounded {
  font-size: 1rem;
}

.sub-banner-btn {
  background: none;
  border: 1.5px solid currentColor;
  border-radius: 8px;
  padding: 4px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  color: inherit;
  transition: background 100ms ease;
}

.sub-banner-btn:hover {
  background: hsla(0, 0%, 0%, 0.05);
}

.sub-banner-btn.urgent {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

/* ─── Trial Badge (on avatar) ─────────────────────── */
.sub-trial-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--warning, #f59e0b);
  color: white;
  font-size: 0.62rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
}

/* ─── Fullscreen Upgrade Overlay (Day 15) ──────────── */
.sub-fullscreen-overlay {
  position: fixed;
  inset: 0;
  background: hsla(210, 30%, 10%, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sub-fullscreen-overlay.visible {
  opacity: 1;
}

.sub-fullscreen-card {
  background: var(--card);
  border-radius: 24px;
  padding: 32px 24px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-height: 90vh;
  overflow-y: auto;
}

.sub-fullscreen-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #7c3aed);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.sub-fullscreen-icon .material-symbols-rounded {
  font-size: 2rem;
  color: white;
}

.sub-fullscreen-card h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 8px;
}

.sub-fullscreen-card>p {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* Stats grid in fullscreen */
.sub-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 20px 0;
}

.sub-stat {
  padding: 12px 8px;
  background: var(--muted);
  border-radius: 12px;
}

.sub-stat-value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--foreground);
}

.sub-stat-label {
  font-size: 0.72rem;
  color: var(--text-secondary);
}

/* Pricing card in fullscreen */
.sub-pricing-card {
  background: linear-gradient(135deg, hsl(210, 80%, 97%), hsl(270, 60%, 97%));
  border: 1.5px solid hsl(210, 60%, 90%);
  border-radius: 16px;
  padding: 20px;
  margin: 16px 0;
}

.sub-pricing-original {
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-decoration: line-through;
}

.sub-pricing-current {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
}

.sub-pricing-amount {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--primary);
}

.sub-pricing-period {
  font-size: 1rem;
  color: var(--text-secondary);
}

.sub-pricing-daily {
  font-size: 0.85rem;
  font-weight: 600;
  color: #16a34a;
  margin-top: 4px;
}

.sub-pricing-yearly {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* ─── Upgrade Button Pulse ─────────────────────────── */
.sub-upgrade-btn.pulse {
  animation: subPulse 2s ease-in-out infinite;
}

@keyframes subPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 hsla(210, 80%, 50%, 0.4);
  }

  50% {
    box-shadow: 0 0 0 12px hsla(210, 80%, 50%, 0);
  }
}

/* ─── Sunk Cost Card (Dashboard) ──────────────────── */
.sub-sunk-card {
  border: 1.5px solid hsl(45, 80%, 80%);
  background: linear-gradient(135deg, hsl(45, 100%, 98%), hsl(30, 80%, 97%));
}

.sub-sunk-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  font-size: 0.82rem;
}

.sub-sunk-stats>div {
  padding: 6px 10px;
  background: hsla(0, 0%, 100%, 0.7);
  border-radius: 8px;
}

.sub-sunk-stats strong {
  color: var(--primary);
}

/* ─── Upgrade Modal (Plan Selection) ──────────────── */
.sub-features-list {
  display: grid;
  gap: 8px;
  margin-bottom: 20px;
}

.sub-feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
}

.sub-plan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.sub-plan-card {
  padding: 16px 12px;
  border: 2px solid var(--border);
  border-radius: 16px;
  text-align: center;
  cursor: pointer;
  transition: all 150ms ease;
  position: relative;
}

.sub-plan-card:hover {
  border-color: var(--primary);
}

.sub-plan-card.selected {
  border-color: var(--primary);
  background: hsl(210, 80%, 97%);
  box-shadow: 0 0 0 3px hsla(210, 80%, 50%, 0.15);
}

.sub-plan-card.sub-plan-recommended {
  border-color: #7c3aed;
}

.sub-plan-card.sub-plan-recommended.selected {
  border-color: #7c3aed;
  background: hsl(270, 60%, 97%);
  box-shadow: 0 0 0 3px hsla(270, 60%, 50%, 0.15);
}

.sub-plan-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: #7c3aed;
  color: white;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 10px;
  white-space: nowrap;
  letter-spacing: 0.5px;
}

.sub-plan-name {
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 4px;
}

.sub-plan-original {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.sub-plan-original s {
  color: var(--destructive);
}

.sub-plan-price {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--foreground);
  line-height: 1.2;
}

.sub-plan-period {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.sub-plan-daily {
  font-size: 0.72rem;
  color: #16a34a;
  font-weight: 600;
  margin-top: 4px;
}

/* ─── Success Overlay ─────────────────────────────── */
.sub-success-overlay {
  position: fixed;
  inset: 0;
  background: hsla(210, 30%, 10%, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sub-success-overlay.visible {
  opacity: 1;
}

.sub-success-card {
  background: var(--card);
  border-radius: 24px;
  padding: 40px 24px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.sub-success-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  animation: subSuccessPop 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.sub-success-icon .material-symbols-rounded {
  font-size: 2.5rem;
  color: white;
}

@keyframes subSuccessPop {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

.sub-success-card h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 8px;
}

.sub-success-card p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

/* ─── Trial Progress Bar (Settings) ───────────────── */
.sub-trial-bar {
  height: 8px;
  background: var(--muted);
  border-radius: 4px;
  overflow: hidden;
}

.sub-trial-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 500ms ease;
}

/* ─── Mobile responsive ───────────────────────────── */
@media (max-width: 480px) {
  .sub-fullscreen-card {
    padding: 24px 16px;
    border-radius: 20px;
  }

  .sub-fullscreen-card h2 {
    font-size: 1.2rem;
  }

  .sub-pricing-amount {
    font-size: 1.8rem;
  }

  .sub-plan-grid {
    gap: 8px;
  }

  .sub-plan-card {
    padding: 12px 8px;
  }

  .sub-plan-price {
    font-size: 1.3rem;
  }

  .sub-top-banner {
    font-size: 0.78rem;
    padding: 6px 12px;
  }

  .sub-lock-card h2 {
    font-size: 1.1rem;
  }
}
/* ── Plan CTA + coupon celebration (2026-10-27) ──────────────────────────
   The button carries `btn btn-primary sub-cta`, and two app-wide rules
   outrank a bare `.sub-cta`:

     .btn-primary:hover { background: var(--primary-600) }   (0,2,0)
     body .btn          { transition: transform, box-shadow,
                                      background-color }     (0,1,1)

   So a `.sub-cta` (0,1,0) gradient was being REPLACED by a flat colour on
   hover — and background-image cannot transition, so it snapped while
   background-color eased: that is the flicker. And `body .btn` discarded
   this file's transition list, leaving `filter` with no transition at all,
   snapping against its easing neighbours: that is the "laggy" feel.

   Fix: win the cascade honestly (no !important — house rule), pin the
   gradient in EVERY state so nothing about the background changes on
   hover, and animate only what `body .btn` already animates — transform
   and box-shadow. No filter, no private transition; the button now moves
   in the app's own motion language. */
body .btn-primary.sub-cta,
body .btn-primary.sub-cta:hover,
body .btn-primary.sub-cta:active,
body .btn-primary.sub-cta:focus-visible {
  background: linear-gradient(135deg,
              var(--primary-400, hsl(200, 75%, 56%)) 0%,
              var(--primary-600, hsl(200, 85%, 37%)) 100%);
}

body .btn-primary.sub-cta {
  box-shadow: 0 6px 16px -6px hsla(200, 85%, 35%, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

@media (hover: hover) and (pointer: fine) {
  body .btn-primary.sub-cta:hover {
    box-shadow: 0 10px 22px -8px hsla(200, 85%, 35%, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.34);
    transform: translateY(-1px);
  }
}

body .btn-primary.sub-cta:active {
  transform: scale(0.98);
  box-shadow: 0 3px 10px -6px hsla(200, 85%, 35%, 0.65);
}

/* A coupon that halves the price should be felt, not just read. */
@keyframes subPricePop {
  0%   { transform: scale(1);    }
  35%  { transform: scale(1.09); }
  65%  { transform: scale(0.98); }
  100% { transform: scale(1);    }
}

@keyframes subCtaPulse {
  0%   { box-shadow: 0 6px 16px -6px hsla(200, 85%, 35%, 0.7), 0 0 0 0 rgba(16, 185, 129, 0.55); }
  60%  { box-shadow: 0 6px 16px -6px hsla(200, 85%, 35%, 0.7), 0 0 0 12px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 6px 16px -6px hsla(200, 85%, 35%, 0.7), 0 0 0 0 rgba(16, 185, 129, 0); }
}

.sub-price-pop {
  animation: subPricePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: left center;
}

.sub-cta-pulse { animation: subCtaPulse 0.9s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .sub-price-pop, .sub-cta-pulse { animation: none; }
  .sub-cta { transition: none; }
}

/* ===== css/mobile-overrides.css ===== */
/* =====================================================
   SahiHisab — Mobile UI Overrides
   Systematic fixes for 375px mobile screens
   All 6 issue categories addressed globally.
   ===================================================== */

/* ─────────────────────────────────────────────────────
   PWA INSTALL BUTTON
   Mobile: floating pill above bottom nav
   Desktop: floating pill bottom-right corner
   ───────────────────────────────────────────────────── */
body .pwa-install-btn {
  position: fixed;
  z-index: 998;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.3s ease;
  /* Mobile: compact icon-only circle, bottom of the right-edge stack (WhatsApp + Munim sit above it) */
  bottom: 90px;
  right: 16px;
  left: auto;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  background: var(--primary, #0ea5e9);
  color: #fff;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35), 0 1px 3px rgba(0,0,0,0.1);
}

body .pwa-install-btn .material-symbols-rounded {
  font-size: 1.2rem;
}

/* Icon-only — the "Install" text label is hidden (button is a compact aside icon) */
body .pwa-install-btn .pwa-install-label {
  display: none;
}

body .pwa-install-btn:active {
  transform: scale(0.94);
}

/* Gentle pulse animation to attract attention */
@keyframes pwa-pulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35); }
  50% { box-shadow: 0 4px 20px rgba(14, 165, 233, 0.55), 0 0 0 6px rgba(14, 165, 233, 0.1); }
}

body .pwa-install-btn {
  animation: pwa-pulse 3s ease-in-out infinite;
}

body .pwa-install-btn:hover {
  animation: none;
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.45);
}

/* Desktop: bottom-right corner floating pill */
@media (min-width: 769px) {
  body .pwa-install-btn {
    bottom: 28px;                /* bottom of right-edge stack: WhatsApp + Munim sit above it */
    left: auto;
    right: 16px;
    transform: none;
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
  }

  body .pwa-install-btn:active {
    transform: scale(0.95);
  }

  body .pwa-install-btn:hover {
    transform: translateY(-2px);
  }
}

/* Hide in standalone mode (already installed) */
@media (display-mode: standalone) {
  body .pwa-install-btn {
    display: none;
  }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  body .pwa-install-btn {
    background: #0284c7;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4), 0 1px 3px rgba(0,0,0,0.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  body .pwa-install-btn {
    animation: none;
    transition: none;
  }
}

/* ─────────────────────────────────────────────────────
   ISSUE 1 — HEADER OVERFLOW
   Prevent header icons/buttons from overflowing the
   right edge of the viewport on 375px screens.
   ───────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .app-header {
    overflow: hidden;
    padding: 0 12px;
  }

  .header-left {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }

  .header-left .page-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1rem;
    max-width: 200px;
  }

  .header-right {
    flex-shrink: 0;
    gap: 2px;
    display: flex;
    align-items: center;
  }

  /* Keep icon buttons at minimum tap-safe size */
  .header-icon-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    flex-shrink: 0;
  }

  .header-avatar {
    width: 34px;
    height: 34px;
    min-width: 34px;
    flex-shrink: 0;
    font-size: 0.78rem;
  }
}

@media (max-width: 375px) {
  .app-header {
    padding: 0 10px;
  }

  .header-left .page-title {
    max-width: 170px;
    font-size: 0.92rem;
  }

  .header-icon-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }

  .header-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
  }
}


/* ─────────────────────────────────────────────────────
   ISSUE 2 — FILTER / TAB PILLS CUT OFF
   All filter rows across every page: scrollable,
   no line wrap, hidden scrollbar.
   ───────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Global: any flex row used as filter bar */
  .filter-tabs,
  .filter-row,
  .filter-pills,
  .tab-pills,
  .status-filter-row,
  .page-filters,
  .rental-filters,

  /* Inline d-flex rows that hold filter buttons (rental.js, quotation.js etc.) */
  body .d-flex.gap-sm[style*="overflow-x"],
  body .d-flex.gap-xs[style*="overflow-x"],
  body .d-flex.gap-md[style*="overflow-x"] {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    touch-action: pan-x pan-y;
    white-space: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  /* Hide webkit scrollbar on filter rows */
  .filter-tabs::-webkit-scrollbar,
  .filter-row::-webkit-scrollbar,
  .filter-pills::-webkit-scrollbar,
  .tab-pills::-webkit-scrollbar,
  .status-filter-row::-webkit-scrollbar,
  .page-filters::-webkit-scrollbar {
    display: none;
  }

  /* Prevent filter button text from wrapping inside scroll container */
  .filter-tabs .btn,
  .filter-row .btn,
  .filter-pills .btn,
  .tab-pills .btn,
  .page-filters .btn {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* WI filter tabs — already correct but reinforce */
  .wi-filter-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .wi-filter-tabs::-webkit-scrollbar {
    display: none;
  }

  .wi-filter-tabs .btn {
    flex-shrink: 0;
    white-space: nowrap;
  }
}


/* ─────────────────────────────────────────────────────
   ISSUE 2b — PAGE-LEVEL: No horizontal scroll bleed
   The page-content itself must never cause horizontal
   page scroll. Any inner container that scrolls must
   be clipped to its own width.
   ───────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .page-content {
    /* clip, NOT hidden: overflow-x:hidden silently makes .page-content the
       scroll container for every position:sticky inside it (tabs, meters),
       so they pinned to a box that scrolls away with the window — i.e.
       sticky never worked on phones. clip clips without becoming a
       scroller. (hidden first = fallback for pre-clip browsers.) */
    overflow-x: hidden;
    overflow-x: clip;
  }

  /* Page-header row (title + CTA button): prevent the button
     from escaping the right edge. */
  .d-flex.align-center.justify-between,
  .d-flex.justify-between {
    max-width: 100%;
    min-width: 0;
  }
}


/* ─────────────────────────────────────────────────────
   ISSUE 3 — ADD / CTA BUTTONS CUT OFF
   "Add Assistant", "New Rental", "Add Item" etc. must
   always be fully visible. The page-header row (filter
   row + button) stacks vertically on mobile so the
   button is always on its own line, never clipped.
   ───────────────────────────────────────────────────── */

@media (max-width: 480px) {

  /* Rows that contain a filter group + an action button:
     stack them vertically so the CTA is never hidden. */
  .d-flex.align-center.justify-between.mb-lg,
  .d-flex.align-center.justify-between.mb-xl,
  .d-flex.align-center.justify-between.mb-md {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Make the CTA buttons in page headers full-width on
     very small screens so they always fit. */
  .d-flex.align-center.justify-between>.btn.btn-primary.btn-sm,
  .d-flex.align-center.justify-between>.btn.btn-primary {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

@media (max-width: 375px) {

  /* On 375px, the CTA button in page headers goes to full
     width so it always fits and is fully visible. */
  .d-flex.align-center.justify-between>.btn.btn-primary.btn-sm,
  .d-flex.align-center.justify-between>.btn.btn-primary {
    width: 100%;
    justify-content: center;
  }
}


/* ─────────────────────────────────────────────────────
   ISSUE 4 — SIDEBAR OVERLAY: FULL SCREEN
   Ensure sidebar covers the full viewport on mobile.
   The sidebar-backdrop must be position:fixed and cover
   100vw × 100vh with the correct z-index.
   ───────────────────────────────────────────────────── */

@media (max-width: 768px) {

  /* Sidebar: slides from left, smaller than 280px viewport */
  .sidebar {
    width: min(280px, 85vw);
    max-width: 85vw;
    height: 100dvh;
    top: 0;
    left: 0;
    position: fixed;
    z-index: 1050;
  }

  /* Backdrop: covers entire viewport */
  .sidebar-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
  }

  .sidebar-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }
}


/* ─────────────────────────────────────────────────────
   ISSUE 5 — DASHBOARD STAT CARDS TOO CRAMPED
   Force exactly 2-column grid on mobile with proper
   16px internal padding.
   ───────────────────────────────────────────────────── */

@media (max-width: 480px) {
  body .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  body .stat-card {
    padding: 16px;
  }

  /* Aaj Ka Summary (dashboard hero stats) */
  body .aaj-ka-summary {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  body .aaj-summary-item {
    padding: 16px 12px;
  }
}

@media (max-width: 375px) {
  body .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  body .stat-card {
    padding: 12px;
  }

  body .stat-value {
    font-size: 1.1rem;
  }
}


/* ─────────────────────────────────────────────────────
   ISSUE 6 — QUICK ACTION BUTTONS WRAP BADLY
   Force quick actions to scroll horizontally in a
   single row — never wrap onto multiple rows.
   ───────────────────────────────────────────────────── */

@media (max-width: 480px) {
  body .quick-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    gap: 8px;
    padding-bottom: 6px;
    /* Fade-out hint on right edge */
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
    mask-image: linear-gradient(to right, #000 85%, transparent);
  }

  .quick-actions::-webkit-scrollbar {
    display: none;
  }

  body .quick-action-btn {
    flex-shrink: 0;
    min-width: 84px;
    min-height: 44px;
    white-space: nowrap;
    font-size: 0.75rem;
    padding: 8px 10px;
  }
}


/* ─────────────────────────────────────────────────────
   GLOBAL: PREVENT HORIZONTAL PAGE SCROLL
   No horizontal overflow on the page root itself.
   ───────────────────────────────────────────────────── */

@media (max-width: 768px) {

  html,
  body {
    overflow-x: clip;
    max-width: 100vw;
  }

  .main-content {
    overflow-x: clip;
    max-width: 100vw;
  }

  /* Cards and content blocks must not exceed viewport */
  .card,
  .card-padded,
  .card-body,
  .card-header {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Floating tabbar: ensure it never exceeds viewport width */
  .floating-tabbar {
    left: 10px;
    right: 10px;
    width: auto;
    max-width: calc(100vw - 20px);
  }
}


/* ─────────────────────────────────────────────────────
   MINIMUM TAP TARGETS (44 × 44px)
   All interactive elements must be at least 44px tall.
   ───────────────────────────────────────────────────── */

@media (max-width: 768px) {

  .btn,
  .btn-sm {
    min-height: 44px;
  }

  .nav-item,
  .bottom-nav-item,
  .floating-tabbar-item {
    min-height: 44px;
  }
}


/* ─────────────────────────────────────────────────────
   MODAL FOOTER: Stack on 375px
   Buttons in modal footer should be full-width on
   very small screens to avoid overflow/clipping.
   ───────────────────────────────────────────────────── */

@media (max-width: 375px) {
  .modal-footer {
    flex-direction: column;
  }

  .modal-footer .btn {
    width: 100%;
    justify-content: center;
  }
}


/* ─────────────────────────────────────────────────────
   FIX: Settings tabs — smaller font on mobile
   ───────────────────────────────────────────────────── */

@media (max-width: 480px) {
  body .settings-tab {
    font-size: 0.72rem;
    padding: 10px 12px;
    min-width: 60px;
    flex-shrink: 0;
  }

  body .settings-tab .material-symbols-rounded {
    font-size: 1.1rem;
  }
}

@media (max-width: 375px) {
  body .settings-tab {
    font-size: 0.65rem;
    padding: 8px 10px;
    min-width: 54px;
  }
}


/* ─────────────────────────────────────────────────────
   FIX: Bottom sheet footer — prevent FAB overlap
   ───────────────────────────────────────────────────── */

@media (max-width: 480px) {
  body .bottom-sheet .sheet-footer,
  body .bottom-sheet footer,
  body .bottom-sheet [style*="justify-content"] {
    padding-right: 64px;
  }
}
/* ─── Calendar mobile polish (2026-08-30) ──────────────────────
   Header was overflowing (Today clipped off-screen) and the legend ate
   two rows. Year-jump arrows are a desktop affordance. */
@media (max-width: 768px) {
  body .cal-nav-year {
    display: none;
  }

  body .cal-header {
    gap: 8px;
  }

  body .cal-today-btn {
    padding: 6px 12px;
    font-size: 0.78rem;
    white-space: nowrap;
  }

  body .cal-legend {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 10px 16px 0;
  }

  body .cal-legend::-webkit-scrollbar {
    display: none;
  }
}

/* ===== css/dashboard-redesign.css ===== */
/* =====================================================
   SahiHisab — Dashboard Redesign: "The Photographer's Ledger"

   Aesthetic: Warm industrial precision. Premium cash register
   meets studio light meter. Bold numbers, warm shadows,
   staggered reveals. Sunlight readable. No glassmorphism.

   Mobile-first 375px. Sidebar-collapse aware.
   body .class specificity — no !important.
   ===================================================== */


/* ─────────────────────────────────────────────────────
   LOAD ANIMATION — Shutter cascade
   Cards stagger in like frames advancing on film.
   ───────────────────────────────────────────────────── */

/* ── Entrance: sections cascade in ── */
@keyframes dashSlideUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Entrance: individual items pop in ── */
@keyframes dashPopIn {
  0%   { opacity: 0; transform: scale(0.85) translateY(10px); }
  60%  { transform: scale(1.03) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Entrance: slide from left ── */
@keyframes dashSlideRight {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Revenue bars grow in ── */
@keyframes dashBarGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ── Continuous: soft breathing glow on hero cards ── */
@keyframes dashBreathe {
  0%, 100% { box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
  50%      { box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
}

/* ── Continuous: today's calendar dot pulse ── */
@keyframes dashTodayPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(14, 165, 233, 0); }
}

/* ── Continuous: dues card attention pulse ── */
@keyframes dashDuesPulse {
  0%, 100% { border-color: var(--danger, #ef4444); }
  50%      { border-color: rgba(239, 68, 68, 0.3); }
}

/* ── Continuous: subtle icon float on quick actions ── */
@keyframes dashIconFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

/* ── Continuous: shimmer sweep across stat values ── */
@keyframes dashShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ── Section entrance stagger ── */
body .dash-filter-bar       { animation: dashSlideUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
body .aaj-ka-summary        { animation: dashSlideUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.06s both; }
body .quick-actions          { animation: dashSlideUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both; }
body .jaldi-section          { animation: dashSlideUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both; }
body .stats-grid             { animation: dashSlideUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.24s both; }
body .dash-grid              { animation: dashSlideUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both; }

/* ── Individual items pop in with stagger ── */
body .aaj-summary-item:nth-child(1) { animation: dashPopIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both; }
body .aaj-summary-item:nth-child(2) { animation: dashPopIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both; }
body .aaj-summary-item:nth-child(3) { animation: dashPopIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.26s both; }

body .stat-card:nth-child(1) { animation: dashPopIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.28s both; }
body .stat-card:nth-child(2) { animation: dashPopIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.34s both; }
body .stat-card:nth-child(3) { animation: dashPopIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.40s both; }
body .stat-card:nth-child(4) { animation: dashPopIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.46s both; }
body .stat-card:nth-child(5) { animation: dashPopIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.52s both; }

/* ── Jaldi pills slide in from left one by one ── */
body .jaldi-pill:nth-child(1) { animation: dashSlideRight 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both; }
body .jaldi-pill:nth-child(2) { animation: dashSlideRight 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.26s both; }
body .jaldi-pill:nth-child(3) { animation: dashSlideRight 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.32s both; }
body .jaldi-pill:nth-child(4) { animation: dashSlideRight 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.38s both; }
body .jaldi-pill:nth-child(5) { animation: dashSlideRight 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.44s both; }
body .jaldi-pill:nth-child(6) { animation: dashSlideRight 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.50s both; }

/* ── Booking rows slide in staggered ── */
body .dash-grid .client-row:nth-child(1) { animation: dashSlideRight 0.4s ease 0.35s both; }
body .dash-grid .client-row:nth-child(2) { animation: dashSlideRight 0.4s ease 0.42s both; }
body .dash-grid .client-row:nth-child(3) { animation: dashSlideRight 0.4s ease 0.49s both; }
body .dash-grid .client-row:nth-child(4) { animation: dashSlideRight 0.4s ease 0.56s both; }

/* ── Activity rows stagger ── */
body .activity-row:nth-child(1) { animation: dashSlideRight 0.4s ease 0.4s both; }
body .activity-row:nth-child(2) { animation: dashSlideRight 0.4s ease 0.47s both; }
body .activity-row:nth-child(3) { animation: dashSlideRight 0.4s ease 0.54s both; }


/* ─────────────────────────────────────────────────────
   0. DATE FILTER BAR
   Scrollable pill row — frosted strip feel.
   ───────────────────────────────────────────────────── */

/* ── Demo Cleanup Banner ── */
body .dash-cleanup-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: var(--warning-light, #fef3c7);
  border: 1px solid var(--warning, #f59e0b);
  border-radius: 12px;
  animation: dashSlideUp 0.3s ease-out;
}

body .dash-filter-bar {
  margin-bottom: 16px;
  padding: 10px 14px;
  background: var(--card, #fff);
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

body .dash-filter-pills {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 0;
}

body .dash-filter-pills::-webkit-scrollbar {
  display: none;
}

body .dash-filter-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 50px;
  border: 1.5px solid var(--border, #e2e8f0);
  background: transparent;
  color: var(--text-secondary, #64748b);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 36px;
  flex-shrink: 0;
}

body .dash-filter-pill .material-symbols-rounded {
  font-size: 0.95rem;
}

body .dash-filter-pill:hover {
  border-color: var(--primary, #0ea5e9);
  color: var(--primary, #0ea5e9);
  background: rgba(14, 165, 233, 0.04);
}

body .dash-filter-pill.active {
  background: var(--primary, #0ea5e9);
  color: #fff;
  border-color: var(--primary, #0ea5e9);
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.25);
  transform: scale(1.05);
}

/* Mobile: show only Aaj, Mahina, Custom + currently active pill */
@media (max-width: 768px) {
  body .dash-filter-pill[data-period="all"]:not(.active),
  body .dash-filter-pill[data-period="week"]:not(.active),
  body .dash-filter-pill[data-period="quarter"]:not(.active),
  body .dash-filter-pill[data-period="year"]:not(.active) {
    display: none;
  }
}

body .dash-filter-pill:active {
  transform: scale(0.92);
}

body .dash-filter-custom {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--gray-50, #f8fafc);
  border-radius: 12px;
  border: 1px solid var(--border, #e2e8f0);
}

body .dash-date-input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 8px;
  font-size: 0.85rem;
  font-family: 'DM Sans', sans-serif;
  background: var(--card, #fff);
  color: var(--text-primary, #1e293b);
  min-height: 40px;
}

body .dash-date-input:focus {
  border-color: var(--primary, #0ea5e9);
  outline: none;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}


/* ─────────────────────────────────────────────────────
   1. AAJ KA SUMMARY — THE HERO SCOREBOARD
   These are THE numbers. Big, bold, unmissable.
   Warm gradient accents. Each card is a "meter reading".
   ───────────────────────────────────────────────────── */

body .aaj-ka-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

body .aaj-summary-item {
  background: var(--card, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 14px;
  padding: 12px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  position: relative;
  overflow: visible;
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.22s ease;
  border-left: none;
  min-width: 0;
  box-shadow: 0 1px 3px rgba(14,165,233,0.06), 0 1px 2px rgba(0,0,0,0.04);
}

/* Warm gradient strip at top of each hero card */
body .aaj-summary-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 16px 16px 0 0;
}

body .aaj-summary-item[data-aaj="bookings"]::before {
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

body .aaj-summary-item[data-aaj="collection"]::before {
  background: linear-gradient(90deg, #10b981, #34d399);
}

body .aaj-summary-item[data-aaj="expenses"]::before {
  background: linear-gradient(90deg, #ef4444, #f87171);
}

/* Breathing glow — cards feel alive, like a heartbeat */
body .aaj-summary-item {
  animation: dashBreathe 4s ease-in-out infinite;
}
body .aaj-summary-item:nth-child(2) { animation-delay: 1.3s; }
body .aaj-summary-item:nth-child(3) { animation-delay: 2.6s; }

body .aaj-summary-item:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 2px 4px rgba(14,165,233,0.08), 0 6px 12px rgba(14,165,233,0.10), 0 1px 0 rgba(255,255,255,0.6) inset;
}

body .aaj-summary-item:active {
  transform: scale(0.97);
}

/* Icon circle */
body .aaj-summary-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

body .aaj-summary-icon .material-symbols-rounded {
  font-size: 1.1rem;
}

/* THE BIG NUMBER — full amounts, auto-shrink for long numbers */
body .aaj-summary-value {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(0.72rem, 2.8vw, 1rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  word-break: keep-all;
}

/* Collection card — same size, no extra emphasis */
body .aaj-summary-item[data-aaj="collection"] .aaj-summary-value {
  font-size: clamp(0.72rem, 2.8vw, 1rem);
}

body .aaj-summary-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text-secondary, #64748b);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Breakdown sub-text */
body .aaj-summary-item[data-aaj="collection"] > div > div[style*="font-size:0.6rem"] {
  font-size: 0.65rem;
  line-height: 1.3;
  margin-top: 3px;
  font-weight: 500;
  opacity: 0.8;
}


/* ─────────────────────────────────────────────────────
   2. QUICK ACTIONS — Precision Tool Grid
   Like a photographer's tool belt. 3x2 grid.
   Each button is a "tool" — tap to deploy.
   ───────────────────────────────────────────────────── */

body .quick-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  margin-top: 0;
  overflow-x: auto;
  padding-bottom: 2px;
  padding-right: 0;
  scrollbar-width: none;
  position: static;
  -webkit-overflow-scrolling: touch;
}

body .quick-actions::before,
body .quick-actions::after {
  display: none;
}

@keyframes qaGlowSpin {
  from { --qa-glow-angle: 0deg; }
  to   { --qa-glow-angle: 360deg; }
}

@property --qa-glow-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

body .quick-actions::-webkit-scrollbar { display: none; }

body .quick-actions .quick-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 8px;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
  white-space: normal;
  width: 86px;
  min-width: 86px;
  text-align: center;
  line-height: 1.25;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(14,165,233,0.06), 0 1px 2px rgba(0,0,0,0.04);
  cursor: pointer;
  position: relative;
  z-index: 0;
  overflow: hidden;
  flex-shrink: 0;
}

/* Spinning glow border */
body .quick-actions .quick-action-btn::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  z-index: -2;
  border-radius: 11.5px;
  background: conic-gradient(
    from var(--qa-glow-angle, 0deg),
    transparent 0%,
    transparent 20%,
    #3b82f6 30%,
    #10b981 42%,
    #f59e0b 54%,
    #ec4899 66%,
    #0ea5e9 78%,
    transparent 88%,
    transparent 100%
  );
  animation: qaGlowSpin 3s linear infinite;
  opacity: 0.45;
}

/* Inner fill to mask gradient, showing only the glowing border */
body .quick-actions .quick-action-btn::after {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: 9px;
  background: var(--card, #fff);
}

body .quick-actions .quick-action-btn:hover::before {
  opacity: 0.85;
}

body .quick-actions .quick-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(14,165,233,0.08), 0 6px 12px rgba(14,165,233,0.10);
}

body .quick-actions .quick-action-btn:active {
  transform: scale(0.95);
}

body .quick-actions .quick-action-btn .material-symbols-rounded {
  font-size: 1.15rem;
  transition: transform 0.2s ease;
}

body .qa-icon {
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}


/* ─────────────────────────────────────────────────────
   3. JALDI ORDER — Speed Strip
   Horizontal scroll, pill-shaped. "Grab and go" feel.
   ───────────────────────────────────────────────────── */

body .jaldi-section {
  margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(14,165,233,0.06), 0 1px 2px rgba(0,0,0,0.04);
}

body .jaldi-section h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-primary, #1e293b);
  margin-bottom: 8px;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

body .jaldi-pills {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

body .jaldi-pills::-webkit-scrollbar {
  display: none;
}

body .jaldi-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--background, #F4F8FB);
  cursor: pointer;
  flex-shrink: 0;
  text-align: center;
  transition: all 0.2s ease;
}

body .jaldi-pill:hover {
  border-color: var(--primary, #0ea5e9);
  color: var(--primary, #0ea5e9);
}

body .jaldi-pill:active {
  transform: scale(0.95);
}

body .jaldi-pill .material-symbols-rounded {
  font-size: 1rem;
  transition: transform 0.2s ease;
}

body .jaldi-pill span:last-child {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary, #64748b);
  line-height: 1.2;
  white-space: nowrap;
}


/* ─────────────────────────────────────────────────────
   4. STATS GRID — The Metrics Wall
   Each stat is a "gauge". Color accent + big number.
   Left border gradient for visual coding.
   ───────────────────────────────────────────────────── */

body .stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

body .stat-card {
  background: var(--card, #fff);
  border-radius: 14px;
  padding: 12px;
  border: 1px solid var(--border, #e2e8f0);
  box-shadow: 0 1px 3px rgba(14,165,233,0.06), 0 1px 2px rgba(0,0,0,0.04);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.22s ease;
  position: relative;
  min-width: 0;
  overflow: visible;
}

/* Thicker gradient left border via pseudo */
body .stat-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
}

/* Remove the old decorative ::after */
body .stat-card::after {
  display: none;
}

/* Color-code each card's left accent based on inline border-left */
body .stat-card[style*="border-left:3px solid var(--primary)"]::before {
  background: linear-gradient(180deg, #3b82f6, #60a5fa);
}
body .stat-card[style*="border-left:3px solid var(--warning)"]::before {
  background: linear-gradient(180deg, #f59e0b, #fbbf24);
}
body .stat-card[style*="border-left:3px solid var(--success)"]::before {
  background: linear-gradient(180deg, #10b981, #34d399);
}
body .stat-card[style*="border-left:3px solid var(--danger)"]::before {
  background: linear-gradient(180deg, #ef4444, #f87171);
}

/* Hide the inline border-left since we use pseudo */
body .stat-card[style*="border-left:3px solid"] {
  border-left: 1.5px solid var(--border, #e2e8f0);
  padding-left: 18px;
}

body .stat-card:hover {
  box-shadow: 0 2px 4px rgba(14,165,233,0.08), 0 6px 12px rgba(14,165,233,0.10);
  transform: translateY(-3px) scale(1.02);
}

body .stat-card:active {
  transform: scale(0.97);
}

/* Dues stat card — pulsing border to grab attention */
body .stat-card[data-stat="dues"] {
  animation: dashDuesPulse 2s ease-in-out infinite;
}

body .stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

/* Icon bounces on card hover */
body .stat-card:hover .stat-icon {
  transform: scale(1.1);
}

body .stat-icon .material-symbols-rounded {
  font-size: 1.2rem;
}

body .stat-value {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(0.72rem, 2.5vw, 0.95rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 2px;
  letter-spacing: -0.02em;
}

body .stat-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.65rem;
  color: var(--text-secondary, #64748b);
  font-weight: 600;
  line-height: 1.2;
}

body .stat-card > div:last-child {
  min-width: 0;
  flex: 1;
}


/* ─────────────────────────────────────────────────────
   5. REVENUE TREND — Animated bars
   ───────────────────────────────────────────────────── */

body #dashRevenueTrend {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

body #dashRevenueTrend .analytics-bar-fill {
  transform-origin: left;
  animation: dashBarGrow 0.8s ease 0.3s both;
}


/* ─────────────────────────────────────────────────────
   6. PAYMENT DUES ALERT
   ───────────────────────────────────────────────────── */

body #dashPaymentDues {
  margin-bottom: 16px;
}


/* ─────────────────────────────────────────────────────
   7. DASH GRID — Content panels
   Upcoming bookings, calendar, activity.
   ───────────────────────────────────────────────────── */

body .dash-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

body .dash-grid .card {
  border-radius: 16px;
  overflow: hidden;
  border: 1.5px solid var(--border, #e2e8f0);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

body .dash-grid .card-header {
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border-light, #f1f5f9);
}

body .dash-grid .card-header h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary, #1e293b);
}

/* Booking rows */
body .dash-grid .client-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-light, #f1f5f9);
  min-height: 58px;
  transition: background 0.12s;
}

body .dash-grid .client-row:last-child {
  border-bottom: none;
}

body .dash-grid .client-row:hover {
  background: var(--gray-50, #f8fafc);
  padding-left: 22px;
}

body .dash-grid .client-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

/* Avatar scales up on row hover */
body .dash-grid .client-row:hover .client-avatar {
  transform: scale(1.08);
}

body .dash-grid .client-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

body .dash-grid .client-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary, #1e293b);
}

body .dash-grid .client-phone {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.68rem;
  color: var(--text-secondary, #64748b);
}

/* Due amount — bold and color-coded */
body .dash-grid .client-balance {
  flex-shrink: 0;
  text-align: right;
  margin-left: auto;
}

body .dash-grid .client-balance .amount {
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
}

body .dash-grid .client-balance .amount.due {
  color: var(--danger, #ef4444);
}

body .dash-grid .client-balance .amount.clear {
  color: var(--success, #10b981);
}

body .dash-grid .client-balance .balance-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}


/* ─────────────────────────────────────────────────────
   8. ACTIVITY ROWS
   ───────────────────────────────────────────────────── */

body .activity-row {
  padding: 12px 18px;
  gap: 10px;
}

body .activity-row .stat-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 10px;
}

body .activity-row .stat-icon .material-symbols-rounded {
  font-size: 1rem;
}

body .activity-row .client-info {
  flex: 1;
  min-width: 0;
}

body .activity-row .client-name {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.3;
}

body .activity-row .client-phone {
  font-size: 0.75rem;
  color: var(--text-secondary, #64748b);
}

body .activity-row .activity-time {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.7rem;
  color: var(--text-muted);
  flex-shrink: 0;
  white-space: nowrap;
}

body .activity-row .activity-time .material-symbols-rounded {
  font-size: 0.8rem;
}


/* ─────────────────────────────────────────────────────
   9. EMPTY STATE
   ───────────────────────────────────────────────────── */

body .dash-grid .empty-state {
  padding: 40px 20px;
  text-align: center;
}

body .dash-grid .empty-state p {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  color: var(--text-secondary, #64748b);
}

body .dash-grid .empty-state-cta {
  margin-top: 12px;
  min-height: 44px;
  padding: 10px 20px;
  font-size: 0.88rem;
  border-radius: 10px;
}


/* ─────────────────────────────────────────────────────
   10. MINI CALENDAR
   Solid, compact, high-contrast date grid.
   ───────────────────────────────────────────────────── */

body .calendar-legend-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

body .mini-calendar-card {
  background: var(--card, #fff);
  backdrop-filter: none;
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 16px;
  padding: 16px 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* Desktop: mini calendar stays a compact ~300px widget, not a full-column
   sprawl (aspect-ratio day cells blow up with column width). */
@media (min-width: 900px) {
  body .mini-calendar-card {
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
}

body .mini-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 0 2px;
}

body .mini-cal-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary, #1e293b);
}

body .mini-cal-nav {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1.5px solid var(--border, #e2e8f0);
  background: var(--card, #fff);
  color: var(--text-primary, #1e293b);
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

body .mini-cal-nav:active {
  background: var(--primary, #0ea5e9);
  border-color: var(--primary, #0ea5e9);
  color: #fff;
  transform: scale(0.92);
}

body .mini-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  width: 100%;
}

body .mini-cal-dayname {
  text-align: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted, #94a3b8);
  padding: 4px 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

body .mini-cal-day,
body .mini-cal-empty {
  aspect-ratio: 1 / 1;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

body .mini-cal-day {
  cursor: pointer;
  transition: background 0.12s ease;
}

body .mini-cal-day:active {
  background: rgba(14, 165, 233, 0.08);
}

/* Today — solid accent circle with living pulse */
body .mini-cal-day.today {
  background: var(--primary, #0ea5e9);
  color: #fff;
  font-weight: 700;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);
  animation: dashTodayPulse 2.5s ease-in-out infinite;
}

body .mini-cal-day.has-events {
  font-weight: 700;
}

body .mini-cal-daynum {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  line-height: 1;
  font-weight: 600;
}

/* Event dots */
body .mini-cal-dots {
  display: flex;
  gap: 2px;
  position: absolute;
  bottom: 3px;
}

body .mini-cal-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}


/* ─────────────────────────────────────────────────────
   11. COLOR LEGEND — Proper pill badges
   Not tiny dots. Actual readable, tappable badges.
   This is the FIX for the broken legend.
   ───────────────────────────────────────────────────── */

body .color-legend-card {
  background: var(--card, #fff);
  backdrop-filter: none;
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

body .color-legend-card h4 {
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text-primary, #1e293b);
}

body .legend-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 6px;
  background: var(--gray-50, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 50px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
  white-space: nowrap;
  min-height: 28px;
}

body .legend-dot {
  width: 10px;
  height: 10px;
  min-width: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.06);
}


/* ─────────────────────────────────────────────────────
   RESPONSIVE — Wider phones (400px+)
   ───────────────────────────────────────────────────── */

@media (min-width: 400px) {
  body .aaj-summary-value {
    font-size: 1.5rem;
  }

  body .aaj-summary-item[data-aaj="collection"] .aaj-summary-value {
    font-size: 1.7rem;
  }

  body .aaj-summary-label {
    font-size: 0.75rem;
  }

  body .stat-value {
    font-size: 1.35rem;
  }

  body .quick-actions .quick-action-btn {
    font-size: 0.75rem;
    padding: 18px 8px;
    min-height: 80px;
  }
}


/* ─────────────────────────────────────────────────────
   RESPONSIVE — Tablet+ (769px)
   Two-column dash grid, horizontal layouts.
   ───────────────────────────────────────────────────── */

@media (min-width: 769px) {
  /* Summary — row with larger cards */
  body .aaj-ka-summary {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
  }

  body .aaj-summary-item {
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding: 22px 20px;
    gap: 16px;
    border-radius: 18px;
  }

  /* Colored left border on desktop hero cards */
  body .aaj-summary-item::before {
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: 4px;
    height: auto;
    border-radius: 18px 0 0 18px;
  }

  body .aaj-summary-value {
    font-size: 1.7rem;
  }

  body .aaj-summary-item[data-aaj="collection"] .aaj-summary-value {
    font-size: 1.9rem;
  }

  body .aaj-summary-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
  }

  body .aaj-summary-icon .material-symbols-rounded {
    font-size: 1.5rem;
  }

  body .aaj-summary-label {
    font-size: 0.8rem;
  }

  /* Quick Actions — single row */
  body .quick-actions {
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-bottom: 24px;
  }

  body .quick-actions .quick-action-btn {
    padding: 20px 10px;
    min-height: 88px;
    font-size: 0.8rem;
    border-radius: 16px;
  }

  body .quick-actions .quick-action-btn .material-symbols-rounded {
    font-size: 1.6rem;
  }

  /* Stats — auto-fit grid */
  body .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
  }

  body .stat-card {
    padding: 20px 18px;
    border-radius: 16px;
  }

  body .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }

  body .stat-value {
    font-size: 1.5rem;
  }

  body .stat-label {
    font-size: 0.78rem;
  }

  /* Dash Grid — responsive columns (Calendar · Inquiry QR · Activity):
     3 across on wide desktop, 2 on medium, stacks on mobile via the base flex rule. */
  body .dash-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
  }

  /* Calendar+legend — row */
  body .calendar-legend-wrap {
    flex-direction: row;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 0;
  }

  body .mini-calendar-card {
    padding: 20px 18px;
    flex: 1;
  }

  body .mini-cal-title {
    font-size: 1.05rem;
  }

  body .mini-cal-daynum {
    font-size: 0.85rem;
  }

  body .mini-cal-nav {
    width: 40px;
    height: 40px;
  }

  body .mini-cal-nav:hover {
    background: var(--primary, #0ea5e9);
    color: #fff;
    border-color: var(--primary, #0ea5e9);
  }

  /* Legend — vertical on desktop */
  body .legend-list {
    flex-direction: column;
    gap: 6px;
  }

  body .legend-item {
    width: fit-content;
  }

  /* Jaldi pills bigger */
  body .jaldi-pill {
    padding: 16px 20px;
    min-width: 88px;
  }

  /* Filter bar wider */
  body .dash-filter-bar {
    padding: 12px 18px;
  }
}


/* ─────────────────────────────────────────────────────
   RESPONSIVE — Large desktop (1200px+)
   Max comfort, big numbers, spacious layout.
   ───────────────────────────────────────────────────── */

@media (min-width: 1200px) {
  body .aaj-summary-value {
    font-size: 1.9rem;
  }

  body .aaj-summary-item[data-aaj="collection"] .aaj-summary-value {
    font-size: 2.1rem;
  }

  body .stats-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  body .stat-value {
    font-size: 1.7rem;
  }

  body .stat-card {
    padding: 22px 20px;
  }

  body .dash-grid {
    gap: 24px;
  }
}


/* ─────────────────────────────────────────────────────
   SIDEBAR COLLAPSE AWARENESS
   When sidebar collapses on medium screens (1024-1279px),
   the main content area expands. Dashboard should
   re-flow gracefully.
   ───────────────────────────────────────────────────── */

@media (min-width: 1024px) and (max-width: 1279px) {
  /* When sidebar is icon-only (~60px), stats get more room */
  body .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  body .aaj-ka-summary {
    gap: 14px;
  }

  body .quick-actions {
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
  }
}

/* Sidebar expanded on large screens — content has less width */
@media (min-width: 1280px) {
  body .stats-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
  }

  body .aaj-ka-summary {
    gap: 18px;
  }

  body .dash-grid {
    grid-template-columns: 1.3fr 1fr;
  }
}


/* ─────────────────────────────────────────────────────
   DARK MODE
   Maintain high contrast. Warm card surfaces.
   ───────────────────────────────────────────────────── */

body.dark-mode .aaj-summary-item {
  background: var(--card);
  border-color: var(--border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

body.dark-mode .stat-card {
  background: var(--card);
  border-color: var(--border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

body.dark-mode .quick-action-btn {
  background: var(--card);
  border-color: transparent;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

body.dark-mode .jaldi-pill {
  background: var(--card);
  border-color: var(--border);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

body.dark-mode .mini-calendar-card {
  background: var(--card);
  border-color: var(--border);
}

body.dark-mode .color-legend-card {
  background: var(--card);
  border-color: var(--border);
}

body.dark-mode .mini-cal-nav {
  background: var(--card);
  border-color: var(--border);
}

body.dark-mode .legend-item {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border);
}

body.dark-mode .dash-cleanup-banner {
  background: var(--warning-light);
  border-color: rgba(245, 158, 11, 0.3);
}

body.dark-mode .dash-filter-bar {
  background: var(--card);
  border-color: var(--border);
}

body.dark-mode .dash-filter-pill {
  border-color: var(--border);
}

body.dark-mode .dash-filter-pill.active {
  background: var(--primary, #0ea5e9);
  border-color: var(--primary, #0ea5e9);
  color: #fff;
}

body.dark-mode .dash-grid .client-row:hover {
  background: rgba(255, 255, 255, 0.03);
}

body.dark-mode .mini-cal-day.today {
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.4);
}


/* ─────────────────────────────────────────────────────
   ACCESSIBILITY — Focus states
   High-contrast outlines for keyboard navigation.
   ───────────────────────────────────────────────────── */

body .stat-card:focus-visible,
body .aaj-summary-item:focus-visible,
body .quick-action-btn:focus-visible,
body .jaldi-pill:focus-visible,
body .dash-filter-pill:focus-visible,
body .mini-cal-nav:focus-visible {
  outline: 2px solid var(--primary, #0ea5e9);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.15);
}


/* ─────────────────────────────────────────────────────
   REDUCED MOTION
   Respect user preferences. Kill animations.
   ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  /* Kill all entrance animations */
  body .dash-filter-bar,
  body .aaj-ka-summary,
  body .quick-actions,
  body .jaldi-section,
  body .stats-grid,
  body .dash-grid,
  body .aaj-summary-item,
  body .stat-card,
  body .jaldi-pill,
  body .dash-grid .client-row,
  body .activity-row {
    animation: none;
  }

  /* Kill all continuous animations */
  body .aaj-summary-item { animation: none; }
  body .mini-cal-day.today { animation: none; }
  body .stat-card[data-stat="dues"] { animation: none; }
  body .quick-action-btn .material-symbols-rounded { animation: none; }

  body #dashRevenueTrend .analytics-bar-fill {
    animation: none;
  }

  /* Kill all transitions */
  body .aaj-summary-item,
  body .stat-card,
  body .quick-action-btn,
  body .jaldi-pill,
  body .mini-cal-nav,
  body .dash-grid .client-row,
  body .dash-grid .client-avatar,
  body .stat-icon,
  body .dash-filter-pill {
    transition: none;
  }

  /* Kill glow border */
  body .quick-action-btn::before {
    animation: none;
    opacity: 0;
  }
}


/* ─────────────────────────────────────────────────────
   MOBILE 375px FIXES
   Ensure dashboard elements don't cramp on small screens.
   This block loads last → wins cascade conflicts.
   ───────────────────────────────────────────────────── */

@media (max-width: 480px) {
  /* Aaj Ka Summary: 2 columns on small phones (not 3) */
  body .aaj-ka-summary {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  body .aaj-summary-value {
    font-size: 1.15rem;
  }

  body .aaj-summary-item[data-aaj="collection"] .aaj-summary-value {
    font-size: 1.3rem;
  }

  body .aaj-summary-item {
    padding: 14px 12px;
    border-radius: 14px;
  }

  /* Cleanup banner: tighter on small screens */
  body .dash-cleanup-banner {
    gap: 6px;
    padding: 8px 10px;
    font-size: 0.78rem;
  }

  /* Quick actions: keep 3-col grid but tighten spacing */
  body .quick-actions {
    gap: 8px;
    margin-top: 12px;
    margin-bottom: 16px;
  }

  body .quick-actions .quick-action-btn {
    padding: 12px 4px;
    min-height: 68px;
    font-size: 0.68rem;
    border-radius: 12px;
  }

  body .quick-actions .quick-action-btn .material-symbols-rounded {
    font-size: 1.2rem;
  }

  /* Stats grid: 2 columns */
  body .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  /* Filter pills: smaller on mobile */
  body .dash-filter-pill {
    padding: 6px 10px;
    font-size: 0.72rem;
  }

  body .dash-filter-bar {
    padding: 8px 10px;
    margin-bottom: 12px;
  }

  /* Dash grid: full width on mobile */
  body .dash-grid {
    margin-left: -8px;
    margin-right: -8px;
  }
  body .dash-grid .card {
    border-radius: 12px;
  }
}

/* Dash grid wider on mobile (up to 768px) */
@media (max-width: 768px) {
  body .dash-grid {
    margin-left: -4px;
    margin-right: -4px;
    gap: 10px;
  }
}

/* ===== css/dashboard-home.css ===== */
/* =====================================================
   SahiHisab — Home (launcher dashboard)
   Mobile-first 375px. Every selector is namespaced .dh-
   so it can never collide with legacy dashboard CSS.
   ===================================================== */

.dh-home {
  max-width: 760px;
  margin: 0 auto;
  padding: 2px 0 28px;
}

/* ── Poster — ticket-stub campaign/brand slot ──
   The zigzag bottom edge is a mask, so whatever renders inside
   (campaign banner or brand poster) gets the perforated cut and
   the page background shows through the teeth. */
.dh-poster {
  position: relative;
  margin-bottom: 18px;
  border-radius: 22px 22px 0 0;
  overflow: hidden;
  /* drop-shadow (unlike box-shadow) follows the masked zigzag, so the torn
     edge casts a real jagged shadow on the page */
  filter: drop-shadow(0 12px 14px rgba(7, 40, 74, 0.4)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.22));
  -webkit-mask:
    linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 27px) no-repeat,
    radial-gradient(27px at 50% 0, #000 26.5px, rgba(0,0,0,0) 27px) 0 100% / 54px 27px repeat-x;
  mask:
    linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 27px) no-repeat,
    radial-gradient(27px at 50% 0, #000 26.5px, rgba(0,0,0,0) 27px) 0 100% / 54px 27px repeat-x;
}

/* THE SLOT IS 16:9 EVERYWHERE — an ad-banner contract: one aspect ratio so
   any admin-pushed image or video fits every studio and screen unchanged. */
.dh-poster {
  aspect-ratio: 16 / 9;
}

/* Admin media fills the slot edge to edge; the scallop mask clips it too */
.dh-poster-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Brand fallback poster — saturated in both themes; it's printed matter */
.dh-poster-brand {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 54px 20px 44px;
  color: #fff;
  background:
    radial-gradient(120% 90% at 85% -20%, hsla(187, 85%, 62%, 0.35), transparent 55%),
    linear-gradient(160deg, var(--primary-400), var(--primary-600) 55%, var(--primary-700));
}

/* Paper curl: the teeth tips shade darker, as if lifting off the page */
.dh-poster::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 55%, rgba(0, 0, 0, 0.26) 100%);
  pointer-events: none;
}

/* Thin rule with a camera glyph between name and tagline — printed-matter feel */
.dh-poster-rule {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0;
  color: rgba(255, 255, 255, 0.85);
}

.dh-poster-rule i {
  display: block;
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65));
}

.dh-poster-rule i:last-child {
  transform: scaleX(-1);
}

.dh-poster-rule .material-symbols-rounded {
  font-size: 15px;
}

/* Wordmark pinned top-left inside the poster, per the wireframe */
.dh-poster-mark {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top, 0px));
  left: 20px;
  font-family: 'Didot', 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.95);
}

.dh-poster-name {
  font-size: clamp(1.6rem, 7vw, 2.1rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  text-shadow: 0 2px 14px rgba(7, 40, 74, 0.35);
}

.dh-poster-tag {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.88);
}

/* Campaign banner rendered inside the stub keeps its own look,
   minus outer spacing so it fills the frame */
.dh-poster .cb-banner {
  margin: 0;
  border-radius: 0;
}

/* ── Greeting: one rotating line above the search (dashboard.js _GREETS) ── */
.dh-greet {
  margin: 0 0 10px;
  padding: 0 4px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  min-height: 1.3em; /* lines differ in length; keep the search from jumping */
  color: var(--text-muted);
  text-align: center;
}
.dh-greet b { font-weight: 800; color: var(--primary); }
.dh-greet-txt {
  display: inline-block;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.dh-greet-txt.is-out { opacity: 0; transform: translateY(4px); }
@media (prefers-reduced-motion: reduce) {
  .dh-greet-txt { transition: none; }
}

/* ── Search row: existing dsh-search pill (styles in app.css) + bell ── */
.dh-search-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

/* The pill and its results panel are ONE column now. They used to be siblings
   at different nesting levels, each centred with `margin-inline: auto` and
   `max-width: 640px` — but the pill centres inside (row − bell 52 − gap 10)
   while the panel centred on the whole row, so the panel sat 31px to the
   right of the pill it belongs to. */
.dh-search-row .dsh-search-col {
  flex: 1;
  min-width: 0;
}

.dh-bell {
  position: relative;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--card);
  color: var(--foreground);
  box-shadow: 0 1px 3px rgba(16, 42, 67, 0.06);
  cursor: pointer;
}

.dh-bell .material-symbols-rounded {
  font-size: 1.4rem;
  transform-origin: 50% 12%; /* swings from the bell's hanger, not its centre */
}

.dh-bell .nav-art {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
  transform-origin: 50% 12%; /* same hanger pivot — the ring must not spin the art about its middle */
}

/* Bell micro-interactions — same spring language as the tiles: hover lift,
   press squish, touch-point ripple, then the bell rings and the unread dot
   pops (.is-ringing is toggled by JS on click) */
.dh-bell {
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.35s var(--sh-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)),
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.35s var(--sh-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}

.dh-bell:active {
  transform: scale(0.88);
  transition-duration: 0.12s;
}

.dh-bell:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .dh-bell:hover {
    transform: translateY(-2px);
    border-color: var(--primary-300);
    color: var(--primary-600);
    box-shadow: 0 10px 18px -10px hsla(200, 80%, 38%, 0.45);
  }
  .dh-bell:hover:active {
    transform: scale(0.88);
    transition-duration: 0.12s;
  }
}

@keyframes dh-bell-ring {
  0%   { transform: rotate(0); }
  15%  { transform: rotate(18deg); }
  30%  { transform: rotate(-15deg); }
  45%  { transform: rotate(11deg); }
  60%  { transform: rotate(-7deg); }
  75%  { transform: rotate(4deg); }
  90%  { transform: rotate(-2deg); }
  100% { transform: rotate(0); }
}

@keyframes dh-bell-dot-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.7); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: no-preference) {
  .dh-bell.is-ringing .material-symbols-rounded,
  .dh-bell.is-ringing .nav-art {
    animation: dh-bell-ring 0.7s ease-in-out;
  }
  .dh-bell.is-ringing .dh-bell-dot {
    animation: dh-bell-dot-pop 0.45s var(--sh-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) 0.1s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dh-bell { transition: none; }
}

.dh-bell-dot {
  position: absolute;
  top: 12px;
  right: 13px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--destructive);
  border: 1.5px solid var(--card);
}

/* Mic hugs the right edge of the pill; the clear ✕ (visible only while
   typing) sits to its left, so idle state has no orphan gap */
.dh-home .dsh-search-clear {
  right: 50px;
}

.dh-home .dsh-search-input {
  padding-right: 96px;
}

/* ── Tile grid ── */
.dh-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 12px;
  margin-top: 22px;
}

.dh-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 4px 2px 8px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Uniform sea-blue tiles, exactly like the wireframe.
   Micro-interactions use the app's spring easing (life.css language):
   hover = lift + icon fill-in, press = quick springy squish. */
.dh-tile-ico {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background: var(--primary-200);
  color: var(--primary-800);
  transition:
    transform 0.35s var(--sh-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)),
    background 0.2s ease,
    box-shadow 0.35s var(--sh-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
  will-change: transform;
}

.dh-tile-ico .material-symbols-rounded {
  font-size: 2.05rem;
}

/* 3D launcher art. The asset ships its own white plate, so the tile plate
   turns white in BOTH themes and the art fills it edge to edge — no masking,
   no halo, nothing to go wrong when the theme flips. */
.dh-tile-ico--art {
  background: hsl(0, 0%, 100%);
  box-shadow:
    0 2px 6px -2px hsla(210, 40%, 25%, 0.18),
    0 0 0 1px hsla(210, 25%, 80%, 0.5);
}

.dh-tile-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.dh-tile-label {
  transition: color 0.2s ease;
}

/* Ripple born at the exact touch/click point (element injected by JS) */
.dh-tile-ico {
  position: relative;
  overflow: hidden;
}

.dh-ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, hsla(200, 95%, 75%, 0.55) 0%, hsla(200, 90%, 62%, 0.28) 40%, transparent 70%);
  transform: scale(0);
  animation: dh-ripple 0.55s ease-out forwards;
}

@keyframes dh-ripple {
  to { transform: scale(1); opacity: 0; }
}

/* Jelly wobble: squash-and-stretch on hover-enter — physics, not paint */
@keyframes dh-jelly {
  0%   { transform: scale(1, 1); }
  30%  { transform: scale(1.16, 0.88); }
  50%  { transform: scale(0.94, 1.08); }
  70%  { transform: scale(1.05, 0.97); }
  100% { transform: scale(1, 1); }
}

@media (hover: hover) and (pointer: fine) {
  .dh-tile:hover .dh-tile-ico {
    background: var(--primary-300);
    box-shadow: 0 12px 22px -10px hsla(200, 80%, 38%, 0.45);
  }
  .dh-tile:hover .dh-tile-ico .material-symbols-rounded,
  .dh-tile:hover .dh-tile-img {
    animation: dh-jelly 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .dh-tile:hover .dh-tile-ico--art {
    background: hsl(0, 0%, 100%);
    box-shadow:
      0 12px 22px -10px hsla(200, 80%, 38%, 0.45),
      0 0 0 1px hsla(200, 60%, 70%, 0.6);
  }
  .dh-tile:hover .dh-tile-label {
    color: var(--primary-600);
  }
}

/* Press squish — JS clears the tilt's inline transform on pointerdown so
   this always wins (no !important per house rules) */
.dh-tile:active .dh-tile-ico {
  transform: scale(0.88);
  transition-duration: 0.12s;
}

.dh-tile:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

.dh-tile-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--foreground);
  line-height: 1.2;
  text-align: center;
}

/* ── Entrance motion ── */
@media (prefers-reduced-motion: no-preference) {
  .dh-poster { animation: dh-in 0.4s ease both; }
  .dh-greet { animation: dh-in 0.35s ease both; }
  .dh-search-row { animation: dh-in 0.35s ease 0.05s both; }
  .dh-tile { animation: dh-in 0.35s ease both; }
  .dh-tile:nth-child(1) { animation-delay: 0.08s; }
  .dh-tile:nth-child(2) { animation-delay: 0.12s; }
  .dh-tile:nth-child(3) { animation-delay: 0.16s; }
  .dh-tile:nth-child(4) { animation-delay: 0.2s; }
  .dh-tile:nth-child(5) { animation-delay: 0.24s; }
  .dh-tile:nth-child(6) { animation-delay: 0.28s; }
  .dh-tile:nth-child(7) { animation-delay: 0.32s; }
}

/* Desktop-only / mobile-only tiles: the desktop sidebar already has Calendar,
   so its slot becomes Add Expense there; mobile keeps Calendar (the tabbar "+"
   sheet already offers Add Expense). Grid stays 6 visible either way. */
.dh-tile.dh-tile--desktop { display: none; }
@media (min-width: 1024px) {
  .dh-tile.dh-tile--desktop { display: flex; }
  .dh-tile.dh-tile--mobile { display: none; }
}

@keyframes dh-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Dark mode ── */
:root.dark-mode .dh-bell {
  box-shadow: none;
}

/* On a near-black page a black shadow vanishes — a faint blue underglow
   carries the hanging-paper depth instead */
:root.dark-mode .dh-poster {
  filter: drop-shadow(0 14px 16px rgba(0, 0, 0, 0.55)) drop-shadow(0 5px 12px hsla(200, 90%, 55%, 0.28));
}

/* Dark mode: solid-feeling blue tiles, bright ink — not washed-out tints */
:root.dark-mode .dh-tile-ico {
  background: hsla(200, 75%, 50%, 0.32);
  color: hsl(200, 90%, 78%);
}

:root.dark-mode .dh-tile:hover .dh-tile-label {
  color: hsl(200, 85%, 74%);
}
:root.dark-mode .dh-greet b { color: hsl(200, 85%, 74%); }

:root.dark-mode .dh-tile:hover .dh-tile-ico {
  background: hsla(200, 75%, 50%, 0.44);
}

/* Night: no plate at all. The art is cut out (transparent), so the icons sit
   straight on the dark background like a phone home screen — a white squircle
   here reads as six glaring blocks. */
:root.dark-mode .dh-tile-ico--art,
:root.dark-mode .dh-tile:hover .dh-tile-ico--art {
  background: transparent;
  box-shadow: none;
}

/* ── Mobile: the launcher owns the whole screen ──
   The app header hides (the poster's wordmark IS the header, like the
   wireframe) and the poster bleeds edge to edge. */
@media (max-width: 1023px) {
  body.on-dh-home .app-header { display: none; }
  body.on-dh-home .page-content { padding: 0; }
  /* Poster/layout rules are UNGATED (the poster only exists on the home
     page anyway) — gating them on the body class left rounded corners
     poking white wedges when the class raced the render. */
  .dh-home {
    padding: 0 16px calc(104px + env(safe-area-inset-bottom, 0px));
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
  }
  /* Slack splits above and below the search+grid group — on tall screens a
     single top gap became a void once the poster fixed to 16:9 */
  .dh-home .dh-greet { margin-top: auto; }
  .dh-home .dsh-search-sticky { top: 0; }
  .dh-home .dh-grid { margin-top: 24px; margin-bottom: auto; }
  .dh-poster { margin: 0 -16px 20px; border-radius: 0; }
  .dh-poster-brand {
    padding-top: calc(58px + env(safe-area-inset-top, 0px));
  }
}

/* ── Larger screens ── */
@media (min-width: 640px) {
  .dh-home { padding-top: 8px; }
  .dh-poster-brand { padding: 24px 28px 44px; }
  .dh-poster-mark { top: 20px; left: 28px; font-size: 1.6rem; }
  .dh-grid { max-width: 620px; margin-left: auto; margin-right: auto; gap: 30px 20px; }
  .dh-tile-ico { width: 100px; height: 100px; border-radius: 30px; }
  .dh-tile-ico .material-symbols-rounded { font-size: 2.6rem; }
  .dh-tile-label { font-size: 0.9rem; }
}

/* Desktop: the sidebar already navigates — the launcher becomes a compact,
   proportioned block instead of a stretched phone screen */
@media (min-width: 1024px) {
  /* Desktop only: search + tiles lead, the poster drops below them (order,
     so phones/tablets keep the poster-first DOM untouched) */
  .dh-home { max-width: 980px; margin: 0 auto; padding-top: 36px; display: flex; flex-direction: column; }
  .dh-poster { order: 3; margin: 26px 0 0; border-radius: 22px 22px 0 0; animation-delay: 0.2s; }
  .dh-poster-brand { padding: 22px 26px 40px; }
  .dh-poster-name { font-size: 1.9rem; }
  .dh-poster-tag { font-size: 0.85rem; }
  .dh-greet { font-size: 1.05rem; margin-bottom: 14px; }
  /* Search: plain centered pill — the sticky wrapper's band/shadow chrome
     reads as a broken grey strip on desktop */
  .dh-home .dsh-search-sticky {
    position: static;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }
  .dh-grid {
    width: 100%; /* flex-column parent: auto side margins would shrink-wrap it */
    max-width: none;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px 12px;
    margin-top: 40px;
  }
  .dh-tile-ico { width: 104px; height: 104px; border-radius: 30px; }
  .dh-tile-ico .material-symbols-rounded { font-size: 2.7rem; }
  .dh-tile-label { font-size: 0.85rem; }
}

/* ── Photographic default poster ──────────────────────────────────────────
   The art is a real image now, not inline SVG, so the text HAS to stay in the
   DOM: the app ships in 8 languages and the studio's own name goes here. Baked
   into the artwork it would be English for everyone and wrong for everyone.

   Admin-pushed media (.dh-poster-media) deliberately gets NO overlay — a
   campaign creative carries its own wording, and ours on top of it would
   collide. */
.dh-poster-brand--photo {
  align-items: flex-start;
  text-align: left;
  padding: 54px 20px 52px;   /* 52 clears the scalloped bite at the bottom */
  background: var(--primary-800);   /* holds the colour until the image paints */
}

.dh-poster-art-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The artwork's left third is dark and open, but "mostly dark" is not a
   contrast guarantee — this makes it one, and fades out before it reaches the
   photographer. */
.dh-poster-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg,
    rgba(7, 40, 74, 0.80) 0%,
    rgba(7, 40, 74, 0.46) 34%,
    rgba(7, 40, 74, 0) 60%);
}

/* Lifted above the art. Set individually, NOT with a blanket child selector:
   .dh-poster-mark is position:absolute and giving it position:relative would
   unpin it from the corner it is placed in. */
.dh-poster-brand--photo .dh-poster-mark { z-index: 2; }
.dh-poster-brand--photo .dh-poster-name,
.dh-poster-brand--photo .dh-poster-rule,
.dh-poster-brand--photo .dh-poster-tag { position: relative; z-index: 2; }

/* A long studio name must stop before the photographer, not wrap across him. */
.dh-poster-brand--photo .dh-poster-name,
.dh-poster-brand--photo .dh-poster-tag { max-width: 54%; }

/* On a phone the slot is only ~211px tall and the name is centred in it, so a
   two-line name ran straight into the wordmark pinned at the top, and a real
   one — "Shri Balaji Digital Colour Lab And Studio" — took four lines and
   covered the whole poster. Smaller type, capped at two lines, and the rule
   drops out: there is no room for decoration at this size. */
@media (max-width: 560px) {
  .dh-poster-brand--photo { padding: 54px 16px 44px; }

  .dh-poster-brand--photo .dh-poster-name {
    font-size: 1.25rem;
    max-width: 62%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .dh-poster-brand--photo .dh-poster-rule { display: none; }
  .dh-poster-brand--photo .dh-poster-tag { font-size: 0.78rem; max-width: 62%; }
}

/* ── Subscribe bar ──
   Sits between the greeting and the search field, so it is the first thing
   under the poster and cannot be missed on a phone. Deliberately NOT inside
   .dsh-search-sticky — it must scroll away, not ride the sticky header. */
.dh-subbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--warning-light);
  border: 1px solid var(--warning);
  color: var(--foreground);
  font-size: 0.85rem;
  font-weight: 600;
}

.dh-subbar-ico {
  font-size: 20px;
  color: var(--warning);
  flex-shrink: 0;
}

.dh-subbar-txt {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

.dh-subbar-btn {
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 16px;
  border: none;
  border-radius: 9px;
  background: var(--warning);
  color: hsl(210, 50%, 10%);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.dh-subbar-btn:active { transform: scale(0.97); }

/* Attention, not nagging. This button is on screen for every trial studio on
   every dashboard visit, so the motion is a sheen that sweeps ONCE per long
   cycle and rests for most of it, plus a soft ring that breathes with it.
   Both run on the pseudo-element / box-shadow — never on the button's own
   transform, which `:active` owns. Composited properties only, so cheap
   phones are not repainting layout 60 times a second. */
.dh-subbar-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.dh-subbar-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg,
              transparent 30%,
              hsla(0, 0%, 100%, 0.6) 48%,
              transparent 66%);
  transform: translateX(-130%);
  animation: dh-subbar-sheen 4.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  will-change: transform;
  pointer-events: none;
}

@keyframes dh-subbar-sheen {
  0%, 58%   { transform: translateX(-130%); }
  82%, 100% { transform: translateX(130%);  }
}

@keyframes dh-subbar-ring {
  0%, 58%, 100% { box-shadow: 0 0 0 0 hsla(38, 92%, 50%, 0.5); }
  70%           { box-shadow: 0 0 0 7px hsla(38, 92%, 50%, 0); }
}

.dh-subbar-btn { animation: dh-subbar-ring 4.5s ease-out infinite; }

/* Final 3 days: same rhythm, red ring. */
.dh-subbar--urgent .dh-subbar-btn { animation-name: dh-subbar-ring-urgent; }

@keyframes dh-subbar-ring-urgent {
  0%, 58%, 100% { box-shadow: 0 0 0 0 hsla(0, 72%, 51%, 0.55); }
  70%           { box-shadow: 0 0 0 7px hsla(0, 72%, 51%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .dh-subbar-btn,
  .dh-subbar-btn::after { animation: none; }
  .dh-subbar-btn::after { display: none; }
}

/* Final 3 days — the same strip, escalated. */
.dh-subbar--urgent {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  border-color: var(--danger);
}

.dh-subbar--urgent .dh-subbar-ico { color: var(--danger); }

.dh-subbar--urgent .dh-subbar-btn {
  background: var(--danger);
  color: #fff;
}

/* ── Home poster carousel (2026-10-27) ───────────────────────────────────
   Admin can push several 16:9 slides; the track slides on transform only,
   which is GPU-composited — the poster is the first thing every studio
   sees on a cheap phone, so no layout work per frame. */
.dh-carousel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.dh-carousel-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.dh-carousel-slide {
  position: relative;    /* .dh-poster-media is `position:absolute; inset:0`.
                            Without a positioned slide it anchors to .dh-poster
                            instead, so every slide stacks on top of the last
                            one and only the final slide is ever visible. */
  flex: 0 0 100%;
  min-width: 0;          /* flex item: without this the slides refuse to shrink */
  height: 100%;
}

.dh-carousel-dots {
  position: absolute;
  left: 0;
  right: 0;
  /* .dh-poster is masked with a 27px scalloped bottom edge — dots any lower
     get bitten by the scallops. */
  bottom: 34px;
  display: flex;
  justify-content: center;
  gap: 7px;
  z-index: 2;
}

.dh-carousel-dot {
  position: relative;   /* ::before below is the 44px tap target; without this
                           it would anchor to .dh-carousel instead */
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: hsla(0, 0%, 100%, 0.45);
  box-shadow: 0 1px 3px hsla(0, 0%, 0%, 0.45);
  cursor: pointer;
  transition: width 0.25s ease, background 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}

/* The dot itself is tiny for looks; the TAP TARGET is not. */
.dh-carousel-dot::before {
  content: '';
  position: absolute;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  margin-left: 3.5px;
  margin-top: 3.5px;
}

.dh-carousel-dot.is-on {
  width: 18px;
  border-radius: 4px;
  background: hsl(0, 0%, 100%);
}

@media (prefers-reduced-motion: reduce) {
  .dh-carousel-track { transition: none; }
  .dh-carousel-dot { transition: none; }
}

/* ===== css/quotation-hub.css ===== */
/* =====================================================
   SahiHisab — Quotation Hub segmented tabs
   Wireframe: three pill segments, active = solid sea blue.
   Panels come from the existing modules untouched.
   ===================================================== */

/* Pills on a white track, matching the finance tabs (wireframe).
   Sticky: the track stays reachable while scrolling long lists (top:0 —
   the page scroller starts below the app header). */
.qhub-tabs {
  position: sticky;
  /* Default assumes the WINDOW scrolls (track parks under the header).
     JS (SH.stickyTabsTop) overrides to 0 when .page-content is the
     scroller, where its top edge already sits below the header. */
  top: var(--header-height, 60px);
  z-index: 30;
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 100px;
  box-shadow: 0 1px 3px rgba(16, 42, 67, 0.05);
  overflow-x: auto;
  scrollbar-width: none;
}

.qhub-tabs::-webkit-scrollbar {
  display: none;
}

/* Opaque page-coloured apron behind/around the stuck track — without it,
   list content scrolls visibly through the gaps around the rounded pill */
.qhub-tabs::before {
  content: '';
  position: absolute;
  left: -16px;
  right: -16px;
  top: -14px;
  bottom: -2px;
  background: var(--background);
  z-index: -1;
}

.qhub-tab {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: 10px 14px;
  border: 0;
  border-radius: 100px;
  background: var(--primary-100);
  color: var(--primary-800);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.qhub-tab:hover {
  background: var(--primary-200);
}

.qhub-tab.active {
  background: var(--primary-500);
  color: #fff;
}

.qhub-tab:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

:root.dark-mode .qhub-tab {
  background: hsla(200, 75%, 50%, 0.16);
  color: hsl(200, 85%, 74%);
}

:root.dark-mode .qhub-tab:hover {
  background: hsla(200, 75%, 50%, 0.26);
}

:root.dark-mode .qhub-tab.active {
  background: var(--primary-500);
  color: #fff;
}

/* ── "+ Quotation" pill, centered above the bottom nav (wireframe) ── */
.qhub-fab {
  position: fixed;
  left: 50%;
  bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 7px;
  height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: 100px;
  background: linear-gradient(135deg, hsl(200, 85%, 50%), hsl(200, 82%, 40%));
  color: #fff;
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 8px 22px hsla(200, 80%, 44%, 0.4);
  cursor: pointer;
  z-index: 998;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.32s;
}

.qhub-fab:active {
  transform: translateX(-50%) scale(0.95);
}

/* When the tab bar scroll-hides, the pill drops to the bar's vacated spot
   instead of hiding — the create action stays reachable at all times */
body.sh-tabhide .qhub-fab {
  transform: translateX(-50%) translateY(calc(64px + env(safe-area-inset-bottom, 0px)));
}

.qhub-fab .material-symbols-rounded {
  font-size: 1.4rem;
}

@media (min-width: 768px) {
  .qhub-tabs {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Desktop keeps the toolbar's New Quotation button instead */
  .qhub-fab {
    display: none !important;
  }
}

/* The inline add buttons duplicate the "+" pill on mobile — the pill wins.
   (#addInvBtn rental inventory, #addClientBtn clients, .wi-add-fab walk-in,
    #addAssistantBtn team.) */
@media (max-width: 767px) {
  .qhub #newQuotationBtn,
  .qhub #addPackageBtn,
  .qhub #addAddonBtn,
  .qhub #addProductBtn,
  #addInvBtn,
  #addClientBtn,
  #addExpenseBtn,
  #addAssistantBtn,
  .wi-add-fab {
    display: none;
  }
}

/* Never float a "+" pill over an open wizard */
body.wizard-active .qhub-fab,
body:has(.wizard-wrap) .qhub-fab {
  display: none;
}

/* Inside the wizard the hub tabs are noise — the flow owns the screen */
body:has(.wizard-wrap) .qhub-tabs {
  display: none;
}

/* Compact wizard meter (quotation mount): one tight band instead of a
   tall three-line block */
#qtLmMount .wi-lm-wrap {
  margin: 0 0 10px;
  padding: 8px 14px 9px;
  /* The base top:var(--header-height) was tuned for the walk-in page's
     scroller; here it pushes the meter down 40px+ at rest (sticky pins to
     max(static, top)). Zero = flush at rest, sticks under the header edge. */
  top: 0;
}

#qtLmMount .wi-lm-head {
  margin-bottom: 4px;
}

#qtLmMount .wi-lm-hint {
  margin-top: 6px;
  padding: 4px 9px 4px 7px;
  font-size: 0.75rem;
}

/* Crisp opaque ring on the active step — the translucent halo read as a
   smudge against the card */
body .step-item.active .step-number {
  box-shadow: 0 0 0 3px var(--primary-100);
}

/* ── Quotation delete sheet ───────────────────────────────────────────────
   Shown when deleting a quotation that already has a booking. Built
   numbers-first: the ₹ amounts and counts carry the meaning, the prose is
   only a landmark. Every choice is a tap target, never a typed value. */
.qdel-intro {
  margin: 0 0 10px;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.qdel-rows {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.qdel-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  min-height: 44px;
  border-bottom: 1px solid var(--border);
}

.qdel-row:last-child { border-bottom: 0; }

.qdel-row-icon {
  font-size: 1.05rem;
  color: var(--text-secondary);
  flex: 0 0 auto;
}

.qdel-row-label {
  flex: 1 1 auto;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* Money and counts are the part that actually gets read — keep them bold,
   dark and right-aligned so they scan in one pass. */
.qdel-row-value {
  flex: 0 0 auto;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.qdel-ask { margin-top: 16px; }

.qdel-ask-q {
  margin: 0 0 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
}

.qdel-chips {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.qdel-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  min-height: 44px;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.qdel-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.qdel-chip.is-on {
  border-color: var(--primary);
  background: var(--primary-100, var(--gray-50));
}

.qdel-chip-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
}

.qdel-chip-sub {
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.qdel-actions {
  display: flex;
  gap: 8px;
  width: 100%;
}

.qdel-actions .btn {
  flex: 1;
  min-height: 44px;
}

@media (min-width: 600px) {
  .qdel-chips { grid-template-columns: 1fr 1fr; }
}

/* ── Recycle Bin ──────────────────────────────────────────────────────────
   A list the owner scans, not reads: icon, document number, client name,
   and what comes back with it. Actions sit on the right on desktop and drop
   below the item on a phone so nothing gets clipped at 375px. */
.rb-body { padding: 0 16px 24px; }

.rb-loading,
.rb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 48px 16px;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.rb-empty .material-symbols-rounded {
  font-size: 2.5rem;
  opacity: 0.4;
}

.rb-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rb-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card, var(--bg-primary));
  flex-wrap: wrap;
}

.rb-item-icon {
  font-size: 1.25rem;
  color: var(--text-secondary);
  flex: 0 0 auto;
  margin-top: 2px;
}

.rb-item-main {
  flex: 1 1 180px;
  min-width: 0;
}

.rb-item-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rb-item-meta,
.rb-item-extras {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.rb-item-extras { font-variant-numeric: tabular-nums; }

.rb-item-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin-left: auto;
}

.rb-item-actions .btn { min-height: 44px; }

@media (max-width: 420px) {
  .rb-item-actions {
    width: 100%;
    margin-left: 0;
    margin-top: 4px;
  }
  .rb-item-actions .rb-restore { flex: 1; }
}

/* ── Bookings: "New Booking" FAB ──────────────────────────────────────────
   Sits above the docked tab bar and the device's gesture area, using the same
   --navv2-bar-h + safe-area sum nav-v2.css uses so it never lands on top of
   the tabs. Extended (icon + label) rather than a bare "+": a lone plus tells
   a first-time studio nothing about what it creates. */
.ord-fab {
  position: fixed;
  right: 16px;
  bottom: calc(var(--navv2-bar-h, 70px) + 16px + env(safe-area-inset-bottom, 0px));
  /* Sits with the other floating buttons (<=1000), below Munim (1050) and well
     below modals (1100 / 99999) so it never covers a dialog. */
  z-index: 999;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ord-fab:hover { box-shadow: 0 8px 26px rgba(0, 0, 0, 0.24); }
.ord-fab:active { transform: scale(0.96); }

.ord-fab .material-symbols-rounded { font-size: 1.35rem; }

/* Phones: keep the label — it is the whole point — but tighten the pill. */
@media (max-width: 420px) {
  .ord-fab {
    right: 12px;
    padding: 0 16px 0 12px;
    font-size: 0.88rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ord-fab { transition: none; }
  .ord-fab:active { transform: none; }
}

/* ── Direct Booking modal ─────────────────────────────────────────────────
   One screen, mobile-first at 375px. Two-up rows collapse to one column on
   phones; every control keeps a 44px tap target. Money is read-only except
   the advance — the total is derived, never typed. */
.db { display: flex; flex-direction: column; gap: 14px; }

.db-loading { padding: 32px 0; text-align: center; color: var(--text-secondary); font-size: 0.88rem; }

.db-field { display: flex; flex-direction: column; gap: 6px; }

.db-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.db-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.db-count { color: var(--text-muted); font-weight: 500; }
.db-opt { font-weight: 400; color: var(--text-muted); }
.db-hint { margin: 2px 0 0; font-size: 0.76rem; color: var(--text-secondary); }

.db-row2 { display: grid; grid-template-columns: 1fr; gap: 14px; }

/* Selectable chips — the whole form is taps, never typing, wherever possible. */
.db-chips { display: flex; gap: 6px; flex-wrap: wrap; }

.db-chip {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.db-chip.is-on { border-color: var(--primary); background: var(--primary-100, var(--gray-50)); color: var(--primary); }

/* Booking status carries its own meaning, so it gets its own colours rather
   than the generic blue: green = money is coming, orange = date is blocked but
   nothing is promised. Only the selected chip is coloured — an unselected
   green chip would read as "already confirmed". */
.db-chip-ok.is-on {
  border-color: var(--success);
  background: var(--success-light, #DCFCE7);
  color: var(--success-dark, #15803D);
}
.db-chip-hold.is-on {
  border-color: var(--warning);
  background: var(--warning-light, #FEF3C7);
  color: #92400E;
}

/* Client */
.db-results {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  max-height: 210px;
  overflow-y: auto;
}

.db-result {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  font-family: inherit;
  font-size: 0.86rem;
  text-align: left;
  cursor: pointer;
}

.db-result:last-child { border-bottom: 0; }
.db-result:hover { background: var(--gray-50); }
.db-result-name { font-weight: 600; color: var(--text-primary); }
.db-result-phone { color: var(--text-secondary); font-variant-numeric: tabular-nums; }

.db-newclient { display: grid; grid-template-columns: 1fr 120px; gap: 8px; }

.db-client-picked {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.db-client-av {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primary-100, var(--gray-50));
  color: var(--primary);
  font-weight: 700;
}

.db-client-main { flex: 1; min-width: 0; }
.db-client-name { font-weight: 600; font-size: 0.9rem; }
.db-client-phone { font-size: 0.78rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* Dates — venue sits with its own date, because Haldi at home and Reception at
   a hall is the normal case and the schema stores a venue per date. */
.db-dates { display: flex; flex-direction: column; gap: 10px; }

.db-date {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.db-date-top { display: grid; grid-template-columns: 1fr 1fr 44px; gap: 6px; align-items: center; }
.db-date-bot { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; }
/* Venue sits between two time dropdowns that look exactly like it, so the pin
   is what tells the three apart at a glance. The wrapper carries the grid
   placement now, because the input is no longer the grid child. */
.db-date-bot .db-venue-wrap { grid-column: 1 / -1; }
.db-venue-wrap { position: relative; display: block; min-width: 0; }
.db-venue-ic {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.05rem;
  color: var(--text-muted);
  pointer-events: none;
}
.db-venue-wrap .db-venue { padding-left: 36px; }
.db-date-spacer { width: 44px; }
.db-to { font-size: 0.78rem; color: var(--text-secondary); }

.db-add { gap: 4px; min-height: 40px; font-size: 0.82rem; }
.db-add .material-symbols-rounded { font-size: 1rem; }

/* Add-ons */
.db-addon-pick { max-width: 190px; min-height: 40px; font-size: 0.82rem; }
.db-addons { display: flex; flex-direction: column; gap: 6px; }

/* name · dates · qty · amount · remove. Five tracks, because every add-on now
   carries a count — with four, the qty landed on a second row and pushed the
   remove button under the name. */
.db-addon {
  display: grid;
  grid-template-columns: 1fr auto auto 40px;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.db-addon-name { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 0.86rem; font-weight: 600; }
/* The name ellipsises, the pencil never does — it keeps its own width so the edit
   affordance cannot be the thing that gets clipped on a narrow row. */
.db-addon-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-addon-edit {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.db-addon-edit .material-symbols-rounded { font-size: 1rem; }
.db-addon-edit:hover { color: var(--primary); background: var(--primary-50, var(--gray-50)); }
@media (pointer: coarse) { .db-addon-edit { width: 44px; height: 44px; } }
.db-addon-amt { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }

/* On a phone five controls on one line leaves the name a few characters wide.
   Give it the whole first line and let the controls share the second. */
@media (max-width: 480px) {
  .db-addon { grid-template-columns: auto 1fr 40px; }
  .db-addon-name { grid-column: 1 / -1; }
}

/* Amounts — numbers read fine where text does not, so they carry the summary. */
.db-amounts {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.db-amt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}

.db-amt:last-child { border-bottom: 0; }
.db-amt-k { font-size: 0.85rem; color: var(--text-secondary); }
.db-amt-v { font-size: 0.95rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.db-amt--total { background: var(--gray-50); }
.db-amt--total .db-amt-k { color: var(--text-primary); font-weight: 600; }
.db-amt--total .db-amt-v { font-size: 1.05rem; }

.db-amt--bal .db-amt-v { color: var(--primary); }
.db-amt--bal.is-over .db-amt-v { color: var(--danger); }

.db-adv { max-width: 130px; text-align: right; min-height: 40px; font-variant-numeric: tabular-nums; }

.db-actions { display: flex; gap: 8px; width: 100%; }
.db-actions .btn { flex: 1; min-height: 48px; }

@media (min-width: 560px) {
  .db-row2 { grid-template-columns: 1fr 1fr; }
  .db-date-bot { grid-template-columns: 1fr auto 1fr 2fr; }
  .db-date-bot .db-venue-wrap { grid-column: auto; }
}

/* Discount row — value box plus a ₹/% toggle, so the studio never has to
   remember which unit the number means. */
.db-amt--disc { gap: 8px; }

.db-disc-in { display: inline-flex; align-items: center; gap: 4px; }

.db-disc { max-width: 92px; text-align: right; min-height: 38px; font-variant-numeric: tabular-nums; }

.db-disc-unit {
  min-width: 34px;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.db-disc-unit.is-on { border-color: var(--primary); background: var(--primary-100, var(--gray-50)); color: var(--primary); }
.db-disc-amt { color: var(--danger); }

/* "Add Client" opens the real client modal rather than half-collecting a name
   and phone here — that modal owns salutation, address, opening balance and the
   duplicate-phone guard, and none of that should be reimplemented in a form. */
.db-addclient {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  align-self: flex-start;
}

.db-addclient .material-symbols-rounded { font-size: 1.1rem; }

/* Crew per date — collapsed to one button until tapped, so a single-crew
   booking never pays for the picker's height. */
.db-crew { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; }

.db-crew-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px dashed var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.db-crew-btn .material-symbols-rounded { font-size: 1rem; }
.db-crew-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }

.db-crew-tag {
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--primary-100, var(--gray-50));
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 600;
}

.db-crew-pick {
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  margin-top: 4px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.db-crew-role { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 0 4px; }
.db-crew-name { font-size: 0.85rem; }
.db-crew-qty { display: inline-flex; align-items: center; gap: 2px; }

.db-qty {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.db-qty-n { min-width: 22px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

/* The six listed roles do not cover every studio — this row is where they name
   their own. It spans the picker so it never sits in one of the two columns
   looking like a seventh role. */
.db-crew-own { grid-column: 1 / -1; display: flex; gap: 6px; margin-top: 4px; }
.db-crew-own > .form-control { flex: 1 1 auto; min-width: 0; height: 40px; font-size: 0.85rem; }
.db-crew-own-add {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--primary);
  border-radius: 8px;
  background: transparent;
  color: var(--primary);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

/* Add-on picker sits on the label row; each option states its pricing basis
   so a per-day add-on is never mistaken for a fixed one. */


@media (min-width: 560px) {
  .db-crew-pick { grid-template-columns: 1fr 1fr; }
}

/* Two controls that belong together share a row: the client search with its
   Add button, and the package picker with its amount. Both collapse on a
   phone so neither field gets squeezed below a usable width. */
.db-inline { display: flex; gap: 8px; align-items: stretch; }
.db-inline > .form-control { flex: 1 1 auto; min-width: 0; }
.db-inline > .btn { flex: 0 0 auto; white-space: nowrap; }
.db-inline .db-pkg-amt { flex: 0 0 150px; text-align: right; font-variant-numeric: tabular-nums; }

/* Edit the chosen package's deliverables for this booking. Square, so it reads as an
   action on the dropdown beside it and not as a second field; 44px because every tap
   target on this form is. */
/* Styled standalone, NOT as .btn .btn-ghost: a later stylesheet redefines .btn's border
   and padding, so the shared classes zeroed this border and stretched it to 58x50. */
.db-pkg-edit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card, transparent);
  color: var(--text-secondary);
  font-family: inherit;
  cursor: pointer;
}
.db-pkg-edit .material-symbols-rounded { font-size: 1.15rem; }
.db-pkg-edit:hover { border-color: var(--primary); color: var(--primary); }
/* One line, never a paragraph: it is a reminder of the promise, not the promise itself. */
.db-pkg-sum { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-addclient { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; }
.db-addclient .material-symbols-rounded { font-size: 1.1rem; }

.db-voice { margin-top: 6px; }

@media (max-width: 460px) {
  /* Keep the row, drop the button's label — the icon alone is understood and
     a wrapped two-line button next to a search box reads as broken. */
  .db-inline .db-inline-txt { display: none; }
  .db-inline .db-pkg-amt { flex: 0 0 116px; }
}

/* ── Dropdown ─────────────────────────────────────────────────────────────
   Replaces every native <select> in this modal. A browser select renders as an
   OS menu — dark on macOS, a full-screen wheel on iOS — and cannot show a
   price or a unit beside the name, which is exactly what a studio needs to
   see before picking. */
.db-dd { position: relative; }

.db-dd-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card, transparent);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}

.db-dd.is-open .db-dd-btn { border-color: var(--primary); }
.db-dd-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-dd-val.is-ph { color: var(--text-muted); }
.db-dd-hint { color: var(--text-secondary); font-variant-numeric: tabular-nums; font-size: 0.85rem; }
.db-dd-caret { font-size: 1.2rem; color: var(--text-secondary); flex: 0 0 auto; }
.db-dd.is-open .db-dd-caret { transform: rotate(180deg); }

/* Triggers that sit at the right edge of a row open leftward. */
.db-label-row .db-dd .db-dd-panel,
.db-addon .db-dd .db-dd-panel { left: auto; right: 0; }

.db-dd-panel {
  position: absolute;
  z-index: 5;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  /* The panel must not inherit a narrow trigger's width — "+ Add add-on" sits
     on a label row and is far narrower than the names it has to list. Grow to
     fit, but never past the modal. */
  min-width: 260px;
  max-width: min(360px, 78vw);
  max-height: 260px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card, #fff);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
}

.db-dd-group {
  padding: 8px 10px 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.db-dd-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
}

.db-dd-opt:hover { background: var(--gray-50); }
.db-dd-opt.is-on { background: var(--primary-100, var(--gray-50)); color: var(--primary); font-weight: 600; }
/* Name takes whatever room is left and ellipses only when genuinely long;
   the price is the other half of the decision, so it never shrinks or wraps. */
.db-dd-opt-l { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-dd-opt-h {
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
}
.db-dd-opt.is-on .db-dd-opt-h { color: var(--primary); }

/* Quantity for add-ons priced per unit or per hour. Never below 1 — a zero
   would quietly turn a paid line into a free one. */
.db-addon-qty { display: inline-flex; align-items: center; gap: 2px; }

/* Per-day add-on: the days it is actually booked for, on their own full-width line so
   the row above keeps its grid. 36px here and 44px on a touch screen, matching .wi-chip
   — these sit inside a row, they are not the row's primary control. */
.db-addon-days { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.db-day-chip {
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}
.db-day-chip.is-on { border-color: var(--primary); background: var(--primary-100, var(--gray-50)); color: var(--primary); font-weight: 600; }
@media (pointer: coarse) { .db-day-chip { min-height: 44px; padding: 0 14px; } }
/* Sits where the date dropdown would: keeps the five-column grid intact. */
.db-addon-dayn { font-size: 0.76rem; color: var(--text-secondary); white-space: nowrap; text-align: center; }

.db-qty-in {
  width: 46px;
  min-height: 32px;
  padding: 0 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.85rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.db-addon .db-dd { min-width: 120px; max-width: 150px; }
.db-label-row .db-dd { min-width: 150px; }
.db-addon .db-dd-btn { min-height: 36px; font-size: 0.78rem; padding: 0 8px; }

/* On a 375px row the date dropdown's 120px floor left the amount ~60px, and ₹7,000
   broke across three lines. The amount is the one thing on this row that must never
   wrap; the dropdown gives up the width instead. Longhands only, and after the rule
   above, so it wins on order at equal specificity rather than on !important. */
@media (max-width: 480px) {
  .db-addon-amt { white-space: nowrap; }
}

/* ── Booking Journey dropdown ──────────────────────────────────────────────
   Replaces the five-dot stepper in the booking detail modal. Each step gets a
   full row, so its name and what tapping it does are both readable — the
   stepper could only say that in colour and a title attribute. */
.bj-dd { position: relative; }

.bj-trigger {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-bg, #fff);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
.bj-trigger:disabled { cursor: default; opacity: 0.75; }
.bj-dd.is-open .bj-trigger { border-color: var(--primary); }
.bj-dd.is-busy { opacity: 0.6; pointer-events: none; }

.bj-cur { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); }
.bj-hint { margin-left: auto; font-size: 0.72rem; color: var(--text-secondary); }
.bj-trigger.is-cancelled .bj-cur { color: var(--danger); }
.bj-chev { font-size: 1.2rem; color: var(--text-muted); transition: transform 0.15s ease; }
.bj-dd.is-open .bj-chev { transform: rotate(180deg); }

/* The dot carries the state colour, same vocabulary as the old stepper:
   green = behind you, blue = the one you can move to, grey = not yet. */
.bj-dot {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gray-200, #E4E4E7);
  color: var(--text-muted);
}
.bj-dot .material-symbols-rounded { font-size: 16px; }
.bj-dot.is-done { background: var(--success); color: #fff; }
.bj-dot.is-next { background: var(--primary); color: #fff; }
.bj-dot.is-cancelled { background: var(--danger-light, #FEE2E2); color: var(--danger); }

/* Expands in the flow, not as a floating overlay. The journey opens inside a
   modal whose body clips its own overflow, and an absolutely-positioned panel
   was cut off the moment the modal was short — which is exactly the case when
   the journey is the only thing in it. Growing the modal cannot be clipped,
   and it matches the Notes / Shot List collapsibles right below it. */
.bj-panel {
  margin-top: 6px;
  padding: 4px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.bj-opt {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: none;
  border-radius: 10px;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.bj-opt:disabled { cursor: default; }
.bj-opt:not(:disabled):hover, .bj-opt:not(:disabled):focus-visible { background: var(--gray-50); }
.bj-opt.is-locked { opacity: 0.5; }
.bj-opt.is-current { background: var(--primary-50, #E0F2FE); }
.bj-opt.is-armed { background: var(--warning-light, #FEF3C7); }

.bj-opt-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bj-opt-label { font-size: 0.88rem; font-weight: 600; color: var(--text-primary); }
/* The step's meaning, which the stepper could only show on hover. Two lines
   max — these are full sentences and a phone has the width for them. */
.bj-opt-tip {
  font-size: 0.72rem;
  color: var(--text-secondary);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bj-opt-state {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 0.7rem;
  font-weight: 700;
  text-align: right;
  color: var(--text-muted);
  max-width: 40%;
}
.bj-opt-state.is-now   { color: var(--primary); }
.bj-opt-state.is-go    { color: var(--primary); }
.bj-opt-state.is-back  { color: var(--text-secondary); }
.bj-opt-state.is-warn  { color: #92400E; }
.bj-opt-state.is-block { color: var(--danger); }

@media (max-width: 420px) {
  .bj-opt-tip { display: none; }
  .bj-opt { min-height: 48px; }
}

/* ── Bookings list view ───────────────────────────────────────────────────
   These two rules are not new styling: they are the inline styles that used
   to sit on the booking card, moved into CSS so the list view can change
   them. An inline style can only be beaten by !important, which this project
   does not allow, so the card could never be restyled while they stayed
   there. Grid view must look exactly as it did. */
.order-card-body { padding: var(--space-md); }

.order-meta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

/* List view: one booking per row, tighter. On a phone the cards are already
   stacked, so what list mode buys there is density — more bookings per
   screen for the studio scrolling to find one. */
.orders-grid.list-view > .card.mb-md { margin-bottom: 8px; }
.orders-grid.list-view .order-card-body { padding: 10px 12px; }
.orders-grid.list-view .client-avatar { width: 34px; height: 34px; font-size: 0.8rem; }
.orders-grid.list-view .client-name { font-size: 0.9rem; }

/* Date and venue sit side by side on one line instead of splitting the width
   in half — in a wide row there is no reason to reserve half for a venue. */
.orders-grid.list-view .order-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 6px;
}
.orders-grid.list-view .order-meta-row > div { text-align: left; }

@media (min-width: 1024px) {
  /* Overrides the 2-column grid from desktop.css. */
  .orders-grid.list-view { grid-template-columns: 1fr; gap: 8px; }
}

@media (min-width: 1200px) {
  .orders-grid.list-view { grid-template-columns: 1fr; }
}

/* ── New Booking: toolbar on desktop, floating pill on a phone ────────────
   The bottom-right corner already carries the Munim bubble and the install
   button. A third floating pill landed on top of both and on top of the
   cards. On a wide screen the action belongs in the toolbar, where the eye
   already is after searching and filtering — the same call the quotation hub
   makes with its own "+ Quotation" pill. */
.ord-new-btn {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  height: 46px;
  padding: 0 16px;
  border-radius: 999px;
  white-space: nowrap;
}

.ord-new-btn .material-symbols-rounded { font-size: 1.15rem; }

@media (min-width: 768px) {
  .ord-new-btn { display: inline-flex; }
  /* The pill and the toolbar button are the same action — never both. */
  .ord-fab { display: none; }
}

/* ── Time pickers on a date row ───────────────────────────────────────────
   "10:00 am" is short, so these panels do NOT want the 260px floor the add-on
   picker needs — at that width the end-time panel would push past the modal.
   Let them match their own trigger instead. */
.db-date-bot .db-dd-panel { min-width: 0; }

/* The end time sits at the right of the row (start · to · end · venue), so
   its panel opens leftward. Counted by type: the two .db-dd are the only
   divs in the row — "to" is a span and the venue is an input. */
.db-date-bot > .db-dd:nth-of-type(2) .db-dd-panel { left: auto; right: 0; }

/* A 48-slot list is scrolled, so give it a little more room than the short
   pickers get. */
.db-date-bot .db-dd-panel { max-height: 240px; }

/* ── Folded date rows ─────────────────────────────────────────────────────
   Only the row being edited stays open. A shaadi with four days otherwise
   stacks four full cards and pushes the package and the money off screen. */
.db-date.is-folded {
  display: flex;
  /* .db-date is a column — without resetting this the summary and the remove
     button stack, and align-items:center then centres them across the card. */
  flex-direction: row;
  align-items: center;
  gap: 4px;
  padding: 4px 6px 4px 4px;
}

.db-date-sum {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.db-date-sum:hover { background: var(--gray-50); }

.db-date-sum-ic { font-size: 1.1rem; color: var(--primary); flex: 0 0 auto; }

.db-date-sum-txt {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.db-date-sum-chev { font-size: 1.15rem; color: var(--text-muted); flex: 0 0 auto; }

/* ── Booking KPI tiles = the filter ───────────────────────────────────────
   The numbers and the filter pills were the same four states printed twice.
   The tile is the control now. Accent colour comes from --bk-accent set per
   tile, so the four states keep the colours the pills had. */
.bk-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 72px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--bk-accent, var(--primary));
  border-radius: 12px;
  background: var(--card);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.bk-stat:hover { background: var(--gray-50); }

/* Selected tile: the accent fills the border and tints the face, so which
   filter is on is readable without hunting for a highlighted pill. */
.bk-stat.is-on {
  border-color: var(--bk-accent, var(--primary));
  box-shadow: inset 0 0 0 1px var(--bk-accent, var(--primary));
  background: color-mix(in srgb, var(--bk-accent, var(--primary)) 8%, var(--card));
}

.bk-stat-n {
  font-family: Outfit, sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--foreground);
}
.bk-stat-l { font-size: 0.78rem; color: var(--muted-foreground); }

/* Total Due is the same shape as a tile — big figure, small label — so it sits
   in the grid as one instead of owning a full-width strip that held one number
   and ~900px of empty card. It is the only entry that is NOT a filter, so it
   loses the pointer and the hover; the red left edge says what it is. */
.bk-stat--due { cursor: default; }
.bk-stat--due:hover { background: var(--card); }
.bk-stat--due .bk-stat-n {
  /* Rupee figures run to eleven characters where a count runs to two. */
  font-size: 1.2rem;
  color: var(--destructive);
  font-variant-numeric: tabular-nums;
}

.bk-stats { margin-bottom: var(--space-lg); }
/* The tile count is not fixed: four filters, plus Cancelled only when the
   studio has one, plus Total Due unless amounts are hidden for this staff
   member — so 4, 5 or 6. auto-fit sizes whatever arrives rather than stranding
   the last tile on a row of its own, which is what a hard repeat(4) did. */
.bk-stats { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) {
  .bk-stats { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
}

/* ── Bookings toolbar ─────────────────────────────────────────────────────
   These were inline styles on the markup, which CSS cannot override without
   !important. They are here so the row can lay out differently on a phone,
   where five controls on one line squeezed the search box down to its icon. */
.orders-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}

/* flex-basis auto let the search claim the <input>'s intrinsic width before
   anything else got a say, which pushed the sort select and the New Booking
   button onto lines of their own — and an item alone on a wrapped line with a
   percentage basis stretches edge to edge, which is how one dropdown ended up
   owning a full-width row. A fixed basis lets all five share the line when
   there is room and shrink together when there is not. */
.ord-search { flex: 1 1 200px; min-width: 0; position: relative; }

.ord-search-ic {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.15rem;
  color: var(--muted-foreground);
  pointer-events: none;
}

.ord-search-in { width: 100%; height: 46px; padding-left: 40px; font-size: 0.9rem; }

/* Sort and New Booking are one unit. As two loose flex children they could be
   split across a wrap, and the select ended up alone on a line of its own,
   stretched the full width of the page. Wrapped together they are a single
   flex item: they share a line with the search when there is room and move
   down TOGETHER when there is not.

   flex-basis, not width — basis is what the flex algorithm actually measures
   along the main axis, so the select keeps its size whatever .form-control's
   width: 100% is doing. */
.ord-toolbar-end {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: auto;
  min-width: 0;
}

.ord-sort {
  height: 46px;
  flex: 0 0 124px;
  width: auto;
  min-width: 96px;
  max-width: 124px;
  font-size: 0.8rem;
  padding: 0 8px;
}

/* Phone layout:
     row 1   search  +  page numbers
     row 2   sort
   The card/list toggle is desktop-only — on a phone the cards are already one
   per row, so the choice buys almost nothing and the control was costing a
   whole line. The stored preference still applies; it is just not changed
   from here. */
@media (max-width: 767px) {
  .orders-toolbar .wi-view-toggle { display: none; }
  /* flex-basis 0, not auto: with auto the search claims the input's intrinsic
     width (~220px) before shrinking, which together with the page numbers
     overflows the row and wraps them apart. At 0 it simply takes whatever is
     left after the numbers, so the two always share one line. */
  .ord-search { flex: 1 1 0; min-width: 120px; }
  .orders-toolbar #ordersPaginationTop { flex: 0 1 auto; min-width: 0; }
  .ord-toolbar-end { flex: 1 1 100%; margin-left: 0; }
  .ord-sort { flex: 1 1 auto; max-width: none; }
}

/* ── List view on a phone ─────────────────────────────────────────────────
   On a phone the cards were already stacked, so list mode barely changed
   anything — it only tightened the padding. What actually costs height here
   is the 40px action row and the badges wrapping onto three lines. Both get
   smaller; nothing is removed, because every one of those buttons is the
   only way to reach what it opens. */
@media (max-width: 767px) {
  .orders-grid.list-view .order-card-body { padding: 8px 10px; }
  .orders-grid.list-view > .card.mb-md { margin-bottom: 6px; }

  /* Name and subtitle on one line each, cut rather than wrapped. */
  .orders-grid.list-view .client-name,
  .orders-grid.list-view .order-card-body .client-name + div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Action buttons: still 36px, still tappable, two rows shorter. */
  .orders-grid.list-view .order-quick-act,
  .orders-grid.list-view .journey-btn {
    width: 36px;
    height: 36px;
  }
  .orders-grid.list-view .order-quick-act .material-symbols-rounded { font-size: 1rem; }
  .orders-grid.list-view .manage-tasks-btn { min-height: 36px; font-size: 0.78rem; }
}

/* ===== css/campaign-banner.css ===== */
/* =====================================================================
   Campaign Banner — encapsulated styles (.cb-* namespace only)
   Premium SaaS promo (CRED / Linear restraint). Sea-blue brand, mobile-first,
   ~160px tall. Slow, low-amplitude, transform/opacity-only micro-interactions.
   No global selectors, no !important, no inline styles, reduced-motion safe.
   ===================================================================== */
.cb-banner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 156px;
  margin-bottom: 14px;
  padding: 18px 20px;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background:
    radial-gradient(115% 130% at 86% 12%, hsla(196, 92%, 56%, 0.42), transparent 52%),
    radial-gradient(90% 120% at 8% 110%, hsla(206, 80%, 40%, 0.45), transparent 60%),
    linear-gradient(135deg, hsl(204, 78%, 31%), hsl(208, 80%, 19%));
  box-shadow:
    0 18px 38px -18px hsla(208, 84%, 14%, 0.7),
    inset 0 0 0 1px hsla(0, 0%, 100%, 0.07),
    inset 0 1px 0 hsla(0, 0%, 100%, 0.12);
  content-visibility: auto;
}

/* fine engineered grid texture — depth, not decoration */
.cb-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle at 1px 1px, hsla(0, 0%, 100%, 0.07) 1px, transparent 0);
  background-size: 18px 18px;
  mask-image: linear-gradient(110deg, transparent 30%, #000 105%);
}

/* ── Background particle drift ─────────────────────────── */
.cb-particles { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cb-particle {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: hsla(0, 0%, 100%, 0.5);
  opacity: 0;
  animation: cb-drift 13s linear infinite;
}
.cb-particle--1 { left: 30%; bottom: -6px; animation-delay: 0s; }
.cb-particle--2 { left: 58%; bottom: -6px; width: 2px; height: 2px; animation-delay: 3.5s; animation-duration: 16s; }
.cb-particle--3 { left: 74%; bottom: -6px; animation-delay: 7s; }
.cb-particle--4 { left: 88%; bottom: -6px; width: 2px; height: 2px; animation-delay: 10s; animation-duration: 15s; }

/* ── Copy ──────────────────────────────────────────────── */
.cb-copy { position: relative; z-index: 2; flex: 1 1 auto; min-width: 0; }
.cb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: hsl(196, 100%, 90%);
  background: hsla(0, 0%, 100%, 0.10);
  border: 1px solid hsla(0, 0%, 100%, 0.16);
  padding: 3px 10px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.cb-spark { font-size: 0.66rem; color: hsl(190, 100%, 82%); animation: cb-twinkle 3.2s ease-in-out infinite; }
.cb-title {
  font-family: 'Plus Jakarta Sans', 'DM Sans', system-ui, sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 10px 0 0;
  text-shadow: 0 1px 10px hsla(208, 84%, 12%, 0.4);
}
.cb-sub {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.78rem;
  line-height: 1.35;
  margin: 5px 0 0;
  color: hsla(0, 0%, 100%, 0.82);
  max-width: 20ch;
}
.cb-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  padding: 9px 18px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.84rem;
  font-weight: 800;
  color: hsl(208, 80%, 28%);
  background: #fff;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 16px -8px hsla(208, 84%, 10%, 0.6);
  transition: transform 0.18s cubic-bezier(.2,.7,.2,1), box-shadow 0.25s ease;
  animation: cb-cta-glow 3.6s ease-in-out infinite;
}
.cb-cta:hover { transform: translateY(-1.5px); box-shadow: 0 12px 24px -8px hsla(196, 90%, 50%, 0.55); animation: none; }
.cb-cta:active { transform: translateY(0); }
.cb-cta-arrow { transition: transform 0.22s cubic-bezier(.2,.7,.2,1); }
.cb-cta:hover .cb-cta-arrow { transform: translateX(3px); }

/* ── Scene (lens emblem + floats) ─────────────────────── */
.cb-scene { position: relative; z-index: 1; flex: 0 0 34%; align-self: stretch; min-width: 108px; }
.cb-lens {
  position: absolute;
  right: 6px;
  bottom: 50%;
  transform: translateY(50%);
  width: 64px; height: 64px;
}
.cb-lens-svg {
  width: 100%; height: 100%;
  filter: drop-shadow(0 6px 16px hsla(196, 90%, 40%, 0.35));
  animation: cb-breathe 6s ease-in-out infinite;
}
.cb-lens-glint { animation: cb-glint 6s ease-in-out infinite; }
.cb-flash-ring {
  position: absolute;
  left: 50%; top: 50%;
  width: 64px; height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  border: 1.5px solid hsla(196, 100%, 88%, 0.9);
  opacity: 0;
  transform: scale(0.6);
  animation: cb-flash 5.5s ease-out infinite;
}

/* floating quotation slips — subtle, slow */
.cb-slip {
  position: absolute;
  width: 18px; height: 23px;
  border-radius: 4px;
  background: hsla(0, 0%, 100%, 0.92);
  box-shadow: 0 4px 12px hsla(208, 84%, 12%, 0.4);
  opacity: 0;
}
.cb-slip::before, .cb-slip::after {
  content: "";
  position: absolute;
  left: 3.5px; right: 4px;
  height: 1.6px;
  border-radius: 2px;
  background: hsl(200, 55%, 82%);
}
.cb-slip::before { top: 6px; }
.cb-slip::after { top: 11px; right: 8px; }
.cb-slip--1 { right: 70px; bottom: 34px; animation: cb-rise 8s ease-in-out infinite; }
.cb-slip--2 { right: 88px; bottom: 30px; transform: scale(0.82) rotate(-6deg); animation: cb-rise 8s ease-in-out 4s infinite; }

/* single ₹ coin — quiet, premium */
.cb-coin {
  position: absolute;
  right: 90px; bottom: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 21px; height: 21px;
  border-radius: 50%;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  color: hsl(38, 72%, 30%);
  background: linear-gradient(135deg, #ffe5a0, #f0b53e);
  box-shadow: 0 4px 10px hsla(38, 80%, 26%, 0.4), inset 0 1px 0 hsla(0, 0%, 100%, 0.6);
  animation: cb-bob 5s ease-in-out infinite;
}

/* ── Keyframes — slow, low amplitude (transform/opacity only) ── */
@keyframes cb-drift {
  0% { opacity: 0; transform: translateY(0); }
  12% { opacity: 0.6; }
  85% { opacity: 0.5; }
  100% { opacity: 0; transform: translateY(-150px); }
}
@keyframes cb-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes cb-glint { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes cb-flash {
  0%, 78%, 100% { opacity: 0; transform: scale(0.6); }
  83% { opacity: 0.9; transform: scale(0.95); }
  92% { opacity: 0; transform: scale(1.5); }
}
@keyframes cb-rise {
  0% { opacity: 0; transform: translateY(8px) scale(0.86); }
  18% { opacity: 0.55; }
  78% { opacity: 0.5; }
  100% { opacity: 0; transform: translateY(-30px) scale(0.96); }
}
@keyframes cb-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes cb-twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.82); } }
@keyframes cb-cta-glow {
  0%, 100% { box-shadow: 0 6px 16px -8px hsla(208, 84%, 10%, 0.6); }
  50% { box-shadow: 0 6px 22px -6px hsla(196, 95%, 60%, 0.5); }
}

/* ── Larger screens ───────────────────────────────────── */
@media (min-width: 640px) {
  .cb-banner { min-height: 168px; padding: 22px 28px; }
  .cb-title { font-size: 1.5rem; }
  .cb-sub { font-size: 0.85rem; max-width: 30ch; }
  .cb-scene { flex-basis: 28%; }
  .cb-lens, .cb-flash-ring { width: 76px; height: 76px; }
  .cb-flash-ring { margin: -38px 0 0 -38px; }
}

/* ── Accessibility: stop all motion ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cb-lens-svg, .cb-lens-glint, .cb-flash-ring, .cb-slip, .cb-coin, .cb-spark, .cb-particle, .cb-cta { animation: none; }
  .cb-flash-ring { opacity: 0; }
  .cb-slip { opacity: 0.5; }
  .cb-particle { opacity: 0.35; }
  .cb-cta { transition: none; }
  .cb-cta:hover { transform: none; }
}

/* ===== css/login-redesign.css ===== */
/* =====================================================
   SahiHisab — Login/Registration Redesign
   Mobile-first (375px), high contrast, clear typography
   Uses body .class specificity. No !important.
   ===================================================== */


/* ─────────────────────────────────────────────────────
   1. LOGIN WRAPPER — Full-screen dark gradient
   ───────────────────────────────────────────────────── */

body .sh-login-wrap {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  background: #060d18;
  position: relative;
  overflow: hidden;
}

/* Ambient glow orbs */
body .sh-login-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 600px 400px at 15% 85%, hsla(200, 90%, 35%, 0.15) 0%, transparent 70%),
    radial-gradient(ellipse 500px 350px at 85% 15%, hsla(210, 80%, 30%, 0.12) 0%, transparent 70%),
    radial-gradient(ellipse 300px 300px at 50% 50%, hsla(200, 70%, 25%, 0.08) 0%, transparent 60%);
  pointer-events: none;
}

/* Subtle grid pattern */
body .sh-login-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(hsla(200, 50%, 40%, 0.04) 1px, transparent 1px),
                     linear-gradient(90deg, hsla(200, 50%, 40%, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

/* PIN show/hide toggle */
body .sh-pin-toggle {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: hsla(0, 0%, 100%, 0.35);
  transition: color 0.2s, background 0.2s;
  padding: 0;
}
body .sh-pin-toggle:hover {
  color: hsla(0, 0%, 100%, 0.6);
  background: hsla(0, 0%, 100%, 0.06);
}
body .sh-pin-toggle .material-symbols-rounded {
  font-size: 1.2rem;
}

body .sh-login-inner {
  width: 100%;
  max-width: 400px;
  position: relative;
  z-index: 1;
}


/* ─────────────────────────────────────────────────────
   2. BRANDING — Logo + Title
   ───────────────────────────────────────────────────── */

body .sh-login-brand {
  text-align: center;
  margin-bottom: 32px;
}

body .sh-login-logo {
  width: 64px;
  height: 64px;
  background: hsla(0, 0%, 100%, 0.06);
  border: 1.5px solid hsla(0, 0%, 100%, 0.1);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

body .sh-login-logo .material-symbols-rounded {
  font-size: 1.8rem;
  color: var(--primary-300);
}

body .sh-login-title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 800;
  color: white;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}

body .sh-login-subtitle {
  font-size: 0.88rem;
  color: hsla(0, 0%, 100%, 0.45);
  font-weight: 500;
}

body .sh-login-tagline {
  color: hsla(0, 0%, 100%, 0.55);
  font-size: 0.82rem;
  margin-top: 6px;
}


/* ─────────────────────────────────────────────────────
   3. AUTH CARD — The main login/register form
   ───────────────────────────────────────────────────── */

body .sh-auth-card {
  background: var(--card);
  border-radius: 20px;
  padding: 28px 22px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.25),
    0 4px 20px rgba(0, 0, 0, 0.1);
}

body .sh-auth-card h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 4px;
  color: var(--text-primary);
}

body .sh-auth-card .sh-auth-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: 24px;
}


/* ─────────────────────────────────────────────────────
   4. FORM FIELDS — Large, clear, mobile-optimized
   ───────────────────────────────────────────────────── */

body .sh-auth-card .form-group {
  margin-bottom: 16px;
}

body .sh-auth-card .form-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

body .sh-auth-card .form-control {
  height: 52px;
  font-size: 1.05rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  background: var(--background);
  color: var(--text-primary);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body .sh-auth-card .form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--glow-primary);
  outline: none;
}

/* PIN input — centered, large, spaced */
body .sh-auth-card .sh-pin-input {
  font-size: 1.4rem;
  text-align: center;
  letter-spacing: 8px;
  font-weight: 700;
  padding: 12px;
}

/* Phone input — slightly larger */
body .sh-auth-card .sh-phone-input {
  font-size: 1.15rem;
  text-align: center;
  letter-spacing: 2px;
}


/* ─────────────────────────────────────────────────────
   5. BUTTONS — Large tap targets
   ───────────────────────────────────────────────────── */

body .sh-auth-card .btn-block {
  min-height: 52px;
  font-size: 1.05rem;
  font-weight: 700;
  border-radius: var(--radius-md);
}

body .sh-auth-card .sh-auth-link {
  text-align: center;
  font-size: 0.85rem;
  margin-top: 12px;
}

body .sh-auth-card .sh-auth-link a {
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}

body .sh-auth-card .sh-auth-link a:active {
  color: var(--primary-700);
}


/* ─────────────────────────────────────────────────────
   6. OTP SUCCESS BANNER
   ───────────────────────────────────────────────────── */

body .sh-otp-success {
  background: var(--success-light);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 20px;
  text-align: center;
  border: 1px solid hsla(142, 70%, 45%, 0.15);
}

body .sh-otp-success p {
  margin: 0;
  color: hsl(142, 72%, 29%);
  font-size: 0.85rem;
  font-weight: 500;
}


/* ─────────────────────────────────────────────────────
   7. ERROR BANNER
   ───────────────────────────────────────────────────── */

body .sh-auth-error {
  padding: 12px 14px;
  background: var(--danger-light);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  font-size: 0.85rem;
  color: hsl(0, 72%, 38%);
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid hsla(0, 72%, 51%, 0.1);
}


/* ─────────────────────────────────────────────────────
   8. PLAN CARDS (below login)
   ───────────────────────────────────────────────────── */

body .sh-plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 20px;
}

body .sh-plan-card {
  background: hsla(0, 0%, 100%, 0.06);
  border: 1px solid hsla(0, 0%, 100%, 0.08);
  border-radius: 14px;
  padding: 14px 10px;
  text-align: center;
  backdrop-filter: blur(8px);
}

body .sh-plan-card.featured {
  border-color: var(--primary-400);
  background: hsla(200, 80%, 44%, 0.1);
}

body .sh-plan-name {
  font-weight: 700;
  font-size: 0.85rem;
  color: hsla(0, 0%, 100%, 0.85);
  margin-bottom: 4px;
}

body .sh-plan-card.featured .sh-plan-name {
  color: var(--primary-300);
}

body .sh-plan-price {
  font-size: 0.78rem;
  color: hsla(0, 0%, 100%, 0.45);
  margin-bottom: 4px;
}

body .sh-plan-desc {
  font-size: 0.72rem;
  color: hsla(0, 0%, 100%, 0.35);
}


/* ─────────────────────────────────────────────────────
   9. REGISTRATION FORM EXTRAS
   ───────────────────────────────────────────────────── */

body .sh-flipix-banner {
  background: var(--primary-50);
  border: 1px solid var(--primary-200);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

body .sh-flipix-banner .material-symbols-rounded {
  font-size: 1.2rem;
  color: var(--primary);
}

body .sh-flipix-banner p {
  font-size: 0.82rem;
  color: var(--primary-700);
  margin: 0;
}

body .sh-step-indicator {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}

body .sh-step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gray-200);
  transition: background 0.2s ease, transform 0.2s ease;
}

body .sh-step-dot.active {
  background: var(--primary);
  transform: scale(1.3);
}

body .sh-step-dot.done {
  background: var(--success);
}


/* ─────────────────────────────────────────────────────
   10. OFFLINE SCREEN
   ───────────────────────────────────────────────────── */

body .sh-offline-wrap {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(
    180deg,
    var(--primary-950) 0%,
    var(--primary-900) 60%,
    hsl(205, 70%, 16%) 100%
  );
}

body .sh-offline-content {
  width: 100%;
  max-width: 400px;
  text-align: center;
}

body .sh-offline-icon {
  width: 68px;
  height: 68px;
  background: hsla(0, 0%, 100%, 0.08);
  border: 1.5px solid hsla(0, 0%, 100%, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}


/* ─────────────────────────────────────────────────────
   11. DESKTOP ENHANCEMENTS (768px+)
   ───────────────────────────────────────────────────── */

@media (min-width: 768px) {
  body .sh-login-wrap {
    padding: 40px;
  }

  body .sh-login-logo {
    width: 72px;
    height: 72px;
    border-radius: 22px;
  }

  body .sh-login-title {
    font-size: 2rem;
  }

  body .sh-auth-card {
    padding: 36px 32px;
    border-radius: 24px;
  }

  body .sh-auth-card .form-control {
    height: 56px;
    font-size: 1.1rem;
  }
}


/* ─────────────────────────────────────────────────────
   12. DARK MODE OVERRIDES
   ───────────────────────────────────────────────────── */

html[data-theme="dark"] body .sh-auth-card {
  background: var(--card);
  border: 1px solid var(--border);
}

html[data-theme="dark"] body .sh-auth-card .form-control {
  background: var(--surface-muted);
  border-color: var(--border);
}

/* ===== css/sidebar-redesign.css ===== */
/* =====================================================
   SahiHisab — Sidebar Redesign (Sea Blue Theme)

   Light-first aesthetic: clean white/ice shell, slate text,
   sea-blue accents. Dark mode (deep navy) preserved via the
   --sb-* variable overrides — flip the whole theme in one block.

   Design DNA:
   · Plus Jakarta Sans 800 headings + DM Sans 500 body
   · Sea blue accents (#0288D1 / #0369A1 / #29B6F6)
   · --r: 14px radius, soft layered shadows
   · Pill badges, gradient active accent bar
   · Hover: translateX + scale + rotate micro-interactions

   Uses body .selector specificity — NO !important.
   ===================================================== */


/* ─────────────────────────────────────────────────────
   0. THEME TOKENS — light by default, navy in dark mode
   ───────────────────────────────────────────────────── */

body .sidebar {
  --sb-bg: linear-gradient(180deg, #FFFFFF 0%, #F6FAFD 100%);
  --sb-border: rgba(15, 23, 42, 0.07);
  --sb-ink: #0F2A43;            /* brand title / strong text */
  --sb-muted: #93A7BC;          /* brand subtitle */
  --sb-text: #51677C;           /* default nav text + icon glyph */
  --sb-text-hover: #0F2A43;
  --sb-text-active: #0369A1;
  --sb-label: rgba(71, 85, 105, 0.55);
  --sb-label-hover: rgba(71, 85, 105, 0.85);
  --sb-brand-divide: linear-gradient(90deg, transparent 0%, rgba(2, 132, 199, 0.18) 30%, rgba(41, 182, 246, 0.14) 50%, rgba(2, 132, 199, 0.18) 70%, transparent 100%);
  --sb-item-hover-bg: rgba(2, 132, 199, 0.07);
  --sb-item-hover-border: rgba(2, 132, 199, 0.10);
  --sb-item-active-bg: rgba(2, 132, 199, 0.10);
  --sb-item-active-border: rgba(2, 132, 199, 0.16);
  --sb-item-active-shadow: 0 4px 14px rgba(2, 132, 199, 0.10);
  --sb-icon-bg: rgba(2, 119, 189, 0.06);
  --sb-icon-hover-bg: rgba(2, 132, 199, 0.12);
  --sb-icon-hover: #0288D1;
  --sb-icon-active-bg: rgba(2, 132, 199, 0.14);
  --sb-icon-active: #0288D1;
  --sb-scroll: rgba(2, 132, 199, 0.22);
  --sb-scroll-hover: rgba(2, 132, 199, 0.4);
  --sb-wash-1: rgba(41, 182, 246, 0.10);
  --sb-wash-2: rgba(2, 136, 209, 0.05);
  --sb-wash-3: rgba(3, 155, 229, 0.06);
}


/* ─────────────────────────────────────────────────────
   1. SIDEBAR SHELL
   ───────────────────────────────────────────────────── */

body .sidebar {
  width: var(--sidebar-width, 260px);
  background: var(--sb-bg);
  color: var(--sb-ink);
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  border-right: 1px solid var(--sb-border);
}

/* Ambient light — radial gradient wash, top-left corner */
body .sidebar::before {
  content: '';
  position: absolute;
  top: -60px; left: -40px;
  width: 220px; height: 220px;
  background: radial-gradient(
    ellipse at center,
    var(--sb-wash-1) 0%,
    var(--sb-wash-2) 40%,
    transparent 70%
  );
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* Bottom ambient — warm glow to prevent flat feeling */
body .sidebar::after {
  content: '';
  position: absolute;
  bottom: -80px; right: -50px;
  width: 200px; height: 200px;
  background: radial-gradient(
    circle,
    var(--sb-wash-3) 0%,
    transparent 65%
  );
  pointer-events: none;
  z-index: 0;
}

body .sidebar > * {
  position: relative;
  z-index: 1;
}

/* Scrollbar — barely visible, minimal chrome */
body .sidebar::-webkit-scrollbar { width: 3px; }
body .sidebar::-webkit-scrollbar-track { background: transparent; }
body .sidebar::-webkit-scrollbar-thumb {
  background: var(--sb-scroll);
  border-radius: 3px;
}
body .sidebar::-webkit-scrollbar-thumb:hover {
  background: var(--sb-scroll-hover);
}


/* ─────────────────────────────────────────────────────
   2. BRAND HEADER
   ───────────────────────────────────────────────────── */

body .sidebar-brand {
  /* Same height as .app-header (shared token) so the sidebar's divider and
     the page header's bottom border form ONE continuous line. Content below
     is sized to FIT 60px (32px logo, 1rem name) — do not enlarge without
     re-checking the fit, it clips. */
  height: var(--header-height, 60px);
  min-height: var(--header-height, 60px);
  /* .sidebar is a column flex container with a tall nav — without this the
     brand block (a fixed-height flex CHILD) gets flex-shrunk toward zero:
     first clipped, then invisible */
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 0 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--sb-border);
  position: relative;
  cursor: pointer; /* whole block opens the Account/profile menu */
  transition: background 0.2s ease;
}
body .sidebar-brand:hover {
  background: var(--sb-item-hover-bg);
}

/* Subtle shimmer line at bottom */
body .sidebar-brand::after {
  content: '';
  position: absolute;
  bottom: 0; left: 20px; right: 20px;
  height: 1px;
  background: var(--sb-brand-divide);
}

body .sidebar-brand .brand-icon {
  width: 32px; height: 32px;
  flex-shrink: 0;
  background: #0277BD;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: #fff;
  box-shadow:
    0 4px 12px rgba(2, 136, 209, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

body .sidebar-brand:hover .brand-icon {
  transform: scale(1.05) rotate(-3deg);
}

body .sidebar-brand h1 {
  font-family: 'Plus Jakarta Sans', 'DM Sans', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--sb-ink);
  line-height: 1.2;
  /* Studio names replace 'SahiHisab' here — long ones must truncate, not
     wrap and shove the subtitle into the bottom divider */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body .sidebar-brand small {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.62rem;
  color: var(--sb-muted);
  font-weight: 400;
  display: block;
  letter-spacing: 0.05em;
  margin-top: 1px;
  line-height: 1.3;
}

/* Brand text takes remaining space so the logout button right-aligns */
body .sidebar-brand .brand-text { flex: 1; min-width: 0; }

/* When a real studio logo is shown, drop the blue tile bg so the logo fills cleanly */
body .sidebar-brand .brand-icon.has-logo {
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

/* Log Out icon button in the brand row */
body .sidebar-logout-btn {
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--sb-text);
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
body .sidebar-logout-btn .material-symbols-rounded { font-size: 1.15rem; }
body .sidebar-logout-btn:hover { background: rgba(239, 68, 68, 0.10); color: #EF4444; }
body .sidebar-logout-btn:active { transform: scale(0.92); }


/* ─────────────────────────────────────────────────────
   3. NAVIGATION CONTAINER
   ───────────────────────────────────────────────────── */

body .sidebar-nav {
  flex: 1;
  padding: 12px 10px 20px;
}


/* ─────────────────────────────────────────────────────
   4. SECTION LABELS
   ───────────────────────────────────────────────────── */

body .sidebar .nav-section-label {
  font-family: 'Plus Jakarta Sans', 'DM Sans', system-ui, sans-serif;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--sb-label);
  padding: 20px 14px 7px;
  font-weight: 700;
  position: relative;
}

body .sidebar .nav-section-label:first-child {
  padding-top: 4px;
}

/* ─────────────────────────────────────────────────────
   4b. COLLAPSIBLE NAV GROUPS
   ───────────────────────────────────────────────────── */

body .sidebar .nav-group {
  margin-bottom: 2px;
}

body .sidebar .nav-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: 'Plus Jakarta Sans', 'DM Sans', system-ui, sans-serif;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--sb-label);
  padding: 16px 14px 7px;
  font-weight: 700;
  transition: color 200ms ease;
}

body .sidebar .nav-group:first-child .nav-group-header {
  padding-top: 4px;
}

body .sidebar .nav-group-header:hover {
  color: var(--sb-label-hover);
}

body .sidebar .nav-group-chevron {
  font-size: 1.05rem;
  transition: transform 220ms ease;
  opacity: 0.7;
}

body .sidebar .nav-group.collapsed .nav-group-chevron {
  transform: rotate(-90deg);
}

body .sidebar .nav-group-items {
  overflow: hidden;
  max-height: 600px;
  transition: max-height 260ms ease, opacity 200ms ease;
  opacity: 1;
}

body .sidebar .nav-group.collapsed .nav-group-items {
  max-height: 0;
  opacity: 0;
}


/* ─────────────────────────────────────────────────────
   5. NAV ITEMS — The core interactive element
   ───────────────────────────────────────────────────── */

body .sidebar .nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 14px;
  border-radius: 10px;
  color: var(--sb-text);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.86rem;
  font-weight: 500;
  transition:
    background 200ms ease,
    color 200ms ease,
    transform 200ms ease,
    box-shadow 200ms ease;
  margin-bottom: 1px;
  position: relative;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
}

/* Hover — soft sea-blue glass tint */
body .sidebar .nav-item:hover {
  background: var(--sb-item-hover-bg);
  border-color: var(--sb-item-hover-border);
  color: var(--sb-text-hover);
  transform: translateX(2px);
}

/* ── ACTIVE STATE ── */
body .sidebar .nav-item.active {
  background: var(--sb-item-active-bg);
  color: var(--sb-text-active);
  border-color: var(--sb-item-active-border);
  box-shadow: var(--sb-item-active-shadow);
  font-weight: 600;
}

/* Active accent bar — gradient from sky to ocean */
body .sidebar .nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 5px; bottom: 5px;
  width: 3px;
  background: linear-gradient(180deg, #29B6F6, #0277BD);
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 10px rgba(41, 182, 246, 0.45);
}

/* Active accent dot — right side, subtle "you are here" */
body .sidebar .nav-item.active::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px; height: 5px;
  background: #29B6F6;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(41, 182, 246, 0.5);
  animation: sb-pulse 3s ease-in-out infinite;
}

@keyframes sb-pulse {
  0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
  50%      { opacity: 0.5; transform: translateY(-50%) scale(0.7); }
}


/* ─────────────────────────────────────────────────────
   6. ICON STYLES
   ───────────────────────────────────────────────────── */

body .sidebar .nav-item .material-symbols-rounded,
body .sidebar .nav-item .nav-art {
  font-size: 1.5rem;
  width: 40px; height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: none;          /* no tinted plate — the art carries its own shape */
  flex-shrink: 0;
  font-variation-settings: 'FILL' 0, 'wght' 400;
  transition:
    font-variation-settings 150ms ease,
    background 200ms ease,
    transform 200ms ease,
    color 200ms ease;
}

body .sidebar .nav-item .nav-art {
  object-fit: contain;
  padding: 1px;
}

body .sidebar .nav-item:hover .material-symbols-rounded,
body .sidebar .nav-item:hover .nav-art {
  color: var(--sb-icon-hover);
  background: none;
  transform: scale(1.06) rotate(-3deg);
}

body .sidebar .nav-item.active .material-symbols-rounded {
  font-variation-settings: 'FILL' 1, 'wght' 500;
  color: var(--sb-icon-active);
  background: none;
}


/* ─────────────────────────────────────────────────────
   7. BADGE — Notification count
   ───────────────────────────────────────────────────── */

body .sidebar .nav-item .badge {
  margin-left: auto;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 100px;
  min-width: 18px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35);
  line-height: 1.3;
}


/* ─────────────────────────────────────────────────────
   8. SIDEBAR FOOTER — spacer
   ───────────────────────────────────────────────────── */

body .sidebar-nav::after {
  content: '';
  display: block;
  height: 24px;
}


/* ─────────────────────────────────────────────────────
   9. MOBILE — Slide-in drawer
   ───────────────────────────────────────────────────── */

@media (max-width: 768px) {
  body .sidebar {
    transform: translateX(-100%);
    z-index: 1050;
    width: 280px;
    box-shadow: none;
    transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  body .sidebar.open {
    transform: translateX(0);
    box-shadow:
      12px 0 40px rgba(15, 23, 42, 0.12),
      28px 0 90px rgba(15, 23, 42, 0.06);
  }

  /* Close button — glass-morphic */
  body .sidebar-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border: 1px solid var(--sb-border);
    background: var(--sb-icon-bg);
    border-radius: 8px;
    color: var(--sb-text);
    cursor: pointer;
    margin-left: auto;
    flex-shrink: 0;
    transition: all 150ms ease;
  }

  body .sidebar-close-btn:hover {
    background: var(--sb-icon-hover-bg);
    border-color: var(--sb-item-hover-border);
    color: var(--sb-text-hover);
  }

  body .sidebar-close-btn:active {
    background: var(--sb-icon-active-bg);
    transform: scale(0.9);
  }

  /* Backdrop — deep navy overlay */
  body .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(5, 30, 56, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 1049;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 250ms ease, visibility 250ms ease;
  }

  body .sidebar-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }

  /* Active dot hidden on mobile — saves space */
  body .sidebar .nav-item.active::after {
    display: none;
  }
}


/* ─────────────────────────────────────────────────────
   10. TABLET — Collapsed icon-only sidebar
   ───────────────────────────────────────────────────── */

@media (min-width: 769px) and (max-width: 1024px) {
  body .sidebar {
    width: 72px;
  }

  body .sidebar .sidebar-brand h1,
  body .sidebar .sidebar-brand small,
  body .sidebar .nav-section-label,
  body .sidebar .nav-group-header,
  body .sidebar .step-label,
  body .sidebar .nav-item span:not(.material-symbols-rounded):not(.badge) {
    display: none;
  }

  /* Icon-only mode: groups can't be toggled (header hidden), so keep items open */
  body .sidebar .nav-group .nav-group-items,
  body .sidebar .nav-group.collapsed .nav-group-items {
    max-height: none;
    opacity: 1;
    overflow: visible;
  }

  body .sidebar .sidebar-brand {
    justify-content: center;
    padding: 16px;
  }

  body .sidebar .sidebar-brand::after {
    left: 12px;
    right: 12px;
  }

  body .sidebar .nav-item {
    justify-content: center;
    padding: 10px;
  }

  body .sidebar .nav-item .material-symbols-rounded,
  body .sidebar .nav-item .nav-art {
    width: 44px; height: 44px;
    font-size: 1.55rem;
  }

  body .sidebar .nav-item.active::before {
    top: 8px;
    bottom: 8px;
  }

  /* Hide active dot in collapsed mode */
  body .sidebar .nav-item.active::after {
    display: none;
  }

  body .main-content {
    margin-left: 72px;
  }

  body .total-bar {
    left: 72px;
  }

  body .wi-wizard-nav {
    left: 72px;
  }
}


/* ─────────────────────────────────────────────────────
   10b. DESKTOP COLLAPSE (html.sb-mini) — icon-rail polish
   app.css narrows --sidebar-width to 74px and hides labels;
   this block owns the rail's look so it matches the tablet
   rail: centered square tiles, even group rhythm, no stubs.
   ───────────────────────────────────────────────────── */

@media (min-width: 769px) {
  /* Brand: just the centered avatar/logo — no side chrome */
  html.sb-mini body .sidebar-brand {
    padding: 16px 0 14px;
    justify-content: center;
  }
  html.sb-mini body .sidebar-brand::after {
    left: 14px;
    right: 14px;
  }
  html.sb-mini body .sidebar-logout-btn,
  html.sb-mini body .sidebar-close-btn {
    display: none;
  }

  /* Group headers vanish completely — no empty stubs. Groups keep
     their meaning through a hairline divider instead. */
  html.sb-mini body .sidebar .nav-group-header {
    display: none;
  }
  html.sb-mini body .sidebar .nav-group {
    margin: 0;
  }
  html.sb-mini body .sidebar .nav-group + .nav-group {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--sb-border);
  }
  html.sb-mini body .sidebar-nav {
    padding: 10px 12px 16px;
  }

  /* A group collapsed in full mode must still show its icons here —
     the header (its only toggle) is gone, so nothing can reopen it. */
  html.sb-mini body .sidebar .nav-group.collapsed .nav-group-items {
    max-height: none;
    opacity: 1;
    overflow: visible;
  }

  /* Items: compact centered tiles instead of tall hollow boxes */
  html.sb-mini body .sidebar .nav-item {
    justify-content: center;
    width: 100%;
    padding: 7px 0;
    margin: 0 0 2px;
  }
  html.sb-mini body .sidebar .nav-item:hover {
    transform: none;
  }
  html.sb-mini body .sidebar .nav-item .material-symbols-rounded,
  html.sb-mini body .sidebar .nav-item .nav-art {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
  }

  /* Active: accent bar hugs the tile; the right-side dot retires
     (it collides with the icon in a 74px rail) */
  html.sb-mini body .sidebar .nav-item.active::before {
    top: 7px;
    bottom: 7px;
  }
  html.sb-mini body .sidebar .nav-item.active::after {
    display: none;
  }

  /* Badge survives as a corner count on the tile (app.css hides all
     non-icon spans; this later, equally-specific rule re-shows it) */
  html.sb-mini body .sidebar .nav-item .badge {
    display: block;
    position: absolute;
    top: 1px;
    right: 7px;
    margin: 0;
    padding: 1px 5px;
    font-size: 0.58rem;
    min-width: 14px;
  }

  /* Footer: same column geometry as the nav tiles above */
  html.sb-mini body .sidebar-footer {
    padding: 8px 12px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
  html.sb-mini body .sidebar-footer .nav-item {
    width: 100%;
    justify-content: center;
    padding: 7px 0;
    margin: 0 0 2px;
  }
}


/* ─────────────────────────────────────────────────────
   11. FOCUS + ACCESSIBILITY
   ───────────────────────────────────────────────────── */

body .sidebar .nav-item:focus-visible {
  outline: 2px solid rgba(2, 132, 199, 0.7);
  outline-offset: 2px;
  border-radius: 10px;
}


/* ─────────────────────────────────────────────────────
   12. DARK MODE — deep navy shell (token overrides only)
   ───────────────────────────────────────────────────── */

/* Explicit dark — app.js sets .dark-mode on <html> (documentElement), NOT <body>,
   so this must NOT be scoped to body.* or it never matches. */
[data-theme="dark"] .sidebar,
.dark .sidebar,
.dark-mode .sidebar {
  --sb-bg: #041E35;
  --sb-border: rgba(2, 119, 189, 0.08);
  --sb-ink: #ffffff;
  --sb-muted: rgba(122, 172, 207, 0.6);
  --sb-text: rgba(179, 229, 252, 0.55);
  --sb-text-hover: #E1F5FE;
  --sb-text-active: #ffffff;
  --sb-label: rgba(122, 172, 207, 0.4);
  --sb-label-hover: rgba(122, 172, 207, 0.75);
  --sb-brand-divide: linear-gradient(90deg, transparent 0%, rgba(41, 182, 246, 0.2) 30%, rgba(129, 212, 250, 0.15) 50%, rgba(41, 182, 246, 0.2) 70%, transparent 100%);
  --sb-item-hover-bg: rgba(2, 119, 189, 0.1);
  --sb-item-hover-border: rgba(2, 119, 189, 0.08);
  --sb-item-active-bg: rgba(2, 119, 189, 0.15);
  --sb-item-active-border: rgba(41, 182, 246, 0.1);
  --sb-item-active-shadow: 0 2px 10px rgba(2, 136, 209, 0.12);
  --sb-icon-bg: rgba(255, 255, 255, 0.04);
  --sb-icon-hover-bg: rgba(129, 212, 250, 0.08);
  --sb-icon-hover: #81D4FA;
  --sb-icon-active-bg: rgba(41, 182, 246, 0.12);
  --sb-icon-active: #29B6F6;
  --sb-scroll: rgba(129, 212, 250, 0.15);
  --sb-scroll-hover: rgba(129, 212, 250, 0.3);
  --sb-wash-1: rgba(41, 182, 246, 0.08);
  --sb-wash-2: rgba(2, 136, 209, 0.04);
  --sb-wash-3: rgba(3, 155, 229, 0.06);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) .sidebar {
    --sb-bg: #041E35;
    --sb-border: rgba(2, 119, 189, 0.08);
    --sb-ink: #ffffff;
    --sb-muted: rgba(122, 172, 207, 0.6);
    --sb-text: rgba(179, 229, 252, 0.55);
    --sb-text-hover: #E1F5FE;
    --sb-text-active: #ffffff;
    --sb-label: rgba(122, 172, 207, 0.4);
    --sb-label-hover: rgba(122, 172, 207, 0.75);
    --sb-brand-divide: linear-gradient(90deg, transparent 0%, rgba(41, 182, 246, 0.2) 30%, rgba(129, 212, 250, 0.15) 50%, rgba(41, 182, 246, 0.2) 70%, transparent 100%);
    --sb-item-hover-bg: rgba(2, 119, 189, 0.1);
    --sb-item-hover-border: rgba(2, 119, 189, 0.08);
    --sb-item-active-bg: rgba(2, 119, 189, 0.15);
    --sb-item-active-border: rgba(41, 182, 246, 0.1);
    --sb-item-active-shadow: 0 2px 10px rgba(2, 136, 209, 0.12);
    --sb-icon-bg: rgba(255, 255, 255, 0.04);
    --sb-icon-hover-bg: rgba(129, 212, 250, 0.08);
    --sb-icon-hover: #81D4FA;
    --sb-icon-active-bg: rgba(41, 182, 246, 0.12);
    --sb-icon-active: #29B6F6;
    --sb-scroll: rgba(129, 212, 250, 0.15);
    --sb-scroll-hover: rgba(129, 212, 250, 0.3);
    --sb-wash-1: rgba(41, 182, 246, 0.08);
    --sb-wash-2: rgba(2, 136, 209, 0.04);
    --sb-wash-3: rgba(3, 155, 229, 0.06);
  }
}


/* ─────────────────────────────────────────────────────
   13. REDUCED MOTION
   ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  body .sidebar .nav-item {
    transition: background 200ms ease, color 200ms ease;
  }

  body .sidebar .nav-item:hover {
    transform: none;
  }

  body .sidebar .nav-item:hover .material-symbols-rounded {
    transform: none;
  }

  body .sidebar-brand:hover .brand-icon {
    transform: none;
  }

  @keyframes sb-pulse {
    0%, 100% { opacity: 1; }
  }
}

/* ─────────────────────────────────────────────────────
   9. DESKTOP DENSITY — 4/8pt spacing rhythm
   40px nav rows · 4px item gaps · 16px label lead-ins ·
   24px between groups. Pointer devices only; the mobile
   drawer keeps 44px+ touch rows.
   ───────────────────────────────────────────────────── */
@media (min-width: 1025px) {
  /* One 24px left rail: the brand logo, every icon chip and every section
     label start on the same vertical line. 24 = 12 (nav gutter) + 12 (item). */
  body .sidebar-brand { padding: 0 24px; }

  body .sidebar-nav { padding: 8px 12px 16px; }

  body .sidebar .nav-item {
    /* The item carries a 1px transparent border (hover/active swap its
       colour), so it counts toward BOTH the row height and the left rail:
       1 + 5 + 28 icon + 5 + 1 = 40px tall, 12 + 1 + 11 = 24px to the icon. */
    padding: 5px 11px;
    gap: 12px;
    margin-bottom: 4px;
    border-radius: 9px;
    font-size: 0.85rem;
  }

  body .sidebar .nav-item .material-symbols-rounded,
  body .sidebar .nav-item .nav-art {
    width: 34px; height: 34px;
    font-size: 1.3rem;
    border-radius: 7px;
  }

  /* The 240px column leaves ~150px for the label. A long one (Tamil/Marathi
     'Collect Payment') must ellipsize — if it wraps, the 40px row becomes
     60px and the whole rhythm below it shifts. */
  body .sidebar .nav-item span:not(.material-symbols-rounded):not(.badge) {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Same guard for the brand subtitle — the brand block is height-pinned to
     60px with overflow:hidden, so a wrapped subtitle is a clipped subtitle. */
  body .sidebar-brand small {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body .sidebar .nav-section-label,
  body .sidebar .nav-group-header {
    padding: 16px 12px 8px;     /* 24px group separation incl. last item's 4px gap */
  }

  body .sidebar .nav-group { margin-bottom: 0; }
  body .sidebar .nav-group:first-child .nav-group-header,
  body .sidebar .nav-section-label:first-child { padding-top: 4px; }

  /* Collapsed icon rail: 80px. app.css sets 74px on html.sb-mini at >=769px;
     this rule is equally specific and this file loads later, so it wins here
     while the 769-1024px tablet rail keeps its own 72px width. */
  html.sb-mini { --sidebar-width: 80px; }
}

/* Expanded column: 240px. Deliberately capped below 1440px — desktop.css
   widens --sidebar-width to 280px there on purpose (large screens have the
   room, and the token drives main-content/total-bar/wizard-nav offsets too).
   sidebar-redesign.css loads AFTER desktop.css, so an uncapped :root rule
   here would silently out-cascade that and re-open the sb-mini dead-strip
   bug it fixed. */
@media (min-width: 1025px) and (max-width: 1439px) {
  :root { --sidebar-width: 240px; }
}

/* ===== css/client-detail-v3.css ===== */
/* ============================================================
   Client Detail v3 — desktop layout + fixes
   Loaded after app.css. No !important anywhere; specificity comes
   from the `body .class` pattern.

   PROBLEM THIS SOLVES
   The Client Detail screen was a mobile layout rendered at 1440px:
   a full-width white nav band holding one back button, a 64px avatar
   centred in a 1200px column, a money strip stretched edge to edge,
   and a single narrow content column with dead space either side.
   Desktop now gets a real two-column layout; mobile is untouched.
   ============================================================ */

/* ── 1. Avatar camera button (ALL viewports) ────────────────────
   Bug: .detail-avatar-camera declared width/height 28px and then
   min-width/min-height 44px. The minimum wins, so a 44px filled
   circle sat on top of a 64px avatar and swallowed the initial.
   Keep the 44px tap target (required), shrink the VISIBLE circle
   back to 28px by moving the paint onto the icon itself. */
body .detail-avatar-camera {
  background: transparent;
  border: none;
  box-shadow: none;
  margin: 0;
  bottom: -6px;
  right: -6px;
}
body .detail-avatar-camera .material-symbols-rounded {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: #fff;
  border: 2px solid var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.15));
  transition: transform var(--transition-fast, 150ms ease);
}
body .detail-avatar-camera:hover .material-symbols-rounded { transform: scale(1.08); }

/* Wrappers are layout-only. On mobile they must not exist as far as
   layout is concerned, so the original single-column order survives
   byte for byte. */
body .cd-rail,
body .cd-main { display: contents; }

/* Credit is actionable money, not a passive badge. Keep the existing refund
   handler reachable in the default tabbed layout on both mobile and desktop. */
body .client-detail-tabs .cd-credit-chip {
  color: var(--primary);
  min-height: 44px;
}
body .client-detail-tabs .cd-credit-chip > span:nth-child(2) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body .client-detail-tabs .cd-credit-chip .cd-credit-refund {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  flex: 0 0 auto;
  min-height: 44px;
  margin-left: auto;
  padding: 0 var(--space-md);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  border-radius: var(--radius-sm);
  background: var(--primary-50);
  color: var(--primary);
  font: 600 0.78rem 'DM Sans', sans-serif;
  cursor: pointer;
  transition: background var(--transition-fast, 150ms ease),
              transform var(--transition-fast, 150ms ease);
}
body .client-detail-tabs .cd-credit-chip .cd-credit-refund:hover {
  background: color-mix(in srgb, var(--primary) 14%, var(--card));
}
body .client-detail-tabs .cd-credit-chip .cd-credit-refund:active {
  transform: scale(0.97);
}
body .client-detail-tabs .cd-credit-chip .cd-credit-refund .material-symbols-rounded {
  font-size: 1rem;
}

/* Refund credit modal — explicit component styles prevent native browser form
   chrome from leaking into the app, especially in dark mode. */
body .refund-credit-form {
  display: grid;
  gap: var(--space-lg);
}
body .refund-credit-form .refund-credit-hint {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--primary) 8%, var(--card));
  color: var(--muted-foreground);
  font-size: 0.82rem;
  line-height: 1.5;
}
body .refund-credit-form .refund-credit-hint .material-symbols-rounded {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--primary);
  font-size: 1.05rem;
}
body .refund-credit-form .refund-credit-field {
  min-width: 0;
}
body .refund-credit-form .form-label {
  margin-bottom: var(--space-sm);
}
body .refund-credit-form .refund-credit-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}
body .refund-credit-form .refund-credit-available {
  padding: 3px 8px;
  border-radius: var(--radius-full);
  background: var(--primary-50);
  color: var(--primary);
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}
body .refund-credit-form .refund-credit-amount {
  position: relative;
}
body .refund-credit-form .refund-credit-currency {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: var(--space-lg);
  transform: translateY(-50%);
  color: var(--primary);
  font-size: 1rem;
  font-weight: 800;
  pointer-events: none;
}
body .refund-credit-form .refund-credit-amount .form-control {
  padding-left: 36px;
  color: var(--foreground);
  font-size: 1.05rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
body .refund-credit-form .form-control {
  min-height: 48px;
  font-family: 'DM Sans', sans-serif;
}
body .refund-credit-form select.form-control {
  cursor: pointer;
}
body .refund-credit-form .refund-credit-optional {
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 500;
}
body .modal-footer button[form="refundCreditForm"] {
  min-height: 48px;
  gap: var(--space-sm);
  font-weight: 700;
}
body .modal-footer button[form="refundCreditForm"] .material-symbols-rounded {
  font-size: 1.1rem;
}

@media (max-width: 480px) {
  body .refund-credit-form {
    gap: var(--space-md);
  }
  body .refund-credit-form .refund-credit-hint {
    padding: var(--space-sm) var(--space-md);
  }
}

/* ── Instalment rows: collect one at a time ──────────────────────
   The amount on the button is what the payment modal will actually ask for,
   which is NOT always the row's own figure — the schedule settles cumulatively,
   so an instalment with an unpaid one before it needs the shortfall against the
   running total. Showing that number here means the studio sees the difference
   before the modal opens, not after. Math lives in clients.js
   (_installmentNeed); this file only places it. */
.cd-inst-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.cd-inst-amt { font-weight: 700; }

.cd-inst-collect {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(16, 185, 129, 0.28);
  border-radius: 9px;
  background: rgba(16, 185, 129, 0.08);
  color: var(--success, #10b981);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
}
.cd-inst-collect:hover { background: rgba(16, 185, 129, 0.16); }
.cd-inst-collect svg.ico-collect { font-size: 1rem; }

/* 44px tap target on a phone; the desktop row is pointer-driven and 34px keeps
   the instalment list from growing a third taller than it needs to be. */
@media (max-width: 767px) {
  .cd-inst-collect { min-height: 44px; padding: 0 12px; }
}

/* What the modal says it is paying, pinned above the bill list. */
.cl-prefill-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
  padding: 9px 11px;
  border-left: 3px solid var(--warning, #f59e0b);
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.07);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
}
.cl-prefill-note .material-symbols-rounded { font-size: 1.05rem; color: var(--warning, #f59e0b); }
.cl-prefill-note em { font-style: normal; font-weight: 500; color: var(--text-secondary); }

/* ── Delete Client: what the studio is actually about to strand ──
   Real counts and real ids, because "linked quotations will lose client
   reference" told a studio nothing about which records, how many, or how much
   money sat behind them. Counts come from the client's own profile
   (_deleteImpact in clients.js) using the same balance rules clients.php
   enforces, so the list cannot promise something the server will not do. */
.cl-del-lead { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); margin: 0 0 12px; }
.cl-del-head { font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); margin: 0 0 6px; }

.cl-del-list { list-style: none; margin: 0 0 12px; padding: 0; }
.cl-del-list li {
  display: grid;
  grid-template-columns: 20px auto auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--gray-50, #fafafa);
  margin-bottom: 4px;
  font-size: 0.84rem;
}
.cl-del-list .material-symbols-rounded { font-size: 1.05rem; color: var(--text-muted); }
.cl-del-n { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.cl-del-noun { color: var(--text-primary); }
/* Ids run long on a phone; they wrap rather than push the row sideways. */
.cl-del-ids {
  justify-self: end;
  text-align: right;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.cl-del-effect { font-size: 0.82rem; line-height: 1.5; color: var(--text-secondary); margin: 0; }

/* Blocked state: the reasons the server will refuse, shown before the studio
   presses anything. Amber, not red — nothing has gone wrong, there is simply
   work to finish first. */
.cl-del-blocked li {
  grid-template-columns: 20px 1fr;
  align-items: start;
  background: rgba(245, 158, 11, 0.07);
  border-left: 3px solid var(--warning, #f59e0b);
}
.cl-del-blocked .material-symbols-rounded { color: var(--warning, #f59e0b); }
.cl-del-reason { line-height: 1.45; color: var(--text-primary); }

@media (max-width: 480px) {
  .cl-del-list li { grid-template-columns: 20px auto 1fr; row-gap: 2px; }
  .cl-del-ids { grid-column: 2 / -1; justify-self: start; text-align: left; }
}

/* ── 2. Desktop: two columns ────────────────────────────────── */
@media (min-width: 1024px) {

  body .client-detail-page.client-detail-tabs {
    display: grid;
    /* Content leads on the left, identity card sits on the right. Reading
       order in the DOM is unchanged (rail still comes first), so mobile and
       screen readers keep the original sequence; only the visual columns swap. */
    grid-template-columns: minmax(0, 1fr) 336px;
    grid-template-areas:
      "nav  nav"
      "main rail";
    column-gap: var(--space-2xl);
    row-gap: var(--space-md);
    align-items: start;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--space-2xl) var(--space-4xl);
  }

  body .client-detail-tabs .detail-nav  { grid-area: nav; }
  body .client-detail-tabs .cd-rail     { grid-area: rail; display: block; }
  body .client-detail-tabs .cd-main     { grid-area: main; display: block; min-width: 0; }

  /* 2a. The offending band. It was a sticky full-bleed white bar whose
     only job was to hold a back arrow — the page header already says
     "Clients", and the client's name sits directly below. Strip the
     surface, drop the redundant title, keep the controls. */
  body .client-detail-tabs .detail-nav {
    position: static;
    background: transparent;
    padding: var(--space-md) 0 var(--space-xs);
    gap: var(--space-sm);
  }
  body .client-detail-tabs .detail-nav .detail-nav-title { display: none; }
  body .client-detail-tabs .detail-nav .detail-back-btn { margin-right: auto; }
  body .client-detail-tabs .detail-back-btn,
  body .client-detail-tabs .detail-edit-btn {
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, .04));
    transition: background var(--transition-fast, 150ms ease),
                border-color var(--transition-fast, 150ms ease),
                transform var(--transition-fast, 150ms ease);
  }
  body .client-detail-tabs .detail-back-btn:hover,
  body .client-detail-tabs .detail-edit-btn:hover {
    background: var(--primary-50);
    border-color: var(--primary-200, var(--primary));
    transform: translateY(-1px);
  }

  /* 2b. Left rail = one identity card that travels with the reader. */
  body .client-detail-tabs .cd-rail {
    position: sticky;
    top: var(--space-lg);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card, 0 1px 3px rgba(0, 0, 0, .06));
    padding: var(--space-lg) var(--space-lg) var(--space-lg);
    overflow: hidden;
  }
  /* Sea-blue wash behind the avatar so the card has a top, not just a
     border. Sits under content via a negative-margin bleed. */
  body .client-detail-tabs .cd-rail::before {
    content: '';
    display: block;
    margin: calc(var(--space-lg) * -1) calc(var(--space-lg) * -1) 0;
    height: 56px;
    background: linear-gradient(160deg, var(--primary-100) 0%, var(--primary-50) 60%, transparent 100%);
  }
  body .client-detail-tabs .cd-rail .detail-profile {
    padding: 0 0 var(--space-md);
    margin-top: -40px;
    gap: 2px;
  }
  body .client-detail-tabs .cd-rail .detail-avatar,
  body .client-detail-tabs .cd-rail .detail-avatar-img {
    width: 68px;
    height: 68px;
    border-radius: var(--radius-full);
    font-size: 1.5rem;
    border: 3px solid var(--card);
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, .08));
  }
  body .client-detail-tabs .cd-rail .detail-name {
    font-size: 1.02rem;
    line-height: 1.25;
    text-align: center;
  }

  /* 2c. Money. Stacked in the rail, and DUE gets the weight because it
     is the number the owner opened this page for. Never hidden — see
     the money-fields-visible rule. */
  body .client-detail-tabs .cd-rail .cd-money-strip {
    display: block;
    margin: 0 0 var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--card);
  }
  /* row-reverse flips the visual order without touching the DOM: markup is
     .v then .l, so the label lands LEFT and the amount RIGHT — how a ledger
     line actually reads. flex-direction must be restated because app.css
     .cd-stat sets `column`. */
  body .client-detail-tabs .cd-rail .cd-stat {
    display: flex;
    flex-direction: row-reverse;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: 9px 12px;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid var(--border);
    background: transparent;
  }
  body .client-detail-tabs .cd-rail .cd-stat:last-child { border-bottom: none; }
  body .client-detail-tabs .cd-rail .cd-stat .v {
    font-size: 0.98rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    word-break: normal;
  }
  body .client-detail-tabs .cd-rail .cd-stat .l {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted, var(--muted-foreground));
  }
  /* Colour lives on the number, not on a filled slab. A faint tint plus a
     left keyline marks the row that matters without shouting. */
  body .client-detail-tabs .cd-rail .cd-stat.due {
    background: hsla(0, 72%, 51%, 0.045);
    box-shadow: inset 3px 0 0 var(--danger, hsl(0, 72%, 51%));
  }
  body .client-detail-tabs .cd-rail .cd-stat.due .v { font-size: 1.18rem; }
  body .client-detail-tabs .cd-rail .cd-stat.due .l { color: var(--danger, hsl(0, 72%, 51%)); }
  body .client-detail-tabs .cd-rail .cd-stat.green .v { color: var(--success); }

  /* 2d. Actions: a 2-up grid instead of a centred pill soup. */
  body .client-detail-tabs .cd-rail .detail-actions-pills {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 0;
    margin: 0;
    overflow: visible;
  }
  body .client-detail-tabs .cd-rail .detail-pill {
    width: 100%;
    justify-content: center;
    min-height: 44px;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    transition: transform var(--transition-fast, 150ms ease),
                box-shadow var(--transition-fast, 150ms ease);
  }
  body .client-detail-tabs .cd-rail .detail-pill:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm, 0 2px 6px rgba(0, 0, 0, .08));
  }
  /* Collect is the money-making action, so it gets weight — but as FILL,
     not as a full-row span. Spanning left UPI stranded alone at half width;
     six actions divide cleanly into three rows of two. */
  body .client-detail-tabs .cd-rail .detail-pill.orange {
    background: var(--warning, #f59e0b);
    border-color: var(--warning, #f59e0b);
    color: #fff;
    font-weight: 700;
  }
  body .client-detail-tabs .cd-rail .detail-pill.orange .material-symbols-rounded,
  body .client-detail-tabs .cd-rail .detail-pill.orange svg { color: #fff; fill: currentColor; }
  body .client-detail-tabs .cd-rail .detail-pill.orange:hover {
    background: hsl(38, 92%, 44%);
    border-color: hsl(38, 92%, 44%);
  }

  body .client-detail-tabs .cd-rail .cd-inline-chip {
    margin: 0 0 var(--space-sm);
    width: 100%;
  }

  /* 2e. Right column: tabs sit on the content card, not floating. */
  body .client-detail-tabs .cd-main .cd-tabs {
    margin: 0;
    padding: 0 var(--space-md);
    background: var(--card);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    gap: var(--space-xs);
  }
  body .client-detail-tabs .cd-main .cd-tab {
    flex: 0 0 auto;
    padding: 10px var(--space-md);
    font-size: 0.85rem;
    min-height: 42px;
  }
  body .client-detail-tabs .cd-main .cd-panel {
    background: var(--card);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding: var(--space-md) var(--space-lg) var(--space-lg);
    min-height: 0;
  }
  /* .detail-section ships `padding: 16px 20px` for the mobile full-bleed layout.
     Inside an already-padded panel that doubles to 40px of horizontal gutter and
     adds a dead 16px band between every section. Strip it; the panel owns spacing. */
  body .client-detail-tabs .cd-main .cd-panel .detail-section {
    padding: 0;
    margin: 0 0 var(--space-lg);
  }
  body .client-detail-tabs .cd-main .cd-panel .detail-section-title { margin-bottom: var(--space-sm); }
  /* ── Item rows as a TABLE (desktop only) ──────────────────────────
     The card markup is a 2-row stack: (name+sub | badge) then (total | due).
     `display: contents` on the two inner wrappers promotes their children to
     grid items of the card itself, so five nested nodes become five columns
     WITHOUT touching clients.js. Markup, data-nav and click handling are
     unchanged — mobile keeps the original card exactly. */
  body .client-detail-tabs .cd-main .detail-item-card {
    display: grid;
    /* date col fits the longest sub-label — rentals render "Return: 30 Aug 2026",
       which overflowed 104px and collided with the status pill. */
    grid-template-columns: minmax(0, 1fr) 136px 100px 104px 128px;
    align-items: center;
    column-gap: var(--space-md);
    padding: 8px 12px;
    margin-bottom: 3px;
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
  }
  body .client-detail-tabs .cd-main .detail-item-card:last-child { border-bottom: none; }
  body .client-detail-tabs .cd-main .detail-item-card > .detail-item-top,
  body .client-detail-tabs .cd-main .detail-item-card > .detail-item-top > div,
  body .client-detail-tabs .cd-main .detail-item-card > .detail-item-money { display: contents; }

  /* margins from the stacked layout would leak into the grid */
  body .client-detail-tabs .cd-main .detail-item-top { margin-bottom: 0; }
  body .client-detail-tabs .cd-main .detail-item-money { margin-top: 0; }

  /* col 1 — item, col 2 — date, col 3 — status */
  body .client-detail-tabs .cd-main .detail-item-name {
    font-size: 0.86rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body .client-detail-tabs .cd-main .detail-item-sub {
    font-size: 0.75rem;
    color: var(--text-muted, var(--muted-foreground));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body .client-detail-tabs .cd-main .detail-item-badge {
    justify-self: start;
    font-size: 0.68rem;
    white-space: nowrap;
  }
  /* cols 4 & 5 — money, right-aligned and tabular so digits line up */
  body .client-detail-tabs .cd-main .detail-item-money > span {
    text-align: right;
    font-size: 0.86rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /* row affordance replaces the card's border+shadow */
  body .client-detail-tabs .cd-main .detail-item-card:hover {
    background: var(--primary-50);
    border-color: var(--border);
    box-shadow: none;
    transform: none;
  }
  body .client-detail-tabs .cd-main .cd-panel .detail-section:last-child { margin-bottom: 0; }

  /* Order/booking/rental cards read as rows, with a hover affordance so
     they look clickable (they are). */
  body .client-detail-tabs .cd-main .detail-item-card {
    transition: border-color var(--transition-fast, 150ms ease),
                box-shadow var(--transition-fast, 150ms ease),
                transform var(--transition-fast, 150ms ease);
  }
  body .client-detail-tabs .cd-main .detail-item-card:hover {
    border-color: var(--primary-200, var(--primary));
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, .06));
    transform: translateY(-1px);
  }
}

  /* Pointer devices only: the 44px minimum exists for fingers. Mirrors the
     desktop sidebar's 40px rows. Touch laptops keep 44px. */
@media (min-width: 1024px) and (pointer: fine) {
  body .client-detail-tabs .cd-rail .detail-pill { min-height: 38px; }
  body .client-detail-tabs .cd-rail .detail-avatar-camera { min-width: 34px; min-height: 34px; }
}

/* On desktop the card is a 5-column grid and `display: contents` promotes
   .cd-inst-right's children into it, so the button becomes a column of its own
   rather than a box hugging the amount. */
@media (min-width: 1024px) {
  body .client-detail-tabs .cd-main .cd-inst .cd-inst-collect { justify-self: start; }
  body .client-detail-tabs .cd-main .cd-inst .cd-inst-amt { text-align: right; }
}

/* ── 3. Wide desktop: let the content breathe rather than stretch ── */
@media (min-width: 1600px) {
  body .client-detail-page.client-detail-tabs {
    grid-template-columns: minmax(0, 1fr) 360px;
    max-width: 1440px;
  }
}

/* ── 4. Respect reduced motion ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body .client-detail-tabs .detail-item-card,
  body .client-detail-tabs .cd-rail .detail-pill,
  body .client-detail-tabs .detail-back-btn,
  body .client-detail-tabs .detail-edit-btn,
  body .detail-avatar-camera .material-symbols-rounded { transition: none; }
  body .client-detail-tabs .cd-main .detail-item-card:hover,
  body .client-detail-tabs .cd-rail .detail-pill:hover { transform: none; }
}


/* ── 5. Money bar: one filled track instead of three equal numbers ──
   Replaces .cd-money-strip (now unused by clients-detail.js).

   The owner reads digits fluently and English accounting nouns poorly, so the
   three figures DUE / COLLECTED / TOTAL BUSINESS, set at the same weight in a
   row, carried no meaning until each label was decoded -- and on a half-paid
   client the first two printed the same number twice.

   Here the shape carries the meaning: filled = money that arrived, empty =
   money that has not. The figures are all still on screen, which is the rule --
   reduce decoding, never delete the number.

   Three segments, because clients.php computes
     total_due = total_business - total_collected - total_waived.
   A waiver with no segment of its own would leave a gap nothing explains.

   Mobile-first: these are the phone styles, section 2's media query refines the
   desktop rail below. No `!important`; specificity comes from `body .class`. */
.cd-money-bar {
  margin: 4px 16px 12px;
  padding: 12px 14px;
  background: var(--gray-50);
  border-radius: var(--radius-md, 12px);
}
.cd-mb-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.cd-mb-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  font-family: 'DM Sans', sans-serif;
}
.cd-mb-total {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
  font-family: 'DM Sans', sans-serif;
  /* Tabular so the rupee figures keep their digit groups. The old .cd-stat .v
     carried `word-break: break-all`, which is free to split a number between
     two digits; v3 only ever corrected that inside the desktop media query. */
  font-variant-numeric: tabular-nums;
  word-break: normal;
}
.cd-mb-track {
  display: flex;
  height: 14px;
  border-radius: 7px;
  overflow: hidden;
  background: var(--border);
}
.cd-mb-seg { display: block; height: 100%; }
.cd-mb-seg.got { background: var(--success, #10b981); }
.cd-mb-seg.waived { background: var(--warning, #f59e0b); }
.cd-mb-seg.left { background: var(--danger, #ef4444); }

.cd-mb-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 9px;
}
/* Icon + word + figure. The icon is here so the segments are not told apart by
   colour alone -- a red/green bar is exactly the pair that fails for the most
   common form of colour blindness. */
.cd-mb-leg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  font-family: 'DM Sans', sans-serif;
}
.cd-mb-leg b {
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.cd-mb-leg .material-symbols-rounded { font-size: 15px; }
.cd-mb-leg.got .material-symbols-rounded { color: var(--success, #10b981); }
.cd-mb-leg.waived .material-symbols-rounded { color: var(--warning, #f59e0b); }
.cd-mb-leg.left .material-symbols-rounded { color: var(--danger, #ef4444); }
.cd-mb-leg.left b { color: var(--danger, #ef4444); }

/* ── 6. Why the Collect button asks for more than the row ──────────
   _installmentNeed() returns the catch-up figure: everything outstanding up to
   and including this instalment. So a Rs 21,600 row can carry a Rs 54,000
   button, which reads as a mistake. The code already knew (it sets
   data-inst-earlier) but said so only in a `title`, and a phone has no hover. */
.cd-inst-why {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px dashed var(--border);
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary);
  font-family: 'DM Sans', sans-serif;
}
.cd-inst-why .material-symbols-rounded {
  font-size: 15px;
  color: var(--warning, #f59e0b);
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── 7. Desktop: the money bar in the rail, and two v3 regressions ── */
@media (min-width: 1024px) {
  /* The rail is a single identity card with its own padding, so the bar drops
     its phone margins and sits flush, matching what .cd-money-strip did. */
  body .client-detail-tabs .cd-rail .cd-money-bar {
    margin: 0 0 var(--space-md);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
  }
  body .client-detail-tabs .cd-rail .cd-mb-total { font-size: 1.32rem; }
  /* The rail is narrow; let the legend stack rather than squeeze the figures. */
  body .client-detail-tabs .cd-rail .cd-mb-legend { gap: 5px 12px; }

  /* .detail-item-card is a 5-column grid here and `display: contents` promotes
     the inner wrappers into it, so a new child of the card would land in
     column 1 and shove the row apart. The catch-up note is a full-width row
     under the instalment, which is also where it reads. */
  body .client-detail-tabs .cd-main .cd-inst .cd-inst-why {
    grid-column: 1 / -1;
    margin-top: 2px;
    padding-top: 5px;
  }

  /* REGRESSION, introduced by section 2's grid: col 1 was pinned to one line
     with an ellipsis, so an instalment printed "Second (..." and "Final (Wed..."
     -- cut mid-word, which is the one thing a low-literacy reader cannot
     recover from. Wrap to at most two lines instead; whole words survive and
     the row only grows when it has to. */
  body .client-detail-tabs .cd-main .detail-item-name {
    white-space: normal;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}
/* ── 8. Phone: the actions were a horizontal scroller ───────────────
   Section 2d gave DESKTOP a 2-up grid. Mobile was left on the base
   `.detail-actions-pills` rule in app.css: `overflow-x: auto` with
   `white-space: nowrap`, carrying ~1070px of buttons inside a 375px screen.

   Measured at 375px: of seven actions only TWO were visible. Collect Payment,
   UPI, Statement, Quotations and Hisab Samjhao all sat off the right edge,
   behind a scroll with no arrow, no fade and no scrollbar (the base rule hides
   it). The owner this app is built for reads linearly with a narrow field of
   view and does not go looking sideways -- so the single action that takes
   money was, on a phone, effectively absent.

   Same 2-up grid as the desktop rail. Nothing is removed and nothing moves
   behind a "More"; the buttons that already existed simply all fit on screen.
   DOM order is untouched, so tab order still matches what the eye sees. */
@media (max-width: 1023px) {
  .detail-actions-pills {
    display: grid;
    /* minmax(0, 1fr), not 1fr. A grid track's implicit minimum is `auto`, and
       .detail-pill carries `white-space: nowrap` from app.css, so a long label
       sets a min-content width the track is forced to honour -- the grid then
       grows past the viewport and we are back to a sideways scroll. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    overflow: visible;
  }
  .detail-pill {
    width: 100%;
    justify-content: center;
    flex: 1 1 auto;
    /* and let a long label wrap inside the button rather than push the track */
    white-space: normal;
    line-height: 1.25;
    padding: 8px 10px;
    text-align: center;
  }
  /* Collect is the one action that brings money in, so it reads as the primary
     here exactly as it does in the desktop rail -- filled, not outlined. */
  .detail-pill.orange {
    background: var(--warning, #f59e0b);
    border-color: var(--warning, #f59e0b);
    color: #fff;
    font-weight: 700;
  }
  .detail-pill.orange .material-symbols-rounded,
  .detail-pill.orange svg { color: #fff; fill: currentColor; }
}

/* ===== css/clients-view.css ===== */
/* ============================================================
   Clients — list view
   Loaded after app.css. No !important; `body .class` specificity.

   Clients was the only list page without a list/grid toggle —
   Quick Order (sh_wi_view), Quotations (sh_qt_view) and Rentals
   (sh_rental_view) all had one. This adds the list half; the
   toggle control itself reuses .wi-view-toggle so it is visually
   identical to those three pages.

   Grid mode is untouched (it stays the default), and every rule
   here is scoped to >=1024px: on mobile .clients-cards is already
   a single column, so list and grid are the same thing and the
   card internals must not be disturbed.
   ============================================================ */

@media (min-width: 1024px) {

  body .clients-cards.list-view {
    grid-template-columns: 1fr;
    gap: 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  /* One row per client. Explicit column placement below, because the two card
     variants carry different children: --compact has avatar/info/actions, while
     --collect nests avatar/info/due inside .client-card-top. */
  body .clients-cards.list-view .client-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 132px auto;
    align-items: center;
    gap: var(--space-md);
    padding: 8px 14px;
    margin: 0;
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
  }
  body .clients-cards.list-view .client-card:last-child { border-bottom: none; }
  body .clients-cards.list-view .client-card:hover {
    background: var(--primary-50);
    transform: none;
    box-shadow: none;
  }

  /* Collection cards wrap avatar/info/due in .client-card-top — promote them so
     both variants land on the same four columns. */
  body .clients-cards.list-view .client-card--collect > .client-card-top { display: contents; }

  body .clients-cards.list-view .client-card-avatar { grid-column: 1; }
  body .clients-cards.list-view .client-card-info    { grid-column: 2; min-width: 0; }
  body .clients-cards.list-view .client-card-due     { grid-column: 3; text-align: right; }
  body .clients-cards.list-view .client-card-actions { grid-column: 4; margin: 0; }

  body .clients-cards.list-view .client-card-name,
  body .clients-cards.list-view .client-card-phone {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body .clients-cards.list-view .client-card-name  { font-size: 0.88rem; }
  body .clients-cards.list-view .client-card-phone { font-size: 0.75rem; }

  body .clients-cards.list-view .client-card-due .due-amt {
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
  }
  body .clients-cards.list-view .client-card-due .due-lbl { font-size: 0.65rem; }

  /* The paid-progress bar is the tallest block on a collection card and its
     numbers already appear as the due amount. Dropping it is what makes a row
     a row — grid mode keeps it. */
  body .clients-cards.list-view .client-card-progress { display: none; }

  /* Actions collapse to a tight inline group; labels would blow the row height. */
  body .clients-cards.list-view .client-card-actions {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
  }
  body .clients-cards.list-view .client-card-actions .client-quick-action {
    min-height: 34px;
    padding: 0 10px;
    font-size: 0.76rem;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .clients-cards.list-view .client-card { transition: none; }
}

/* ============================================================
   Clients header — search + controls on one row
   The "My Clients" heading was removed (the app header already
   says "Clients", and its count is repeated by the stats strip),
   so the search bar moves up onto the control row.
   ============================================================ */

body .clients-header.clients-header--inline {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* Search takes the room, controls keep their natural size. */
body .clients-header--inline .clients-search {
  flex: 1 1 260px;
  min-width: 0;
  margin: 0;
}

body .clients-header--inline .clients-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

/* On a 375px screen the search plus four controls cannot share a line.
   flex-wrap drops the controls to their own row and they stay right-aligned,
   which keeps Add where the thumb already expects it. */
@media (max-width: 560px) {
  body .clients-header--inline .clients-search { flex: 1 1 100%; }
  body .clients-header--inline .clients-header-actions { margin-left: auto; }
}

/* ============================================================
   Client hover-peek drawer
   Mouse-only, >=1024px. Everything is inside that query so a
   touch device can never surface it — there is no hover there
   and it would cover the list it exists to keep visible.
   ============================================================ */

/* Inert by DEFAULT. Every other rule for the drawer lives inside the media
   query below, so without this the element — which JS appends to <body> —
   renders as an unstyled block at the foot of the page whenever the query
   stops matching (narrow window, window resized after load, touch device).
   Seen in the wild 2026-08-18. display:none must sit OUTSIDE the query. */
body .client-peek { display: none; }

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {

  body .client-peek {
    display: block;
    position: fixed;
    top: 50%;
    right: 18px;
    transform: translate(12px, -50%);
    width: 340px;
    max-height: 78vh;
    overflow-y: auto;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 34px rgba(13, 25, 38, 0.14);
    padding: var(--space-lg);
    z-index: 900;                 /* under modals (1000+), over the list */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
  }
  body .client-peek.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(0, -50%);
  }

  body .client-peek .peek-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--foreground);
    line-height: 1.25;
  }
  body .client-peek .peek-phone {
    font-size: 0.78rem;
    color: var(--muted-foreground, var(--text-secondary));
    margin-top: 2px;
  }

  body .client-peek .peek-due {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
    margin: var(--space-md) 0;
    padding: 8px 12px;
    border-radius: var(--radius-md);
  }
  body .client-peek .peek-due.owed {
    background: hsla(0, 72%, 51%, 0.06);
    box-shadow: inset 3px 0 0 var(--danger, hsl(0, 72%, 51%));
  }
  body .client-peek .peek-due.clear {
    background: var(--success-light, hsla(142, 70%, 45%, 0.08));
    box-shadow: inset 3px 0 0 var(--success);
  }
  body .client-peek .peek-due-amt {
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  body .client-peek .peek-due.owed  .peek-due-amt { color: var(--danger); }
  body .client-peek .peek-due.clear .peek-due-amt { color: var(--success); }
  body .client-peek .peek-due-lbl {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted-foreground, var(--text-secondary));
  }

  body .client-peek .peek-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: 5px 0;
    border-bottom: 1px dashed var(--border);
    font-size: 0.79rem;
  }
  body .client-peek .peek-row:last-child { border-bottom: none; }
  body .client-peek .peek-k { color: var(--muted-foreground, var(--text-secondary)); flex-shrink: 0; }
  body .client-peek .peek-v { font-weight: 600; text-align: right; }
  body .client-peek .peek-row.overdue .peek-v { color: var(--danger); }
  body .client-peek .peek-empty {
    font-size: 0.78rem;
    color: var(--text-muted, var(--muted-foreground));
    padding: 4px 0;
  }

  /* Skeletons while client_profile is in flight — the drawer paints instantly
     from list data, so only this block is ever pending. */
  body .client-peek .peek-skel {
    height: 13px;
    border-radius: 4px;
    margin: 8px 0;
    background: linear-gradient(90deg, var(--gray-100, #eef2f5) 25%, var(--gray-50, #f7fafc) 50%, var(--gray-100, #eef2f5) 75%);
    background-size: 200% 100%;
    animation: peekShimmer 1.1s linear infinite;
  }
  @keyframes peekShimmer { to { background-position: -200% 0; } }

  body .client-peek .peek-actions {
    display: flex;
    gap: 6px;
    margin-top: var(--space-md);
    flex-wrap: wrap;
  }
  body .client-peek .peek-actions .btn { flex: 1 1 auto; min-height: 36px; font-size: 0.78rem; }
  body .client-peek .peek-actions .peek-collect { flex: 1 1 100%; }

  body .client-peek .peek-open {
    display: block;
    width: 100%;
    margin-top: var(--space-md);
    padding: 7px 0;
    border: none;
    background: none;
    color: var(--primary);
    font-family: inherit;
    font-size: 0.79rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
  }
  body .client-peek .peek-open:hover { text-decoration: underline; }
}

@media (prefers-reduced-motion: reduce) {
  body .client-peek { transition: none; }
  body .client-peek .peek-skel { animation: none; }
}

/* ─── Desktop grid uniformity (≥1024px) ─────────────────────────────────
   Two card shapes share this grid: .client-card--compact (no dues: info +
   icon actions) and .client-card--collect (dues: top + progress + labelled
   actions). Grid items stretch to the tallest card in the row, so the
   shorter compact cards left their content floating and their buttons
   landing at different heights across a row.

   Two fixes:
   1. margin-bottom — the base .client-card carries 12px, which stacked on
      top of the grid's own 12px gap. Vertical gutters were double the
      horizontal ones, which is most of why the grid read as ragged.
   2. flex column + margin-top:auto on the actions — pins the button row to
      the bottom of every card, so they line up regardless of how much
      content sits above them.

   Scoped away from .list-view, which makes .client-card itself a grid. */
@media (min-width: 1024px) {
  body .clients-cards:not(.list-view) .client-card {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
  }

  body .clients-cards:not(.list-view) .client-card-actions {
    margin-top: auto;
    margin-bottom: 0;
  }

  /* 3. ...but fix (2) has a side effect on the compact card. That card was
     authored as a single ROW for the list view — avatar | info | actions,
     ~72px tall — and it centres itself with `align-items: center`, meaning
     VERTICALLY within that row. Turning the card into a flex COLUMN silently
     re-aimed that at the cross axis, so in the grid the avatar, the name, the
     phone and the buttons each took their own line, centred down the middle
     of the cell. Beside the collect cards, which stayed left-aligned, the
     same grid showed two unrelated-looking components.

     The compact card goes back to a row here and wraps its action strip onto
     a second line — the same shape the collect card already has (top row,
     then actions). `align-content: space-between` preserves fix (2): first
     line at the top, buttons at the bottom, so action rows still line up
     across a row of unequal cards. margin-top is reset to 0 because `auto`
     does not pin a LINE in a wrapping container; align-content is what does. */
  body .clients-cards:not(.list-view) .client-card--compact {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-content: space-between;
    row-gap: 12px;
  }

  body .clients-cards:not(.list-view) .client-card--compact .client-card-info {
    flex: 1 1 0;
    min-width: 0;
  }

  body .clients-cards:not(.list-view) .client-card--compact .client-card-actions {
    flex: 1 0 100%;
    margin-top: 0;
  }
}

/* ─── Mobile declutter (≤560px) ─────────────────────────────────────────
   Four rows of chrome stacked before the first client: search, controls,
   filters + pagination, stats. Two of those rows were wasting themselves.

   1. The top pagination sits on the SAME flex row as the filter pills and
      takes ~140px of a 375px screen, so only 'All' and 'Dues Pending' were
      reachable — the other three pills were pushed out of view. It is a
      duplicate: clients.js renders the identical pager into #clientPagination
      at the bottom of the list, so hiding it here costs nothing and hands the
      whole row back to the filters.

   2. The controls row is right-aligned via margin-left:auto, leaving a band
      of dead space on the left. Grouping the view toggle and import at the
      left while Add stays right fills the row edge to edge. */
@media (max-width: 560px) {
  body #clientPaginationTop {
    display: none;
  }

  body .clients-header--inline .clients-header-actions {
    width: 100%;
    margin-left: 0;
  }

  /* Pushes Add to the right while the toggle and import stay grouped left. */
  body .clients-header--inline .clients-header-actions #importClientsBtn {
    margin-right: auto;
  }
}

/* ============================================================
   Inquiries on the header row
   It is a separate view, not a filter on the client list, and as
   the fifth chip it pushed that strip into horizontal scrolling
   at 375px. On the header row it fills the space Add leaves when
   it turns into the + FAB under 768px.
   ============================================================ */

body .clients-header-actions .clients-inq-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  line-height: 1;
}

body .clients-header-actions .clients-inq-btn .material-symbols-rounded {
  font-size: 1.1rem;
}

/* The badge sits on the pill, so it must not inherit the pill's own
   colour when the pill goes active. */
body .clients-header-actions .clients-inq-btn .filter-badge {
  margin-left: 2px;
}

@media (max-width: 560px) {
  /* #importClientsBtn carries margin-right:auto, so everything after it is
     pushed right: toggle and import stay grouped left, Inquiries lands at the
     right edge where Add used to be. */
  body .clients-header--inline .clients-header-actions .clients-inq-btn {
    margin-left: 0;
  }
}

/* Below ~360px the label is what gives way, not the tap target. */
@media (max-width: 359px) {
  body .clients-header-actions .clients-inq-btn .clients-inq-btn-label {
    display: none;
  }
  body .clients-header-actions .clients-inq-btn {
    padding: 8px 12px;
  }
}

/* ============================================================
   Clients list — search clarity + reclaimed height (2026-10-22)

   Measured on a 375px screen, with a search running:
     • four stacked rows of chrome (search, controls, filter
       chips, overview cards) before the first client;
     • the list/grid toggle in row two cannot change anything —
       every list-view rule in this file is inside the
       min-width:1024px query at the top, and the desktop table
       needs 1120px — so below 1024px it is a control that does
       nothing;
     • the WhatsApp support floater sits at right:16px, which is
       exactly the lane each row's own WhatsApp button occupies.
   ============================================================ */

/* ─── Contextual result line ─────────────────────────────────
   Replaces the overview cards while a search is running. One
   13px line that names its own scope, in place of a ~62px card
   printing a bare number next to a chip printing a different
   one. */
body .clients-result-line {
  margin: 0 16px 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--text-secondary);
}
body .clients-result-line[hidden] { display: none; }
body .clients-result-line .rl-q {
  color: var(--primary);
  font-weight: 700;
}

/* ─── Matched term ───────────────────────────────────────────
   The highlight must not change one pixel of the name's layout:
   it lands INSIDE a word, so anything that takes space pushes
   the rest of the word sideways and "Rajan" reads as "Raja n" —
   a typo in a client's name on a 375px row. So the wash spreads
   through box-shadow, not padding, and the weight is left alone
   (bumping it synthesises a bolder face on any device missing
   that weight, which widens the glyphs by exactly the amount
   this rule is avoiding).
   `color: inherit` keeps the name's own colour, including the
   red a collection card uses. */
body .clients-cards mark.cl-hit {
  background: color-mix(in srgb, var(--warning, #f59e0b) 30%, transparent);
  color: inherit;
  font-weight: inherit;
  border-radius: 2px;
  padding: 0;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--warning, #f59e0b) 30%, transparent);
}

/* ─── Dead control on phones ─────────────────────────────────
   See the header note. Desktop keeps it. */
@media (max-width: 1023px) {
  body .clients-header--inline .wi-view-toggle { display: none; }
}

/* ─── Height above the fold ──────────────────────────────────
   16px of top padding above a search field that already carries
   10px of its own, on the one screen where rows per screen is
   the whole point. The field keeps its 16px font (anything
   smaller makes iOS zoom the page on focus) and the row still
   clears 44px, so nothing about the tap target changes. */
@media (max-width: 768px) {
  body .clients-page .clients-header.clients-header--inline {
    padding-top: 8px;
    padding-bottom: 6px;
  }
}

/* ─── Floater clearance ──────────────────────────────────────
   The green support circle floats over the right edge of the
   rows, one thumb-width from each row's OWN green WhatsApp
   button. Pressing the wrong one opens SahiHisab support in
   place of the client's chat. It is also redundant here: every
   row already carries the client's WhatsApp.
   Scoped to .clients-cards, which only the LIST renders — the
   client detail page and every other page keep the floater. */
body:has(.clients-cards) .sh-wa-float { display: none; }

/* ===== css/life.css ===== */
/* =====================================================
   SahiHisab — Life System
   "The Photographer's Living Studio"

   Adds choreographed entrance animations, ambient life,
   and micro-interactions across ALL pages.

   Rules:
   - body .class specificity (no !important)
   - Prefixed keyframes: sh-life-*
   - prefers-reduced-motion compliant
   - Mobile-first 375px
   - No conflicts with dashboard-redesign.css
   ===================================================== */


/* ═══════════════════════════════════════════════════════
   0. ANIMATION CUSTOM PROPERTIES
   ═══════════════════════════════════════════════════════ */

:root {
  --sh-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --sh-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --sh-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --sh-dur-fast: 200ms;
  --sh-dur-med: 350ms;
  --sh-dur-slow: 500ms;
  --sh-dur-entrance: 450ms;
  --sh-stagger: 50ms;
}


/* ═══════════════════════════════════════════════════════
   1. KEYFRAMES — ENTRANCE
   ═══════════════════════════════════════════════════════ */

@keyframes sh-life-reveal {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes sh-life-pop {
  from { opacity: 0; transform: scale(0.85); }
  60%  { opacity: 1; transform: scale(1.04); }
  to   { transform: scale(1); }
}

@keyframes sh-life-slide-right {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes sh-life-slide-left {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes sh-life-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes sh-life-grow-x {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes sh-life-draw-down {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}


/* ═══════════════════════════════════════════════════════
   2. KEYFRAMES — CONTINUOUS / AMBIENT
   ═══════════════════════════════════════════════════════ */

@keyframes sh-life-breathe {
  0%, 100% { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
  50%      { box-shadow: 0 4px 16px rgba(0,0,0,0.10); }
}

@keyframes sh-life-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

@keyframes sh-life-pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.35); }
  70%  { box-shadow: 0 0 0 8px rgba(14, 165, 233, 0); }
  100% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0); }
}

@keyframes sh-life-attention {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15); }
}

@keyframes sh-life-success-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15); }
}

@keyframes sh-life-shimmer {
  from { background-position: -200% center; }
  to   { background-position: 200% center; }
}

@keyframes sh-life-icon-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-1.5px) rotate(-2deg); }
  75%      { transform: translateY(1px) rotate(1deg); }
}

@keyframes sh-life-dot-pop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(1); }
}


/* ═══════════════════════════════════════════════════════
   3. GLOBAL — CARDS & CONTAINERS
   ═══════════════════════════════════════════════════════ */

/* All cards get entrance reveal */
body .card,
body .card-glass {
  animation: sh-life-reveal var(--sh-dur-entrance) var(--sh-ease-out) both;
}

/* Stat cards — pop entrance + breathe */
body .stat-card {
  animation: sh-life-pop var(--sh-dur-entrance) var(--sh-ease-spring) both;
}

body .stats-grid .stat-card:nth-child(1) { animation-delay: 0ms; }
body .stats-grid .stat-card:nth-child(2) { animation-delay: 60ms; }
body .stats-grid .stat-card:nth-child(3) { animation-delay: 120ms; }
body .stats-grid .stat-card:nth-child(4) { animation-delay: 180ms; }
body .stats-grid .stat-card:nth-child(5) { animation-delay: 240ms; }
body .stats-grid .stat-card:nth-child(6) { animation-delay: 300ms; }

/* Stat card icon — gentle bob */
body .stat-icon {
  animation: sh-life-icon-bob 3s ease-in-out infinite;
}
body .stat-card:nth-child(2) .stat-icon { animation-delay: 0.5s; }
body .stat-card:nth-child(3) .stat-icon { animation-delay: 1s; }
body .stat-card:nth-child(4) .stat-icon { animation-delay: 1.5s; }

/* Stat card hover */
body .stat-card {
  transition: transform var(--sh-dur-fast) var(--sh-ease-out),
              box-shadow var(--sh-dur-fast) var(--sh-ease-out);
}
body .stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
body .stat-card:active {
  transform: scale(0.97);
}


/* ═══════════════════════════════════════════════════════
   4. GLOBAL — BUTTONS & INTERACTIVE
   ═══════════════════════════════════════════════════════ */

/* All buttons — lift on hover, press on tap */
body .btn {
  transition: transform var(--sh-dur-fast) var(--sh-ease-out),
              box-shadow var(--sh-dur-fast) var(--sh-ease-out),
              background-color var(--sh-dur-fast) ease;
}
body .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}
body .btn:active {
  transform: scale(0.95) translateY(0);
  box-shadow: none;
  transition-duration: 80ms;
}

/* Primary button — subtle glow on hover */
body .btn-primary:hover {
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.25);
}
body .btn-success:hover {
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25);
}
body .btn-danger:hover {
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.25);
}

/* Chips — hover bounce */
body .chip {
  transition: transform var(--sh-dur-fast) var(--sh-ease-spring),
              box-shadow var(--sh-dur-fast) ease;
}
body .chip:hover {
  transform: translateY(-1px) scale(1.03);
}

/* Filter pills — bounce active */
body .filter-pill {
  transition: transform var(--sh-dur-fast) var(--sh-ease-spring),
              background-color var(--sh-dur-fast) ease,
              color var(--sh-dur-fast) ease,
              box-shadow var(--sh-dur-fast) ease;
}
body .filter-pill:active {
  transform: scale(0.92);
}
body .filter-pill.active {
  animation: sh-life-pop 300ms var(--sh-ease-spring) both;
}


/* ═══════════════════════════════════════════════════════
   5. GLOBAL — FORM INPUTS
   ═══════════════════════════════════════════════════════ */

body .form-control,
body .form-select {
  transition: border-color var(--sh-dur-fast) ease,
              box-shadow var(--sh-dur-fast) ease,
              transform var(--sh-dur-fast) ease;
}
body .form-control:focus,
body .form-select:focus {
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
  /* No translateY lift here: a transform creates a stacking context, which
     paints the opaque input ABOVE its overlaid search/₹ icons — the icon
     "disappears" on focus in every search bar. Ring alone is enough. */
}


/* ═══════════════════════════════════════════════════════
   6. GLOBAL — EMPTY STATES
   ═══════════════════════════════════════════════════════ */

body .empty-state {
  animation: sh-life-reveal 600ms var(--sh-ease-out) both;
}

/* Icon inside empty state floats gently */
body .empty-state .material-symbols-rounded,
body .empty-state span[class*="material"] {
  animation: sh-life-float 3s ease-in-out infinite;
}


/* ═══════════════════════════════════════════════════════
   7. MODALS & SHEETS — ENTRANCE
   ═══════════════════════════════════════════════════════ */

body .modal-overlay {
  animation: sh-life-fade 200ms ease both;
}

body .modal-panel {
  animation: sh-life-reveal 350ms var(--sh-ease-spring) both;
}

body .bottom-sheet-overlay {
  animation: sh-life-fade 200ms ease both;
}

body .bottom-sheet {
  animation: sh-life-reveal 350ms var(--sh-ease-spring) both;
}

/* Quick create — staggered action buttons */
body .quick-create-backdrop {
  animation: sh-life-fade 200ms ease both;
}

body .quick-create-sheet {
  animation: sh-life-reveal 300ms var(--sh-ease-spring) both;
}

body .quick-create-action {
  animation: sh-life-pop 300ms var(--sh-ease-spring) both;
}
body .quick-create-action:nth-child(1) { animation-delay: 30ms; }
body .quick-create-action:nth-child(2) { animation-delay: 60ms; }
body .quick-create-action:nth-child(3) { animation-delay: 90ms; }
body .quick-create-action:nth-child(4) { animation-delay: 120ms; }
body .quick-create-action:nth-child(5) { animation-delay: 150ms; }
body .quick-create-action:nth-child(6) { animation-delay: 180ms; }

body .quick-create-action {
  transition: transform var(--sh-dur-fast) var(--sh-ease-spring),
              box-shadow var(--sh-dur-fast) ease;
}
body .quick-create-action:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 6px 16px rgba(0,0,0,0.10);
}
body .quick-create-action:active {
  transform: scale(0.92);
}


/* ═══════════════════════════════════════════════════════
   8. NOTIFICATIONS — SLIDE & GLOW
   ═══════════════════════════════════════════════════════ */

body .notif-sheet {
  animation: sh-life-slide-left 300ms var(--sh-ease-out) both;
}

body .notif-card {
  animation: sh-life-reveal var(--sh-dur-entrance) var(--sh-ease-out) both;
  transition: transform var(--sh-dur-fast) ease, background var(--sh-dur-fast) ease;
}
body .notif-card:nth-child(1) { animation-delay: 50ms; }
body .notif-card:nth-child(2) { animation-delay: 100ms; }
body .notif-card:nth-child(3) { animation-delay: 150ms; }
body .notif-card:nth-child(4) { animation-delay: 200ms; }
body .notif-card:nth-child(5) { animation-delay: 250ms; }

body .notif-card:hover {
  transform: translateX(3px);
}

/* Unread notification — attention pulse */
body .notif-card.unread {
  animation: sh-life-reveal var(--sh-dur-entrance) var(--sh-ease-out) both,
             sh-life-pulse-ring 2s ease-in-out infinite 1s;
}

/* Notification badge — bounce */
body .notif-badge {
  animation: sh-life-pop 400ms var(--sh-ease-spring) both;
}


/* ═══════════════════════════════════════════════════════
   9. GLOBAL SEARCH — CASCADE RESULTS
   ═══════════════════════════════════════════════════════ */

body .global-search-overlay {
  animation: sh-life-fade 150ms ease both;
}

body .global-search-container {
  animation: sh-life-reveal 250ms var(--sh-ease-out) both;
}

body .search-result-row {
  animation: sh-life-reveal 300ms var(--sh-ease-out) both;
  transition: transform var(--sh-dur-fast) ease, background var(--sh-dur-fast) ease;
}
body .search-result-row:nth-child(1) { animation-delay: 30ms; }
body .search-result-row:nth-child(2) { animation-delay: 60ms; }
body .search-result-row:nth-child(3) { animation-delay: 90ms; }
body .search-result-row:nth-child(4) { animation-delay: 120ms; }
body .search-result-row:nth-child(5) { animation-delay: 150ms; }
body .search-result-row:nth-child(6) { animation-delay: 180ms; }
body .search-result-row:nth-child(7) { animation-delay: 210ms; }
body .search-result-row:nth-child(8) { animation-delay: 240ms; }

body .search-result-row:hover {
  transform: translateX(4px);
}

body .search-section-label {
  animation: sh-life-slide-right 300ms var(--sh-ease-out) both;
}


/* ═══════════════════════════════════════════════════════
   10. SIDEBAR — NAV ITEMS
   ═══════════════════════════════════════════════════════ */

body .nav-item {
  transition: transform var(--sh-dur-fast) var(--sh-ease-out),
              background var(--sh-dur-fast) ease,
              padding-left var(--sh-dur-fast) ease;
  position: relative;
}
body .nav-item:hover {
  transform: translateX(3px);
}
body .nav-item:active {
  transform: scale(0.97);
}

/* Active nav item — left accent slides in */
body .nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--primary, #0ea5e9);
  animation: sh-life-draw-down 300ms var(--sh-ease-spring) both;
  transform-origin: top;
}

/* Section labels slide in */
body .nav-section-label {
  animation: sh-life-fade 400ms ease both;
}


/* ═══════════════════════════════════════════════════════
   11. PAGE — CALENDAR
   ═══════════════════════════════════════════════════════ */

/* Calendar grid days — cascade entrance */
body .calendar-day {
  animation: sh-life-fade 300ms var(--sh-ease-out) both;
  transition: transform var(--sh-dur-fast) ease,
              background var(--sh-dur-fast) ease,
              box-shadow var(--sh-dur-fast) ease;
}

/* Stagger rows of 7 */
body .calendar-day:nth-child(7n+1) { animation-delay: 30ms; }
body .calendar-day:nth-child(7n+2) { animation-delay: 50ms; }
body .calendar-day:nth-child(7n+3) { animation-delay: 70ms; }
body .calendar-day:nth-child(7n+4) { animation-delay: 90ms; }
body .calendar-day:nth-child(7n+5) { animation-delay: 110ms; }
body .calendar-day:nth-child(7n+6) { animation-delay: 130ms; }
body .calendar-day:nth-child(7n+7) { animation-delay: 150ms; }

/* Additional row delay — multiply by row index */
body .calendar-day:nth-child(n+8)  { animation-delay: calc(var(--sh-stagger) * 2 + 30ms); }
body .calendar-day:nth-child(n+15) { animation-delay: calc(var(--sh-stagger) * 4 + 30ms); }
body .calendar-day:nth-child(n+22) { animation-delay: calc(var(--sh-stagger) * 6 + 30ms); }
body .calendar-day:nth-child(n+29) { animation-delay: calc(var(--sh-stagger) * 8 + 30ms); }
body .calendar-day:nth-child(n+36) { animation-delay: calc(var(--sh-stagger) * 10 + 30ms); }

/* Calendar day hover — lift */
body .calendar-day:hover {
  transform: scale(1.06);
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  z-index: 2;
}
body .calendar-day:active {
  transform: scale(0.95);
}

/* Today — expanding ring pulse */
body .calendar-day.today {
  animation: sh-life-fade 300ms var(--sh-ease-out) both,
             sh-life-pulse-ring 2.5s ease-in-out infinite 1s;
}

/* Booking dots — pop in */
body .calendar-dot {
  animation: sh-life-dot-pop 300ms var(--sh-ease-spring) both;
}
body .calendar-dot:nth-child(1) { animation-delay: 200ms; }
body .calendar-dot:nth-child(2) { animation-delay: 280ms; }
body .calendar-dot:nth-child(3) { animation-delay: 360ms; }

/* Day header labels */
body .calendar-day-header {
  animation: sh-life-fade 250ms ease both;
}


/* ═══════════════════════════════════════════════════════
   12. PAGE — CLIENTS
   ═══════════════════════════════════════════════════════ */

/* Client page header */
body .clients-header {
  animation: sh-life-reveal 400ms var(--sh-ease-out) both;
}

body .clients-search {
  animation: sh-life-reveal 400ms var(--sh-ease-out) 100ms both;
}

body .clients-filters {
  animation: sh-life-reveal 350ms var(--sh-ease-out) 150ms both;
}

/* Client cards — waterfall cascade */
body .client-card {
  animation: sh-life-reveal var(--sh-dur-entrance) var(--sh-ease-out) both;
  transition: transform var(--sh-dur-fast) var(--sh-ease-out),
              box-shadow var(--sh-dur-fast) ease;
}

body .clients-cards .client-card:nth-child(1)  { animation-delay: 50ms; }
body .clients-cards .client-card:nth-child(2)  { animation-delay: 100ms; }
body .clients-cards .client-card:nth-child(3)  { animation-delay: 150ms; }
body .clients-cards .client-card:nth-child(4)  { animation-delay: 200ms; }
body .clients-cards .client-card:nth-child(5)  { animation-delay: 250ms; }
body .clients-cards .client-card:nth-child(6)  { animation-delay: 300ms; }
body .clients-cards .client-card:nth-child(7)  { animation-delay: 350ms; }
body .clients-cards .client-card:nth-child(8)  { animation-delay: 400ms; }
body .clients-cards .client-card:nth-child(9)  { animation-delay: 450ms; }
body .clients-cards .client-card:nth-child(10) { animation-delay: 500ms; }

/* Client card hover — lift + avatar scale */
body .client-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
body .client-card:active {
  transform: scale(0.98);
}

body .client-card:hover .client-card-avatar,
body .client-card:hover .client-avatar {
  transform: scale(1.08);
  transition: transform var(--sh-dur-fast) var(--sh-ease-spring);
}

/* Due amounts — red attention pulse */
body .client-balance .amount.due {
  animation: sh-life-attention 2.5s ease-in-out infinite;
  border-radius: 6px;
}

/* Advance/clear — green success glow */
body .client-balance .amount.advance,
body .client-balance .amount.clear {
  animation: sh-life-success-glow 3s ease-in-out infinite;
  border-radius: 6px;
}

/* Total bar at bottom */
body .clients-total-bar {
  animation: sh-life-reveal 400ms var(--sh-ease-out) 300ms both;
}


/* ═══════════════════════════════════════════════════════
   13. PAGE — ORDERS (BOOKINGS)
   ═══════════════════════════════════════════════════════ */

/* Order cards — staggered cascade */
body .order-card {
  animation: sh-life-reveal var(--sh-dur-entrance) var(--sh-ease-out) both;
  transition: transform var(--sh-dur-fast) var(--sh-ease-out),
              box-shadow var(--sh-dur-fast) ease;
}

body .order-card:nth-child(1)  { animation-delay: 40ms; }
body .order-card:nth-child(2)  { animation-delay: 80ms; }
body .order-card:nth-child(3)  { animation-delay: 120ms; }
body .order-card:nth-child(4)  { animation-delay: 160ms; }
body .order-card:nth-child(5)  { animation-delay: 200ms; }
body .order-card:nth-child(6)  { animation-delay: 240ms; }
body .order-card:nth-child(7)  { animation-delay: 280ms; }
body .order-card:nth-child(8)  { animation-delay: 320ms; }
body .order-card:nth-child(9)  { animation-delay: 360ms; }
body .order-card:nth-child(10) { animation-delay: 400ms; }

/* Order card hover */
body .order-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
body .order-card:active {
  transform: scale(0.98);
}

/* Status left border — shimmer */
body .order-card[style*="border-left"] {
  position: relative;
}


/* ═══════════════════════════════════════════════════════
   14. PAGE — QUOTATION WIZARD
   ═══════════════════════════════════════════════════════ */

/* Wizard wrap entrance */
body .wizard-wrap {
  animation: sh-life-reveal 400ms var(--sh-ease-out) both;
}

/* Stepper — steps slide in from left */
body .step-item {
  animation: sh-life-slide-right 350ms var(--sh-ease-out) both;
}
body .step-item:nth-child(1) { animation-delay: 0ms; }
body .step-item:nth-child(2) { animation-delay: 50ms; }
body .step-item:nth-child(3) { animation-delay: 100ms; }
body .step-item:nth-child(4) { animation-delay: 150ms; }
body .step-item:nth-child(5) { animation-delay: 200ms; }
body .step-item:nth-child(6) { animation-delay: 250ms; }
body .step-item:nth-child(7) { animation-delay: 300ms; }

/* Step connector — draws from left to right; stretch so the steps spread evenly
   across the full width instead of bunching to the left ("saturated/magnetic"). */
body .step-connector {
  transform-origin: left center;
  animation: sh-life-grow-x 500ms var(--sh-ease-out) 200ms both;
  flex: 1 1 auto;
  width: auto;
  min-width: 8px;
}
/* Keep the number bubbles fixed-size while the connectors do the stretching */
body .wizard-stepper .step-item { flex: 0 0 auto; }

/* Step number — pop when active */
body .step-item.active .step-number,
body .step-item.completed .step-number {
  animation: sh-life-pop 300ms var(--sh-ease-spring) both;
}

/* Package grid cards — pop in */
body .package-card {
  animation: sh-life-pop 350ms var(--sh-ease-spring) both;
  transition: transform var(--sh-dur-fast) var(--sh-ease-spring),
              box-shadow var(--sh-dur-fast) ease,
              border-color var(--sh-dur-fast) ease;
}
body .package-grid .package-card:nth-child(1) { animation-delay: 50ms; }
body .package-grid .package-card:nth-child(2) { animation-delay: 120ms; }
body .package-grid .package-card:nth-child(3) { animation-delay: 190ms; }
body .package-grid .package-card:nth-child(4) { animation-delay: 260ms; }

body .package-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
}
body .package-card:active {
  transform: scale(0.96);
}

/* Selected package — celebration pulse */
body .package-card.selected {
  animation: sh-life-pop 300ms var(--sh-ease-spring) both,
             sh-life-success-glow 2s ease-in-out infinite 0.5s;
}

/* Addon cards — grid pop */
body .addon-card {
  animation: sh-life-pop 300ms var(--sh-ease-spring) both;
  transition: transform var(--sh-dur-fast) var(--sh-ease-spring),
              box-shadow var(--sh-dur-fast) ease;
}
body .addon-grid .addon-card:nth-child(1) { animation-delay: 30ms; }
body .addon-grid .addon-card:nth-child(2) { animation-delay: 70ms; }
body .addon-grid .addon-card:nth-child(3) { animation-delay: 110ms; }
body .addon-grid .addon-card:nth-child(4) { animation-delay: 150ms; }
body .addon-grid .addon-card:nth-child(5) { animation-delay: 190ms; }
body .addon-grid .addon-card:nth-child(6) { animation-delay: 230ms; }

body .addon-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

/* Addon icon — bob on hover */
body .addon-card:hover .addon-icon {
  animation: sh-life-icon-bob 0.6s var(--sh-ease-spring);
}

/* Total bar — slides up from bottom */
body .total-bar {
  animation: sh-life-reveal 400ms var(--sh-ease-spring) 300ms both;
}

/* Total amount — pulse when changes */
body .total-bar-amount {
  transition: transform var(--sh-dur-fast) var(--sh-ease-spring);
}

/* Payment split timeline */
body .split-row {
  animation: sh-life-slide-right 350ms var(--sh-ease-out) both;
}
body .split-row:nth-child(1) { animation-delay: 50ms; }
body .split-row:nth-child(2) { animation-delay: 120ms; }
body .split-row:nth-child(3) { animation-delay: 190ms; }
body .split-row:nth-child(4) { animation-delay: 260ms; }

body .split-dot {
  animation: sh-life-dot-pop 300ms var(--sh-ease-spring) both;
}

/* Wizard body content — reveal on step change */
body .wizard-body {
  animation: sh-life-fade 250ms ease both;
}

/* Wizard section titles */
body .wizard-section-title {
  animation: sh-life-slide-right 350ms var(--sh-ease-out) both;
}


/* ═══════════════════════════════════════════════════════
   15. PAGE — FINANCE
   (Finance tab-specific, complementing finance.css)
   ═══════════════════════════════════════════════════════ */

/* Finance tab content entrance */
body .finance-tab-content {
  animation: sh-life-fade 250ms ease both;
}

/* Summary cards in finance */
body .finance-summary-card,
body [class*="summary"] > .card {
  animation: sh-life-pop 400ms var(--sh-ease-spring) both;
}


/* ═══════════════════════════════════════════════════════
   16. PAGE — RENTALS
   ═══════════════════════════════════════════════════════ */

/* Rental page entrance */
body .rental-page {
  animation: sh-life-fade 300ms ease both;
}

/* Rental rows — waterfall */
body .rental-row {
  animation: sh-life-reveal var(--sh-dur-entrance) var(--sh-ease-out) both;
  transition: transform var(--sh-dur-fast) ease,
              background var(--sh-dur-fast) ease,
              box-shadow var(--sh-dur-fast) ease;
}
body .rental-list .rental-row:nth-child(1)  { animation-delay: 40ms; }
body .rental-list .rental-row:nth-child(2)  { animation-delay: 80ms; }
body .rental-list .rental-row:nth-child(3)  { animation-delay: 120ms; }
body .rental-list .rental-row:nth-child(4)  { animation-delay: 160ms; }
body .rental-list .rental-row:nth-child(5)  { animation-delay: 200ms; }
body .rental-list .rental-row:nth-child(6)  { animation-delay: 240ms; }
body .rental-list .rental-row:nth-child(7)  { animation-delay: 280ms; }
body .rental-list .rental-row:nth-child(8)  { animation-delay: 320ms; }

body .rental-row:hover {
  transform: translateX(4px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

/* Overdue rental — red attention pulse */
body .rental-status.overdue {
  animation: sh-life-attention 2s ease-in-out infinite;
  border-radius: 6px;
  padding: 2px 6px;
}

/* Active rental — gentle breathe */
body .rental-status.active {
  animation: sh-life-success-glow 3s ease-in-out infinite;
  border-radius: 6px;
  padding: 2px 6px;
}


/* ═══════════════════════════════════════════════════════
   17. PAGE — ANALYTICS
   ═══════════════════════════════════════════════════════ */

/* Analytics bar fills — grow from left */
body .analytics-bar-fill {
  transform-origin: left center;
  animation: sh-life-grow-x 800ms var(--sh-ease-out) both;
}

/* Stagger bar fills */
body .analytics-bar:nth-child(1) .analytics-bar-fill { animation-delay: 100ms; }
body .analytics-bar:nth-child(2) .analytics-bar-fill { animation-delay: 200ms; }
body .analytics-bar:nth-child(3) .analytics-bar-fill { animation-delay: 300ms; }
body .analytics-bar:nth-child(4) .analytics-bar-fill { animation-delay: 400ms; }
body .analytics-bar:nth-child(5) .analytics-bar-fill { animation-delay: 500ms; }
body .analytics-bar:nth-child(6) .analytics-bar-fill { animation-delay: 600ms; }
body .analytics-bar:nth-child(7) .analytics-bar-fill { animation-delay: 700ms; }
body .analytics-bar:nth-child(8) .analytics-bar-fill { animation-delay: 800ms; }
body .analytics-bar:nth-child(9) .analytics-bar-fill { animation-delay: 900ms; }
body .analytics-bar:nth-child(10) .analytics-bar-fill { animation-delay: 1000ms; }
body .analytics-bar:nth-child(11) .analytics-bar-fill { animation-delay: 1100ms; }
body .analytics-bar:nth-child(12) .analytics-bar-fill { animation-delay: 1200ms; }

/* Analytics bar hover */
body .analytics-bar {
  transition: transform var(--sh-dur-fast) ease;
}
body .analytics-bar:hover {
  transform: scaleY(1.05);
}


/* ═══════════════════════════════════════════════════════
   18. PAGE — COLLECT PAYMENT (PAISA VASOOL)
   ═══════════════════════════════════════════════════════ */

/* Hero — entrance zoom + glow breathe */
body .cp-hero {
  animation: sh-life-pop 500ms var(--sh-ease-spring) both;
}

body .cp-hero-glow {
  animation: sh-life-breathe 4s ease-in-out infinite;
}

body .cp-hero-icon-wrap {
  animation: sh-life-float 3s ease-in-out infinite 0.5s;
}

/* Search — slide in */
body .cp-search-wrap {
  animation: sh-life-reveal 350ms var(--sh-ease-out) 200ms both;
}

/* Client list — waterfall */
body .cp-client-row {
  animation: sh-life-reveal var(--sh-dur-entrance) var(--sh-ease-out) both;
  transition: transform var(--sh-dur-fast) var(--sh-ease-out),
              background var(--sh-dur-fast) ease;
}
body .cp-client-list .cp-client-row:nth-child(1) { animation-delay: 40ms; }
body .cp-client-list .cp-client-row:nth-child(2) { animation-delay: 80ms; }
body .cp-client-list .cp-client-row:nth-child(3) { animation-delay: 120ms; }
body .cp-client-list .cp-client-row:nth-child(4) { animation-delay: 160ms; }
body .cp-client-list .cp-client-row:nth-child(5) { animation-delay: 200ms; }
body .cp-client-list .cp-client-row:nth-child(6) { animation-delay: 240ms; }
body .cp-client-list .cp-client-row:nth-child(7) { animation-delay: 280ms; }
body .cp-client-list .cp-client-row:nth-child(8) { animation-delay: 320ms; }

body .cp-client-row:hover {
  transform: translateX(4px);
}
body .cp-client-row:active {
  transform: scale(0.98);
}

/* Client avatar — hover scale */
body .cp-client-row:hover .cp-avatar {
  transform: scale(1.1);
  transition: transform var(--sh-dur-fast) var(--sh-ease-spring);
}

/* Profile card — reveal */
body .cp-profile-card {
  animation: sh-life-reveal 400ms var(--sh-ease-out) both;
}

body .cp-profile-avatar {
  animation: sh-life-pop 400ms var(--sh-ease-spring) 100ms both;
}

/* Stats row — stagger */
body .cp-stat-item {
  animation: sh-life-pop 350ms var(--sh-ease-spring) both;
}
body .cp-stats-row .cp-stat-item:nth-child(1) { animation-delay: 50ms; }
body .cp-stats-row .cp-stat-item:nth-child(2) { animation-delay: 120ms; }
body .cp-stats-row .cp-stat-item:nth-child(3) { animation-delay: 190ms; }

/* Due stat — red attention */
body .cp-stat-due .cp-stat-value {
  animation: sh-life-attention 2.5s ease-in-out infinite;
  border-radius: 4px;
  display: inline-block;
}

/* Due cards — cascade */
body .cp-due-card {
  animation: sh-life-reveal 350ms var(--sh-ease-out) both;
  transition: transform var(--sh-dur-fast) ease,
              box-shadow var(--sh-dur-fast) ease;
}
body .cp-dues-list .cp-due-card:nth-child(1) { animation-delay: 30ms; }
body .cp-dues-list .cp-due-card:nth-child(2) { animation-delay: 70ms; }
body .cp-dues-list .cp-due-card:nth-child(3) { animation-delay: 110ms; }
body .cp-dues-list .cp-due-card:nth-child(4) { animation-delay: 150ms; }
body .cp-dues-list .cp-due-card:nth-child(5) { animation-delay: 190ms; }

body .cp-due-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

/* Progress bars — grow animation */
body .cp-due-progress-bar {
  transform-origin: left center;
  animation: sh-life-grow-x 700ms var(--sh-ease-out) 400ms both;
}

/* All clear card — celebration */
body .cp-all-clear-card {
  animation: sh-life-pop 500ms var(--sh-ease-spring) both,
             sh-life-success-glow 2.5s ease-in-out infinite 1s;
}

body .cp-all-clear-card .cp-clear-icon {
  animation: sh-life-float 2.5s ease-in-out infinite;
}

/* Schedule pills — pop stagger */
body .cp-sched-pill {
  animation: sh-life-pop 250ms var(--sh-ease-spring) both;
  transition: transform var(--sh-dur-fast) var(--sh-ease-spring);
}
body .cp-schedule-pills .cp-sched-pill:nth-child(1) { animation-delay: 30ms; }
body .cp-schedule-pills .cp-sched-pill:nth-child(2) { animation-delay: 60ms; }
body .cp-schedule-pills .cp-sched-pill:nth-child(3) { animation-delay: 90ms; }
body .cp-schedule-pills .cp-sched-pill:nth-child(4) { animation-delay: 120ms; }
body .cp-schedule-pills .cp-sched-pill:nth-child(5) { animation-delay: 150ms; }

body .cp-sched-pill:hover {
  transform: scale(1.08);
}

/* Overdue pill — attention */
body .cp-sched-pill.overdue {
  animation: sh-life-pop 250ms var(--sh-ease-spring) both,
             sh-life-attention 2s ease-in-out infinite 0.5s;
}

/* Selected bar — slide up */
body .cp-selected-bar {
  animation: sh-life-reveal 300ms var(--sh-ease-spring) both;
}

/* Daily collection cards */
body .cp-daily-card {
  animation: sh-life-reveal 350ms var(--sh-ease-out) both;
  transition: transform var(--sh-dur-fast) ease;
}
body .cp-daily-card:nth-child(1) { animation-delay: 50ms; }
body .cp-daily-card:nth-child(2) { animation-delay: 100ms; }
body .cp-daily-card:nth-child(3) { animation-delay: 150ms; }

body .cp-daily-card:hover {
  transform: translateY(-2px);
}

body .cp-daily-icon {
  animation: sh-life-icon-bob 3s ease-in-out infinite;
}

/* Collect payment empty states */
body .cp-empty-state {
  animation: sh-life-reveal 500ms var(--sh-ease-out) both;
}

body .cp-empty-illustration {
  animation: sh-life-float 3s ease-in-out infinite;
}


/* ═══════════════════════════════════════════════════════
   19. PAGE — WALK-IN ORDERS (SEEDHI BOOKING)
   Inherits wizard animations from section 14
   ═══════════════════════════════════════════════════════ */

/* Walk-in order list items */
body .walk-in-order-card,
body .walk-in-card {
  animation: sh-life-reveal var(--sh-dur-entrance) var(--sh-ease-out) both;
  transition: transform var(--sh-dur-fast) ease,
              box-shadow var(--sh-dur-fast) ease;
}
body .walk-in-order-card:hover,
body .walk-in-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}


/* ═══════════════════════════════════════════════════════
   20. PAGE — PACKAGES
   ═══════════════════════════════════════════════════════ */

/* Package grid — inherits from section 14 quotation */
/* Addon grid — inherits from section 14 quotation */

/* Package tab buttons */
body .packages-tab-bar .btn {
  transition: transform var(--sh-dur-fast) var(--sh-ease-spring),
              background var(--sh-dur-fast) ease,
              box-shadow var(--sh-dur-fast) ease;
}


/* ═══════════════════════════════════════════════════════
   21. ASSISTANTS PAGE
   ═══════════════════════════════════════════════════════ */

/* Assistant cards — cascade */
body .assistant-card {
  animation: sh-life-reveal var(--sh-dur-entrance) var(--sh-ease-out) both;
  transition: transform var(--sh-dur-fast) var(--sh-ease-out),
              box-shadow var(--sh-dur-fast) ease;
}
body .assistant-card:nth-child(1) { animation-delay: 40ms; }
body .assistant-card:nth-child(2) { animation-delay: 90ms; }
body .assistant-card:nth-child(3) { animation-delay: 140ms; }
body .assistant-card:nth-child(4) { animation-delay: 190ms; }
body .assistant-card:nth-child(5) { animation-delay: 240ms; }
body .assistant-card:nth-child(6) { animation-delay: 290ms; }

body .assistant-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
body .assistant-card:active {
  transform: scale(0.97);
}


/* ═══════════════════════════════════════════════════════
   22. SETTINGS PAGE
   ═══════════════════════════════════════════════════════ */

/* Settings tabs — slide entrance */
body .settings-tab {
  animation: sh-life-fade 300ms ease both;
  transition: transform var(--sh-dur-fast) ease, background var(--sh-dur-fast) ease;
}

body .settings-tab:hover {
  transform: translateY(-1px);
}

/* Settings form groups — gentle cascade */
body .settings-section .form-group {
  animation: sh-life-reveal 350ms var(--sh-ease-out) both;
}
body .settings-section .form-group:nth-child(1) { animation-delay: 30ms; }
body .settings-section .form-group:nth-child(2) { animation-delay: 70ms; }
body .settings-section .form-group:nth-child(3) { animation-delay: 110ms; }
body .settings-section .form-group:nth-child(4) { animation-delay: 150ms; }
body .settings-section .form-group:nth-child(5) { animation-delay: 190ms; }

/* Toggle switch — satisfying snap */
body .toggle-track {
  transition: background-color 200ms ease, box-shadow 200ms ease;
}
body .toggle-switch input:checked + .toggle-track {
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}


/* ═══════════════════════════════════════════════════════
   23. TOAST ENHANCEMENT
   ═══════════════════════════════════════════════════════ */

body .toast {
  animation: sh-life-slide-left 350ms var(--sh-ease-spring) both;
}


/* ═══════════════════════════════════════════════════════
   24. SKELETON LOADING — ENHANCED SHIMMER
   ═══════════════════════════════════════════════════════ */

body .skeleton {
  background: linear-gradient(
    90deg,
    var(--gray-50, #f9fafb) 25%,
    rgba(14, 165, 233, 0.04) 50%,
    var(--gray-50, #f9fafb) 75%
  );
  background-size: 200% 100%;
  animation: sh-life-shimmer 1.8s ease-in-out infinite;
}

body .skeleton-card {
  animation: sh-life-reveal 300ms var(--sh-ease-out) both,
             sh-life-shimmer 1.8s ease-in-out infinite;
  background: linear-gradient(
    90deg,
    var(--gray-50, #f9fafb) 25%,
    rgba(14, 165, 233, 0.04) 50%,
    var(--gray-50, #f9fafb) 75%
  );
  background-size: 200% 100%;
}


/* ═══════════════════════════════════════════════════════
   25. BOTTOM NAV — MOBILE TAB BAR
   ═══════════════════════════════════════════════════════ */

body .bottom-nav-item {
  transition: transform var(--sh-dur-fast) var(--sh-ease-spring),
              color var(--sh-dur-fast) ease;
}
body .bottom-nav-item:active {
  transform: scale(0.88);
}

/* Active tab — icon bob */
body .bottom-nav-item.active .material-symbols-rounded {
  animation: sh-life-icon-bob 0.4s var(--sh-ease-spring);
}

/* FAB — continuous breathe */
body .bottom-nav-fab {
  transition: transform var(--sh-dur-fast) var(--sh-ease-spring),
              box-shadow var(--sh-dur-fast) ease;
  animation: sh-life-breathe 3s ease-in-out infinite;
}
body .bottom-nav-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.3);
}
body .bottom-nav-fab:active {
  transform: scale(0.9);
}


/* ═══════════════════════════════════════════════════════
   26. HEADER — APP HEADER
   ═══════════════════════════════════════════════════════ */

body .header-icon-btn {
  transition: transform var(--sh-dur-fast) var(--sh-ease-spring),
              background var(--sh-dur-fast) ease;
}
body .header-icon-btn:hover {
  transform: scale(1.08);
}
body .header-icon-btn:active {
  transform: scale(0.9);
}


/* ═══════════════════════════════════════════════════════
   27. DARK MODE ADJUSTMENTS
   ═══════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
  body .stat-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  }
  body .client-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  }
  body .order-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  }
  body .package-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  }
  body .btn:hover {
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
  }
  body .btn-primary:hover {
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35);
  }
  body .skeleton,
  body .skeleton-card {
    background: linear-gradient(
      90deg,
      rgba(255,255,255,0.03) 25%,
      rgba(255,255,255,0.06) 50%,
      rgba(255,255,255,0.03) 75%
    );
    background-size: 200% 100%;
  }
  body .quick-create-action:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,0.3);
  }
  body .cp-due-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  }
}

/* Also handle manual dark mode toggle via class */
body.dark-mode .stat-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.25); }
body.dark-mode .client-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
body.dark-mode .order-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.25); }
body.dark-mode .package-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
body.dark-mode .btn:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.2); }
body.dark-mode .btn-primary:hover { box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35); }
body.dark-mode .quick-create-action:hover { box-shadow: 0 6px 16px rgba(0,0,0,0.3); }

body.dark-mode .skeleton,
body.dark-mode .skeleton-card {
  background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.03) 75%);
  background-size: 200% 100%;
}


/* ═══════════════════════════════════════════════════════
   28. PREFERS-REDUCED-MOTION — KILL ALL ANIMATIONS
   ═══════════════════════════════════════════════════════ */



/* ═══════════════════════════════════════════════════════
   14. PAGE — DASHBOARD v3 (dsh-*) — entrance choreography
   Scoped to .dsh-anim (set by dashboard.js only on real page
   entry) so period-filter / soft re-renders never replay it.
   ═══════════════════════════════════════════════════════ */

.dsh-anim .dsh-top      { animation: sh-life-reveal 480ms var(--sh-ease-out) both; }
.dsh-anim .dsh-attn-row { animation: sh-life-reveal 420ms var(--sh-ease-out) both; }
.dsh-anim .dsh-attn-row:nth-child(1) { animation-delay: 110ms; }
.dsh-anim .dsh-attn-row:nth-child(2) { animation-delay: 170ms; }
.dsh-anim .dsh-attn-row:nth-child(3) { animation-delay: 230ms; }
.dsh-anim .dsh-chips    { animation: sh-life-reveal 420ms var(--sh-ease-out) 150ms both; }
.dsh-anim .dsh-seg      { animation: sh-life-reveal 420ms var(--sh-ease-out) 210ms both; }
.dsh-anim .dsh-snap     { animation: sh-life-reveal 480ms var(--sh-ease-out) 270ms both; }
.dsh-anim .dsh-bot-left > *,
.dsh-anim .dsh-bot-right > * { animation: sh-life-reveal 480ms var(--sh-ease-out) both; }
.dsh-anim .dsh-bot-left  > :nth-child(1) { animation-delay: 330ms; }
.dsh-anim .dsh-bot-right > :nth-child(1) { animation-delay: 360ms; }
.dsh-anim .dsh-bot-left  > :nth-child(2) { animation-delay: 390ms; }
.dsh-anim .dsh-bot-right > :nth-child(2) { animation-delay: 420ms; }
.dsh-anim .dsh-bot-left  > :nth-child(3) { animation-delay: 450ms; }
.dsh-anim .dsh-bot-right > :nth-child(3) { animation-delay: 480ms; }
.dsh-anim .dsh-bot-left  > :nth-child(4) { animation-delay: 510ms; }

/* Attention rows breathe on hover — the chevron leads the way */
.dsh-attn-chev { transition: transform 150ms ease; }
@media (hover: hover) and (pointer: fine) {
  .dsh-attn-row { transition: transform 150ms var(--sh-ease-out), box-shadow 200ms ease; }
  .dsh-attn-row:hover { transform: translateX(3px); box-shadow: 0 4px 14px rgba(15,23,42,0.07); }
  .dsh-attn-row:hover .dsh-attn-chev { transform: translateX(3px); }
}

/* Hero collection number — a soft settle after the count-up starts */
.dsh-anim .dsh-hero-greet { animation: sh-life-reveal 400ms var(--sh-ease-out) 60ms both; }
.dsh-anim .dsh-hero-num   { animation: sh-life-pop 520ms var(--sh-ease-out) 180ms both; display: inline-block; }



/* ═══════════════════════════════════════════════════════
   15. PAGE — QUOTATIONS (qtl list + qv detail)
   Scoped to .qtl-anim / .qv-anim (set by quotation.js only on
   real page entry) — filter clicks & post-action re-renders stay still.
   ═══════════════════════════════════════════════════════ */

/* List: toolbar settles, then cards cascade */
.qtl-anim .qt-toolbar { animation: sh-life-reveal 380ms var(--sh-ease-out) both; }
.qtl-anim .qtl-card   { animation: sh-life-reveal 420ms var(--sh-ease-out) both; }
.qtl-anim .qtl-card:nth-child(1)  { animation-delay: 60ms; }
.qtl-anim .qtl-card:nth-child(2)  { animation-delay: 110ms; }
.qtl-anim .qtl-card:nth-child(3)  { animation-delay: 160ms; }
.qtl-anim .qtl-card:nth-child(4)  { animation-delay: 210ms; }
.qtl-anim .qtl-card:nth-child(5)  { animation-delay: 260ms; }
.qtl-anim .qtl-card:nth-child(6)  { animation-delay: 310ms; }
.qtl-anim .qtl-card:nth-child(7)  { animation-delay: 360ms; }
.qtl-anim .qtl-card:nth-child(n+8) { animation-delay: 400ms; }
/* The date tile pops just after its card lands — the recognition anchor */
.qtl-anim .qtl-card .qtl-date { animation: sh-life-pop 460ms var(--sh-ease-out) 260ms both; }

/* Detail: hero → counter → summary rail → content sections */
.qv-anim .qv-hero { animation: sh-life-reveal 440ms var(--sh-ease-out) both; }
.qv-anim .qv-side > * { animation: sh-life-reveal 420ms var(--sh-ease-out) 120ms both; }
.qv-anim .qv-side > :nth-child(2) { animation-delay: 180ms; }
.qv-anim .qv-side > :nth-child(3) { animation-delay: 240ms; }
.qv-anim .qv-rail { animation: sh-life-reveal 440ms var(--sh-ease-out) 300ms both; }
.qv-anim .qv-main > * { animation: sh-life-reveal 440ms var(--sh-ease-out) 160ms both; }
.qv-anim .qv-main > :nth-child(2) { animation-delay: 220ms; }
.qv-anim .qv-main > :nth-child(3) { animation-delay: 280ms; }
.qv-anim .qv-main > :nth-child(n+4) { animation-delay: 340ms; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    animation-delay: 0ms !important;
  }
}

/* ===== css/motion.css ===== */
/* ============================================================
   SahiHisab — Motion Kit (micro-interactions)
   Self-contained, namespaced (.sh-*). No !important (CLAUDE.md).
   Reduced-motion handled at the bottom via later + equal specificity.
   Pairs with js/motion.js (window.SHMotion).
   ============================================================ */

/* ── 1. Button tap ripple ───────────────────────────────── */
/* overflow:hidden contains the ripple inside the button bounds.
   .no-ripple opts a button out (e.g. if it has overflow children). */
.btn { position: relative; overflow: hidden; }
.btn.no-ripple { overflow: visible; }
/* Ripple colour is theme-aware so it stays visible in BOTH light and dark mode:
   - filled colour buttons (primary/success/danger/warning/info) → white ripple (works on saturated bg in either theme)
   - everything else → a neutral that flips: dark-on-light in light mode, light-on-dark in dark mode. */
:root { --sh-ripple-soft: hsla(210, 40%, 25%, 0.16); }
[data-theme="dark"], :root.dark-mode, body.dark-mode { --sh-ripple-soft: hsla(0, 0%, 100%, 0.20); }
@media (prefers-color-scheme: dark) { :root:not(.light-mode) { --sh-ripple-soft: hsla(0, 0%, 100%, 0.20); } }

.sh-ripple {
  position: absolute; border-radius: 50%; transform: scale(0);
  pointer-events: none; background: var(--sh-ripple-soft);
  animation: sh-ripple 600ms ease-out;
}
.btn-primary .sh-ripple, .btn-success .sh-ripple, .btn-danger .sh-ripple,
.btn-warning .sh-ripple, .btn-info .sh-ripple { background: hsla(0, 0%, 100%, 0.42); }
@keyframes sh-ripple { to { transform: scale(4); opacity: 0; } }

/* ── 2. Count-up numbers ────────────────────────────────── */
/* tabular-nums keeps width stable so the layout doesn't jitter. */
[data-countup] { font-variant-numeric: tabular-nums; }

/* ── 3. Success check draw ──────────────────────────────── */
.sh-check {
  display: inline-grid; place-items: center; border-radius: 9999px;
  background: var(--success-light, hsl(142, 60%, 93%)); flex: 0 0 auto;
}
.sh-check svg { width: 58%; height: 58%; }
.sh-check path {
  stroke: var(--success, hsl(142, 70%, 45%)); stroke-width: 3.5; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 30; stroke-dashoffset: 30;
}
.sh-check.run path { animation: sh-draw 500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.sh-check.run { animation: sh-pop 400ms cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes sh-draw { to { stroke-dashoffset: 0; } }
@keyframes sh-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* ── 4. Staggered list entrance ─────────────────────────── */
/* Add .sh-stagger to a container, then .run (SHMotion.stagger does both). */
.sh-stagger > * { opacity: 0; }
.sh-stagger.run > * { animation: sh-slide-in 380ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.sh-stagger.run > *:nth-child(1)  { animation-delay: 30ms; }
.sh-stagger.run > *:nth-child(2)  { animation-delay: 75ms; }
.sh-stagger.run > *:nth-child(3)  { animation-delay: 120ms; }
.sh-stagger.run > *:nth-child(4)  { animation-delay: 165ms; }
.sh-stagger.run > *:nth-child(5)  { animation-delay: 210ms; }
.sh-stagger.run > *:nth-child(6)  { animation-delay: 255ms; }
.sh-stagger.run > *:nth-child(7)  { animation-delay: 300ms; }
.sh-stagger.run > *:nth-child(8)  { animation-delay: 345ms; }
.sh-stagger.run > *:nth-child(n+9) { animation-delay: 390ms; }
@keyframes sh-slide-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── 5. Reduced motion (later + equal specificity wins; no !important) ── */
@media (prefers-reduced-motion: reduce) {
  .sh-ripple { display: none; animation: none; }
  .sh-check.run path { animation: none; stroke-dashoffset: 0; }
  .sh-check.run { animation: none; }
  .sh-stagger > *, .sh-stagger.run > * { opacity: 1; animation: none; }
  .sh-stagger.run > *:nth-child(1), .sh-stagger.run > *:nth-child(2),
  .sh-stagger.run > *:nth-child(3), .sh-stagger.run > *:nth-child(4),
  .sh-stagger.run > *:nth-child(5), .sh-stagger.run > *:nth-child(6),
  .sh-stagger.run > *:nth-child(7), .sh-stagger.run > *:nth-child(8),
  .sh-stagger.run > *:nth-child(n+9) { animation-delay: 0ms; }
}

/* ===== css/toast-v2.css ===== */
/* ═══════════════════════════════════════════════════════════════════════
   Toast — "rasid stub"                                 (2026-08-21)  1.00
   ───────────────────────────────────────────────────────────────────────
   Replaces the saturated colour slabs. The old toast painted the WHOLE
   surface success-green / warning-orange / danger-red, which:
     • read as a system alert, not as this product;
     • stacked into a traffic light (three at once is common here);
     • fought its own text — app.css:8938 had to patch warning's contrast
       back in, which is the colour choice telling on itself;
     • turned a long money message into a 111px slab of solid orange.

   Here the surface stays paper (var(--card)) and the type is carried by a
   stub rail + a tinted icon chip. Contrast, not saturation, is what makes
   this readable in daylight on a counter — the same reasoning already
   written into dashboard-redesign.css ("sunlight readable").

   Loads AFTER app.css: every override below matches app.css's specificity
   exactly (0,2,0) and wins on order. No !important.
   ═══════════════════════════════════════════════════════════════════════ */

/* Width follows the message. The old toast stretched to the container on
   every call, so "Saved" got the same 343px slab as a three-line money
   notice. Now the box is sized by its content and only grows to the full
   column when the text actually needs it. */
.toast {
  position: relative;
  width: fit-content;
  /* Follows the message, but a toast is a glance — past ~420px the eye has to
     track across the line instead of taking it in, so it wraps rather than
     stretching. On mobile the 343px column is the tighter limit and wins. */
  max-width: min(100%, 420px);
  align-items: flex-start;          /* multi-line messages hang off the icon */
  gap: 10px;
  padding: 12px 14px 12px 18px;     /* extra left for the stub rail */
  background: var(--card);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 14px;
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.45;
  /* ₹ amounts and receipt numbers are data — let them line up. */
  font-variant-numeric: tabular-nums;
  box-shadow: 0 10px 30px -12px rgba(15, 23, 42, 0.28),
              0 2px 6px -2px rgba(15, 23, 42, 0.12);
  cursor: pointer;
  --toast-accent: var(--text-muted);
  --toast-tint: var(--muted);
}

/* The stub. A receipt is torn off a book, and the tear never runs the full
   height of the slip — so the rail stops short at both ends. One quiet
   detail, no extra DOM, and it is what makes this toast belong to a hisab
   app rather than to any framework. */
.toast::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 999px;
  background: var(--toast-accent);
}

/* Colour lives in the rail and the chip — never in the background. */
.toast.toast-success,
.toast.toast-warning,
.toast.toast-danger,
.toast.toast-info {
  background: var(--card);
  color: var(--text-primary);
}

.toast.toast-success { --toast-accent: var(--success);     --toast-tint: var(--success-light); }
.toast.toast-warning { --toast-accent: var(--warning);     --toast-tint: var(--warning-light); }
.toast.toast-danger  { --toast-accent: var(--destructive); --toast-tint: var(--danger-light); }
.toast.toast-info    { --toast-accent: var(--primary);     --toast-tint: var(--info-light); }

.toast__ico {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--toast-tint);
  color: var(--toast-accent);
  margin-top: 1px;                  /* optical align to the first text line */
}

.toast__ico .material-symbols-rounded { font-size: 17px; }

/* The animated success check keeps its own geometry — just tint it. */
.toast__ico .sh-check { color: var(--toast-accent); }
.toast__ico .sh-check svg path { stroke: var(--toast-accent); }

.toast__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Title appears only when the caller passes "title\nbody" — 880 existing
   single-line calls render exactly as before. */
.toast__title {
  font-size: 0.87rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-primary);
}

.toast__title + .toast__msg {
  font-size: 0.81rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.toast__msg { overflow-wrap: anywhere; }

/* ─── Motion ─────────────────────────────────────────────────────────────
   The old rule slid in from translateX(120%) — fully off the right edge —
   even though on mobile the container is bottom-anchored and full-width.
   Direction now matches the anchor: it rises where it sits low, and eases
   in from the right only where it actually sits at the top right. */

.toast {
  transform: translateY(14px);
  opacity: 0;
  transition: transform 260ms cubic-bezier(0.32, 0.72, 0, 1),
              opacity 200ms ease;
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

@media (min-width: 769px) {
  .toast { transform: translateX(16px); }
  .toast.show { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .toast { transition: opacity 160ms ease; transform: none; }
  .toast.show { transform: none; }
}

/* Dark mode: the paper darkens with --card, but the shadow has to stop
   pretending there is light above it. */
:root.dark-mode .toast,
body.dark-mode .toast {
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.7),
              0 2px 6px -2px rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) .toast {
    box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.7),
                0 2px 6px -2px rgba(0, 0, 0, 0.5);
  }
}


/* A flex column stretches its children by default — that is what forced every
   toast to full width. Centre them over the thumb on mobile; keep them tucked
   to the right where the stack actually sits on desktop. */
.toast-container { align-items: center; }

@media (min-width: 769px) {
  .toast-container { align-items: flex-end; }
}

/* ===== css/dashboard-compact.css ===== */
/* ═══════════════════════════════════════════════════════════════════════
   Dashboard — mobile density + hero CTA treatment      (2026-08-21)  1.03
   ───────────────────────────────────────────────────────────────────────
   Two jobs, deliberately kept apart:

   (A) DENSITY — ≤768px only. Measured at 375px the page was 1957px tall
       (2.41 screens) with only three blocks above the fold. The card
       rhythm was a uniform 16px gap with 18–22px radii, which reads
       "spacious demo" rather than "a tool I open twenty times a day".

   (B) CTA — all widths. Fixes a real bug (the primary label wrapped to two
       lines at 375px) and gives the row an actual hierarchy.

   Loads AFTER app.css, so equal-specificity rules win on order alone —
   no !important anywhere, per project rule. Revert = remove one <link>.
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══ (B) Hero CTA ══════════════════════════════════════════════════════ */

.dsh-hero-cta { gap: 8px; }

.dsh-cta-primary,
.dsh-cta-secondary {
  font-size: 0.82rem;
  font-weight: 700;              /* was 800 — at 13px that reads heavy, not strong */
  letter-spacing: -0.005em;
  padding: 0 12px;
  /* An adaptive label that outgrows its track must clip, never wrap. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: transform 140ms ease, box-shadow 140ms ease;
}

/* The primary carries a variable label ("New Quotation", "Collect Payment",
   …); the secondary is always one short word. At 375px an even 1:1 split
   gave each track ~124px while the primary needed ~138px, so the label
   wrapped to two lines. Give the room to the side that needs it. */
.dsh-cta-primary { flex: 1.35; }
.dsh-cta-secondary { flex: 1; }

.dsh-cta-primary {
  /* Narrow single-hue gradient + a 1px top highlight: depth you read as
     solidity, not as a gradient. The shadow is tinted with the button's own
     hue rather than black, so it sits in the light instead of on top of it. */
  background: linear-gradient(180deg, #0BA5E9 0%, #0369A1 100%);
  border: 0;
  color: #fff;
  box-shadow: 0 8px 20px -6px rgba(3, 105, 161, 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* Tonal, not a second solid blue. Two equally saturated fills competing at
   the same weight is what made the row read flat — this keeps Collect fully
   legible while letting the primary lead. */
.dsh-cta-secondary {
  background: #E0F2FE;
  color: #0369A1;
  border: 1px solid rgba(3, 105, 161, 0.14);
  box-shadow: none;
}

.dsh-cta-primary .material-symbols-rounded,
.dsh-cta-secondary .material-symbols-rounded,
.dsh-cta-secondary svg.ico-collect {
  font-size: 1.05rem;            /* svg.ico-collect is sized in em */
  flex-shrink: 0;
}

.dsh-cta-primary:active {
  transform: translateY(1px) scale(0.99);
  box-shadow: 0 3px 10px -4px rgba(3, 105, 161, 0.5),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.dsh-cta-secondary:active { transform: translateY(1px) scale(0.99); }

/* The "+" is a utility affordance for the overflow menu — it should recede,
   not stand as a third peer button. Still a full 44px target. */
.dsh-cta-more {
  flex: 0 0 44px;
  width: 44px;
  min-height: 44px;
  border-radius: 13px;
  border-color: var(--border-light);
  color: var(--text-secondary);
  transition: transform 140ms ease;
}

.dsh-cta-more .material-symbols-rounded { font-size: 1.2rem; }
.dsh-cta-more:active { transform: translateY(1px) scale(0.99); }

/* Dark mode — the tonal fill is a light-mode value and must not survive.
   Mirrors app.css's convention: .dark-mode class for the manual toggle,
   :root:not(.light-mode) under the media query for "system". */
:root.dark-mode .dsh-cta-secondary,
body.dark-mode .dsh-cta-secondary {
  background: rgba(56, 189, 248, 0.14);
  color: #7DD3FC;
  border-color: rgba(56, 189, 248, 0.22);
}

:root.dark-mode .dsh-cta-primary,
body.dark-mode .dsh-cta-primary {
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.55),
              inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) .dsh-cta-secondary {
    background: rgba(56, 189, 248, 0.14);
    color: #7DD3FC;
    border-color: rgba(56, 189, 248, 0.22);
  }
  :root:not(.light-mode) .dsh-cta-primary {
    box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.55),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dsh-cta-primary,
  .dsh-cta-secondary,
  .dsh-cta-more { transition: none; }

  .dsh-cta-primary:active,
  .dsh-cta-secondary:active,
  .dsh-cta-more:active { transform: none; }
}


/* ═══ (A) Mobile density ════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* One rhythm change does most of the work: 16px between every card is
     what made the page feel like a brochure. 10px still separates cleanly. */
  .dsh-hero,
  .dsh-attn,
  .dsh-seg,
  .dsh-snap,
  .dsh-card { margin-bottom: 10px; }

  /* Radii come down with the gaps — a 22px corner on a 351px-wide card
     reads soft and oversized once the spacing tightens. */
  .dsh-hero { padding: 13px 15px; border-radius: 18px; }
  .dsh-hero-lbl { margin-top: 6px; }
  .dsh-hero-num { font-size: 2.15rem; }
  .dsh-hero-meta { margin-top: 6px; }
  .dsh-hero-cta { margin-top: 10px; }

  .dsh-attn-row {
    padding: 10px 12px;
    margin-bottom: 6px;
    border-radius: 14px;
    gap: 10px;
  }

  .dsh-attn-ico { width: 32px; height: 32px; border-radius: 9px; }
  .dsh-attn-ico .material-symbols-rounded { font-size: 1.05rem; }

  /* The container tightens, but the pill grows: .dsh-seg-item shipped at
     38px, under the project's 44px tap-target floor. Since this pass is
     already touching the block, raise it rather than leave a known a11y
     gap behind — the tighter container padding means the strip only grows
     2px overall. */
  .dsh-seg { border-radius: 12px; padding: 2px; }
  .dsh-seg-item { min-height: 44px; border-radius: 10px; }

  .dsh-snap { padding: 12px 0; border-radius: 14px; }
  .dsh-card { border-radius: 14px; }
}


/* ═══ Search box — gradient rim that lights on focus ════════════════════
   Adapted from the gradient-glow card pattern, with three changes that make
   it work here rather than as a novelty:

   1. It fires on :focus-within, not :hover. Hover does not exist on the
      phones this runs on; focus does, and it is the moment that actually
      matters — "you are typing here" is the one thing this field needs to
      say to a low-tech user.
   2. Every colour comes from the app's own ramp — --primary-300 → --primary-600
      for the rim, color-mix on --primary for the glow. Nothing is hardcoded,
      so if the brand hue ever moves the search field follows it instead of
      drifting off-theme. (300–700 are shared between light and dark; only
      --primary-50/100/200 flip, so the rim reads the same in both.)
   3. The glow is a hue-tinted shadow at low alpha, not a 30px neon halo —
      same technique already used on the dashboard CTA.

   Border stays 3px in BOTH states so focus never shifts layout by a pixel.
   The rim is painted with a padding-box/border-box background pair, so no
   extra element is needed — .dsh-search-wrap keeps its existing markup. */

.dsh-search-input {
  border: 3px solid transparent;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(var(--border-light), var(--border-light)) border-box;
  transition: box-shadow 200ms ease, background-image 200ms ease;
}

/* One sweep of light travels the rim when the field is tapped, then settles.
   It runs once per focus — an arrival, not an idle loop. A looping border
   animation on a field you are trying to type into is noise; a single pass
   says "this is live now" and then gets out of the way. */
@keyframes sh-search-rim {
  from { background-position: 0 0, 100% 0; }
  to   { background-position: 0 0, 0 0; }
}

.dsh-search-wrap:focus-within .dsh-search-input,
.dsh-search-input:focus {
  border-color: transparent;
  /* Sea blue: the deep end of the brand ramp, with a lighter band between the
     two stops so the sweep has something to carry. */
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(100deg,
      var(--primary-700) 0%,
      var(--primary-400) 38%,
      var(--primary-600) 62%,
      var(--primary-700) 100%) border-box;
  background-size: auto, 210% 100%;
  background-repeat: no-repeat;
  animation: sh-search-rim 820ms cubic-bezier(0.32, 0.72, 0, 1) 1 both;
  /* Was rgba(99,102,241,.1) — indigo, left over from an older palette, while
     the border next to it was already sky. Both are one hue now. */
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent),
              0 8px 22px -10px color-mix(in srgb, var(--primary) 50%, transparent);
  outline: none;
}

.dsh-search-wrap:focus-within .dsh-search-ico {
  color: var(--primary);
  transition: color 200ms ease;
}

:root.dark-mode .dsh-search-wrap:focus-within .dsh-search-input,
body.dark-mode .dsh-search-wrap:focus-within .dsh-search-input {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 22%, transparent),
              0 8px 22px -10px color-mix(in srgb, var(--primary) 40%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) .dsh-search-wrap:focus-within .dsh-search-input {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 22%, transparent),
                0 8px 22px -10px color-mix(in srgb, var(--primary) 40%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dsh-search-input,
  .dsh-search-wrap:focus-within .dsh-search-ico { transition: none; }

  .dsh-search-wrap:focus-within .dsh-search-input,
  .dsh-search-input:focus {
    animation: none;
    background-position: 0 0, 0 0;
  }
}

/* ===== css/settings-v2.css ===== */
/* ═══════════════════════════════════════════════════════════════════════
   Settings mobile v2 — index → drill-down            (2026-08-20)  1.02
   ───────────────────────────────────────────────────────────────────────
   Replaces the 11-tab horizontal scroll strip below 1024px. Every rule is
   scoped to .settings-page--mobile, which App._restructureSettingsForMobile()
   adds — so this file is completely inert unless that layout is built, and
   it cannot leak into the desktop group layout (.settings-page--desktop).

   Class-scoped rather than media-scoped on purpose: the JS decides which
   layout to build, so the CSS must follow the JS, not the viewport.

   Motion contract: transform + opacity ONLY. Nothing here animates height,
   width, top or left — those relayout every frame and are what make
   accordion-style settings stutter on low-end Android.
   ═══════════════════════════════════════════════════════════════════════ */

/* The old tab strip stays in the DOM (tour anchors + bound handlers live on
   it) but is never shown once the grouped index is built. */
.settings-page--mobile .settings-tabs { display: none; }

.settings-page--mobile { padding-bottom: var(--space-xl); }

/* Positioning context for the outgoing view during a slide. */
.sgv2 { position: relative; }

/* ─── Index ─────────────────────────────────────────────────────────── */

/* Theme lives as a single icon here, not a row and not a screen. The Theme
   card itself is parked in this host (never shown) so its existing toggle
   handlers stay the only writer of sh_theme. */
.sgv2__host { display: none; }

.sgv2__topbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-sm);
}

.sgv2__theme {
  display: grid;
  place-items: center;
  width: 44px;               /* full tap target */
  height: 44px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--transition-normal), color var(--transition-normal);
}

.sgv2__theme .material-symbols-rounded { font-size: 21px; }
.sgv2__theme:active { background: var(--muted); }

@media (hover: hover) {
  .sgv2__theme:hover { background: var(--muted); color: var(--text-primary); }
}

.sgv2__theme:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .sgv2__theme { transition: none; }
}

/* Small caps section header — the grouping the reference designs use. */
.sgv2__label {
  margin: var(--space-xl) 0 var(--space-sm);
  padding-left: var(--space-lg);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.sgv2__index > .sgv2__label:first-of-type { margin-top: var(--space-xl); }

.sgv2__card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Feedback block arrives with its own dashed rule + centred button. */
.sgv2__foot { margin-top: var(--space-xl); }

/* Identity card — the studio's own row, mirroring the profile row the
   reference designs open with. Taps through to the Studio group. */
.sgv2__id,
.sgv2__row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  min-height: 48px;          /* > 44px tap target */
  padding: var(--space-sm) var(--space-lg);
  background: none;
  border: 0;
  font: inherit;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.sgv2__id {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  min-height: 72px;
}

.sgv2__id-logo {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--muted);
  display: grid;
  place-items: center;
}

.sgv2__id-logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sgv2__id-initial {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.sgv2__id-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sgv2__id-text strong {
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* One setting per row: name only. No status chips — a row states what it is,
   the screen behind it states what it's set to. */
.sgv2__row-title {
  flex: 1;
  min-width: 0;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sgv2__id-text > span {
  font-size: 0.78rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Rows share one card, separated by hairlines rather than gaps. */
/* Hairline inset past the icon column, native-settings style.
   Drawn as a pseudo-element, NOT border+margin: shifting the row itself makes
   it wider than the card, and the card's overflow:hidden then clips the
   chevron off every row but the first. */
.sgv2__card .sgv2__row + .sgv2__row { position: relative; }

.sgv2__card .sgv2__row + .sgv2__row::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(var(--space-lg) + 26px + var(--space-md));
  right: 0;
  border-top: 1px solid var(--border);
}

.sgv2__id:active,
.sgv2__row:active { background: var(--muted); }

@media (hover: hover) {
  .sgv2__id:hover,
  .sgv2__row:hover { background: var(--muted); }
}

.sgv2__id:focus-visible,
.sgv2__row:focus-visible,
.sgv2__back:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

/* Plain icon, no coloured chip — the section header carries the grouping, so
   per-row accents would just be noise on a 13-row list. */
.sgv2__ico {
  flex-shrink: 0;
  width: 26px;
  display: grid;
  place-items: center;
  color: var(--text-secondary);
}

.sgv2__ico .material-symbols-rounded { font-size: 21px; }

.sgv2__chev {
  flex-shrink: 0;
  font-size: 20px;
  color: var(--text-muted);
}

/* ─── Detail ────────────────────────────────────────────────────────── */

.sgv2__bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.sgv2__back {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: -10px;        /* optical align to the content edge */
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-primary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.sgv2__back .material-symbols-rounded { font-size: 22px; }
.sgv2__back:active { background: var(--muted); }

.sgv2__title {
  margin: 0;
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* Offscreen panels cost nothing to paint. */
.sgv2__panels { contain: paint; }

/* ─── Slide ─────────────────────────────────────────────────────────── */

/* The outgoing view leaves the flow, so container height is always driven
   by the incoming one. No height animation, no measurement, no clipping. */
.sgv2__index.is-leaving,
.sgv2__detail.is-leaving {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.sgv2 .is-animating {
  transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1),
              opacity 220ms cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform, opacity;   /* removed on transitionend — see _sgv2Slide */
}

.sgv2 .sgv2-x-right { transform: translateX(100%); opacity: 0.4; }
.sgv2 .sgv2-x-left  { transform: translateX(-22%); opacity: 0; }

/* The JS already skips the animation under reduced motion; this is the
   belt-and-braces half, in case a class lands before that check. */
@media (prefers-reduced-motion: reduce) {
  .sgv2 .is-animating { transition: none; }
  .sgv2 .sgv2-x-right,
  .sgv2 .sgv2-x-left { transform: none; opacity: 1; }
}

/* Wide viewports only reach this file when JS chose the mobile layout
   (e.g. a window resized after render) — keep it centred, not stretched. */
.settings-page--mobile .sgv2 { max-width: 640px; margin: 0 auto; }

/* ===== css/settings-v3.css ===== */
/* Settings desktop v3 — API-aligned, single-focus workspace. */

@media (min-width: 1024px) {
  body .settings-page--workspace {
    width: min(100%, 1440px);
    max-width: 1440px;
    margin: 0 auto;
    padding: 28px clamp(24px, 3vw, 44px) 56px;
  }

  body .settings-page--workspace .settings-tabs { display: none; }

  body .ssw-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 24px;
    padding: 4px 2px 22px;
    border-bottom: 1px solid var(--border-light);
  }

  body .ssw-eyebrow {
    display: block;
    margin-bottom: 7px;
    color: var(--primary);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  body .ssw-hero h2 {
    margin: 0;
    color: var(--foreground);
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 2vw, 2rem);
    letter-spacing: -0.035em;
  }

  body .ssw-hero p {
    max-width: 640px;
    margin: 7px 0 0;
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.55;
  }

  body .ssw-hero__facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
  }

  body .ssw-hero__facts span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-full);
    background: var(--card);
    color: var(--text-secondary);
    font-size: 0.74rem;
    font-weight: 650;
    white-space: nowrap;
  }

  body .ssw-hero__facts .material-symbols-rounded {
    color: var(--primary);
    font-size: 16px;
  }

  body .ssw-layout {
    display: grid;
    grid-template-columns: minmax(230px, 270px) minmax(0, 1fr);
    gap: clamp(20px, 2.4vw, 34px);
    align-items: start;
  }

  body .ssw-nav-slot {
    min-width: 0;
    align-self: stretch;
  }

  body .ssw-nav {
    position: sticky;
    top: 82px;
    align-self: start;
    height: fit-content;
    max-height: none;
    padding: 10px;
    overflow: visible;
    border: 1px solid var(--border-light);
    border-radius: 18px;
    background: var(--card);
    box-shadow: 0 8px 28px -24px hsla(220, 30%, 20%, 0.28);
  }

  body .ssw-nav.is-viewport-fixed {
    position: fixed;
    z-index: 30;
    top: 0;
    left: 0;
    width: var(--ssw-nav-fixed-width);
    transform: translate3d(var(--ssw-nav-fixed-x, 0), var(--ssw-nav-fixed-y, 82px), 0);
  }

  body .ssw-nav__group + .ssw-nav__group { margin-top: 10px; }

  body .ssw-nav__group > p {
    margin: 0;
    padding: 10px 12px 6px;
    color: var(--text-muted);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  body .ssw-nav__item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 50px;
    padding: 7px 9px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--foreground);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
  }

  body .ssw-nav__item:hover { background: var(--muted); }

  body .ssw-nav__item.is-active {
    background: var(--primary-50);
    color: var(--primary);
  }

  body .ssw-nav__item:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
  }

  body .ssw-nav__icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--muted);
    color: var(--text-secondary);
  }

  body .ssw-nav__item.is-active .ssw-nav__icon {
    background: var(--card);
    color: var(--primary);
    box-shadow: 0 1px 4px hsla(200, 80%, 35%, 0.1);
  }

  body .ssw-nav__icon .material-symbols-rounded { font-size: 19px; }
  body .ssw-nav__copy { min-width: 0; }

  body .ssw-nav__copy strong,
  body .ssw-nav__copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body .ssw-nav__copy strong {
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.25;
  }

  body .ssw-nav__copy small {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 0.68rem;
    line-height: 1.25;
  }

  body .ssw-nav__arrow {
    color: var(--text-muted);
    font-size: 17px;
  }

  body .ssw-content { min-width: 0; }
  body .ssw-panel[hidden] { display: none; }

  body .ssw-panel {
    min-width: 0;
    animation: sswPanelIn 180ms ease-out both;
  }

  body .ssw-panel--preferences {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  body .ssw-panel--preferences[hidden] { display: none; }

  body .ssw-preferences-head {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    gap: 12px;
    padding: 2px 2px 4px;
  }

  body .ssw-preferences-head h3 {
    margin: 0;
    color: var(--foreground);
    font-family: var(--font-display);
    font-size: 1.16rem;
    letter-spacing: -0.02em;
  }

  body .ssw-preferences-head p {
    margin: 3px 0 0;
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.45;
  }

  body .ssw-panel--preferences > #settingsTab-language,
  body .ssw-panel--preferences > #settingsTab-notifications {
    grid-column: 1 / -1;
  }

  body .ssw-panel > .settings-section,
  body .ssw-panel > .settings-theme-card {
    margin: 0;
    padding: clamp(22px, 3vw, 34px);
    border: 1px solid var(--border-light);
    border-radius: 18px;
    background: var(--card);
    box-shadow: 0 12px 36px -32px hsla(220, 30%, 18%, 0.32);
  }

  body .ssw-panel .settings-section h3,
  body .ssw-panel .settings-theme-header h4 {
    margin-bottom: 22px;
    font-size: 1.08rem;
    letter-spacing: -0.015em;
  }

  body .ssw-panel .settings-theme-header { margin-bottom: 22px; }
  body .ssw-panel .settings-theme-header h4 { margin-bottom: 2px; }

  body .ssw-panel--preferences > .settings-theme-card {
    padding: 22px;
  }

  body .ssw-panel--preferences > .settings-theme-card .settings-theme-header {
    margin-bottom: 16px;
  }

  body .ssw-panel--preferences > .settings-theme-card .theme-toggle-group {
    min-height: 48px;
  }

  body .ssw-panel .form-group label {
    margin-bottom: 7px;
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 700;
  }

  body .ssw-panel .form-control,
  body .ssw-panel input:not([type='checkbox']):not([type='radio']):not([type='color']),
  body .ssw-panel textarea,
  body .ssw-panel select {
    min-height: 46px;
    border-radius: 10px;
  }

  body .ssw-panel textarea { min-height: 112px; }

  body .ssw-panel .settings-section .btn-block {
    display: flex;
    width: auto;
    min-width: 150px;
    min-height: 44px;
    margin: 24px 0 0 auto;
    padding-inline: 22px;
    border-radius: 10px;
    font-size: 0.86rem;
  }

  body .ssw-panel .studio-2col {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 30px;
    align-items: start;
  }

  body .ssw-panel .studio-2col .settings-logo-wrap {
    width: 100%;
    margin: 0;
  }

  body .ssw-panel .studio-2col .settings-logo-label { display: none; }

  body .ssw-panel .studio-form-wrap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
    align-items: start;
  }

  body .ssw-panel .studio-form-wrap > .form-group { margin-bottom: 0; }

  body .ssw-panel .studio-form-wrap > .form-group:has(textarea),
  body .ssw-panel .studio-form-wrap > #portfolioShowcaseBlock,
  body .ssw-panel .studio-form-wrap > #brandColorBlock,
  body .ssw-panel .studio-form-wrap > #phoneFormGroup,
  body .ssw-panel .studio-form-wrap > .setting-row,
  body .ssw-panel .studio-form-wrap > .btn-block,
  body .ssw-panel .studio-form-wrap > div[style*='margin-top:20px'] {
    grid-column: 1 / -1;
  }

  /* Studio Info is a long form. Break it into scannable jobs while keeping
     every original control and handler intact. */
  body .ssw-panel #settingsTab-studio {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body .ssw-panel #settingsTab-studio > h3 {
    margin: 0 0 14px;
    padding-inline: 2px;
    font-size: 1.2rem;
  }

  body .studio-settings-stack {
    display: grid;
    gap: 16px;
    min-width: 0;
    padding-bottom: 78px;
  }

  body .studio-settings-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border-light);
    border-radius: 18px;
    background: var(--card);
    box-shadow: 0 12px 36px -32px hsla(220, 30%, 18%, 0.32);
  }

  body .studio-settings-card__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 22px 16px;
    border-bottom: 1px solid var(--border-light);
  }

  body .studio-settings-card__icon {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--primary-50);
    color: var(--primary);
    font-size: 20px;
  }

  body .studio-settings-card__head h4 {
    margin: 1px 0 3px;
    color: var(--foreground);
    font-size: 0.96rem;
    font-weight: 750;
    letter-spacing: -0.01em;
  }

  body .studio-settings-card__head p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.76rem;
    line-height: 1.45;
  }

  body .studio-settings-card__body { padding: 22px; }

  body .studio-identity-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    min-width: 0;
  }

  body .studio-identity-layout .settings-logo-wrap {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    justify-self: center;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
  }

  body .studio-identity-layout .settings-logo-label { display: none; }

  body .studio-identity-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
    min-width: 0;
  }

  body .studio-identity-fields > .form-group { min-width: 0; margin: 0; }
  body .studio-identity-fields > .form-group:has(textarea) { grid-column: 1 / -1; }

  body .studio-identity-fields #btnChangePhone {
    flex: 0 0 auto;
    padding-inline: 16px;
  }

  body .studio-identity-fields .form-control {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body .studio-settings-card #portfolioShowcaseBlock,
  body .studio-settings-card #brandColorBlock {
    margin: 0;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    background: var(--background);
  }

  body .studio-settings-card #brandColorBlock { margin-top: 10px; }

  body .studio-settings-card .settings-collapse-hd {
    width: 100%;
    min-height: 56px;
    padding: 12px 14px;
    border: 0;
    border-radius: 12px;
    background: transparent;
  }

  body .studio-settings-card .settings-collapse-body {
    padding: 0 14px 14px;
  }

  body .studio-settings-card #socialLinksBlock {
    margin: 0;
    padding: 0;
    border: 0;
  }

  body .studio-settings-card .sh-social-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
  }

  body .studio-settings-card .sh-social-field { min-width: 0; margin: 0; }
  body .studio-settings-card .sh-social-field .form-control { width: 100%; min-width: 0; }

  body .studio-settings-card .setting-row {
    margin: 0;
    padding: 14px 0;
    border-top: 1px solid var(--border-light);
  }

  body .studio-settings-card .setting-row:first-child { padding-top: 0; border-top: 0; }

  /* Settings toggles: one precise, brand-aligned control. This deliberately
     wins over older global/mobile toggle rules that use different geometry. */
  body .ssw-panel .toggle-switch {
    position: relative;
    display: inline-flex;
    flex: 0 0 46px;
    width: 46px;
    height: 26px;
    min-height: 26px;
    align-items: center;
    cursor: pointer;
  }

  body .ssw-panel .toggle-switch .toggle-slider {
    position: absolute;
    inset: 0;
    display: block;
    width: auto;
    height: auto;
    border: 1px solid var(--border-strong, #cbd5e1);
    border-radius: 999px;
    background: var(--surface-muted, #e2e8f0);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  }

  body .ssw-panel .toggle-switch .toggle-slider::before {
    position: absolute;
    top: 2px;
    bottom: auto;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.24);
    transition: transform 160ms ease;
  }

  body .ssw-panel .toggle-switch input:checked + .toggle-slider,
  body .ssw-panel .toggle-switch:hover input:checked + .toggle-slider {
    border-color: var(--primary);
    background: var(--primary);
  }

  body .ssw-panel .toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(20px);
  }

  body .ssw-panel .toggle-switch input:focus-visible + .toggle-slider {
    outline: 3px solid color-mix(in srgb, var(--primary) 24%, transparent);
    outline-offset: 2px;
  }

  body .studio-settings-card #notifSoundBlock,
  body .studio-settings-card #signatureBlock {
    width: 100%;
    margin: 0;
    padding: 14px 0 0;
    border: 0;
    border-top: 1px solid var(--border-light);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body .studio-settings-card #signatureBlock { padding-top: 0; border-top: 0; }
  body .studio-settings-card #sigPadContainer { max-width: 640px; }

  body .studio-save-bar {
    position: sticky;
    z-index: 12;
    bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 64px;
    padding: 10px 12px 10px 18px;
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    background: var(--glass-bg);
    box-shadow: var(--shadow-lg);
    backdrop-filter: var(--glass-blur);
  }

  body .studio-save-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 650;
  }

  body .studio-save-status .material-symbols-rounded { color: var(--success); font-size: 18px; }
  body .studio-save-status.is-dirty { color: var(--foreground); }
  body .studio-save-status.is-dirty .material-symbols-rounded { color: var(--warning); }

  body .ssw-panel .studio-save-bar #saveStudioInfo {
    flex: 0 0 auto;
    width: auto;
    min-width: 154px;
    margin: 0;
  }

  body .ssw-panel #settingsTab-terms .terms-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
  }

  body .ssw-panel .setting-row {
    min-height: 64px;
    padding: 13px 0;
  }

  body .ssw-panel .setting-label { font-size: 0.9rem; }
  body .ssw-panel .setting-label small { font-size: 0.76rem; line-height: 1.45; }

  body .ssw-panel #settingsTab-bank,
  body .ssw-panel #settingsTab-tax,
  body .ssw-panel #settingsTab-subscription,
  body .ssw-panel #settingsTab-security,
  body .ssw-panel #settingsTab-notifications,
  body .ssw-panel #settingsTab-whatsapp {
    max-width: 920px;
  }

  body .settings-page--workspace > div:last-child { margin-top: 28px; }

  @keyframes sswPanelIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    body .ssw-panel { animation: none; }
    body .ssw-nav__item { transition: none; }
  }
}

/* Settings already has its own navigation and support destinations. Keep the
   work area clear instead of stacking three unrelated floating controls over
   the form and sidebar footer. */
body.settings-workspace-open .munim-root,
body.settings-workspace-open .sh-wa-float,
body.settings-workspace-open .pwa-install-btn,
body:has(.settings-page--workspace) .munim-root,
body:has(.settings-page--workspace) .sh-wa-float,
body:has(.settings-page--workspace) .pwa-install-btn {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

@media (min-width: 1024px) and (max-width: 1180px) {
  body .ssw-layout { grid-template-columns: 224px minmax(0, 1fr); gap: 18px; }
  body .ssw-hero { align-items: flex-start; flex-direction: column; gap: 14px; }
  body .ssw-hero__facts { justify-content: flex-start; }
  body .ssw-panel--preferences { grid-template-columns: 1fr; }
  body .ssw-panel--preferences > .settings-theme-card { grid-column: 1; }
  body .studio-identity-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

/* ============================================================
   Terms & Conditions as points
   Each line of a term field is one point. The real <textarea>
   is still there, hidden, holding the joined value — these rows
   only edit it.
   ============================================================ */

.tc-points {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.terms-field-use {
  display: block;
  margin: -2px 0 10px;
  color: var(--text-secondary);
  font-size: 0.76rem;
  line-height: 1.45;
}

.tc-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tc-num {
  flex: 0 0 auto;
  min-width: 20px;
  text-align: right;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted, #9ca3af);
  font-variant-numeric: tabular-nums;
}

.tc-row .tc-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
}

.tc-row .tc-del {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  color: var(--danger, #dc2626);
}

/* One point left: removing it would leave nothing to type into. */
.tc-row .tc-del:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.tc-add {
  align-self: flex-start;
  min-height: 44px;
  margin-top: 2px;
}

@media (max-width: 420px) {
  .tc-num { min-width: 16px; font-size: 0.8rem; }
  .tc-row { gap: 6px; }
}

/* Term card preview: points as lines, not one run of words. */
.terms-card-point {
  display: block;
  position: relative;
  padding-left: 12px;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.terms-card-point::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--text-muted, #9ca3af);
}

.terms-card-more {
  display: inline-block;
  margin-top: 2px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted, #9ca3af);
}

.terms-card-usage {
  display: block;
  margin-top: -3px;
  color: var(--text-muted, #94a3b8);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.35;
}

@media (max-width: 1023px) {
  #settingsTab-terms .terms-editor-group {
    margin: 0 0 12px;
    padding: 15px;
    border: 1px solid var(--border-light, #e5e7eb);
    border-radius: 14px;
    background: var(--card, #fff);
  }

  #settingsTab-terms .terms-editor-group .form-label {
    margin-bottom: 5px;
    font-size: 0.9rem;
    line-height: 1.35;
  }

  #settingsTab-terms .terms-field-use { margin-bottom: 12px; }

  #settingsTab-terms #saveTermsSettings {
    position: sticky;
    z-index: 8;
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: 100%;
    margin-top: 16px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
  }
}

/* Invoice design: a Preview affordance on each template card. */
.inv-tpl-card { position: relative; }

.inv-tpl-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 8px;
  padding: 7px 12px;
  min-height: 34px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 999px;
  background: var(--card, #fff);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--primary, #0369A1);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.inv-tpl-preview .material-symbols-rounded { font-size: 0.95rem; }

.inv-tpl-preview:hover,
.inv-tpl-preview:focus-visible {
  background: var(--gray-50, #f0f9ff);
  border-color: var(--primary, #0369A1);
}

/* The active card is tinted, so the chip needs its own ground to stay legible. */
.inv-tpl-card.active .inv-tpl-preview { background: var(--card, #fff); }

/* Invoice design preview: the PDF renders inside the shared modal.
   The panel is 520px by default, which squeezes an A4 page down to an
   unreadable thumbnail, so this one modal widens itself. Scoped with :has()
   so no other modal is touched. */
.modal-panel:has(.inv-preview-body) { max-width: min(880px, 94vw); }

.modal-body:has(.inv-preview-body) { padding: 0; overflow: hidden; }

.inv-preview-body {
  display: block;
  /* 1:1.414 is A4 portrait; capped so the panel still fits 90dvh with the
     header and footer around it. */
  height: min(calc((880px - 2px) * 1.414), 66dvh);
  background: var(--muted, #f1f5f9);
}

.inv-preview-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.inv-preview-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md, 12px);
  justify-content: flex-end;
  width: 100%;
}

.inv-preview-actions .btn { min-height: 44px; }

/* ===== css/nav-v2.css ===== */
/* =====================================================
   [nav-v2] Flat tab bar + "More" sheet — mobile navigation model
   ported from the Flutter shell (lib/features/shell/app_shell.dart).

   Flag:    localStorage.setItem('sh_nav','v2')   → js/helpers/nav-v2.js
            adds body.nav-v2 and rebuilds #bottomNav.
   Revert:  localStorage.removeItem('sh_nav')     → instant, v1 untouched.
   Remove:  delete this file + js/helpers/nav-v2.js + their tags in index.html.

   EVERY rule below is scoped to body.nav-v2, so with the flag off this
   stylesheet is inert — no v1 selector is overridden. Loaded LAST so it
   beats mobile-overrides.css's .floating-tabbar inset rule on specificity
   AND order (no !important — house rule).
   ===================================================== */

body.nav-v2 {
  /* Content height; safe-area is added on top of this. 2026-08-17: 56 → 62 → 70px
     on Rajan's feedback from a real phone. 70px sits between iOS (~49+inset) and
     Android M3 (80px) — comfortable thumb target without eating the page.
     Everything else derives from this ONE token: item min-height and the wizard
     bottom-bar clearance calc below. Change here only. */
  --navv2-bar-h: 70px;
  --navv2-tile: 56px;           /* More-sheet icon tile */
}

@media (max-width: 768px) {

  /* ─── Flat tab bar ───────────────────────────────────
     Flush to the bottom edge, full-bleed, square, no shadow — the bar reads
     as part of the app frame instead of an object floating over it. */
  body.nav-v2 .floating-tabbar {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    height: auto;
    min-height: var(--navv2-bar-h);
    padding: 0 2px calc(env(safe-area-inset-bottom, 0px));
    border: none;
    border-top: 1px solid var(--border, hsla(210, 25%, 88%, 0.9));
    border-radius: 0;
    box-shadow: none;
    background: var(--card);
    justify-content: stretch;
    gap: 0;
  }

  /* Hide-on-scroll, app-wide (v1 hides only inside a wizard).
     Travel is bar + safe-area + the hairline, so it fully clears the edge. */
  body.nav-v2.sh-tabhide .floating-tabbar {
    transform: translateY(calc(100% + 2px));
    pointer-events: none;
    /* keeps slid-away tabs out of the Tab order — same convention as v1 */
    visibility: hidden;
  }

  /* ─── Tab items ─────────────────────────────────────── */
  body.nav-v2 .floating-tabbar-item,
  body.nav-v2 .nav-more-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1 1 0;
    min-width: 0;
    min-height: var(--navv2-bar-h);
    padding: 6px 2px 7px;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
  }

  /* M3-style pill behind the active icon — the only "lift" left in the bar. */
  body.nav-v2 .floating-tabbar-item .material-symbols-rounded,
  body.nav-v2 .floating-tabbar-item .ico-collect,
  body.nav-v2 .floating-tabbar-item .nav-art,
  body.nav-v2 .nav-more-item .material-symbols-rounded,
  body.nav-v2 .nav-more-item .nav-art {
    font-size: 22px;
    width: 52px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    border-radius: 100px;
    color: var(--text-secondary);
    background: transparent;
    transition: background 180ms ease, color 180ms ease;
  }

  /* 3D art needs real pixels to read — at the glyph's 22px it turns to mush.
     The 52x34 pill stays the active indicator; the art letterboxes inside it. */
  body.nav-v2 .floating-tabbar-item .nav-art,
  body.nav-v2 .nav-more-item .nav-art {
    object-fit: contain;
    padding: 2px 0;
  }

  /* Direct child, same reason as the sheet label below — keeps the rule from
     ever reaching an icon <span> if a tab gains a wrapper later. */
  body.nav-v2 .floating-tabbar-item > span:last-child,
  body.nav-v2 .nav-more-item > span:last-child {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.66rem;
    font-weight: 500;
    line-height: 1.1;
    color: var(--text-secondary);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 180ms ease;
  }

  body.nav-v2 .floating-tabbar-item.active .material-symbols-rounded,
  body.nav-v2 .floating-tabbar-item.active .ico-collect,
  body.nav-v2 .floating-tabbar-item.active .nav-art,
  body.nav-v2 .nav-more-item.active .material-symbols-rounded,
  body.nav-v2 .nav-more-item.active .nav-art {
    color: var(--primary);
    background: var(--primary-light, hsla(200, 85%, 50%, 0.12));
    font-variation-settings: 'FILL' 1, 'wght' 500;
  }

  body.nav-v2 .floating-tabbar-item.active > span:last-child,
  body.nav-v2 .nav-more-item.active > span:last-child {
    color: var(--primary);
    font-weight: 700;
  }

  /* Collect uses an inline SVG, not a ligature — match the icon box. */
  body.nav-v2 .floating-tabbar-item .ico-collect {
    display: block;
    padding: 3px 0;
    fill: currentColor;
  }

  /* ─── Retired under v2 ───────────────────────────────
     The + FAB (Quick Create) and the hamburger drawer are both superseded:
     every create action and every page now lives behind More, matching the
     Flutter shell. The markup and JS stay in place for v1 — see the
     [nav-v2] note above #quickCreateBtn in index.html. */
  body.nav-v2 .floating-tabbar-fab,
  body.nav-v2 .menu-toggle {
    display: none;
  }

  /* dash_v2 A/B appends a Profile→Settings tab to #bottomNav (ab-loader.js).
     Under v2 that page lives in the More sheet, so a 6th tab is suppressed. */
  body.nav-v2 .floating-tabbar-item[data-page="settings"] {
    display: none;
  }

  /* ─── Fixed bottom bars: clearance over the flat bar ──
     v1's rules assume the floating geometry (62px bar + 22px lift). The flat
     bar is flush, so clearance is just its own height + the safe area. */
  body.nav-v2:has(.wizard-wrap):not(.sh-tabhide) .total-bar.visible {
    bottom: calc(var(--navv2-bar-h) + env(safe-area-inset-bottom, 0px));
  }

  /* ─── Walk-in (Quick Order) wizard: no tab bar at all ──
     A wizard is a task flow, not a place to navigate from. Hiding the bar lets
     the Next bar sit at the TRUE bottom and never move — previously it rode up
     and down with the tab bar on every scroll (v1 does the same via
     app.css:6992), which is what made the Next button feel misplaced.

     Keyed off the wizard nav ELEMENT, not body.wizard-active: app.js:3365
     strips that class on every non-quotation navigate, so it cannot be trusted
     — that race is why walk-in-orders.css:631's FAB-hide silently fails and the
     install button floats over the Next bar. `.wi-wizard-nav` only exists while
     the wizard is on screen, so it is the reliable signal. Same idiom the
     codebase already uses for the quotation wizard (body:has(.wizard-wrap)).
     Quotation wizard keeps its existing lift behaviour above — untouched. */
  body.nav-v2:has(.wi-wizard-nav) .floating-tabbar {
    display: none;
  }

  body.nav-v2:has(.wi-wizard-nav) .wi-wizard-nav {
    bottom: 0;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }

  /* The Android soft keyboard needs the full visual viewport for the field.
     Hide app navigation while typing; it returns automatically on blur. */
  body.nav-v2.keyboard-open .floating-tabbar,
  body.nav-v2:has(#wiStepContent :is(input, textarea, select):focus) .floating-tabbar {
    display: none;
  }

  /* Re-assert the floating-FAB hide on the reliable selector, so nothing
     crowds the Next bar (walk-in-orders.css:631 intends this but is gated on
     the class app.js strips). */
  body.nav-v2:has(.wi-wizard-nav) .pwa-install-btn,
  body.nav-v2:has(.wi-wizard-nav) .sh-wa-float,
  body.nav-v2:has(.wi-wizard-nav) .munim-root {
    display: none;
  }

  /* ─── More sheet ─────────────────────────────────────
     Same open/close recipe as .quick-create-sheet (transform + visibility on
     one transition, backdrop at z-index 1000 / sheet at 1001) so it layers
     against modals exactly the way the proven sheet does. Full-bleed and
     bottom-anchored, because it is now the app's primary navigation. */
  body.nav-v2 .nav-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
  }

  body.nav-v2 .nav-sheet-backdrop.open {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }

  body.nav-v2 .nav-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 86vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: var(--card-bg, #fff);
    border-radius: 20px 20px 0 0;
    z-index: 1001;
    padding: 10px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), visibility 0.3s ease;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
  }

  body.nav-v2 .nav-sheet.open {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
  }

  /* Munim (and any other floater above 1001) must not sit on top of the sheet.
     Munim is z-index 1050 by design — ABOVE the WhatsApp/install floaters but
     below .modal-overlay — and the More sheet is 1001, so without this it lands
     on the grid (seen overlapping "Packages"). The sheet sets no body.modal-open,
     so it needs the same explicit hide the notif and quick-create sheets already
     get; see the matching rule and its reasoning at css/munim.css:44. Kept here
     rather than in munim.css so nav-v2 stays self-contained (revert = delete this
     file + js/helpers/nav-v2.js). */
  body.nav-v2:has(.nav-sheet.open) .munim-root,
  body.nav-v2:has(.nav-sheet.open) .sh-wa-float {
    display: none;
  }

  body.nav-v2 .nav-sheet-handle {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--border, hsl(210, 20%, 86%));
    margin: 0 auto 14px;
  }

  body.nav-v2 .nav-sheet-group-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary);
    margin: 6px 0 12px 2px;
  }

  body.nav-v2 .nav-sheet-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px 8px;
    margin-bottom: 18px;
  }

  body.nav-v2 .nav-sheet-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    min-width: 0;
    -webkit-tap-highlight-color: transparent;
  }

  body.nav-v2 .nav-sheet-item .nav-sheet-tile {
    width: var(--navv2-tile);
    height: var(--navv2-tile);
    border-radius: 16px;
    background: var(--muted, hsl(210, 20%, 94%));
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 150ms ease;
  }

  body.nav-v2 .nav-sheet-item .material-symbols-rounded,
  body.nav-v2 .nav-sheet-item .ico-collect {
    font-size: 24px;
    color: var(--text-secondary);
  }

  body.nav-v2 .nav-sheet-item .ico-collect {
    width: 24px;
    height: 24px;
    fill: currentColor;
  }

  /* Direct child ONLY: the icon <span> is itself the last child of .nav-sheet-tile,
     so a descendant selector here also matches the icon and — being one class
     heavier than the icon rule — shrinks it to label size. Caught in QA. */
  body.nav-v2 .nav-sheet-item > span:last-child {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.2;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.nav-v2 .nav-sheet-item:active .nav-sheet-tile {
    background: var(--primary-light, hsla(200, 85%, 50%, 0.16));
  }

  /* Current page — mirrors the Flutter sheet's highlighted entry. */
  body.nav-v2 .nav-sheet-item.active .nav-sheet-tile {
    background: var(--primary-light, hsla(200, 85%, 50%, 0.14));
  }

  body.nav-v2 .nav-sheet-item.active .material-symbols-rounded,
  body.nav-v2 .nav-sheet-item.active .ico-collect,
  body.nav-v2 .nav-sheet-item.active > span:last-child {
    color: var(--primary);
  }

  body.nav-v2 .nav-sheet-logout {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 44px;
    padding: 10px 2px 0;
    margin-top: 2px;
    border: none;
    border-top: 1px solid var(--border, hsl(210, 20%, 90%));
    background: none;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--danger, hsl(0, 72%, 51%));
  }

  body.nav-v2 .nav-sheet-logout .material-symbols-rounded {
    font-size: 22px;
  }
}

/* Desktop keeps the permanent sidebar — the tab bar and sheet never show.
   (v1 already hides .floating-tabbar here; the sheet needs the same guard
   so a stale open state can never leak onto a resized desktop viewport.) */
@media (min-width: 769px) {
  body.nav-v2 .nav-sheet,
  body.nav-v2 .nav-sheet-backdrop {
    display: none;
  }
}

/* ─── Launcher bar: docked (2026-09-21) ──────────────────────────────────
   Was a floating pill + detached round gear; now sunk flush to the ground.
   The bar's card background runs to the true bottom edge and the safe-area
   inset is PADDING, so on phones with system buttons / a gesture bar
   (edge-to-edge PWA, viewport-fit=cover) our tabs sit above them while the
   bar colour fills behind. In a normal browser tab the inset is 0 and the
   browser already ends the viewport above the system buttons.
   Markup is unchanged: .ft-pill is now just the flat tab row and .ft-gear a
   flat end tab behind a hairline divider. */
@media (max-width: 768px) {
  body.nav-v2 .floating-tabbar {
    left: 0;
    right: 0;
    bottom: 0;
    min-height: var(--navv2-bar-h);
    height: auto;
    padding: 0 6px env(safe-area-inset-bottom, 0px);
    border: none;
    border-top: 1px solid var(--border, hsla(210, 25%, 88%, 0.9));
    border-radius: 0;
    background: var(--card);
    box-shadow: none;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    gap: 0;
  }

  /* Travel = bar + safe-area padding (both inside 100%) + the hairline */
  body.nav-v2.sh-tabhide .floating-tabbar {
    transform: translateY(calc(100% + 2px));
  }

  body.nav-v2 .ft-pill {
    flex: 1;
    min-width: 0;
    min-height: var(--navv2-bar-h);
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  body.nav-v2 .floating-tabbar-item {
    min-height: var(--navv2-bar-h);
    padding: 6px 2px 7px;
  }

  /* The gear is a settings tab, but the ab-loader suppression rule above
     (`[data-page="settings"] { display:none }`) must not catch it. */
  body.nav-v2 .floating-tabbar-item.ft-gear {
    position: relative;
    display: flex;
    flex: 0 0 56px;
    width: 56px;
    min-height: var(--navv2-bar-h);
    height: auto;
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    justify-content: center;
    gap: 0;
    padding: 0;
  }

  /* Hairline divider: the gear is a setting, not a fifth destination */
  body.nav-v2 .floating-tabbar-item.ft-gear::before {
    content: '';
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 1px;
    background: var(--border, hsla(210, 25%, 88%, 0.9));
  }

  body.nav-v2 .floating-tabbar-item.ft-gear .material-symbols-rounded {
    font-family: 'Material Symbols Rounded';
    font-size: 1.45rem;
    width: auto;
    height: auto;
    line-height: 1;
    background: transparent;
  }

  body.nav-v2 .floating-tabbar-item.ft-gear .nav-art {
    width: 30px;
    height: 30px;
    padding: 0;
    background: transparent;
  }

  body.nav-v2 .floating-tabbar-item.ft-gear.active .material-symbols-rounded {
    color: var(--primary);
    background: transparent;
  }
}

/* ─── Tab micro-interactions (2026-08-30) ───────────────────────
   Same physical language as the home tiles: press = quick squish,
   becoming active = springy pop. Gear included (.floating-tabbar-item). */
@media (max-width: 768px) {
  body.nav-v2 .floating-tabbar-item .material-symbols-rounded,
  body.nav-v2 .floating-tabbar-item .ico-collect,
  body.nav-v2 .floating-tabbar-item .nav-art {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 180ms ease, color 180ms ease;
  }

  body.nav-v2 .floating-tabbar-item:active .material-symbols-rounded,
  body.nav-v2 .floating-tabbar-item:active .ico-collect,
  body.nav-v2 .floating-tabbar-item:active .nav-art {
    transform: scale(0.8);
    transition-duration: 0.1s;
  }

  @keyframes navv2-pop {
    0%   { transform: scale(0.8); }
    55%  { transform: scale(1.14); }
    100% { transform: scale(1); }
  }

  body.nav-v2 .floating-tabbar-item.active .material-symbols-rounded,
  body.nav-v2 .floating-tabbar-item.active .ico-collect {
    animation: navv2-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  body.nav-v2 .floating-tabbar-item.active > span:last-child {
    animation: navv2-label 0.3s ease;
  }

  @keyframes navv2-label {
    0%  { transform: translateY(2px); opacity: 0.5; }
    100% { transform: translateY(0); opacity: 1; }
  }
}

/* ===== css/app-charge-restoration.css ===== */
/* What a charge was FOR, under its amount. */
.extras-row-line { font-size: 0.78rem; color: var(--text-secondary); }
/* A row's actions are a bar, not one button: a draft can be edited, sent or deleted and a
   signed charge can be reversed, so .extras-row-action (singular) went with the single-button
   row. The bar itself is .extras-row-actions, further down with the reversal states. */

/* ── Add Charge ────────────────────────────────────────────────────────────────────────
   Built for 375px first: every control is its own full-width row, the quantity stepper is
   the largest thing on the screen, and the money line is the only bold thing. Lives inside
   SH.modal's panel, so nothing here sets a width. */
.addchg { display: flex; flex-direction: column; gap: 12px; }

.addchg-lede { font-size: 0.85rem; color: var(--text-secondary); }

.addchg-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 12px 14px;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  cursor: pointer;
}
.addchg-choice:hover { border-color: var(--primary); }
.addchg-choice.is-off { opacity: 0.55; cursor: default; }
.addchg-choice.is-off:hover { border-color: var(--border-light); }

.addchg-choice-ico { font-size: 1.4rem; color: var(--primary); flex-shrink: 0; }
.addchg-choice-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.addchg-choice-label { font-size: 0.92rem; font-weight: 600; }
.addchg-choice-sub { font-size: 0.75rem; color: var(--text-muted); }
.addchg-choice-go { font-size: 1.1rem; color: var(--text-muted); flex-shrink: 0; }

.addchg-agreed {
  padding: 12px 14px;
  background: var(--muted);
  border-radius: var(--radius-md);
}
.addchg-agreed-name { font-size: 0.92rem; font-weight: 600; margin-bottom: 4px; }
.addchg-agreed-row { font-size: 0.8rem; color: var(--text-secondary); }
/* What has already been charged against this item, and what is still waiting for the customer.
   Tinted apart from the agreed line so the three cannot be read as one number. */
.addchg-agreed-prev { color: var(--text-primary); font-weight: 600; }
.addchg-agreed-pending { color: #92400e; }

.addchg-field { display: flex; flex-direction: column; gap: 6px; }
.addchg-label { font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); }

.addchg-stepper {
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  align-items: center;
  gap: 10px;
}
.addchg-step {
  min-height: 56px;
  font-size: 1.5rem;
  font-weight: 600;
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  cursor: pointer;
}
.addchg-step:hover { border-color: var(--primary); }
.addchg-qty {
  min-height: 56px;
  width: 100%;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  -moz-appearance: textfield;
  appearance: textfield;
}
/* The stepper is the control; the native spinners would be a second, 12px-tall one. */
.addchg-qty::-webkit-outer-spin-button,
.addchg-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.addchg-calc {
  padding: 12px 14px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.addchg-calc-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.addchg-calc-row.is-total {
  padding-top: 8px;
  border-top: 1px solid var(--border-light);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.addchg-fine { font-size: 0.75rem; color: var(--text-muted); line-height: 1.5; }

.addchg-ok {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  font-weight: 600;
  color: #166534;
}
.addchg-ok .material-symbols-rounded { font-size: 1.2rem; }

.addchg-footer { display: flex; gap: 10px; width: 100%; }
.addchg-footer .btn { min-height: 48px; }
.addchg-go { flex: 1; }
.addchg-go:disabled { opacity: 0.5; cursor: default; }

@media (min-width: 820px) {
  /* More room, so the stepper stops being thumb-sized and the choices tighten up. */
  .addchg-stepper { grid-template-columns: 48px 1fr 48px; }
  .addchg-step { min-height: 48px; }
  .addchg-qty { min-height: 48px; font-size: 1.4rem; }
  .addchg-choice { min-height: 56px; }
}

/* ── Additional Charges: the row's own action bar, and the reversal states ─────────────
   .extras-row is a flex COLUMN, so buttons sit in their own wrapped row rather than
   stretching the full width one under another. 44px targets at 375px, per the mobile rule. */
.extras-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 2px;
}
.extras-act { min-height: 44px; }
.extras-row-line.is-link { color: var(--text-muted); }
.extras-row-line.is-warn { color: #92400e; }
/* A reversal is money LEAVING the bill, so it reads green-negative rather than as a charge. */
.extras-row-delta.is-down { color: #047857; }
.extras-row.is-reversal { border-left: 3px solid #A7F3D0; }
/* The one number a studio actually needs from the whole ledger. */
.extras-net {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px dashed var(--border-light);
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.extras-net strong { font-size: 0.95rem; color: var(--text-primary); }

/* ── Reverse Charge picker ───────────────────────────────────────────────────────────── */
.revchg-line {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  background: var(--surface, #fff);
}
.revchg-line-name { font-size: 0.92rem; font-weight: 600; }
.revchg-line-sub { font-size: 0.75rem; color: var(--text-muted); }
.revchg-toggle { min-height: 44px; align-self: stretch; }
.revchg-toggle.is-on { border-color: var(--primary); color: var(--primary); font-weight: 600; }
.revchg-all { align-self: flex-end; }
.revchg-warn { color: #92400e; }

/* ===== css/deliverables-editor.css ===== */
/* =====================================================
   SahiHisab — Deliverables editor (Stage 2b-A, Task 3)

   Mobile-first at 375px. Every control is at least 44px tall, and the item card stacks on a phone
   so no field is ever narrower than a thumb. The legacy strip is styled as information, not as a
   form: its values are in the signature digest and print to clients, so they must look settled
   rather than editable.
   ===================================================== */

.dlv-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── a section ───────────────────────────────────────────────────────────────────────────── */

/* NOT A BOX. There were five nested boxes on the New Package form — a Deliverables row holding
   four bordered sections, each holding bordered items — and the nesting read as depth that is not
   there: the four categories are siblings, not four sub-forms. They are separated by a hairline
   now, which is all the separation four short lists need. The ONE container is the Deliverables
   row itself. */
.dlv-sec {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 10px 2px;
}

.dlv-sec + .dlv-sec { border-top: 1px solid var(--border-light); }

.dlv-sec-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 2px 8px;
}

.dlv-sec-hd .material-symbols-rounded {
  font-size: 1.1rem;
  color: var(--text-secondary);
}

.dlv-sec-hd h4 {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text-primary);
}

.dlv-count {
  margin-left: auto;
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* ── the chips: the primary way in ───────────────────────────────────────────────────────────
   A studio recognises "Trailer" and taps it. The empty form underneath is the fallback for the
   unusual item, not the default interaction — which is how this shipped first, and it made a
   studio type and configure five rows to describe a package it quotes every week. */

.dlv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 2px 10px;
}

/* 44px, not 36px. This file's header claims every control clears 44px and the chip was the one
   that did not — and it is the control a studio taps most. */
/* The chosen ones carry a tick, so "on" is not conveyed by colour alone. */
.dlv-chip .material-symbols-rounded {
  font-size: 0.95rem;
  margin-right: 4px;
  vertical-align: -3px;
}

.dlv-chip-add {
  border-style: dashed;
  font-weight: 600;
}

.dlv-chip-add:hover { border-style: solid; }

.dlv-chip {
  min-height: 44px;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

.dlv-chip:hover { border-color: var(--primary); color: var(--primary); }

.dlv-chip.is-on {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.dlv-empty {
  margin: 2px 0 8px;
  padding: 10px 2px;
  color: var(--text-muted);
  font-size: 0.78rem;
  text-align: center;
}

/* ── an item: two rows at 375px, not five ────────────────────────────────────────────────────
   Row 1 is [36px thumb] [name, flexible] [remove]. Row 2 is [qty] [unit] [detail], indented to
   sit under the name so the thumb column reads as one object. Hard Copy adds a third row.
   The first version stacked five captioned fields and cost ~380px per item; an eight-item wedding
   package was a 3,000px scroll on a phone. */

.dlv-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 0 2px;
  margin-bottom: 2px;
  /* No border. An item is the CONTENTS of its section, not a card inside it — boxing it added a
     fourth level of nesting to a list of two fields. Folded state keeps a tint so a condensed
     item still reads as one object. */
  border: 0;
  border-radius: 8px;
}

.dlv-r1 {
  display: grid;
  grid-template-columns: 36px 1fr 32px;
  align-items: center;
  gap: 8px;
}

.dlv-r2,
.dlv-r3 {
  display: grid;
  gap: 6px;
  /* indent under the thumb so a row reads as one item, not three loose boxes */
  padding-left: 44px;
}

/* The unit column holds a SELECT, so it needs room for the word plus a chevron: at 84px
   "photos" rendered as "pho…". */
.dlv-r2 { grid-template-columns: 56px 104px 1fr; }
/* A known item shows only what it needs, so the row has to fit whatever survived. */
.dlv-r2.no-unit   { grid-template-columns: 56px 1fr; }
.dlv-r2.note-only { grid-template-columns: 1fr; }

/* A known item's name is the chip above; here it reads, it does not re-ask. */
.dlv-name {
  min-width: 0;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Two across on a phone, four once there is room. Each cell carries its own caption, so the
   labels can never drift away from the fields the way they did when they were a separate row. */
.dlv-r3 { grid-template-columns: 1fr 1fr; }

.dlv-f3 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.dlv-f3 > span {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-left: 2px;
}

/* ── fields: the label is the placeholder, never a caption above every box ────────────────── */

.dlv-in {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.84rem;
}

.dlv-in::placeholder { color: var(--text-muted); font-size: 0.78rem; }

.dlv-in-label { font-weight: 600; }

.dlv-in-qty,
.dlv-in-unit { text-align: center; }

/* The injected pickers. _customSelect returns its own wrapper with a .form-control select inside;
   the grid owns the width, so the wrapper must not carry one of its own. */
.dlv-pick { min-width: 0; }

.dlv-pick select {
  width: 100%;
  min-height: 44px;
  border-radius: 8px;
  font-size: 0.84rem;
}

.dlv-pick-label select { font-weight: 600; }

.dlv-r3 .dlv-in { font-size: 0.78rem; }

.dlv-in:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--glow-subtle);
}

.dlv-in[readonly] {
  background: var(--surface-muted);
  color: var(--text-secondary);
}

/* ── the image slot ──────────────────────────────────────────────────────────────────────── */

.dlv-thumb {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  overflow: hidden;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--text-muted);
  cursor: pointer;
}

.dlv-thumb.has-img { border-style: solid; }
.dlv-thumb.is-ro { cursor: default; }
.dlv-thumb .material-symbols-rounded { font-size: 1.05rem; }

.dlv-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── remove ──────────────────────────────────────────────────────────────────────────────── */

.dlv-del {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.dlv-del:hover { background: var(--danger-light); color: var(--destructive); }
.dlv-del .material-symbols-rounded { font-size: 1rem; }

/* ── the inline confirm ──────────────────────────────────────────────────────────────────────
   Asked in place, never through SH.confirm: that goes via SH.modal, which swaps rather than
   stacks, so it threw the whole editor away and a studio lost the list. */

.dlv-ask {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 10px;
  border-radius: 10px;
  background: var(--danger-light);
}

.dlv-ask > span {
  flex: 1 1 100%;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-primary);
}

.dlv-ask button {
  flex: 1;
  min-height: 44px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.dlv-ask-yes {
  border-color: var(--destructive);
  background: var(--destructive);
  color: #fff;
}

/* ── the legacy strip: information, not a form ───────────────────────────────────────────── */

.dlv-legacy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border-radius: 10px;
  background: var(--surface-muted);
}

.dlv-legacy-hd {
  flex: 1 0 100%;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.dlv-legacy-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 4px 4px 9px;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  background: var(--card);
  color: var(--text-secondary);
  font-size: 0.76rem;
}

.dlv-legacy-chip b {
  font-weight: 600;
  color: var(--text-muted);
}

.dlv-legacy-x {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.dlv-legacy-x:hover { background: var(--danger-light); color: var(--destructive); }
.dlv-legacy-x .material-symbols-rounded { font-size: 0.95rem; }

/* `.dlv-add` — the full-width dashed "Add your own" button — is gone. It rides in the chip row
   as `.dlv-chip-add` now; see chipsHtml(). Four of those buttons, one per section, were as loud
   as the sections themselves. */

/* ── width: there is no "desktop" here, and that mistake shipped ─────────────────────────────
   The editor lives inside `.modal-panel`, which is `max-width: min(520px, 92vw)`. A viewport
   media query says nothing about that: at a 1000px viewport the panel is still ~484px wide.
   The first version used `@media (min-width: 768px)` to put items two to a row and to pull name,
   qty and unit onto one line with `display: contents`. On a real screen that split 484px into two
   ~238px columns, and after the thumb, qty, unit and remove button the name field had almost
   nothing left — it rendered as "What th" and the second column overflowed the panel.

   So the two-row item layout is the layout at every width. It is the one that was measured
   against a real panel. If a wider editor is ever wanted, it needs a container query or a
   width-derived class, NOT a viewport breakpoint — this file has no idea how wide its box is.

   The only thing width changes is the album row, which is three short fields and fits side by
   side once there is a little more room. */

@media (min-width: 480px) {
  .dlv-r2 { grid-template-columns: 64px 124px 1fr; }
  .dlv-r2.no-unit { grid-template-columns: 64px 1fr; }
  /* .dlv-r3 stays TWO across at every width. Four fitted the viewport but not the box: the panel
     is max-width min(520px, 92vw), so four tracks were ~105px each and the size select read
     "12x...". The same mistake as the two-column item grid — a viewport query knows nothing about
     a fixed-width modal. */
}


/* ── INLINE: the same editor, mounted on a form instead of in a modal ────────────────────────
   SH.deliverablesEditor.mount() renders into an element the caller owns, so these four sections
   now sit directly on the New Package form and on the wizard's package step. The chips are the
   whole point — a vocabulary behind a button is a vocabulary a studio never learns is there. */

.dlv-editor-inline {
  gap: 8px;
}

/* Inline, the section border would be a box inside a box: the form already groups these. */
.dlv-editor-inline .dlv-sec {
  border-color: var(--border-light);
  background: transparent;
  padding: 6px 0 8px;
}

.dlv-editor-inline .dlv-sec + .dlv-sec {
  border-top: 1px solid var(--border-light);
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
}

/* ── folding: put a finished item away without removing it ───────────────────────────────────
   All four sections are on screen at once now, and an album open to its full height is seven
   inputs. A studio that has finished one wants it out of the way, which a delete button cannot
   express. Folded keeps the name, the thumbnail and a summary of every value — condensed, never
   hidden. State lives on `it.id`, which canon excludes from the digest. */

.dlv-fold {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.dlv-fold:hover { background: var(--surface-muted); color: var(--text-secondary); }

.dlv-fold .material-symbols-rounded {
  font-size: 1.1rem;
  transition: transform .18s ease;
}

/* The fourth column belongs ONLY to an item that actually draws a fold control. Applying it to
   every .dlv-r1 left the remove button sitting in column 3 on items with nothing to fold, which
   shifted it 40px left of every other row. */
.dlv-item.has-fold > .dlv-r1 { grid-template-columns: 36px 1fr 32px 32px; }

.dlv-item.is-folded .dlv-fold .material-symbols-rounded { transform: rotate(-90deg); }

.dlv-item.is-folded {
  background: var(--surface-muted);
  padding: 6px 8px;
}

/* The summary of a folded item. Indented under the thumb like the rows it replaces, so the eye
   reads it as that item's contents and not as a new line of its own. */
.dlv-sum {
  padding-left: 44px;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

/* ── packing: the extras an album ships in ───────────────────────────────────────────────────
   Checkboxes, because these are five short words and the old package accordion has offered
   exactly this row for years. A list, so it has its own write path — see setExtras(). */

.dlv-extras {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 2px 0 0 44px;
}

.dlv-extras-hd {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.dlv-extras.is-ro {
  font-size: 0.76rem;
  color: var(--text-secondary);
}

.dlv-extra {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  padding: 4px 11px 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
}

.dlv-extra input {
  width: 15px;
  height: 15px;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
}

.dlv-extra.is-on {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}

/* ── the album row, now up to six fields ─────────────────────────────────────────────────────
   photos / size / sheets / rate / paper / cover. Two across stays the layout inside a modal, for
   the reason the note above gives: a viewport query knows nothing about a 520px panel.

   The WIZARD mount is the one case that genuinely has room — it is on the page, not in a panel —
   so it gets three across, keyed off the host class the step owns rather than a breakpoint. That
   is the "width-derived class" the note asks for. */

@media (min-width: 760px) {
  .quo-dlv-editor .dlv-r3 { grid-template-columns: 1fr 1fr 1fr; }
}


/* ── a section collapses ─────────────────────────────────────────────────────────────────────
   Four sections, each with chips and items, is a long form. A studio working on the video list
   wants the soft-copy list out of the way — and before this, the only thing that expressed that
   was deleting it. Sections start OPEN: the chips being visible without pressing anything is the
   whole point of mounting this on the form. */

.dlv-sec-hd {
  cursor: pointer;
  user-select: none;
  border-radius: 8px;
  min-height: 44px;
}

.dlv-sec-hd:hover { background: var(--surface-muted); }

.dlv-sec-hd:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.dlv-sec-chev {
  font-size: 1rem;
  color: var(--text-muted);
  transition: transform .18s ease;
}

.dlv-sec.is-shut .dlv-sec-chev { transform: rotate(-90deg); }

/* Nothing below the header when shut, so the row costs one line. */
.dlv-sec.is-shut { padding-bottom: 6px; }

/* ── width: the panel is wider now, so the album row can breathe ─────────────────────────────
   app.css widens `.modal-panel:has(.dlv-editor)` once the viewport can afford it. That is a
   legitimate viewport query because it decides the PANEL's own width — unlike the mistake this
   file's older note records, where a viewport query was used to guess how wide a FIXED 520px
   panel was. Here the two move together, so the inner grid can key off the same breakpoint. */

@media (min-width: 820px) {
  .modal-panel:has(.dlv-editor) .dlv-r3 { grid-template-columns: repeat(3, 1fr); }
  .modal-panel:has(.dlv-editor) .dlv-r2 { grid-template-columns: 80px 140px 1fr; }
  /* BOTH variants have to be restated here, and forgetting one is visible immediately.
     `.modal-panel:has(.dlv-editor) .dlv-r2` is (0,3,0); `.dlv-r2.note-only` is only (0,2,0), so
     the wide rule beat it and a note-only item — "All Event Photos", which shows nothing but a
     detail box — had its note squeezed into the 80px qty column, rendering as "Detail (op". The
     narrow layout never had this because it never overrode the base rule. */
  .modal-panel:has(.dlv-editor) .dlv-r2.no-unit { grid-template-columns: 80px 1fr; }
  .modal-panel:has(.dlv-editor) .dlv-r2.note-only { grid-template-columns: 1fr; }
}


/* ── "Advanced": the album's specification, not its price ────────────────────────────────────
   Quantity, photos, size, sheets and the extra-sheet rate build a price. Paper stock, cover
   material and the box it ships in are a specification most studios never set, and asking for
   all seven at once made an album the tallest thing on the form.

   The toggle is ALWAYS live. It used to render disabled once the item held one of these, on the
   theory that there was nothing left to expand — but a studio that wants the specification out of
   the way again has no other way to say so, and a button that visibly does nothing when tapped
   reads as broken. It auto-opens once instead, then obeys. */

.dlv-adv-t {
  display: inline-flex;
  align-items: center;
  /* .dlv-item is a flex COLUMN, whose children stretch by default — so inline-flex alone still
     rendered this full width and it read as a second "Add your own". It has to hug its label. */
  align-self: flex-start;
  gap: 6px;
  min-height: 44px;
  margin-left: 44px;
  padding: 4px 10px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
}

.dlv-adv-t:hover { border-color: var(--primary); color: var(--primary); }

.dlv-adv-t .material-symbols-rounded { font-size: 0.95rem; }

.dlv-adv-chev { transition: transform .18s ease; }
.dlv-adv-t.is-open .dlv-adv-chev { transform: rotate(180deg); }

.dlv-adv { margin-top: 6px; }


/* ── Quotation wizard: the deliverables select ───────────────────
   Replaces the accordion's Deliverables and Albums sections. Mobile-first at 375px; the two
   actions sit side by side and both clear 44px, and the library list stacks. */
.quo-dlv {
  margin-bottom: 12px;
  padding: 10px;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  background: var(--surface-muted);
}

.quo-dlv-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quo-dlv-head .material-symbols-rounded {
  font-size: 1rem;
  color: var(--text-secondary);
}

.quo-dlv-title {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.quo-dlv-count {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.quo-dlv-hint {
  margin: 4px 0 10px;
  font-size: 0.74rem;
  color: var(--text-muted);
}

.quo-dlv-actions {
  display: flex;
  gap: 8px;
}

/* The two actions are a PAIR of choices, so they read as a pair: the ghost gets a real outline
   instead of looking like a text link parked next to a solid button. */
.quo-dlv-actions .btn {
  flex: 1;
  min-height: 44px;
  font-size: 0.82rem;
}

.quo-dlv-actions .btn-ghost {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-secondary);
}

.quo-dlv-actions .btn-ghost:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.quo-dlv-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.quo-dlv-set {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.84rem;
  text-align: left;
  cursor: pointer;
}

.quo-dlv-set:hover { border-color: var(--primary); }

.quo-dlv-set-name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quo-dlv-set-n {
  flex: 0 0 auto;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.quo-dlv-empty {
  margin: 0 0 8px;
  padding: 10px 2px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ── the two inline mount points for the deliverables editor ─────────────────────────────────
   Both the New Package form and the wizard's package step mount SH.deliverablesEditor INLINE,
   so the four categories and their chips are on the form rather than behind a button. These
   rules only position the host; everything inside it is styled by deliverables-editor.css. */

/* The wizard step. "Choose from library" moves into the head, which frees the whole width below
   it for the editor — the actions row that used to hold two buttons is gone. */
.quo-dlv-lib {
  margin-left: auto;
  flex-shrink: 0;
  min-height: 36px;
  padding: 0 10px;
  font-size: 0.76rem;
}

.quo-dlv-libbox:not(:empty) {
  margin-top: 8px;
}

.quo-dlv-editor {
  margin-top: 4px;
}

/* On the New Package form the host sits inside its own "Deliverables" accordion row. */
.pkg-dlv-host {
  margin: 2px 0 4px;
  padding: 10px 4px 4px;
}

/* The row itself, matching the Equipment / Invitation / Custom Items rows beside it. Collapsed
   is the default STATE of a .pkg-acc-section, so the host is simply not shown without .open. */
.pkg-dlv-wrap > .pkg-dlv-host { display: none; }
.pkg-dlv-wrap.open > .pkg-dlv-host { display: block; }

/* The Deliverables row sits OUTSIDE .pkg-accordion — it has to, because it holds the editor
   rather than one of the accordion's own section renderers — so the accordion's `gap: 6px`
   never applied to it and it sat flush against Equipment while the other three were spaced.
   Matched by hand; if that gap ever changes, this is its twin. */
.pkg-dlv-wrap { margin-bottom: 6px; }

/* ── the modal is too narrow for four sections of chips ──────────────────────────────────────
   `.modal-panel` is `max-width: min(520px, 92vw)` for every modal in the app. That is right for
   a form of six fields and wrong for this one: at 520px the chips wrapped one or two to a row and
   an album's six fields stacked three deep, so the New Package modal became a long scroll on a
   desktop with half the screen empty either side.

   Widened by CONTENT rather than by a flag, so SH.modal keeps its single signature and nothing
   else in the app moves: `:has()` matches only the panels that actually contain this editor —
   the New Package form and the standalone deliverables editor. An engine without `:has()` simply
   keeps the 520px panel, which is exactly today's behaviour, so the fallback is the status quo.

   Gated on the viewport having the room: on a phone 92vw is already the whole screen. */
@media (min-width: 820px) {
  .modal-panel:has(.dlv-editor) { max-width: min(760px, 94vw); }
}

/* Package library cards use the same tile/body design as saved deliverable sets. */
body .pkg-card-body { padding-right: 58px; }
body .pkg-card-foot { margin-top: 8px; }
body .pkg-card-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--primary);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
body .pkg-card-edit .material-symbols-rounded { font-size: 1rem; }
body .pkg-card-edit:hover,
body .pkg-card-edit:focus-visible { border-color: var(--primary); background: var(--primary-light); }
body .pkg-card-more {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text-secondary);
  cursor: pointer;
}
body .pkg-card-more:hover,
body .pkg-card-more:focus-visible { color: var(--primary); border-color: var(--primary); }
body .pkg-card-more-incl {
  min-height: 44px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--primary);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}
body .pkg-card.menu-open { overflow: visible; z-index: 6; }
body .pkg-menu:not([hidden]) {
  position: absolute;
  top: 56px;
  right: 8px;
  z-index: 7;
  display: grid;
  min-width: 190px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  box-shadow: var(--shadow-lg);
}
body .pkg-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 0.82rem;
  text-align: left;
  cursor: pointer;
}
body .pkg-menu button:hover,
body .pkg-menu button:focus-visible { background: var(--primary-light); }
body .pkg-menu .pkg-menu-danger { color: var(--danger); }
body .pkg-menu .material-symbols-rounded { font-size: 1.1rem; }

/* Android soft keyboard: fixed sheets follow the visible viewport rather
   than the taller layout viewport. Typing gets the entire usable area;
   action bars return as soon as the keyboard closes. */
@media (max-width: 767px) {
  body.keyboard-open .modal-overlay {
    top: var(--sh-visible-top, 0px);
    bottom: auto;
    height: var(--sh-visible-height, 100dvh);
  }
  body.keyboard-open .modal-panel {
    max-height: var(--sh-visible-height, 100dvh);
  }
  body.keyboard-open .modal-footer,
  body.keyboard-open .qm-foot,
  body:has(.modal-body :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus) .modal-footer,
  body:has(.qm-grid :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus) .qm-foot,
  body:has(.wizard-body :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus) .wizard-footer {
    display: none;
  }
  body.keyboard-open .qm {
    top: var(--sh-visible-top, 0px);
    bottom: auto;
    height: var(--sh-visible-height, 100dvh);
  }
  .modal-body :is(input, textarea, select),
  .qm-grid :is(input, textarea, select),
  .wizard-body :is(input, textarea, select),
  #wizContent :is(input, textarea, select) {
    scroll-margin-top: 80px;
    scroll-margin-bottom: 24px;
  }
  body.keyboard-open .qhub-fab,
  body.keyboard-open .pwa-install-btn,
  body.keyboard-open .sh-wa-float,
  body.keyboard-open .munim-root {
    display: none;
  }
}

/* ===== css/quotation-addon-mobile.css ===== */
/* Quotation add-ons: phone layout matching the studio's card mockup.
   Kept separate so it can be deployed without shipping unrelated pending CSS. */
@media (max-width: 767px) {
  body .step4-addons-section .addon-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  body .step4-addons-section .addon-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 44px 52px;
    grid-template-rows: auto;
    align-items: center;
    gap: 8px;
    padding: 12px;
    min-width: 0;
    cursor: pointer;
  }
  body .step4-addons-section .addon-icon {
    grid-column: 1; grid-row: 1;
    width: 48px; height: 48px;
    border-radius: var(--radius-md);
  }
  body .step4-addons-section .addon-icon .material-symbols-rounded { font-size: 1.45rem; }
  body .step4-addons-section .addon-info { grid-column: 2; grid-row: 1; min-width: 0; width: auto; }
  body .step4-addons-section .addon-name { font-size: 0.95rem; line-height: 1.25; }
  body .step4-addons-section .addon-price { font-size: 0.82rem; line-height: 1.4; }
  body .step4-addons-section .toggle-switch {
    grid-column: 4; grid-row: 1;
    position: relative;
    inset: auto;
    width: 52px; min-height: 44px;
    justify-content: center;
  }
  body .step4-addons-section .addon-edit-btn {
    grid-column: 3; grid-row: 1;
    justify-self: center;
    align-self: center;
    width: 44px; height: 44px;
    min-width: 44px; min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    box-shadow: none;
    color: var(--text-secondary);
  }
  body .step4-addons-section .addon-edit-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
  body .step4-addons-section .addon-edit-btn .material-symbols-rounded { font-size: 1.2rem; }
  body .step4-addons-section .addon-edit-label { display: none; }
  body .step4-addons-section .addon-detail-row {
    grid-column: 1 / -1; grid-row: 2;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    width: 100%; min-width: 0;
    gap: 4px 8px;
    margin: 0; padding: 0;
    border: 0;
  }
  body .step4-addons-section .addon-detail-row .qty-stepper { grid-column: 1; grid-row: 1; }
  body .step4-addons-section .addon-detail-row > span:not(.addon-line-total) { grid-column: 1 / -1; grid-row: 2; }
  body .step4-addons-section .addon-line-total {
    grid-column: 2; grid-row: 1;
    justify-self: end;
    margin-left: 0;
    font-size: 0.82rem;
  }
  body .step4-addons-section .day-chips {
    grid-column: 1 / -1; grid-row: 3;
    min-width: 0; width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding: 2px 0 6px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  body .step4-addons-section .day-chip {
    flex: 0 0 auto;
    min-height: 44px;
    width: max-content;
    padding: 6px 10px;
    border-radius: var(--radius-full);
    font-size: 0.76rem;
    white-space: nowrap;
  }
  body .step4-addons-section .day-chip input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 18px; }
  body .step4-addons-section .qty-stepper button { width: 44px; height: 44px; }
  body .step4-addons-section .qty-stepper input.qty-input { width: 44px; min-height: 44px; font-size: 0.9rem; }
}

/*# sourceMappingURL=app.bundle.css.map */

/* Edit Add-on mobile keyboard actions — scoped production patch. */
@media (max-width: 767px) {
  /* Editing an add-on must keep its save and escape actions reachable above
     the IME. The generic modal rule hides every footer while typing. */
  body.keyboard-open .modal-overlay:has(.addon-editor-form) .modal-footer,
  body:has(.addon-editor-form :is(input, textarea, select):focus) .modal-overlay:has(.addon-editor-form) .modal-footer {
    display: flex;
    flex: 0 0 auto;
    padding: 6px 12px 8px;
  }
  body .modal-overlay:has(.addon-editor-form) .addon-editor-actions {
    flex-wrap: wrap;
  }
  body .modal-overlay:has(.addon-editor-form) .addon-editor-actions .btn {
    min-height: 44px;
    flex: 1 1 90px;
  }
  body.keyboard-open .modal-overlay:has(.addon-editor-form) .modal-panel {
    max-height: min(var(--sh-visible-height, 100dvh), 100dvh);
    padding-bottom: 0;
  }
}

/* Production package-editor mobile layout patch. */
.pkgq-price-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}
.pkgq-price-row > .form-group,
.pkgq-price-row .form-control {
  min-width: 0;
  max-width: 100%;
}
.pkgq-price-row .amount-helper-chips { max-width: 100%; }
@media (max-width: 767px) {
  .pkgq-price-row { grid-template-columns: minmax(0, 1fr); }
  body.keyboard-open .modal-overlay:has(.pkgq-modal-form) .modal-footer,
  body:has(.pkgq-modal-form :is(input, textarea, select):focus) .modal-overlay:has(.pkgq-modal-form) .modal-footer {
    display: flex;
    flex: 0 0 auto;
    padding: 6px 12px 8px;
  }
}

/* Production team picker multi-select patch. */
.crew-sheet-chip.is-selected,
.crew-sheet-chip.is-selected:hover {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}
.crew-sheet-chip.is-existing { opacity: 0.55; cursor: default; }
@media (max-width: 767px) {
  body.keyboard-open .modal-overlay:has(.crew-sheet-chips) .modal-footer,
  body:has(#crewCustomInput:focus) .modal-overlay:has(.crew-sheet-chips) .modal-footer {
    display: flex;
    flex: 0 0 auto;
    padding: 6px 12px 8px;
  }
}

/*# sourceMappingURL=app.bundle.css.map */
/* ===== css/schedule-change.css ===== */
/* Change Dates — the schedule-change editor, and the two bits it adds to the extras ledger.

   A FILE OF ITS OWN, not a tail on app.css. app.css is 18k lines, carries a peer session's
   uncommitted work and a hand-patched tail on the deployed bundle; a new feature's rules have
   no business arriving in the middle of that. Everything here is namespaced `.schg-` except
   the two ledger classes at the bottom, which are named for the block they extend.

   Mobile first at 375px. Every tappable thing is at least 44px. No !important anywhere —
   where a shared class would otherwise win, the fix is a more specific selector inside
   `.schg`, not a hammer. */

/* ── The editor body ──────────────────────────────────────────────────────────────── */
.schg {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.schg-lede {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.schg-days {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── One event day ────────────────────────────────────────────────────────────────── */
.schg-day {
  border: 1px solid var(--border-light);
  border-radius: 12px;
  background: var(--surface, #fff);
  overflow: hidden;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.schg-day.is-changed { border-color: #93c5fd; background: #f5faff; }
.schg-day.is-open    { border-color: var(--primary, #0c8ce9); }
.schg-day.is-removed { border-color: #fecaca; background: #fff5f5; }

/* The collapsed row is a button so it is reachable by keyboard and reads as one target.
   Reset rather than inherit: a bare <button> brings its own font, colour and centring. */
.schg-day-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 10px 12px;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.schg-day-ic {
  font-size: 1.15rem;
  color: var(--primary, #0c8ce9);
  flex: 0 0 auto;
}
.schg-day.is-removed .schg-day-ic { color: #dc2626; }

.schg-day-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.schg-day-name {
  font-size: 0.88rem;
  font-weight: 600;
  /* A long "Mehendi + Sangeet at the farmhouse" must not push the chevron off a 375px
     screen; the row truncates instead of wrapping to three lines. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schg-day-when {
  font-size: 0.76rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schg-day.is-removed .schg-day-name,
.schg-day.is-removed .schg-day-when { text-decoration: line-through; color: var(--text-muted); }

.schg-day-chev {
  font-size: 1.2rem;
  color: var(--text-muted);
  flex: 0 0 auto;
}

.schg-day-was {
  padding: 0 12px 10px 44px;
  font-size: 0.74rem;
  color: #1d4ed8;
}
.schg-day-was.is-new { color: #15803d; }

.schg-day-note {
  padding: 0 12px 10px 44px;
  font-size: 0.76rem;
  color: #b91c1c;
}

/* ── The expanded day's fields ────────────────────────────────────────────────────── */
.schg-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 2px 12px 12px;
}

.schg-f {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.schg-f-lab {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

/* A date or time input inside this block. Safari on iOS gives a native date field its own
   height and a centred value; these three lines make it match every other .form-control in
   the app instead of standing a few pixels taller than its neighbour. */
.schg .form-control {
  min-height: 44px;
}
.schg input[type="date"],
.schg input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
}

.schg-f-row {
  display: flex;
  gap: 10px;
}

.schg-day-acts {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  padding: 0 8px 8px;
}

.schg-day-acts .btn { min-height: 44px; }
.schg-del { color: #b91c1c; }
.schg-del .material-symbols-rounded { font-size: 1.05rem; margin-right: 4px; }

.schg-add {
  align-self: flex-start;
  min-height: 44px;
}
.schg-add .material-symbols-rounded { font-size: 1.05rem; margin-right: 4px; }

/* ── Step 2: what it costs ────────────────────────────────────────────────────────── */
.schg-summary,
.schg-impact,
.schg-done {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.82rem;
}

.schg-summary { background: var(--gray-50, #f6f7f9); color: var(--text-secondary); }
.schg-impact  { background: #fff7ed; border: 1px solid #fed7aa; color: #7c2d12; align-items: flex-start; }
.schg-done    { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; font-weight: 600; }

.schg-summary .material-symbols-rounded,
.schg-impact .material-symbols-rounded,
.schg-done .material-symbols-rounded { font-size: 1.1rem; flex: 0 0 auto; }

.schg-q {
  font-size: 0.84rem;
  font-weight: 600;
  margin-top: 4px;
}

.schg-fee-modes {
  display: grid;
  /* Three across at 375px: the labels are two words each and a dropdown for three options
     is a tap more than the choice is worth. */
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.schg-mode {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 72px;
  padding: 8px 4px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: var(--surface, #fff);
  font: inherit;
  font-size: 0.72rem;
  line-height: 1.2;
  text-align: center;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.schg-mode .material-symbols-rounded { font-size: 1.25rem; }

.schg-mode.is-on {
  border-color: var(--primary, #0c8ce9);
  background: #eff8ff;
  color: var(--primary, #0c8ce9);
  font-weight: 600;
}

.schg-fee-amt {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.schg-hint,
.schg-note {
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.schg-reason { margin-top: 2px; }

/* ── Step 3: the review ───────────────────────────────────────────────────────────── */
.schg-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.schg-line {
  font-size: 0.82rem;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--gray-50, #f6f7f9);
}

.schg-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 0.84rem;
  padding: 8px 2px;
  border-top: 1px dashed var(--border-light);
}

.schg-total strong { font-size: 0.95rem; }
.schg-total.is-new { border-top: 2px solid var(--text-primary); }
.schg-total.is-new strong { font-size: 1.05rem; }

.schg-warn {
  display: flex;
  gap: 10px;
  padding: 12px;
  border-radius: 10px;
  background: #fffbeb;
  border: 1px solid #fde68a;
}

.schg-warn .material-symbols-rounded { font-size: 1.15rem; color: #b45309; flex: 0 0 auto; }
.schg-warn-t { font-size: 0.82rem; font-weight: 700; color: #92400e; }
.schg-warn-b { font-size: 0.82rem; color: #78350f; margin-top: 2px; }
.schg-warn-s { font-size: 0.72rem; color: #92400e; margin-top: 4px; line-height: 1.45; }

/* ── The modal footer ─────────────────────────────────────────────────────────────── */
.schg-foot {
  display: flex;
  gap: 8px;
  width: 100%;
}

.schg-foot .btn {
  flex: 1;
  min-height: 48px;
}

/* ── Two additions to the extras ledger ───────────────────────────────────────────── */
/* The ledger now holds two kinds of row, so a schedule row says which it is. */
.extras-kind {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  background: #eff8ff;
  color: #0369a1;
}

/* A free reschedule's "delta" is a sentence, not a number, so it must not be set in the
   bold right-aligned figure style the money uses. */
.extras-row.is-schedule .extras-row-delta {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* Two buttons where there was one. They wrap rather than shrink: "Change Dates" truncated
   to "Change Da…" at 375px would be worse than a second line. */
.extras-add-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.extras-add-row .btn { min-height: 44px; }

@media (min-width: 768px) {
  .schg-fee-modes { grid-template-columns: repeat(3, minmax(0, 160px)); }
  .schg-foot { justify-content: flex-end; }
  .schg-foot .btn { flex: 0 0 auto; min-width: 140px; }
}

/* ── What the booking is worth, before and after ──────────────────────────────────────
   The fee box used to be a bare number with nothing to measure it against, so a studio
   typing "Reduce by 5000" had no way to see what it was reducing FROM. */
.schg-now {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--muted);
}

.schg-now-l {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.schg-now-v {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* Empty until there is a number to show, so it takes no room in the common case. */
.schg-after:empty { display: none; }

.schg-after {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--muted);
  color: var(--text-secondary);
}
.schg-after.is-up   { background: var(--primary-light, color-mix(in srgb, var(--primary) 10%, transparent)); color: var(--primary); }
.schg-after.is-down { background: var(--success-light, color-mix(in srgb, var(--success) 12%, transparent)); color: var(--success); }
.schg-after.is-bad  { background: var(--danger-light); color: var(--destructive); }

/* ── The team on one event day ────────────────────────────────────────────────────────
   Same counter shape as the Direct Booking sheet: one row per role, tapped straight onto
   the day. Lives inside an open day card, so it keeps the card's padding rhythm. */
.schg-crew {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-light);
}

.schg-crew-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.schg-crew-head .material-symbols-rounded { font-size: 1.05rem; color: var(--text-secondary); }

.schg-crew-t {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.schg-crew-tog { white-space: nowrap; }

.schg-crew-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.schg-crew-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: var(--muted);
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
}

.schg-crew-pick {
  margin-top: 8px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--card);
  overflow: hidden;
}

.schg-crew-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 4px 10px;
}
.schg-crew-row + .schg-crew-row { border-top: 1px solid var(--border-light); }

.schg-crew-name {
  flex: 1;
  min-width: 0;
  font-size: 0.86rem;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schg-crew-step {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--muted);
  border-radius: var(--radius-full);
  padding: 2px;
}

.schg-crew-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--card);
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.schg-crew-btn:hover:not(:disabled) { background: var(--primary); color: #fff; }
.schg-crew-btn:active:not(:disabled) { transform: scale(0.95); }
.schg-crew-btn:disabled { opacity: 0.4; cursor: default; }

.schg-crew-q {
  min-width: 24px;
  text-align: center;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.schg-crew-q.has { color: var(--primary); }

.schg-crew-own {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--border-light);
  background: var(--muted);
}
.schg-crew-own .form-control {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  font-size: 0.85rem;
}

.schg-crew-own-add {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--primary);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--primary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.schg-crew-own-add:hover { background: var(--primary); color: #fff; }

/* Which of the two save paths this day is on — the studio should never have to guess. */
.schg-crew-note {
  margin-top: 8px;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--text-muted);
}

@media (min-width: 560px) {
  .schg-crew-pick {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .schg-crew-row:nth-child(odd) { border-right: 1px solid var(--border-light); }
  .schg-crew-row { border-top: 1px solid var(--border-light); }
  .schg-crew-row:nth-child(-n + 2) { border-top: none; }
  .schg-crew-own { grid-column: 1 / -1; }
}

/* ── A schedule change in the Details sheet ───────────────────────────────────────────
   `.addchg-calc-row` is a key/value pair (flex, space-between). A date line is ONE
   sentence with no value beside it, so it reads as a line rather than as a key whose
   amount went missing. */
.addchg-calc-row.is-wide {
  display: block;
  color: var(--text-primary);
}
.addchg-calc-row.is-total.is-wide {
  color: var(--text-primary);
}
/* ===== css/quotation-crew.css ===== */
/* ─────────────────────────────────────────────────────────────────────
   Quotation wizard — the INLINE per-day team picker

   Its own file, not a tail on app.css: that file currently carries another
   session's uncommitted work, and a shared file is the one thing two people
   cannot edit at the same time.

   Extends the .itin-crew-* block that already lives in app.css (the panel,
   the accordion head, .itin-crew-stepper / -btn / -qty). Only the pieces the
   inline picker adds are here — nothing below redefines a property that file
   already sets on the same selector.

   Mobile-first at 375px; every control is at least 44px of touch target.
   No !important anywhere.
   ───────────────────────────────────────────────────────────────────── */

/* What is planned for the day, read at a glance while the picker is shut */
.itin-crew-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.itin-crew-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: var(--muted);
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.5;
}

/* The Add team button doubles as the picker's close control */
.itin-crew-add.is-open {
  background: var(--muted);
  color: var(--text-secondary);
  border-style: solid;
  border-color: var(--border);
}
.itin-crew-add.is-open:hover {
  background: var(--border-light);
  color: var(--text-primary);
}

/* Somebody is on the day, so Done is now the next thing to do — solid, not an outline, and
   lifted off the panel so the eye goes to it. Three classes beat the quiet two-class rule
   above; the source order is belt and braces rather than the mechanism. */
.itin-crew-add.is-open.is-ready {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 32%, transparent);
}
.itin-crew-add.is-open.is-ready:hover {
  background: var(--primary-dark, hsl(200, 80%, 36%));
  border-color: var(--primary-dark, hsl(200, 80%, 36%));
  color: #fff;
}
.itin-crew-add.is-open.is-ready .material-symbols-rounded { color: #fff; }

.itin-crew-pick {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--card);
  overflow: hidden;
}

.itin-crew-role-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 4px 10px;
}
.itin-crew-role-row + .itin-crew-role-row {
  border-top: 1px solid var(--border-light);
}

.itin-crew-name {
  flex: 1;
  min-width: 0;
  font-size: 0.88rem;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A count of zero is not a plan, so it stays quiet until it is one */
.itin-crew-pick .itin-crew-qty { color: var(--text-muted); }
.itin-crew-pick .itin-crew-qty.has { color: var(--primary); }

.itin-crew-pick .itin-crew-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.itin-crew-pick .itin-crew-btn:disabled:hover {
  background: var(--card);
  color: var(--text-primary);
}

.itin-crew-del {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: none;
  background: transparent;
  border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.itin-crew-del:hover { color: var(--destructive); background: var(--danger-light); }
.itin-crew-del:disabled { opacity: 0.4; cursor: default; }
.itin-crew-del .material-symbols-rounded { font-size: 1.05rem; }

/* Keeps the steppers in one column once a row loses its delete button */
.itin-crew-del-gap { width: 36px; flex: 0 0 36px; }

.itin-crew-own {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--border-light);
  background: var(--muted);
}
.itin-crew-own .form-control {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  font-size: 0.85rem;
}

.itin-crew-own-add {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--primary);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--primary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.itin-crew-own-add:hover { background: var(--primary); color: #fff; }

.itin-crew-hidden {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid var(--border-light);
}

.itin-crew-hidden-t {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.itin-crew-restore {
  min-height: 32px;
  padding: 4px 10px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
}
.itin-crew-restore:hover { border-style: solid; border-color: var(--primary); color: var(--primary); }
.itin-crew-restore:disabled { opacity: 0.5; cursor: default; }

/* Two columns of roles once there is room for them */
@media (min-width: 640px) {
  .itin-crew-pick {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .itin-crew-role-row:nth-child(odd) { border-right: 1px solid var(--border-light); }
  /* Every row carries its own top rule here, then the first PAIR gives it up —
     the adjacent-sibling rule above would have bordered row 2 but not row 1. */
  .itin-crew-role-row { border-top: 1px solid var(--border-light); }
  .itin-crew-role-row:nth-child(-n + 2) { border-top: none; }
  .itin-crew-empty,
  .itin-crew-own,
  .itin-crew-hidden { grid-column: 1 / -1; }
}
/* ===== css/booking-detail-tabs.css ===== */
/* ─────────────────────────────────────────────────────────────────────
   The booking sheet, folded

   It had grown to 24 sections in one scroll, seven of them about money, and
   the number a studio opens the sheet for — how much is still owed — sat two
   screenfuls down. The sections themselves are untouched; they are dealt into
   three tabs after the sheet is built (Orders._bkdTabs).

   Money is NOT behind a tab. The Total / Paid / Due line is pinned above the
   tab bar and is visible from every one of them; only the breakdown moved.

   Its own file rather than a tail on app.css, which carries another session's
   uncommitted work. Mobile-first at 375px, 44px targets, no !important.
   ───────────────────────────────────────────────────────────────────── */

/* ── Pinned: the money line and the tab bar, as ONE box ──────────────
   Two separately-sticky elements needed the tab bar to know the money line's height,
   and that height changes with the size of the figures (68px normally, 59px once the
   type tightens for lakhs). One box: one offset, and the gap between them is ordinary
   flow. The background is what makes the gap read as a gap — the pane scrolls behind. */
.bkd-stick {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 10px;
  background: var(--card);
}

.bkd-money {
  display: flex;
  align-items: center;
  /* space-between, NOT an auto margin on the first cell: that margin eats all the slack
     first and then flex-shrink starts cutting the amounts, which is how all three ended
     up ellipsed while the row still had room. */
  justify-content: space-between;
  gap: 8px;
  padding: 10px 10px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--card);
  /* The sheet scrolls behind it, so it needs a floor of its own. */
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
}

/* Sized to the number, not to an equal third. Three equal columns gave the Total 75px for
   an 85px amount and ellipsed the one figure that must never be guessed at; the three
   amounts are different lengths, so they should get different widths. */
.bkd-money-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* No shrink, and no min-width:0. A money figure that has been ellipsed is worse than
     useless — it reads as a smaller number. The row has slack at 375px for six figures
     plus the countdown; beyond that the row wraps rather than lying. */
  flex: 0 0 auto;
}

.bkd-money-l {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.bkd-money-v {
  font-family: Outfit, var(--font-ui), sans-serif;
  /* Three Indian-grouped amounts and a countdown share 375px. At 0.95rem a six-figure
     total ellipsed to "₹1,08,…", which is the one number that must never be guessed at. */
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap;
}
/* A booking in lakhs or crores: the digits stay whole, the type gives way. The countdown
   is dropped by _bkdMoneyStrip in that case — it is still on the Payment Status card one
   tap away, and it is the only thing here that is not a number. */
.bkd-money.is-tight .bkd-money-v { font-size: 0.72rem; }
.bkd-money.is-tight .bkd-money-l { font-size: 0.54rem; letter-spacing: 0.04em; }

.bkd-money-v.is-paid { color: var(--success); }
.bkd-money-v.is-due { color: var(--destructive); }

/* A cancelled booking still shows its numbers, quietly — they are history now. */
.bkd-money.is-off .bkd-money-v,
.bkd-money.is-off .bkd-money-v.is-paid,
.bkd-money.is-off .bkd-money-v.is-due { color: var(--text-muted); }

.bkd-money-days {
  flex: 0 0 auto;
  align-self: center;
  padding: 4px 7px;
  border-radius: var(--radius-sm, 8px);
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  white-space: pre-line;
}

/* ── The tab bar ────────────────────────────────────────────────────── */
.bkd-tabs {
  display: flex;
  gap: 4px;
  padding: 6px;
  border-radius: var(--radius-full);
  background: var(--muted);
}

.bkd-tab {
  flex: 1 1 0;
  min-height: 44px;
  padding: 0 10px;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bkd-tab:hover { color: var(--text-primary); }
.bkd-tab.is-on {
  background: var(--card);
  color: var(--primary);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.1);
}

/* ── The panes ──────────────────────────────────────────────────────── */
.bkd-pane { display: none; }
.bkd-pane.is-on {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* The marker elements are removed during the fold; this is the belt to that
   braces, so a marker can never show as a stray gap if one survives. */
.bkd-mark { display: none; }

@media (min-width: 560px) {
  .bkd-money { gap: 16px; padding: 12px 16px; }
  .bkd-money-v { font-size: 1.05rem; }
}


/* ===== drafts tray + autosave indicator (appended) ===== */
/* ─── Unfinished bills ────────────────────────────────────────────────
   A draft is a row of this same ledger that has not been filed yet, so it
   wears the table's clothes and sits directly above it. Deliberately NOT a
   panel: a filled surface reads as "a section", and this is a reminder.
   Full width, so nothing sits in dead space beside it.
   Mobile-first at 375px; the delete target clears 44px. */
.wi-draft-tray {
  margin: 0 16px 12px;
  /* Neutralised explicitly, not merely omitted. The first version of this tray
     was a filled grey panel, and the CSS bundle is produced by appending to
     prod's existing bundle — so if that earlier block is ever left in place,
     its background/border/padding would show straight through a rule that only
     sets margin. The build now strips the old block; this is the belt to that
     brace, and it costs nothing. */
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

.wi-draft-lede {
  margin: 0 0 6px;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.wi-draft-list { display: flex; flex-direction: column; gap: 6px; }

.wi-draft-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 7px 10px 7px 0;
  /* The provisional signal. Red, amber and green are all spoken for in this
     table (overdue / pending / paid), so a draft gets grey — the one colour
     that cannot be mistaken for a status. */
  border-left: 3px solid var(--text-muted);
  border-radius: 3px 10px 10px 3px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--border-light);
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.wi-draft-row:hover,
.wi-draft-row:focus-visible {
  border-left-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
}
.wi-draft-row:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.wi-draft-ico {
  flex: 0 0 auto;
  margin-left: 10px;
  font-size: 1.15rem;
  opacity: 0.75;              /* unfiled reads quieter than the filed rows below */
}
.wi-draft-txt {
  flex: 1 1 auto;
  min-width: 0;               /* lets the ellipsis engage */
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.wi-draft-txt strong {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wi-draft-txt small {
  font-size: 0.72rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wi-draft-amt {
  flex: 0 0 auto;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
}
.wi-draft-del {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.wi-draft-del:hover { background: var(--danger-light); color: var(--danger); }
.wi-draft-del .material-symbols-rounded { font-size: 1.05rem; }

/* Overflow: open the full list instead of growing the strip into a wall. */
.wi-draft-more {
  margin-top: 6px;
  padding: 6px 2px;
  min-height: 32px;
  border: 0;
  background: none;
  color: var(--primary);
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
}
.wi-draft-more:hover { text-decoration: underline; }

@media (min-width: 768px) {
  .wi-draft-tray { margin-inline: 0; }
}

/* The picker modal reuses .wi-draft-row; inside a dialog it needs no left bar. */
.wi-draft-list--modal .wi-draft-row { border-left-width: 3px; }

/* Provenance badge — "Created by <staff name>" in the order detail modal.
   Only for staff-raised bills; owner-raised is the default and carries none. */
.wi-by-staff {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding: 5px 10px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  background: var(--muted);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.wi-by-staff .material-symbols-rounded { font-size: 0.95rem; }

/* Autosave indicator in the modal footer. The autosave itself is old; what is
   new is saying so. Quiet while it works, plainly readable when it stops. */
.bm-saved {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.bm-saved.is-on  { opacity: 1; }
.bm-saved.is-bad { opacity: 1; color: var(--danger); }