/* 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=2e4053dc58 */
/* ===== 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=8') 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 .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;
}

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

.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; width: 32px; height: 32px; border-radius: 8px; background: var(--gray-100, #f3f4f6); flex-shrink: 0; }
.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-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; }
  .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: absolute; top: 4px; right: 30px;
    min-width: 28px; min-height: 28px; padding: 2px;
  }
  .addon-card .addon-edit-btn .material-symbols-rounded { font-size: 0.75rem; }
  .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;
}

.crew-sheet-chip {
  padding: 10px 14px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  min-height: 44px;
}
.crew-sheet-chip:hover {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

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


/* ─────────────────────────────────────────────────────
   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);
}
body .cal-corner-anniv {
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  color: hsl(340, 70%, 55%);
}
body .cal-corner-anniv .material-symbols-rounded {
  font-size: 13px;
  font-variation-settings: 'FILL' 1;
}

/* 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%);
  background: var(--text-primary, #1a1a2e);
  color: #fff;
  padding: 8px 12px;
  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 4px 12px rgba(0, 0, 0, 0.15);
  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(--text-primary, #1a1a2e);
  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;
}

/* Settings Logo Upload */
.settings-logo-wrap {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.settings-logo-frame {
  position: relative;
  display: inline-flex;
  border-radius: 50%;
  padding: 5px;
  background: linear-gradient(135deg, var(--primary), var(--success));
}

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

.settings-logo-frame .settings-logo-edit {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
}

.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 ── */
.notif-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1001;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}

.notif-sheet-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.notif-sheet {
  position: fixed;
  z-index: 1002;
  background: var(--card);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 75vh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
}

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

@media (min-width: 768px) {
  .notif-sheet {
    top: 56px;
    bottom: auto;
    left: auto;
    right: 16px;
    width: 400px;
    max-height: 70vh;
    border-radius: var(--radius-xl);
    transform: translateY(-10px);
    opacity: 0;
    transition: transform 0.2s, opacity 0.2s;
  }

  .notif-sheet.open {
    transform: translateY(0);
    opacity: 1;
  }
}

.notif-sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
}

.notif-sheet-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 12px 24px;
  flex: 1;
}

.notif-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 8px;
  border-bottom: 1px solid var(--border-light, var(--border));
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: background 0.15s;
  min-height: 48px;
}

.notif-card:hover {
  background: var(--gray-50, var(--secondary));
}

.notif-card:last-child {
  border-bottom: none;
}

.notif-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--primary-50);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.notif-card-icon .material-symbols-rounded {
  font-size: 1.2rem;
}

/* Unread notification styling */
.notif-card.unread {
  background: var(--primary-50, #EBF5FB);
  border-left: 3px solid var(--primary);
}

.notif-card.unread .notif-card-icon {
  background: var(--primary);
  color: white;
}

/* ── 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) ── */

.pkg-tabs {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: var(--space-xl);
  border-bottom: 2px solid var(--border-light);
  padding-bottom: 0;
}

.pkg-tabs::-webkit-scrollbar { display: none; }

.pkg-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

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

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

.pkg-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

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

/* ═══════════════════════════════════════════════════════════
   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: 8px 12px; 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;
}

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

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

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 { display: flex; gap: 6px; padding: 8px 16px; overflow-x: auto; flex-shrink: 0 }
.notif-chip { padding: 4px 12px; border-radius: 16px; border: 1px solid var(--border-color, #ddd); background: transparent; font-size: 0.8rem; cursor: pointer; white-space: nowrap; transition: 0.15s }
.notif-chip.active { background: var(--primary, #6366f1); color: #fff; border-color: var(--primary, #6366f1) }

/* ─── 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 — 4 click-cards grid ──────────────────────── */
  .sst-panel #settingsTab-terms .terms-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 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-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; }
  /* 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; }
/* 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-late { margin-bottom: 0; }

  /* One action per row in a 340px rail — a wrapped 5-button grid reads as a
     toolbar, not as a decision. */
  .rd-rail #detailActions {
    margin-top: 0;
    flex-direction: column;
    gap: 8px;
  }

  .rd-rail #detailActions > button { flex: none; width: 100%; }
}

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

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

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

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

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

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

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

/* ===== 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 {
  position: fixed;
  bottom: 80px;
  right: 16px;
  z-index: 9998;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  transition: transform 0.2s, box-shadow 0.2s;
}
.fb-pill:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.fb-pill:active {
  transform: scale(0.95);
}

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

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

/* ── Mobile: pill above bottom nav ── */
@media (max-width: 768px) {
  .fb-pill {
    bottom: 76px;
    right: 12px;
    width: 44px;
    height: 44px;
  }
  .fb-panel {
    bottom: 76px;
    right: 8px;
    left: 8px;
    width: auto;
  }
  .fb-help-bubble {
    bottom: 130px;
    right: 12px;
    max-width: 200px;
  }
}

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

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

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

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

.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: flex; flex-direction: column; gap: 2px; flex-shrink: 0;
}
.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); }

/* ═══ 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. */
@media (min-width: 1024px) {
  .finance-tabs {
    width: fit-content;
    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;
  }
}

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

/* Decorative art layer (aperture, light sweep, viewfinder brackets) sits
   behind the type; slice keeps it crop-safe because the slot is fixed 16:9 */
.dh-poster-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 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;
}

/* ── Search row: existing dsh-search pill (styles in app.css) + bell ── */
.dh-search-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.dh-search-row .dsh-search-wrap {
  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 */
}

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

.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 {
    animation: dh-jelly 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .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-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-tile:hover .dh-tile-ico {
  background: hsla(200, 75%, 50%, 0.44);
}

/* ── 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 .dsh-search-sticky { margin-top: auto; 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; }
  /* 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: 72px; height: 72px; border-radius: 22px; }
  .dh-tile-ico .material-symbols-rounded { font-size: 1.9rem; }
  .dh-tile-label { font-size: 0.8rem; }
}

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

/* ===== 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 {
  font-size: 1.2rem;
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--sb-icon-bg);
  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:hover .material-symbols-rounded {
  color: var(--sb-icon-hover);
  background: var(--sb-icon-hover-bg);
  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: var(--sb-icon-active-bg);
}


/* ─────────────────────────────────────────────────────
   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 {
    width: 36px; height: 36px;
    font-size: 1.25rem;
  }

  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 {
    width: 34px;
    height: 34px;
    font-size: 1.22rem;
  }

  /* 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 {
    width: 28px; height: 28px;
    font-size: 1.1rem;
    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; }

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

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

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

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

/* ===== 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/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 .nav-more-item .material-symbols-rounded {
    font-size: 22px;
    width: 52px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border-radius: 100px;
    color: var(--text-secondary);
    background: transparent;
    transition: background 180ms ease, color 180ms ease;
  }

  /* 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 .nav-more-item.active .material-symbols-rounded {
    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));
  }

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

/*# sourceMappingURL=app.bundle.css.map */