/* ═══════════════════════════════════════════════════════════════
   SAHA EVENTS — Unified Native App Design System
   Compact · Consistent · Professional
═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* ── Kill iOS white flash on ALL tappable elements ── */
button, a, [onclick], input, select, textarea, label,
.stat-card, .card, .data-table tr, .sidebar-item, .bnav-item, .more-menu-item,
.service-card, .vendor-card, .event-card, .task-card, .kpi-card-clickable {
  -webkit-tap-highlight-color: transparent !important;
}
:root {
  color-scheme: light;

  /* ══ BRAND PALETTE ══ */
  --primary:        #5B6CF8;
  --primary-dark:   #4a5ae8;
  --primary-light:  #eef0fd;
  --primary-mid:    #6B7CF9;
  --secondary:      #0EC9A8;
  --success:        #0EC9A8;
  --success-light:  #e4f8f4;
  --warning:        #F59E0B;
  --warning-light:  #fef3c7;
  --error:          #EF4444;
  --error-light:    #fee2e2;
  --accent-gold:    #F59E0B;

  /* ══ SURFACES — clean 5-step system ══ */
  --bg-page:        #ECEEF5;   /* App background — slightly darker for better contrast */
  --bg-card:        #ffffff;   /* Cards, sheets */
  --surface:        #F2F3F9;   /* Hover, subtle bg */
  --surface-2:      #E4E6F0;   /* Input bg, chips */
  --border:         #D4D6E3;   /* Standard border */
  --border-light:   #E2E4EF;   /* Subtle dividers */
  --white:          #ffffff;
  --gmail-bg:       #ECEEF5;   /* Alias for bg-page */
  --bg-mesh:        #ECEEF5;
  --bg-gradient:    #ECEEF5;

  /* ══ TYPOGRAPHY ══ */
  --text-primary:   #0F1117;
  --text-secondary: #3C4257;
  --text-muted:     #6B7280;

  /* Type scale — 5 sizes, no in-between */
  --text-xs:    11px;   /* Labels, badges, meta */
  --text-sm:    12.5px; /* Secondary body, captions */
  --text-base:  13.5px; /* Primary body */
  --text-md:    15px;   /* Subtitles, card titles */
  --text-lg:    18px;   /* Page titles */

  /* Legacy aliases — kept for compatibility */
  --font-xs:        var(--text-xs);
  --font-sm:        var(--text-sm);
  --font-base:      var(--text-base);
  --font-md:        var(--text-base);
  --font-lg:        var(--text-md);
  --font-label-sm:  var(--text-xs);
  --font-label-lg:  var(--text-sm);
  --font-body-sm:   var(--text-sm);
  --font-body-md:   var(--text-base);
  --font-title-sm:  var(--text-md);
  --font-label:     var(--text-xs);

  /* ══ ELEVATION — 3-step system ══ */
  --shadow-sm:   0 1px 2px rgba(15,17,35,0.05), 0 2px 8px rgba(15,17,35,0.06);
  --shadow-md:   0 2px 4px rgba(15,17,35,0.06), 0 8px 20px rgba(15,17,35,0.09);
  --shadow-lg:   0 12px 32px rgba(15,17,23,0.12), 0 4px 8px rgba(15,17,23,0.06);
  --shadow-focus: 0 0 0 3px rgba(91,108,248,0.18);

  /* Legacy elevation aliases */
  --elevation-1:       var(--shadow-sm);
--elevation-3:       var(--shadow-lg);
  --card-shadow:       var(--shadow-sm);
  --card-shadow-hover: var(--shadow-md);

  /* Glass */
  --glass-surface:         rgba(255,255,255,0.72);

--glass-border:          1px solid rgba(255,255,255,0.45);
  --glass-border-subtle:   rgba(0,0,0,0.05);
  --glass-shadow-elevated: var(--shadow-md);
  --glass-bg:              var(--glass-surface);
  --color-primary-container: var(--primary-light);
  --color-surface-variant:   var(--surface);

  /* ══ RADIUS — 4-step system ══ */
  --r-xs:  3px;   /* Tags, badges */
  --r-sm:  6px;   /* Buttons, inputs, small cards */
  --r-md:  8px;   /* Cards, modals, panels */
  --r-lg:  12px;  /* Bottom sheets, hero cards */

  /* Legacy aliases */
  --radius-sm:    var(--r-xs);
  --radius-md:    var(--r-sm);
  --radius-lg:    var(--r-md);
  --radius-card:  var(--r-md);
  --radius-btn:   var(--r-sm);
  --radius-btn-sm:var(--r-xs);
  --radius-input: var(--r-sm);
  --radius-badge: var(--r-xs);
  --radius-modal: var(--r-lg);
  --card-radius:  var(--r-md);

  /* ══ MOTION ══ */
  --dur-fast:   55ms;
  --dur-normal: 110ms;
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:        cubic-bezier(0.4, 0, 0.2, 1);
  --spring-standard:   cubic-bezier(0.2, 0, 0, 1);
  --spring-decelerate: cubic-bezier(0, 0, 0, 1);
  --spring-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --spring-bounce:     cubic-bezier(0.34, 1.3, 0.64, 1);

  /* ══ LAYOUT ══ */
  --nav-height:         52px;
  --bottom-nav-height:  52px;
  --content-max-w:      480px;
  --content-max-w-tablet: 768px;

  /* ══ SPACING — 4dp grid ══ */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --page-padding: 14px;
  --section-gap:  12px;

  /* Touch & interaction */
  --touch-target:     40px;
  --btn-height:       36px;
  --btn-height-sm:    28px;
  --input-height:     36px;
  --kpi-card-min-height: 72px;

  /* Responsive spacing */
  --page-padding-desktop: 24px;
  --page-padding-tablet:  15px;
  --page-padding-mobile:  14px;
  --card-padding:         18px 20px;
  --card-padding-desktop: 20px 24px;
  --card-padding-tablet:  16px 20px;
  --card-padding-mobile:  14px 16px;
--btn-height-mobile:    36px;
  --btn-pad-x:            14px;
  --btn-pad-x-sm:         10px;
--input-pad-x:          12px;
  --badge-height:         22px;
  --badge-pad-x:          8px;
  --modal-body-padding:   16px;
  --modal-footer-padding: 12px 16px 16px;
  --bnav-height:          56px;
--bnav-active-container-color: rgba(91,108,248,0.12);
  --bnav-active-indicator-w:     56px;
  --bnav-active-indicator-h:     28px;
  --elev-0: none;
  --elev-1: var(--shadow-sm);
  --elev-2: var(--shadow-md);
  --elev-3: var(--shadow-lg);
  --elev-4: var(--shadow-lg);

  /* Safe areas */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-bottom: var(--safe-bottom);
  --safe-area-top:    var(--safe-top);

  /* Sidebar */
--sidebar-hover:  #F4F5FC;
  --sidebar-active: #eef0fd;
  --sidebar-w:      360px;
  --sidebar-mini-w: 64px;

  /* Duration scale — v12 additions */
  --dur-quick:          100ms;
  --dur-short:          200ms;
  --dur-medium:         300ms;

  /* Button radius tokens */
  --btn-radius-filled:  12px;
  --btn-radius-tonal:   12px;
  --btn-pad-x-mobile:   20px;
}

/* ═══ Design System — Compact, consistent ═══ */
.crm-page > section + section { margin-top: var(--section-gap); }
.crm-panel, .card, .stat-card { border-radius: var(--radius-card); padding: var(--card-padding); }
.btn-sm {
  min-height: var(--btn-height-sm) !important;
  height: var(--btn-height-sm) !important;
  padding: 0 var(--btn-pad-x-sm) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: var(--radius-sm) !important;
  box-sizing: border-box !important;
}
html, body {
  overscroll-behavior: none;
  overscroll-behavior-y: none;
}
body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg-mesh);
  background-attachment: fixed;
  color: var(--text-primary);
  line-height: 1.5;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100dvh;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
.plt-ios body { font-family: 'Plus Jakarta Sans', -apple-system, 'SF Pro Text', sans-serif; }
.plt-android body { font-family: 'Plus Jakarta Sans', 'Roboto', system-ui, sans-serif; }

/* ── Global UI: disable text selection, enable fast tap ── */
body {
  -webkit-user-select: none;
  user-select: none;
}
input, textarea, [contenteditable] {
  -webkit-user-select: text !important;
  user-select: text !important;
}
button, a, [onclick], .stat-card, .card, .bnav-item, .sidebar-item,
.more-menu-item, .vendor-card, .event-card, .task-card, .service-card,
.kpi-card-clickable, .settings-row, .dd-item, .accordion-header {
  touch-action: manipulation;
}

/* ── Scrollbar — hidden everywhere for native app feel ── */
*, *::before, *::after {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
*::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent !important;
}
*::-webkit-scrollbar-track,
*::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-corner {
  background: transparent !important;
  display: none !important;
}
/* No focus ring on tap — only for keyboard (focus-visible); sharp primary ring, never black */
:focus { outline: none !important; }
:focus-visible { outline: 2px solid var(--primary) !important; outline-offset: 2px; border-radius: 2px; }
button:focus, .card:focus, .stat-card:focus, .btn-gold:focus, .btn-secondary:focus, .btn-ghost:focus, .btn-danger:focus { outline: none !important; }
/* KPI/stat cards — never show focus outline (black border on click) */
.stat-card:focus, .stat-card:focus-visible, .stat-card:active,
.quot-kpi-card:focus, .quot-kpi-card:focus-visible, .quot-kpi-card:active,
.kpi-card-clickable:focus, .kpi-card-clickable:focus-visible, .kpi-card-clickable:active,
.layout-kpi-block:focus, .layout-kpi-block:focus-visible, .layout-kpi-block:active,
.crm-kpi-card:focus, .crm-kpi-card:focus-visible, .crm-kpi-card:active,
.crm-kpi-grid .stat-card:focus, .crm-kpi-grid .stat-card:focus-visible, .crm-kpi-grid .stat-card:active,
.gallery-stat-card:focus, .gallery-stat-card:focus-visible, .gallery-stat-card:active,
[class*="stat-card"]:focus, [class*="stat-card"]:focus-visible, [class*="stat-card"]:active,
[class*="kpi-card"]:focus, [class*="kpi-card"]:focus-visible, [class*="kpi-card"]:active {
  outline: none !important;
  outline-width: 0 !important;
  outline-color: transparent !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
  border-color: var(--border-light) !important;
}
/* Extra: any article used as a button */
article[onclick]:focus, article[onclick]:focus-visible,
article[role="button"]:focus, article[role="button"]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--border-light) !important;
}
button:focus-visible, .btn-gold:focus-visible, .btn-secondary:focus-visible, .btn-ghost:focus-visible, .btn-danger:focus-visible { outline: 2px solid var(--primary) !important; outline-offset: 2px; }
/* Scroll containment — native overscroll behavior */
.screen, .main-area, .modal-body, .bs-body { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* ════════════════════════════════════════════════════════
   TOUCH — @media (hover:none) removes all hover transforms
════════════════════════════════════════════════════════ */
@media (hover: none), (pointer: coarse) {
  .card:hover,.stat-card:hover,.vendor-card:hover,.event-card:hover,
  .task-card:hover,.service-card:hover,.role-pill:hover,.lead-card:hover,
  .quot-kpi-card:hover,.data-table tbody tr:hover {
    transform: none !important;
    box-shadow: var(--elevation-1) !important;
    border-color: var(--border-light) !important;
  }
  /* On touch: prevent hover styles changing button appearance — just kill transforms/filters */
  .btn-gold:hover,.btn-primary:hover {
    transform: none !important;
    filter: none !important;
    box-shadow: 0 4px 14px rgba(91,108,248,0.35) !important;
  }
  .btn-secondary:hover,.btn-outline:hover {
    transform: none !important;
    background: var(--white) !important;
    border-color: var(--border) !important;
    color: var(--text-secondary) !important;
  }
  .btn-ghost:hover {
    transform: none !important;
    background: transparent !important;
    color: var(--text-muted) !important;
  }
  .btn-danger:hover {
    transform: none !important;
    background: var(--error-light) !important;
    border-color: rgba(244,91,65,0.2) !important;
  }
  .sidebar-item:hover,.bnav-item:hover,.more-menu-item:hover,.task-list-row:hover,
  .menu-toggle-btn:hover {
    transform: none !important;
    filter: none !important;
  }
}


/* ═══════════════════════════════════
   NATIVE FEEL ENHANCEMENTS v10 — Premium Polish
═══════════════════════════════════ */
/* Smooth transitions for interactive elements */
button, .btn-gold, .btn-secondary, .card, .stat-card, .event-card, .vendor-card {
  transition: transform var(--dur-normal) var(--ease-out), box-shadow var(--dur-normal) var(--ease-out), border-color var(--dur-normal), background var(--dur-normal);
}

/* ════ PLATFORM-SPECIFIC: Android + iOS ════ */
/* Android ripple */
.plt-android .btn-gold,.plt-android .btn-secondary,.plt-android .btn-ghost,
.plt-android .btn-danger,.plt-android .bnav-item,.plt-android .more-menu-item {
  position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent;
}
.plt-android .btn-gold::after,.plt-android .btn-secondary::after,
.plt-android .btn-ghost::after,.plt-android .bnav-item::after,
.plt-android .more-menu-item::after {
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle at var(--rx,50%) var(--ry,50%),rgba(255,255,255,0.28) 0%,transparent 65%);
  transform:scale(0);opacity:0;
  transition:transform 0.45s cubic-bezier(0.4,0,0.2,1),opacity 60ms;
}
.plt-android .ripple-go::after{transform:scale(3)!important;opacity:1!important;transition:transform 0.45s cubic-bezier(0.4,0,0.2,1),opacity 0.08s!important;}
.plt-android .btn-gold:active,.plt-android .btn-secondary:active,.plt-android .btn-ghost:active{transform:scale(0.96)!important;transition:transform 0.08s!important;}

/* iOS press */
.plt-ios .btn-gold:active,.plt-ios .btn-secondary:active,.plt-ios .btn-ghost:active{opacity:0.6!important;transform:scale(0.97)!important;transition:all 0.08s!important;}
.plt-ios .bnav-item:active .bnav-icon-wrap{transform:scale(0.86);transition:transform 0.08s cubic-bezier(0.34,1.56,0.64,1)!important;}
.plt-ios .top-nav{background:var(--bg-card)!important;border-bottom:1px solid var(--border-light)!important;box-shadow:0 2px 12px rgba(0,0,0,0.06)!important;}
.plt-ios .card,.plt-ios .stat-card{box-shadow:0 1px 4px rgba(19,25,41,0.05),0 4px 12px rgba(19,25,41,0.04)!important;}
.plt-ios #bottom-sheet{border-radius:30px 30px 0 0!important;}
.plt-ios #more-menu-sheet{border-radius:30px 30px 0 0!important;}

/* Android: match body color */
.plt-android .top-nav{background:var(--bg-card)!important;border-bottom:1px solid var(--border-light)!important;box-shadow:0 2px 12px rgba(0,0,0,.06)!important;}

/* Bottom nav enhancements */
.bnav-icon{transition:transform 0.1s cubic-bezier(0.34,1.56,0.64,1),color 0.08s;}
.bnav-item.active .bnav-icon{transform:scale(1.14);}
.bnav-label{transition:opacity 0.12s,color 0.12s;font-size:10.5px!important;}
.bnav-item:not(.active) .bnav-label{opacity:0.52;}
.bnav-item.active .bnav-label{opacity:1;font-weight:700;}

/* Modal scroll containment */
.modal-body{overflow-y:auto!important;flex:1 1 auto!important;min-height:0!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
.modal-box{display:flex!important;flex-direction:column!important;overflow:hidden!important;height:100%!important;max-height:100%!important;}
/* PDF / Review Quotation modal: full screen, no rounded corners */
/* ── PDF Preview Modal ── */
#modal-pdf { align-items: stretch !important; padding: 0 !important; }
#modal-pdf .modal-box {
  width: 100% !important; max-width: 100% !important;
  height: 100% !important; max-height: 100% !important;
  border-radius: 0 !important;
  animation: modalIn 0.14s ease-out !important;
  border: none !important;
  background: #f0f2f7 !important;
}
#modal-pdf .modal-box::before { display: none !important; }
#modal-pdf .modal-hd {
  background: var(--white) !important;
  border-bottom: 1px solid var(--border-light) !important;
  padding: 12px 16px !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.05) !important;
}
#modal-pdf .modal-hd-icon {
  background: var(--primary-light) !important;
  border-color: rgba(91,108,248,0.2) !important;
}
#modal-pdf .modal-hd-icon i { color: var(--primary) !important; }
#modal-pdf .modal-title {
  color: var(--text-primary) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
#modal-pdf .modal-subtitle { color: var(--text-muted) !important; font-size: 11.5px !important; }
#modal-pdf #pdf-preview-content {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 !important;
  background: #eceef4 !important;
  flex: 1 1 auto !important;
}
/* Zoom toolbar */
#pdf-zoom-toolbar {
  background: var(--white) !important;
  border-bottom: 1px solid var(--border-light) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important;
}
#pdf-scroll-area { overflow-x: auto !important; overflow-y: visible !important; padding: 20px 16px 32px !important; min-height: 200px; }
#pdf-scale-wrap {
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.10), 0 8px 32px rgba(0,0,0,0.08);
  border-radius: 6px;
  overflow: hidden;
}

/* ── 4pt Spacing System ── */

/* ════════════════════════════════════════════
   PERFORMANCE — GPU acceleration, fast interactions
════════════════════════════════════════════ */

/* GPU layers for elements that animate */
.top-nav, #bottom-nav, .sidebar, .modal-overlay, .modal-box,
#bottom-sheet, #page-form-panel, #more-menu-sheet {
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  transform: translateZ(0) !important;
}

/* Instant press feedback — no delay */
button, [onclick], .btn-gold, .btn-secondary, .btn-ghost,
.btn-danger, .btn-outline, .stat-card, .card[onclick],
.kpi-card-clickable, .sidebar-item, .bnav-item,
.more-menu-item, .settings-row, .task-list-row,
.lead-card-v2, .event-card, .vendor-card {
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}

/* Transitions only on properties that don't trigger layout */
.btn-gold, .btn-primary {
  transition: opacity 0.08s, box-shadow 0.10s !important;
}
.btn-secondary, .btn-outline {
  transition: background 0.08s, border-color 0.08s !important;
}
.btn-ghost {
  transition: background 0.08s !important;
}
.btn-danger {
  transition: background 0.08s !important;
}
.card, .stat-card {
  transition: box-shadow 0.12s, border-color 0.12s !important;
}
.sidebar-item {
  transition: background 0.08s, color 0.08s !important;
}
.form-input, input, textarea, select {
  transition: border-color 0.10s, box-shadow 0.10s !important;
}

/* Active press states — immediate visual response */
.btn-gold:active, .btn-primary:active { opacity: 0.85 !important; transform: scale(0.97) !important; }
.btn-secondary:active, .btn-outline:active { transform: scale(0.97) !important; }
.btn-ghost:active { transform: scale(0.97) !important; }


/* Remove expensive backdrop-filter from non-critical elements */
.more-menu-item { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Scrolling performance */
.screen, .modal-body, #bottom-sheet {
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: auto !important;
  overscroll-behavior-y: contain !important;
}

/* Fast modal animation */
@keyframes modalInFast {
  from { transform: scale(0.97) translateY(6px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.modal-box { animation: modalInFast 0.13s ease-out !important; }

/* Fast sheet animation */
@keyframes sheetUpFast {
  from { transform: translateY(30px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
#bottom-sheet.open, #page-form-panel.open {
  animation: sheetUpFast 0.14s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Cards — cleaner elevation, sharper radius */
.card, .stat-card, .event-card, .vendor-card, .task-card, .lead-card, .crm-panel {
  background: var(--white) !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.03) !important;
  transition: box-shadow 0.15s ease, border-color 0.15s ease !important;
}
@media (min-width: 769px) {
  .card[onclick]:hover, .stat-card[onclick]:hover, .event-card:hover, .lead-card:hover {
    box-shadow: 0 4px 16px rgba(91,108,248,0.10), 0 1px 4px rgba(0,0,0,0.06) !important;
    border-color: rgba(91,108,248,0.18) !important;
  }
}

/* Form inputs — clean, refined */
.form-input, input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="date"], input[type="password"],
textarea, select {
  background: var(--white) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-input) !important;
  color: var(--text-primary) !important;
  font-size: 13.5px !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
.form-input:focus, input:focus, textarea:focus, select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(91,108,248,0.12) !important;
  outline: none !important;
}

/* Table — tighter, more readable */
.data-table { border-collapse: collapse !important; width: 100% !important; }
.data-table thead th {
  font-size: 10.5px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  font-weight: 700 !important;
  padding: 10px 14px !important;
  background: var(--surface) !important;
  border-bottom: 1.5px solid var(--border-light) !important;
  white-space: nowrap !important;
}
.data-table tbody td {
  padding: 11px 14px !important;
  font-size: 13px !important;
  border-bottom: 1px solid var(--border-light) !important;
  color: var(--text-primary) !important;
  vertical-align: middle !important;
}
.data-table tbody tr:last-child td { border-bottom: none !important; }

/* Badges — tighter, consistent */
.badge {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  padding: 3px 9px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  letter-spacing: 0.02em !important;
}

/* Page headers — refined hierarchy */
.page-title {
  font-size: 19px !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  color: var(--text-primary) !important;
  line-height: 1.15 !important;
}
.page-sub {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  margin-top: 2px !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
}

/* KPI / Stat cards — polished metrics */
.stat-card, .kpi-card {
  border-radius: 10px !important;
  padding: 16px !important;
}
.stat-value, .kpi-value {
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
  color: var(--text-primary) !important;
}
.stat-label, .kpi-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
}

/* Section labels — consistent eyebrow text */
.section-label, .form-label, label.form-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* Modal refinements */
.modal-box {
  border: 1px solid var(--border-light) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.06) !important;
}
.modal-hd {
  background: var(--white) !important;
  border-bottom: 1px solid var(--border-light) !important;
  padding: 16px !important;
}
.modal-footer {
  background: var(--surface) !important;
  border-top: 1px solid var(--border-light) !important;
}

/* Toast refinements */
.toast {
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* Smooth page transitions */
.screen-page {
  animation: fadePageIn 0.12s ease-out both !important;
}
@keyframes fadePageIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Hide scrollbar on mobile ── */
/* ════════════════════════════════════════════
   UNIFIED DESIGN TOKENS — applied globally
════════════════════════════════════════════ */

/* Top bar — transparent */
.top-nav {
  min-height: var(--nav-height) !important;
  height: var(--nav-height) !important;
  padding-top: calc(var(--safe-top) + 2px) !important;
  background: var(--bg-card) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-top: none !important;
  border-bottom: 1px solid var(--border-light) !important;
  box-shadow: none !important;
  transition: box-shadow var(--dur-normal) var(--ease-out);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.top-nav.scrolled {
  box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 2px 12px rgba(15,17,35,0.07) !important;
}

/* Cards — premium glass, sharp */
.card, .stat-card, .vendor-card, .event-card, .task-card, .lead-card {
  border-radius: var(--radius-lg) !important;
  padding: var(--space-3) !important;
}
.card-title, .form-card-title, .task-card-title { font-size: var(--font-title-sm) !important; font-weight: 700 !important; letter-spacing: -0.02em !important; }

/* Uniform button system — compact, consistent size across all pages */
.btn-gold, .btn-primary, .btn-secondary, .btn-ghost, .btn-danger, .btn-outline {
  min-height: var(--btn-height) !important;
  height: var(--btn-height) !important;
  border-radius: var(--radius-btn) !important;
  font-weight: 600 !important; font-size: 13px !important;
  padding: 0 var(--btn-pad-x) !important;
  transition: background 80ms, filter 80ms !important;
  box-sizing: border-box !important;
}
.btn-gold:active, .btn-primary:active {
  transform: scale(0.97) !important;
}

/* Form inputs — glass, compact */
.form-input {
  height: var(--input-height) !important;
  min-height: var(--input-height) !important;
  border-radius: var(--radius-input) !important;
  border: 1px solid var(--glass-border-subtle) !important;
  font-size: 13px !important;
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0 var(--input-pad-x) !important;
  transition: border-color var(--dur-normal), box-shadow var(--dur-normal) !important;
  box-sizing: border-box !important;
}
.form-input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px rgba(91,108,248,0.14) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  outline: none !important;
}
textarea.form-input { height: auto !important; min-height: 64px; padding: 6px var(--input-pad-x) !important; }

/* Unified badge/chip (capsule) — consistent size */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--badge-height); padding: var(--space-1) var(--badge-pad-x);
  border-radius: var(--radius-badge) !important; font-weight: 600 !important;
  font-size: var(--font-label-sm) !important; line-height: 1.2;
}

/* Unified modal header */
.modal-hd {
  border-radius: 12px 12px 0 0;
  background: transparent;
}

/* ════════════════════════════════════════════
   MOBILE — Native (Small App Bar 64px)
════════════════════════════════════════════ */
@media (max-width: 768px) {
  .top-nav { top: -2px !important; min-height: calc(var(--nav-height) + var(--safe-top) + 2px) !important; height: calc(var(--nav-height) + var(--safe-top) + 2px) !important; padding-top: calc(var(--safe-top) + 2px) !important; }
}

/* ── Modal Size Variants ── */
.modal-box.modal-sm { max-width: 440px !important; }
.modal-box.modal-md { max-width: 600px !important; }
.modal-box.modal-lg { max-width: 880px !important; }

/* ── Body scroll lock when modal open ── */
body.modal-open { overflow: hidden !important; touch-action: none; }

/* ── Haptic press animation ── */
@keyframes bnavPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* ── Bottom nav instant highlight — no transition ── */
.bnav-item {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.bnav-item:active .bnav-icon-wrap {
  transform: scale(0.86);
  transition: transform 80ms var(--ease-spring) !important;
}
.bnav-item.active .bnav-icon {
  animation: bnavPop 0.15s var(--ease-spring);
}

/* ── Enhanced Button Spring on mobile ── */
.btn-gold, .btn-secondary, .btn-danger, .btn-ghost, .btn-outline {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* ── Uniform Card Radius ── */
.stat-card, .card, .vendor-card, .event-card, .task-card {
  border-radius: var(--radius-card) !important;
}

/* ── Page system ── */
.view { display: none; }
.view.active { display: block; min-height: 100vh; }
#app-shell { display: none; }
#app-shell.active { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
/* Fast page transitions — native app feel */
@keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.fade-in { animation: fadeIn 0.09s ease-out forwards; }
@keyframes slideUpIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.slide-up-in { animation: slideUpIn 0.28s cubic-bezier(0.34,1.56,0.64,1) forwards; }
@keyframes gmailListItemIn {
  from { opacity:0; transform: translateY(2px); }
  to { opacity:1; transform: none; }
}
.gmail-list-item { animation: gmailListItemIn 0.1s cubic-bezier(0.4,0,0.2,1) backwards; }
@keyframes materialRipple {
  to { transform: scale(2.5); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   LOGIN — Compact & balanced
═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════
   LOGIN PAGE — Blue Full-Page Native App
═══════════════════════════════════════ */
#view-login.login-native-view,
#view-login {
  background: linear-gradient(165deg, #070b14 0%, #121c3d 28%, #1e2a6e 55%, #3949ab 88%, #5c6bc0 100%);
  min-height: 100dvh;
  min-height: 100svh;
  padding: var(--safe-top) 0 var(--safe-bottom);
  position: relative;
  overflow: hidden;
}
/* Decorative layers */
#view-login::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 55% at 50% -15%, rgba(91,108,248,0.38), transparent 52%),
    radial-gradient(circle at 100% 100%, rgba(255,255,255,0.09), transparent 42%),
    radial-gradient(circle at 0% 85%, rgba(14,201,168,0.12), transparent 40%);
  pointer-events: none;
}
#view-login::after {
  content: '';
  position: absolute;
  bottom: -80px; right: -40px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 68%);
  pointer-events: none;
}
.login-wrap {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding: 0;
  max-width: 100%;
  margin: 0 auto;
  justify-content: flex-end;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}
.login-art-col { display: flex; }
.login-form-col {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  order: 2;
  background: transparent;
}
.login-form-col .login-inner {
  width: 100%;
  max-width: 100%;
  background: #fff;
  border-radius: 24px 24px 0 0;
  padding: 0 22px max(28px, calc(env(safe-area-inset-bottom, 0px) + 20px));
  padding-top: 0;
  box-shadow: 0 -12px 48px rgba(0,0,0,0.28);
  animation: loginSheetUp 0.45s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}
@media (max-width: 767px) {
  .login-form-col .login-inner {
    background: rgba(255,255,255,0.94);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    border-top: 1px solid rgba(255,255,255,0.5);
  }
}
@keyframes loginSheetUp {
  from { opacity: 0; transform: translateY(32px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Top hero section — sits above white card on blue bg */
.login-art-col {
  order: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px 36px;
  gap: 0;
}
.login-hero {
  padding: 0;
  margin-bottom: 0;
  background: transparent;
  animation: loginHeroIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes loginHeroIn {
  from { opacity: 0; transform: translateY(-16px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.login-hero::before { display: none; }
.login-hero-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.login-native-eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.52);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.login-sheet-handle-wrap {
  display: flex;
  justify-content: center;
  padding: 4px 0 10px;
  flex-shrink: 0;
}
.login-sheet-handle {
  display: block;
  width: 40px;
  height: 5px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.14);
}
.login-native-hints {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.login-hint-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(91,108,248,0.08);
  border: 1px solid rgba(91,108,248,0.12);
}
.login-hint-pill i { font-size: 10px; color: #5b6cf8; }
.login-app-icon {
  width: 80px;
  height: 80px;
  position: relative;
  flex-shrink: 0;
  background: #fff;
  border-radius: 20px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.12);
}
.login-app-icon .login-logo-img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 10px;
}
.login-app-icon .login-logo-fallback {
  position: absolute;
  font-size: 32px; font-weight: 800; color: #3949ab; letter-spacing: -1px;
}
.login-app-icon:has(.login-logo-img[src]:not([src=""])) .login-logo-fallback { display: none !important; }
.login-app-icon-text { font-size: 32px; font-weight: 800; color: #3949ab; }
.login-brand-text { flex: 1; min-width: 0; text-align: center; }
.login-app-name {
  font-size: clamp(28px, 8vw, 34px);
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.12;
  letter-spacing: -0.6px;
  text-shadow: 0 4px 24px rgba(0,0,0,0.35);
}
.login-app-tagline {
  font-size: 14px;
  color: rgba(255,255,255,0.72);
  margin: 10px 0 0;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.45;
  max-width: 280px;
}
/* Hide art-col inner content (we use .login-hero instead) */
.login-art-icon, .login-art-title, .login-art-text { display: none !important; }

@keyframes loginFieldSlide {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* White card — no extra card wrapper needed */
.login-card {
  background: transparent;
  border-radius: 0;
  padding: 8px 0 0;
  box-shadow: none;
  border: none;
  animation: loginFieldSlide 0.3s var(--ease-decelerate) 0.1s both;
}
.login-card-title {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 4px;
  letter-spacing: -0.2px;
  line-height: 1.25;
}
.login-card-sub {
  font-size: 13px;
  color: #64748b;
  margin: 0 0 22px;
  font-weight: 500;
  line-height: 1.45;
}
.login-form { margin: 0; }
.login-field {
  margin-bottom: 16px;
  animation: loginFieldSlide 0.3s var(--ease-decelerate) both;
}
.login-field:nth-child(1) { animation-delay: 0.12s; }
.login-field:nth-child(2) { animation-delay: 0.18s; }
.login-field:last-of-type { margin-bottom: 20px; }
.login-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
  letter-spacing: 0.2px;
}

/* Inputs */
.login-input-wrap {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 52px;
  background: rgba(248, 250, 252, 0.95);
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.login-input-wrap:focus-within {
  border-color: #3949ab;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(57,73,171,0.12);
}
.login-input-icon {
  flex-shrink: 0;
  width: 44px;
  min-width: 44px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8896b3;
  font-size: 15px;
}
.login-input {
  flex: 1;
  min-width: 0;
  padding: 0 12px 0 2px !important;
  border: none !important;
  background: transparent !important;
  height: 52px;
  min-height: 52px;
  font-size: 14px;
  font-family: inherit;
  color: #111827;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  font-weight: 500;
}
.login-input::placeholder { color: #aab4cc; font-weight: 400; }
.login-password-toggle {
  flex-shrink: 0;
  width: 48px;
  min-width: 48px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #8896b3;
  cursor: pointer;
  font-size: 15px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.login-password-toggle:active { transform: scale(0.9); color: #3949ab; }

/* Error */
.login-error {
  background: #fff0f0;
  border: 1px solid rgba(220,38,38,0.22);
  color: #dc2626;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 12.5px;
  margin-bottom: 14px;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 8px;
}
.login-error::before { content: '\f071'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 11px; flex-shrink: 0; }

/* CTA button */
.login-btn {
  width: 100%;
  min-height: 54px;
  padding: 0 24px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  border: none;
  background: linear-gradient(145deg, #5b6cf8 0%, #3949ab 48%, #283593 100%);
  color: #fff;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 6px 24px rgba(91,108,248,0.45), 0 2px 8px rgba(40,53,147,0.25);
  transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  letter-spacing: 0.03em;
  animation: loginFieldSlide 0.3s var(--ease-decelerate) 0.22s both;
}
.login-btn:active { transform: scale(0.985); filter: brightness(1.05); box-shadow: 0 4px 16px rgba(91,108,248,0.4); }
.login-btn-text { display: inline-block; }
.login-footer-text {
  font-size: 11px;
  color: #94a3b8;
  text-align: center;
  margin: 18px 0 4px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* TABLET+ — keep full-page blue on larger screens too */
@media (min-width: 768px) {
  #view-login { background: linear-gradient(165deg, #070b14 0%, #121c3d 28%, #1e2a6e 55%, #3949ab 88%, #5c6bc0 100%); }
  .login-wrap { justify-content: center; align-items: center; padding: 40px 24px; flex-direction: column; }
  .login-art-col { padding: 0 0 32px; }
  .login-form-col { order: 2; width: 100%; max-width: 420px; }
  .login-form-col .login-inner {
    border-radius: 24px;
    padding: 12px 36px 40px;
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-top: none;
    box-shadow: 0 24px 64px rgba(0,0,0,0.22), 0 4px 16px rgba(0,0,0,0.12);
    max-width: 420px;
  }
  .login-sheet-handle-wrap { display: none; }
  .login-app-icon { width: 88px; height: 88px; border-radius: 22px; }
  .login-app-name { font-size: 28px; }
}
@media (min-width: 1024px) {
  .login-form-col .login-inner { padding: 40px 44px 48px; }
}

/* ═══════════════════════
   TOP APP BAR — Native App Style
═══════════════════════ */
.top-nav {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-light);
  box-shadow: none;
  position: fixed; top: -2px; left: 0; right: 0; z-index: 500;
  min-height: var(--nav-height);
  height: calc(var(--nav-height) + var(--safe-area-top) + 2px);
  padding-top: calc(var(--safe-area-top) + 2px);
  display: flex; align-items: center;
  padding-left: var(--space-3); padding-right: var(--space-3); gap: var(--space-2);
}
.top-nav::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--safe-top) + 4px);
  background: var(--bg-card);
  pointer-events: none;
  z-index: 0;
}
.top-nav > * {
  position: relative;
  z-index: 1;
}
body.dark-mode .top-nav::before {
  background: var(--bg-card);
}
@media (max-width: 900px) {
  .top-nav {
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  }
}
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.nav-mobile-logo { display: none; } /* hidden on desktop, shown on mobile via media query */
.nav-logo-box {
  width: 40px; height: 40px;
  position: relative;
  background: var(--bg-card);
  border-radius: 10px;
  border: 1px solid var(--border-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; color: var(--primary);
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.nav-logo-box .nav-logo-img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: none;
}
.nav-logo-box .nav-logo-img[src]:not([src=""]) { display: block; }
.nav-logo-box .nav-logo-fallback {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; color: var(--primary);
}
.nav-logo-box:has(.nav-logo-img[src]:not([src=""])) .nav-logo-fallback { display: none !important; }
.nav-logo-name { font-size: 17px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.4px; }
.nav-logo-name span { color: var(--primary); }
/* App bar page title — shown in top bar for all pages */
.nav-page-title {
  font-size: 17px; font-weight: 700; color: var(--text-primary);
  flex: 1; min-width: 0; text-align: center; letter-spacing: -0.3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: block;
}
.nav-search-wrap {
  flex: 1; max-width: 720px;
  display: none; align-items: center;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 0 16px;
  gap: 12px;
  height: 48px;
  transition: background 55ms, box-shadow 60ms;
}
.nav-search-wrap:focus-within {
  background: var(--bg-card);
  box-shadow: 0 1px 3px rgba(60,64,67,.12);
}
.nav-search-wrap i { color: var(--text-muted); font-size: 12px; }
.nav-search-wrap input {
  border: none; background: transparent; font-size: 13px; color: var(--text-primary);
  outline: none; width: 100%; font-family: inherit;
}
.nav-search-wrap input::placeholder { color: var(--text-muted); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav-icon-btn {
  width: 40px; height: 40px; border-radius: 50%;
  border: none; background: transparent;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-secondary); position: relative;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
  min-width: 44px; min-height: 44px;
}
.nav-icon-btn:active { background: var(--surface); transform: scale(0.92); }
.nav-icon-btn i { font-size: 18px; }
.nav-badge-dot {
  position: absolute; top: 8px; right: 8px;
  width: 8px; height: 8px; background: var(--error); border-radius: 50%;
  border: 2px solid var(--white);
}
.nav-notif-badge {
  position: absolute; top: 4px; right: 4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--error); color: #fff; font-size: 10px; font-weight: 800;
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--white);
}
.notification-overlay {
  position: fixed; inset: 0; z-index: 598;
  background: rgba(0,0,0,0.45); backdrop-filter: none; -webkit-backdrop-filter: none;
  pointer-events: none; opacity: 0; transition: opacity 60ms ease;
}
.notification-overlay.open {
  pointer-events: auto; opacity: 1;
}
body.notif-panel-open .top-nav { z-index: 599 !important; }
body.notif-panel-open .notification-panel { z-index: 600 !important; }
.notification-panel {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 360px; max-width: calc(100vw - 32px);
  background: var(--white); border-radius: 10px;
  box-shadow: 0 12px 40px rgba(19,25,41,0.18), 0 4px 16px rgba(0,0,0,0.08);
  border: 1px solid var(--border-light);
  z-index: 600; overflow: hidden;
}
.notification-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.notification-list {
  max-height: 320px; overflow-y: auto;
}
.notification-item {
  padding: 12px 16px; border-bottom: 1px solid var(--border-light);
  cursor: pointer; transition: background 0.12s;
}
.notification-item:hover { background: var(--surface); }
.notification-item.unread { background: rgba(91,108,248,0.04); }
.notification-item .notif-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.notification-item .notif-body { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.notification-item .notif-time { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.notification-empty { padding: 24px 16px; text-align: center; font-size: 13px; color: var(--text-muted); }
.notification-panel-footer {
  display: block; width: 100%; padding: 12px 16px;
  background: var(--surface); border: none; border-top: 1px solid var(--border);
  font-size: 12px; font-weight: 600; color: var(--primary); cursor: pointer;
  text-align: center; font-family: inherit; transition: background 0.12s;
}
.notification-panel-footer:hover { background: var(--primary-light); }
@media (max-width: 768px) {
  .notification-panel { right: -8px; width: min(360px, calc(100vw - 24px)); }
}
.nav-divider { width: 1px; height: 24px; background: var(--border); margin: 0 4px; }
.nav-user-btn {
  display: flex; align-items: center; gap: 6px;
  background: transparent; border: none;
  padding: 4px 8px 4px 4px; border-radius: 20px; cursor: pointer; transition: background 0.10s, color 0.10s;
  -webkit-tap-highlight-color: transparent;
}
.nav-user-btn:active { background: var(--surface); }
.avatar {
  width: 32px; height: 32px; border-radius: 10px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff; font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(91,108,248,0.35);
}
.nav-user-info { display: flex; flex-direction: column; text-align: left; }
.nav-user-info .uname { font-size: 12.5px; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.nav-user-info .urole { font-size: 10.5px; color: var(--text-muted); line-height: 1.2; }
.nav-user-btn i.chev { font-size: 9px; color: var(--text-muted); margin-left: 2px; }
.nav-pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--primary-light);
  color: var(--primary); border-radius: 20px;
  padding: 4px 10px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.2px;
  border: 1px solid rgba(91,108,248,0.15);
}
/* ═══════════════════════
   MENU TOGGLE
═══════════════════════ */
.menu-toggle-btn {
  display: flex;
  width: 38px; height: 38px; border-radius: 10px;
  border: none; background: transparent;
  align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-muted);
  transition: background 0.15s, color 0.15s; flex-shrink: 0;
}
.menu-toggle-btn:hover { background: var(--surface); color: var(--primary); }
.hamburger { display: flex; flex-direction: column; gap: 4.5px; width: 18px; }
.hamburger span {
  display: block; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform 0.12s cubic-bezier(0.4,0,0.2,1), opacity 0.1s, width 0.12s;
  transform-origin: center;
}
.hamburger span:nth-child(1) { width: 18px; }
.hamburger span:nth-child(2) { width: 13px; }
.hamburger span:nth-child(3) { width: 18px; }
.menu-toggle-btn.open .hamburger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); width: 18px; }
.menu-toggle-btn.open .hamburger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-toggle-btn.open .hamburger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); width: 18px; }

/* Sidebar overlay */
.sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.45); z-index: 299;
  backdrop-filter: none;
  opacity: 0; transition: opacity 0.15s;
}
.sidebar-overlay.active { display: block; opacity: 1; }

/* ═══════════════════════════════════════════════════
   SIDEBAR — Three-mode: mini desktop | overlay tablet
═══════════════════════════════════════════════════ */
.app-body {
  display: flex; flex: 1;
  height: 0; min-height: 0;
  overflow: hidden;
  /* Top offset = fixed nav height so content starts below it */
  margin-top: calc(var(--nav-height) + var(--safe-top));
}

.sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  background: rgba(255,255,255,0.98);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  display: flex; flex-direction: column;
  padding: 14px 10px 18px;
  overflow-y: auto; overflow-x: hidden;
  transition: width 0.12s ease-out,
              padding 0.12s ease-out,
              transform var(--dur-normal) var(--ease-out);
  will-change: width, transform;
  border-right: 1px solid rgba(91,108,248,0.06);
  position: relative;
  z-index: 300;
}
.sidebar::before { display: none; }

/* Desktop mini (collapsed to icon-only strip) */
.sidebar.mini {
  width: var(--sidebar-mini-w);
  padding: 12px 8px 16px;
}
.sidebar.mini .sidebar-section { opacity: 0; pointer-events: none; width: 0; overflow: hidden; height: 0; margin: 0; }
.sidebar.mini .sidebar-item span { opacity: 0; width: 0; pointer-events: none; }
.sidebar.mini .sidebar-item { justify-content: center; padding: 10px; }
.sidebar.mini .sidebar-user-card { opacity: 0; pointer-events: none; }

/* Desktop fully collapsed (hidden) */
.sidebar.collapsed { width: 0; padding: 12px 0 16px; }
.sidebar.collapsed .sidebar-section { opacity: 0; }
.sidebar.collapsed .sidebar-item span { opacity: 0; }
.sidebar-section {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--text-secondary);
  padding: 0 12px; margin: 16px 0 6px;
  white-space: nowrap; overflow: hidden; transition: opacity 60ms;
}
.sidebar-section:first-child { margin-top: 4px; }
.sidebar.collapsed 
a.sidebar-item, a.bnav-item, a.more-menu-item, a.dd-item, a.notification-panel-footer,
.screen a, .main-area a, .card a { text-decoration: none; color: inherit; }
.screen a:hover, .main-area a:hover { text-decoration: none; }
.sidebar-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: 10px;
  color: var(--text-secondary); font-size: 13.5px; font-weight: 500;
  cursor: pointer; transition: background 0.12s, color 0.12s; border: none;
  background: transparent; width: calc(100% - 16px); text-align: left;
  font-family: inherit; margin: 0 8px; position: relative;
  white-space: nowrap; overflow: hidden;
}
.sidebar-item i {
  width: 20px; text-align: center; font-size: 17px; flex-shrink: 0;
  color: var(--text-muted); transition: color 0.12s;
}
.sidebar-item span { transition: opacity 60ms; font-size: 13.5px; }
.sidebar.collapsed .sidebar-item span { opacity: 0; }
.sidebar-item:hover {
  background: var(--sidebar-hover);
  color: var(--text-primary);
}
.sidebar-item:hover i { color: var(--text-primary); }
.sidebar-item.active {
  background: var(--primary-light);
  color: var(--primary); font-weight: 700;
  border: none;
  box-shadow: none;
}
.sidebar-item.active i { color: var(--primary); background: rgba(91,108,248,0.12); border-radius: 6px; padding: 2px 4px; }
.sidebar-item.active::before { display: none; }
.sidebar-divider { height: 1px; background: var(--border-light); margin: 10px 12px; }
.sidebar-user-card {
  margin: 8px 8px 0;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  display: flex; align-items: center; gap: 9px;
  overflow: hidden;
}
.sidebar-user-card .su-name { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.sidebar-user-card .su-role { font-size: 11px; color: var(--text-secondary); white-space: nowrap; }

/* ═══════════════════════
   BOTTOM NAVIGATION — Glassmorphism, sharp & polished
═══════════════════════ */
#view-login.active ~ #bottom-nav { display: none !important; }
#bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 810;
  background: var(--bg-card);
  border-top: 1px solid var(--border-light);
  height: calc(var(--bottom-nav-height) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  padding-top: 4px;
  box-shadow: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.plt-ios #bottom-nav {
  background: var(--bg-card);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
#bottom-nav-items {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: var(--bottom-nav-height);
  max-height: var(--bottom-nav-height);
  padding: 0 4px;
  gap: 2px;
}
.bnav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 2px;
  border-radius: 10px;
  font-family: inherit;
  color: var(--text-muted);
  position: relative;
  min-width: 48px;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
  transition: color 60ms var(--ease-standard), background 0.12s ease;
  touch-action: manipulation;
}
.bnav-item:hover { background: rgba(0,0,0,0.04); }
.bnav-item:active { transform: scale(0.96); transition: transform 80ms var(--ease-spring) !important; }
.bnav-item.active { color: var(--primary) !important; }
.bnav-item .bnav-icon {
  font-size: 18px;
  line-height: 1;
  position: relative;
  transition: color 60ms var(--ease-standard);
}
.bnav-item .bnav-label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  transition: color 60ms var(--ease-standard);
}
.bnav-item .bnav-badge {
  position: absolute;
  top: 0; right: 50%;
  margin-right: -16px;
  min-width: 12px; height: 12px;
  background: var(--error);
  border-radius: 6px;
  font-size: 8px; font-weight: 700;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  padding: 0 2px;
  border: 1.5px solid rgba(255,255,255,0.9);
}
.bnav-item.active .bnav-icon-wrap {
  width: 44px;
  height: 26px;
  border-radius: 13px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-light);
  box-shadow: none;
}

/* More menu — glassmorphism, sharp & polished */
#more-menu-overlay {
  display: none; position: fixed; inset: 0; z-index: 890;
  background: rgba(8,12,28,0.32);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}
#more-menu-overlay.on { display: block; animation: mmOverlayIn 0.2s ease; }
@keyframes mmOverlayIn { from { opacity: 0; } to { opacity: 1; } }
#more-menu-sheet {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 900;
  background: rgba(255,255,255,0.62);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid rgba(255,255,255,0.8);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  padding-bottom: 0 ;
  transform: translateY(110%);
  transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.95) inset;
  max-height: 88vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  visibility: hidden;
  display: flex;
  flex-direction: column;
}
#more-menu-sheet.open { transform: translateY(0); visibility: visible; }

.plt-ios #more-menu-sheet,
.plt-ios #pwa-android-sheet,
.plt-ios #pwa-ios-sheet {
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  background: rgba(255, 255, 255, 0.88) !important;
}
body.dark-mode.plt-ios #more-menu-sheet,
body.dark-mode.plt-ios #pwa-android-sheet,
body.dark-mode.plt-ios #pwa-ios-sheet {
  background: rgba(18, 22, 40, 0.92) !important;
}
.more-menu-handle {
  width: 32px; height: 3px;
  background: rgba(0,0,0,0.12);
  border-radius: 99px; margin: 8px auto 0;
}
.more-menu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 12px 14px 10px;
}
.more-menu-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 10px 6px;
  background: rgba(255,255,255,0.45);
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: 8px;
  font-family: inherit;
  color: var(--text-secondary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.18s, transform 0.1s, box-shadow 0.18s, border-color 0.18s;
  min-height: 72px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 1px 0 rgba(255,255,255,0.7) inset;
}
.more-menu-item:hover { background: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.85); box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 1px 0 rgba(255,255,255,0.9) inset; }
.more-menu-item:active { background: rgba(255,255,255,0.55); transform: scale(0.98); }
.more-menu-item .mm-icon {
  width: 44px; height: 44px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(255,255,255,0.9);
  box-shadow: 0 1px 4px rgba(0,0,0,0.04), 0 1px 0 rgba(255,255,255,0.95) inset;
  color: var(--primary);
}
.more-menu-item .mm-label {
  font-size: 10px; font-weight: 600; color: var(--text-secondary);
  text-align: center; line-height: 1.25;
}

/* ═══════════════════════
   DROPDOWN — premium
═══════════════════════ */
.dropdown {
  position: absolute; right: 0; top: calc(100% + 8px);
  background: var(--white); border: 1px solid var(--border); border-radius: 10px;
  min-width: 220px; z-index: 300; overflow: hidden;
  box-shadow: 0 8px 32px rgba(42,53,71,0.14), 0 2px 8px rgba(0,0,0,0.06);
  animation: dropIn 0.1s cubic-bezier(0.4,0,0.2,1);
}
@keyframes dropIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
.dd-header { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.dd-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; font-size: 13.5px; color: var(--text-secondary);
  cursor: pointer; width: 100%; text-align: left;
  border: none; background: transparent; font-family: inherit;
  transition: background 0.1s, color 0.1s; border-radius: 8px; margin: 2px 6px; width: calc(100% - 12px);
}
.dd-item:hover { background: var(--surface); color: var(--text-primary); }
.dd-item.danger { color: var(--error); }
.dd-item.danger:hover { background: var(--error-light); }

/* ═══════════════════════
   CARDS — Gmail list style (flat, native)
═══════════════════════ */
.card {
  background: var(--white);
  border: 1px solid rgba(91,108,248,0.08);
  border-radius: var(--radius-card);
  padding: var(--card-padding-desktop);
  box-shadow: var(--card-shadow);
  transition: box-shadow 0.2s var(--ease-out), border-color 0.2s var(--ease-out), background 60ms;
}
.card:hover { box-shadow: var(--card-shadow-hover); border-color: rgba(91,108,248,0.14); }
.card:active { background: var(--surface) !important; }
.card-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--border-light);
}
.card-title { font-size: 15px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }

/* Stat cards — premium polished */
.stat-card {
  background: var(--white);
  border: 1px solid rgba(91,108,248,0.08);
  border-radius: var(--radius-card);
  padding: var(--card-padding);
  min-height: var(--kpi-card-min-height);
  box-shadow: var(--card-shadow);
  cursor: default;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), border-color 60ms var(--ease-out);
}
.stat-card:hover { box-shadow: var(--card-shadow-hover); border-color: rgba(91,108,248,0.14); }
.stat-card:active { background: var(--surface) !important; }
/* stat-card::before gradient accent defined in KPI section */

/* ═══════════════════════
   BUTTONS — native-app tactile
═══════════════════════ */
button, .btn { font-family: inherit; cursor: pointer; }
/* Kill any default focus outline on click for all buttons */
button:focus:not(:focus-visible) { outline: none !important; }
button { -webkit-tap-highlight-color: transparent; }

/* Primary action: btn-gold and btn-primary */
.btn-gold, .btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  background: linear-gradient(145deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff; border: none; border-radius: var(--radius-btn);
  font-family: inherit; white-space: nowrap; cursor: pointer; text-decoration: none; line-height: 1.4;
  box-shadow: 0 4px 16px rgba(91,108,248,0.4), 0 2px 8px rgba(91,108,248,0.25), inset 0 1px 0 rgba(255,255,255,0.2);
  transition: box-shadow 0.25s, transform 0.15s, filter 60ms;
  -webkit-tap-highlight-color: transparent; outline: none;
}
.btn-gold:hover, .btn-primary:hover {
  box-shadow: 0 8px 24px rgba(91,108,248,0.45), 0 4px 14px rgba(91,108,248,0.3), inset 0 1px 0 rgba(255,255,255,0.25);
  filter: brightness(1.04);
}
.btn-gold:active, .btn-primary:active {
  transform: scale(0.97);
  box-shadow: 0 1px 2px rgba(60,64,67,.2);
  transition: transform 0.08s;
}
.btn-gold:focus-visible, .btn-primary:focus-visible {
  outline: 2.5px solid rgba(91,108,248,0.7); outline-offset: 2px;
}
.btn-gold:focus:not(:focus-visible) { outline: none; }
.btn-gold:disabled { background: var(--border); color: var(--text-muted); box-shadow: none; cursor: not-allowed; opacity: 0.7; transform: none; }

.btn-secondary, .btn-outline {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--white); color: var(--text-secondary);
  border: 1.5px solid var(--border); border-radius: var(--radius-btn);
  font-family: inherit; white-space: nowrap; cursor: pointer; line-height: 1.4;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.1s;
  -webkit-tap-highlight-color: transparent; outline: none;
}
.btn-secondary:hover, .btn-outline:hover {
  background: var(--sidebar-hover); border-color: var(--border); color: var(--text-primary);
}
.btn-secondary:active, .btn-outline:active {
  transform: scale(0.96);
  background: var(--surface); border-color: var(--border); color: var(--text-primary);
  transition: transform 0.08s;
}
.btn-secondary:focus-visible, .btn-outline:focus-visible {
  outline: 2px solid rgba(91,108,248,0.55); outline-offset: 2px;
}
.btn-secondary:focus:not(:focus-visible) { outline: none; background: var(--white); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: transparent; color: var(--text-muted); border: none; border-radius: var(--radius-btn);
  font-family: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent; outline: none;
  transition: background 0.12s, color 0.12s;
}
.btn-ghost:hover { background: var(--surface); color: var(--text-primary); }
.btn-ghost:active { background: var(--surface-2); transform: scale(0.96); transition: transform 0.08s; }
.btn-ghost:focus:not(:focus-visible) { outline: none; background: transparent; }

.btn-danger {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--error-light); color: var(--error);
  border: 1.5px solid rgba(244,91,65,0.22); border-radius: var(--radius-btn);
  font-family: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent; outline: none;
  transition: background 0.12s, transform 0.1s;
}
.btn-danger:hover { background: #FBDAD5; border-color: rgba(244,91,65,0.4); }
.btn-danger:active { transform: scale(0.96); background: #FBDAD5; transition: transform 0.08s; }
.btn-danger:focus:not(:focus-visible) { outline: none; }

/* btn-sm — compact, 32dp touch target */
.btn-sm {
  padding: 0 var(--btn-pad-x-sm) !important; font-size: var(--font-sm) !important;
  gap: var(--space-1) !important; border-radius: var(--radius-btn-sm) !important;
  min-height: var(--btn-height-sm) !important; line-height: 1.3 !important;
}
.w-full { width: 100%; justify-content: center; }

/* ═══════════════════════
   FORMS — compact, unified
═══════════════════════ */
.form-label {
  display: block; font-size: var(--font-label-sm); font-weight: 600;
  color: var(--text-secondary); margin-bottom: 3px; letter-spacing: 0.02em;
}
.form-input {
  display: block; width: 100%; background: var(--white);
  border: 1px solid var(--border); border-radius: var(--radius-input);
  padding: 0 var(--input-pad-x); font-size: 13px; color: var(--text-primary);
  outline: none; font-family: inherit;
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), background 60ms;
  -webkit-appearance: none; appearance: none;
}
input.form-input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=date]),
select.form-input { height: var(--input-height); min-height: var(--input-height); }
input.form-input[type=date] { height: var(--input-height); }
.form-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(91,108,248,0.12);
  background: #FAFCFF;
}
.form-input::placeholder { color: var(--text-muted); opacity: 0.8; }
.form-input option { background: #fff; }
textarea.form-input { height: auto; resize: vertical; min-height: 64px; padding: 6px var(--input-pad-x); }
select.form-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237A8EA8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--input-pad-x) center;
  padding-right: 36px;
}
.form-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
@media (max-width: 520px) { .form-grid-2 { grid-template-columns: 1fr !important; } }
.form-row { margin-bottom: var(--space-2); }
.form-row:last-child { margin-bottom: 0; }
.role-pill {
  display: flex; align-items: center; justify-content: center; width: 100%;
  min-height: var(--input-height);
  background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-input);
  padding: 0 var(--space-4); font-size: var(--font-body-md); font-weight: 600; color: var(--text-secondary);
  cursor: pointer; font-family: inherit; transition: background 0.10s, color 0.10s;
}
.role-pill:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.role-pill.active { background: var(--primary-light); border-color: var(--primary); color: var(--primary); font-weight: 700; }

/* ═══════════════════════════════════════════
   DESIGN POLISH — Premium Event Management
   Aesthetic: Refined luxury, modern & purposeful
═══════════════════════════════════════════ */

/* ── Typography (page header) ── */

/* ── Form label (consistent with forms block) ── */
.form-label {
  display: block; font-size: 11px; font-weight: 600;
  color: var(--text-secondary); margin-bottom: 4px;
  letter-spacing: 0.05px;
}

/* ── Input refinement ── */
.form-input { border-color: #E0E8F2; }
.form-input:hover:not(:focus) { border-color: #BCC9DC; }

/* ── Card enhancements ── */
.card {
  border-color: #ECF1FA;
  transition: box-shadow 0.2s ease, border-color 60ms ease;
}
.card:hover {
  box-shadow: var(--card-shadow-hover);
  border-color: var(--border);
}
.stat-card { border-color: var(--border-light); }

/* ── Data table refined ── */
.data-table { border-collapse: separate; border-spacing: 0; }
.data-table thead tr { background: #F7F9FE; }
.data-table th {
  font-size: var(--font-label-sm) !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: 0.05em !important;
  color: var(--text-muted) !important; padding: var(--space-3) var(--space-4) !important;
  border-bottom: 1.5px solid var(--border-light) !important;
}
.data-table td {
  padding: var(--space-3) var(--space-4) !important; font-size: var(--font-body-md) !important;
  border-bottom: 1px solid var(--border-light) !important;
  vertical-align: middle !important;
}
.data-table tr:last-child td { border-bottom: none !important; }
.data-table tbody tr:hover td { background: #F7F9FF !important; }

/* ── Badge refinements ── */
.badge {
  min-height: var(--badge-height); padding: var(--space-1) var(--badge-pad-x);
  border-radius: var(--radius-badge) !important; font-size: var(--font-label-sm) !important;
  padding: 3px 8px !important; letter-spacing: 0.2px !important;
  font-weight: 700 !important;
}

/* ── Page header row ── */
.page-header-row { margin-bottom: 20px; }

/* ── Settings rows ── */
.settings-row { transition: background 0.12s; }
.settings-row-label { font-weight: 600; }

/* ── Stat card value typography ── */
.kpi-num { font-variant-numeric: tabular-nums; }

/* ── Back button: icon-only (arrow), uniform size everywhere ── */
.back-btn-unified,
.page-back-btn,
.sub-back-btn,
.fs-back-btn,
#nav-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 36px;
  height: 36px;
  min-width: 36px;
  width: 36px;
  padding: 0;
  border-radius: 10px;
  background: var(--white);
  border: 1.5px solid var(--border-light);
  cursor: pointer;
  color: var(--primary);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 4px rgba(19,25,41,0.08);
  transition: background 0.12s, border-color 0.12s, transform 0.1s;
  outline: none;
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
}
.back-btn-unified:hover,
.sub-back-btn:hover,
.fs-back-btn:hover,
#nav-back-btn:hover { background: var(--primary-light); border-color: rgba(91,108,248,0.25); }
.back-btn-unified:active,
.page-back-btn:active,
.sub-back-btn:active,
.fs-back-btn:active,
#nav-back-btn:active { transform: scale(0.92); background: var(--primary-light); }
.page-back-btn { display: none; }
@media (max-width: 768px) {
  .page-back-btn { display: inline-flex; }
  /* Ensure back button stays uniform on mobile — never shrink */
  .fs-back-btn,
  .sub-back-btn,
  #nav-back-btn.visible {
    min-height: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    width: 36px !important;
    flex-shrink: 0 !important;
  }
}

/* ── Mobile: prevent text/icon overlap in flex rows ── */
@media (max-width: 768px) {
  .page-header-row > div:first-child,
  .sub-top-bar .sub-top-title,
  .settings-row > div:not(.settings-row-icon),
  .sidebar-item span,
  .bnav-item .bnav-label,
  .card [style*="flex:1"],
  .guest-row > div:first-child,
  #more-menu-header > div:first-child { min-width: 0; }
  .sub-top-title,
  .bnav-item .bnav-label,
  .sidebar-item span,
  #more-menu-header > div:first-child > div:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ── Button focus cleanup ── */
.btn-gold:focus:not(:focus-visible),
.btn-secondary:focus:not(:focus-visible),
.btn-ghost:focus:not(:focus-visible),
.btn-danger:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}
.btn-gold:focus:not(:focus-visible) {
  box-shadow: 0 3px 10px rgba(69,112,234,0.3) !important;
}

/* ── Subtle surface gradient on screen ── */
.screen { background: transparent; }

/* ── Sidebar refinement ── */
.sidebar-item { font-size: 13.5px; letter-spacing: -0.1px; }

/* ── Bottom nav pill indicator ── */
.bnav-item.active .bnav-icon-wrap::after {
  content: '';
  position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--primary);
}

/* ── Premium event identity touches ── */
/* Soft gold accent on key surfaces */
.dash-hero { position: relative; overflow: hidden; }
.dash-hero::after {
  content: ''; position: absolute; top: -60px; right: -60px;
  width: 220px; height: 220px; border-radius: 50%;
  background: transparent;
  pointer-events: none;
}

/* ── Smooth section transitions ── */
.dash-section { animation: dashFadeUp 0.15s ease both; }
.dash-section:nth-child(2) { animation-delay: 0.06s; }
.dash-section:nth-child(3) { animation-delay: 50ms; }
.dash-section:nth-child(4) { animation-delay: 75ms; }
@keyframes dashFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════
   BADGES — crisp pill
═══════════════════════ */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 20px;
  font-size: 11.5px; font-weight: 700; white-space: nowrap; letter-spacing: 0.1px;
}
.badge-blue, .badge-gold { background: var(--primary-light); color: var(--primary); }
.badge-green              { background: var(--success-light); color: #0DA882; }
.badge-red                { background: var(--error-light); color: var(--error); }
.badge-yellow             { background: var(--warning-light); color: #B87B00; }
.badge-gray               { background: #F1F5F9; color: #6B7A8D; }
.badge-purple             { background: #F3EEFF; color: #7B5FCC; }

/* ═══════════════════════
   TABLES — crisp native
═══════════════════════ */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}
.data-table { width: 100%; border-collapse: collapse; }
.data-table thead tr { background: #FAFBFE; border-bottom: 1.5px solid var(--border); }
.data-table th {
  padding: 12px 18px; text-align: left;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--text-muted); white-space: nowrap;
}
.data-table td {
  padding: 13px 18px; color: var(--text-primary); font-size: 13.5px;
  border-bottom: 1px solid rgba(229,234,242,0.7); vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background 0.12s; }
.data-table tbody tr:hover td { background: #F7F9FF; }

/* ═══════════════════════
   TOAST — app-native
═══════════════════════ */
#toast {
  position: fixed;
  bottom: calc(var(--bnav-height, 56px) + env(safe-area-inset-bottom, 0px) + 12px);
  right: 16px;
  left: auto;
  z-index: 10500;
  background: #1C1F2E;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px;
  padding: 11px 14px;
  min-width: 200px;
  max-width: min(300px, calc(100vw - 32px));
  display: none;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.28), 0 2px 6px rgba(0,0,0,0.14);
}
#toast #toast-msg { color: #F0F4FF; font-size: 13px; font-weight: 700; line-height: 1.3; }
#toast #toast-sub { color: #7A8BA8; font-size: 11px; margin-top: 2px; display: none; line-height: 1.3; }
#toast button { color: #556070 !important; background: none; border: none; cursor: pointer; padding: 2px; font-size: 16px; flex-shrink: 0; }
.toast-icon { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 13px; }

/* ═══════════════════════
   MODALS — Full screen, sharp edges (app-wide)
═══════════════════════ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(8,12,28,0.65);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 1000; display: none; align-items: stretch; justify-content: stretch;
  padding: 0;
  animation: modalBackdropIn 0.15s var(--ease-out) forwards;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: var(--glass-bg); backdrop-filter: none; -webkit-backdrop-filter: none;
  border: none;
  border-radius: 0 !important;
  padding: 0;
  width: 100%; max-width: 100%; height: 100%; max-height: 100%;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: none;
  animation: modalIn 0.14s ease-out;
}
@media (max-width: 768px) {
  .modal-overlay { align-items: stretch; padding: 0; }
  .modal-box {
    border-radius: 0 !important;
    margin: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%;
    animation: sheetSlideUp 0.2s var(--ease-spring);
  }
  .modal-footer { padding-bottom: calc(20px + var(--safe-area-bottom)); }
}
@keyframes modalIn { from { transform: scale(0.97) translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes modalBackdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheetSlideUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

.modal-hd {
  display: flex; align-items: center;
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}
.modal-hd-icon {
  width: var(--touch-target); height: var(--touch-target); border-radius: var(--radius-md);
  background: var(--primary-light);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  margin-right: var(--space-3);
}
.modal-hd-icon i { color: var(--primary); font-size: 16px; }
.modal-hd-content { flex: 1; min-width: 0; }
.modal-title { font-size: 16px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.3px; }
.modal-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }
.modal-close {
  width: 30px; height: 30px; border-radius: 8px; background: var(--surface);
  border: 1px solid var(--border-light); color: var(--text-muted); cursor: pointer; font-size: 12px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background 0.10s, color 0.10s; margin-left: 8px;
}
.modal-close:hover { background: var(--error-light); border-color: rgba(244,91,65,0.2); color: var(--error); }
.btn-icon-info {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--primary-light); border: 1px solid rgba(91,108,248,0.2);
  color: var(--primary); cursor: pointer; font-size: 15px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background 0.10s, color 0.10s; -webkit-tap-highlight-color: transparent;
}
.btn-icon-info:hover { background: rgba(91,108,248,0.2); transform: scale(1.05); }
.btn-icon-info:active { transform: scale(0.95); }

/* Venue info popover — glassmorphism, native feel */
.venue-info-popover {
  position: fixed; inset: 0; z-index: 10001;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 16px 24px; padding-bottom: var(--safe-bottom);
  pointer-events: none;
}
.venue-info-popover.visible {
  pointer-events: all;
  animation: venuePopoverBackdrop 0.25s ease forwards;
}
.venue-info-popover.visible .venue-info-popover-inner {
  animation: venuePopoverSlideUp 0.15s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
.venue-info-popover-inner {
  width: 100%; max-width: 400px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -8px 40px rgba(30,27,75,0.15), 0 0 0 1px rgba(91,108,248,0.08);
  overflow: hidden;
}
.venue-info-popover-header {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff; font-size: 15px; font-weight: 700;
}
.venue-info-popover-header i:first-child { font-size: 18px; opacity: 0.95; }
.venue-info-popover-header span { flex: 1; }
.venue-info-close {
  width: 32px; height: 32px; border-radius: 10px;
  background: rgba(255,255,255,0.2); border: none; color: #fff;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent; transition: background 0.12s;
}
.venue-info-close:active { background: rgba(255,255,255,0.3); }
.venue-info-content {
  padding: 20px 24px 24px; font-size: 14px; line-height: 1.6; color: var(--text-primary);
}
@keyframes venuePopoverBackdrop {
  from { background: transparent; }
  to { background: rgba(0,0,0,0.35); }
}
@keyframes venuePopoverSlideUp {
  from { opacity: 0; transform: translateY(100%); }
  to { opacity: 1; transform: translateY(0); }
}

.modal-body { padding: var(--modal-body-padding); flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.modal-footer {
  padding: var(--modal-footer-padding); display: flex; gap: var(--space-2); flex-shrink: 0;
  border-top: 1px solid var(--border-light);
  position: sticky; bottom: 0; z-index: 5;
  background: var(--white);
}
/* App-wide: most modals full screen, sharp edges. Vendor pick + share are content-sized (see below). */
.modal-overlay .modal-box,
#modal-confirm .modal-box,
#modal-pdf .modal-box,
#modal-chat .modal-box,
#modal-event-detail .modal-box,
#modal-notification-detail .modal-box,
#modal-decor-upload .modal-box {
  border-radius: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
}
/* Vendor selection: content-sized bottom sheet, not full screen */
#modal-vendor-pick { align-items: flex-end !important; padding: 0 !important; }
#modal-vendor-pick .modal-box {
  width: 100% !important; max-width: 100% !important;
  height: auto !important; max-height: 85vh !important;
  border-radius: 14px 14px 0 0 !important;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.12) !important;
}
/* Share PDF: bottom sheet, content height, standard header */
#modal-share-pdf { align-items: flex-end !important; padding: 0 !important; }
#modal-share-pdf .modal-box {
  width: 100% !important; max-width: 100% !important;
  height: auto !important; max-height: 80vh !important;
  border-radius: 14px 14px 0 0 !important;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.12) !important;
}
#modal-share-pdf .modal-hd {
  background: var(--bg-card) !important;
  border-bottom: 1px solid var(--border-light) !important;
}
#modal-share-pdf .modal-hd-icon {
  background: var(--primary-light) !important;
  border-color: rgba(91,108,248,0.2) !important;
}
#modal-share-pdf .modal-title {
  color: var(--text-primary) !important;
}
#modal-share-pdf .modal-subtitle {
  color: var(--text-muted) !important;
}
.modal-footer .btn-secondary,
.modal-footer .btn-gold { justify-content: center; border-radius: var(--radius-btn); }
.modal-footer .btn-secondary { flex: 1; }
.modal-footer .btn-gold { flex: 2; }
/* Expose modal-close-btn as alias */
.modal-close-btn {
  width: 30px; height: 30px; border-radius: 8px; background: var(--surface);
  border: 1px solid var(--border-light); color: var(--text-muted); cursor: pointer; font-size: 12px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background 0.10s, color 0.10s; margin-left: 8px;
}
.modal-close-btn:hover { background: var(--error-light); border-color: rgba(244,91,65,0.2); color: var(--error); }

/* ═══════════════════════
   WIZARD — Premium Native App Style
═══════════════════════ */
.wizard-page { padding-bottom: max(32px, calc(env(safe-area-inset-bottom, 0px) + 28px)); }
.wizard-header-native {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 20px; padding: 18px 20px;
  background: linear-gradient(135deg, #0F142A 0%, #1a2342 40%, #252d52 70%, #2d3664 100%);
  border-radius: 20px; position: relative; overflow: hidden;
  box-shadow: 0 8px 28px rgba(15,20,42,0.3), 0 2px 12px rgba(0,0,0,0.1);
}
.wizard-header-native::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 80% 20%, rgba(255,255,255,0.12) 0%, transparent 50%);
  pointer-events: none;
}
.wizard-back-btn-native {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.18); color: #fff; border: 1px solid rgba(255,255,255,0.3);
  cursor: pointer; transition: transform 0.08s, background 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.wizard-back-btn-native:active { transform: scale(0.95); }
.wizard-back-btn-native:hover { background: rgba(255,255,255,0.25); }
.wizard-header-text { flex: 1; min-width: 0; position: relative; z-index: 1; }
.wizard-title-native { font-size: 1.35rem; font-weight: 800; color: #fff; margin: 0; letter-spacing: -0.03em; }
.wizard-sub-native { font-size: 12px; color: rgba(255,255,255,0.8); margin-top: 4px; font-weight: 500; }

.wizard-step { display: none; }
.wizard-step.active { display: block; animation: fadeIn 0.12s ease; }
.step-indicator { display: flex; align-items: center; margin-bottom: 0; }
.step-dot {
  width: 38px; height: 38px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; transition: background 0.10s, color 0.10s;
  border: 1.5px solid rgba(91,108,248,0.2); color: var(--text-muted); background: var(--white);
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.step-dot.done   { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 2px 10px rgba(91,108,248,0.35); }
.step-dot.active { border-color: var(--primary); color: var(--primary); background: var(--primary-light); box-shadow: 0 0 0 4px rgba(91,108,248,0.12); }
.step-line { flex: 1; height: 2px; background: var(--border); transition: background 60ms; margin: 0 10px; border-radius: 2px; min-width: 24px; }
.step-line.done { background: linear-gradient(90deg, var(--primary) 0%, var(--primary-mid) 100%); }
.step-lbl { font-size: 11px; font-weight: 600; margin-top: 8px; text-align: center; white-space: nowrap; }

/* Step track — premium card */
.wizard-step-track.step-track {
  background: var(--white); border: 1px solid rgba(91,108,248,0.08);
  border-radius: 8px; padding: 22px 24px; margin-bottom: 22px;
  box-shadow: 0 2px 14px rgba(0,0,0,0.04), 0 1px 4px rgba(0,0,0,0.02);
}

/* ═══════════════════════
   LIVE CART — Native Premium
═══════════════════════ */
.live-cart {
  background: var(--white); border: 1px solid rgba(91,108,248,0.08);
  border-radius: 8px; padding: 20px;
  box-shadow: 0 2px 14px rgba(0,0,0,0.04), 0 1px 4px rgba(0,0,0,0.02);
  transition: box-shadow 0.12s;
}
.live-cart:hover { box-shadow: 0 4px 20px rgba(91,108,248,0.08), 0 2px 10px rgba(0,0,0,0.04); }
.cart-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--border);
}
.cart-total { border-top: 2px solid var(--border); padding-top: 12px; margin-top: 8px; }
.divider { height: 1px; background: var(--border); }

/* ═══════════════════════
   ACCORDION — Native Premium
═══════════════════════ */
.accordion {
  background: var(--white); border: 1px solid rgba(91,108,248,0.08);
  border-radius: 10px; margin-bottom: 12px; overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04), 0 1px 4px rgba(0,0,0,0.02);
  transition: box-shadow 0.12s;
}
.accordion:hover { box-shadow: 0 4px 16px rgba(91,108,248,0.08), 0 2px 8px rgba(0,0,0,0.04); }
.accordion-header {
  padding: 16px 20px; display: flex; align-items: center;
  justify-content: space-between; cursor: pointer; transition: background 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.accordion-header:hover { background: var(--surface); }
.accordion-header:active { background: var(--surface); }
.accordion-body { border-top: 1px solid var(--border-light); padding: 16px 20px; display: none; }
.accordion-body.open { display: block; }
.accordion-header .chevron { transition: transform 60ms ease; }
.accordion-header.open .chevron { transform: rotate(180deg); }

/* ═══════════════════════
   SERVICE TAGS — Wizard Step 3 (compact labels)
═══════════════════════ */
.service-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 20px;
  border: 1.5px solid rgba(91,108,248,0.15);
  background: var(--white);
  font-size: 13px; font-weight: 600; color: var(--text-secondary);
  font-family: inherit; cursor: pointer;
  transition: background 0.09s; -webkit-tap-highlight-color: transparent;
}
.service-tag:hover { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }
.service-tag.selected { border-color: var(--primary); background: var(--primary-light); color: var(--primary); box-shadow: 0 2px 8px rgba(91,108,248,0.2); }
.service-tag:active { transform: scale(0.97); }
.service-tag-icon { font-size: 16px; }
.service-tag-name { white-space: nowrap; }
.service-tag-count {
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px; background: var(--primary);
  color: #fff; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Legacy service-card (other pages) */
.service-card {
  border: 1.5px solid rgba(91,108,248,0.12); border-radius: 10px;
  padding: 16px 12px; text-align: center; cursor: pointer;
  transition: background 0.09s; background: var(--white); position: relative;
  overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  -webkit-tap-highlight-color: transparent;
}
.service-card:hover { border-color: var(--primary); background: var(--primary-light); }
.service-card.selected { border-color: var(--primary); background: var(--primary-light); }
.service-card .icon { font-size: 28px; margin-bottom: 8px; display: block; }
.service-card .name { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.service-card .check { display: none; }
.service-card.selected .check { display: flex; }

/* ═══════════════════════
   CAT ITEMS — Native Premium
═══════════════════════ */
.cat-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border: 1px solid rgba(91,108,248,0.1); border-radius: 10px;
  margin-bottom: 10px; transition: background 0.09s; background: var(--white); cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03); -webkit-tap-highlight-color: transparent;
}
.cat-item:hover { border-color: var(--primary); background: var(--primary-light); box-shadow: 0 2px 10px rgba(91,108,248,0.1); }
.cat-item.selected { border-color: var(--primary); background: var(--primary-light); }
.cat-item:active { transform: scale(0.99); }
.cat-qty { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.qty-btn {
  width: 30px; height: 30px; border-radius: 10px;
  background: var(--surface); border: 1px solid rgba(91,108,248,0.12);
  color: var(--text-primary); font-size: 16px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.09s;
}
.qty-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.qty-btn:active { transform: scale(0.92); }

/* ═══════════════════════
   REVIEW SECTION — Native Premium
═══════════════════════ */
.review-section {
  border: 1px solid rgba(91,108,248,0.08); border-radius: 10px;
  padding: 18px; margin-bottom: 14px; background: var(--white);
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}
.review-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--border-light); font-size: 14px;
}
.review-row:last-child { border-bottom: none; }

/* ═══════════════════════
   PDF PREVIEW
═══════════════════════ */
.pdf-preview { font-family: Georgia, serif; color: #1a1a1a; font-size: 13px; }
.pdf-preview table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.pdf-preview th {
  background: #1B2A4A; color: #fff; padding: 9px 12px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; text-align: left;
}
.pdf-preview td { padding: 9px 12px; border-bottom: 1px solid #eee; }
.pdf-preview tr:last-child td { border-bottom: none; }

/* ═══════════════════════
   DECOR / UPLOAD
═══════════════════════ */
.drop-zone {
  border: 2px dashed var(--border); border-radius: 10px; padding: 28px;
  text-align: center; cursor: pointer; background: var(--surface); transition: background 0.10s, color 0.10s;
}
.drop-zone:hover, .drop-zone.drag-active { border-color: var(--primary); background: var(--primary-light); }

/* ═══════════════════════
   UTILITY HELPERS
═══════════════════════ */
.grid { display: grid; }
.grid-cols-2 { grid-template-columns: 1fr 1fr; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }
.mt-6 { margin-top: 24px; }
.font-display { font-weight: 700; }
.text-2xl { font-size: 22px; }
.max-w-2xl { max-width: 640px; }
.section-title, .dash-section-title {
  font-size: var(--font-label) !important; font-weight: 700 !important; text-transform: uppercase !important;
  letter-spacing: 0.06em !important; color: var(--text-muted) !important; margin-bottom: var(--space-3) !important;
}

/* ── Mobile nav desktop-only elements ── */
.nav-desktop-only { display: flex; }
@media (max-width: 768px) {
  .nav-desktop-only { display: none !important; }
}

/* ═══════════════════════════════════
   PREMIUM VISUAL ENHANCEMENTS
═══════════════════════════════════ */

.top-nav {
  background: var(--bg-card) !important;
  border-bottom: 1px solid var(--border-light);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}

/* Sidebar premium gradient overlay */
.sidebar::after {
  content: ''; position: absolute;
  bottom: 0; left: 0; right: 0; height: 80px;
  background: transparent;
  pointer-events: none;
}

/* Enhanced stat card hover */
.stat-card {
  transition: transform 0.2s cubic-bezier(0.34,1.4,0.64,1), box-shadow 0.2s, border-color 60ms !important;
}
@media (min-width: 769px) {
  .stat-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(91,108,248,0.14), 0 3px 10px rgba(0,0,0,0.05) !important;
    border-color: rgba(91,108,248,0.2) !important;
  }
}

/* More menu items hover enhancement */
.more-menu-item:hover { background: var(--primary-light) !important; }
.more-menu-item .mm-icon { transition: transform 0.18s cubic-bezier(0.34,1.4,0.64,1); }
.more-menu-item:hover .mm-icon { transform: scale(1.12); }

#bottom-nav {
  background: var(--bg-card) !important;
  border-top: 1px solid var(--border-light) !important;
  box-shadow: none !important;
}
.bnav-item.active .bnav-icon-wrap {
  background: var(--primary-light) !important;
  border-radius: 10px;
  padding: 4px 14px;
}

/* Premium more menu sheet */
#more-menu-sheet {
  box-shadow: 0 -8px 40px rgba(19,25,41,0.12), 0 -1px 0 rgba(221,228,240,0.5) !important;
}
.more-menu-handle {
  background: var(--border-light) !important;
}

/* Premium card hover — sharp glass edge */
.card:hover {
  border-color: var(--glass-border);
}

/* Sidebar items premium active state */
.sidebar-item.active {
  background: var(--sidebar-active) !important;
}

/* Login page premium */
.login-logo-box {
  letter-spacing: -0.5px;
}

/* Page transitions smoother */
.screen { transition: none; }

/* Inputs on focus - glow */
.form-input:focus {
  box-shadow: 0 0 0 3.5px rgba(91,108,248,0.15), 0 1px 4px rgba(91,108,248,0.1) !important;
}

/* ── Mobile: fix top bar alignment ── */
@media (max-width: 768px) {
  .top-nav {
    display: flex !important;
    align-items: center !important;
  }
  .nav-right {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    margin-left: 0 !important;
    flex-shrink: 0;
  }
  .nav-right .nav-icon-btn {
    width: 44px; height: 44px;
    border-radius: 8px;
    color: var(--text-secondary);
  }
  .nav-right .nav-icon-btn:active {
    background: var(--surface);
    transform: scale(0.9);
  }
}

/* Sidebar colors for logout */
.sidebar-logout { color: rgba(252,129,129,0.8) !important; }
.sidebar-logout:hover { background: rgba(244,91,65,0.1) !important; color: #FC8181 !important; }

/* ═══════════════════════════════════════════
   PREMIUM DESIGN SYSTEM v2.0 — Native-grade
═══════════════════════════════════════════ */

/* ── Page title & subtitle ── */
.page-sub, .page-subtitle { font-size: var(--font-body-sm) !important; color: var(--text-muted) !important; margin-top: 6px !important; font-weight: 500 !important; }

/* ── Cards: glass + sharp; padding/radius ── */
.card { border-radius: var(--radius-lg) !important; padding: var(--space-2) !important; }
.stat-card { border-radius: var(--radius-lg) !important; padding: var(--space-2) !important; }

/* ── KPI stat value ── */
.kpi-value { font-size: 22px !important; font-weight: 800 !important; letter-spacing: -0.5px !important; color: var(--text-primary) !important; }
.kpi-label { font-size: 11.5px !important; color: var(--text-muted) !important; font-weight: 500 !important; }

/* ── Button refinements ── */
.btn-gold {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff; border: none; border-radius: 10px;
  padding: 8px 15px; font-size: 13px; font-weight: 600; font-family: inherit;
  cursor: pointer; letter-spacing: 0.01em;
  box-shadow: 0 1px 2px rgba(91,108,248,0.25), 0 3px 10px rgba(91,108,248,0.28);
  transition: all 0.15s cubic-bezier(0.2,0,0,1);
  -webkit-tap-highlight-color: transparent;
}
.btn-gold:hover { filter: brightness(1.06); box-shadow: 0 2px 12px rgba(91,108,248,0.38); }
.btn-gold:active { transform: scale(0.97); filter: brightness(0.97); }
.btn-secondary {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--white); color: var(--text-secondary);
  border: 1.5px solid var(--border); border-radius: 9px;
  padding: 8px 14px; font-size: 13px; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: background 0.10s, border-color 0.10s, color 0.10s;
  -webkit-tap-highlight-color: transparent;
}
.btn-secondary:hover { background: var(--primary-light); border-color: rgba(91,108,248,0.3); color: var(--primary); }

/* ── Bottom nav — transparent ── */
.plt-android #bottom-nav {
  background: var(--bg-card) !important;
}
.bnav-item:active { transform: scale(0.92); transition: transform 80ms cubic-bezier(0.34,1.56,0.64,1) !important; background: transparent !important; }
.bnav-item:focus { outline: none !important; background: transparent !important; }
.bnav-item:focus:not(:focus-visible) { outline: none !important; background: transparent !important; }
.bnav-item:focus-visible { outline: none !important; }
.bnav-item:-moz-focusring { outline: none !important; }
.bnav-item::-moz-focus-inner { border: 0 !important; }
.bnav-item.active .bnav-label { color: var(--primary) !important; font-weight: 700 !important; }
.bnav-item.active .bnav-icon { color: var(--primary) !important; }
.bnav-item.active .bnav-icon-wrap {
  background: var(--primary-light) !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  box-shadow: 0 2px 8px rgba(91,108,248,0.12) !important;
}
.bnav-item:not(.active) .bnav-icon-wrap { padding: 8px 14px; }
.bnav-label { font-size: 10px !important; font-weight: 600 !important; margin-top: 3px; }
.bnav-icon { font-size: 19px !important; }

/* ── More menu refinements ── */
#more-menu-sheet {
  background: var(--gmail-bg) !important;
  border-radius: 12px 12px 0 0 !important;
  box-shadow: 0 -4px 30px rgba(19,25,41,0.1), 0 -1px 0 rgba(221,228,240,0.6) !important;
}
.more-menu-handle { width: 36px !important; height: 4px !important; background: var(--border) !important; border-radius: 2px !important; }
.more-menu-item {
  background: var(--white) !important;
  border-radius: 10px !important;
  border: 1px solid var(--border-light) !important;
}
.more-menu-item:hover { background: var(--primary-light) !important; border-color: rgba(91,108,248,0.15) !important; }
.mm-icon { width: 42px !important; height: 42px !important; border-radius: 8px !important; font-size: 16px !important; }
.mm-label { font-size: 12px !important; font-weight: 700 !important; color: var(--text-primary) !important; margin-top: 7px !important; letter-spacing: -0.1px !important; }

/* ── Modal handle for mobile ── */
.modal-box::before {
  content: none;
}
@media (max-width: 768px) {
  .modal-box::before {
    content: '';
    display: block;
    width: 36px; height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin: 10px auto 0;
    flex-shrink: 0;
  }
}

/* ── Table refinements ── */
.data-table th { font-size: 10.5px !important; letter-spacing: 0.7px !important; }
.data-table td { font-size: 13px !important; padding: 8px 12px !important; }
.data-table tbody tr:hover td { background: #F7F9FF !important; }

/* ── Badge refinements ── */
.badge { border-radius: 6px !important; font-size: 11px !important; padding: 3px 8px !important; letter-spacing: 0.1px !important; }

/* ── Mobile: screen padding refinements ── */
@media (max-width: 768px) {
  .card { border-radius: 10px !important; padding: 8px !important; }
  .stat-card { border-radius: 10px !important; padding: 8px !important; }
  .page-title { font-size: 20px !important; }
  /* Mobile form inputs slightly smaller */
  .modal-body { padding: var(--modal-body-padding) !important; }
  .modal-footer { padding: var(--modal-footer-padding) !important; }
  .modal-hd { padding: var(--space-4) var(--modal-body-padding) var(--space-3) !important; }
  .data-table th, .data-table td { padding: 6px 10px !important; font-size: 12px !important; }
}

/* ── Confirm modal centered icon refinement ── */
#modal-confirm .modal-box { text-align: center; }
#modal-confirm .modal-footer { justify-content: center; }

/* ── iOS: safe area bottom for modal ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 768px) {
    .modal-footer { padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important; }
  }
}

/* ── Smooth scrolling ── */
html { scroll-behavior: smooth; }

/* ── Focus ring for accessibility ── */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── More menu grid sizing ── */
.more-menu-grid { grid-template-columns: repeat(3, 1fr) !important; }

/* ── App Settings — premium component system ── */
.settings-root { max-width: 560px; margin: 0 auto; }
.settings-profile-card {
  display: flex; align-items: center; gap: 16px;
  background: var(--white); border-radius: 20px;
  border: 1px solid var(--border-light);
  padding: 18px 20px; margin-bottom: 24px;
  box-shadow: 0 2px 12px rgba(19,25,41,0.05);
}
.settings-profile-avatar {
  width: 54px; height: 54px; border-radius: 10px;
  border: 2px solid transparent;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800; flex-shrink: 0;
}
.settings-profile-info { flex: 1; min-width: 0; }
.settings-profile-name { font-size: 15px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.3px; }
.settings-profile-email { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.settings-profile-role {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 6px; padding: 3px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 700;
}
.settings-profile-edit {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border-light);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-muted); font-family: inherit;
  flex-shrink: 0; transition: background 0.10s, color 0.10s;
}
.settings-profile-edit:hover { background: var(--primary-light); border-color: rgba(91,108,248,0.2); color: var(--primary); }
.settings-section { margin-bottom: 20px; }
.settings-section-title {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1.3px; color: var(--text-muted); padding: 0 4px 8px;
}
.settings-section-body {
  background: var(--white); border-radius: 10px;
  border: 1px solid var(--border-light); overflow: hidden;
  box-shadow: 0 1px 4px rgba(19,25,41,0.04);
}
.settings-row {
  display: flex; align-items: center; gap: 14px;
  width: 100%; background: none; border: none; padding: 13px 16px;
  cursor: pointer; font-family: inherit; text-align: left;
  -webkit-tap-highlight-color: transparent; transition: background 0.1s;
}
.settings-row:hover { background: var(--surface); }
.settings-row:active { background: var(--primary-light); }
.settings-row-icon {
  width: 38px; height: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.settings-row-text { flex: 1; min-width: 0; }
.settings-row-label { font-size: 14px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.1px; }
.settings-row-sub { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.settings-row-chevron { font-size: 11px; color: var(--border); flex-shrink: 0; }
.settings-divider { height: 1px; background: var(--border-light); margin: 0 16px 0 70px; }
.settings-signout-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 15px; background: var(--white);
  border: 1.5px solid rgba(244,91,65,0.2); border-radius: 10px;
  cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 700;
  color: var(--error); transition: background 0.10s, color 0.10s; -webkit-tap-highlight-color: transparent;
}
.settings-signout-btn:hover { background: var(--error-light); }
.settings-version { text-align: center; padding-bottom: 16px; font-size: 11.5px; color: var(--text-muted); }

/* Settings sub-screen (child pages) */
.settings-sub { max-width: 560px; margin: 0 auto; padding-bottom: 24px; }
.settings-sub-body { padding: 0; }
.settings-sub-body .card { margin-bottom: 10px; padding: 14px 16px; }
.settings-sub-body .form-label { font-size: 11.5px !important; font-weight: 600 !important; }
.settings-sub-body .form-input { font-size: 13px !important; }
.sub-top-bar {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 20px; padding-bottom: 16px;
  border-bottom: 1px solid var(--border-light);
}
.sub-top-title { flex: 1; min-width: 0; }
.settings-sub-body { display: flex; flex-direction: column; }
.settings-sub-section { margin-bottom: 20px; }
.settings-sub-section-title {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1.3px; color: var(--text-muted); padding: 0 4px 8px;
}
.settings-sub-card {
  background: var(--white); border-radius: 10px;
  border: 1px solid var(--border-light); overflow: hidden;
  box-shadow: 0 1px 4px rgba(19,25,41,0.04);
}
.settings-row-sep { height: 1px; background: var(--border-light); margin: 0 16px 0 70px; }

/* Native toggle switch */
.native-toggle { position: relative; display: inline-flex; flex-shrink: 0; cursor: pointer; }
.native-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.native-toggle-track {
  display: block; width: 50px; height: 28px; border-radius: 10px;
  background: var(--border); transition: background 60ms;
  position: relative;
}
.native-toggle-track::after {
  content: '';
  position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.native-toggle input:checked + .native-toggle-track { background: var(--primary); }
.native-toggle input:checked + .native-toggle-track::after { transform: translateX(22px); }

@media (max-width: 480px) {
  .native-toggle-track { width: 46px; height: 26px; border-radius: 13px; }
  .native-toggle-track::after { width: 20px; height: 20px; top: 3px; left: 3px; }
  .native-toggle input:checked + .native-toggle-track::after { transform: translateX(20px); }
}

/* Contact buttons in help */
.settings-contact-btn {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; background: var(--white);
  border-radius: 10px; border: 1.5px solid var(--border-light);
  cursor: pointer; font-family: inherit; text-align: left;
  width: 100%; -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, transform 0.1s;
}
.settings-contact-btn:hover { background: var(--surface); }
.settings-contact-btn:active { transform: scale(0.98); }
.settings-contact-icon {
  width: 44px; height: 44px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.settings-contact-text { flex: 1; min-width: 0; }
.settings-contact-label { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.settings-contact-sub { font-size: 12px; color: var(--text-muted); margin-top: 1px; }

/* ── Top nav page title for sub-screens ── */
@media (max-width: 768px) {
  .settings-sub .sub-top-bar { display: none; }
}

/* ── Mobile: app settings spacing ── */
@media (max-width: 768px) {
  .settings-root { max-width: 100%; }
  .settings-sub { max-width: 100%; padding-bottom: 16px; padding-top: 4px; }
  .settings-profile-card { border-radius: 10px; padding: 16px; margin-bottom: 20px; }
  .settings-section { margin-bottom: 16px; }
  .settings-section-body { border-radius: 10px; }
  .settings-sub-card { border-radius: 10px; overflow: hidden; }
  .settings-sub-body { padding: 0 2px; }
  .settings-sub-section-title { padding: 0 6px 8px; }
  .settings-row-sep { margin: 0 16px; }
}

/* Page heading area */
.page-heading-area {
  display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px;
}
.page-title-wrap .page-title {
  font-size: var(--font-title-xl, 1.5rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; color: var(--text-primary);
}
.page-title-wrap .page-sub { font-size: var(--font-body-sm); color: var(--text-muted); margin-top: 6px; display: flex; align-items: center; gap: 8px; font-weight: 500; }
.page-title-wrap .page-sub::before {
  content: ''; display: inline-block; width: 20px; height: 3px; background: linear-gradient(90deg, var(--primary), var(--secondary)); border-radius: 2px; flex-shrink: 0;
}

/* ── Form label ── */

/* ══════════════════════════════════════════════════
   UNIFIED FORM SYSTEM — Native Android/iOS-like UX
══════════════════════════════════════════════════ */

/* Form section grouping */
.form-section {
  margin-bottom: 20px;
}
.form-section-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 10px;
  padding-left: 2px;
}

/* Form label — compact */
.form-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 3px;
  letter-spacing: 0.05px;
}
.form-label.required::after {
  content: ' *';
  color: var(--error);
}

/* Input, select, textarea — compact, consistent */
.form-input {
  display: block;
  width: 100%;
  height: var(--input-height);
  min-height: var(--input-height);
  padding: 0 var(--input-pad-x);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  font-size: 13px;
  font-family: inherit;
  color: var(--text-primary);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}
.form-input::placeholder { color: var(--text-muted); font-size: 13px; }
.form-input:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--white);
  box-shadow: 0 0 0 2px rgba(91,108,248,0.12);
}
textarea.form-input {
  height: auto;
  min-height: 64px;
  padding: 6px var(--input-pad-x);
  resize: vertical;
  line-height: 1.5;
}
/* Select/dropdown — compact */
select.form-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236366f1' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--input-pad-x) center;
  padding-right: 36px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  min-height: var(--input-height);
  font-weight: 500;
}
select.form-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(91,108,248,0.12);
}
select.form-input option {
  padding: 10px 14px;
  background: var(--white);
  color: var(--text-primary);
  font-weight: 500;
}

/* Search input — flex layout, icon + input side-by-side, NO overlap */
.search-input-wrap {
  display: flex;
  align-items: center;
  overflow: hidden;
}
.search-input-wrap:focus-within {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(91,108,248,0.12);
}
@media (max-width: 768px) {
  .search-input-wrap > span:first-child {
    width: 48px !important;
    min-width: 48px !important;
  }
}

/* Input with icon prefix (legacy) — flex layout preferred */
.form-input-wrap {
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-input);
}
.form-input-wrap .form-input-icon {
  flex-shrink: 0;
  width: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 14px;
}
.form-input-wrap .form-input {
  flex: 1;
  min-width: 0;
  padding: 0 14px !important;
  border: none !important;
  background: transparent !important;
}
.input-with-icon input { padding-left: 48px !important; }
@media (max-width: 768px) {
  .input-with-icon input { padding-left: 52px !important; }
}


/* Form row — compact */
.form-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.form-row:last-child { margin-bottom: 0; }

/* Form grid — compact */
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}


/* ── Review page category pricing ── */
.review-section { border-bottom: 1px solid var(--border-light); padding-bottom: 18px; margin-bottom: 18px; }
.review-section:last-child { border-bottom: none; }

/* ── Chat page ── */
#chat-messages-container { scrollbar-width: none; }
#chat-messages-container::-webkit-scrollbar { width: 0; display: none; }
#chat-input:focus { outline: none; }

/* ── Event type cards ── */
.et-icon-btn:hover { transform: scale(1.2); }
.et-icon-btn { transition: transform 0.15s; }

.form-input.error:focus { box-shadow: 0 0 0 3px rgba(244,91,65,0.12) !important; }
.form-input.success { border-color: var(--success) !important; }
.form-hint {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 5px;
}
.form-hint.error { color: var(--error); }

/* Toggle switch */
.form-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--surface);
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: border-color 0.15s, background 0.15s;
}
.form-toggle:hover { background: var(--white); border-color: var(--border); }
.form-toggle-info { flex: 1; min-width: 0; }
.form-toggle-info .toggle-label { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.form-toggle-info .toggle-desc { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

/* Modal body forms — compact */
.modal-body .form-grid-2 { gap: var(--space-2); }
.modal-body 

/* Color input special */
input[type="color"].form-input {
  height: 42px;
  padding: 4px 8px;
  cursor: pointer;
}

/* Date input */
input[type="date"].form-input { cursor: pointer; }

/* Number input arrows cleanup */
input[type="number"].form-input { -moz-appearance: textfield; }
input[type="number"].form-input::-webkit-outer-spin-button,
input[type="number"].form-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Password input */
input[type="password"].form-input { letter-spacing: 2px; }

/* Readonly / disabled */
.form-input[readonly], .form-input:disabled {
  background: var(--surface);
  color: var(--text-muted);
  cursor: not-allowed;
  border-color: var(--border-light);
}

/* Floating label (optional enhancement) */
.form-float-group {
  position: relative;
  margin-bottom: 14px;
}

/* Form card wrapper */
.form-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--elevation-1);
}
.form-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-light);
}
.form-card-icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.form-card-title { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.form-card-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 1px; }

/* Mobile: larger tap targets */
@media (max-width: 768px) {
  .form-input { border-radius: var(--radius-input); }
  textarea.form-input { padding: var(--space-3) var(--input-pad-x); }
  .form-label { font-size: var(--font-label-lg); }
  .form-grid-2 { gap: var(--space-3); }
  .form-row { margin-bottom: var(--space-3); }
}

/* ═══════════════════════════════════════
   TASKS SECTION — Full implementation
═══════════════════════════════════════ */
.tasks-board { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 12px; -webkit-overflow-scrolling: touch; }
.task-col {
  flex: 1; min-width: 240px; background: var(--surface-2); border: 1px solid var(--border-light);
  border-radius: 10px; padding: 14px 12px; display: flex; flex-direction: column; gap: 10px; min-height: 200px;
}
.task-col-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px;
}
.task-col-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
.task-col-count {
  background: var(--border); color: var(--text-muted);
  border-radius: 20px; font-size: 11px; font-weight: 700;
  padding: 2px 8px;
}
.task-card {
  background: var(--white);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-card);
  padding: var(--card-padding);
  cursor: pointer;
  transition: transform 0.15s var(--ease-out), box-shadow 0.18s, border-color 0.15s;
  position: relative;
  overflow: hidden;
}
.task-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  border-radius: 3px 0 0 3px;
  background: var(--task-accent, var(--border));
}
.task-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(91,108,248,0.12);
  border-color: rgba(91,108,248,0.18);
}
.task-card-title { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 5px; line-height: 1.4; }
.task-card-desc { font-size: 11.5px; color: var(--text-muted); margin-bottom: 9px; line-height: 1.5; }
.task-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.task-priority {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 800; padding: 3px 8px;
  border-radius: var(--radius-badge); text-transform: capitalize; letter-spacing: 0.2px;
}
.task-priority.high { background: #FEF0ED; color: var(--error); }
.task-priority.medium { background: var(--warning-light); color: #A06B00; }
.task-priority.low { background: var(--success-light); color: #098C74; }
.task-assignee {
  width: 24px; height: 24px; border-radius: 6px; font-size: 9px; font-weight: 800;
  background: var(--primary);
  color: white; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.task-due {
  font-size: 10.5px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px;
}
.task-due.overdue { color: var(--error); font-weight: 700; }


/* Tasks list view */
.tasks-list-view { display: flex; flex-direction: column; gap: 8px; }
.task-list-row {
  background: var(--white); border: 1px solid var(--border-light);
  border-radius: 10px; padding: var(--card-padding);
  display: flex; align-items: center; gap: 14px;
  cursor: pointer; transition: background 0.10s, color 0.10s;
}
.task-list-row:hover { border-color: rgba(91,108,248,0.2); background: var(--primary-light); }
.task-check-wrap { flex-shrink: 0; }
.task-checkbox {
  width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 0.10s, color 0.10s;
}
.task-checkbox.checked { background: var(--success); border-color: var(--success); color: white; font-size: 10px; }
/* Wizard client mode tabs — native premium */
.client-mode-tabs {
  display: flex; gap: 0; border: 1px solid rgba(91,108,248,0.12);
  border-radius: 10px; overflow: hidden; margin-bottom: 20px;
  background: var(--white); box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.client-mode-tab {
  flex: 1; padding: 12px 18px; text-align: center; cursor: pointer;
  font-size: 13px; font-weight: 600; background: var(--white); color: var(--text-muted);
  border: none; font-family: inherit; transition: background 0.09s; display: flex; align-items: center; justify-content: center; gap: 8px;
  -webkit-tap-highlight-color: transparent;
}
.client-mode-tab:active { transform: scale(0.98); }
.client-mode-tab.active {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff; box-shadow: 0 2px 10px rgba(91,108,248,0.3);
}
.client-mode-tab:first-child { border-right: 1px solid rgba(91,108,248,0.1); }
.client-mode-tab.active + .client-mode-tab { border-left: none; }
/* ═══════════════════════════════════════════
   SCREEN CONTAINER + SCREEN TRANSITION SYSTEM
═══════════════════════════════════════════ */
.main-area {
  flex: 1; min-width: 0;
  overflow: hidden;
  background: var(--bg-page);
  position: relative;
  display: flex; flex-direction: column;
}

/* Content wrapper inside main area */
#screen-container {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column;
}

.screen {
  position: absolute;
  top: 0; left: 0; right: 0;
  bottom: var(--nav-actual-h, 56px);
  overflow-y: auto; overflow-x: hidden;
  padding: var(--page-padding);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  background: var(--bg-page);
  will-change: auto;
  scroll-behavior: auto;
}
.plt-ios .screen {
  /* iOS native rubber-band bounce */
  overflow-y: scroll !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: auto !important;
}

/* Centre & constrain content on large screens */
.screen > * { max-width: var(--content-max-w); margin-left: auto; margin-right: auto; }
.screen .fade-in { width: 100%; overflow-x: hidden; }
/* Chat layout - must fill the screen without extra scroll */
.screen .chat-root { position:absolute;inset:0;border-radius:0!important;border:none!important; }
/* Fullscreen header - always full width, never constrained */
.screen .fs-page-header { max-width: 100% !important; width: 100% !important; margin: 0 !important; box-sizing: border-box; }
.screen:has(.chat-root) { padding:0!important; overflow:hidden!important; }
.screen:has(.chat-root) > * { max-width:100%!important; margin:0!important; }
@media (max-width: 768px) {
  .screen > * { max-width: 100% !important; width: 100% !important; }
  .screen .fade-in { overflow-x: hidden; max-width: 100%; }
}
.screen > .page-header-row,
.screen > .card,
.screen > .table-wrap,
.screen > [class*="-grid"],
.screen > [id*="-grid"],
.screen > .tasks-board,
.screen > div:not([class]) { max-width: var(--content-max-w); }

/* ── Screen Transition Animations ── */
@keyframes screenSlideInRight {
  from { opacity: 0.4; transform: translateX(32vw); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes screenSlideOutLeft {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0.2; transform: translateX(-18vw); }
}
@keyframes screenSlideInLeft {
  from { opacity: 0.4; transform: translateX(-32vw); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes screenSlideOutRight {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0.2; transform: translateX(18vw); }
}
@keyframes screenFadeIn {
  from { opacity: 0; transform: translateY(8px) scale(.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes screenFadeOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-6px) scale(.99); }
}

/* Applied by navToNative() JS — native-speed transitions */
.screen.entering-right { animation: screenSlideInRight 280ms cubic-bezier(0.25,0.46,0.45,0.94) both !important; }
.screen.leaving-left   { animation: screenSlideOutLeft  200ms cubic-bezier(0.55,0,1,0.45) both !important; pointer-events:none; }
.screen.entering-left  { animation: screenSlideInLeft   280ms cubic-bezier(0.25,0.46,0.45,0.94) both !important; }
.screen.leaving-right  { animation: screenSlideOutRight 200ms cubic-bezier(0.55,0,1,0.45) both !important; pointer-events:none; }
.screen.entering-fade  { animation: screenFadeIn        160ms cubic-bezier(0.25,0.46,0.45,0.94) both !important; }
.screen.leaving-fade   { animation: screenFadeOut       140ms cubic-bezier(0.55,0,1,0.45) both !important; pointer-events:none; }
.screen.entering-right,
.screen.leaving-left,
.screen.entering-left,
.screen.leaving-right,
.screen.entering-fade,
.screen.leaving-fade {
  will-change: transform, opacity;
}

/* ── Ripple Effect (Android-style) ── */
.ripple-surface { position: relative; overflow: hidden; }
.ripple-surface::after {
  content: ''; position: absolute;
  inset: 0; border-radius: inherit;
  background: transparent;
  transform: scale(0); opacity: 0;
  pointer-events: none;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast);
}
.ripple-surface:active::after {
  transform: scale(2.5); opacity: 1;
  transition: transform .4s var(--ease-out), opacity .1s;
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — Tablet (769px–1199px): overlay drawer
═══════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1199px) {
  .nav-logo { min-width: auto; display: flex !important; }
  .nav-search-wrap { display: flex !important; max-width: 280px; }
  .nav-pill { display: none; }
  .nav-user-info { display: none; }
  .menu-toggle-btn { display: flex !important; }

  /* Sidebar becomes overlay on tablet */
  .sidebar {
    position: fixed;
    top: calc(var(--nav-height) + var(--safe-top)); left: 0;
    height: calc(100vh - var(--nav-height) - var(--safe-top));
    transform: translateX(-100%);
    z-index: 301;
    box-shadow: var(--elevation-3);
  }
  .sidebar.open {
    transform: translateX(0);
  }

  .main-area { }
  .screen { padding: var(--page-padding-tablet); }

  #dash-main-grid { grid-template-columns: 1fr !important; }
  #ws-1 > div, #ws-2 > div, #ws-3 > div, #ws-4 > div {
    grid-template-columns: 1fr !important;
  }

  .step2-cart-col { display: none; }
  .services-grid { grid-template-columns: repeat(2,1fr) !important; }
  .vendors-grid  { grid-template-columns: repeat(2,1fr) !important; }
  .reports-kpi-grid { grid-template-columns: repeat(2,1fr) !important; }

}

/* Desktop (≥1024px): permanent sidebar, Gmail search bar */
@media (min-width: 1024px) {
  .sidebar { position: relative; transform: none !important; }
  .screen { padding: var(--page-padding-desktop); }
  #dash-kpi-grid { grid-template-columns: repeat(4,1fr) !important; }
  .nav-search-wrap { display: flex !important; }
  .nav-logo { display: flex !important; }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — Mobile (≤768px) — NATIVE PWA
═══════════════════════════════════════════════ */
/* Mobile: compact touch targets */
@media (max-width: 768px) {
  html { font-size: 14px; }

  /* — Login — handled by new design — */
  .login-inner { max-width: 100% !important; }

  /* — Touch targets: min 44px for buttons — */
  .nav-icon-btn, .btn-gold, .btn-secondary { min-height: 44px !important; min-width: 44px !important; }
  .bnav-item { min-height: 48px !important; min-width: 48px !important; }
  .form-input:not(textarea) { min-height: 44px !important; }

  /* — Top App Bar (Gmail native: logo left, actions right) — */
  .top-nav {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    padding: 0 6px 0 12px !important;
    top: -2px !important;
    height: calc(var(--nav-height) + var(--safe-top) + 2px) !important;
    padding-top: calc(var(--safe-top) + 2px) !important;
    gap: 0 !important;
    background: transparent !important;
    border-bottom: 1px solid var(--border-light);
    box-shadow: 0 2px 12px rgba(19,25,41,0.06),
                0 4px 24px rgba(91,108,248,0.04) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .plt-android .top-nav {
    background: var(--bg-card) !important;
    border-bottom: 1px solid var(--border-light) !important;
    box-shadow: none !important;
  }
  /* Mobile logo — shown on left (column 1) */
  .nav-mobile-logo {
    display: flex !important;
    align-items: center;
    gap: 8px;
    grid-column: 1;
    text-decoration: none;
    flex-shrink: 0;
  }
  /* Page title hidden — top bar always shows Saha Events */
  .nav-page-title { display: none !important; }
  .nav-mobile-logo-box {
    width: 36px; height: 36px;
    position: relative;
    background: #fff;
    border-radius: 9px;
    border: 1px solid rgba(203,213,225,0.8);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 800; color: var(--primary);
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  }
  .nav-mobile-logo-box .nav-logo-img { width: 100%; height: 100%; object-fit: contain; display: none; }
  .nav-mobile-logo-box .nav-logo-img[src]:not([src=""]) { display: block; }
  .nav-mobile-logo-box .nav-logo-fallback { position: absolute; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; color: var(--primary); }
  .nav-mobile-logo-box:has(.nav-logo-img[src]:not([src=""])) .nav-logo-fallback { display: none !important; }
  .nav-mobile-logo-text {
    font-size: 15px; font-weight: 800; color: var(--text-primary);
    letter-spacing: -0.3px; line-height: 1;
  }
  .nav-mobile-logo-text span { color: var(--primary); }
  /* Back button — uses fs-back-btn for uniform size; display controlled by .visible */
  #nav-back-btn {
    display: none;
    grid-column: 1;
    grid-row: 1;
  }
  #nav-back-btn.visible { display: inline-flex !important; }
  /* Hide mobile logo when back btn is showing */
  #nav-back-btn.visible ~ .nav-mobile-logo { display: none !important; }
  .top-nav:has(#nav-back-btn.visible) .nav-mobile-logo { display: none !important; }
  /* Right slot: refresh + bell (column 2) — always in top bar */
  .nav-right {
    grid-column: 2 !important;
    display: flex !important; align-items: center !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    margin-left: 0 !important;
    padding-right: 2px;
    flex-shrink: 0;
    overflow: visible;
  }
  /* Hide all desktop-only stuff + avatar */
  .nav-logo, .nav-search-wrap, .nav-user-info,
  .nav-user-btn, .nav-pill, .nav-divider,
  .menu-toggle-btn, #user-dropdown,
  #nav-mobile-avatar-btn { display: none !important; }
  /* Bell icon: compact */
  .nav-icon-btn {
    width: 36px !important; height: 36px !important;
    min-width: 36px !important; min-height: 36px !important;
    background: none !important; border: none !important;
    border-radius: 10px !important; padding: 0 !important;
  }
  .nav-icon-btn i { font-size: 16px !important; }

  /* — Hide desktop sidebar on mobile — */
  .sidebar { display: none !important; }
  #sidebar-overlay { display: none !important; }
  .menu-toggle-btn { display: none; }

  /* — Show bottom navigation — */
  #bottom-nav { display: flex !important; flex-direction: column; }
  body.mobile-secondary-page #bottom-nav { display: none !important; }

  /* — App body / main — */
  .app-body {
    overflow: hidden !important;
    /* margin-bottom set by JS _syncNavHeight() — exact nav height */
  }
  body.mobile-secondary-page .app-body { margin-bottom: 0 !important; }
  .main-area {
    min-height: auto;
    width: 100%;
    overflow: hidden;
  }
  .screen {
    position: absolute;
    top: 0; left: 0; right: 0;
    bottom: var(--nav-actual-h, 56px);
    overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding: 8px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    max-width: 100vw;
  }
  body.mobile-secondary-page .screen {
    bottom: 0 !important;
    padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .screen > * {
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* — Bell icon stays right — */
  /* Handled by grid layout above */

  /* Ensure page titles never get clipped under top bar */
  .page-header-row h1, .page-title, .fade-in > div:first-child h1 {
    padding-top: 0;
  }

  /* — Dashboard — */
  #dash-kpi-grid { grid-template-columns: repeat(2,1fr) !important; gap: 10px !important; }
  #dash-main-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .dashboard-page #dash-main-grid { margin-bottom: 24px !important; }
  #dash-quick-actions {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  #dash-quick-actions button {
    flex-direction: column !important;
    padding: 12px 8px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    gap: 6px !important;
    text-align: center;
    justify-content: center;
  }
  /* Dashboard heading: stack on mobile */
  .page-header-row .page-header-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
  }
  /* ── Event Type & Service card grids ── */
  #event-type-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  #event-type-grid button {
    padding: 10px 4px 8px !important;
    min-height: 76px;
    font-size: 11px !important;
  }
  .services-grid-inner,
  #ws-3 .service-cards-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  /* Force uniform card heights in event type grid */
  #event-type-grid button,
  .service-card {
    height: 80px !important;
    box-sizing: border-box;
  }

  /* — Page headers — */
  .page-header-row { flex-direction: row !important; align-items: center !important; gap: 10px !important; flex-wrap: nowrap !important; }
  .page-header-row > div:first-child { flex: 1; min-width: 0; overflow: hidden; }
  .page-actions { flex-shrink: 0 !important; display: flex !important; gap: 8px !important; align-items: center !important; flex-wrap: nowrap !important; }
  .page-header-row > button, .page-header-row > div:last-child > button {
    flex-shrink: 0;
    padding: 8px 14px !important;
    font-size: 12.5px !important;
  }

  /* — Tables → List Cards (mobile) — */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-table { display: block; width: 100%; }
  .data-table thead { display: none; }
  .data-table tbody { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; }
  .data-table tbody tr {
    display: flex; flex-direction: column;
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--card-radius);
    padding: 14px 16px;
    gap: 4px;
    box-shadow: var(--card-shadow);
    cursor: pointer;
    transition: transform 0.1s cubic-bezier(0.34,1.56,0.64,1);
  }
  .data-table tbody tr:active { transform: scale(0.98); }
  .data-table tbody td {
    border: none !important;
    padding: 0 !important;
    font-size: 14px;
    display: flex; align-items: center;
    white-space: normal !important;
  }
  .data-table tbody td:first-child { margin-bottom: 2px; }
  .data-table tbody td[data-label]::before {
    content: attr(data-label) ": ";
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 60px;
    margin-right: 6px;
  }

  /* — Cards — */
  .card { padding: 8px 10px; border-radius: var(--card-radius); }
  .stat-card { padding: 8px 10px; border-radius: var(--card-radius); }

  /* — Modals → Bottom Sheets — */
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal-box {
    max-height: 92vh;
    border-radius: 12px 12px 0 0 !important;
    margin: 0;
    width: 100%;
    max-width: 100%;
    padding-bottom: 0;
  }
  .modal-footer { padding-bottom: calc(16px + var(--safe-area-bottom)); }

  /* — Wizard — */
  .wizard-header-native { padding: 16px 18px; margin-bottom: 16px; border-radius: 8px; }
  .wizard-title-native { font-size: 1.2rem; }
  .wizard-sub-native { font-size: 11px; }
  .wizard-back-btn-native { width: 38px; height: 38px; border-radius: 10px; }
  .wizard-step-track.step-track { padding: 18px 16px; margin-bottom: 18px; }
  .step-indicator { overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .step-dot { width: 32px; height: 32px; font-size: 12px; flex-shrink: 0; border-radius: 10px; }
  .step-line { min-width: 16px; }
  #ws-1 > div, #ws-2 > div, #ws-3 > div, #ws-4 > div {
    grid-template-columns: 1fr !important; gap: 12px !important;
  }
  #live-cart { position: static !important; }

  /* — Grids — */
  .service-card { padding: 12px 8px; }
  .service-card .icon { font-size: 22px; margin-bottom: 4px; }
  .service-card .name { font-size: 11px; }
  .vendors-grid, .services-grid { grid-template-columns: 1fr !important; }
  .reports-kpi-grid { grid-template-columns: repeat(2,1fr) !important; gap: 10px !important; }

  .dish-grid { grid-template-columns: repeat(2,1fr) !important; }
  .company-grid { grid-template-columns: 1fr !important; }
  .event-btn-row { flex-direction: column !important; }
  .event-btn-row button { width: 100% !important; justify-content: center; }

  /* — On touch devices: neutralise all hover transforms — */
  *:hover { transform: none !important; }
  .stat-card:hover, .vendor-card:hover, .event-card:hover,
  .task-card:hover, .service-card:hover, .role-pill:hover {
    box-shadow: var(--card-shadow) !important;
    border-color: var(--border-light) !important;
  }
  .btn-gold:hover, .btn-secondary:hover, .btn-ghost:hover,
  .btn-outline:hover, .sidebar-item:hover { filter: none !important; }

  /* — Press feedback on mobile — no white flash — */
  .btn-gold:active {
    transform: scale(0.95) !important; filter: brightness(0.92) !important;
    transition: transform 0.08s, filter 0.08s !important;
  }
  .btn-gold:focus:not(:focus-visible) {
    outline: none !important; transform: none !important; filter: none !important;
    box-shadow: 0 3px 10px rgba(69,112,234,0.3) !important;
  }
  .btn-secondary:active {
    transform: scale(0.95) !important;
    background: #e8f0fe !important; border-color: rgba(91,108,248,0.35) !important; color: var(--primary) !important;
    transition: transform 0.08s !important;
  }
  .btn-secondary:focus:not(:focus-visible) {
    outline: none !important; background: var(--white) !important;
    border-color: var(--border) !important; color: var(--text-secondary) !important;
    transform: none !important;
  }
  .btn-ghost:active {
    transform: scale(0.95) !important; background: var(--surface) !important;
    transition: transform 0.08s !important;
  }
  .btn-ghost:focus:not(:focus-visible) {
    outline: none !important; background: transparent !important; transform: none !important;
  }
  .btn-danger:active { transform: scale(0.95) !important; transition: transform 0.08s !important; }
  .btn-danger:focus:not(:focus-visible) { outline: none !important; transform: none !important; }
  .task-card:active { transform: scale(0.97) !important; }
  .task-list-row:active { background: var(--primary-light) !important; transform: scale(0.99); }
  /* Task board mobile — vertical scroll */
  .tasks-board { flex-direction: column !important; gap: 12px !important; }
  .task-col { flex: none !important; width: 100% !important; min-width: 0 !important; }
  #tasks-stats-grid { grid-template-columns: repeat(2,1fr) !important; gap: 8px !important; }

  #leads-kpi-grid { grid-template-columns: repeat(2,1fr) !important; gap: 8px !important; }
  .task-col-header { padding: 10px 0 8px !important; }

  /* — FAB position above bottom nav — */
  #cart-fab {
    bottom: calc(52px + env(safe-area-inset-bottom, 0px) + 12px) !important;
    right: 16px !important;
    width: 56px !important; height: 56px !important;
    border-radius: 50% !important;
    padding: 0 !important;
  }
  #cart-fab .fab-label { display: none !important; }

  /* — Bottom sheet: content above nav (padding already in base rule) — */

  /* — Vendor/event cards mobile — */
  .vendors-grid { gap: 10px !important; }

  /* Tasks board — horizontal scroll native feel */
  .tasks-board {
    display: flex; gap: 10px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .task-col {
    flex: 0 0 84vw;
    scroll-snap-align: start;
    border-radius: 10px;
  }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — Small Mobile (≤480px)
═══════════════════════════════════════════════ */
@media (max-width: 480px) {
  .main-area { padding: 8px;  }
  #dash-kpi-grid { grid-template-columns: repeat(2,1fr) !important; gap: 6px !important; }
  .step-indicator span { display: none; }
  
}

/* ═══ CART SHEET (bottom on mobile, right drawer on desktop) ═══ */
/* nav-page-title shown in top bar for all pages */
#bs-overlay {
  display: none; position: fixed; inset: 0; z-index: 1100;
  background: rgba(0,0,0,0.4); backdrop-filter: none;
}
#bs-overlay.on { display: block; animation: overlayFadeIn 0.25s ease; }
@keyframes overlayFadeIn { from { opacity:0 } to { opacity:1 } }

/* MOBILE: bottom sheet */
#bottom-sheet {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1200;
  background: var(--white); border-radius: 12px 12px 0 0;
  max-height: 86vh;
  display: flex; flex-direction: column;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.18);
  transform: translateY(110%);
  transition: transform 60ms cubic-bezier(0.34,1.1,0.64,1);
  will-change: auto;
  visibility: hidden;
  /* Content padding keeps items above bottom nav */
  padding-bottom: 0 ;
}
#bottom-sheet.open {
  transform: translateY(0);
  visibility: visible;
}

/* DESKTOP: right side drawer */
@media (min-width: 900px) {
  #bottom-sheet {
    left: auto; right: 0; top: calc(var(--nav-height) + var(--safe-top)); bottom: 0;
    width: 360px; max-height: 100%;
    border-radius: 0; border-left: 1px solid var(--border);
    transform: translateX(110%);
    padding-bottom: 0;
    visibility: hidden;
  }
  #bottom-sheet.open { transform: translateX(0); visibility: visible; }
  .bs-handle { display: none; }
}
.bs-handle { width: 40px; height: 4px; background: var(--border); border-radius: 4px; margin: 12px auto 0; }
.bs-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.bs-body { flex: 1; overflow-y: auto; padding: 16px 20px 32px; }
#cart-fab {
  position: fixed; bottom: 28px; right: 28px; z-index: 1300;
  height: auto; border-radius: 50px;
  background: var(--primary);
  border: none; cursor: pointer;
  align-items: center; justify-content: center; display: none;
  gap: 8px; padding: 14px 20px;
  box-shadow: 0 6px 24px rgba(91,108,248,0.45);
  transition: transform 0.18s, box-shadow 0.18s;
  -webkit-tap-highlight-color: transparent;
}
#cart-fab.show { display: flex; animation: fabPop 0.35s cubic-bezier(0.34,1.56,0.64,1); }
#cart-fab:active { transform: scale(0.92) !important; }
#cart-fab i { color: #fff; font-size: 18px; }
#cart-fab .fab-label { color: #fff; font-size: 13px; font-weight: 700; }
@media (max-width: 900px) {
  #cart-fab { padding: 0; width: 56px; height: 56px; border-radius: 50%; gap: 0; bottom: calc(52px + env(safe-area-inset-bottom, 0px) + 12px); right: 16px; }
  #cart-fab .fab-label { display: none; }
}
.fab-cnt {
  position: absolute; top: -3px; right: -3px;
  min-width: 20px; height: 20px; border-radius: 20px; padding: 0 5px;
  background: var(--error); color: #fff; font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff; display: none;
}
@keyframes fabPop {
  from { transform: scale(0.3); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ── Persistent New Quotation FAB ── */
#new-quote-fab {
  position: fixed;
  bottom: calc(52px + env(safe-area-inset-bottom, 0px) + 12px);
  right: 16px;
  z-index: 600;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  height: 52px;
  border-radius: 26px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(91,108,248,0.45), 0 2px 8px rgba(0,0,0,0.12);
  transition: transform 80ms, box-shadow 80ms;
  -webkit-tap-highlight-color: transparent;
  letter-spacing: -0.01em;
}
#new-quote-fab i { font-size: 16px; }
#new-quote-fab:active { transform: scale(0.95); box-shadow: 0 2px 10px rgba(91,108,248,0.35); }
#new-quote-fab.visible { display: flex; animation: fabPop 0.28s cubic-bezier(0.34,1.56,0.64,1); }
@media (max-width: 768px) {
  #new-quote-fab { padding: 0; width: 52px; border-radius: 50%; }
  #new-quote-fab .nq-fab-label { display: none; }
  #new-quote-fab i { font-size: 18px; }
}
/* Hide FAB on quotation wizard pages */
body.mobile-secondary-page #new-quote-fab { display: none !important; }

/* ═══ ENHANCED STEP TRACK (non-wizard pages) ═══ */
.step-track:not(.wizard-step-track) { background: var(--white); border: 1px solid rgba(91,108,248,0.08); border-radius: 8px; padding: 20px 24px; margin-bottom: 24px; box-shadow: 0 2px 14px rgba(0,0,0,0.04); }

/* Mobile modal drag handle */
@media (max-width: 768px) {
  .modal-box::before {
    content: '';
    display: block;
    width: 44px; height: 5px;
    background: #C8D2DE;
    border-radius: 4px;
    margin: 12px auto 0;
    flex-shrink: 0;
  }
}
/* Stat card top accent */
.stat-card { position: relative; overflow: hidden; }

/* Clickable KPI cards — no black focus border, sharp active state */
.kpi-card-clickable,
.stat-card.quot-kpi-card,
.layout-kpi-block.kpi-card-clickable {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s cubic-bezier(0.34,1.4,0.64,1), box-shadow 0.18s, border-color 0.15s !important;
  user-select: none;
  outline: none !important;
}
/* KPI/stat cards — no focus/active border (no black outline or ring on click) */
.kpi-card-clickable:focus,
.kpi-card-clickable:focus-visible,
.kpi-card-clickable:active,
.stat-card:focus,
.stat-card:focus-visible,
.stat-card:active,
.quot-kpi-card:focus,
.quot-kpi-card:focus-visible,
.quot-kpi-card:active,
.layout-kpi-block:focus,
.layout-kpi-block:focus-visible,
.layout-kpi-block:active,
.crm-kpi-card:focus,
.crm-kpi-card:focus-visible,
.crm-kpi-card:active,
.crm-kpi-grid .stat-card:focus,
.crm-kpi-grid .stat-card:focus-visible,
.crm-kpi-grid .stat-card:active,
.gallery-stat-card:focus,
.gallery-stat-card:focus-visible,
.gallery-stat-card:active {
  outline: none !important;
}
.kpi-card-clickable:hover { transform: translateY(-2px) !important; box-shadow: var(--card-shadow-hover) !important; border-color: rgba(91,108,248,0.2) !important; }
.kpi-card-clickable:active { transform: scale(0.96) !important; box-shadow: none !important; }
@media (max-width:768px) {
  .kpi-card-clickable:hover { transform: none !important; }
  .kpi-card-clickable:active { transform: scale(0.94) !important; }
}

/* Count-up number animation */
@keyframes countUp { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform:none; } }
.kpi-num { animation: countUp 0.5s cubic-bezier(0.2,0,0,1) both; display:inline-block; }

/* Pulse dot for live/today indicator */
@keyframes pulseDot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.75)} }
.pulse-dot { width:7px;height:7px;border-radius:50%;display:inline-block;animation:pulseDot 1.6s ease infinite; flex-shrink:0; }

/* Dashboard section header fade-in stagger */
@keyframes dashSlideIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
.dash-section { animation: dashSlideIn 0.14s cubic-bezier(0.2,0,0,1) both; }
.dash-section:nth-child(1){animation-delay:0ms}
.dash-section:nth-child(2){animation-delay:25ms}
.dash-section:nth-child(3){animation-delay:50ms}
.dash-section:nth-child(4){animation-delay:75ms}

/* Events page filter — horizontal swipeable row */
.ev-filter-row { margin-bottom: 20px; margin-left: -4px; margin-right: -4px; overflow: hidden; }
.ev-filter-scroll {
  display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden;
  padding: 4px 4px 8px; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; scroll-behavior: smooth;
}
.ev-filter-scroll::-webkit-scrollbar { display: none; }
.ev-filter-tab {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 8px; font-size: 13px; font-weight: 600;
  border: 1.5px solid var(--border); background: var(--white); color: var(--text-muted);
  transition: all 60ms ease; white-space: nowrap; cursor: pointer; font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.ev-filter-tab .ev-filter-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px;
  padding: 0 6px; border-radius: 10px; font-size: 11px; font-weight: 700;
  background: var(--surface); color: var(--text-muted);
}
.ev-filter-tab.active {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-color: var(--primary); color: #fff; box-shadow: 0 4px 14px rgba(91,108,248,0.35);
}
.ev-filter-tab.active .ev-filter-count { background: rgba(255,255,255,0.25); color: #fff; }
.ev-filter-tab:hover:not(.active) { border-color: var(--primary); color: var(--primary); }
.ev-filter-tab:active { transform: scale(0.97); }

/* Vendor form loading */
.ev-form-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; }

/* Event cards — premium style */
.ev-card-premium {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 60ms ease;
}
.ev-card-premium:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(91,108,248,0.12), 0 4px 12px rgba(0,0,0,0.06) !important; border-color: rgba(91,108,248,0.15) !important; }
.ev-card-premium:active { transform: scale(0.99); }

/* ═══ STICKER PRESS for all clickable cards (mobile native) ═══ */
.vendor-card, .event-card, .service-card-block {
  transition: transform 0.12s cubic-bezier(0.34,1.56,0.64,1);
}
@media (min-width: 769px) {
  .vendor-card:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-hover); }
  .event-card:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-hover); }
}
.vendor-card:active { transform: scale(0.97); }

/* ═══ Page title & subtitle (premium typography) ═══ */
.page-title { font-size: var(--font-title-xl, 1.5rem); font-weight: 800; letter-spacing: -0.02em; color: var(--text-primary); }

.page-sub::before { content: ''; display: inline-block; width: 20px; height: 3px; background: linear-gradient(90deg, var(--primary), var(--secondary)); border-radius: 2px; flex-shrink: 0; }

/* ═══ COMPACT MAIN ═══ */

/* ═══ REVIEW PAGE RESPONSIVE ═══ */
.review-layout { display: grid; grid-template-columns: 1fr 300px; gap: 22px; align-items: flex-start; }
@media (max-width: 900px) {
  .review-layout { grid-template-columns: 1fr !important; }
  .service-cards-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  .service-card {
    padding: 10px 4px 8px !important;
    min-height: 76px;
  }
  .service-card .name {
    font-size: 10px !important;
  }
  .review-sidebar { display: none !important; }
}
/* Hide cart FAB on review page */
.review-page-active #cart-fab { display: none !important; }

@media (max-width: 768px) {
  .main-area { padding: 0 !important; }
  .step-lbl { display: none; }
}


/* ═══ WIZARD FOOTER — MOBILE OPTIMIZED (≤768px) ═══ */
.wizard-footer-row { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; align-items: center; flex-wrap: wrap; padding-top: 4px; }
/* Wizard Back: 44px touch target, left-accent — mobile-first */
.wizard-back-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  flex-shrink: 0; white-space: nowrap;
  min-height: 44px; min-width: 44px; padding: 12px 20px;
  font-size: 14px; font-weight: 600;
  background: var(--white); color: var(--text-secondary);
  border: 1.5px solid var(--border); border-radius: 10px;
  border-left: 3px solid var(--primary);
  cursor: pointer; transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent; outline: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.wizard-back-btn:hover { background: var(--primary-light); border-color: rgba(91,108,248,0.35); border-left-color: var(--primary); color: var(--primary); }
.wizard-back-btn:active { transform: scale(0.98); background: var(--primary-light); }
.wizard-back-btn i { font-size: 13px; opacity: 0.95; }
/* Wizard Next / Review / Generate: uniform 44px height */
.wizard-next-btn, .ws3-review-btn, .wizard-generate-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  flex: 1; max-width: 280px; min-width: 180px; min-height: 44px; padding: 12px 24px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 14px; font-weight: 600;
  border-radius: 10px;
}
.wizard-generate-btn { white-space: normal; line-height: 1.3; text-align: center; word-break: break-word; }
/* ═══ MOBILE (≤768px) — Full-width stacked buttons, proper touch targets ═══ */
@media (max-width: 768px) {
  .wizard-footer-row {
    flex-direction: column-reverse !important;
    gap: 12px !important;
    align-items: stretch !important;
    margin-top: 16px !important;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .wizard-back-btn, .wizard-next-btn, .ws3-review-btn, .wizard-generate-btn {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    min-height: 48px !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
    justify-content: center !important;
    -webkit-tap-highlight-color: transparent;
  }
  .wizard-back-btn { order: 2; margin-top: 0; }
  .wizard-next-btn, .wizard-generate-btn { order: 1; }
  .review-footer-row { flex-direction: column-reverse !important; }
}
@media (max-width: 480px) {
  .wizard-footer-row { gap: 10px !important; }
  .wizard-back-btn, .wizard-next-btn, .ws3-review-btn, .wizard-generate-btn {
    min-height: 48px !important;
    font-size: 15px !important;
  }
}

/* ═══ WIZARD STEP TRACK ENHANCED ═══ */
/* ═══ VENDOR PICKER MODAL — MOBILE ═══ */
.vp-list { display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.vp-actions { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.vp-action-btn { font-size: 13px !important; justify-content: center !important; min-height: 44px !important; -webkit-tap-highlight-color: transparent; }
@media (max-width: 768px) {
  .modal-vendor-pick-box { max-height: 85vh !important; }
  .vp-list { max-height: 50vh !important; }
  .vp-action-btn { min-height: 48px !important; font-size: 15px !important; }
  #vp-list > div, #vp-list > button.vp-vendor-row { min-height: 56px !important; padding: 14px 16px !important; cursor: pointer; }
}

.service-card {
  border: 2px solid var(--border); border-radius: 10px;
  padding: 14px 8px; text-align: center; cursor: pointer;
  transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1), border-color 0.15s;
  background: var(--white); position: relative; overflow: hidden;
}
@media (max-width: 768px) {
  .service-cards-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .service-card { padding: 18px 12px !important; min-height: 88px !important; font-size: 13px !important; -webkit-tap-highlight-color: transparent; }
  .service-card .name { font-size: 13px !important; }
}
@media (min-width: 769px) {
  .service-card:hover { border-color: var(--primary); background: var(--primary-light); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(91,108,248,0.2); }
}
.service-card:active { transform: scale(0.95) !important; }
.service-card.selected { border-color: var(--primary); background: var(--primary-light); box-shadow: 0 4px 14px rgba(91,108,248,0.25); }
.service-card .check { position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;background:var(--primary);color:#fff;font-size:10px;display:none;align-items:center;justify-content:center;font-weight:700; }
.service-card.selected .check { display:flex; }
.wizard-client-card:hover { transform: translateX(2px); box-shadow: 0 2px 10px rgba(91,108,248,0.1); }
.wizard-client-card { transition: background 0.09s; -webkit-tap-highlight-color: transparent; }
.wizard-client-card:active { transform: scale(0.99); }

/* Wizard step 2 — Premium Event Details card */
.wizard-event-card {
  border-radius: 22px !important;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(91,108,248,0.12), 0 2px 12px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.9);
  border: 1px solid rgba(91,108,248,0.1);
}
.wizard-event-header {
  background: linear-gradient(145deg, #1e1b4b 0%, #312e81 45%, #4338ca 85%, #4f46e5 100%);
  padding: 24px 28px 22px; position: relative; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
.wizard-event-header::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 90% 70% at 75% 15%, rgba(255,255,255,0.18) 0%, transparent 55%);
  pointer-events: none;
}
.wizard-event-icon {
  width: 52px; height: 52px; border-radius: 10px;
  background: rgba(255,255,255,0.22); backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(255,255,255,0.35);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.wizard-event-header .wizard-event-icon i { font-size: 22px !important; color: #C7D2FE !important; }
.wizard-services-header { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.wizard-services-card .wizard-services-header { margin-bottom: 16px; }
/* Sticky wizard nav bar */
.wizard-nav-bar {
  position: sticky; bottom: 0; background: var(--white);
  border: 1px solid rgba(91,108,248,0.08); border-radius: 8px;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.06), 0 2px 12px rgba(91,108,248,0.06);
  padding: 16px 20px; margin-top: 20px;
  display: flex; justify-content: space-between; align-items: center;
}
/* Form grid responsive */
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) {

  [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
}
/* ═══ COMPACT LABELS + MOBILE FORMS ═══ */

.form-grid-2.full { grid-column: 1/-1; }
@media (max-width: 600px) {
  .form-grid-2 { grid-template-columns: 1fr !important; }
  .grid-cols-2 { grid-template-columns: 1fr !important; }
  .modal-box .grid { grid-template-columns: 1fr !important; }
}

/* ═══ MODAL INNER PADDING FIX ═══ */
.modal-box > .form-grid-2 { padding: 22px 24px 0; }
.modal-box .form-grid-2 + div[style*="flex;gap"] { padding: 16px 24px 22px; }
/* Handle padding for modals that use direct children */
.modal-overlay .modal-box > :not(.modal-hd):not([style*="padding:22px 24px"]) {
  /* nothing - handled per modal */
}

/* ═══ PAGE FORM PANEL (replaces form modals) ═══ */
#page-form-panel {
  position: fixed; inset: 0; z-index: 1200;
  pointer-events: none; visibility: hidden;
}
#page-form-panel.open { pointer-events: all; visibility: visible; }
#pf-backdrop {
  position: absolute; inset: 0;
  background: rgba(19,25,41,0.45);
  opacity: 0; transition: opacity 60ms ease;
  backdrop-filter: none;
}
#page-form-panel.open #pf-backdrop { opacity: 1; }
#pf-sheet {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 480px; max-width: 100%;
  background: var(--white);
  box-shadow: -8px 0 40px rgba(19,25,41,0.14);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 60ms cubic-bezier(0.25,0.46,0.45,0.94);
  overflow: hidden;
}
#page-form-panel.open #pf-sheet { transform: translateX(0); }
#pf-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--white);
  flex-shrink: 0;
}
#pf-header-left { display: flex; align-items: center; gap: 12px; }
#pf-icon-wrap {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
#pf-title-el { font-size: 16px; font-weight: 800; color: var(--text-primary); margin: 0; }
#pf-sub-el { font-size: 12px; color: var(--text-muted); margin: 2px 0 0; }
#pf-close {
  width: 32px; height: 32px; border-radius: 8px;
  border: 1.5px solid var(--border); background: none;
  cursor: pointer; color: var(--text-muted); font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background 0.10s, color 0.10s;
}
#pf-close:hover { background: var(--surface); color: var(--text-primary); }
#pf-body {
  flex: 1; overflow-y: auto; padding: 16px 18px;
  overscroll-behavior: contain;
  /* Extra bottom padding so last field is never under footer */
  padding-bottom: 24px;
}
#pf-footer {
  display: flex; gap: 10px; padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--white); flex-shrink: 0;
  /* Stick to bottom of sheet — keyboard lift applied via JS */
  position: sticky;
  bottom: 0;
  z-index: 5;
}
#pf-footer .pf-cancel-btn { flex: 1; justify-content: center; }
#pf-footer .pf-save-btn  { flex: 2; justify-content: center; }
@media (max-width: 768px) {
  #pf-sheet {
    top: auto; bottom: 0; left: 0; right: 0;
    width: 100%; max-height: 92svh;
    border-radius: 14px 14px 0 0;
    transform: translateY(100%);
  }
  #page-form-panel.open #pf-sheet { transform: translateY(0); }
  #pf-body { padding: 14px 16px 80px; }
  #pf-footer {
    /* Safe area padding at bottom when keyboard is closed */
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
}

/* ═══ ACCORDION CHEVRON — CSS controlled, no JS inline styles ═══ */
.accordion-header .chevron { transition: transform 60ms ease; transform: rotate(0deg); }
.accordion-header.open 
/* Accordion body hidden/shown purely by class */
.accordion-body { display: none; }
.accordion-body.open { display: block; }
/* FAB always clickable, on top of everything */
#cart-fab { pointer-events: all; }

/* ═══ ENHANCED ANIMATIONS ═══ */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Quote action sheet — native bottom slide-up (mobile pattern) */
.quote-action-sheet-panel {
  animation: sheetSlideFromBottom 0.32s cubic-bezier(0.32,0.72,0,1) forwards;
}
@keyframes sheetSlideFromBottom {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* Staggered reveal for stat cards */
#dash-kpi-grid > *:nth-child(1) { animation: slideUp 0.32s ease both; animation-delay: 0.04s; }
#dash-kpi-grid > *:nth-child(2) { animation: slideUp 0.14s ease both; animation-delay: 25ms; }
#dash-kpi-grid > *:nth-child(3) { animation: slideUp 0.14s ease both; animation-delay: 50ms; }
#dash-kpi-grid > *:nth-child(4) { animation: slideUp 0.14s ease both; animation-delay: 75ms; }

/* Page entrance animation */
.fade-in { animation: fadeIn 0.10s ease; }

/* Role pill enhanced design */
.role-pill {
  display: block; width: 100%; text-align: center;
  background: var(--white); border: 1.5px solid var(--border); border-radius: 10px;
  padding: 10px 8px; font-size: 13px; font-weight: 600; color: var(--text-secondary);
  cursor: pointer; font-family: inherit; transition: all 60ms cubic-bezier(0.34,1.4,0.64,1);
  position: relative; overflow: hidden;
}
.role-pill:hover {
  border-color: var(--primary); color: var(--primary); background: var(--primary-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(91,108,248,0.18);
}
.role-pill.active {
  background: var(--primary);
  border-color: var(--primary); color: #fff; font-weight: 700;
  box-shadow: 0 4px 14px rgba(91,108,248,0.35);
  transform: translateY(-1px);
}

/* Sidebar item improved transition */
.sidebar-item { transition: all 0.18s cubic-bezier(0.4,0,0.2,1); }

/* Form input enhanced focus ring */
.form-input { transition: border-color 0.18s, box-shadow 0.18s, background 0.18s; }

/* Button press effect */
.btn-gold:active { transform: scale(0.95); transition: transform 0.1s cubic-bezier(0.34,1.56,0.64,1); }
.btn-secondary:active { transform: scale(0.95); transition: transform 0.1s cubic-bezier(0.34,1.56,0.64,1); }

/* Data table row hover smooth */
.data-table tbody tr { transition: background 0.14s; }

/* Task card — press on mobile, hover on desktop */
.task-card { transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1), box-shadow 60ms, border-color 0.15s; }
.task-card:active { transform: scale(0.97); }
@media (min-width: 769px) {
  .task-card:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 8px 24px rgba(91,108,248,0.15); border-color: rgba(91,108,248,0.2); }
}

/* Sidebar user card smooth collapse */
.sidebar-user-card { transition: opacity 60ms; }
.sidebar.collapsed 

/* ════════════════════════════════════════════════
   MOBILE-FIRST NATIVE FEEL ENHANCEMENTS (v10)
════════════════════════════════════════════════ */


/* All page stat grids — compact on mobile */
@media (max-width: 768px) {
  .stat-card { padding: 8px 10px !important; }
  .stat-card .stat-value, .stat-card [style*="font-size:22px"] { font-size: 18px !important; }
  .page-title { font-size: 19px !important; font-weight: 800 !important; }

  .card { padding: 8px 10px !important; }
  .btn-sm { padding: 6px 12px !important; font-size: 12px !important; }
}

/* ════════════════════════════════════════════════
   NATIVE MOBILE APP POLISH — Sharp, Refined
════════════════════════════════════════════════ */
/* Sharper borders — native app crispness */
.card, .stat-card, .vendor-card, .event-card, .task-card, .lead-card,
.quot-kpi-card, .form-input, .dropdown {
  border-width: 1px !important;
  border-color: rgba(91,108,248,0.1) !important;
}
/* Refined shadows — defined depth without heaviness */
.card, .stat-card, .vendor-card, .event-card, .task-card, .lead-card {
  box-shadow: 0 1px 3px rgba(60,64,67,0.08), 0 2px 8px rgba(60,64,67,0.04) !important;
}
.card:hover, .stat-card:hover, .vendor-card:hover, .event-card:hover, .task-card:hover {
  box-shadow: 0 2px 8px rgba(60,64,67,0.1), 0 4px 16px rgba(60,64,67,0.06) !important;
}
/* Modal & sheet — premium elevation */
.modal-box, #bottom-sheet, #more-menu-sheet {
  box-shadow: 0 -4px 24px rgba(0,0,0,0.12), 0 -1px 4px rgba(0,0,0,0.06) !important;
}
/* Buttons — crisper edges, native tap feel */
.btn-gold, .btn-primary, .btn-secondary, .btn-outline, .btn-ghost, .btn-danger {
  border-radius: 8px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
}
.btn-gold, .btn-primary {
  box-shadow: 0 2px 6px rgba(91,108,248,0.25) !important;
}
/* Inputs — sharper focus ring */
.form-input:focus {
  box-shadow: 0 0 0 3px rgba(91,108,248,0.15) !important;
}
.top-nav {
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}
/* Overlays — ensure clean fade, no stuck state */
#processing-overlay, #qas-overlay, #bs-overlay, #more-menu-overlay {
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
}
/* Page transitions — snappier */
.fade-in { animation-duration: 0.18s !important; }
.gmail-list-item { animation-duration: 0.15s !important; }

/* ════════════════════════════════════════════════
   MOBILE-FIRST NATIVE FEEL ENHANCEMENTS
════════════════════════════════════════════════ */

/* Ensure bottom nav is ABOVE everything except modals and more-menu */
#bottom-nav { z-index: 810 !important; }

/* Z-index stack: bottom-nav(810) → cart-fab(820) → more-overlay(890) → more-sheet(900) → bs-overlay(1100) → bs-sheet(1200) */
#bottom-nav { z-index: 810; }
#cart-fab { z-index: 820; }
#more-menu-overlay { z-index: 890; }
#more-menu-sheet { z-index: 900; }
#bs-overlay { z-index: 1100; }
#bottom-sheet { z-index: 1200; }


/* ════ TOUCH OPTIMIZATION ════ */
/* Prevent 300ms click delay everywhere */
* { touch-action: manipulation; }
/* But re-enable pan for scrollable areas */
.screen, .modal-body, .bs-body, #more-menu-sheet {
  touch-action: pan-y !important;
}
/* Buttons: tap only (no pan) */
button, a, .bnav-item, .more-menu-item, .task-card,
.stat-card, .quot-kpi-card, .service-card {
  touch-action: manipulation !important;
}


/* ═══ FINAL UNIFIED OVERRIDES ═══ */
/* Ensure overflow-x never causes layout shift */
#app-shell, .main-area, #screen-container {
  overflow-x: hidden !important;
}
/* Page content wrapper consistency */
.fade-in > div:first-child {
  overflow-x: visible; /* let content wrap */
}
/* More menu grid items - better touch areas */
.more-menu-item {
  min-height: 72px !important;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
/* Quotations page button for Add New */
.page-header-row .btn-gold {
  white-space: nowrap;
}
/* Unified page header spacing */
.page-header-row {
  margin-bottom: 14px;
}
@media (max-width: 768px) {
  .page-header-row { margin-bottom: var(--space-4) !important; }
}

/* Form improvements — mobile-first */
@media (max-width: 768px) {
  .form-grid-2 { grid-template-columns: 1fr !important; gap: 10px !important; }
  .modal-body { padding: 16px 16px !important; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .modal-hd { padding: 16px 16px 14px !important; }
  .modal-footer { padding: 12px 16px 16px !important; gap: 8px !important; }
}

/* Prevent body scroll lock breaking iOS */
body.modal-open { position: fixed; width: 100%; }

/* Remove duplicate form-label styles */
/* Live cart panel */
.live-cart {
  background: var(--white);
  border: 1.5px solid var(--border-light);
  border-radius: 10px;
  padding: 18px;
  position: sticky;
  top: 80px;
  box-shadow: 0 2px 12px rgba(19,25,41,0.06);
}

/* Wizard step 3 two-column layout fix */
.ws3-outer { display: grid; grid-template-columns: 1fr 310px; gap: 22px; align-items: start; }
@media (max-width: 960px) {
  .ws3-outer { grid-template-columns: 1fr !important; }
  .ws3-cart-col { display: none !important; }
}

/* More menu grid — ensure sign out button is accessible */
.more-menu-logout-btn {
  width: 100%; display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 13px 16px;
  background: var(--error-light); border: 1.5px solid #FBCFC4;
  border-radius: 10px; font-family: inherit; font-size: 14px;
  font-weight: 700; color: var(--error); cursor: pointer;
  -webkit-tap-highlight-color: transparent; margin: 0 16px;
  width: calc(100% - 32px);
}
.more-menu-logout-btn:active { opacity: 0.8; transform: scale(0.98); }

/* Social — Create Post: icon + label inline */
.sm-create-post-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  align-items: stretch !important;
}

.btn-secondary.btn-sm.social-create-post-btn {
  box-sizing: border-box !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 36px !important;
  max-height: none !important;
  padding: 8px 10px !important;
  gap: 8px !important;
  white-space: nowrap !important;
  text-align: center !important;
  line-height: 1.2 !important;
}

.social-create-post-btn__icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 22px !important;
  height: 22px !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

.social-create-post-btn__label {
  display: inline-block !important;
  max-width: 100% !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  word-break: normal !important;
}

@media (max-width: 768px) {
  .sm-create-post-actions .btn-secondary.social-create-post-btn {
    min-width: 0 !important;
    min-height: 36px !important;
  }
}

/* Card press effects */
.card { -webkit-tap-highlight-color: transparent; }
.stat-card:active { transform: scale(0.97) !important; }


/* ════ iOS LARGE TITLE BEHAVIOR ════ */
.plt-ios .screen {
  -webkit-overflow-scrolling: touch;
  /* Enable rubber band / momentum scroll */
}
/* Large title sits at top of page content, collapses to nav on scroll */
.plt-ios .page-title-large {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.8px;
  color: var(--text-primary);
  margin-bottom: 4px;
  line-height: 1.1;
  transition: opacity 0.12s;
}
.plt-ios .page-sub-large {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 20px;
}
/* When scrolled: large title fades, nav title becomes bold */
.plt-ios .nav-page-title.scrolled {
  font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════
   IMPROVEMENTS v2 — Clean rebuild
═══════════════════════════════════════════════ */

/* 2. Kill button focus persistence — blur immediately after click to prevent grey stuck state */
button, .btn-gold, .btn-secondary, .btn-outline, .btn-ghost, .btn-danger,
a[role="button"], [role="button"], .bnav-item, .more-menu-item, .card[onclick], .stat-card[onclick] {
  -webkit-tap-highlight-color: transparent !important;
}
button:focus:not(:focus-visible),
.btn-gold:focus:not(:focus-visible),
.btn-secondary:focus:not(:focus-visible),
.btn-outline:focus:not(:focus-visible),
.btn-ghost:focus:not(:focus-visible),
.btn-danger:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
  background: revert !important;
}
.btn-gold:focus:not(:focus-visible) { background: var(--primary) !important; color: #fff !important; }
.btn-secondary:focus:not(:focus-visible) { background: var(--white) !important; }

/* 3. Unified Lead card style */
.lead-card-v2 {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(19,25,41,0.05);
  overflow: hidden;
  transition: box-shadow 0.15s;
}
@media (min-width: 769px) {
  .lead-card-v2:hover {
    box-shadow: 0 4px 18px rgba(91,108,248,0.10);
    border-color: rgba(91,108,248,0.15);
  }
}

/* 4. Users desktop table */
.users-desktop-view { display: block; }
.users-mobile-view { display: none; }
@media (max-width: 768px) {
  .users-desktop-view { display: none !important; }
  .users-mobile-view { display: flex !important; flex-direction: column; gap: 12px; }
}

/* 5. Expenses desktop table */
.exp-desktop-table { display: block; }
.exp-mobile-list { display: none; }
@media (max-width: 768px) {
  .exp-desktop-table { display: none !important; }
  .exp-mobile-list { display: block !important; }
}

/* 6. Download button */
.btn-download {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 10px; font-size: 13px; font-weight: 600;
  background: var(--success-light); color: var(--success);
  border: 1.5px solid rgba(14,201,168,0.25); cursor: pointer;
  transition: background 0.10s, color 0.10s;
}
.btn-download:hover { background: var(--success); color: #fff; }

/* 7. Leads KPI grid — 2 columns on mobile */


/* 8. Better table dividers */
.data-table th, .data-table td {
  border-bottom: 1px solid rgba(208,217,236,0.8) !important;
}

/* 9. Dark mode */
body.dark-mode {
  color-scheme: dark;
  --text-primary:   #E8EDF8;
  --text-secondary: #A8B8D4;
  --text-muted:     #5E7498;
  --border:         #243058;
  --border-light:   #1C2847;
  --surface:        #111929;
  --surface-2:      #141E36;
  --white:          #172034;
  --bg-page:        #0B1120;
  --bg-card:        #172034;
  --primary-light:  rgba(91,108,248,0.15);
  --success-light:  rgba(14,201,168,0.12);
  --warning-light:  rgba(245,166,35,0.12);
  --error-light:    rgba(244,91,65,0.12);
  background: #0B1120 !important;
}
body.dark-mode .screen { background: #0B1120 !important; }
body.dark-mode .card,
body.dark-mode .stat-card,
body.dark-mode .crm-panel,
body.dark-mode .lead-card-v2 {
  background: #172034 !important;
  border-color: rgba(255,255,255,0.07) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 3px 10px rgba(0,0,0,0.22) !important;
}
body.dark-mode .top-nav {
  background: #172034 !important;
  border-bottom-color: rgba(255,255,255,0.07) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.2) !important;
}
body.dark-mode #bottom-nav {
  background: #172034 !important;
  border-top-color: rgba(255,255,255,0.07) !important;
  box-shadow: 0 -1px 0 rgba(0,0,0,0.2) !important;
}
body.dark-mode .form-input {
  background: #111929 !important;
  border-color: #243058 !important;
  color: var(--text-primary) !important;
}
body.dark-mode .form-input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(91,108,248,0.15) !important;
}
body.dark-mode .modal-box,
body.dark-mode #page-form-panel #pf-sheet,
body.dark-mode #bottom-sheet { background: #172034 !important; }
body.dark-mode .btn-secondary {
  background: #1C2847 !important;
  border-color: #243058 !important;
  color: var(--text-secondary) !important;
}
body.dark-mode .data-table thead th { background: #111929 !important; }
body.dark-mode .sidebar {
  background: #111929 !important;
  border-right-color: rgba(255,255,255,0.07) !important;
}
body.dark-mode .sidebar-item.active {
  background: rgba(91,108,248,0.15) !important;
  color: #8B9BFB !important;
}
body.dark-mode .sidebar-item.active i { color: #8B9BFB !important; }
body.dark-mode .page-header-row .btn-gold { box-shadow: 0 1px 2px rgba(91,108,248,0.2), 0 3px 10px rgba(91,108,248,0.2) !important; }


/* ─── Mobile page-header-row fix ─── */
@media (max-width: 480px) {
  .page-header-row {
    flex-wrap: nowrap !important;
    gap: 8px !important;
    align-items: center !important;
  }
  .page-header-row > div:first-child { flex: 1; min-width: 0; overflow: hidden; }
  .page-header-row .page-actions,
  .page-header-row > div:last-child {
    flex-shrink: 0 !important;
    width: auto !important;
    justify-content: flex-end !important;
  }
  .page-header-row h1.page-title { font-size: 17px !important; }
  .page-sub { font-size: 11.5px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Hide button text labels on very small screens, keep icons */
  .page-actions .btn-icon-label { display: none !important; }
  .page-actions .btn-gold, .page-actions .btn-secondary {
    padding: 0 12px !important;
    min-width: 40px !important;
  }
}
@media (max-width: 360px) {
  .page-actions .btn-gold .btn-icon-label { display: none; }
}

/* 10. Desktop spacing */
@media (min-width: 1024px) {
  .main-content { padding: 32px 40px !important; }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE SYSTEM v2 — Per-Breakpoint Native-grade
   Per design review doc: strict breakpoints, tokens, native feel
═══════════════════════════════════════════════════════════ */

/* ── DESKTOP (≥1024px): Professional Admin Dashboard ── */
@media (min-width: 1024px) {
  /* KPI Cards — strict uniformity across all cards */
  .stat-card {
    min-height: var(--kpi-card-min-height) !important;
    padding: var(--card-padding-desktop) !important;
  }
  /* Tables — sticky header, min row height 48px */
  .data-table thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    background: #FAFBFE !important;
    box-shadow: 0 1px 0 var(--border-light) !important;
  }
  .data-table tbody tr { min-height: 48px; }
  .data-table td { padding: 8px 12px !important; }

  /* Card uniform padding */
  .card { padding: var(--card-padding-desktop) !important; }
}

/* ── TABLET (769px–1023px): Hybrid — Overlay sidebar, 2-col max ── */
@media (min-width: 769px) and (max-width: 1023px) {
  /* No hover lift animations on tablet (touch-hybrid device) */
  .stat-card:hover, .card:hover, .vendor-card:hover, .event-card:hover,
  .task-card:hover, .service-card:hover, .lead-card-v2:hover,
  .kpi-card-clickable:hover { transform: none !important; }
  /* Card padding */
  .card { padding: var(--card-padding-tablet) !important; }
  .stat-card { padding: var(--card-padding-tablet) !important; }
  /* Tablet forms — max 2 columns */
  .form-grid-2 { grid-template-columns: 1fr 1fr !important; }
  /* MODALS: Stay centered on tablet — NOT bottom sheet */
  .modal-overlay { align-items: center !important; padding: 20px !important; }
  .modal-box {
    border-radius: var(--radius-modal) !important;
    max-height: calc(100vh - 40px) !important;
    max-width: 600px !important;
    margin: 0 auto !important;
    width: 100% !important;
  }
  /* Kill the bottom-sheet drag handle on tablet */
  .modal-box::before { display: none !important; }
  /* Dim backdrop for overlay drawer */
  #drawer-overlay { transition: opacity 60ms !important; }
}

/* ── MOBILE (≤768px): Pure Native Feel ── */
@media (max-width: 768px) {
  /* Enforced spacing tokens */
  .card { padding: var(--card-padding-mobile) !important; border-radius: 10px !important; border-color: rgba(208,217,236,0.35) !important; box-shadow: 0 1px 4px rgba(19,25,41,0.04) !important; }
  .stat-card { border-radius: 10px !important; border-color: rgba(208,217,236,0.35) !important; box-shadow: 0 1px 4px rgba(19,25,41,0.04) !important; }

  /* Buttons compact but tall enough to tap */
  .btn-gold, .btn-secondary, .btn-outline, .btn-danger {
    min-height: 36px !important;
    padding: 7px 13px !important;
    font-size: 12.5px !important;
    border-radius: 9px !important;
  }
  .btn-gold { border-radius: 9px !important; }
  .btn-sm { padding: 5px 9px !important; font-size: 11.5px !important; border-radius: 7px !important; }
  /* Form input compact */
  .form-input:not(textarea) { height: 38px !important; font-size: 14px !important; }
  select.form-input { height: 38px !important; }

  /* Bottom nav: labels ALWAYS visible, no hiding */
  .bnav-item .bnav-label { display: block !important; opacity: 1 !important; }
  .bnav-item:not(.active) .bnav-label { opacity: 0.5 !important; }

  /* Bottom nav: max 5 items */
  #bottom-nav-items .bnav-item:nth-child(n+6) { display: none !important; }

  /* Section gaps */
  #dash-kpi-grid { gap: 10px !important; }
  #dash-main-grid { gap: 14px !important; }
}

/* ── ANDROID: Ripple effect on cards ── */
.plt-android .stat-card,
.plt-android .card,
.plt-android .vendor-card,
.plt-android .event-card,
.plt-android .task-card,
.plt-android .task-list-row,
.plt-android .lead-card-v2 {
  position: relative !important;
  overflow: hidden !important;
}
.plt-android .ripple-go.stat-card::after,
.plt-android .ripple-go.card::after,
.plt-android .ripple-go.vendor-card::after,
.plt-android .ripple-go.event-card::after,
.plt-android .ripple-go.task-card::after,
.plt-android .ripple-go.task-list-row::after,
.plt-android .ripple-go.lead-card-v2::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background: radial-gradient(circle at var(--rx,50%) var(--ry,50%), rgba(91,108,248,0.12) 0%, transparent 70%) !important;
  transform: scale(2.8) !important;
  opacity: 0 !important;
  transition: opacity 0.45s ease !important;
}

/* ── MORE MENU: Block scroll behind when open ── */
#more-menu-overlay.on { touch-action: none !important; }

/* ── iOS: Enhanced spring curves ── */
.plt-ios .btn-gold:active,
.plt-ios .btn-secondary:active,
.plt-ios .stat-card:active,
.plt-ios .card:active {
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  transition-duration: 80ms !important;
}

/* ═══════════════════════════════════════════════════════════
   MORE MENU SHEET — Compact Native Style (Mobile)
   Icons, labels, padding sab tighten kiya
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Sheet header compact */
  #more-menu-sheet > div:nth-child(2) {
    padding: 10px 16px 8px !important;
  }
  #more-menu-sheet > div:nth-child(2) .more-menu-handle ~ * { }

  /* Grid: 4 columns, tighter gaps */
  .more-menu-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
    padding: 6px 10px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Each item: much more compact */
  .more-menu-item {
    min-height: 60px !important;
    padding: 8px 3px !important;
    gap: 4px !important;
    border-radius: 8px !important;
  }

  /* Icon: smaller */
  .more-menu-item .mm-icon,
  .mm-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07) !important;
    flex-shrink: 0 !important;
  }

  /* Label: tighter */
  .more-menu-item .mm-label,
  .mm-label {
    font-size: 10px !important;
    font-weight: 600 !important;
    margin-top: 3px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.1px !important;
  }

  /* Sheet handle + header row compact */
  .more-menu-handle {
    margin: 8px auto 0 !important;
    width: 32px !important;
    height: 4px !important;
  }

  /* Logout button compact */
  .more-menu-logout-btn {
    padding: 11px 14px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    margin: 0 10px !important;
    width: calc(100% - 20px) !important;
  }

  /* Sheet max-height tighter so it doesn't take too much screen */
  #more-menu-sheet {
    max-height: 85vh !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   MATERIAL DESIGN 3 — FINAL NATIVE FEEL ENHANCEMENTS
   Applied as final override layer for maximum consistency
═══════════════════════════════════════════════════════════ */

/* 1. Sidebar: standardized 280px width with permanent desktop behavior */
@media (min-width: 1024px) {
  .sidebar {
    width: var(--sidebar-w) !important;
    flex-shrink: 0 !important;
  }
  .sidebar.mini { width: var(--sidebar-mini-w) !important; }
  .sidebar.collapsed { width: 0 !important; }
  /* Sidebar always visible on desktop — no overlay */
  .sidebar-overlay { display: none !important; }
}

/* 2. Desktop content: max-width centered properly */
@media (min-width: 1024px) {
  .screen > * {
    max-width: var(--content-max-w) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* 3. Tablet: 2-column KPI grid, overlay sidebar */
@media (min-width: 769px) and (max-width: 1023px) {
  #dash-kpi-grid { grid-template-columns: repeat(2,1fr) !important; }
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    transform: translateX(-100%) !important;
    z-index: 301 !important;
    padding-top: calc(var(--nav-height) + var(--safe-top) + 8px) !important;
  }
  .sidebar.open { transform: translateX(0) !important; }
}

/* 4. Bottom nav — strictly max 5 items, native height */
#bottom-nav-items .bnav-item:nth-child(n+6) { display: none !important; }

/* 5. FAB: properly above bottom nav on mobile */
@media (max-width: 768px) {
  #cart-fab {
    bottom: calc(52px + env(safe-area-inset-bottom, 0px) + 12px) !important;
    right: 16px !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
  }
}

/* 6. Consistent card system — 12px radius on mobile, 16px on desktop */
@media (max-width: 768px) {
  .card, .stat-card, .vendor-card, .event-card, .task-card {
    border-radius: 8px !important;
  }
  /* No hover on cards (mobile) */
  .card:hover, .stat-card:hover, .vendor-card:hover, .event-card:hover,
  .task-card:hover { transform: none !important; }
}
@media (min-width: 769px) {
  .card, .stat-card { border-radius: 10px !important; }
}

/* 7. No horizontal overflow anywhere */
html, body, #app-shell, .app-body, .main-area, .screen {
  max-width: 100vw;
  overflow-x: hidden;
}

/* 8. Prevent iOS overscroll bounce on body level (native containment) */
html {
  overscroll-behavior: none !important;
  height: 100%;
}
body {
  overscroll-behavior: none !important;
  height: 100%;
}

/* 9. Remove scrollbar on mobile completely */
@media (max-width: 768px) {
  ::-webkit-scrollbar { width: 0 !important; height: 0 !important; }
}

/* 10. Page transition: consolidated in primary screen transition block */

/* 11. Bottom nav: active icon gets filled style via color only */
.bnav-item:not(.active) .bnav-label { color: var(--text-muted) !important; }
.bnav-item.active .bnav-label { color: var(--primary) !important; }

/* 12. Desktop sidebar items — slightly larger padding for 280px width */
@media (min-width: 1024px) {
  .sidebar-item {
    padding: 9px 12px !important;
    font-size: 13.5px !important;
    border-radius: 10px !important;
  }
  .sidebar-section { padding: 0 12px !important; }
}


/* 14. Modal: fixed title, scrollable content, sticky footer */

@media (min-width: 769px) {

  .modal-box { max-height: min(85vh, 700px) !important; }
}
.modal-hd { flex-shrink: 0 !important; }
.modal-body { overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; }
.modal-footer { flex-shrink: 0 !important; }

/* 15. Login: responsive handled in main login block (mobile-first) */

/* ═══════════════════════════════════════════════
   FINAL POLISH OVERRIDES — v11
   Mobile buttons, PDF modal, typography, bnav
═══════════════════════════════════════════════ */

/* ── Typography: cleaner, tighter, more polished ── */
body {
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  text-rendering: optimizeLegibility;
}
.page-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -0.55px !important;
  line-height: 1.18 !important;
}
@media (max-width: 768px) {
  .page-title { font-size: 17px !important; letter-spacing: -0.4px !important; }
  .page-sub { font-size: 11.5px !important; }
  .card-title { font-size: 13.5px !important; }
  .section-title { font-size: 10px !important; letter-spacing: 0.9px !important; }
  /* modal title tight on mobile */
  .modal-title { font-size: 14px !important; letter-spacing: -0.2px !important; }
  .modal-subtitle { font-size: 11.5px !important; }
}

/* ── Buttons: refined proportions ── */
@media (max-width: 768px) {
  .btn-gold, .btn-primary {
    padding: 7px 13px !important;
    font-size: 12.5px !important;
    border-radius: 9px !important;
    min-height: 34px !important;
    gap: 5px !important;
    letter-spacing: 0 !important;
  }
  .btn-secondary, .btn-outline {
    padding: 6px 12px !important;
    font-size: 12px !important;
    border-radius: 9px !important;
    min-height: 34px !important;
    gap: 5px !important;
  }
  .btn-ghost {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
  .btn-danger {
    padding: 6px 11px !important;
    font-size: 12px !important;
    border-radius: 9px !important;
    min-height: 34px !important;
  }
  .btn-sm {
    padding: 5px 9px !important;
    font-size: 11px !important;
    border-radius: 7px !important;
    min-height: 28px !important;
    gap: 4px !important;
  }
  /* Modal footer buttons — same compact size */
  .modal-footer .btn-gold,
  .modal-footer .btn-secondary {
    min-height: var(--btn-height) !important;
    height: var(--btn-height) !important;
    font-size: 13px !important;
    padding: 0 var(--btn-pad-x) !important;
    border-radius: var(--radius-btn) !important;
  }
  /* Login sign-in button — native touch target */
  .login-btn {
    min-height: 48px !important;
    font-size: 15px !important;
    padding: 14px 20px !important;
  }
}

/* ── PDF modal: full screen on mobile too, no rounded corners ── */
@media (max-width: 768px) {
  #modal-pdf { padding: 0 !important; }
  #modal-pdf .modal-box {
    border-radius: 0 !important;
    max-height: 100% !important;
    height: 100% !important;
  }
  #pdf-modal-hd {
    flex-wrap: nowrap !important;
    padding: 12px 14px 11px !important;
    gap: 8px !important;
    align-items: center !important;
  }
  #pdf-modal-hd .modal-hd-icon {
    width: 30px !important; height: 30px !important;
    border-radius: 8px !important; flex-shrink: 0 !important;
  }
  #pdf-modal-hd .modal-hd-content { flex: 1 1 0 !important; min-width: 0 !important; overflow: hidden !important; }
  #pdf-modal-hd .modal-title { font-size: 13px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: block !important; }
  .pdf-modal-subtitle { display: none !important; }
  .pdf-modal-actions { flex-shrink: 0 !important; gap: 5px !important; }
  .pdf-dl-label { display: none !important; }
}

/* ── Bottom nav: no grey background on press/focus ever ── */
.bnav-item,
.bnav-item:hover,
.bnav-item:focus,
.bnav-item:active,
.bnav-item:focus-visible,
.bnav-item:focus-within {
  background: transparent !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
}
/* iOS: kill :focus-visible blue glow */
.bnav-item:focus-visible { box-shadow: none !important; }
/* Ensure active state only does scale, no bg */
.bnav-item:active {
  transform: scale(0.88) !important;
  background: transparent !important;
}

/* ── Stat card: ensure font scale clean on mobile ── */
@media (max-width: 768px) {
  .kpi-value { font-size: 18px !important; }
  .kpi-label { font-size: 10.5px !important; }
  .stat-card .stat-value,
  .stat-card [class*="kpi-num"] { font-size: 17px !important; }
}

/* ── Form inputs: compact but legible ── */
@media (max-width: 768px) {
  .form-input:not(textarea) {
    height: 44px !important;
    font-size: 13.5px !important;
    padding: 0 12px !important;
    border-radius: 9px !important;
  }
  select.form-input { height: var(--input-height) !important; }
  textarea.form-input { font-size: var(--font-body-md) !important; padding: var(--space-3) var(--input-pad-x) !important; }
  .form-label { font-size: 10.5px !important; letter-spacing: 0.4px !important; }
}


/* ═══════════════════════════════════════════════════════════════
   PREMIUM NATIVE v12 — Material Design 3 + iOS HIG Aligned
   Bottom Nav | Buttons | Animations | Spacing | Visual Polish
   Applied as final definitive override layer
═══════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────
   1. DESIGN TOKENS — Extended Premium Set
──────────────────────────────────────────────────────────── */

/* ────────────────────────────────────────────────────────────
   2. BOTTOM NAVIGATION BAR — MD3 Navigation Bar
      Redesigned: pill indicator, proper spacing, premium feel
──────────────────────────────────────────────────────────── */
#bottom-nav {
  display: none;
  position: fixed !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 490 !important;
  background: var(--bg-card) !important;
  border-top: 1px solid var(--border-light) !important;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.06) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  height: calc(var(--bnav-height) + env(safe-area-inset-bottom, 0px)) !important;
}

#bottom-nav-items {
  display: flex !important;
  align-items: stretch !important;
  justify-content: space-around !important;
  height: var(--bnav-height) !important;
  padding: 0 4px !important;
  position: relative !important;
}

/* Sliding active indicator bar (top) */
#bottom-nav-items::before {
  content: none;
}

/* Each nav item — MD3 spec */
.bnav-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 !important;
  gap: 0 !important;
  padding: 0 !important;
  min-width: 48px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  position: relative !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
  outline: none !important;
  font-family: inherit !important;
  /* No transition on item itself — children handle it */
}

/* Active indicator — pill background behind icon */
.bnav-icon-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--bnav-active-indicator-w) !important;
  height: var(--bnav-active-indicator-h) !important;
  border-radius: 50px !important;
  background: transparent !important;
  transition: background var(--dur-short) var(--spring-standard),
              transform var(--dur-quick) var(--spring-bounce) !important;
  margin-bottom: 4px !important;
}

.bnav-item.active .bnav-icon-wrap {
  background: var(--bnav-active-container-color) !important;
  padding: 0 !important;
  border-radius: 50px !important;
}

/* Icon inside wrap */
.bnav-icon {
  font-size: 20px !important;
  line-height: 1 !important;
  color: var(--text-muted) !important;
  transition: color var(--dur-short) var(--spring-standard),
              transform var(--dur-medium) var(--spring-bounce) !important;
  position: relative !important;
  z-index: 1 !important;
}
.bnav-item.active .bnav-icon {
  color: var(--primary) !important;
  transform: scale(1.0) !important;
}
.bnav-item.active.just-activated .bnav-icon {
  animation: bnavIconPop 340ms var(--spring-bounce) both !important;
}
@keyframes bnavIconPop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.28); }
  60%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}

/* Label */
.bnav-label {
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.1px !important;
  color: var(--text-muted) !important;
  display: block !important;
  opacity: 0.6 !important;
  transition: color var(--dur-short) var(--spring-standard),
              opacity var(--dur-short),
              font-weight var(--dur-short) !important;
  margin-top: 0 !important;
}
.bnav-item.active .bnav-label {
  color: var(--primary) !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

/* Press feedback — scale down icon wrap */
.bnav-item:active .bnav-icon-wrap {
  transform: scale(0.84) !important;
  transition: transform 80ms var(--spring-standard) !important;
}
.bnav-item:active .bnav-icon {
  animation: none !important;
}

/* Remove any background on all states */
.bnav-item,
.bnav-item:hover,
.bnav-item:focus,
.bnav-item:active,
.bnav-item:focus-visible,
.bnav-item:focus-within {
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

/* More button active state indicator dot */
.bnav-item.active .bnav-icon-wrap::after {
  content: none !important;
}

/* ────────────────────────────────────────────────────────────
   3. BUTTON SYSTEM — MD3 Elevated / Filled / Tonal / Text
──────────────────────────────────────────────────────────── */

/* Primary — Filled (btn-gold is our primary CTA) */
.btn-gold, .btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: var(--btn-height) !important;
  padding: 0 var(--btn-pad-x) !important;
  border-radius: var(--btn-radius-filled) !important;
  border: none !important;
  background: var(--primary) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1px !important;
  font-family: inherit !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
  /* MD3 elevation level 1 */
  box-shadow: 0 1px 2px rgba(0,0,0,0.12),
              0 2px 6px rgba(91,108,248,0.30),
              inset 0 1px 0 rgba(255,255,255,0.15) !important;
  transition: box-shadow var(--dur-short) var(--spring-standard),
              transform var(--dur-quick) var(--spring-standard),
              filter var(--dur-short) !important;
}
.btn-gold::before, .btn-primary::before {
  /* State layer */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0);
  transition: background var(--dur-short) var(--spring-standard);
  pointer-events: none;
}
@media (hover: hover) {
  .btn-gold:hover, .btn-primary:hover {
    box-shadow: 0 2px 4px rgba(0,0,0,0.14),
                0 4px 16px rgba(91,108,248,0.40),
                inset 0 1px 0 rgba(255,255,255,0.18) !important;
    transform: translateY(-1px) !important;
    filter: brightness(1.04) !important;
  }
  .btn-gold:hover::before, .btn-primary:hover::before {
    background: rgba(255,255,255,0.08);
  }
}
.btn-gold:active, .btn-primary:active {
  box-shadow: 0 0 0 rgba(0,0,0,0), inset 0 1px 2px rgba(0,0,0,0.20) !important;
  transform: scale(0.96) !important;
  transition: transform 80ms var(--spring-standard), box-shadow 80ms !important;
  filter: brightness(0.94) !important;
}
.btn-gold:active::before, .btn-primary:active::before {
  background: rgba(0,0,0,0.12);
}

/* Ripple for Android */
.plt-android .btn-gold::after,
.plt-android .btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at var(--rx,50%) var(--ry,50%),
              rgba(255,255,255,0.32) 0%, transparent 60%);
  transform: scale(0);
  opacity: 0;
  transition: transform 0.5s var(--spring-standard), opacity 60ms;
}
.plt-android .btn-gold.ripple-go::after,
.plt-android .btn-primary.ripple-go::after {
  transform: scale(3) !important;
  opacity: 1 !important;
  transition: transform 0.5s var(--spring-standard), opacity 0.08s !important;
}

/* Secondary — Outlined / Tonal */
.btn-secondary, .btn-outline {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: var(--btn-height) !important;
  padding: 0 var(--btn-pad-x) !important;
  border-radius: var(--btn-radius-tonal) !important;
  border: 1.5px solid rgba(91,108,248,0.22) !important;
  background: rgba(91,108,248,0.05) !important;
  color: var(--primary) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1px !important;
  font-family: inherit !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
  box-shadow: none !important;
  transition: background var(--dur-short) var(--spring-standard),
              border-color var(--dur-short),
              box-shadow var(--dur-short),
              transform var(--dur-quick) !important;
}
@media (hover: hover) {
  .btn-secondary:hover, .btn-outline:hover {
    background: rgba(91,108,248,0.10) !important;
    border-color: rgba(91,108,248,0.35) !important;
    box-shadow: 0 1px 4px rgba(91,108,248,0.12) !important;
  }
}
.btn-secondary:active, .btn-outline:active {
  transform: scale(0.96) !important;
  background: rgba(91,108,248,0.14) !important;
  transition: transform 80ms var(--spring-standard) !important;
}

/* Ghost / Text button */
.btn-ghost {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 36px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  border: none !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: background var(--dur-short),
              color var(--dur-short),
              transform var(--dur-quick) !important;
}
@media (hover: hover) {
  .btn-ghost:hover {
    background: var(--surface) !important;
    color: var(--primary) !important;
  }
}
.btn-ghost:active {
  transform: scale(0.95) !important;
  background: rgba(91,108,248,0.08) !important;
  transition: transform 80ms var(--spring-standard) !important;
}

/* Danger button */
.btn-danger {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  height: var(--btn-height) !important;
  padding: 0 var(--btn-pad-x) !important;
  border-radius: var(--btn-radius-tonal) !important;
  border: none !important;
  background: var(--error) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  -webkit-tap-highlight-color: transparent !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.14), 0 2px 8px rgba(244,91,65,0.30) !important;
  transition: transform var(--dur-quick) var(--spring-standard),
              box-shadow var(--dur-short),
              filter var(--dur-short) !important;
}
.btn-danger:active {
  transform: scale(0.96) !important;
  transition: transform 80ms var(--spring-standard) !important;
}

/* Small button variant */
.btn-sm {
  height: 32px !important;
  padding: 0 14px !important;
  font-size: 12.5px !important;
  border-radius: 10px !important;
  gap: 5px !important;
}

/* Mobile button sizing */
@media (max-width: 768px) {
  .btn-gold, .btn-primary,
  .btn-secondary, .btn-outline,
  .btn-danger {
    height: var(--btn-height-mobile) !important;
    padding: 0 var(--btn-pad-x-mobile) !important;
    font-size: 13.5px !important;
    border-radius: 8px !important;
  }
  .btn-gold { border-radius: 50px !important; }
  .wizard-next-btn.btn-gold, .ws3-review-btn.btn-gold, .wizard-generate-btn.btn-gold {
    min-height: unset !important;
    height: var(--btn-height-mobile) !important;
    font-size: 13.5px !important;
    padding: 0 var(--btn-pad-x-mobile) !important;
  }
  .btn-sm {
    height: 34px !important;
    padding: 0 13px !important;
    font-size: 12px !important;
    border-radius: 9px !important;
    min-height: unset !important;
  }
  .modal-footer .btn-gold,
  .modal-footer .btn-secondary {
    height: var(--btn-height) !important;
    min-height: var(--btn-height) !important;
    font-size: 13px !important;
    border-radius: var(--radius-btn) !important;
  }
  .login-btn {
    height: var(--btn-height) !important;
    min-height: var(--btn-height) !important;
    font-size: 13px !important;
    border-radius: var(--radius-btn) !important;
  }
}

/* ────────────────────────────────────────────────────────────
   4. ANIMATIONS — Meaningful & Performance-First
──────────────────────────────────────────────────────────── */

/* Improved screen transitions — native iOS feel */
@keyframes screenEnterRight {
  from {
    opacity: 0;
    transform: translateX(32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes screenExitLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-24px);
  }
}
@keyframes screenEnterLeft {
  from {
    opacity: 0;
    transform: translateX(-32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes screenExitRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(24px);
  }
}
@keyframes screenEnterFade {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes screenExitFade {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-6px) scale(0.99);
  }
}

/* Screen transition overrides removed; using consolidated rules above */

/* Tab switch: fade content when switching tabs */
@keyframes tabContentEnter {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Screen content stagger — sections - FAST */
.dash-section { animation: tabContentEnter 160ms var(--spring-decelerate) both !important; }
.dash-section:nth-child(1) { animation-delay: 0ms !important; }
.dash-section:nth-child(2) { animation-delay: 30ms !important; }
.dash-section:nth-child(3) { animation-delay: 60ms !important; }
.dash-section:nth-child(4) { animation-delay: 90ms !important; }

/* KPI cards — fast stagger */
#dash-kpi-grid > *:nth-child(1) { animation: tabContentEnter 140ms var(--spring-decelerate) 0ms both !important; }
#dash-kpi-grid > *:nth-child(2) { animation: tabContentEnter 140ms var(--spring-decelerate) 25ms both !important; }
#dash-kpi-grid > *:nth-child(3) { animation: tabContentEnter 140ms var(--spring-decelerate) 50ms both !important; }
#dash-kpi-grid > *:nth-child(4) { animation: tabContentEnter 140ms var(--spring-decelerate) 75ms both !important; }

/* Modal entrance */
@keyframes modalEnterCenter {
  from { opacity: 0; transform: scale(0.94) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes sheetEnter {
  from { opacity: 0.6; transform: translateY(56px); }
  to   { opacity: 1; transform: translateY(0); }
}
.modal-overlay {
  animation: none !important;
}
.modal-overlay.open {
  animation: overlayBackdropIn 200ms ease both !important;
}
@keyframes overlayBackdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (min-width: 769px) {
  .modal-overlay.open .modal-box {
    animation: modalEnterCenter 280ms var(--spring-bounce) both !important;
  }
}
@media (max-width: 768px) {
  .modal-overlay.open .modal-box {
    animation: sheetEnter 360ms var(--spring-bounce) both !important;
  }
}

/* Form panel animation */
#page-form-panel.open #pf-sheet {
  animation: none !important;
}

/* More menu sheet */
@keyframes moreMenuEnter {
  from { transform: translateY(100%); opacity: 0.8; }
  to   { transform: translateY(0); opacity: 1; }
}

/* Button ripple animation — universal */
@keyframes rippleExpand {
  from { transform: scale(0); opacity: 0.6; }
  to   { transform: scale(4); opacity: 0; }
}

/* Icon micro-animation for clicks */
@keyframes iconBounce {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.icon-click-animate {
  animation: iconBounce 200ms var(--spring-bounce) both;
}

/* Fade in for list items */
@keyframes listItemIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.data-table tbody tr,
.lead-card-v2,
.vendor-card,
.event-card,
.task-card,
.task-list-row {
  animation: listItemIn 280ms var(--spring-decelerate) both;
}
.data-table tbody tr:nth-child(1) { animation-delay: 20ms; }
.data-table tbody tr:nth-child(2) { animation-delay: 50ms; }
.data-table tbody tr:nth-child(3) { animation-delay: 80ms; }
.data-table tbody tr:nth-child(4) { animation-delay: 110ms; }
.data-table tbody tr:nth-child(5) { animation-delay: 140ms; }
.data-table tbody tr:nth-child(6) { animation-delay: 170ms; }

/* Badge / chip pop-in */
@keyframes badgeIn {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.badge {
  animation: badgeIn 180ms var(--spring-bounce) both;
}

/* ────────────────────────────────────────────────────────────
   5. TOP APP BAR — Native polish
──────────────────────────────────────────────────────────── */
.top-nav {
  background: var(--bg-card) !important;
  border-bottom: 1px solid var(--border-light);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06),
              0 2px 16px rgba(19,25,41,0.06) !important;
  transition: box-shadow 0.2s var(--spring-standard),
              background 60ms !important;
}
.plt-android .top-nav {
  background: var(--bg-card) !important;
  border-bottom: 1px solid var(--border-light) !important;
  box-shadow: none !important;
}
.plt-ios .top-nav {
  background: var(--bg-card) !important;
  border-bottom: 1px solid var(--border-light) !important;
  box-shadow: none !important;
}

/* ────────────────────────────────────────────────────────────
   6. CARD SYSTEM — Refined elevations & interactions
──────────────────────────────────────────────────────────── */
.card,
.stat-card,
.vendor-card,
.event-card,
.task-card,
.lead-card-v2 {
  background: var(--white) !important;
  border: 1px solid rgba(208,217,236,0.4) !important;
  box-shadow: var(--elev-1) !important;
  transition: transform 200ms var(--spring-standard),
              box-shadow 200ms var(--spring-standard),
              border-color 60ms !important;
}
@media (min-width: 769px) {
  .card:hover,
  .stat-card:hover {
    box-shadow: var(--elev-3) !important;
    border-color: rgba(91,108,248,0.14) !important;
    transform: translateY(-2px) !important;
  }
  .vendor-card:hover,
  .event-card:hover,
  .lead-card-v2:hover {
    box-shadow: var(--elev-2) !important;
    border-color: rgba(91,108,248,0.14) !important;
    transform: none !important;
  }
}
.card:active,
.vendor-card:active,
.task-card:active,
.lead-card-v2:active {
  transform: scale(0.97) !important;
  box-shadow: var(--elev-0) !important;
  transition: transform 80ms var(--spring-standard),
              box-shadow 80ms !important;
}

/* Mobile cards */
@media (max-width: 768px) {
  .card, .stat-card, .vendor-card, .event-card, .task-card {
    border-radius: 10px !important;
    border-color: rgba(208,217,236,0.3) !important;
    box-shadow: 0 1px 3px rgba(19,25,41,0.05) !important;
  }
  .card:hover, .stat-card:hover, .vendor-card:hover,
  .event-card:hover, .task-card:hover {
    transform: none !important;
    box-shadow: 0 1px 3px rgba(19,25,41,0.05) !important;
  }
}

/* Stat card — top accent line refined */
.stat-card::before {
  background: var(--primary) !important;
  height: 3px !important;
  opacity: 0.7 !important;
}

/* ────────────────────────────────────────────────────────────
   7. FORM INPUTS — Native quality
──────────────────────────────────────────────────────────── */
.form-input {
  border-radius: 8px !important;
  border: 1.5px solid rgba(188,201,220,0.8) !important;
  background: var(--white) !important;
  transition: border-color 160ms var(--spring-standard),
              box-shadow 160ms var(--spring-standard),
              background 160ms !important;
}
.form-input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px rgba(91,108,248,0.1) !important;
  background: #FAFCFF !important;
  outline: none !important;
}
.form-input:hover:not(:focus) {
  border-color: rgba(148,166,198,0.8) !important;
}

/* ────────────────────────────────────────────────────────────
   8. MODALS & SHEETS — Sheet handles, spacing, animations
──────────────────────────────────────────────────────────── */
.modal-overlay {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(8,12,28,0.52) !important;
}

.modal-box {
  box-shadow: var(--elev-4), 0 0 0 1px rgba(0,0,0,0.05) !important;
}

/* Sheet handle */
@media (max-width: 768px) {
  .modal-box::before {
    content: '' !important;
    display: block !important;
    width: 40px !important;
    height: 4px !important;
    background: rgba(0,0,0,0.16) !important;
    border-radius: 2px !important;
    margin: 12px auto 0 !important;
    flex-shrink: 0 !important;
    transition: background 60ms !important;
  }
  .modal-box:hover::before {
    background: rgba(0,0,0,0.28) !important;
  }
  .modal-box {
    border-radius: 28px 28px 0 0 !important;
  }
}

/* Modal close button */
.modal-close, .modal-close-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(0,0,0,0.05) !important;
  border: none !important;
  transition: background 150ms, transform 100ms !important;
}
.modal-close:hover, .modal-close-btn:hover {
  background: rgba(244,91,65,0.12) !important;
  color: var(--error) !important;
}
.modal-close:active, .modal-close-btn:active {
  transform: scale(0.88) !important;
}

/* Modal header — clean white */
.modal-hd {
  background: var(--white) !important;
}

/* ────────────────────────────────────────────────────────────
   9. TOAST — Clean native
──────────────────────────────────────────────────────────── */


/* ────────────────────────────────────────────────────────────
   10. SIDEBAR — Refined desktop sidebar
──────────────────────────────────────────────────────────── */
.sidebar-item {
  border-radius: 10px !important;
  transition: background 120ms var(--spring-standard),
              color 120ms !important;
}
.sidebar-item:active {
  transform: scale(0.97) !important;
  transition: transform 80ms !important;
}
.sidebar-item.active {
  background: var(--primary-light) !important;
  border: 1px solid rgba(91,108,248,0.2) !important;
}

/* ────────────────────────────────────────────────────────────
   11. MOBILE — Compact native layout improvements
──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Screen padding — tighter top, comfortable sides */
  .screen {
    padding: 14px 14px 0 !important;
    padding-top: 20px !important;
    padding-bottom: 0 !important;
  }

  /* Page title hierarchy */
  .page-title {
    font-size: 19px !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
    line-height: 1.15 !important;
  }
  .page-sub {
    font-size: 12px !important;
    margin-top: 2px !important;
  }

  /* Section titles */
  .section-title, .dash-section-title {
    font-size: 10.5px !important;
    letter-spacing: 0.8px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
  }

  /* Card padding: tighter, more content visible */
  .card {
    padding: 14px 15px !important;
  }
  .stat-card {
    padding: 13px 14px !important;
  }

  /* KPI numbers */
  .kpi-value, .kpi-num {
    font-size: 20px !important;
    font-weight: 800 !important;
    letter-spacing: -0.6px !important;
  }
  .kpi-label {
    font-size: 11px !important;
    font-weight: 500 !important;
  }

  /* Page header rows */
  .page-header-row {
    margin-bottom: 16px !important;
    gap: 8px !important;
  }

  /* Table rows as cards — better mobile presentation */
  .data-table tbody tr {
    border-radius: 13px !important;
    padding: 13px 14px !important;
    box-shadow: 0 1px 3px rgba(19,25,41,0.04) !important;
    border-color: rgba(208,217,236,0.3) !important;
    margin-bottom: 2px !important;
  }

  /* FAB */
  #cart-fab {
    box-shadow: 0 6px 20px rgba(91,108,248,0.45),
                0 2px 8px rgba(0,0,0,0.12) !important;
  }

  /* Bottom sheet */
  #bottom-sheet {
    border-radius: 28px 28px 0 0 !important;
  }

  /* Settings rows — larger touch targets */
  .settings-row {
    min-height: 52px !important;
    padding: 12px 16px !important;
  }

  /* Nav icon buttons — larger touch */
  .nav-icon-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 8px !important;
  }

  /* Wizard step track */
  .wizard-step-track.step-track {
    padding: 16px 18px !important;
    border-radius: 10px !important;
    margin-bottom: 16px !important;
  }

  /* Filter tabs */
  .ev-filter-tab {
    padding: 7px 14px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    border-radius: 50px !important;
  }

  /* Role pill */
  .role-pill {
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 10px 8px !important;
  }

  /* Accordion */
  .accordion {
    border-radius: 10px !important;
  }
  .accordion-header {
    padding: 14px 16px !important;
  }
}

/* ────────────────────────────────────────────────────────────
   12. INTERACTIVE STATES — Universal press feedback
──────────────────────────────────────────────────────────── */

/* Settings rows */
.settings-row:active {
  background: rgba(91,108,248,0.06) !important;
  transform: scale(0.995) !important;
  transition: background 80ms, transform 80ms !important;
}

/* More menu items */
.more-menu-item:active {
  transform: scale(0.93) !important;
  transition: transform 80ms var(--spring-standard) !important;
}

/* Task list rows */
.task-list-row:active {
  background: var(--primary-light) !important;
  transform: scale(0.99) !important;
  transition: transform 80ms var(--spring-standard) !important;
}

/* Vendor cards (event cards: no push/scale on tap) */
.vendor-card:active {
  transform: scale(0.97) !important;
  transition: transform 80ms var(--spring-standard) !important;
}

/* KPI cards */
.kpi-card-clickable:active {
  transform: scale(0.95) !important;
  transition: transform 80ms var(--spring-standard) !important;
}

/* ────────────────────────────────────────────────────────────
   13. MORE MENU SHEET — Premium redesign
──────────────────────────────────────────────────────────── */
#more-menu-sheet {
  background: var(--gmail-bg) !important;
  border-radius: 28px 28px 0 0 !important;
  box-shadow: 0 -8px 40px rgba(19,25,41,0.14),
              0 -1px 0 rgba(0,0,0,0.05) !important;
}
.more-menu-handle {
  width: 36px !important;
  height: 4px !important;
  background: rgba(0,0,0,0.15) !important;
  border-radius: 2px !important;
  margin: 10px auto 0 !important;
}
.more-menu-item {
  background: var(--white) !important;
  border: 1px solid rgba(208,217,236,0.4) !important;
  border-radius: 10px !important;
  box-shadow: var(--elev-1) !important;
  transition: background 80ms, transform 70ms, box-shadow 80ms !important;
}
@media (max-width: 768px) {
  .more-menu-item {
    min-height: 66px !important;
    padding: 10px 4px !important;
    border-radius: 10px !important;
  }
  .mm-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 11px !important;
    font-size: 14px !important;
  }
  .mm-label {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    margin-top: 5px !important;
  }
}

/* ────────────────────────────────────────────────────────────
   14. TYPOGRAPHY SYSTEM — Final clean hierarchy
──────────────────────────────────────────────────────────── */
body {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1 !important;
  text-rendering: optimizeLegibility !important;
}
.page-title {
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--text-primary) !important;
}
.modal-title { font-weight: 700 !important; letter-spacing: -0.02em !important; }
.card-title, .bs-head-title { font-weight: 700 !important; letter-spacing: -0.02em !important; }

/* ────────────────────────────────────────────────────────────
   15. DARK MODE — Enhanced for premium feel
──────────────────────────────────────────────────────────── */
body.dark-mode #bottom-nav {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.2) !important;
}
body.dark-mode .modal-box {
  background: #1A2040 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: var(--elev-4), 0 0 0 1px rgba(255,255,255,0.04) !important;
}
body.dark-mode .top-nav {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.2) !important;
}
body.dark-mode .card,
body.dark-mode .stat-card {
  background: var(--white) !important;
  border-color: rgba(255,255,255,0.07) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3),
              0 2px 10px rgba(0,0,0,0.2) !important;
}
body.dark-mode .btn-secondary {
  background: rgba(91,108,248,0.12) !important;
  border-color: rgba(91,108,248,0.28) !important;
  color: #A8BFFF !important;
}
body.dark-mode #more-menu-sheet {
  background: rgba(16, 22, 44, 0.98) !important;
}
body.dark-mode .more-menu-item {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* ────────────────────────────────────────────────────────────
   16. SCROLL — Native feel
──────────────────────────────────────────────────────────── */
.screen,
.modal-body,
.bs-body,
#pf-body {
  scroll-behavior: smooth !important;
  overscroll-behavior-y: contain !important;
}
.plt-ios .screen {
  -webkit-overflow-scrolling: touch !important;
}

/* ────────────────────────────────────────────────────────────
   17. ACCESSIBILITY — Focus visible only
──────────────────────────────────────────────────────────── */
:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}
:focus-visible {
  outline: 2px solid var(--primary) !important;
  outline-offset: 3px !important;
  border-radius: 4px !important;
}

/* ────────────────────────────────────────────────────────────
   18. WIZARD STEPS — Enhanced indicators
──────────────────────────────────────────────────────────── */
.step-dot {
  transition: all 160ms var(--spring-bounce) !important;
}
.step-dot.done {
  animation: stepDone 400ms var(--spring-bounce) both !important;
}
@keyframes stepDone {
  0%   { transform: scale(0.8); }
  50%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.step-line {
  transition: background 400ms var(--spring-standard) !important;
}

/* ────────────────────────────────────────────────────────────
   19. QUICK ACTION BUTTONS (Dashboard)
──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #dash-quick-actions button {
    flex-direction: column !important;
    padding: 13px 8px !important;
    font-size: 11.5px !important;
    border-radius: 10px !important;
    gap: 7px !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 70px !important;
    background: var(--white) !important;
    border: 1.5px solid rgba(208,217,236,0.5) !important;
    box-shadow: var(--elev-1) !important;
    color: var(--text-secondary) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    transition: background 80ms, transform 70ms, box-shadow 80ms !important;
  }
  #dash-quick-actions button:active {
    transform: scale(0.94) !important;
    background: var(--primary-light) !important;
    transition: transform 80ms !important;
  }
  #dash-quick-actions button i {
    font-size: 18px !important;
    color: var(--primary) !important;
  }
}

/* ────────────────────────────────────────────────────────────
   20. LOGIN SCREEN — Mobile polish
──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .login-app-icon {
    box-shadow: 0 8px 32px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.12) !important;
  }
}

/* ────────────────────────────────────────────────────────────
   21. BADGE SYSTEM — Crisp chips
──────────────────────────────────────────────────────────── */
.badge {
  border-radius: 50px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 9px !important;
  letter-spacing: 0.1px !important;
}

/* ────────────────────────────────────────────────────────────
   22. SCROLL TO TOP IMPROVEMENT — Smooth
──────────────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth !important;
}

/* ────────────────────────────────────────────────────────────
   23. RIPPLE EFFECT — Global Material Design
──────────────────────────────────────────────────────────── */
.btn-gold, .btn-secondary, .btn-danger, .btn-outline {
  isolation: isolate !important;
}

/* ────────────────────────────────────────────────────────────
   24. SWITCH / TOGGLE — Premium native feel
──────────────────────────────────────────────────────────── */
.native-toggle-track {
  transition: background 60ms var(--spring-bounce) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.1) !important;
}
.native-toggle-track::after {
  box-shadow: 0 2px 6px rgba(0,0,0,0.20) !important;
  transition: transform 280ms var(--spring-bounce) !important;
}
.native-toggle input:checked + .native-toggle-track {
  background: var(--primary) !important;
}

/* ────────────────────────────────────────────────────────────
   25. ANDROID-SPECIFIC — Remove blur, add material shadows
──────────────────────────────────────────────────────────── */
.plt-android #bottom-nav {
  background: var(--bg-card) !important;
  border-top: 1px solid var(--border-light) !important;
}
.plt-android .modal-box {
  border-radius: 20px !important;
}
@media (max-width: 768px) {
  .plt-android .modal-overlay {
    align-items: flex-end !important;
  }
  .plt-android .modal-box {
    border-radius: 12px 12px 0 0 !important;
  }
}

/* ═══════════════════════════════════════
   END PREMIUM NATIVE v12
═══════════════════════════════════════ */

/* ═══════════════════════════════════════════════════
   FINAL UI/UX REFINEMENTS — Polished & Production-Ready
═══════════════════════════════════════════════════ */

/* ══ PERFORMANCE — GPU layers for scrolling & animations ══ */
.screen { will-change: auto; -webkit-backface-visibility: hidden; }
.screen-container, #screen-container { contain: layout style; }
/* Remove heavy transitions on all interactive elements — instant feel */
.sidebar-item, .bnav-item, .more-menu-item,
.settings-row, .task-list-row, .lead-card-v2,
.filter-tab, .ev-filter-tab {
  transition: background 60ms, color 60ms !important;
}
/* Cards hover only on desktop */
@media (hover: hover) {
  .card, .stat-card, .event-card, .vendor-card, .lead-card-v2 {
    transition: box-shadow 120ms, border-color 120ms !important;
  }
}
@media (hover: none) {
  .card, .stat-card, .event-card, .vendor-card {
    transition: none !important;
  }
}
/* Buttons — fast press response */
.btn-gold, .btn-primary, .btn-secondary, .btn-ghost, .btn-danger {
  transition: opacity 60ms, transform 60ms !important;
}
/* Modal: fast open */
.modal-overlay { transition: none !important; }
.modal-box { animation-duration: 110ms !important; }
/* Bottom sheet: snappier */
#more-menu-sheet { transition: transform 160ms cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; }

/* ── Top nav: cleaner glass with subtle elevation ── */

.top-nav.scrolled {
  box-shadow: 0 2px 16px rgba(0,0,0,0.08) !important;
}

/* ── Bottom nav: same glass treatment ── */
#bottom-nav {
  background: var(--bg-card) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-top: 1px solid rgba(0,0,0,0.07) !important;
  box-shadow: none !important;
}

/* ── Sidebar: clean white, sharp dividers ── */
.sidebar {
  background: var(--white) !important;
  border-right: 1px solid var(--border-light) !important;
}
.sidebar-section-label {
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  padding: 4px 20px 4px !important;
}

/* ── Sidebar duplicate active override: consolidate ── */
.sidebar-item.active {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
  font-weight: 700 !important;
  box-shadow: inset 3px 0 0 var(--primary) !important;
}
.sidebar-item.active i { color: var(--primary) !important; }

/* ── Cards: subtle depth without heavy shadow ── */
.card, .stat-card {
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 2px 6px rgba(0,0,0,0.03) !important;
}
@media (min-width: 769px) {
  .card:hover, .stat-card:hover {
    box-shadow: 0 4px 16px rgba(91,108,248,0.09), 0 1px 4px rgba(0,0,0,0.05) !important;
    border-color: rgba(91,108,248,0.16) !important;
    transition: box-shadow 0.18s, border-color 0.18s !important;
  }
}

/* ── Data tables: refined stripes ── */
.data-table tbody tr:nth-child(even) td {
  background: rgba(91,108,248,0.018) !important;
}
.data-table tbody tr:hover td {
  background: var(--primary-light) !important;
  transition: background 0.1s !important;
}

/* ── Form sections: grouped cards ── */
.form-card, .form-section-card {
  background: var(--white) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 10px !important;
  padding: 18px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}
.form-card-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  margin-bottom: 14px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--border-light) !important;
}

/* ── Page header-row: flex with gap ── */
.page-header-row {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 18px !important;
}

/* ── Section title: consistent eyebrow typography ── */
.section-title, .dash-section-title {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
}

/* ── Modal: tighter, more refined ── */
.modal-box {
  border-radius: 20px !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.14), 0 4px 16px rgba(0,0,0,0.06) !important;
  overflow: hidden !important;
}
.modal-hd {
  padding: 14px 16px !important;
  background: var(--white) !important;
  border-bottom: 1px solid var(--border-light) !important;
  gap: 10px !important;
}
.modal-hd-icon {
  width: 36px !important; height: 36px !important;
  border-radius: 10px !important;
  flex-shrink: 0 !important;
}
.modal-title { font-size: 14.5px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; }
.modal-subtitle { font-size: 11.5px !important; color: var(--text-muted) !important; margin-top: 1px !important; }
.modal-body { padding: 16px !important; }
.modal-footer {
  padding: 12px 16px !important;
  background: #f9fafc !important;
  border-top: 1px solid var(--border-light) !important;
  gap: 8px !important;
}
.modal-close {
  width: 32px !important; height: 32px !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
  border: 1px solid var(--border-light) !important;
  background: var(--surface) !important;
  color: var(--text-muted) !important;
  font-size: 13px !important;
}
.modal-close:hover {
  background: var(--border-light) !important;
  color: var(--text-primary) !important;
}

/* ── Filters / tabs pill strip ── */
.filter-tabs, .ev-filter-tabs, .quot-filter-tabs {
  display: flex !important;
  gap: 4px !important;
  padding: 3px !important;
  background: var(--surface) !important;
  border-radius: 10px !important;
  border: 1px solid var(--border-light) !important;
}
.filter-tab, .ev-filter-tab {
  padding: 6px 14px !important;
  border-radius: 7px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  border: none !important;
  background: transparent !important;
  color: var(--text-muted) !important;
  cursor: pointer !important;
  transition: all 0.12s !important;
  font-family: inherit !important;
  -webkit-tap-highlight-color: transparent !important;
}
.filter-tab.active, .ev-filter-tab.active {
  background: var(--white) !important;
  color: var(--primary) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
}

/* ── Search inputs: refined ── */
.search-input-wrap, .nav-search-wrap {
  border-radius: 10px !important;
  border: 1px solid var(--border) !important;
  background: var(--white) !important;
}
.search-input-wrap:focus-within, .nav-search-wrap:focus-within {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(91,108,248,0.10) !important;
}

/* ── Back button consistent ── */
.back-btn-unified, .page-back-btn, .sub-back-btn, #nav-back-btn {
  background: var(--white) !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

/* ── Dashboard hero: tighter, refined gradient ── */


/* ── KPI cards: cleaner icon ── */
.crm-kpi-icon {
  border-radius: 10px !important;
  width: 32px !important; height: 32px !important;
  font-size: 14px !important;
}

/* ── Steps in wizard ── */
.step-dot {
  width: 28px !important; height: 28px !important;
  font-size: 11px !important; font-weight: 700 !important;
  border-radius: 50% !important;
}
.step-dot.active {
  background: var(--primary) !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(91,108,248,0.35) !important;
}
.step-dot.done {
  background: var(--success) !important;
  color: #fff !important;
}

/* ── Bottom sheet / page-form-panel: polished ── */
#bottom-sheet, #page-form-panel {
  border-radius: 12px 12px 0 0 !important;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.12), 0 -1px 0 rgba(0,0,0,0.04) !important;
}
#pf-head {
  padding: 14px 16px 12px !important;
  border-bottom: 1px solid var(--border-light) !important;
}
.bs-handle, .pf-handle {
  width: 36px !important; height: 4px !important;
  background: rgba(0,0,0,0.12) !important;
  border-radius: 2px !important;
  margin: 8px auto 0 !important;
}

/* ── Lead cards: premium style ── */
.lead-card-v2 {
  border-radius: 10px !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
  overflow: hidden !important;
  transition: box-shadow 0.15s, border-color 0.15s !important;
}
@media (min-width: 769px) {
  .lead-card-v2:hover {
    box-shadow: 0 4px 18px rgba(91,108,248,0.10) !important;
    border-color: rgba(91,108,248,0.18) !important;
  }
}

/* ── Settings rows: better visual hierarchy ── */
.settings-row {
  display: flex !important;
  align-items: center !important;
  padding: 14px 16px !important;
  border-radius: 10px !important;
  transition: background 0.10s !important;
  -webkit-tap-highlight-color: transparent !important;
}
.settings-row:hover { background: var(--surface) !important; }
.settings-row-label { font-weight: 600 !important; font-size: 13.5px !important; color: var(--text-primary) !important; }
.settings-row-sub { font-size: 11.5px !important; color: var(--text-muted) !important; margin-top: 1px !important; }

/* ── Accordion polish ── */
.accordion-header {
  padding: 13px 16px !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  border-radius: 8px !important;
  transition: background 55ms !important;
}
.accordion-header:hover { background: var(--surface) !important; }
.accordion-header.open { border-radius: 12px 12px 0 0 !important; }
.accordion-body { border-radius: 0 0 12px 12px !important; }

/* ══════════════════════════════════════════════════════
   PROFESSIONAL DESIGN SYSTEM v2 — HD, Consistent, Fast
   NOTE: All rules scoped to avoid bleeding into #pdf-preview-content
══════════════════════════════════════════════════════ */

/* ── PDF preview isolation — surgical, no all:unset/all:initial ── */
#pdf-preview-content * {
  box-sizing: border-box;
}
#pdf-preview-content .lq-root,
#pdf-preview-content .lq-root * {
  box-sizing: border-box !important;
  font-family: 'Plus Jakarta Sans','Jost',sans-serif !important;
  font-variant-numeric: normal !important;
}
/* Block specific global rules that bleed in */
#pdf-preview-content label {
  display: inline !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: inherit !important;
  margin: 0 !important;
  text-indent: 0 !important;
}
#pdf-preview-content input,
#pdf-preview-content select,
#pdf-preview-content textarea,
#pdf-preview-content button { all: revert; }
#pdf-preview-content table { display: table !important; }
#pdf-preview-content thead { display: table-header-group !important; }
#pdf-preview-content tbody { display: table-row-group !important; }
#pdf-preview-content tr    { display: table-row !important; }
#pdf-preview-content td, #pdf-preview-content th { display: table-cell !important; }
/* Sora font must not apply inside quotation */
#pdf-preview-content h1,
#pdf-preview-content .lq-brand-name,
#pdf-preview-content .lq-qb-title {
  font-family: 'Plus Jakarta Sans','Jost',sans-serif !important;
}

/* ── GLOBAL: Remove tap highlight everywhere ── */
*, *::before, *::after { -webkit-tap-highlight-color: transparent; }
/* KPI/stat card focus: absolutely no outline, no box-shadow, no border change */
.stat-card, .quot-kpi-card, .kpi-card-clickable, 
.layout-kpi-block, article[onclick], [role="button"] {
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
  user-select: none !important;
}
.stat-card:focus-within, .quot-kpi-card:focus-within { outline: none !important; }
/* ── 1. Global base reset for crisp rendering ── */
*, *::before, *::after { box-sizing: border-box; }
body {
  background: var(--bg-page) !important;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: var(--text-primary);
  font-size: var(--text-base);
  line-height: 1.5;
}

/* ── Sora for display headlines ── */
h1, .page-title, .crm-hero-title, .modal-title,
.crm-kpi-value, .layout-kpi-block__value, .dash-rq-amount {
  font-family: 'Sora', 'Plus Jakarta Sans', -apple-system, sans-serif !important;
}

/* ── Tabular-nums for all monetary amounts ── */
.dash-rq-amount, .crm-kpi-value, .layout-kpi-block__value,
[class*="amount"], [class*="total"], [class*="money"],
.fmtMoney, .grand-total, .lq-t-val, .lqs-pricing-value,
.lq-t-row.grand-row .lq-t-val {
  font-variant-numeric: tabular-nums !important;
}

/* ── 2. Typography hierarchy — strict 5 sizes ── */
.page-title   { font-size: var(--text-lg)   !important; font-weight: 800 !important; letter-spacing: -0.03em !important; color: var(--text-primary) !important; line-height: 1.2 !important; }
.page-sub     { font-size: var(--text-sm)   !important; color: var(--text-muted) !important; font-weight: 400 !important; margin-top: 3px !important; }
.modal-title  { font-size: var(--text-md)   !important; font-weight: 700 !important; letter-spacing: -0.02em !important; color: var(--text-primary) !important; }
.section-title, .dash-section-title {
  font-size: var(--text-xs) !important;
  font-weight: 800 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
}
.card-title, .form-card-title {
  font-size: var(--text-base) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: var(--text-primary) !important;
}
.form-label, label.form-label {
  font-size: var(--text-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  display: block !important;
  margin-bottom: 5px !important;
}

/* ── 3. Card system — unified elevation ── */
.card, .stat-card, .event-card, .vendor-card, .task-card, .lead-card, .crm-panel {
  background: var(--white) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-sm) !important;
}
@media (hover: hover) {
  .card[onclick]:hover, .stat-card[onclick]:hover, .event-card:hover, .vendor-card:hover {
    box-shadow: var(--shadow-md) !important;
    border-color: rgba(91,108,248,0.2) !important;
    transform: none !important;
    transition: box-shadow 100ms, border-color 100ms, transform 100ms !important;
  }
}

/* ── 4. Button system — strict 3 heights ── */
.btn-gold, .btn-primary {
  height: var(--btn-height) !important;
  min-height: var(--btn-height) !important;
  padding: 0 var(--btn-pad-x) !important;
  border-radius: var(--r-sm) !important;
  font-size: var(--text-sm) !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  box-shadow: 0 2px 8px rgba(91,108,248,0.28), inset 0 1px 0 rgba(255,255,255,0.15) !important;
}
.btn-gold:hover, .btn-primary:hover {
  box-shadow: 0 4px 14px rgba(91,108,248,0.38), inset 0 1px 0 rgba(255,255,255,0.2) !important;
  filter: brightness(1.04) !important;
}
.btn-secondary, .btn-outline {
  height: var(--btn-height) !important;
  min-height: var(--btn-height) !important;
  padding: 0 var(--btn-pad-x) !important;
  border-radius: var(--r-sm) !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  background: var(--white) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--text-secondary) !important;
}
.btn-secondary:hover, .btn-outline:hover {
  background: var(--surface) !important;
  border-color: rgba(91,108,248,0.3) !important;
  color: var(--primary) !important;
}
.btn-sm {
  height: var(--btn-height-sm) !important;
  min-height: var(--btn-height-sm) !important;
  padding: 0 var(--btn-pad-x-sm) !important;
  border-radius: var(--r-xs) !important;
  font-size: var(--text-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

/* ── 5. Form inputs — crisp, accessible ── */
.form-input, input[type="text"], input[type="email"],
input[type="tel"], input[type="number"], input[type="date"],
input[type="password"], textarea, select {
  height: var(--input-height) !important;
  min-height: var(--input-height) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  background: var(--white) !important;
  color: var(--text-primary) !important;
  font-size: var(--text-base) !important;
  padding: 0 var(--input-pad-x) !important;
  transition: border-color 80ms, box-shadow 80ms !important;
  outline: none !important;
}
.form-input:focus, input:focus, textarea:focus, select:focus {
  border-color: var(--primary) !important;
  box-shadow: var(--shadow-focus) !important;
}
textarea.form-input, textarea { height: auto !important; min-height: 80px !important; padding: 10px var(--input-pad-x) !important; }

/* ── 6. Data table — zebra stripes, professional ── */

.data-table thead th {
  font-size: var(--text-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  padding: 9px 14px !important;
  background: var(--surface) !important;
  border-bottom: 2px solid var(--border) !important;
  white-space: nowrap !important;
}
.data-table tbody td {
  font-size: var(--text-sm) !important;
  padding: 11px 14px !important;
  border-bottom: 1px solid var(--border-light) !important;
  color: var(--text-primary) !important;
  vertical-align: middle !important;
  font-variant-numeric: tabular-nums !important;
}
.data-table tbody tr:nth-child(even) td { background: #FAFBFF !important; }
.data-table tbody tr:last-child td { border-bottom: none !important; }
.data-table tbody tr:hover td {
  background: var(--primary-light) !important;
  transition: background 60ms !important;
}

/* Mobile: table rows become cards */
@media (max-width: 600px) {
  .data-table, .data-table thead, .data-table tbody,
  .data-table th, .data-table td, .data-table tr { display: block; }
  .data-table thead { display: none; }
  .data-table tbody tr {
    background: var(--white) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: var(--r-md) !important;
    margin-bottom: 8px !important;
    padding: 10px 14px !important;
    box-shadow: var(--shadow-sm) !important;
  }
  .data-table tbody td {
    border-bottom: none !important;
    padding: 4px 0 !important;
    font-size: var(--text-sm) !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .data-table tbody td::before {
    content: attr(data-label);
    font-size: var(--text-xs) !important;
    font-weight: 700 !important;
    color: var(--text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    min-width: 80px !important;
    flex-shrink: 0 !important;
  }
}

/* ── 7. Badge system — fixed 22px height everywhere ── */
.badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  padding: 0 8px !important;
  border-radius: 100px !important;
  letter-spacing: 0.03em !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.badge i { font-size: 9px !important; }
.badge-green  { background: var(--success-light) !important; color: #056b56 !important; }
.badge-blue   { background: var(--primary-light) !important; color: #2d3fc4 !important; }
.badge-yellow { background: var(--warning-light) !important; color: #92400e !important; }
.badge-red    { background: var(--error-light)   !important; color: #991b1b !important; }
.badge-gray   { background: var(--surface-2)     !important; color: var(--text-muted) !important; }
/* status badge shortcuts */
.badge-accepted, .badge-confirmed { background: #dcfce7 !important; color: #15803d !important; }
.badge-sent     { background: #dbeafe !important; color: #1d4ed8 !important; }
.badge-draft    { background: #f3f4f6 !important; color: #4b5563 !important; }
.badge-rejected { background: #fee2e2 !important; color: #b91c1c !important; }
.badge-planning { background: #fef3c7 !important; color: #92400e !important; }


/* ── Search bar: never overflow, always separated from filter chips ── */
.list-search-bar {
  position: relative;
  z-index: 1;
}
.list-search-bar input {
  min-width: 0 !important;
  flex: 1 !important;
}
.list-search-bar select {
  flex-shrink: 0 !important;
  max-width: 130px !important;
}
/* On very small screens, stack search and select */
@media (max-width: 400px) {
  .list-search-bar { flex-wrap: wrap !important; height: auto !important; padding: 6px 10px !important; }
  .list-search-bar input { height: 32px !important; }
  .list-search-bar select { width: 100% !important; max-width: 100% !important; border-top: 1px solid var(--border-light) !important; padding: 6px 0 !important; }
}
/* Filter chips: always below search, never overlap */
.lead-filter-chips, .ev-filter-row { clear: both; }

/* ── 8. Navigation — polished bottom nav ── */
#bottom-nav {
  background: var(--bg-card) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-top: 1px solid var(--border-light) !important;
  box-shadow: 0 -1px 0 var(--border-light) !important;
}
.bnav-item { border-radius: 10px !important; }
.bnav-item.active { color: var(--primary) !important; }
.bnav-item.active .bnav-icon-wrap {
  background: var(--primary-light) !important;
  border-radius: 10px !important;
  width: 44px !important;
  height: 26px !important;
}
.bnav-label { font-size: 9.5px !important; font-weight: 600 !important; letter-spacing: 0.02em !important; }
.bnav-item.active .bnav-label { color: var(--primary) !important; font-weight: 800 !important; }

/* Sidebar active: left accent bar */
.sidebar-item {
  border-radius: var(--r-sm) !important;
  margin: 1px 8px !important;
  width: calc(100% - 16px) !important;
  font-size: var(--text-sm) !important;
  color: var(--text-secondary) !important;
  font-weight: 500 !important;
}
.sidebar-item i { font-size: 16px !important; color: var(--text-muted) !important; }
.sidebar-item:hover { background: var(--sidebar-hover) !important; color: var(--text-primary) !important; }
.sidebar-item:hover i { color: var(--text-primary) !important; }
.sidebar-item.active {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
  font-weight: 700 !important;
  box-shadow: inset 3px 0 0 var(--primary) !important;
}
.sidebar-item.active i { color: var(--primary) !important; }

/* Top nav */

.top-nav.scrolled { box-shadow: var(--shadow-sm) !important; }

/* ── 9. Modal — one standard ── */
.modal-box {
  border-radius: var(--r-lg) !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: var(--shadow-lg) !important;
  overflow: hidden !important;
}
.modal-hd {
  padding: 14px 16px !important;
  background: var(--white) !important;
  border-bottom: 1px solid var(--border-light) !important;
  flex-shrink: 0 !important;
}
.modal-hd-icon {
  width: 34px !important; height: 34px !important;
  border-radius: var(--r-xs) !important;
  flex-shrink: 0 !important;
}

.modal-footer {
  padding: var(--modal-footer-padding) !important;
  background: var(--surface) !important;
  border-top: 1px solid var(--border-light) !important;
}
.modal-close {
  width: 32px !important; height: 32px !important;
  border-radius: var(--r-xs) !important;
  background: var(--surface) !important;
  border: 1px solid var(--border-light) !important;
  color: var(--text-muted) !important;
  flex-shrink: 0 !important;
}
.modal-close:hover { background: var(--border-light) !important; color: var(--text-primary) !important; }

/* ── 10. KPI / Stat cards ── */
.crm-kpi-grid .stat-card { padding: 14px !important; }
.crm-kpi-head span { font-size: var(--text-xs) !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; }
.crm-kpi-value { font-size: 1.4rem !important; font-weight: 800 !important; letter-spacing: -0.04em !important; }
.crm-kpi-icon { width: 32px !important; height: 32px !important; border-radius: var(--r-xs) !important; }

/* ── 11. Page header row ── */
.page-header-row {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
  flex-wrap: wrap !important;
}

/* ── 12. Empty states — SVG illustrations (icon wrap + CTA spacing; shell/title/sub below) ── */
.es-illustration { display: flex; justify-content: center; margin: 0 auto 14px; }
.es-illustration svg { max-width: 96px; height: auto; }
.es-icon-wrap {
  width: 52px !important; height: 52px !important;
  border-radius: var(--r-md) !important;
  background: var(--primary-light) !important;
  color: var(--primary) !important;
  font-size: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 14px !important;
}
.empty-state-cta { margin-top: 16px !important; }

/* ── 13. Filter tabs ── */
.ev-filter-tab {
  padding: 5px 14px !important;
  border-radius: var(--r-xs) !important;
  font-size: var(--text-xs) !important;
  font-weight: 700 !important;
  color: var(--text-muted) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition: background 60ms, color 60ms !important;
  font-family: inherit !important;
  letter-spacing: 0.02em !important;
}
.ev-filter-tab.active {
  background: var(--white) !important;
  color: var(--primary) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ── 14. Micro-interactions: button loading state ── */
.btn-loading {
  position: relative !important;
  pointer-events: none !important;
  opacity: 0.8 !important;
}
.btn-loading::after {
  content: '' !important;
  position: absolute !important;
  width: 14px !important; height: 14px !important;
  border: 2px solid rgba(255,255,255,0.35) !important;
  border-top-color: #fff !important;
  border-radius: 50% !important;
  animation: btnSpin 0.55s linear infinite !important;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }

/* ── 15. Settings rows ── */
.settings-row {
  border-radius: var(--r-sm) !important;
  transition: background 60ms !important;
}
.settings-row:hover { background: var(--surface) !important; }
.settings-row-label { font-size: var(--text-base) !important; font-weight: 600 !important; }
.settings-row-sub { font-size: var(--text-sm) !important; color: var(--text-muted) !important; }

/* ── 17. Bottom sheet ── */
#bottom-sheet, #page-form-panel {
  border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.10) !important;
}

/* ── 18. Toast ── */


/* ── 19. Page transitions — consolidated in primary block ── */
.screen { will-change: auto; }
.fade-in { animation: fadeIn 90ms ease-out both !important; }

/* ── 20. Lead card ── */
.lead-card-v2 {
  background: var(--white) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ── 21. Scrollbar — thin, native ── */
* { scrollbar-width: none !important; scrollbar-color: transparent transparent !important; }
::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }
::-webkit-scrollbar-track { background: transparent !important; }
::-webkit-scrollbar-thumb { background: transparent !important; }

/* ═══════════════════════════════════════════════════
   PAGE-BY-PAGE PROFESSIONAL IMPROVEMENTS
═══════════════════════════════════════════════════ */

/* ── Consistent page header pattern for all pages ── */
.page-header-row {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
  flex-wrap: wrap !important;
}
.page-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }

/* ── Search bar: consistent across all list pages ── */
.list-search-bar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--white) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  padding: 0 12px !important;
  height: 38px !important;
  box-shadow: var(--shadow-sm) !important;
  margin-bottom: 16px !important;
}
.list-search-bar:focus-within {
  border-color: var(--primary) !important;
  box-shadow: var(--shadow-focus) !important;
}
.list-search-bar .search-icon { color: var(--text-muted); font-size: 12px; flex-shrink: 0; }
.list-search-bar input {
  flex: 1 !important; border: none !important; background: transparent !important;
  outline: none !important; font-size: 13.5px !important; color: var(--text-primary) !important;
  height: 100% !important; padding: 0 !important; box-shadow: none !important;
  font-family: inherit !important;
}

/* ── Action button: icon+text on desktop/tablet, icon-only on small mobile ── */
.btn-icon-label { display: inline; }
.btn-icon-only  { display: none; }
@media (max-width: 480px) {
  .btn-icon-label { display: none !important; }
  .btn-icon-only  { display: inline !important; }
  .page-actions .btn-gold,
  .page-actions .btn-secondary { padding: 0 11px !important; min-width: 34px; }
}

/* ── Table wrapper: card shell ── */
.table-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.table-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
  background: var(--surface);
}
.table-card-header-title {
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── Status badge normalisation: ALL status chips use .badge system ── */
/* Override inline-style status pills on events, leads, quotations */
[style*="border-radius:20px"][style*="font-size:10"],
[style*="border-radius: 20px"][style*="font-size: 10"],
[style*="border-radius:100px"][style*="font-size:10"],
[style*="border-radius:24px"][style*="font-weight:600"] {
  height: 22px !important;
  min-height: 22px !important;
  line-height: 1 !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
}

/* ── KPI card consistent across ALL pages ── */
.stat-card .crm-kpi-head span,
.stat-card .layout-kpi-block__label {
  font-size: var(--text-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
}
.stat-card .crm-kpi-value,
.stat-card .layout-kpi-block__value {
  font-size: 1.45rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  margin: 4px 0 !important;
  font-family: 'Sora', 'Plus Jakarta Sans', sans-serif !important;
  font-variant-numeric: tabular-nums !important;
}

/* ── Events page: page-layout structure ── */
.events-page-sub { font-size: var(--text-sm); color: var(--text-muted); }
.ev-filter-row { margin-bottom: 16px; }
.ev-filter-scroll {
  display: flex; gap: 4px; overflow-x: auto; padding: 3px;
  background: var(--surface); border-radius: var(--r-sm);
  border: 1px solid var(--border-light);
  scrollbar-width: none;
}
.ev-filter-scroll::-webkit-scrollbar { display: none; }
.ev-filter-tab {
  padding: 6px 14px !important;
  border-radius: calc(var(--r-sm) - 2px) !important;
  font-size: var(--text-xs) !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  border: none !important;
  background: transparent !important;
  color: var(--text-muted) !important;
  cursor: pointer !important;
  transition: all 60ms !important;
  font-family: inherit !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.ev-filter-tab.active {
  background: var(--white) !important;
  color: var(--primary) !important;
  box-shadow: var(--shadow-sm) !important;
}
.ev-filter-count {
  font-size: 10px;
  font-weight: 800;
  background: var(--primary-light);
  color: var(--primary);
  padding: 1px 6px;
  border-radius: 100px;
  min-width: 18px;
  text-align: center;
}
.ev-filter-tab.active .ev-filter-count { background: rgba(91,108,248,0.15); }

/* ── Leads page: pipeline chip filters ── */
.lead-filter-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.lead-filter-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 100px;
  font-size: var(--text-xs); font-weight: 700;
  border: 1.5px solid var(--border);
  background: var(--white); color: var(--text-secondary);
  cursor: pointer; transition: all 60ms; font-family: inherit;
}
.lead-filter-chip.active {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary);
}
.lead-filter-chip .lfc-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.lead-filter-chip .lfc-count {
  font-size: 10px; font-weight: 800;
  padding: 1px 6px; border-radius: 100px;
  background: var(--surface-2); color: var(--text-muted);
}

/* ── Services page: grid cards ── */
.services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 16px; }
.service-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 100ms, border-color 100ms;
}
@media (hover:hover) {
  .service-card:hover {
    box-shadow: var(--shadow-md);
    border-color: rgba(91,108,248,0.2);
  }
}
.service-card-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-light);
  display: flex; align-items: center; justify-content: space-between;
}
.service-card-icon {
  width: 40px; height: 40px; border-radius: var(--r-xs);
  background: var(--primary-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.service-card-name { font-size: var(--text-md); font-weight: 700; color: var(--text-primary); }
.service-card-meta { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.service-card-body { padding: 10px 14px; }
.service-cat-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0; border-bottom: 1px solid var(--border-light);
}
.service-cat-row:last-child { border-bottom: none; }
.service-cat-name { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.service-cat-count { font-size: var(--text-xs); color: var(--text-muted); }
.service-add-cat-btn {
  width: 100%; margin-top: 8px; padding: 8px;
  border: 1.5px dashed var(--border); border-radius: var(--r-xs);
  background: none; cursor: pointer; font-size: var(--text-xs);
  color: var(--primary); font-weight: 700; font-family: inherit;
  transition: background 60ms, border-color 60ms;
}
.service-add-cat-btn:hover { background: var(--primary-light); border-color: var(--primary); }

/* ── Tasks: kanban board ── */
.tasks-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
.task-col {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  padding: 12px;
  min-height: 200px;
}
.task-col-header {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 10px; margin-bottom: 10px;
  border-bottom: 1px solid var(--border-light);
}
.task-col-title { font-size: var(--text-xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; }
.task-col-count {
  font-size: var(--text-xs); font-weight: 800;
  background: var(--white); color: var(--text-muted);
  padding: 2px 7px; border-radius: 100px;
  border: 1px solid var(--border-light);
}
.task-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--r-sm);
  padding: 12px 12px 10px;
  margin-bottom: 8px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  position: relative;
  transition: box-shadow 80ms, transform 80ms;
  border-left: 3px solid var(--task-accent, var(--border));
}
.task-card:hover { box-shadow: var(--shadow-md); transform: none; }
.task-card:hover .task-del-btn { opacity: 1 !important; }
.task-card-title { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.task-card-desc { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.5; margin-bottom: 8px; }
.task-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.task-priority {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 7px; border-radius: 100px;
}
.task-priority.high   { background: #fee2e2; color: #991b1b; }
.task-priority.medium { background: #fef3c7; color: #92400e; }
.task-priority.low    { background: #dcfce7; color: #15803d; }
.task-due { font-size: 10.5px; color: var(--text-muted); font-weight: 600; display: flex; align-items: center; gap: 3px; }
.task-due.overdue { color: var(--error); }
.task-assignee {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--primary); color: #fff;
  font-size: 9px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
@media (max-width: 768px) {

  .task-col { min-height: auto; }
}

/* ── Expenses: summary cards ── */
.exp-summary-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; margin-bottom: 18px;
}
.exp-summary-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
  border-left: 3px solid var(--card-accent, var(--border));
}
.exp-summary-label { font-size: var(--text-xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; color: var(--card-accent, var(--text-muted)); }
.exp-summary-value { font-size: 1.3rem; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; font-family: 'Sora', sans-serif; }
.exp-summary-sub { font-size: var(--text-xs); color: var(--text-muted); margin-top: 3px; }
@media (max-width: 500px) {

  .exp-summary-grid > *:last-child { grid-column: span 2; }
}

/* ── Reports: chart cards ── */
.report-chart-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.report-chart-card > div:first-child {
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--border-light) !important;
  display: flex; align-items: center; gap: 10px;
}
.report-chart-card > div:last-child { padding: 12px 0 !important; }

/* ── Company page: form sections ── */
.form-section {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
}
.form-section-title {
  font-size: var(--text-xs); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 12px 18px; border-bottom: 1px solid var(--border-light);
  background: var(--surface);
}
.form-section-body { padding: 18px; }

/* ── Vendors page: grid cards ── */
.vendors-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.vendor-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 100ms, border-color 100ms;
}
@media (hover: hover) {
  .vendor-card:hover { box-shadow: var(--shadow-md); border-color: rgba(91,108,248,0.2); }
}

/* ── Users page: clean list ── */
.user-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--border-light);
  background: var(--white); transition: background 60ms;
}
.user-row:last-child { border-bottom: none; }
.user-row:hover { background: var(--surface); }
.user-avatar {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #fff; flex-shrink: 0;
}
.user-name { font-size: var(--text-sm); font-weight: 700; color: var(--text-primary); }
.user-email { font-size: var(--text-xs); color: var(--text-muted); margin-top: 1px; }
.user-role-badge {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 8px; border-radius: 100px;
  font-size: 10.5px; font-weight: 700;
  background: var(--primary-light); color: var(--primary);
}

/* ── Settings page: grouped rows ── */
.settings-group {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
}
.settings-group-title {
  font-size: var(--text-xs); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted); padding: 10px 16px;
  border-bottom: 1px solid var(--border-light);
  background: var(--surface);
}
.settings-row { border-radius: 0 !important; border-bottom: 1px solid var(--border-light) !important; }
.settings-group .settings-row:last-child { border-bottom: none !important; }

/* ── Event list cards: premium consistent layout ── */
.event-card {
  background: var(--white) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: var(--r-md) !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
  margin-bottom: 10px !important;
}
.event-card-main { padding: 14px 16px; }
.event-card-actions {
  display: flex; gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid var(--border-light);
  background: var(--surface);
}

/* ── Vendors grid: remove inline styles ── */
.vendors-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 16px; }
.vendor-card-body { padding: 18px 20px; }
.vendor-contact-row {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--text-sm); color: var(--text-muted);
  padding: 3px 0;
}
.vendor-contact-row i { width: 16px; text-align: center; color: var(--primary); opacity: 0.6; font-size: 11px; }

/* ── Company page: 2-col grid ── */
.company-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 900px) { .company-settings-grid { grid-template-columns: 1fr; } }

/* ── KPI strip active state ── */
.quot-kpi-card.active {
  border: 2px solid var(--primary) !important;
  background: var(--primary-light) !important;
  box-shadow: 0 2px 12px rgba(91,108,248,0.15) !important;
}
.quot-kpi-card.active .crm-kpi-value { color: var(--primary) !important; }

/* ── Report progress bars ── */
.report-progress-row { margin-bottom: 14px; }
.report-progress-header { display: flex; justify-content: space-between; margin-bottom: 5px; }
.report-progress-label { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.report-progress-value { font-size: var(--text-sm); font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.report-progress-bar {
  height: 7px; background: var(--surface-2);
  border-radius: 4px; overflow: hidden;
}
.report-progress-fill {
  height: 100%; border-radius: 4px;
  transition: width 0.6s var(--ease-decelerate);
}

/* ── Quotations: desktop table header ── */
.quot-table-header {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border-light);
}
.quot-table-count { font-size: var(--text-xs); font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }

/* ── Lead card: tighter, cleaner ── */
.lead-card {
  background: var(--white) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: var(--r-md) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow 80ms !important;
}
@media (hover: hover) {
  .lead-card:hover { box-shadow: var(--shadow-md) !important; border-color: rgba(91,108,248,0.18) !important; }
}

/* ── Clients card: mobile view ── */
.client-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin-bottom: 8px;
  box-shadow: var(--shadow-sm);
}

/* ── Tasks: list view ── */
.task-list-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: var(--white);
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: background 60ms;
}
.task-list-row:hover { background: var(--surface); }
.task-list-row:last-child { border-bottom: none; }
.task-list-check {
  width: 18px; height: 18px; border-radius: 5px;
  border: 1.5px solid var(--border); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background 80ms, border-color 80ms;
}
.task-list-check.done { background: var(--success); border-color: var(--success); }
.task-list-check.done::after { content: '✓'; color: #fff; font-size: 10px; font-weight: 800; }

/* ── Expense list items ── */
.exp-list-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
  background: var(--white);
}
.exp-list-item:last-child { border-bottom: none; }
.exp-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
}
.exp-title { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.exp-meta { font-size: var(--text-xs); color: var(--text-muted); margin-top: 1px; }
.exp-amount { font-size: var(--text-sm); font-weight: 800; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.exp-debit  { color: var(--error); }
.exp-credit { color: var(--success); }

/* ── Notification panel: clean list ── */
.notif-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: background 60ms;
}
.notif-item:hover { background: var(--surface); }
.notif-item.unread { background: var(--primary-light); }
.notif-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--primary); flex-shrink: 0; margin-top: 5px;
}

/* ── Search highlight ── */
mark.search-hl {
  background: #FFF3CD;
  color: var(--text-primary);
  border-radius: 2px;
  padding: 0 1px;
}

/* ── Page-specific mobile tweaks ── */
@media (max-width: 768px) {

  .tasks-board { grid-template-columns: 1fr; }


  .quotations-mobile-cards { display: block !important; }
  .quotations-desktop-table { display: none !important; }
  .quot-kpi-mobile { grid-template-columns: repeat(2,1fr) !important; gap: 8px !important; }
}

/* ── Quotations KPI strip ── */
.quot-kpi-card {
  cursor: pointer !important;
  text-align: left !important;
  font-family: inherit !important;
  transition: box-shadow 80ms, border-color 80ms, background 80ms !important;
  -webkit-tap-highlight-color: transparent !important;
}
.quot-kpi-card:hover { box-shadow: var(--shadow-md) !important; }
.quot-kpi-card:active { transform: scale(0.97) !important; }
.quot-kpi-card:focus-visible { outline: none !important; }
.quot-kpi-card.active {
  border: 2px solid var(--primary) !important;
  background: var(--primary-light) !important;
  box-shadow: 0 2px 12px rgba(91,108,248,0.14) !important;
}
.quot-kpi-card.active 


/* ── Quotations mobile card accent ── */
.quot-mobile-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: 10px;
  display: flex;
}
.quot-card-accent { width: 4px; flex-shrink: 0; }
.quot-card-body { flex: 1; min-width: 0; padding: 12px 14px; }
.quot-card-qno { font-size: var(--text-xs); font-weight: 700; color: var(--primary); letter-spacing: 0.04em; }
.quot-card-client { font-size: var(--text-sm); font-weight: 700; color: var(--text-primary); margin: 2px 0; }
.quot-card-meta { font-size: var(--text-xs); color: var(--text-muted); }
.quot-card-right { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; padding: 12px 14px; flex-shrink: 0; }
.quot-card-amount { font-size: var(--text-sm); font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; font-family: 'Sora', sans-serif; }
.quot-card-actions { display: flex; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--border-light); background: var(--surface); }

/* ── Expenses: transaction list inside table-card ── */
.exp-txn-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
  transition: background 60ms;
}
.exp-txn-row:last-child { border-bottom: none; }
.exp-txn-row:hover { background: var(--surface); }

/* ── Tasks KPI strip ── */
#tasks-stats-grid { grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 16px; }
@media (max-width: 600px) {
  #tasks-stats-grid { grid-template-columns: repeat(2,1fr) !important; }
}

/* ── Roles page: role card row ── */
.role-card-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
}
.role-icon-wrap {
  width: 42px; height: 42px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ── Guests page: guest row in table-card ── */
.guest-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border-light);
}
.guest-row:last-child { border-bottom: none; }
.guest-row:hover { background: var(--surface); }

/* ── Event Types: accordion card ── */
.event-type-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: 10px;
}
.event-type-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: background 60ms;
}
.event-type-header:hover { background: var(--surface); }
.event-type-icon {
  width: 36px; height: 36px; border-radius: var(--r-xs);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0; background: var(--primary-light);
}
.event-type-name { font-size: var(--text-sm); font-weight: 700; color: var(--text-primary); }
.event-type-count { font-size: var(--text-xs); color: var(--text-muted); margin-top: 1px; }

/* ═══════════════════════════════════════════════════
   GALLERY PAGE — Premium Design
═══════════════════════════════════════════════════ */

/* Gallery page container — consistent padding, max-width */
.gallery-page-content {
  padding: 16px 14px 24px;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 0;
}
@media (min-width: 768px) {
  .gallery-page-content { padding: 20px 20px 32px; max-width: 1200px; margin: 0 auto; }
}

/* Hero banner */
.gallery-hero {
  background: var(--primary);
  border-radius: 22px; padding: 22px 20px;
  position: relative; overflow: hidden; margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.gallery-hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background: transparent;
}
.gallery-hero::after {
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0.04;
  background-image: linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
  background-size: 28px 28px;
}
.gallery-hero-inner { position:relative; z-index:1; }
.gallery-hero-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:14px; }
.gallery-hero-title { font-size:20px; font-weight:800; color:#fff; letter-spacing:-0.5px; margin:0 0 4px; }
.gallery-hero-sub { color:rgba(255,255,255,0.55); font-size:12.5px; margin:0; }
.gallery-hero-upload-btn {
  flex-shrink:0; display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:50px; border:1.5px solid rgba(255,255,255,0.22);
  background:rgba(255,255,255,0.12); backdrop-filter: none;
  color:#fff; font-size:12.5px; font-weight:700; cursor:pointer; font-family:inherit;
  white-space:nowrap; transition:all .15s; margin-top:2px;
}
.gallery-hero-upload-btn:active { transform:scale(0.94); }
.gallery-hero-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.gallery-stat-card {
  flex: 1;
  min-width: calc(50% - 4px);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 13px;
  padding: 10px 8px;
  text-align: center;
  box-sizing: border-box;
}
@media (min-width: 400px) {
  .gallery-stat-card { min-width: calc(25% - 6px); }
}
.gallery-stat-val { font-size: 20px; font-weight: 800; color: #fff; line-height: 1; }
.gallery-stat-lbl { font-size: 9px; color: rgba(255,255,255,0.5); font-weight: 700; margin-top: 3px; text-transform: uppercase; letter-spacing: 0.5px; }

/* Filter pills */
.gallery-cat-scroller {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 4px 0 10px;
  margin-bottom: 16px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.gallery-cat-scroller::-webkit-scrollbar { display: none; }
.gallery-cat-pill {
  flex-shrink:0; display:inline-flex; align-items:center; gap:5px;
  padding:6px 13px; border-radius:50px; border:1.5px solid rgba(0,0,0,0.08);
  background:rgba(255,255,255,0.9); cursor:pointer; font-size:12px; font-weight:600;
  color:var(--text-secondary); white-space:nowrap; font-family:inherit;
  box-shadow:0 1px 4px rgba(19,25,41,0.08);
  transition:all .14s; -webkit-tap-highlight-color:transparent;
}
.gallery-cat-pill:active { transform:scale(0.93); }
.gallery-cat-pill.active {
  background:var(--primary);
  color:#fff; border-color:transparent;
  box-shadow:0 2px 6px rgba(0,0,0,0.15);
}
.gpill-cnt {
  font-size:10px; font-weight:700; min-width:16px; height:16px;
  border-radius:8px; padding:0 4px;
  background:rgba(91,108,248,0.12); color:var(--primary);
  display:inline-flex; align-items:center; justify-content:center; line-height:1;
}
.gallery-cat-pill.active .gpill-cnt { background:rgba(255,255,255,0.2); color:#fff; }

/* Section wrapper */
.gallery-section {
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.5);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 20px;
  padding: 14px;
  margin-bottom: 14px;
  box-shadow: 0 4px 16px rgba(19,25,41,0.07);
  overflow: hidden;
}
.gallery-section:last-child { margin-bottom: 0; }
.gallery-section-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 10px;
  flex-wrap: wrap;
}
.gallery-section-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.gallery-svc-icon {
  width:34px; height:34px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; font-size:16px;
  background:rgba(255,255,255,0.9); border:1px solid rgba(0,0,0,0.06);
  box-shadow:0 2px 6px rgba(19,25,41,0.08);
}
.gallery-svc-name { font-size: 14px; font-weight: 800; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.gallery-svc-count {
  font-size:10px; font-weight:700; padding:2px 7px; border-radius:20px;
  background:rgba(91,108,248,0.1); color:var(--primary);
}
.gallery-svc-add {
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 12px; border-radius:50px; font-family:inherit;
  border:1.5px solid rgba(91,108,248,0.3); background:rgba(91,108,248,0.06);
  color:var(--primary); font-size:12px; font-weight:700; cursor:pointer;
  transition:all .13s; -webkit-tap-highlight-color:transparent;
}
.gallery-svc-add:active { transform:scale(0.93); background:rgba(91,108,248,0.12); }

/* Photo grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  width: 100%;
  min-width: 0;
}
@media (min-width: 400px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
}
@media (min-width: 600px) {
  .gallery-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
}
@media (min-width: 1024px) {
  .gallery-grid { grid-template-columns: repeat(5, 1fr); gap: 10px; }
}

/* Gallery card */
.gallery-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  cursor: pointer;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 2px 10px rgba(19,25,41,0.09);
  transition: transform .18s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
  min-width: 0;
}
.gallery-item.featured {
  grid-column: span 2;
  aspect-ratio: 16 / 10;
}
@media (max-width: 399px) {
  .gallery-item.featured { aspect-ratio: 16 / 9; }
}
.gallery-item:active { transform:scale(0.94); }
@media (hover:hover) {
  .gallery-item:hover { transform:scale(1.025); box-shadow:0 8px 24px rgba(19,25,41,0.14); }
  .gallery-item:hover .gitem-del { opacity:1; }
}
.gallery-item img, .gallery-item video {
  width:100%; height:100%; object-fit:cover; display:block; pointer-events:none;
}
.gallery-item-shade {
  position:absolute; bottom:0; left:0; right:0; height:55%;
  background:linear-gradient(0deg,rgba(4,6,20,0.7) 0%,transparent 100%);
  pointer-events:none;
}
/* Delete btn (top-right) */
.gitem-del {
  position:absolute; top:6px; right:6px; z-index:3;
  width:28px; height:28px; border-radius:8px;
  background:rgba(244,91,65,0.85); backdrop-filter: none;
  border:1px solid rgba(255,255,255,0.2); color:#fff; font-size:11px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,0.2);
  transition:opacity .12s;
}
@media (hover:hover) { .gitem-del { opacity:0; } }
/* ID badge (top-left) */
.gitem-id {
  position:absolute; top:6px; left:6px; z-index:3;
  font-size:9px; font-weight:800; letter-spacing:0.3px;
  color:rgba(255,255,255,0.88); font-family:monospace;
  background:rgba(0,0,0,0.45); backdrop-filter: none;
  border-radius:5px; padding:1px 5px;
}
/* Type badge (bottom-left) */
.gitem-type {
  position:absolute; bottom:6px; left:7px; z-index:3;
  font-size:9.5px; font-weight:800; letter-spacing:0.3px;
  color:#fff; background:rgba(0,0,0,0.45); backdrop-filter: none;
  border-radius:5px; padding:2px 6px;
}

/* Upload dropzone (modal only) */
.gallery-dropzone {
  border:2px dashed rgba(91,108,248,0.3); border-radius:18px;
  background:rgba(91,108,248,0.03); padding:32px 20px; text-align:center;
  cursor:pointer; position:relative; transition:all .18s;
}
.gallery-dropzone:hover, .gallery-dropzone.drag-over {
  border-color:var(--primary); background:rgba(91,108,248,0.07);
}
.gallery-dropzone input[type="file"] {
  position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; z-index:1;
}
.gallery-dz-icon {
  width:52px; height:52px; border-radius:15px; margin:0 auto 12px;
  background:var(--primary-light);
  border:1.5px solid rgba(91,108,248,0.2);
  display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--primary);
}
.gallery-dz-title { font-size:14.5px; font-weight:700; color:var(--text-primary); margin-bottom:4px; }
.gallery-dz-sub { font-size:12px; color:var(--text-muted); line-height:1.55; }

/* Empty state */
.gallery-empty {
  text-align:center; padding:44px 20px;
  background:rgba(255,255,255,0.7); border:1.5px dashed rgba(91,108,248,0.18);
  border-radius:20px;
}
.gallery-empty-icon { font-size:40px; margin-bottom:12px; display:block; }
.gallery-empty-title { font-size:15px; font-weight:800; color:var(--text-primary); margin-bottom:5px; }
.gallery-empty-sub { font-size:12.5px; color:var(--text-muted); margin-bottom:16px; line-height:1.5; }

/* Lightbox */
#gallery-lightbox {
  display:none; position:fixed; inset:0; z-index:9900;
  background:rgba(0,0,0,0.95); backdrop-filter: none; -webkit-backdrop-filter: none;
  align-items:center; justify-content:center; padding:64px 16px 80px;
}
#gallery-lightbox.open { display:flex; animation:lbIn .2s ease; }
@keyframes lbIn { from{opacity:0;transform:scale(0.94)} to{opacity:1;transform:none} }
.glb-media {
  max-width:100%; max-height:calc(100vh - 160px);
  border-radius:16px; object-fit:contain;
  box-shadow:0 24px 80px rgba(0,0,0,0.6);
}
/* Close */
.glb-close {
  position:absolute; top:16px; right:16px;
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.18);
  color:#fff; font-size:15px; cursor:pointer; z-index:1;
  display:flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
/* Delete from lightbox */
.glb-del-btn {
  position:absolute; top:16px; left:16px;
  width:38px; height:38px; border-radius:50%;
  background:rgba(244,91,65,0.8); border:1px solid rgba(255,255,255,0.15);
  color:#fff; font-size:13px; cursor:pointer; z-index:1;
  display:flex; align-items:center; justify-content:center;
}
/* Nav arrows */
.glb-arrow {
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.18);
  color:#fff; font-size:18px; cursor:pointer; z-index:1;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .15s, background .15s;
  -webkit-tap-highlight-color:transparent;
}
.glb-arrow:active { background:rgba(255,255,255,0.22); }
.glb-prev { left:12px; }
.glb-next { right:12px; }
@media (max-width:480px) { .glb-arrow{width:36px;height:36px;font-size:14px;} .glb-prev{left:4px;} .glb-next{right:4px;} }

/* Lightbox arrows: keep vertical centering even when the global
   `*:hover { transform:none !important }` rule fires on touch devices. */
#lb-prev-btn, #lb-next-btn,
.glb-arrow, .glb-prev, .glb-next {
  transform: translateY(-50%) !important;
}
#lb-prev-btn:hover, #lb-next-btn:hover,
#lb-prev-btn:active, #lb-next-btn:active,
#lb-prev-btn:focus, #lb-next-btn:focus,
.glb-arrow:hover, .glb-arrow:active, .glb-arrow:focus {
  transform: translateY(-50%) !important;
}
/* Info bar */
.glb-info {
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  background:rgba(255,255,255,0.07); backdrop-filter: none;
  border:1px solid rgba(255,255,255,0.1); border-radius:12px;
  padding:7px 16px; color:rgba(255,255,255,0.85); font-size:12px; font-weight:600;
  white-space:nowrap; max-width:90vw; overflow:hidden; text-overflow:ellipsis;
  display:flex; align-items:center; gap:8px; z-index:1;
}
.glb-info-sep { opacity:0.3; }

/* Progress bar (upload) */
.gallery-progress-bar { height:4px; border-radius:4px; background:rgba(91,108,248,0.12); overflow:hidden; margin-top:10px; }
.gallery-progress-fill { height:100%; background:var(--primary); border-radius:4px; transition:width .35s; }

/* ── End Gallery CSS ── */

/* ── City Autocomplete ── */
.city-ac-dropdown {
  position: absolute; z-index: 9999; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--white); border: 1.5px solid var(--primary);
  border-radius: 10px; box-shadow: 0 8px 28px rgba(91,108,248,0.15);
  max-height: 220px; overflow-y: auto;
}
.city-ac-item {
  padding: 9px 14px; cursor: pointer; font-size: 13.5px; color: var(--text-primary);
  transition: background 0.1s; display: flex; align-items: center; gap: 8px;
}
.city-ac-item:hover, .city-ac-item.active {
  background: var(--primary-light); color: var(--primary); font-weight: 600;
}
.city-ac-item::before { content: "📍"; font-size: 11px; opacity: 0.6; }
/* Hide on click-away - JS handles this but CSS as fallback */


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

/* Modal footer buttons — consistent sizing */
.modal-footer .btn-gold,
.modal-footer .btn-secondary,
.modal-footer .btn-ghost { min-width: 100px; }

/* Share PDF modal — selected option highlight */
.share-option:has(input:checked) { border-color: var(--primary) !important; background: var(--primary-light) !important; }

/* Page header action buttons */
.page-header-row .btn-gold { padding: 0 var(--btn-pad-x); font-size: var(--font-body-md); }

/* Icon-only nav buttons */
.nav-icon-btn {
  width: 36px; height: 36px; border-radius: 9px; border: none;
  background: transparent; cursor: pointer; color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; transition: background 0.12s, color 0.12s;
}
.nav-icon-btn:hover { background: var(--surface); color: var(--primary); }
.nav-icon-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Table action icon buttons */
.tbl-action-btn {
  width: 30px; height: 30px; border-radius: 7px; border: 1.5px solid var(--border);
  background: var(--surface); cursor: pointer; color: var(--text-secondary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; transition: background 0.09s; flex-shrink: 0;
}
.tbl-action-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.tbl-action-btn.danger:hover { border-color: var(--error); color: var(--error); background: var(--error-light); }


/* ── Gallery ── */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.gal-cat-chip { transition: background 0.15s, color 0.15s; }


/* ── Chat fullscreen ── */
.screen-container:has(.chat-root),
.page-content:has(.chat-root) { padding: 0 !important; }
@media (max-width: 900px) {
  .chat-root { border-radius: 0 !important; border-left: none !important; border-right: none !important; }
}


/* Prevent bnav labels from overflowing top nav */
#bottom-nav { z-index: 800 !important; }
.bnav-item { overflow: hidden; }
.bnav-label { font-size: 10px !important; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* Chat page — full height, no extra padding */
.screen-page[data-page="chat"] > .page-content,
.screen-page[data-page="chat"] { padding: 0 !important; }
.chat-root { height: calc(100vh - 88px) !important; }
@media (max-width: 900px) {
  .chat-root {
    height: calc(100vh - 116px) !important;
    border-radius: 0 !important;
    border-left: none !important; border-right: none !important;
  }
}

/* Gallery fullscreen */
.screen-page[data-page="gallery"] { padding: 0 !important; }


/* ── Gallery & Chat fullscreen pages ── */
/* Remove page content padding for fullscreen pages */
#page-content.page-gallery,
#page-content.page-chat { padding: 0 !important; }

/* Gallery tabs no scrollbar */
.gallery-svc-tabs::-webkit-scrollbar { display: none; }
.gallery-svc-tabs { -ms-overflow-style: none; scrollbar-width: none; }

/* Chat fullscreen height */
.chat-root {
  height: calc(100vh - 88px);
  min-height: 400px;
}
@media (max-width: 900px) {
  .chat-root {
    height: calc(100vh - 120px) !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
  }
}

/* ══════════════════════════════════════════
   FULLSCREEN MODE — Gallery & Chat
   Hides global top-nav and bottom-nav,
   pages render their own clean header
══════════════════════════════════════════ */
body.fullscreen-page .top-nav           { display: none !important; }
body.fullscreen-page 
body.fullscreen-page .app-body          { margin-top: 0 !important; }
body.fullscreen-page .screen            { padding: 0 !important; }
body.fullscreen-page .chat-root         { height: calc(100vh - 57px) !important; }
/* Gallery padding is on .gallery-page-content */

/* Fullscreen in-page header bar */
.fs-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  height: 56px;
  min-height: 56px;
  background: rgba(255,255,255,0.97);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid rgba(221,228,240,0.65);
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 1px 0 rgba(221,228,240,0.5), 0 2px 12px rgba(19,25,41,0.06);
  flex-shrink: 0;
}
.fs-page-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.4px;
  flex: 1;
  text-align: center;
}
.fs-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 15px;
  color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.fs-icon-btn:hover { background: var(--primary-light); }

/* ═══════════════════════════════════════════════════════
   PREMIUM CRM REDESIGN — unified language overrides
═══════════════════════════════════════════════════════ */
#app-shell.active {
  background: var(--bg-gradient);
}
.nav-logo-box,.nav-mobile-logo-box {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-light) !important;
}
.avatar {
  background: var(--primary) !important;
}
.main-area {
  background: var(--gmail-bg) !important;
}
.screen {
  padding: 22px !important;
}
body.fullscreen-page 
.sidebar {
  background: #ffffff !important;
  border-right: 1px solid var(--border-light) !important;
}
.sidebar-section {
  color: var(--text-secondary) !important;
}
.sidebar-item {
  color: var(--text-primary) !important;
  border: none !important;
  border-radius: 0 24px 24px 0 !important;
}
.sidebar-item:hover {
  background: var(--sidebar-hover) !important;
}
.sidebar-item.active {
  background: var(--sidebar-active) !important;
  color: var(--primary) !important;
  box-shadow: none !important;
}
.sidebar-item.active i {
  color: var(--primary) !important;
}
.card,.stat-card,.vendor-card,.event-card,.task-card,.lead-card,.quot-kpi-card,
.clients-desktop-view,.table-wrap,#notification-panel,.dropdown,.modal-box,
#pf-sheet,#bottom-sheet,#more-menu-sheet,.chat-root {
  border: 1px solid var(--border) !important;
  box-shadow: var(--elevation-1) !important;
  background: var(--bg-card) !important;
}
.data-table thead th {
  background: #f5f3fc !important;
  color: #6d6b86 !important;
  border-bottom: 1px solid var(--border) !important;
}
.data-table tbody tr:hover {
  background: #faf7ff !important;
}
.btn-gold,.btn-primary {
  background: var(--primary) !important;
  border: none !important;
  box-shadow: 0 8px 20px rgba(122,140,255,0.35) !important;
}
.btn-secondary,.btn-outline {
  background: #ffffff !important;
  border: 1px solid #ddd7ef !important;
  color: #4d4f6b !important;
}
.btn-ghost {
  color: #6a6890 !important;
}
.form-input {
  background: #fcfbff !important;
  border-color: #dfdaf1 !important;
}
.form-input:focus {
  border-color: #9aa6ff !important;
  box-shadow: 0 0 0 3px rgba(153, 170, 255, 0.18) !important;
}
.badge {
  border: 1px solid transparent;
}
.page-title {
  font-size: 1.65rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  color: var(--text-primary) !important;
}
.page-sub {
  color: var(--text-muted) !important;
  font-weight: 500 !important;
}

/* ═══ Dashboard Hero — Clean, sharp, native-style ═══ */
/* [hero CSS moved to redesigned block] */

/* ═══ KPI Grid — Unified (Dashboard, Quotations, Leads, Reports) ═══ */
.crm-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--section-gap); margin-bottom: var(--space-4); }
.crm-kpi-grid .stat-card {
  padding: var(--card-padding) !important;
  min-height: var(--kpi-card-min-height) !important;
  border-radius: var(--radius-card) !important;
  border: 1px solid var(--glass-border-subtle) !important;
  box-shadow: var(--card-shadow) !important;
  transition: box-shadow 0.2s, border-color 60ms, transform 0.12s !important;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.crm-kpi-grid .stat-card:hover { box-shadow: var(--card-shadow-hover) !important; border-color: var(--glass-border) !important; }
.crm-kpi-grid .kpi-card-clickable:active { transform: scale(0.98) !important; }
.crm-kpi-grid .crm-kpi-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.crm-kpi-grid .crm-kpi-head span { font-size: 10px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.crm-kpi-grid .crm-kpi-icon {
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0;
}
.crm-kpi-grid .crm-kpi-value { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.03em; color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1.1; }
.crm-kpi-grid .crm-kpi-sub { margin-top: 4px; font-size: 10px; color: var(--text-muted); display: flex; gap: 4px; align-items: center; }
.crm-kpi-grid .crm-kpi-sub.ok { color: var(--success); font-weight: 600; }
@media (max-width: 768px) {
  .crm-kpi-grid { gap: var(--space-2); margin-bottom: var(--space-3); }
  .crm-kpi-grid .stat-card { padding: var(--space-2) !important; min-height: var(--kpi-card-min-height) !important; }
  .crm-kpi-grid .crm-kpi-icon { width: 26px; height: 26px; font-size: 11px; }
  .crm-kpi-grid .crm-kpi-value { font-size: 1.15rem; }
  #dash-kpi-grid, #quot-kpi-strip, #leads-kpi-grid, #tasks-stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
}


/* Legacy crm-kpi-card — compatibility, aligned to design system */
.crm-kpi-card {
  position: relative;
  padding: var(--space-3) !important;
  min-height: 108px;
  overflow: hidden;
  border-radius: var(--radius-card) !important;
  border: 1px solid var(--glass-border-subtle) !important;
  background: var(--glass-bg) !important;
  box-shadow: var(--card-shadow) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: transform 0.1s ease, box-shadow 0.12s ease !important;
}
.crm-kpi-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.crm-kpi-head span { font-size: .8rem; color: var(--text-muted); font-weight: 600; }
.crm-kpi-icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(91,108,248,0.08); }
.crm-kpi-value { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.crm-kpi-sub { margin-top: 10px; font-size: .78rem; color: var(--text-muted); display: flex; gap: 6px; align-items: center; }
.crm-kpi-sub.ok { color: var(--success); font-weight: 600; }
.crm-kpi-accent { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 0 0 16px 16px; opacity: 0.9; }

/* Quot/Leads/Reports KPI grids — same compact stat-card style */
#quot-kpi-strip, #leads-kpi-grid { grid-template-columns: repeat(4, 1fr); }
.reports-kpi-grid { grid-template-columns: repeat(5, 1fr); }
.reports-kpi-grid .stat-card { padding: var(--card-padding) !important; }
/* Report chart cards — same consistent sizing as app cards */
.report-chart-card {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border-subtle) !important;
  border-radius: var(--radius-card) !important;
  overflow: hidden;
  box-shadow: var(--card-shadow) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.report-chart-card > div:first-child { padding: var(--space-3) var(--space-4) !important; border-bottom: 1px solid var(--border) !important; }
.report-chart-card > div:last-child { padding: var(--space-3) !important; }
/* Gallery stats — native kpi style */
.gallery-stat-card,
.gallery-hero-stats .gallery-stat-card {
  padding: 16px !important;
  min-height: 112px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(91,108,248,0.1) !important;
  background: var(--white) !important;
  box-shadow: 0 2px 14px rgba(0,0,0,0.04), 0 1px 4px rgba(0,0,0,0.02) !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease !important;
}
.gallery-stat-card:hover,
.gallery-stat-card:active {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(91,108,248,0.12), 0 4px 14px rgba(0,0,0,0.06) !important;
}
.gallery-stat-val { font-size: 1.85rem !important; font-weight: 800 !important; color: var(--text-primary) !important; font-variant-numeric: tabular-nums !important; letter-spacing: -0.03em !important; }
.gallery-stat-lbl { font-size: .78rem !important; color: var(--text-muted) !important; font-weight: 600 !important; margin-top: 8px !important; }

.crm-highlight {
  border: 1px solid rgba(245,166,35,0.15);
  background: linear-gradient(135deg, #fffef9 0%, #fffbf5 100%);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 14px;
  box-shadow: 0 1px 6px rgba(245,166,35,0.06);
}
.crm-highlight-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.crm-highlight-head h3 { font-size: 14px; font-weight: 700; margin: 0; color: var(--text-primary); }
.crm-highlight-head p { margin: 2px 0 0; font-size: 12px; color: var(--text-muted); }
.crm-highlight-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 2px;
}
.crm-highlight-item {
  width: 100%;
  border: 1px solid rgba(245,166,35,0.18);
  border-radius: 8px;
  background: var(--white);
  padding: 10px 12px;
  min-height: 56px;
  display: flex;
  gap: 10px;
  align-items: center;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: box-shadow 0.2s ease, border-color 60ms ease;
  flex-shrink: 0;
}
.crm-highlight-item:hover, .crm-highlight-item:active { box-shadow: 0 2px 10px rgba(245,166,35,0.12); border-color: rgba(245,166,35,0.3); }
.crm-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.crm-highlight-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; justify-content: center; }
.crm-highlight-main strong { color: var(--text-primary); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.crm-highlight-main small { color: var(--text-muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.crm-highlight-meta { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex-shrink: 0; }
.crm-highlight-meta strong { color: var(--primary); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.crm-highlight-meta small { color: var(--text-muted); font-size: 10px; }

.crm-main-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 12px; }
.crm-panel {
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--border-light);
  background: var(--white);
  box-shadow: var(--card-shadow);
  transition: box-shadow 0.2s ease, border-color 60ms ease;
}
.crm-panel:hover { box-shadow: var(--card-shadow-hover); border-color: var(--border); }
.crm-panel-head { padding: var(--space-3) var(--space-4); display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-light); background: var(--surface); }
.crm-panel-head h3 { margin: 0; font-size: var(--font-title-sm); font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; }
.crm-qno { color:var(--primary); font-weight:700; }
.crm-upcoming-list { padding: 2px 0; }
.crm-upcoming-item {
  width:100%; border:0; border-bottom:1px solid var(--border-light); background:transparent; padding:10px 12px;
  display:flex; gap:10px; align-items:center; text-align:left; cursor:pointer; font-family:inherit;
}
.crm-upcoming-item:hover { background: var(--surface); }
.crm-upcoming-date {
  width:40px; height:40px; border-radius:10px; background: var(--color-primary-container); color: var(--primary);
  display:flex; flex-direction:column; align-items:center; justify-content:center; flex-shrink:0;
}
.crm-upcoming-date strong { font-size: 14px; line-height: 1; font-weight: 700; }
.crm-upcoming-date small { font-size: 10px; letter-spacing: .05em; color: var(--text-muted); }
.crm-upcoming-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.crm-upcoming-main strong { font-size: 13px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.crm-upcoming-main small { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-upcoming-days { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.crm-upcoming-days.urgent { color:#da7e8f; }
.crm-upcoming-days.soon { color:#d79a73; }
.crm-empty {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--text-muted); min-height:120px; font-weight:500; font-size: 13px;
}
.crm-empty i { font-size: 32px; opacity: 0.5; }

/* ═══ Empty state inside data tables ═══ */
.data-table .empty-state-cell { padding: var(--space-6) var(--space-4) !important; vertical-align: middle !important; }
.data-table .empty-state-cell .empty-state { min-height: 120px; padding: var(--space-4); }

/* ═══ Typography hierarchy (design tokens) ═══ */
.section-title { font-size: var(--font-title-sm); font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
.card-title { font-size: var(--font-body-md); font-weight: 600; color: var(--text-primary); }

/* ═══ Amount/numbers — right-align + tabular ═══ */
.amount-cell, .text-amount, .dash-rq-amount, .crm-highlight-meta strong { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .amount-cell, .data-table td:nth-child(5) { text-align: right !important; font-variant-numeric: tabular-nums; }

/* ═══ Form validation — inline error below field ═══ */
.field-error { font-size: 11px; color: var(--error); margin-top: 4px; display: none; }
.field-error.visible { display: block; }
.form-input.is-error {
  border-color: var(--error) !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.12) !important;
}
.form-input.is-error + .field-error,
.form-input.is-error ~ .field-error { display: block !important; }

/* ═══ Wizard validation ═══ */
@keyframes wiz-shake {
  0%,100% { transform: translateX(0); }
  15%      { transform: translateX(-6px); }
  30%      { transform: translateX(5px); }
  45%      { transform: translateX(-4px); }
  60%      { transform: translateX(3px); }
  75%      { transform: translateX(-2px); }
}
.wiz-shake { animation: wiz-shake 0.4s ease; }
.wiz-field-error {
  font-size: 11px; color: var(--error); margin-top: 4px;
  display: none; align-items: center; gap: 4px;
}
.wiz-field-error.visible { display: flex; }
.wiz-field-error::before { content: '\f071'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 9px; }
.wiz-input-wrap { position: relative; }
.wiz-block-error {
  display: none; margin-top: 6px; padding: 7px 10px;
  background: rgba(239,68,68,0.07); border: 1px solid rgba(239,68,68,0.25);
  border-radius: 8px; font-size: 11.5px; color: var(--error);
  align-items: center; gap: 6px;
}
.wiz-block-error.visible { display: flex; }
.wiz-block-error::before { content: '\f071'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 10px; flex-shrink: 0; }

/* ═══ List search bar — consistent across list pages ═══ */
.list-search-bar {
  display: flex; align-items: center; gap: var(--space-2);
  background: var(--white); border: 1px solid var(--border-light); border-radius: var(--radius-card);
  padding: var(--space-2) var(--space-4); margin-bottom: var(--space-3); box-shadow: var(--card-shadow);
}
.list-search-bar .search-input-wrap { flex: 1; min-width: 0; display: flex; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-input); overflow: hidden; }
.list-search-bar .search-input-wrap input { flex: 1; border: none !important; background: transparent !important; padding: 0 var(--space-3); height: var(--input-height); font-size: var(--font-body-md); }
.list-search-bar .search-icon { width: var(--input-height); min-width: var(--input-height); height: var(--input-height); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: var(--font-body-md); }


/* ── Keyboard above-fold fix ─────────────────────────────────────────────── */
/* When virtual keyboard is open, JS sets --keyboard-h.
   Any sticky footer inside .screen stays above keyboard. */
:root { --keyboard-h: 0px; }

/* Wizard footer rows in screens — lift above keyboard */
.screen .wiz-footer,
.screen [class*="footer-row"],
#ws-1 > div:last-child,
#ws-2 > div:last-child,
#ws-3 > div:last-child,
#ws-4 > div:last-child {
  position: sticky;
  bottom: 0;
  background: var(--bg-page);
  padding-top: 8px;
  margin-top: auto;
  z-index: 4;
}

/* Ensure modals with input forms don't clip footer on iOS */
@supports (-webkit-touch-callout: none) {
  #pf-sheet { max-height: 92svh; }
  .modal-box { max-height: 92svh; }
}

/* Input scroll — when field focused, ensure it scrolls into view */
#pf-body input:focus,
#pf-body textarea:focus,
#pf-body select:focus {
  scroll-margin-bottom: 80px;
}
.modal-body input:focus,
.modal-body textarea:focus,
.modal-body select:focus {
  scroll-margin-bottom: 80px;
}

/* ─── Card tap feedback ─── */
.event-card:active,.quot-mobile-card:active,.lead-card:active,.vendor-card:active,.task-card:active {
  transform: scale(0.987) !important;
  transition: transform 80ms cubic-bezier(0.34,1.56,0.64,1) !important;
}
.stat-card.kpi-card-clickable:active { transform: scale(0.975) !important; }

/* ─── Table hover states ─── */
.data-table tbody tr { transition: background 80ms; }
.data-table tbody tr:hover { background: var(--surface) !important; }
body.dark-mode .data-table tbody tr:hover { background: rgba(255,255,255,0.03) !important; }

/* ─── Event filter count pill ─── */
.ev-filter-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 15px; padding: 0 4px; border-radius: 8px;
  background: rgba(0,0,0,0.07); font-size: 9px; font-weight: 700; margin-left: 3px;
}
.ev-filter-tab.active .ev-filter-count { background: rgba(91,108,248,0.18); color: var(--primary); }

/* ─── Task col title colors ─── */
.task-col-title--todo { color: #1a73e8 !important; }
.task-col-title--prog { color: var(--warning) !important; }
.task-col-title--done { color: var(--success) !important; }

/* ─── Dark mode extras ─── */
body.dark-mode .settings-row:active { background: rgba(91,108,248,0.15) !important; }
body.dark-mode .ev-filter-count { background: rgba(255,255,255,0.08) !important; }
body.dark-mode .crm-hero-btn-secondary { background: rgba(255,255,255,0.12) !important; }
body.dark-mode .quot-card-meta { color: var(--text-muted) !important; }

/* ═══ Confirm as compact bottom sheet ═══ */
#modal-confirm { align-items: flex-end !important; }
#modal-confirm .modal-box {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 60vh !important;
  min-height: unset !important;
  border-radius: 14px 14px 0 0 !important;
  margin: 0 !important;
  padding-bottom: env(safe-area-inset-bottom) !important;
  animation: sheetSlideUp 0.28s cubic-bezier(0.32, 0.72, 0, 1) !important;
}
#modal-confirm .modal-hd { padding: 20px 20px 14px; }
#modal-confirm .modal-body { padding: 0 20px 8px !important; }
#modal-confirm .modal-footer { padding: 10px 20px 20px; gap: 10px; }

/* ═══ Recent Quotations — premium card layout ═══ */
.dash-recent-quote-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-1) 0;
}
.dash-rq-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  margin: 0;
  border: none;
  border-radius: 8px;
  background: var(--white);
  border: 1px solid var(--border-light);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: box-shadow 0.2s var(--ease-out), border-color 0.2s, background 60ms;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.dash-rq-row:hover { border-color: var(--border); box-shadow: var(--card-shadow); }
.dash-rq-row:active { background: var(--surface); }
.dash-rq-row:last-child { margin-bottom: 0; }
.dash-rq-accent {
  width: 4px;
  min-height: var(--touch-target);
  border-radius: 2px;
  flex-shrink: 0;
}
.dash-rq-avatar {
  width: var(--touch-target);
  height: var(--touch-target);
  border-radius: var(--radius-md);
  flex-shrink: 0;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dash-rq-info { flex: 1; min-width: 0; }
.dash-rq-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.dash-rq-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 4px;
}
.dash-rq-right {
  flex-shrink: 0;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.dash-rq-amount {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.dash-rq-status-pill {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

@media (max-width: 1024px) {
  .crm-kpi-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .crm-main-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .screen { padding: 8px 12px calc(12px + env(safe-area-inset-bottom, 0px)) !important; }
  .dashboard-page .crm-hero {
    flex-direction: column;
    align-items: stretch;
    padding: 20px 18px;
    gap: 18px;
    border-radius: var(--radius-card);
  }
  .crm-hero-left { flex-direction: row; flex: none; }
  .crm-hero-avatar { width: 52px; height: 52px; font-size: 1.2rem; }
  .crm-hero-title { font-size: 1.3rem; }
  .crm-hero-actions {
    width: 100%;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }
  .crm-hero-actions .btn-secondary,
  .crm-hero-actions .btn-gold {
    width: 100%;
    flex: 1 1 auto;
    justify-content: center;
    min-height: 46px;
    padding: 12px 18px;
  }
  .dash-quot-table { overflow-x: auto; }
  .crm-kpi-grid { gap: var(--section-gap) !important; }
  .crm-kpi-card { padding: var(--card-padding-mobile) !important; min-height: var(--kpi-card-min-height) !important; }
}

/* ═══════════════════════════════════════════════════════
   COMPACT NATIVE SYSTEM v2 (uniform across all pages)
═══════════════════════════════════════════════════════ */
body.app-compact-native .main-area { padding: var(--page-padding) !important; }
/* app-body margin handled by mobile media query */
body.app-compact-native #screen-container { max-width: var(--content-max-w); margin: 0 auto; width: 100%; }
body.app-compact-native .screen {
  padding: var(--page-padding-mobile) !important;
  padding-bottom: 0 !important;
}
@media (min-width: 768px) {
  body.app-compact-native #screen-container { max-width: var(--content-max-w-tablet); }
}
body.app-compact-native.fullscreen-page 

body.app-compact-native .top-nav {
  min-height: var(--nav-height) !important;
  top: -2px !important;
  height: calc(var(--nav-height) + var(--safe-top) + 2px) !important;
  padding-top: calc(var(--safe-top) + 2px) !important;
  border-radius: 0 !important;
  background: var(--bg-card) !important;
  border-bottom: 1px solid var(--border-light);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}

body.app-compact-native .sidebar {
  border-radius: 0 !important;
  padding: 10px !important;
  box-shadow: none !important;
}
body.app-compact-native .sidebar-item {
  min-height: 40px !important;
  padding: 8px 11px !important;
  gap: 10px !important;
  font-size: 12.8px !important;
}
body.app-compact-native .sidebar-item i { font-size: 13px !important; }
body.app-compact-native .sidebar-user-card {
  padding: 8px !important;
  border-radius: 8px !important;
}

body.app-compact-native .native-page-header,
body.app-compact-native .page-header-row {
  margin-bottom: var(--section-gap) !important;
  gap: var(--space-2) !important;
}
body.app-compact-native .page-title,
body.app-compact-native .page-title-wrap .page-title {
  font-size: var(--font-lg) !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
  color: var(--text-primary) !important;
}
body.app-compact-native .page-sub,
body.app-compact-native .page-subtitle,
body.app-compact-native .page-title-wrap .page-sub {
  font-size: var(--font-sm) !important;
  margin-top: 2px !important;
  color: var(--text-muted) !important;
}

body.app-compact-native .native-surface-card,
body.app-compact-native .card,
body.app-compact-native .stat-card,
body.app-compact-native .vendor-card,
body.app-compact-native .event-card,
body.app-compact-native .task-card,
body.app-compact-native .lead-card-v2,
body.app-compact-native .quot-kpi-card,
body.app-compact-native .clients-desktop-view,
body.app-compact-native .settings-wrap,
body.app-compact-native .settings-card {
  border-radius: var(--radius-card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--card-shadow) !important;
}

body.app-compact-native .native-table-wrap,
body.app-compact-native .table-wrap {
  border-radius: var(--radius-card) !important;
  overflow: auto !important;
}
body.app-compact-native .native-data-table,
body.app-compact-native .data-table {
  font-size: 12.4px !important;
}
body.app-compact-native .data-table thead th {
  font-size: var(--font-xs) !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  padding: var(--space-2) var(--space-3) !important;
  color: var(--text-muted) !important;
}
body.app-compact-native .data-table tbody td {
  padding: var(--space-2) var(--space-3) !important;
  vertical-align: middle !important;
  font-size: var(--font-sm) !important;
}

body.app-compact-native .form-label {
  font-size: var(--font-xs) !important;
  font-weight: 600 !important;
  letter-spacing: .03em !important;
  color: var(--text-muted) !important;
  margin-bottom: var(--space-1) !important;
}
body.app-compact-native .form-input {
  height: var(--input-height) !important;
  min-height: var(--input-height) !important;
  font-size: var(--font-base) !important;
  border-radius: var(--radius-input) !important;
  border-color: var(--border) !important;
  padding: 0 var(--space-3) !important;
}
body.app-compact-native textarea.form-input {
  min-height: 84px !important;
  padding: 10px 11px !important;
}
body.app-compact-native .native-form-grid,
body.app-compact-native .form-grid-2 {
  gap: 10px !important;
}

body.app-compact-native .btn-gold,
body.app-compact-native .btn-secondary,
body.app-compact-native .btn-ghost,
body.app-compact-native .btn-danger,
body.app-compact-native .btn-outline {
  height: var(--btn-height) !important;
  min-height: var(--btn-height) !important;
  border-radius: var(--radius-btn) !important;
  font-size: var(--font-sm) !important;
  font-weight: 600 !important;
  gap: var(--space-2) !important;
  padding: 0 var(--space-3) !important;
}
body.app-compact-native .native-btn-sm,
body.app-compact-native .btn-sm {
  height: var(--btn-height-sm) !important;
  min-height: var(--btn-height-sm) !important;
  padding: 0 var(--space-2) !important;
  font-size: var(--font-xs) !important;
  border-radius: var(--radius-btn-sm) !important;
}

body.app-compact-native .native-settings-row,
body.app-compact-native .settings-row {
  min-height: 44px !important;
  padding: var(--space-2) var(--space-3) !important;
  border-radius: var(--radius-card) !important;
}
body.app-compact-native .settings-row-label { font-size: var(--font-base) !important; }
body.app-compact-native .settings-row-sub { font-size: var(--font-xs) !important; }

body.app-compact-native 
body.app-compact-native .bnav-item {
  padding-top: var(--space-1) !important;
  gap: 2px !important;
}
body.app-compact-native .bnav-item .bnav-label {
  font-size: var(--font-xs) !important;
  font-weight: 600 !important;
}
body.app-compact-native .bnav-item.active .bnav-icon-wrap {
  background: var(--primary-light) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-btn) !important;
}

@media (max-width: 1024px) {
  body.app-compact-native .screen { padding: 8px 12px calc(12px + env(safe-area-inset-bottom, 0px)) !important; }
}
@media (max-width: 768px) {
  body.app-compact-native .main-area {
    padding: 0 !important;
    
  }
  body.app-compact-native .screen {
    padding: var(--page-padding-mobile) !important;
    padding-bottom: 0 !important;
  }
  body.app-compact-native .page-title { font-size: var(--font-md) !important; }
  body.app-compact-native .card,
  body.app-compact-native .stat-card,
  body.app-compact-native .vendor-card,
  body.app-compact-native .event-card,
  body.app-compact-native .task-card,
  body.app-compact-native .lead-card-v2 {
    border-radius: var(--radius-card) !important;
  }
}

body.app-compact-native 
body.app-compact-native .card,
body.app-compact-native .stat-card,
body.app-compact-native .vendor-card,
body.app-compact-native .event-card,
body.app-compact-native .task-card,
body.app-compact-native .lead-card-v2 {
  border-radius: var(--radius-card) !important;
  box-shadow: var(--card-shadow) !important;
}
body.app-compact-native .btn-gold,
body.app-compact-native .btn-secondary,
body.app-compact-native .btn-ghost,
body.app-compact-native .btn-danger,
body.app-compact-native .btn-outline {
  border-radius: var(--radius-btn) !important;
}
body.app-compact-native .form-input {
  border-radius: var(--radius-input) !important;
}
.form-input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(91,108,248,0.12) !important;
  outline: none !important;
}

/* Remove extra bar above bottom tabs */
#bottom-nav::before,
#bottom-nav::after,
#bottom-nav-items::before,
#bottom-nav-items::after {
  content: none !important;
  display: none !important;
}


/* Notification detail: full-screen modal */
#modal-notification-detail {
  align-items: stretch !important;
  padding: 0 !important;
}
#modal-notification-detail .modal-box {
  width: 100% !important;
  max-width: 100% !important;
  height: 100vh !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
  border: none !important;
}
#notif-detail-body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-primary);
  white-space: pre-wrap;
}
#notif-detail-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
}
#notif-detail-time, #notif-detail-meta {
  font-size: 12px;
  color: var(--text-muted);
}

/* Chat modal shell */
#modal-chat .modal-box {
  width: min(1180px, 100%) !important;
  max-width: 1180px !important;
  height: min(86vh, 820px) !important;
  max-height: 86vh !important;
  padding: 0 !important;
  overflow: hidden !important;
}
#modal-chat .modal-hd {
  border-bottom: 1px solid var(--border-light);
}
.chat-modal-root {
  display: flex;
  height: calc(86vh - 70px);
  min-height: 420px;
  overflow: hidden;
  background: var(--surface-2);
}
.chat-modal-root .chat-sidebar {
  width: 320px !important;
  min-width: 320px !important;
}
.chat-modal-root #chat-messages-container {
  background: #f8f7fd !important;
}
#modal-chat,
#modal-chat .modal-box,
#modal-chat .modal-body,
.chat-modal-root,
.chat-modal-root #chat-messages-container,
.chat-modal-root .chat-sidebar {
  overscroll-behavior: contain !important;
  overscroll-behavior-y: contain !important;
}
html.chat-modal-open,
body.chat-modal-open {
  overscroll-behavior-y: none !important;
  overflow: hidden !important;
}
@media (max-width: 900px) {
  #modal-chat .modal-box {
    width: 100% !important;
    height: 92vh !important;
    max-height: 92vh !important;
    border-radius: 18px 18px 0 0 !important;
  }
  .chat-modal-root {
    height: calc(92vh - 66px);
  }
  .chat-modal-root .chat-sidebar {
    width: 100% !important;
    min-width: 100% !important;
    border-right: none !important;
  }
}

/* Step 3 item cards */
#ws-3 .cat-item {
  border-radius: 8px !important;
  padding: 10px !important;
}

/* App-wide alignment cleanup */
.page-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.page-header-row > div:first-child {
  min-width: 0;
}
.page-header-row > button,
.page-header-row > div:last-child > button {
  height: 34px;
}

/* Frame balance: keep bottom spacing tighter above tab bar */
body.app-compact-native #app-shell.active 
/* Remove bottom padding/frame on pages without tab bar (secondary pages) */
body.mobile-secondary-page #app-shell.active .main-area,
body.mobile-secondary-page 
body.mobile-secondary-page 

/* ═══════════════════════════════════════════════════════
   SPLASH SCREEN — Native app launch (Play Store / App Store)
═══════════════════════════════════════════════════════ */
#splash-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  padding: var(--safe-top) var(--safe-bottom);
  transition: opacity 0.4s var(--ease-out), visibility 0.4s;
}
#splash-screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.splash-icon-wrap {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 4px 24px rgba(91,108,248,0.15), 0 1px 4px rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  opacity: 0;
  transform: scale(0.5);
  animation: splashIconLand 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s forwards;
  overflow: hidden;
}
.splash-icon-wrap::after { display: none; }
.splash-icon-wrap .splash-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.splash-icon-wrap .splash-logo-img[src=""] { display: none; }
.splash-icon-wrap .splash-icon-text {
  font-size: 36px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.5px;
  display: none;
}
.splash-brand {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.2px;
  margin-bottom: 4px;
  opacity: 0;
  animation: splashNameIn 0.3s var(--ease-decelerate) 0.3s forwards;
}
.splash-tagline {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 400;
  opacity: 0;
  animation: splashNameIn 0.3s var(--ease-decelerate) 0.4s forwards;
}
.splash-loader {
  width: 80px;
  height: 3px;
  background: var(--color-surface-variant);
  border-radius: 2px;
  margin-top: 24px;
  overflow: hidden;
  opacity: 0;
  animation: splashNameIn 0.25s var(--ease-decelerate) 0.55s forwards;
}
.splash-loader-fill {
  height: 100%;
  width: 0;
  background: var(--primary);
  border-radius: 2px;
  animation: splashLoaderFill 1s var(--ease-standard) 0.9s forwards;
}
@keyframes splashIconLand {
  0% { opacity: 0; transform: scale(0.5); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes splashNameIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes splashLoaderFill {
  to { width: 100%; }
}
.splash-bg-glow {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  #splash-screen, #splash-screen.hidden { transition: opacity 0.15s; }
  .splash-icon-wrap, .splash-brand, .splash-tagline, .splash-loader { animation: none; opacity: 1; }
  .splash-icon-wrap::after, .splash-bg-glow { animation: none; }
  .login-field, .login-card, .login-hero, .login-btn { animation: none !important; }
}


@keyframes pdfPulse {
  0%,100%{transform:scale(1);opacity:1;}
  50%{transform:scale(1.08);opacity:0.85;}
}
#modal-pdf .modal-box { position:relative; overflow:hidden; }


/* ═══════════════════════════════════════════════════════════════
   UNIFIED DESIGN SYSTEM v2 — Production Polish
   Dashboard Hero · Today Strip · Button Cleanup · Token Alignment
═══════════════════════════════════════════════════════════════ */

/* ── 1. TODAY'S EVENTS STRIP (below hero when events exist) ── */
.dash-new-quote-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  padding: 12px 16px;
  margin-top: 10px;
  box-shadow: var(--shadow-sm);
  animation: stripSlideIn 0.28s cubic-bezier(0.34,1.4,0.64,1) both;
  overflow: hidden;
  position: relative;
}
.dash-new-quote-strip::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--warning) 0%, var(--accent-gold) 100%);
  border-radius: 3px 0 0 3px;
}
@keyframes stripSlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dash-today-events-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.dash-today-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warning);
  flex-shrink: 0;
  animation: pulseLive 1.4s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(245,158,11,0.4);
}
@keyframes pulseLive {
  0%  { box-shadow: 0 0 0 0 rgba(245,158,11,0.5); }
  70% { box-shadow: 0 0 0 7px rgba(245,158,11,0); }
  100%{ box-shadow: 0 0 0 0 rgba(245,158,11,0); }
}

.dash-today-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  flex-shrink: 0;
}
.dash-today-label b { color: var(--warning); }

.dash-today-names {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

/* ── NEW QUOTE BUTTON in strip ── */
.dash-new-quote-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(91,108,248,0.3);
  transition: transform 80ms, box-shadow 80ms;
  -webkit-tap-highlight-color: transparent;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.dash-new-quote-btn:active {
  transform: scale(0.96) !important;
  box-shadow: 0 1px 4px rgba(91,108,248,0.2) !important;
}
.dash-new-quote-btn i { font-size: 12px; }

@media (max-width: 480px) {
  .dash-new-quote-strip {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 14px 12px 18px;
  }
  .dash-today-events-info { justify-content: flex-start; }
  .dash-new-quote-btn {
    width: 100%;
    justify-content: center;
    height: 40px;
    font-size: 13.5px;
  }
}

/* ── 2. HERO CARD — tighter when snapshot shows ── */
.crm-hero-content:has(.crm-hero-snapshot) .crm-hero-actions {
  margin-top: 2px;
}

/* ── 3. HERO ACTIONS — never overflow, max 2 secondary btns ── */
.crm-hero-actions {
  display: flex !important;
  gap: 7px !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  overflow: hidden !important;
  margin-top: 12px !important;
}
/* hero btn text always visible — no hiding on small screens */

/* ── 4. KPI GRID — uniform spacing, no overlapping borders ── */
#dash-kpi-grid .layout-kpi-grid,
#dash-kpi-grid .crm-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: 12px !important;
  margin-bottom: 0 !important;
}
@media (max-width: 900px) {
  #dash-kpi-grid .layout-kpi-grid,
  #dash-kpi-grid .crm-kpi-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}

/* ── 5. STAT CARD top accent — remove redundant rules, keep one clean version ── */
.stat-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 0; right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%) !important;
  border-radius: var(--r-md) var(--r-md) 0 0 !important;
  opacity: 0.6 !important;
}

/* ── 6. UNIFIED PAGE HEADER spacing (all pages) ── */
.page-layout__header {
  margin-bottom: 16px !important;
}
.page-layout__title-row {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}
.page-layout__actions {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  flex-wrap: wrap !important;
}

/* ── 7. SECTION spacing – consistent 16px gap between sections ── */
.layout-section + .layout-section {
  margin-top: 16px;
}
#dash-kpi-grid {
  margin-bottom: 16px !important;
}

/* ── 8. BUTTON system — crisp final overrides (eliminate fight between layers) ── */
.btn-gold, .btn-primary {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  gap: 6px !important;
  background: var(--primary) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(91,108,248,0.28) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-family: inherit !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: opacity 80ms, transform 60ms !important;
  white-space: nowrap !important;
}
.btn-gold:active, .btn-primary:active {
  opacity: 0.85 !important;
  transform: scale(0.96) !important;
}
.btn-secondary, .btn-outline {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  gap: 6px !important;
  background: var(--white) !important;
  color: var(--text-secondary) !important;
  border: 1.5px solid var(--border) !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-family: inherit !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: background 80ms, border-color 80ms, transform 60ms !important;
  white-space: nowrap !important;
}
.btn-secondary:hover, .btn-outline:hover {
  background: var(--surface) !important;
  border-color: rgba(91,108,248,0.3) !important;
  color: var(--primary) !important;
}
.btn-secondary:active, .btn-outline:active {
  transform: scale(0.96) !important;
}
.btn-sm {
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  border-radius: 7px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  gap: 4px !important;
}
.btn-ghost {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: transparent !important;
  color: var(--text-muted) !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  cursor: pointer !important;
  gap: 5px !important;
  font-family: inherit !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: background 80ms, color 80ms !important;
}
.btn-ghost:hover { background: var(--surface) !important; color: var(--text-primary) !important; }
.btn-ghost:active { transform: scale(0.96) !important; }

/* ── 9. CARD — final unified shadow + radius ── */
.card, .stat-card, .crm-panel {
  background: var(--white) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: var(--r-md) !important;
  box-shadow: 0 1px 3px rgba(15,17,23,0.05), 0 1px 8px rgba(15,17,23,0.03) !important;
}

/* ── 10. FORM INPUTS — one source of truth ── */
.form-input,
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="date"], input[type="password"],
textarea, select {
  height: 36px !important;
  min-height: 36px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 10px !important;
  background: var(--white) !important;
  color: var(--text-primary) !important;
  font-size: 13.5px !important;
  padding: 0 12px !important;
  transition: border-color 100ms, box-shadow 100ms !important;
  outline: none !important;
  font-family: inherit !important;
}
.form-input:focus, input:focus, textarea:focus, select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(91,108,248,0.12) !important;
}
textarea.form-input, textarea {
  height: auto !important;
  min-height: 76px !important;
  padding: 9px 12px !important;
  resize: vertical !important;
}

/* ── 11. BADGE — one size everywhere ── */
.badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  height: 20px !important;
  min-height: 20px !important;
  padding: 0 8px !important;
  border-radius: 100px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

/* ── 12. TABLE — zebra + clean hover ── */
.data-table tbody tr:nth-child(even) > td {
  background: rgba(91,108,248,0.018) !important;
}
.data-table tbody tr:hover > td {
  background: var(--primary-light) !important;
  transition: background 60ms !important;
}

/* ── 13. SECTION TITLE — consistent eyebrow ── */
.section-title, .dash-section-title {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  margin-bottom: 12px !important;
}

/* ── 14. SIDEBAR active: pill style cleanup ── */
.sidebar-item.active {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
  font-weight: 700 !important;
  box-shadow: inset 3px 0 0 var(--primary) !important;
  border-radius: 0 10px 10px 0 !important;
}

/* ── 15. BOTTOM NAV — final polished state ── */
#bottom-nav {
  background: var(--bg-card) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-top: 1px solid rgba(0,0,0,0.07) !important;
  box-shadow: 0 -1px 0 rgba(0,0,0,0.05) !important;
}
.bnav-item.active .bnav-icon-wrap {
  background: var(--primary-light) !important;
  border-radius: 10px !important;
  width: 44px !important;
  height: 26px !important;
  padding: 0 !important;
}
.bnav-item.active 
.bnav-item.active 
.bnav-item:not(.active) 

/* ── 17. TOP NAV — final glass ── */
.top-nav {
  background: var(--bg-card) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid var(--border-light);
  box-shadow: none !important;
}
.top-nav.scrolled {
  box-shadow: 0 2px 16px rgba(0,0,0,0.08) !important;
}

/* ── 18. TOAST ── */


/* ── 19. PAGE TITLE typography ── */
.page-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: var(--text-primary) !important;
  line-height: 1.2 !important;
}
.page-sub {
  font-size: 12.5px !important;
  color: var(--text-muted) !important;
  font-weight: 400 !important;
  margin-top: 3px !important;
}
@media (max-width: 768px) {
  .page-title { font-size: 18px !important; }
  .page-sub   { font-size: 12px !important; }
}

/* ── 20. MODAL — one clean standard ── */
.modal-box {
  border-radius: var(--r-lg) !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.14), 0 4px 16px rgba(0,0,0,0.06) !important;
  overflow: hidden !important;
  background: var(--white) !important;
}
.modal-hd {
  padding: 14px 16px !important;
  background: var(--white) !important;
  border-bottom: 1px solid var(--border-light) !important;
}
.modal-footer {
  background: var(--surface) !important;
  border-top: 1px solid var(--border-light) !important;
  padding: 12px 16px !important;
  gap: 8px !important;
}
@media (max-width: 768px) {
  .modal-box {
    border-radius: 12px 12px 0 0 !important;
  }
}

/* ── END UNIFIED DESIGN SYSTEM v2 ── */


/* ═══════════════════════════════════════════════════════════════
   UNIFIED PAGE SYSTEM v2 — Events · Leads · Tasks · Clients
   CSS class-driven cards, no more inline styles
═══════════════════════════════════════════════════════════════ */

/* ─── EVENT CARDS ─── */
.event-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: 8px;
  transition: box-shadow 100ms, border-color 100ms;
}
@media (hover: hover) {
  .event-card:hover {
    box-shadow: var(--shadow-md);
    border-color: rgba(91,108,248,0.16);
  }
}

.ev-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border-light);
  gap: 8px;
}
.ev-card-title {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ev-card-status {
  flex-shrink: 0 !important;
}

.ev-card-body {
  padding: 8px 12px 10px;
}

.ev-card-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.ev-card-info {
  flex: 1;
  min-width: 0;
}
.ev-card-meta {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-top: 2px !important;
}
.ev-card-right {
  text-align: right;
  flex-shrink: 0;
}

.ev-card-chips {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  align-items: center;
}

/* Urgency chips */
.ev-urgency-chip {
  font-weight: 700 !important;
}
.ev-urgency--high {
  background: #fef2f2 !important;
  color: var(--error) !important;
  border-color: #fecaca !important;
}
.ev-urgency--today {
  background: #fff8e8 !important;
  color: #B45309 !important;
  border-color: #fde68a !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.ev-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #F59E0B;
  animation: pulseLive 1.4s ease-in-out infinite;
  flex-shrink: 0;
}

.ev-card-actions {
  display: flex;
  gap: 5px;
}
.ev-venue-btn {
  flex: 1 !important;
  justify-content: center !important;
}

/* ─── LEADS FILTER CHIPS ─── */
.lead-filter-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.lead-filter-chips::-webkit-scrollbar { display: none; }

.lead-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 100px;
  font-size: var(--text-xs);
  font-weight: 700;
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 60ms;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.lead-filter-chip:active {
  transform: scale(0.96);
}
.lead-filter-chip.active {
  border-color: var(--primary) !important;
  background: var(--primary-light) !important;
  color: var(--primary) !important;
  box-shadow: 0 1px 6px rgba(91,108,248,0.15);
}

.lfc-count {
  font-size: 10px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 100px;
  background: var(--surface-2);
  color: var(--text-muted);
  line-height: 1.3;
}
.lead-filter-chip.active .lfc-count {
  background: rgba(91,108,248,0.15);
  color: var(--primary);
}

/* ─── TASKS — view toggle buttons ─── */
.task-view-toggle {
  display: flex;
  gap: 3px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 3px;
}
.task-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 7px;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 80ms, color 80ms, box-shadow 80ms;
}
.task-view-btn.active {
  background: var(--white);
  color: var(--primary);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* ─── TASK KANBAN BOARD ─── */
.tasks-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  align-items: start;
}
.task-col {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  padding: 12px;
  min-height: 160px;
}

.task-col-title {
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
}
.task-col-count {
  font-size: 10.5px;
  font-weight: 800;
  background: var(--white);
  color: var(--text-muted);
  padding: 2px 7px;
  border-radius: 100px;
  border: 1px solid var(--border-light);
}
/* Add task dashed button inside col */
.task-col > .btn-ghost.w-full {
  border: 1.5px dashed var(--border) !important;
  border-radius: 8px !important;
  margin-top: 6px !important;
  color: var(--text-muted) !important;
  font-size: 12px !important;
}
.task-col > .btn-ghost.w-full:hover {
  background: var(--primary-light) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

/* Task card polish */
.task-card {
  background: var(--white) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: var(--r-sm) !important;
  padding: 11px 12px 9px !important;
  margin-bottom: 6px !important;
  box-shadow: var(--shadow-sm) !important;
  cursor: pointer !important;
  position: relative !important;
  transition: box-shadow 80ms, transform 80ms !important;
  border-left: 3px solid var(--task-accent, var(--border)) !important;
}
.task-card:hover { box-shadow: var(--shadow-md) !important; transform: none !important; }
.task-card:hover 
.task-card:active { transform: scale(0.97) !important; }

@media (max-width: 768px) {
  .tasks-board {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .task-col { min-height: auto !important; }
}

/* ─── KPI GRID: uniform 4-col → 2-col → 1-col ─── */
.crm-kpi-grid,
#tasks-stats-grid,
#leads-kpi-grid,
#quot-kpi-strip {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}
@media (max-width: 900px) {
  .crm-kpi-grid,
  #tasks-stats-grid,
  #leads-kpi-grid,
  #quot-kpi-strip {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ─── EV FILTER SCROLL (native pill strip) ─── */
.ev-filter-row {
  margin-bottom: 14px;
  overflow: hidden;
}
.ev-filter-scroll {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 3px 2px 8px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--r-sm);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ev-filter-scroll::-webkit-scrollbar { display: none; }

.ev-filter-tab {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: calc(var(--r-sm) - 2px);
  font-size: 12px;
  font-weight: 700;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 60ms;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.ev-filter-tab.active {
  background: var(--white);
  color: var(--primary);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.ev-filter-count {
  font-size: 10px;
  font-weight: 800;
  background: rgba(0,0,0,0.06);
  color: inherit;
  padding: 1px 5px;
  border-radius: 100px;
  min-width: 18px;
  text-align: center;
}
.ev-filter-tab.active .ev-filter-count {
  background: rgba(91,108,248,0.12);
}

/* ─── LIST SEARCH BAR (consistent all pages) ─── */
.list-search-bar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--white) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  padding: 0 12px !important;
  height: 38px !important;
  box-shadow: var(--shadow-sm) !important;
  margin-bottom: 14px !important;
  transition: border-color 100ms, box-shadow 100ms !important;
}
.list-search-bar:focus-within {
  border-color: var(--primary) !important;
  box-shadow: var(--shadow-focus) !important;
}
.list-search-bar 
.list-search-bar input {
  flex: 1 !important;
  border: none !important;
  background: transparent !important;
  outline: none !important;
  font-size: 13.5px !important;
  color: var(--text-primary) !important;
  height: 100% !important;
  padding: 0 4px !important;
  box-shadow: none !important;
  font-family: inherit !important;
  min-width: 0 !important;
}

/* ─── TABLE CARD WRAPPER ─── */

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


/* ─── PAGE HEADER ACTIONS ROW ─── */


/* ─── STAGGER ANIMATION for cards ─── */
.stagger-item {
  animation: staggerIn 0.18s cubic-bezier(0.2,0,0,1) both;
}
.stagger-item:nth-child(1) { animation-delay: 0ms; }
.stagger-item:nth-child(2) { animation-delay: 30ms; }
.stagger-item:nth-child(3) { animation-delay: 55ms; }
.stagger-item:nth-child(4) { animation-delay: 80ms; }
.stagger-item:nth-child(5) { animation-delay: 100ms; }
.stagger-item:nth-child(6) { animation-delay: 120ms; }
.stagger-item:nth-child(n+7) { animation-delay: 140ms; }
@keyframes staggerIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── SETTINGS PAGE — group wrappers ─── */


.settings-group 
.settings-group .settings-row:last-child {
  border-bottom: none !important;
}

/* ─── REPORT CARDS ─── */


/* ─── MOBILE RESPONSIVE FINAL FIXES ─── */
@media (max-width: 768px) {
  /* Prevent event card actions from overflowing */
  .ev-card-actions {
    flex-wrap: wrap;
  }
  .ev-card-actions .btn-gold,
  .ev-card-actions .btn-secondary {
    flex: 1 !important;
    justify-content: center !important;
    min-width: 60px !important;
  }
  /* Leads chips: horizontal scroll, no wrap */
  .lead-filter-chips {
    flex-wrap: nowrap !important;
  }
  /* Task board on mobile already handled above */
  /* Page header compact */
  .page-header-row {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .page-actions {
    flex-wrap: nowrap !important;
  }
}

/* ─── QUOT KPI ACTIVE STATE ─── */
.quot-kpi-card.active {
  border: 2px solid var(--primary) !important;
  background: var(--primary-light) !important;
  box-shadow: 0 2px 12px rgba(91,108,248,0.15) !important;
}
.quot-kpi-card.active 

/* ─── VENDOR / CLIENT CARD ACTIONS ─── */
.cc-card-actions {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--border-light);
}
.cc-card-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  background: none;
  border: none;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background 60ms;
}
.cc-card-action-btn:not(:last-child) {
  border-right: 1px solid var(--border-light);
}
.cc-card-action-btn:hover { background: var(--surface); }
.cc-card-action-btn.primary { color: var(--primary); }
.cc-card-action-btn.danger  { color: var(--error); }
.cc-card-action-btn.warning { color: var(--warning); }
.cc-card-action-btn.success { color: var(--success); }

/* ─── DARK MODE COMPAT ─── */
body.dark-mode .ev-card-header,
body.dark-mode .ev-card-body {
  background: transparent !important;
}
body.dark-mode .lead-filter-chip {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}
body.dark-mode .lead-filter-chip.active {
  background: var(--primary-light) !important;
  color: #a8bfff !important;
}
body.dark-mode .task-col {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
}
body.dark-mode .task-card {
  background: var(--white) !important;
}
body.dark-mode .ev-filter-scroll {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
}
body.dark-mode .ev-filter-tab.active {
  background: var(--white) !important;
  color: #a8bfff !important;
}

/* ═══ END UNIFIED PAGE SYSTEM v2 ═══ */


/* ═══════════════════════════════════════════════════════════════
   EXPENSES · REPORTS · MISC COMPONENTS — Production CSS v3
═══════════════════════════════════════════════════════════════ */

/* ─── EXPENSE SUMMARY GRID ─── */
.exp-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 500px) {
  .exp-summary-grid { grid-template-columns: 1fr 1fr; }
  .exp-summary-grid > *:last-child { grid-column: span 2; }
}
.exp-summary-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--card-accent, var(--primary));
  border-radius: var(--r-md);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.exp-summary-label {
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--card-accent, var(--text-muted));
  margin-bottom: 6px;
}
.exp-summary-value {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  font-family: 'Sora', 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.03em;
}


/* ─── EXPENSE CATEGORIES CARD ─── */
.exp-categories-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
}
.exp-categories-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.exp-categories-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.exp-cat-row { /* no extra style needed */ }
.exp-cat-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 5px;
}
.exp-cat-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
}
.exp-cat-value {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.exp-cat-pct {
  color: var(--text-muted);
  font-weight: 400;
}
.exp-cat-bar {
  height: 6px;
  background: var(--surface-2);
  border-radius: 4px;
  overflow: hidden;
}
.exp-cat-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s var(--ease-decelerate);
}

/* ─── VENDOR CARD grid ─── */

@media (max-width: 768px) {
  .vendors-grid { grid-template-columns: 1fr; }
}

.vendor-card {
  padding: 16px 18px !important;
}
.vendor-card .cc-meta-block > div {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}
.vendor-card .cc-meta-block i {
  width: 16px;
  text-align: center;
  color: var(--primary);
  opacity: 0.55;
  font-size: 12px;
}

/* ─── CLIENT CARD ─── */
.client-card {
  border-radius: var(--r-md) !important;
  margin-bottom: 8px !important;
  padding: 12px 14px !important;
  overflow: hidden;
}

/* ─── REPORT KPI GRID ─── */
.reports-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}


/* ─── GALLERY HERO stat cards (inside hero, light text) ─── */
.gallery-stat-card {
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  padding: 10px 8px !important;
  text-align: center !important;
}
.gallery-stat-val {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: #fff !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.03em !important;
}
.gallery-stat-lbl {
  font-size: 9px !important;
  color: rgba(255,255,255,0.65) !important;
  font-weight: 700 !important;
  margin-top: 3px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* ─── TODAY'S UPCOMING EVENTS in dash highlight section ─── */
.crm-highlight {
  border: 1px solid rgba(245,166,35,0.14) !important;
  background: var(--white) !important;
  border-radius: var(--r-md) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
}
.crm-highlight-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.crm-highlight-head h3 {
  font-size: 13px;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary);
}

/* ─── SCREEN padding final (unified) ─── */
.screen {
  padding: 6px var(--page-padding) !important;
  padding-top: 6px !important;
  padding-bottom: 0 !important;
}
body.mobile-secondary-page .screen {
  padding-bottom: 0 !important;
}
body.fullscreen-page 

/* ─── SNAPPY INPUT FOCUS ─── */
.form-input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(91,108,248,0.12) !important;
  background: #FAFCFF !important;
  outline: none !important;
  transition: border-color 80ms, box-shadow 80ms !important;
}

/* ─── TABLE ROW HOVER ─── */
@media (hover: hover) {
  .data-table tbody tr:hover > td {
    background: var(--primary-light) !important;
    transition: background 60ms !important;
  }
}

/* ─── CONFIRM MODAL bottom sheet ─── */
#modal-confirm 
#modal-confirm .modal-box {
  border-radius: 14px 14px 0 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 85vh !important;
}

/* ─── EMPTY STATE final polish ─── */
.empty-state {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 40px 20px !important;
  min-height: 160px !important;
}

.empty-state-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  margin-bottom: 5px !important;
}
.empty-state-sub {
  font-size: 12.5px !important;
  color: var(--text-muted) !important;
  line-height: 1.55 !important;
  max-width: 260px !important;
  margin: 0 auto !important;
}


/* ─── DARK MODE EXPENSE CARDS ─── */
body.dark-mode .exp-summary-card,
body.dark-mode .exp-categories-card {
  background: var(--white) !important;
  border-color: var(--border) !important;
}

/* ─── MORE MENU: tighter on small screens ─── */
@media (max-width: 380px) {
  .more-menu-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    padding: 6px 10px 4px !important;
  }
  .more-menu-item {
    min-height: 58px !important;
    padding: 8px 3px !important;
  }
  .mm-icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 13px !important;
  }
  .mm-label {
    font-size: 9.5px !important;
  }
}

/* ─── KICKER / EYEBROW TEXT ─── */
.section-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

/* ─── REPORT PROGRESS BAR ─── */
.report-progress-bar {
  height: 7px;
  background: var(--surface-2);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 5px;
}


/* ─── FILTER ROW gap ─── */
.page-header-row + .ev-filter-row,
.page-header-row + .lead-filter-chips {
  margin-top: -4px;
}

/* ─── QUOT KPI mobile 2-col ─── */
@media (max-width: 768px) {
  #quot-kpi-strip {
    grid-template-columns: repeat(2,1fr) !important;
    gap: 8px !important;
  }
}

/* ═══ END CSS v3 ═══ */


/* ═══════════════════════════════════════════════════════════════
   SERVICES · MISC CARDS — Final Production CSS v4
═══════════════════════════════════════════════════════════════ */

/* ─── SERVICES GRID ─── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
@media (max-width: 768px) {
  .services-grid { grid-template-columns: 1fr; }
}

.service-card-block {
  background: var(--white) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: var(--r-md) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow 100ms, border-color 100ms;
}
@media (hover: hover) {
  .service-card-block:hover {
    box-shadow: var(--shadow-md) !important;
    border-color: rgba(91,108,248,0.15) !important;
  }
}

.service-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-light);
  background: var(--surface);
  gap: 10px;
}
.service-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.service-card-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.service-card-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.service-card-body {
  padding: 8px 14px 10px;
}

.service-cat-row:last-of-type {
  border-bottom: none;
}
.service-cat-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
}
.service-add-cat-btn {
  width: 100%;
  margin-top: 8px;
  padding: 7px;
  border: 1.5px dashed var(--border);
  border-radius: 8px;
  background: none;
  cursor: pointer;
  font-size: 12px;
  color: var(--primary);
  font-weight: 600;
  font-family: inherit;
  transition: background 80ms, border-color 80ms;
  -webkit-tap-highlight-color: transparent;
}
.service-add-cat-btn:hover {
  background: var(--primary-light);
  border-color: var(--primary);
}

/* ─── DATA TABLE ROW (CSS hover instead of JS) ─── */
.data-table-row { transition: background 60ms; }
@media (hover: hover) {
  .data-table-row:hover > td {
    background: var(--surface) !important;
  }
}

/* ─── USERS TABLE header tweaks ─── */
.users-desktop-view .data-table thead tr {
  background: var(--surface) !important;
}

/* ─── CRM HERO snapshot badge ─── */
.crm-hero-snapshot {
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 9px !important;
  padding: 7px 12px !important;
  margin-top: 10px !important;
  font-size: 12px !important;
  color: rgba(255,255,255,0.88) !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  line-height: 1.4 !important;
  backdrop-filter: none;
}
.crm-hero-snapshot b {
  color: #fff !important;
  font-weight: 800 !important;
}
.crm-snap-dot {
  color: rgba(255,255,255,0.35) !important;
  margin: 0 3px !important;
}

/* ─── HERO AVATAR — sharper on mobile ─── */
.crm-hero-avatar {
  background: rgba(255,255,255,0.2) !important;
  border: 1.5px solid rgba(255,255,255,0.32) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18) !important;
}

/* ─── HERO action buttons: visible text on all widths ─── */
.crm-hero-btn {
  white-space: nowrap !important;
  letter-spacing: -0.01em !important;
}
@media (max-width: 360px) {
  .crm-hero-btn .fa-solid { font-size: 12px !important; }
  .crm-hero-btn {
    padding: 0 10px !important;
    font-size: 11.5px !important;
    height: 32px !important;
    min-height: 32px !important;
  }
}

/* ─── PAGINATION: consistent on all list pages ─── */
.pagination-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 0 4px;
}
.pagination-btn {
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 60ms, border-color 60ms;
}
.pagination-btn:hover { background: var(--surface); border-color: var(--primary); color: var(--primary); }
.pagination-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.pagination-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ─── NOTIFICATIONS page ─── */
.notif-list { display: flex; flex-direction: column; gap: 0; }
.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: background 60ms;
  -webkit-tap-highlight-color: transparent;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--surface); }
.notif-item.unread { background: rgba(91,108,248,0.04); }
.notif-item.unread:hover { background: var(--primary-light); }


/* ─── FORM SECTION GROUPS ─── */
.form-section-group {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
}
.form-section-group-title {
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-light);
  background: var(--surface);
}
.form-section-group-body {
  padding: 14px 16px;
}

/* ─── GALLERY: fix stat cards inside hero (transparent bg) ─── */
.gallery-hero .gallery-stat-card {
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow: none !important;
}

/* ─── BOTTOM SHEET: consistent drag handle ─── */
#bottom-sheet::before,
#more-menu-sheet .more-menu-handle,
.modal-box::before {
  background: rgba(0,0,0,0.14) !important;
}

/* ─── ACCESSIBILITY: skip to content ─── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* ─── PRINT STYLES ─── */
@media print {
  #bottom-nav, .top-nav, .sidebar, #new-quote-fab, #cart-fab,
  #more-menu-sheet, #more-menu-overlay, .modal-overlay { display: none !important; }
  .screen { padding: 0 !important; }
  .card, .stat-card { box-shadow: none !important; border: 1px solid #e0e0e0 !important; }
}

/* ═══ END CSS v4 ═══ */


/* ═══════════════════════════════════════════════════════════════
   REPORTS · COMPANY · FORM CARDS — Final CSS v5
═══════════════════════════════════════════════════════════════ */

/* ─── REPORT CHART CARDS ─── */
.reports-charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 900px) {
  .reports-charts-grid { grid-template-columns: 1fr !important; }
}

.rcc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-light);
  background: var(--surface);
}
.rcc-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
}
.rcc-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.rcc-body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rcc-progress-row { /* nothing needed */ }
.rcc-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.rcc-progress-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
}
.rcc-progress-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.rcc-progress-pct {
  color: var(--text-muted);
  font-weight: 400;
}
.rcc-service-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--border-light);
  transition: background 60ms;
}
.rcc-service-row:last-child { border-bottom: none; }
@media (hover: hover) {
  .rcc-service-row:hover { background: var(--surface); }
}
.rcc-service-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.rcc-service-name {
  flex: 1;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
}
.rcc-service-rank {
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 600;
}

/* ─── FORM CARD COMPONENT (Company, Modal forms) ─── */
.form-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border-light);
}
.form-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.form-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.form-card-subtitle {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 1px;
}

/* ─── COMPANY PAGE grid ─── */
.company-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 900px) {
  .company-settings-grid { grid-template-columns: 1fr !important; }
}

/* ─── REPORTS KPI override: 5 columns + responsive ─── */
.reports-kpi-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
@media (max-width: 1100px) {
  .reports-kpi-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 700px) {
  .reports-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ─── SETTINGS PAGE refinements ─── */
.settings-profile-card {
  border-radius: var(--r-md) !important;
  padding: 16px !important;
  margin-bottom: 20px !important;
}
.settings-section { margin-bottom: 18px; }
.settings-section-title {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  padding: 0 4px 8px;
}
.settings-section-body {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.settings-row {
  display: flex !important;
  align-items: center !important;
  gap: 13px !important;
  padding: 13px 14px !important;
  width: 100% !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  font-family: inherit !important;
  text-align: left !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: background 60ms !important;
  min-height: 52px !important;
  box-sizing: border-box !important;
  border-radius: 0 !important;
  border-bottom: 1px solid var(--border-light) !important;
}
.settings-section-body .settings-row:last-child {
  border-bottom: none !important;
}
.settings-row:hover { background: var(--surface) !important; }
.settings-row:active { background: var(--primary-light) !important; }
.settings-row-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.settings-row-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.settings-row-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.settings-row-chevron {
  font-size: 10px;
  color: var(--border);
  flex-shrink: 0;
}

/* ─── SETTINGS SUB PAGES ─── */
.settings-sub-section { margin-bottom: 18px; }
.settings-sub-section-title {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  padding: 0 4px 8px;
}
.settings-sub-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.settings-row-sep {
  height: 1px;
  background: var(--border-light);
  margin: 0 16px;
}

/* ─── VENDOR DASHBOARD CARDS ─── */
.vendor-dashboard-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 12px;
}

/* ─── PAYMENT / INVOICE ROWS ─── */
.payment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-light);
  gap: 10px;
}
.payment-row:last-child { border-bottom: none; }
.payment-row:hover { background: var(--surface); }
.payment-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.payment-meta {
  font-size: 11px;
  color: var(--text-muted);
}
.payment-amount {
  font-weight: 800;
  color: var(--success);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* ─── NATIVE TOGGLE REFINEMENT ─── */
.native-toggle-track {
  background: var(--border) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.08) !important;
}
.native-toggle-track::after {
  box-shadow: 0 2px 5px rgba(0,0,0,0.18) !important;
}
.native-toggle input:checked + 

/* ─── GUEST PAGE ─── */
.guests-table-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* ─── EVENT TYPES PAGE ─── */
.event-types-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.event-type-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.event-type-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  cursor: pointer;
  transition: background 60ms;
  -webkit-tap-highlight-color: transparent;
}
.event-type-header:hover { background: var(--surface); }
.event-type-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--r-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
  background: var(--primary-light);
}
.event-type-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}
.event-type-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}

/* ─── COMPANY SETTINGS: card padding fix ─── */
.company-settings-grid .card {
  padding: 18px 20px !important;
}

/* ─── QUOTATION WIZARD refinement ─── */
.wizard-header-native {
  border-radius: var(--r-md) !important;
}
.wizard-step-track.step-track {
  border-radius: var(--r-md) !important;
  padding: 16px 18px !important;
}

/* ─── PAGE-FORM-PANEL header ─── */
#pf-header {
  background: var(--white) !important;
  border-bottom: 1px solid var(--border-light) !important;
}
#pf-title-el {
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}
#pf-sub-el {
  font-size: 11.5px !important;
  color: var(--text-muted) !important;
}

/* ─── DARK MODE for new components ─── */
body.dark-mode .rcc-header,
body.dark-mode .rcc-body { background: transparent !important; }
body.dark-mode .rcc-service-row { border-color: var(--border) !important; }
body.dark-mode .settings-section-body,
body.dark-mode .settings-sub-card {
  background: var(--white) !important;
  border-color: var(--border) !important;
}
body.dark-mode .form-card-header {
  border-color: var(--border) !important;
}

/* ═══ END CSS v5 ═══ */


/* ═══════════════════════════════════════════════════════════════
   EXPENSE FILTERS · FINAL ALIGNMENT — CSS v6
═══════════════════════════════════════════════════════════════ */

/* ─── EXPENSE FILTERS ROW ─── */
.exp-filters-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  padding: 10px 12px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
}
.exp-filter-select {
  min-width: 110px !important;
  height: 34px !important;
  min-height: 34px !important;
  font-size: 12.5px !important;
  flex-shrink: 0;
}
@media (max-width: 500px) {
  .exp-filters-row { padding: 8px 10px; gap: 6px; }
  .exp-filter-select { min-width: 0 !important; flex: 1 !important; }
}

/* ─── FINAL: Fix page padding on desktop to give more breathing room ─── */
@media (min-width: 1024px) {
  .screen {
    padding: 24px 24px !important;
    padding-bottom: 32px !important;
  }
}
@media (min-width: 769px) and (max-width: 1023px) {
  .screen {
    padding: 20px 18px !important;
    padding-bottom: 28px !important;
  }
}

/* ─── FINAL: Card group gap on company page ─── */
.company-settings-grid > div {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ─── FINAL: Quotation card actions consistent height ─── */
.quot-card-actions {
  display: flex;
  gap: 5px;
  padding: 8px 12px;
  border-top: 1px solid var(--border-light);
  background: var(--surface);
}

/* ─── FINAL: Quot kpi strip — remove extra space ─── */
#quot-kpi-strip {
  margin-bottom: 14px !important;
}

/* ─── FINAL: Remove margin-bottom on last section ─── */
.crm-page > section:last-child,
.fade-in > section:last-child { margin-bottom: 0; }

/* ─── FINAL: Page title row separator line ─── */
.page-sub::before {
  content: '' !important;
  display: inline-block !important;
  width: 18px !important;
  height: 2.5px !important;
  background: linear-gradient(90deg, var(--primary), var(--secondary)) !important;
  border-radius: 2px !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
  margin-right: 6px !important;
}

/* ─── FINAL: Ensure fab never overlaps content on mobile ─── */
@media (max-width: 768px) {
  #new-quote-fab.visible {
    bottom: calc(var(--bnav-height, 56px) + env(safe-area-inset-bottom, 0px) + 14px) !important;
    right: 14px !important;
  }
}

/* ─── FINAL: KPI section title top margin ─── */
.section-title:first-child,
.dash-section-title:first-child { margin-top: 0 !important; }

/* ─── FINAL: Scrollable filter tabs on any page ─── */
.filter-tabs-scroll {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 3px 2px 6px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.filter-tabs-scroll::-webkit-scrollbar { display: none; }

/* ─── FINAL: Card press animation ─── */
.card[onclick]:active,
.stat-card[onclick]:active {
  transform: scale(0.97) !important;
  transition: transform 60ms !important;
}

/* ─── FINAL: Lead card hover state ─── */
@media (hover: hover) {
  .lead-card:hover {
    box-shadow: 0 4px 18px rgba(91,108,248,0.1) !important;
    border-color: rgba(91,108,248,0.18) !important;
    transform: none !important;
  }
}

/* ─── FINAL: Settings sign out button ─── */
.settings-signout-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 14px !important;
  background: var(--white) !important;
  border: 1.5px solid rgba(244,91,65,0.2) !important;
  border-radius: var(--r-md) !important;
  cursor: pointer !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--error) !important;
  transition: background 80ms !important;
  -webkit-tap-highlight-color: transparent !important;
}
.settings-signout-btn:hover { background: var(--error-light) !important; }
.settings-signout-btn:active { transform: scale(0.98) !important; }

/* ─── FINAL: Responsive KPI grid (consistent everywhere) ─── */
@media (max-width: 768px) {
  .crm-kpi-grid,
  #dash-kpi-grid .layout-kpi-grid,
  #dash-kpi-grid .crm-kpi-grid,
  #tasks-stats-grid,
  #leads-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}

/* ─── FINAL: Version footer on settings ─── */
.settings-version {
  text-align: center;
  padding: 12px 0 20px;
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ─── FINAL: Screen entrance animation ─── */
.fade-in {
  animation: fadeIn 0.12s ease-out both !important;
}

/* ═══ END CSS v6 — FINAL PASS ═══ */


/* ═══════════════════════════════════════════════════════════════
   DASHBOARD HERO CARD — Complete Redesign v3
   Stable, unified layout. Today's events inside card.
   New Quote always present. No external strips.
═══════════════════════════════════════════════════════════════ */

/* ── Core card shell ── */
.crm-hero-native {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 14px;
  box-shadow: 0 6px 28px rgba(30,27,75,0.22), 0 2px 8px rgba(0,0,0,0.10);
  will-change: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ── Gradient background ── */
.crm-hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0f0c29 0%, #1a1650 25%, #2d2a8a 55%, #3d35c4 80%, #4f46e5 100%);
  z-index: 0;
}
.crm-hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 85% 15%, rgba(255,255,255,0.13) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 10% 90%, rgba(99,102,241,0.25) 0%, transparent 60%);
  pointer-events: none;
}
.crm-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0px,
    transparent 22px,
    rgba(255,255,255,0.018) 22px,
    rgba(255,255,255,0.018) 23px
  );
  pointer-events: none;
}

/* ── Content wrapper ── */
.crm-hero-content {
  position: relative;
  z-index: 1;
  padding: 20px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Row 1: Avatar + Greeting ── */
.crm-hero-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.crm-hero-avatar-wrap { flex-shrink: 0; }
.crm-hero-avatar {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  background: rgba(255,255,255,0.18);
  border: 1.5px solid rgba(255,255,255,0.30);
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
  flex-shrink: 0;
}
.crm-hero-text {
  flex: 1;
  min-width: 0;
}
.crm-hero-kicker {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: rgba(255,255,255,0.72);
  margin-bottom: 3px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crm-hero-title {
  font-size: 1.25rem;
  line-height: 1.15;
  margin: 0;
  color: #fff;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-family: 'Sora', 'Plus Jakarta Sans', sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crm-hero-sub {
  font-size: 11.5px;
  color: rgba(255,255,255,0.60);
  margin-top: 3px;
  display: flex;
  gap: 5px;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crm-hero-sub i { opacity: 0.7; font-size: 10px; }

/* ── Row 2: Today's Events row (stable, always same height) ── */
.crm-hero-today-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  margin-bottom: 12px;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  min-height: 38px;
  overflow: hidden;
  animation: heroRowIn 0.22s cubic-bezier(0.34,1.4,0.64,1) both;
}
@keyframes heroRowIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.crm-hero-today-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FCD34D;
  flex-shrink: 0;
  animation: pulseLive 1.5s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(252,211,77,0.5);
}
.crm-hero-today-tag {
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #FCD34D;
  flex-shrink: 0;
  white-space: nowrap;
}
.crm-hero-today-events {
  display: flex;
  gap: 5px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  align-items: center;
}
.crm-hero-ev-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 20px;
  background: rgba(255,255,255,0.13);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background 80ms;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}
.crm-hero-ev-pill:active { background: rgba(255,255,255,0.22) !important; }
.crm-hero-ev-more {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.65);
  flex-shrink: 0;
  white-space: nowrap;
}
.crm-hero-today-arrow {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background 80ms;
}
.crm-hero-today-arrow:active { background: rgba(255,255,255,0.22); }

/* ── Row 3: Action Buttons (always present, always same row) ── */
.crm-hero-actions {
  display: flex !important;
  gap: 7px !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  overflow: visible !important;
  margin-top: 0 !important;
}
.crm-hero-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 13px !important;
  border-radius: 9px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  border: none !important;
  cursor: pointer !important;
  transition: transform 80ms, opacity 80ms !important;
  -webkit-tap-highlight-color: transparent !important;
  box-sizing: border-box !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap !important;
  flex-shrink: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.crm-hero-btn:active { transform: scale(0.94) !important; }
.crm-hero-btn-primary {
  background: #fff !important;
  color: #1e1b4b !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.16) !important;
  flex-shrink: 0 !important;      /* primary button never shrinks */
}
.crm-hero-btn-secondary {
  background: rgba(255,255,255,0.13) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
}
.crm-hero-btn-secondary:hover { background: rgba(255,255,255,0.20) !important; }
/* labels always visible on all screen sizes */
.crm-hero-btn-label { display: inline !important; }

/* ── Mobile adjustments ── */
@media (max-width: 768px) {
  .crm-hero-native {
    border-radius: 10px !important;
    margin-bottom: 12px !important;
  }
  .crm-hero-content {
    padding: 14px 14px 13px !important;
  }
  .crm-hero-top {
    gap: 11px !important;
    margin-bottom: 11px !important;
  }
  .crm-hero-avatar {
    width: 42px !important;
    height: 42px !important;
    border-radius: 11px !important;
    font-size: 1rem !important;
  }
  .crm-hero-title { font-size: 1.1rem !important; }
  .crm-hero-kicker { font-size: 9.5px !important; }
  .crm-hero-sub { font-size: 11px !important; }
  .crm-hero-today-row {
    padding: 7px 10px !important;
    margin-bottom: 10px !important;
    min-height: 36px !important;
  }
  .crm-hero-ev-pill {
    font-size: 11px !important;
    padding: 2px 7px !important;
    max-width: 110px !important;
  }
  .crm-hero-actions { gap: 6px !important; }
  .crm-hero-btn {
    height: 32px !important;
    min-height: 32px !important;
    font-size: 11.5px !important;
    padding: 0 10px !important;
    gap: 4px !important;
  }
  .crm-hero-btn span, .crm-hero-btn-label { display: inline !important; }
}

/* ── Kill old conflicting dash-new-quote-strip (hidden now) ── */
.dash-new-quote-strip { display: none !important; }

/* ─────────────────────────────────────
   LAYOUT SECTION — uniform 10px gap
───────────────────────────────────── */
.layout-section + .layout-section { margin-top: 10px !important; }
#dash-kpi-grid { margin-bottom: 10px !important; }
.layout-dashboard-hero { margin-bottom: 0 !important; }
#dash-kpi-grid { margin-top: 0 !important; }

/* ═══ END HERO REDESIGN v3 ═══ */

/* ╔══════════════════════════════════════════════════════════════╗
   ║   NATIVE MOBILE POLISH — Mobile-First, Kotlin/Swift Feel    ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* == 1. TOAST - right-aligned, slide from bottom-right == */
#toast {
  position: fixed !important;
  bottom: calc(var(--bnav-height, 56px) + env(safe-area-inset-bottom, 0px) + 12px) !important;
  right: 16px !important;
  left: auto !important;
  min-width: 200px !important;
  max-width: min(300px, calc(100vw - 32px)) !important;
  width: auto !important;
  background: #1C1F2E !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: 14px !important;
  padding: 11px 14px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.28), 0 2px 6px rgba(0,0,0,0.14) !important;
  display: none;
  align-items: center !important;
  gap: 10px !important;
  z-index: 10500 !important;
}
.toast-icon {
  width: 30px !important; height: 30px !important;
  border-radius: 8px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important; font-size: 13px !important;
}
#toast #toast-msg { font-size: 13px !important; font-weight: 700 !important; color: #F0F4FF !important; line-height: 1.3; }
#toast #toast-sub { font-size: 11px !important; color: #7A8BA8 !important; margin-top: 2px !important; line-height: 1.3; }
#toast button { color: #556070 !important; background: none !important; border: none !important; cursor: pointer !important; padding: 2px !important; font-size: 16px !important; flex-shrink: 0 !important; }

/* == 2. TOP NAV == */
.top-nav {
  height: calc(var(--nav-height) + env(safe-area-inset-top, 0px)) !important;
  min-height: calc(var(--nav-height) + env(safe-area-inset-top, 0px)) !important;
  padding-top: env(safe-area-inset-top, 0px) !important;
  background: var(--bg-card) !important;
  border-bottom: 1px solid var(--border-light);
  box-shadow: none !important;
}
.top-nav.scrolled { box-shadow: 0 1px 0 rgba(0,0,0,0.07), 0 2px 12px rgba(0,0,0,0.06) !important; }

/* == 3. BOTTOM NAV == */
#bottom-nav {
  background: var(--bg-card) !important;
  border-top: 1px solid var(--border-light) !important;
  box-shadow: none !important;
  height: calc(var(--bnav-height) + env(safe-area-inset-bottom, 0px)) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}
.bnav-item { min-height: 48px !important; min-width: 48px !important; -webkit-tap-highlight-color: transparent !important; }
.bnav-item.active .bnav-icon-wrap { width: 48px !important; height: 28px !important; border-radius: 14px !important; background: var(--primary-light) !important; }
.bnav-item .bnav-icon { font-size: 19px !important; }
.bnav-item .bnav-label { font-size: 10px !important; font-weight: 600 !important; }

/* == 4. CARDS == */
.card, .stat-card, .vendor-card, .event-card, .task-card, .lead-card, .crm-panel {
  border-radius: 8px !important;
  border: 1px solid rgba(0,0,0,0.07) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 6px rgba(0,0,0,0.03) !important;
  background: #fff !important;
}

/* == 5. BUTTONS == */
.btn-gold, .btn-primary {
  min-height: 44px !important; height: 44px !important;
  border-radius: 6px !important;
  font-size: 14px !important; font-weight: 700 !important;
  padding: 0 18px !important;
  background: linear-gradient(160deg, var(--primary) 0%, #4a57e8 100%) !important;
  box-shadow: 0 2px 10px rgba(91,108,248,0.30) !important;
  letter-spacing: -0.1px !important;
}
.btn-gold:active, .btn-primary:active {
  transform: scale(0.96) !important;
  box-shadow: 0 1px 4px rgba(91,108,248,0.15) !important;
  transition: transform 60ms ease, box-shadow 60ms ease !important;
}
.btn-secondary, .btn-outline {
  min-height: 44px !important; height: 44px !important;
  border-radius: 6px !important;
  font-size: 14px !important; font-weight: 600 !important;
  padding: 0 16px !important;
  border: 1.5px solid var(--border) !important;
  background: var(--bg-card) !important;
}
.btn-secondary:active, .btn-outline:active { transform: scale(0.96) !important; background: var(--surface) !important; transition: transform 60ms ease !important; }
.btn-sm.btn-gold, .btn-gold.btn-sm, .btn-sm.btn-primary, .btn-primary.btn-sm {
  min-height: 36px !important; height: 36px !important; font-size: 12.5px !important; padding: 0 12px !important; border-radius: 8px !important;
}
.btn-sm.btn-secondary, .btn-secondary.btn-sm, .btn-sm.btn-outline, .btn-outline.btn-sm {
  min-height: 36px !important; height: 36px !important; font-size: 12.5px !important; padding: 0 12px !important; border-radius: 8px !important;
}

/* == 6. INPUTS == */
.form-input {
  min-height: 44px !important; height: 44px !important;
  border-radius: 6px !important;
  border: 1.5px solid var(--border-light) !important;
  background: var(--bg-card) !important;
  font-size: 14px !important; padding: 0 14px !important;
  box-shadow: none !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
.form-input:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(91,108,248,0.12) !important; background: #fff !important; }
select.form-input, input.form-input[type="date"] { min-height: 44px !important; height: 44px !important; }
textarea.form-input { height: auto !important; min-height: 80px !important; padding: 10px 14px !important; }
.form-label { font-size: 12px !important; font-weight: 600 !important; color: var(--text-secondary) !important; margin-bottom: 5px !important; }

/* == 7. MODALS == */
.modal-overlay { align-items: flex-end !important; }
.modal-box {
  border-radius: 14px 14px 0 0 !important;
  max-height: 92dvh !important;
  border: none !important;
  box-shadow: 0 -4px 32px rgba(0,0,0,0.14) !important;
}
.modal-hd { padding: 16px 18px 12px !important; }
.modal-title { font-size: 16px !important; font-weight: 700 !important; letter-spacing: -0.2px !important; }
.modal-body { padding: 12px 18px 16px !important; }
.modal-footer { padding: 10px 18px 16px !important; }

/* == 8. BADGES == */
.badge { border-radius: 100px !important; font-size: 11px !important; font-weight: 700 !important; padding: 2px 9px !important; }

/* == 9. FAB == */
#new-quote-fab, #cart-fab {
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(91,108,248,0.32), 0 2px 6px rgba(0,0,0,0.10) !important;
  min-height: 52px !important;
}
#new-quote-fab:active, #cart-fab:active { transform: scale(0.94) !important; transition: transform 60ms ease !important; }

/* == 10. TYPOGRAPHY == */
.page-title { font-size: 19px !important; font-weight: 800 !important; letter-spacing: -0.4px !important; }
.page-sub { font-size: 12.5px !important; color: var(--text-muted) !important; font-weight: 400 !important; }

/* == 11. SCROLLBAR == */
::-webkit-scrollbar { width: 3px !important; height: 3px !important; }
::-webkit-scrollbar-track { background: transparent !important; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12) !important; border-radius: 2px !important; }

/* == 12. SYSTEM == */
html, body { overscroll-behavior: none !important; }
.screen { overscroll-behavior-y: contain !important; }
button, [onclick], .card, input, select, textarea { -webkit-tap-highlight-color: transparent !important; }
::selection { background: rgba(91,108,248,0.15) !important; }

/* == 13. TABLET (600px+) == */
@media (min-width: 600px) {
  .modal-overlay { align-items: center !important; }
  .modal-box { border-radius: 16px !important; max-height: min(88vh, 680px) !important; box-shadow: 0 24px 64px rgba(0,0,0,0.18) !important; }
  .btn-gold, .btn-primary { min-height: 42px !important; height: 42px !important; font-size: 13.5px !important; }
  .btn-secondary, .btn-outline { min-height: 42px !important; height: 42px !important; font-size: 13.5px !important; }
  .form-input:not(textarea) { min-height: 42px !important; height: 42px !important; }
  select.form-input { min-height: 42px !important; height: 42px !important; }
  #toast { bottom: 24px !important; right: 24px !important; }
}

/* == 14. DESKTOP (1024px+) == */
@media (min-width: 1024px) {
  #bottom-nav { display: none !important; }
  #toast { bottom: 28px !important; right: 28px !important; max-width: 340px !important; }
  .btn-gold, .btn-primary { min-height: 38px !important; height: 38px !important; font-size: 13px !important; }
  .btn-secondary, .btn-outline { min-height: 38px !important; height: 38px !important; font-size: 13px !important; }
  .form-input:not(textarea) { min-height: 38px !important; height: 38px !important; }
  select.form-input { min-height: 38px !important; height: 38px !important; }
  .modal-body { padding: 16px 24px 20px !important; }
}

/* === END NATIVE POLISH === */

/* ╔══════════════════════════════════════════════════════════════╗
   ║   PERFORMANCE + VISUAL POLISH — Planets, Glass, Counters    ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── GPU-layer hints for animated elements ── */
.crm-hero-native, .stat-card, .kpi-card-clickable,
.modal-box, #bottom-sheet, .top-nav, #bottom-nav,
.more-menu-sheet, .bnav-item { will-change: auto; }
.modal-box.open, #bottom-sheet.open { will-change: transform; }

/* ── Contain layout for static cards ── */


/* Dashboard hero planet decorations */
.crm-hero-planets {
  position: absolute;
  top: -25%;
  right: -6%;
  width: 160px;
  height: 160px;
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 380px) {
  .crm-hero-planets { width: 120px; height: 120px; top: -20%; right: -4%; }
}


/* KPI Cards — clean, sharp */
#dash-kpi-grid .stat-card {
  padding: 14px !important;
  border-radius: 8px !important;
}
#dash-kpi-grid .stat-card:active { transform: scale(0.97) !important; }

/* KPI value — bold tabular */
.crm-kpi-value, .layout-kpi-block__value {
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.04em !important;
}

/* KPI icon — round pill */
.crm-kpi-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
}


/* Reduce paint on inactive tabs */
@media (prefers-reduced-motion: reduce) {
  .planet-orbit-1, .planet-orbit-2, .planet-orbit-3 { animation: none; }
  .kpi-animated, .kpi-animated .crm-kpi-value { animation: none; }
}


/* ── CLEAN GLASS SURFACES — no blur, hardware-friendly ── */
/* Cards: slightly opaque white with light border */
.card, .stat-card, .crm-panel {
  background: rgba(255,255,255,0.96) !important;
  border: 1px solid rgba(0,0,0,0.07) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 8px rgba(15,17,35,0.04) !important;
}
/* Modal: crisp white */
.modal-box {
  background: #fff !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.14), 0 1px 6px rgba(0,0,0,0.06) !important;
}
/* Bottom sheet: crisp white with top shadow */
#bottom-sheet, #more-menu-sheet {
  background: #fff !important;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.10), 0 -1px 0 rgba(0,0,0,0.05) !important;
}
/* KPI card: clean with left accent */
#dash-kpi-grid .stat-card {
  background: #fff !important;
  border-left: 3px solid var(--primary) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 4px rgba(15,17,35,0.06) !important;
}

/* ═════ END PERFORMANCE POLISH ═════ */

.skeleton-block { display: grid; gap: 10px; padding: 10px 0; }
.skeleton-line {
  height: 12px;
  border-radius: 8px;
  background: linear-gradient(90deg, #eef2ff 25%, #e2e8f0 50%, #eef2ff 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.2s infinite;
}
@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ═══ Clients list: mobile cards vs desktop table ═══ */
.clients-mobile-view { display: none; }
.clients-desktop-view { display: block; }
.page-layout .hide-mobile { display: inline; }
@media (max-width: 768px) {
  .clients-mobile-view { display: block; }
  .clients-desktop-view { display: none; }
  .page-layout .hide-mobile { display: none !important; }
}

/* ═══ Team chat (sidebar + modal bubbles) ═══ */
.chat-room-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  border-radius: 10px;
  transition: background 0.15s;
  position: relative;
}
.chat-room-item:hover { background: rgba(26, 115, 232, 0.07); }
.chat-room-item.active { background: rgba(26, 115, 232, 0.13); }
.chat-msg-bubble { max-width: 72%; word-break: break-word; }
.chat-input-area {
  border-top: 1px solid var(--border);
  background: var(--white);
  padding: 12px 16px;
}
.chat-emoji-btn:hover { background: var(--surface) !important; }
.chat-msg-row:hover .chat-msg-actions { opacity: 1 !important; }
.chat-msg-actions { opacity: 0; transition: opacity 0.15s; }
.chat-unread-badge {
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* ═══ Global full-screen processing overlay (mutations, PDF, saves) ═══ */
.app-process-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
  background: rgba(15, 20, 42, 0.48);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  pointer-events: auto;
  touch-action: none;
  isolation: isolate;
}
.app-process-overlay-card {
  width: min(320px, 100%);
  border-radius: 16px;
  padding: 28px 24px 24px;
  background: var(--white);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22);
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
body.dark-mode .app-process-overlay-card {
  background: #1a2138;
  border-color: rgba(255, 255, 255, 0.08);
}
.app-process-spinner-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}
.app-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid rgba(91, 108, 248, 0.22);
  border-top-color: var(--primary);
  animation: app-spin 0.75s linear infinite;
}
.app-spinner-lg {
  width: 40px;
  height: 40px;
  border-width: 3px;
}
@keyframes app-spin {
  to { transform: rotate(360deg); }
}
.app-process-label-wrap { display: flex; flex-direction: column; gap: 4px; }
.app-process-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
body.dark-mode .app-process-label { color: #f0f2ff; }
.app-process-sublabel {
  font-size: 12px;
  color: var(--text-muted);
}
#wizard-steps .wizard-step.fade-in {
  animation: wiz-step-in 0.22s ease-out both;
}
@keyframes wiz-step-in {
  from { opacity: 0.88; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.wiz-review-footer { padding-bottom: 8px; }

/* Unified Material-style tabs/chips */
.material-tabs-scroll {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.material-tabs-scroll::-webkit-scrollbar { display: none; }

.material-tab,
.ev-filter-tab,
.ws3-cat-tab {
  border-radius: 999px !important;
  border: 1px solid rgba(91, 108, 248, 0.22) !important;
  background: #fff !important;
  color: var(--text-secondary) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease !important;
}

.material-tab:hover,
.ev-filter-tab:hover,
.ws3-cat-tab:hover {
  border-color: rgba(91, 108, 248, 0.42) !important;
  box-shadow: 0 2px 7px rgba(91, 108, 248, 0.16) !important;
}

.material-tab.active,
.ev-filter-tab.active,
.ws3-cat-tab.active {
  background: #e8f0fe !important;
  color: var(--primary) !important;
  border-color: rgba(91, 108, 248, 0.54) !important;
  box-shadow: 0 2px 10px rgba(91, 108, 248, 0.2) !important;
}

.gallery-service-tab {
  min-width: 132px !important;
  border-radius: 16px !important;
}

.gallery-service-tab.active {
  background: linear-gradient(135deg, #1a73e8 0%, #6b5cff 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
}