/* ==========================================================================
   LEGACY AUTO CARE — STYLESHEET
   --------------------------------------------------------------------------
   This file controls how everything looks. The HTML defines the structure,
   this file defines the appearance.

   Sections in this file (search these labels to jump around):
     1. RESET & ROOT VARIABLES
     2. GLOBAL LAYOUT (body, sidebar, main)
     3. SIDEBAR
     4. TOPBAR
     5. CONTENT & PAGES
     6. CARDS
     7. STAT CARDS
     8. SECTION HEADERS
     9. TABLES & BADGES
    10. ACTIVITY & BOOKINGS
    11. LEADS PIPELINE
    12. CHART (revenue bars)
    13. CUSTOMERS
    14. INVOICES
    15. MODALS & FORMS
    16. SEARCH BAR
    17. QUICK ACTIONS
    18. CALENDAR
    19. SETTINGS
    20. TOASTS
    21. RESPONSIVE / MOBILE
   ========================================================================== */


/* ==========================================================================
   1. RESET & ROOT VARIABLES
   "Reset" removes default browser spacing so we start from a clean slate.
   Variables (the --gold, --bg, etc) let us define colors ONCE and reuse
   them. Change --gold here and every gold element in the app updates.
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Gold palette — our brand colors */
  --gold: #D4AF37;
  --gold-l: #F0CC55;
  --gold-d: #A88A1A;
  --gold-pale: rgba(212, 175, 55, .1);

  /* Dark backgrounds — layered from darkest to lightest */
  --bg:  #0C0C0E;
  --bg2: #111114;
  --bg3: #18181C;
  --bg4: #1E1E24;
  --bg5: #25252D;

  /* Borders */
  --border:  rgba(212, 175, 55, .15);
  --border2: rgba(255, 255, 255, .06);

  /* Text colors — from brightest (main) to faintest (subtle) */
  --text:  #F5F5F5;
  --text2: rgba(245, 245, 245, .6);
  --text3: rgba(245, 245, 245, .35);

  /* Status colors */
  --green:  #2ECC71;
  --red:    #E74C3C;
  --blue:   #3498DB;
  --orange: #F39C12;

  /* Layout */
  --sidebar: 220px;
}

html {
  font-size: 14px;
}


/* ==========================================================================
   2. GLOBAL LAYOUT
   The body is a flex container: sidebar on left, main area on right.
   ========================================================================== */
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  min-height: 100vh;
  display: flex;
  overflow: hidden;
}

.main {
  flex: 1;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  padding: 24px 28px;
}


/* ==========================================================================
   3. SIDEBAR (left navigation)
   ========================================================================== */
.sidebar {
  width: var(--sidebar);
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: 100vh;
  position: sticky;
  top: 0;
}

.sidebar-logo {
  padding: 24px 20px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-shield {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.logo-text {
  display: flex;
  flex-direction: column;
}

.logo-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1;
}

.logo-sub {
  font-size: 7px;
  letter-spacing: 2px;
  color: var(--gold);
  text-transform: uppercase;
  margin-top: 2px;
}

.nav {
  flex: 1;
  padding: 12px 0;
  overflow-y: auto;
}

.nav-section {
  padding: 8px 16px 4px;
  font-size: 7px;
  letter-spacing: 3px;
  color: var(--text3);
  text-transform: uppercase;
  font-weight: 600;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  cursor: pointer;
  transition: all .2s;
  border-left: 2px solid transparent;
  margin: 1px 0;
}

.nav-item:hover {
  background: var(--gold-pale);
  color: var(--gold);
}

.nav-item.active {
  background: var(--gold-pale);
  border-left-color: var(--gold);
  color: var(--gold);
}

.nav-item .ni-icon {
  font-size: 15px;
  width: 18px;
  text-align: center;
}

.nav-item .ni-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .3px;
}

.nav-item .ni-badge {
  margin-left: auto;
  background: var(--gold);
  color: #000;
  font-size: 8px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
}

.sidebar-footer {
  padding: 16px;
  border-top: 1px solid var(--border);
}

.user-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--bg3);
  border-radius: 8px;
  cursor: pointer;
}

.user-av {
  width: 30px;
  height: 30px;
  background: var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #000;
  flex-shrink: 0;
}

.user-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.user-name {
  font-size: 11px;
  font-weight: 600;
}

.user-role {
  font-size: 9px;
  color: var(--gold);
  letter-spacing: 1px;
  text-transform: uppercase;
}


/* ==========================================================================
   4. TOPBAR (header with page title and action buttons)
   ========================================================================== */
.topbar {
  padding: 16px 28px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.topbar-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.topbar-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.topbar-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 1px;
}

.topbar-sub {
  font-size: 10px;
  color: var(--text2);
  letter-spacing: .5px;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tb-btn {
  padding: 8px 18px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text2);
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s;
  border-radius: 4px;
}

.tb-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.tb-btn.gold {
  background: var(--gold);
  color: #000;
  border-color: var(--gold);
}

.tb-btn.gold:hover {
  background: var(--gold-l);
}

.tb-notif {
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  background: none;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  position: relative;
}

/* The red count dot on the bell icon — count comes from JS via data-count attribute.
   Badge is hidden when data-count is 0, empty, or missing. */
.tb-notif::after {
  content: attr(data-count);
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--red);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 6px;
  min-width: 14px;
  text-align: center;
  box-sizing: border-box;
}

/* Hide the badge when there's nothing to show */
.tb-notif:not([data-count])::after,
.tb-notif[data-count="0"]::after,
.tb-notif[data-count=""]::after {
  display: none;
}


/* ==========================================================================
   5. PAGES
   Each "page" (Dashboard, Leads, etc) is a div with class="page".
   Only the one with class="page active" is visible at any time.
   Switching pages = adding/removing "active" (done in app.js).
   ========================================================================== */
.page {
  display: none;
}

.page.active {
  display: block;
}


/* ==========================================================================
   6. CARDS
   The main "container" look — dark panel with subtle border.
   ========================================================================== */
.card {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 20px;
}

.card-gold {
  border-color: var(--border);
}


/* ==========================================================================
   7. STAT CARDS (top of dashboard — revenue, leads, etc)
   ========================================================================== */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}

.stat-card {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
  transition: border-color .2s;
}

.stat-card:hover {
  border-color: var(--border);
}

/* Gold glow line on top of stat card when hovered */
.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  opacity: 0;
}

.stat-card:hover::before {
  opacity: 1;
}

.stat-label {
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--text3);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 10px;
}

.stat-val {
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px;
  font-weight: 300;
  color: var(--text);
  line-height: 1;
}

.stat-change {
  font-size: 9px;
  margin-top: 6px;
}

.stat-change.up   { color: var(--green); }
.stat-change.down { color: var(--red); }

.stat-icon {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 20px;
  opacity: .15;
}


/* ==========================================================================
   GRID UTILITIES
   Reusable column layouts.
   ========================================================================== */
.grid-2   { display: grid; grid-template-columns: 1fr 1fr;     gap: 16px; }
.grid-3   { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.grid-7-5 { display: grid; grid-template-columns: 1.4fr 1fr;   gap: 16px; }


/* ==========================================================================
   8. SECTION HEADERS (the little gold bar next to "Today's Bookings" etc)
   ========================================================================== */
.sec-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.sec-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* The small gold vertical bar before each section title */
.sec-title::before {
  content: '';
  display: block;
  width: 3px;
  height: 14px;
  background: var(--gold);
  border-radius: 2px;
}

.sec-link {
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--gold);
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  background: none;
  font-family: 'Montserrat', sans-serif;
}


/* ==========================================================================
   9. TABLES & BADGES
   ========================================================================== */
.tbl {
  width: 100%;
  border-collapse: collapse;
}

.tbl th {
  padding: 8px 12px;
  text-align: left;
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--text3);
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 1px solid var(--border2);
}

.tbl td {
  padding: 10px 12px;
  font-size: 11px;
  border-bottom: 1px solid rgba(255, 255, 255, .03);
  vertical-align: middle;
}

.tbl tr:hover td {
  background: rgba(255, 255, 255, .02);
}

.tbl tr:last-child td {
  border-bottom: none;
}

/* Colored pill badges ("Paid", "Overdue", etc) */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.badge-green  { background: rgba(46, 204, 113, .15);  color: var(--green); }
.badge-red    { background: rgba(231, 76, 60, .15);   color: var(--red); }
.badge-gold   { background: rgba(212, 175, 55, .15);  color: var(--gold); }
.badge-blue   { background: rgba(52, 152, 219, .15);  color: var(--blue); }
.badge-orange { background: rgba(243, 156, 18, .15);  color: var(--orange); }
.badge-grey   { background: rgba(255, 255, 255, .08); color: var(--text2); }


/* ==========================================================================
   10. ACTIVITY FEED & BOOKINGS
   ========================================================================== */
.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
}

.activity-item:last-child {
  border-bottom: none;
}

.act-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}

.act-content { flex: 1; }

.act-text {
  font-size: 11px;
  color: var(--text2);
  line-height: 1.5;
}

.act-text strong {
  color: var(--text);
  font-weight: 600;
}

.act-time {
  font-size: 9px;
  color: var(--text3);
  margin-top: 2px;
}

/* Booking cards (Thabo Nkosi at 08:30, etc) */
.booking-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  background: var(--bg3);
  border-radius: 8px;
  border: 1px solid var(--border2);
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color .2s;
}

.booking-item:hover {
  border-color: var(--border);
}

.booking-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 44px;
  flex-shrink: 0;
}

.booking-time-hr {
  font-size: 14px;
  font-weight: 700;
  color: var(--gold);
}

.booking-time-min {
  font-size: 9px;
  color: var(--text3);
}

.booking-vline {
  width: 1px;
  height: 36px;
  background: var(--border);
  flex-shrink: 0;
}

.booking-detail { flex: 1; }

.booking-name {
  font-size: 12px;
  font-weight: 600;
}

.booking-svc {
  font-size: 10px;
  color: var(--text2);
  margin-top: 2px;
}

.booking-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.booking-actions {
  display: flex;
  gap: 6px;
}

.bk-btn {
  padding: 5px 10px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text2);
  font-size: 9px;
  font-family: 'Montserrat', sans-serif;
  border-radius: 4px;
  cursor: pointer;
  transition: all .2s;
}

.bk-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.bk-btn.wa {
  border-color: rgba(37, 211, 102, .3);
  color: #25d366;
}


/* ==========================================================================
   11. LEADS PIPELINE (Kanban board: New Lead → Contacted → ... → Won/Lost)
   ========================================================================== */
.pipeline {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  align-items: start;
}

.pipeline-col {
  background: var(--bg3);
  border-radius: 8px;
  padding: 10px;
}

.pipeline-col-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border2);
}

.pipeline-col-name {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text2);
}

.pipeline-col-count {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.3);
  padding: 2px 8px;
  border-radius: 10px;
  color: var(--gold);
  min-width: 22px;
  text-align: center;
  display: inline-block;
}

.lead-card {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: border-color .2s;
}

.lead-card:hover {
  border-color: var(--border);
}

.lead-name {
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 4px;
}

.lead-svc {
  font-size: 9px;
  color: var(--text2);
  margin-bottom: 6px;
}

.lead-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lead-val {
  font-size: 10px;
  color: var(--gold);
  font-weight: 600;
}

.lead-src {
  font-size: 8px;
  color: var(--text3);
}

.lead-actions {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}

.lc-btn {
  padding: 3px 7px;
  border: 1px solid var(--border2);
  background: none;
  color: var(--text3);
  font-size: 8px;
  font-family: 'Montserrat', sans-serif;
  border-radius: 3px;
  cursor: pointer;
  transition: all .2s;
}

.lc-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}


/* ==========================================================================
   12. CHART (the revenue bar chart on dashboard)
   ========================================================================== */
.chart-wrap {
  height: 120px;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 0 4px;
}

.chart-bar-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.chart-bar {
  width: 100%;
  background: linear-gradient(to top, var(--gold-d), var(--gold));
  border-radius: 3px 3px 0 0;
  cursor: pointer;
}

.chart-bar:hover { opacity: .8; }

.chart-label {
  font-size: 8px;
  color: var(--text3);
}


/* ==========================================================================
   13. CUSTOMER CARDS
   ========================================================================== */
.cust-card {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 16px;
  transition: border-color .2s;
  cursor: pointer;
}

.cust-card:hover {
  border-color: var(--border);
}

.cust-av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-d), var(--gold));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #000;
  margin-bottom: 10px;
}

.cust-name {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 2px;
}

.cust-info {
  font-size: 10px;
  color: var(--text2);
  margin-bottom: 8px;
}

.cust-stats {
  display: flex;
  gap: 12px;
}

.cust-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cust-stat-val {
  font-size: 12px;
  font-weight: 600;
  color: var(--gold);
}

.cust-stat-lbl {
  font-size: 8px;
  color: var(--text3);
  letter-spacing: .5px;
  text-transform: uppercase;
}


/* ==========================================================================
   14. INVOICES (single row layout)
   ========================================================================== */
.inv-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg3);
  border-radius: 8px;
  margin-bottom: 6px;
  border: 1px solid var(--border2);
  cursor: pointer;
  transition: border-color .2s;
}

.inv-row:hover {
  border-color: var(--border);
}

.inv-num {
  font-size: 10px;
  font-weight: 600;
  color: var(--gold);
  width: 80px;
  flex-shrink: 0;
}

.inv-cust {
  flex: 1;
  font-size: 11px;
}

.inv-svc {
  font-size: 9px;
  color: var(--text2);
}

.inv-amount {
  font-size: 13px;
  font-weight: 700;
  width: 80px;
  text-align: right;
}

.inv-actions {
  display: flex;
  gap: 6px;
  margin-left: 8px;
}


/* ==========================================================================
   15. MODALS & FORMS (pop-up dialogs)
   ========================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;                               /* covers entire screen */
  background: rgba(0, 0, 0, .7);
  z-index: 1000;
  display: none;                          /* hidden by default */
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);             /* blurs everything behind */
}

.modal-overlay.open {
  display: flex;                          /* shown when .open is added via JS */
}

.modal {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px;
  width: 480px;
  max-width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.modal-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 600;
}

.modal-close {
  background: none;
  border: 1px solid var(--border2);
  color: var(--text2);
  width: 28px;
  height: 28px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.modal-close:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.form-group {
  margin-bottom: 14px;
}

.form-label {
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--gold-d);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
}

.form-input {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border2);
  color: var(--text);
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 300;
  padding: 10px 14px;
  border-radius: 6px;
  outline: none;
  transition: border-color .2s;
}

.form-input:focus {
  border-color: rgba(212, 175, 55, .4);
}

.form-input::placeholder {
  color: var(--text3);
}

select.form-input option {
  background: var(--bg3);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-submit {
  width: 100%;
  padding: 12px;
  background: var(--gold);
  color: #000;
  border: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  margin-top: 6px;
}

.form-submit:hover {
  background: var(--gold-l);
}


/* ==========================================================================
   16. SEARCH BAR
   ========================================================================== */
.search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 8px 14px;
  margin-bottom: 18px;
}

.search-bar:focus-within {
  border-color: var(--border);
}

.search-bar input {
  background: none;
  border: none;
  color: var(--text);
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  outline: none;
  flex: 1;
}

.search-bar input::placeholder {
  color: var(--text3);
}


/* ==========================================================================
   17. QUICK ACTION BUTTONS (dashboard)
   ========================================================================== */
.quick-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.qa-btn {
  flex: 1;
  padding: 12px;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 8px;
  color: var(--text2);
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.qa-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--gold-pale);
}

.qa-icon {
  font-size: 20px;
}


/* ==========================================================================
   18. CALENDAR
   ========================================================================== */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cal-day-name {
  text-align: center;
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--text3);
  text-transform: uppercase;
  padding: 6px 0;
}

.cal-day {
  min-height: 70px;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 6px;
  padding: 6px;
  cursor: pointer;
  transition: border-color .2s;
}

.cal-day:hover {
  border-color: var(--border);
}

.cal-day.today {
  border-color: var(--gold);
}

.cal-day.other-month {
  opacity: .35;
}

.cal-day-num {
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 4px;
}

.cal-event {
  background: var(--gold-pale);
  border-left: 2px solid var(--gold);
  padding: 2px 4px;
  border-radius: 2px;
  font-size: 8px;
  color: var(--gold);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-event.blue  { background: rgba(52, 152, 219, .1); border-color: var(--blue);  color: var(--blue); }
.cal-event.green { background: rgba(46, 204, 113, .1); border-color: var(--green); color: var(--green); }


/* ==========================================================================
   19. SETTINGS PAGE
   ========================================================================== */
.settings-section {
  margin-bottom: 24px;
}

.settings-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text2);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border2);
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-title::before {
  content: '';
  display: block;
  width: 3px;
  height: 12px;
  background: var(--gold);
  border-radius: 2px;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .03);
}

.settings-row-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settings-row-label {
  font-size: 12px;
  font-weight: 500;
}

.settings-row-sub {
  font-size: 9px;
  color: var(--text3);
}

/* Toggle switch (for notification preferences) */
.toggle {
  width: 40px;
  height: 22px;
  background: var(--bg4);
  border-radius: 11px;
  position: relative;
  cursor: pointer;
  transition: background .2s;
  flex-shrink: 0;
}

.toggle.on {
  background: var(--gold);
}

.toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
}

.toggle.on::after {
  transform: translateX(18px);
}


/* ==========================================================================
   20. TOAST NOTIFICATIONS (pop-up alerts bottom-right)
   ========================================================================== */
.toast-wrap {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 18px;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 240px;
  animation: slideIn .3s ease;
}

.toast.success {
  border-color: rgba(46, 204, 113, .4);
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}


/* ==========================================================================
   21. RESPONSIVE / MOBILE
   When the screen is narrower than 900px, we switch to a mobile layout:
   - Hide the left sidebar
   - Show the bottom mobile nav
   - Collapse grids into single columns
   ========================================================================== */
.mobile-nav {
  display: none;
}

@media (max-width: 900px) {
  .sidebar {
    display: none;
  }

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

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

  .grid-7-5,
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }

  .mobile-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg2);
    border-top: 1px solid var(--border);
    padding: 8px 0 12px;
    justify-content: space-around;
    z-index: 500;
  }

  .mob-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 4px 12px;
  }

  .mob-nav-icon {
    font-size: 20px;
  }

  .mob-nav-label {
    font-size: 8px;
    letter-spacing: 1px;
    color: var(--text3);
    text-transform: uppercase;
  }

  .mob-nav-item.active .mob-nav-label {
    color: var(--gold);
  }

  .main {
    padding-bottom: 72px;
  }

  .content {
    padding: 16px;
  }

  .quick-actions {
    flex-wrap: wrap;
  }

  .qa-btn {
    flex: 1 1 40%;
  }

  .topbar-right .tb-btn:not(.gold) {
    display: none;
  }
}


/* ==========================================================================
   22. EMPTY STATES & MISC ADDITIONS
   Shown when a list (leads, invoices, activity) has nothing in it.
   ========================================================================== */
.empty-state {
  padding: 32px 16px;
  text-align: center;
  font-size: 11px;
  color: var(--text3);
  font-style: italic;
  background: var(--bg3);
  border: 1px dashed var(--border2);
  border-radius: 8px;
}

.empty-state-sm {
  text-align: center;
  font-size: 18px;
  color: var(--text3);
  padding: 8px 0;
  opacity: .4;
}

/* Disabled buttons (e.g. ◀ on a lead already at the first stage) */
button:disabled {
  opacity: .35;
  cursor: not-allowed;
}

button:disabled:hover {
  border-color: var(--border2) !important;
  color: var(--text3) !important;
  background: none !important;
}


/* ==========================================================================
   23. LOGIN SCREEN
   Full-screen overlay shown when no user is logged in.
   ========================================================================== */
.login-screen {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, #1a1a20 0%, var(--bg) 100%);
  z-index: 3000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}

.login-screen.open {
  display: flex;
}

.login-card {
  width: 100%;
  max-width: 420px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 36px 32px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .5), 0 0 60px rgba(212, 175, 55, .08);
}

.login-head {
  text-align: center;
  margin-bottom: 32px;
}

.login-head svg {
  width: 52px;
  height: 52px;
  margin-bottom: 12px;
}

.login-head .login-brand {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--text);
  margin-bottom: 4px;
}

.login-head .login-sub {
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--gold);
  text-transform: uppercase;
}

.login-prompt {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--text3);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 16px;
}

.login-users {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.login-user-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 10px;
  cursor: pointer;
  transition: all .2s;
}

.login-user-tile:hover,
.login-user-tile.selected {
  border-color: var(--gold);
  background: var(--gold-pale);
}

.login-user-av {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: #000;
  flex-shrink: 0;
}

.login-user-av.gold  { background: linear-gradient(135deg, var(--gold-d), var(--gold)); }
.login-user-av.blue  { background: linear-gradient(135deg, #2980b9, #3498db); color: #fff; }
.login-user-av.green { background: linear-gradient(135deg, #1e8449, #2ecc71); color: #fff; }

.login-user-info {
  flex: 1;
}

.login-user-name {
  font-size: 13px;
  font-weight: 600;
}

.login-user-role {
  font-size: 9px;
  color: var(--gold);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 2px;
}

.login-pin-wrap {
  display: none;
}

.login-pin-wrap.show {
  display: block;
  animation: fadeIn .25s ease;
}

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

.login-pin-input {
  width: 100%;
  padding: 14px;
  background: var(--bg3);
  border: 1px solid var(--border2);
  color: var(--gold);
  font-family: 'Courier New', monospace;
  font-size: 20px;
  letter-spacing: 14px;
  text-align: center;
  border-radius: 8px;
  outline: none;
  margin-bottom: 12px;
}

.login-pin-input:focus {
  border-color: var(--gold);
}

.login-error {
  color: var(--red);
  font-size: 11px;
  text-align: center;
  margin-bottom: 10px;
  min-height: 16px;
}

.login-hint {
  font-size: 9px;
  color: var(--text3);
  text-align: center;
  margin-top: 18px;
  line-height: 1.5;
}


/* ==========================================================================
   24. NOTIFICATIONS DROPDOWN (bell icon)
   ========================================================================== */
.tb-notif {
  position: relative;  /* already set, for the badge */
}

.tb-notif.empty::after {
  display: none;  /* hide the red count dot if there are no notifications */
}

.notif-panel {
  position: absolute;
  top: 64px;
  right: 28px;
  width: 380px;
  max-width: calc(100vw - 32px);
  max-height: 70vh;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .4);
  z-index: 900;
  display: none;
  flex-direction: column;
  overflow: hidden;
}

.notif-panel.open {
  display: flex;
  animation: fadeIn .15s ease;
}

.notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border2);
}

.notif-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .5px;
}

.notif-clear {
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--gold);
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  background: none;
  font-family: 'Montserrat', sans-serif;
}

.notif-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
}

.notif-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s;
  align-items: flex-start;
}

.notif-item:hover {
  background: var(--bg3);
}

.notif-item .notif-icon {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}

.notif-item .notif-body {
  flex: 1;
  min-width: 0;
}

.notif-item .notif-item-title {
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 2px;
}

.notif-item .notif-item-msg {
  font-size: 10px;
  color: var(--text2);
  line-height: 1.4;
}

.notif-item .notif-dismiss {
  border: none;
  background: none;
  color: var(--text3);
  font-size: 14px;
  cursor: pointer;
  padding: 0 4px;
  align-self: flex-start;
}

.notif-item .notif-dismiss:hover {
  color: var(--red);
}

.notif-empty {
  text-align: center;
  padding: 40px 20px;
  font-size: 11px;
  color: var(--text3);
}

.notif-priority-1 { border-left: 3px solid var(--red);    padding-left: 9px; }
.notif-priority-2 { border-left: 3px solid var(--orange); padding-left: 9px; }
.notif-priority-3 { border-left: 3px solid var(--gold);   padding-left: 9px; }


/* ==========================================================================
   25. BOOKING DETAIL MODAL (bigger info panel for calendar bookings)
   ========================================================================== */
.bkd-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}

.bkd-head .bkd-av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-d), var(--gold));
  color: #000;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bkd-head .bkd-name {
  font-size: 15px;
  font-weight: 600;
}

.bkd-head .bkd-svc {
  font-size: 11px;
  color: var(--text2);
  margin-top: 2px;
}

.bkd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  margin-bottom: 16px;
}

.bkd-field {
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--text3);
  text-transform: uppercase;
  margin-bottom: 3px;
}

.bkd-value {
  font-size: 12px;
  color: var(--text);
}

.bkd-notes {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 11px;
  color: var(--text2);
  margin-bottom: 16px;
}

.bkd-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.bkd-actions > button {
  flex: 1;
  min-width: 110px;
}


/* ==========================================================================
   26. USERS LIST in Settings
   ========================================================================== */
.users-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.user-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 8px;
}

.user-row .user-av {
  width: 34px;
  height: 34px;
}

.user-row .user-row-main {
  flex: 1;
  min-width: 0;
}

.user-row .user-row-name {
  font-size: 12px;
  font-weight: 600;
}

.user-row .user-row-meta {
  font-size: 9px;
  color: var(--text3);
  margin-top: 2px;
}

.user-row select.user-role-select {
  background: var(--bg2);
  border: 1px solid var(--border2);
  color: var(--text);
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  padding: 5px 8px;
  border-radius: 4px;
  outline: none;
  text-transform: capitalize;
}

.user-row .user-del {
  padding: 4px 10px;
  border: 1px solid var(--border2);
  background: none;
  color: var(--text3);
  font-size: 10px;
  border-radius: 4px;
  cursor: pointer;
}

.user-row .user-del:hover {
  border-color: var(--red);
  color: var(--red);
}

/* "Add User" button */
.add-user-btn {
  margin-top: 10px;
  padding: 10px;
  border: 1px dashed var(--border);
  background: none;
  color: var(--gold);
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
}

.add-user-btn:hover {
  background: var(--gold-pale);
}

/* Sidebar user pill becomes a clickable menu */
.user-pill {
  position: relative;
}

.user-pill-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  display: none;
  z-index: 50;
  box-shadow: 0 10px 20px rgba(0,0,0,.4);
}

.user-pill-menu.open {
  display: block;
  animation: fadeIn .15s ease;
}

.user-pill-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  background: none;
  border: none;
  color: var(--text2);
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  cursor: pointer;
}

.user-pill-menu button:hover {
  background: var(--gold-pale);
  color: var(--gold);
}


/* ==========================================================================
   27. ROLE-BASED VISIBILITY
   Elements tagged data-role="admin" are hidden unless current user is admin.
   JavaScript adds .role-hidden to elements that shouldn't be visible.
   ========================================================================== */
.role-hidden {
  display: none !important;
}


/* Responsive tweaks for narrower screens */
@media (max-width: 600px) {
  .login-card {
    padding: 28px 20px;
  }
  .notif-panel {
    right: 12px;
    left: 12px;
    width: auto;
  }
  .bkd-grid {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   23. LUXURY POLISH PASS
   --------------------------------------------------------------------------
   Everything above this line is structural CSS. Everything below is pure
   atmosphere: deeper blacks, a breath of gold glow, gradient text on key
   numbers, cinematic entrances, refined hover elevations. All additive
   so the earlier code still works exactly as before — we're just layering
   over the top where specificity + cascade let us.

   If something feels wrong and you want to temporarily disable the polish
   to isolate the issue, comment out this whole section.
   ========================================================================== */

:root {
  /* Deeper, more filmic blacks */
  --bg:  #070709;
  --bg2: #0C0C10;
  --bg3: #131318;

  /* A proper gold gradient for high-impact surfaces */
  --gold-grad: linear-gradient(135deg, #F0CC55 0%, #D4AF37 45%, #A88A1A 100%);
  --gold-text-grad: linear-gradient(180deg, #F7DB6F 0%, #D4AF37 60%, #9A7A12 100%);

  /* Soft, layered shadows with a hint of gold warmth */
  --shadow-sm: 0 2px 6px rgba(0,0,0,.35);
  --shadow-md: 0 8px 24px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.5);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.6), 0 2px 8px rgba(212,175,55,.08);

  /* Smooth, consistent motion language */
  --ease: cubic-bezier(.2, .9, .3, 1);
  --ease-bounce: cubic-bezier(.2, .8, .2, 1.15);
}

/* A very subtle gold aura behind everything. Fixed so it doesn't scroll. */
body {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(212, 175, 55, .06), transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(212, 175, 55, .03), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}

/* =====  GRAIN OVERLAY  =====================================================
   A near-invisible SVG noise layer that gives surfaces a filmic tooth.
   z-index: -1 keeps it behind everything interactive. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0   0 0 0 0 0   0 0 0 0 0   0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  pointer-events: none;
  opacity: .35;
  z-index: -1;
  mix-blend-mode: overlay;
}

/* =====  TYPOGRAPHY REFINEMENT  ============================================
   Display font gets real letter-spacing, body stays tight and readable.  */
.logo-name,
.topbar-title,
.modal-title,
.login-brand {
  letter-spacing: 2.5px !important;
  font-weight: 500 !important;
}

/* =====  STAT VALUE GRADIENT  ==============================================
   The most important numbers in the app. Warm gradient text so they feel
   like they're lit from above.  */
.stat-val {
  background: var(--gold-text-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
          background-clip: text;
  filter: drop-shadow(0 2px 12px rgba(212, 175, 55, .15));
  letter-spacing: -.5px;
}

/* Don't gradient-fy the colored-override stat values (Paid/Pending/Overdue rows) */
.stat-val[style*="color:var(--green)"],
.stat-val[style*="color:var(--red)"],
.stat-val[style*="color:var(--orange)"] {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  filter: none !important;
}

/* =====  CARDS: DEEPER, MORE LAYERED  ======================================  */
.card {
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}

.card-gold {
  background: linear-gradient(180deg, rgba(212, 175, 55, .015) 0%, transparent 40%), var(--bg2);
}

.stat-card {
  background: linear-gradient(180deg, rgba(212, 175, 55, .02), rgba(0, 0, 0, 0)) , var(--bg3);
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(212, 175, 55, .12) inset;
}

/* The thin gold beam across the top of a stat card on hover (already defined
   upstream) — we sharpen it with a smooth transition */
.stat-card::before {
  transition: opacity .4s var(--ease);
}

/* =====  SIDEBAR ACTIVE ITEM: SUBTLE GLOW  =================================  */
.nav-item {
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}

.nav-item.active {
  box-shadow: inset 2px 0 0 var(--gold), 0 0 24px -10px rgba(212, 175, 55, .4);
}

/* =====  BUTTONS: REAL PRESS FEEDBACK  =====================================  */
button,
.tb-btn,
.bk-btn,
.lc-btn,
.qa-btn,
.form-submit {
  transition: transform .12s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}

button:active:not(:disabled),
.tb-btn:active,
.bk-btn:active,
.lc-btn:active,
.qa-btn:active,
.form-submit:active {
  transform: scale(.97);
}

.tb-btn.gold,
.form-submit {
  background: var(--gold-grad);
  box-shadow: 0 4px 14px -4px rgba(212, 175, 55, .4), inset 0 1px 0 rgba(255, 255, 255, .2);
}

.tb-btn.gold:hover,
.form-submit:hover {
  box-shadow: 0 6px 20px -4px rgba(212, 175, 55, .55), inset 0 1px 0 rgba(255, 255, 255, .25);
  filter: brightness(1.05);
}

/* =====  TOPBAR: FROSTED, STICKY ATMOSPHERE  ===============================  */
.topbar {
  background: rgba(12, 12, 16, .72);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--border);
}

/* =====  MODALS: CINEMATIC ENTRANCE  =======================================  */
.modal-overlay {
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  background: rgba(3, 3, 5, .72);
}

.modal-overlay.open .modal {
  animation: modalIn .32s var(--ease-bounce);
  box-shadow: var(--shadow-lg);
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(.96) translateY(12px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}

/* =====  PAGE ENTRANCE  ====================================================  */
.page.active {
  animation: pageEnter .4s var(--ease);
}

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

/* Staggered reveal for the dashboard stat cards */
#page-dashboard.active .stat-grid .stat-card {
  animation: revealUp .55s var(--ease) backwards;
}
#page-dashboard.active .stat-grid .stat-card:nth-child(1) { animation-delay: .04s; }
#page-dashboard.active .stat-grid .stat-card:nth-child(2) { animation-delay: .10s; }
#page-dashboard.active .stat-grid .stat-card:nth-child(3) { animation-delay: .16s; }
#page-dashboard.active .stat-grid .stat-card:nth-child(4) { animation-delay: .22s; }

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

/* =====  REVENUE CHART BARS: GRADIENT + GLOW ON HOVER  =====================  */
.chart-bar {
  background: linear-gradient(to top, var(--gold-d), var(--gold-l));
  box-shadow: 0 0 0 transparent;
  transition: box-shadow .25s var(--ease), filter .25s var(--ease);
}

.chart-bar:hover {
  box-shadow: 0 0 18px -2px rgba(212, 175, 55, .5);
  filter: brightness(1.1);
}

/* =====  LEAD CARDS, INVOICE ROWS, BOOKING ITEMS: HOVER LIFT  ==============  */
.lead-card,
.inv-row,
.booking-item,
.cust-card {
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}

.lead-card:hover,
.cust-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .5), 0 0 0 1px rgba(212, 175, 55, .08) inset;
}

.inv-row:hover,
.booking-item:hover {
  box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .5);
}

/* =====  CUSTOMER AVATAR: GLOSSIER  ========================================  */
.cust-av {
  background: var(--gold-grad);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .3),
    inset 0 -6px 8px -4px rgba(0, 0, 0, .3),
    0 4px 12px -4px rgba(212, 175, 55, .35);
}

/* =====  CALENDAR DAYS: SMOOTHER  ==========================================  */
.cal-day {
  transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}

.cal-day:hover {
  transform: scale(1.02);
  background: linear-gradient(180deg, rgba(212, 175, 55, .04), transparent), var(--bg3);
}

.cal-day.today {
  box-shadow: 0 0 20px -6px rgba(212, 175, 55, .35), inset 0 0 0 1px rgba(212, 175, 55, .25);
}

/* =====  TOAST: MORE REFINED  ==============================================  */
.toast {
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
  background: rgba(14, 14, 18, .9);
}

/* =====  LOGIN SCREEN: HERO MOMENT  ========================================  */
.login-screen {
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(212, 175, 55, .08), transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(212, 175, 55, .04), transparent 70%),
    #050506;
}

.login-card {
  box-shadow: var(--shadow-lg), 0 0 60px -10px rgba(212, 175, 55, .15);
  animation: modalIn .5s var(--ease-bounce);
}

.login-brand {
  background: var(--gold-text-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
          background-clip: text;
}

.login-user-tile {
  transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}

.login-user-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -12px rgba(212, 175, 55, .3);
}

.login-user-tile.selected {
  box-shadow: 0 0 0 1px rgba(212, 175, 55, .45), 0 10px 30px -12px rgba(212, 175, 55, .4);
}

/* =====  SCROLLBARS (Chrome/Edge/Safari)  ==================================  */
::-webkit-scrollbar        { width: 10px; height: 10px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  {
  background: rgba(212, 175, 55, .18);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(212, 175, 55, .3);
  background-clip: padding-box;
  border: 2px solid transparent;
}

/* =====  TEXT SELECTION: GOLD HIGHLIGHT  ===================================  */
::selection {
  background: rgba(212, 175, 55, .35);
  color: #fff;
}

/* =====  REDUCED MOTION SUPPORT  ===========================================
   Honour users' OS preference to disable animations. Accessibility matters. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* ==========================================================================
   24. CUSTOMER PROFILE PAGE
   ========================================================================== */
.profile-header {
  margin-bottom: 18px;
}

.profile-head-row {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}

.profile-av {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--gold-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: #000;
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .3),
    inset 0 -8px 10px -4px rgba(0, 0, 0, .3),
    0 6px 16px -4px rgba(212, 175, 55, .35);
}

.profile-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: .5px;
  display: flex;
  align-items: center;
}

.profile-meta {
  font-size: 11px;
  color: var(--text2);
  margin-top: 4px;
  letter-spacing: .3px;
}

.profile-head-stats {
  display: flex;
  gap: 16px;
  flex-shrink: 0;
}

.profile-stat {
  text-align: center;
  min-width: 64px;
}

.profile-stat-val {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--gold);
}

.profile-stat-lbl {
  font-size: 8px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text3);
  margin-top: 2px;
}

.profile-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 16px;
  align-items: start;
}

@media (max-width: 900px) {
  .profile-grid {
    grid-template-columns: 1fr;
  }
  .profile-head-stats {
    flex-wrap: wrap;
  }
}

.profile-field-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
  font-size: 11px;
}

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

.profile-field-label {
  color: var(--text3);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 600;
  align-self: center;
}

.profile-notes {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--bg3);
  border-left: 2px solid var(--gold);
  border-radius: 4px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--text2);
}

.profile-notes strong {
  color: var(--gold-d);
  letter-spacing: 1px;
  font-size: 9px;
  text-transform: uppercase;
}

/* Vehicle list — richer UI with makeModel + year/colour/reg badges,
   plus inline edit-in-place that slides open below the card header. */
.vehicles-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vehicle-card {
  padding: 12px 14px;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 10px;
  font-size: 12px;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}

.vehicle-card:hover {
  border-color: var(--border);
}

.vehicle-card-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vehicle-icon {
  color: var(--gold);
  display: inline-flex;
  align-items: center;
}

.vehicle-name {
  flex: 1;
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  color: var(--text);
  font-weight: 500;
  letter-spacing: .2px;
}

.vehicle-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.v-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.2);
  color: var(--text);
  padding: 4px 9px;
  border-radius: 4px;
  font-size: 10px;
  letter-spacing: .3px;
}

.v-badge-lbl {
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
}

/* Inline edit form inside the card */
.vehicle-edit {
  padding-top: 10px;
  margin-top: 8px;
  border-top: 1px dashed var(--border2);
}

.vehicle-edit .form-row {
  margin-bottom: 8px;
}

.vehicle-add-form {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  padding: 10px 4px 0;
}

/* Legacy class — kept for anything that might still target it */
.vehicle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 8px;
  font-size: 12px;
}

/* Tabs */
.profile-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border2);
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.profile-tab {
  padding: 10px 18px;
  border: none;
  background: none;
  color: var(--text3);
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}

.profile-tab:hover {
  color: var(--text2);
}

.profile-tab.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}


/* ==========================================================================
   25. DOCUMENTS PAGE
   ========================================================================== */
.templates-list,
.documents-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.template-row,
.doc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 8px;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}

.template-row:hover,
.doc-row:hover {
  border-color: var(--border);
  transform: translateY(-1px);
}

.doc-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.doc-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.doc-meta {
  font-size: 9px;
  color: var(--text3);
  margin-top: 2px;
  letter-spacing: .5px;
}

/* Generated document viewer — monospace, print-friendly */
.doc-view-body {
  white-space: pre-wrap;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 20px;
  max-height: 60vh;
  overflow-y: auto;
  margin: 0;
}


/* ==========================================================================
   26. PRINT STYLES
   When the user clicks "Print / Save as PDF", we hide everything
   except the doc view body. Browser's save-as-PDF produces a clean doc.
   ========================================================================== */
/* (Old print CSS removed — see section 39 at the end of this file for the
    replacement branded-document print styles.) */


/* ==========================================================================
   28. MADE-BY ROW (shows who created a record)
   ========================================================================== */
.made-by-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin-bottom: 16px;
  background: var(--bg3);
  border-left: 2px solid var(--gold);
  border-radius: 4px;
  font-size: 10px;
}

.made-by-label {
  color: var(--gold-d);
  letter-spacing: 1.5px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 8px;
}

.made-by-value {
  color: var(--text);
  font-weight: 600;
  flex: 1;
}


/* ==========================================================================
   29. USER ROW REFINEMENTS + ROLE TAGS
   ========================================================================== */
.role-tag {
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
}

.role-tag.role-admin {
  background: rgba(212, 175, 55, .15);
  color: var(--gold);
  border: 1px solid rgba(212, 175, 55, .3);
}

.role-tag.role-supervisor {
  background: rgba(52, 152, 219, .15);
  color: var(--blue);
  border: 1px solid rgba(52, 152, 219, .3);
}

.role-tag.role-staff {
  background: rgba(255, 255, 255, .05);
  color: var(--text2);
  border: 1px solid var(--border2);
}


/* ==========================================================================
   30. ROLE PERMISSIONS MATRIX
   ========================================================================== */
.role-matrix-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
}

.role-matrix-tbl th {
  padding: 6px 8px;
  text-align: center;
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--text3);
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 1px solid var(--border2);
}

.role-matrix-tbl th:first-child {
  text-align: left;
}

.role-matrix-tbl td {
  padding: 7px 8px;
  font-size: 10px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, .03);
  color: var(--text2);
}

.role-matrix-tbl td:first-child {
  text-align: left;
  color: var(--text);
}

.role-matrix-tbl tr:hover td {
  background: rgba(255, 255, 255, .02);
}


/* User-row avatar color variants (used in Users & Permissions list) */
.user-av.blue  { background: linear-gradient(135deg, #3498db, #2980b9) !important; }
.user-av.green { background: linear-gradient(135deg, #2ECC71, #27ae60) !important; }


/* ==========================================================================
   31. EDITORIAL REDESIGN (matches legacyautocare.netlify.app aesthetic)
   --------------------------------------------------------------------------
   This section transforms the CRM from "dashboard" into "editorial". It:
     • Adds big italicized serif page titles with eyebrow labels
     • Layers in scroll-reveal animations matching the website
     • Uses more confident, spacious typography
     • Keeps gold but uses it more intentionally
   ========================================================================== */

/* ----- Page hero — the big editorial title at the top of each page ----- */
.page-hero {
  margin-bottom: 28px;
  padding-top: 8px;
}

.page-hero-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* A thin gold line after the eyebrow, like the website uses */
.page-hero-eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(212, 175, 55, .4), transparent);
  max-width: 80px;
}

.page-hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 52px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.5px;
  color: var(--text);
  margin-bottom: 10px;
}

.page-hero-title em {
  font-style: italic;
  font-weight: 500;
  background: var(--gold-text-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
          background-clip: text;
}

.page-hero-sub {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 300;
  color: var(--text2);
  line-height: 1.5;
  max-width: 640px;
  letter-spacing: .2px;
}

@media (max-width: 900px) {
  .page-hero { margin-bottom: 20px; }
  .page-hero-title { font-size: 36px; }
  .page-hero-sub { font-size: 12px; }
}


/* ----- Scroll-reveal animations ----- */
/* Any element tagged `data-reveal` starts hidden + below, animates into
   place when it enters the viewport (or on first paint if already visible). */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s cubic-bezier(.16, .84, .3, 1),
              transform .9s cubic-bezier(.16, .84, .3, 1);
  will-change: opacity, transform;
}

[data-reveal].in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger the stat cards within a revealed stat-grid */
[data-reveal].in-view [data-reveal-child] {
  animation: childReveal .9s cubic-bezier(.16, .84, .3, 1) backwards;
}

[data-reveal].in-view [data-reveal-child]:nth-child(1) { animation-delay: .05s; }
[data-reveal].in-view [data-reveal-child]:nth-child(2) { animation-delay: .12s; }
[data-reveal].in-view [data-reveal-child]:nth-child(3) { animation-delay: .19s; }
[data-reveal].in-view [data-reveal-child]:nth-child(4) { animation-delay: .26s; }
[data-reveal].in-view [data-reveal-child]:nth-child(5) { animation-delay: .33s; }

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


/* ----- Underline-grow on links & sec-links (very website-y) ----- */
.sec-link {
  position: relative;
  padding-bottom: 2px;
}

.sec-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .4s cubic-bezier(.2, .9, .3, 1);
}

.sec-link:hover::after {
  transform: scaleX(1);
}


/* ----- Bigger, more confident stat numbers ----- */
.stat-val {
  font-size: 36px;
  font-weight: 300;
  letter-spacing: -1px;
}

.stat-card {
  padding: 22px 24px;
}

.stat-label {
  font-size: 9px;
  letter-spacing: 3px;
  margin-bottom: 14px;
}


/* ----- Section titles: numbered + italic feel ----- */
.sec-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .3px;
}


/* ----- Topbar: lighter, less busy, more editorial ----- */
.topbar {
  padding: 20px 28px;
}

.topbar-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: .2px;
}

.topbar-sub {
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--text3);
  text-transform: uppercase;
  font-weight: 500;
  margin-top: 4px;
}


/* ----- Primary gold buttons: smoother hover, subtle transform ----- */
.tb-btn.gold,
.form-submit {
  letter-spacing: 2.5px;
  transition: transform .35s cubic-bezier(.2, .9, .3, 1),
              box-shadow .35s cubic-bezier(.2, .9, .3, 1),
              filter .35s cubic-bezier(.2, .9, .3, 1);
}

.tb-btn.gold:hover,
.form-submit:hover {
  transform: translateY(-1px);
}


/* ----- Outlined buttons: website-style ghost buttons with underline ----- */
.tb-btn:not(.gold) {
  position: relative;
  background: transparent;
  border: 1px solid rgba(212, 175, 55, .25);
  letter-spacing: 2.5px;
  transition: border-color .35s cubic-bezier(.2, .9, .3, 1),
              color .35s cubic-bezier(.2, .9, .3, 1),
              background .35s cubic-bezier(.2, .9, .3, 1),
              transform .35s cubic-bezier(.2, .9, .3, 1);
}

.tb-btn:not(.gold):hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(212, 175, 55, .04);
  transform: translateY(-1px);
}


/* ----- Smoother page transition (override the earlier snap-in) ----- */
.page.active {
  animation: pageEnterSmooth 1s cubic-bezier(.16, .84, .3, 1);
}

@keyframes pageEnterSmooth {
  from { opacity: 0; transform: translateY(14px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}


/* ----- Sidebar: a touch more breathing room ----- */
.nav-section {
  padding: 16px 18px 6px;
  letter-spacing: 3.5px;
}

.nav-item {
  padding: 11px 18px;
  margin: 1px 0;
}

.nav-item .ni-label {
  font-size: 11px;
  letter-spacing: .6px;
}


/* ----- Booking items, customer cards, lead cards: extra breathing room ----- */
.booking-item {
  padding: 16px 18px;
  margin-bottom: 10px;
}

.booking-name {
  font-size: 13px;
  letter-spacing: .2px;
}

.cust-card {
  padding: 22px 22px;
}

.cust-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .3px;
  margin-bottom: 6px;
}

.cust-info {
  font-size: 11px;
}

.cust-stat-val {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--gold);
}


/* ----- Profile page heading: match website hero feel ----- */
.profile-name {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -.3px;
}


/* ----- Modals: bigger, more confident typography ----- */
.modal-title {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: .2px;
}


/* ----- Content padding: more generous negative space ----- */
.content {
  padding: 32px 36px 48px;
  max-width: 1320px;
}

@media (max-width: 900px) {
  .content {
    padding: 20px 18px 80px;
  }
}


/* ----- Form labels: more website-like, consistent spacing ----- */
.form-label {
  font-size: 9px;
  letter-spacing: 2.5px;
  font-weight: 600;
}


/* ----- "Scroll" indicator at top of Dashboard (optional editorial touch) ----- */
.scroll-hint {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text3);
  opacity: .6;
  animation: scrollBounce 2s ease-in-out infinite;
  pointer-events: none;
  z-index: 5;
}

@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: .4; }
  50%      { transform: translateX(-50%) translateY(-4px); opacity: .8; }
}


/* ----- Smoother scrolling feel (CSS only) ----- */
.main {
  scroll-behavior: smooth;
}
/* ==========================================================================
   32. EDITORIAL POLISH — FINAL LAYER
   --------------------------------------------------------------------------
   Lifts the CRM out of "admin dashboard" into editorial premium.
   Loads last, so wins cascade. Deeply refined palette + typography.
   ========================================================================== */

:root {
  /* Warmer, richer palette */
  --bg:           #0a0a0a;
  --bg2:          #121212;
  --bg3:          #181818;
  --bg-panel:     rgba(255, 255, 255, 0.018);
  --bg-panel-h:   rgba(255, 255, 255, 0.034);

  --border:       rgba(255, 255, 255, 0.065);
  --border2:      rgba(255, 255, 255, 0.035);
  --border-gold:  rgba(212, 175, 55, 0.22);
  --border-gold-h:rgba(212, 175, 55, 0.55);

  --text:         #f4efe3;
  --text2:        #9e967f;
  --text3:        #5a5242;

  --gold:         #d4af37;
  --gold-l:       #e8c968;
  --gold-d:       #8b6f1d;
  --gold-grad:    linear-gradient(135deg, #f4d98a 0%, #d4af37 45%, #8b6f1d 100%);
  --gold-text-grad: linear-gradient(180deg, #f4d98a 0%, #d4af37 60%, #a68a2c 100%);

  --green:        #7cb87c;
  --red:          #b84a4a;
  --orange:       #d4a14a;
  --blue:         #7090b8;

  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:    0 8px 32px -12px rgba(0, 0, 0, 0.6);
  --shadow-lg:    0 24px 60px -20px rgba(0, 0, 0, 0.7);
  --shadow-gold:  0 12px 40px -12px rgba(212, 175, 55, 0.2);

  --ease:         cubic-bezier(0.16, 0.84, 0.3, 1);
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --trans:        .5s var(--ease);
  --trans-fast:   .3s var(--ease);
  --trans-slow:   .9s var(--ease);
}

/* Base refinement */
html, body {
  background: var(--bg);
  color: var(--text);
  font-feature-settings: "kern", "liga", "calt", "ss01";
}

body {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Grain overlay for editorial texture */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99999;
  opacity: .025;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* --------- SIDEBAR: thinner, more editorial --------- */
.sidebar {
  background: var(--bg);
  border-right: 1px solid var(--border2);
  padding: 0;
}

.logo {
  padding: 28px 24px 32px;
  border-bottom: 1px solid var(--border2);
  margin-bottom: 14px;
}

.logo-mark {
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -.5px;
  color: var(--text);
  background: var(--gold-text-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.logo-sub {
  font-size: 8px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--text3);
  margin-top: 4px;
  font-weight: 500;
}

.nav-section {
  font-size: 8px;
  letter-spacing: 4px;
  font-weight: 600;
  color: var(--text3);
  padding: 20px 24px 8px;
  text-transform: uppercase;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 24px;
  margin: 0;
  color: var(--text2);
  cursor: pointer;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .4px;
  transition: color var(--trans-fast), background var(--trans-fast);
  border-left: 2px solid transparent;
  position: relative;
}

.nav-item:hover {
  color: var(--text);
  background: var(--bg-panel);
}

.nav-item.active {
  color: var(--gold);
  background: linear-gradient(to right, rgba(212, 175, 55, 0.08), transparent 70%);
  border-left-color: var(--gold);
}

.nav-item.active .ni-icon,
.nav-item.active .ni-icon svg {
  color: var(--gold);
}

.ni-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text2);
  flex-shrink: 0;
  transition: color var(--trans-fast);
}

.ni-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-item:hover .ni-icon {
  color: var(--text);
}

.ni-label {
  font-size: 12px;
  letter-spacing: .3px;
}

.ni-badge {
  background: transparent;
  border: 1px solid var(--border-gold);
  color: var(--gold);
  font-size: 8px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: .5px;
  margin-left: auto;
}

.sidebar-footer {
  border-top: 1px solid var(--border2);
  margin-top: auto;
  padding: 16px 18px;
}

.user-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 8px;
  background: var(--bg-panel);
  transition: background var(--trans-fast);
  cursor: pointer;
}

.user-pill:hover { background: var(--bg-panel-h); }

.user-av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  font-weight: 500;
  color: #0a0a0a;
  background: var(--gold-grad);
  flex-shrink: 0;
}

.user-name {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .3px;
  color: var(--text);
}

.user-role {
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--text3);
  text-transform: uppercase;
  margin-top: 2px;
}


/* --------- TOPBAR: quieter, more editorial --------- */
.topbar {
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--border2);
  padding: 22px 36px;
}

.topbar-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text);
}

.topbar-sub {
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--text3);
  text-transform: uppercase;
  margin-top: 3px;
  font-weight: 500;
}


/* --------- CONTENT: generous editorial breathing --------- */
.content {
  padding: 40px 44px 64px;
  max-width: 1360px;
  background: var(--bg);
}

@media (max-width: 900px) {
  .content { padding: 24px 20px 100px; }
}


/* --------- CARDS: quieter, thinner borders, less shadow --------- */
.card {
  background: var(--bg-panel);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 24px 26px;
  box-shadow: none;
  transition: border-color var(--trans-fast);
}

.card.card-gold {
  background: var(--bg-panel);
  border: 1px solid var(--border2);
}

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


/* --------- STAT CARDS: restrained, typographic --------- */
.stat-card {
  background: var(--bg-panel);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 24px 26px;
  box-shadow: none;
  position: relative;
  overflow: hidden;
  transition: border-color var(--trans), transform var(--trans);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border-gold), transparent);
  opacity: 0;
  transition: opacity var(--trans);
}

.stat-card:hover {
  border-color: var(--border-gold);
  transform: translateY(-1px);
}

.stat-card:hover::before { opacity: 1; }

.stat-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 3px;
  color: var(--text3);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.stat-val {
  font-family: 'Cormorant Garamond', serif;
  font-size: 42px;
  font-weight: 400;
  line-height: 1;
  color: var(--text);
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  background: var(--gold-text-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-change {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text3);
  margin-top: 8px;
  font-weight: 500;
}

.stat-change.up    { color: var(--green); }
.stat-change.down  { color: var(--red); }

/* Hide the emoji icon — we don't need it in an editorial design */
.stat-icon {
  display: none !important;
}


/* --------- PAGE HERO: the editorial centerpiece --------- */
.page-hero {
  margin-bottom: 40px;
  padding-top: 10px;
  max-width: 800px;
}

.page-hero-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-hero-eyebrow::before {
  content: '';
  width: 20px;
  height: 1px;
  background: var(--gold);
  opacity: .5;
}

.page-hero-eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--border-gold), transparent);
  max-width: 120px;
}

.page-hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 64px;
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -1.5px;
  color: var(--text);
  margin-bottom: 16px;
}

.page-hero-title em {
  font-style: italic;
  font-weight: 400;
  background: var(--gold-text-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-hero-sub {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 300;
  color: var(--text2);
  line-height: 1.65;
  max-width: 600px;
  letter-spacing: .3px;
}

@media (max-width: 900px) {
  .page-hero-title { font-size: 44px; letter-spacing: -1px; }
  .page-hero { margin-bottom: 28px; }
}


/* --------- SECTION HEADINGS --------- */
.sec-hdr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border2);
}

.sec-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0;
}

.sec-link {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  letter-spacing: 2.5px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--gold);
  background: transparent;
  border: none;
  padding: 2px 0;
  cursor: pointer;
  position: relative;
  transition: color var(--trans-fast);
}

.sec-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}

.sec-link:hover::after { transform: scaleX(1); }


/* --------- BUTTONS: refined, typographic --------- */
.tb-btn,
button.tb-btn {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 12px 20px;
  border-radius: 4px;
  background: transparent;
  color: var(--text2);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all var(--trans-fast);
}

.tb-btn:hover {
  color: var(--text);
  border-color: var(--border-gold);
  background: rgba(212, 175, 55, 0.04);
  transform: translateY(-1px);
}

.tb-btn.gold {
  background: var(--gold-grad);
  color: #0a0a0a;
  border-color: transparent;
  font-weight: 700;
  box-shadow: var(--shadow-gold);
}

.tb-btn.gold:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
  box-shadow: 0 16px 48px -14px rgba(212, 175, 55, 0.35);
}

.form-submit {
  width: 100%;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 16px 24px;
  border-radius: 4px;
  background: var(--gold-grad);
  color: #0a0a0a;
  border: none;
  cursor: pointer;
  transition: all var(--trans-fast);
  box-shadow: var(--shadow-gold);
  margin-top: 12px;
}

.form-submit:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}


/* --------- FORMS --------- */
.form-input,
input.form-input,
textarea.form-input,
select.form-input {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border2);
  color: var(--text);
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  padding: 12px 14px;
  border-radius: 4px;
  width: 100%;
  transition: border-color var(--trans-fast), background var(--trans-fast);
}

.form-input:focus {
  outline: none;
  border-color: var(--border-gold-h);
  background: rgba(0, 0, 0, 0.5);
}

.form-input::placeholder {
  color: var(--text3);
  font-style: italic;
  letter-spacing: .2px;
}

.form-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 8px;
  display: block;
}

.form-group { margin-bottom: 16px; }


/* --------- BADGES: typographic, not colored chips --------- */
.badge {
  font-family: 'Montserrat', sans-serif;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border2);
  color: var(--text2);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.badge::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .7;
}

.badge-gold   { color: var(--gold);   border-color: rgba(212, 175, 55, 0.25); }
.badge-green  { color: var(--green);  border-color: rgba(124, 184, 124, 0.2); }
.badge-blue   { color: var(--blue);   border-color: rgba(112, 144, 184, 0.2); }
.badge-orange { color: var(--orange); border-color: rgba(212, 161, 74, 0.2); }
.badge-red    { color: var(--red);    border-color: rgba(184, 74, 74, 0.2); }
.badge-grey   { color: var(--text3);  border-color: var(--border2); }


/* --------- BOOKING ITEMS --------- */
.booking-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border2);
  cursor: pointer;
  transition: padding var(--trans-fast);
  background: transparent;
  border-radius: 0;
}

.booking-item:last-child { border-bottom: none; }
.booking-item:hover { padding-left: 8px; }

.booking-time {
  min-width: 56px;
  text-align: center;
}

.booking-time-hr {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  color: var(--text);
  letter-spacing: -.5px;
}

.booking-time-min {
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--text3);
  text-transform: uppercase;
  margin-top: 3px;
}

.booking-vline {
  width: 1px;
  align-self: stretch;
  background: var(--border2);
}

.booking-detail { flex: 1; min-width: 0; }

.booking-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 3px;
  letter-spacing: 0;
}

.booking-svc {
  font-size: 11px;
  color: var(--text2);
  letter-spacing: .2px;
  margin-bottom: 6px;
}

.booking-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}


/* --------- CUSTOMER CARDS --------- */
.cust-card {
  background: var(--bg-panel);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 26px;
  cursor: pointer;
  transition: all var(--trans-fast);
  position: relative;
  overflow: hidden;
}

.cust-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border-gold), transparent);
  opacity: 0;
  transition: opacity var(--trans);
}

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

.cust-card:hover::before { opacity: 1; }

.cust-av {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gold-grad);
  color: #0a0a0a;
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.cust-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 4px;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cust-info {
  font-size: 11px;
  color: var(--text2);
  letter-spacing: .2px;
  margin-bottom: 22px;
}

.cust-stats {
  display: flex;
  gap: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--border2);
}

.cust-stat-val {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: -.2px;
  font-variant-numeric: tabular-nums;
}

.cust-stat-lbl {
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--text3);
  text-transform: uppercase;
  margin-top: 3px;
}


/* --------- CALENDAR REFINEMENT --------- */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--border2);
  border: 1px solid var(--border2);
  border-radius: 6px;
  overflow: hidden;
}

.cal-day-name {
  background: var(--bg);
  padding: 14px 10px;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text3);
  text-align: center;
}

.cal-day {
  background: var(--bg2);
  padding: 10px 8px;
  min-height: 100px;
  cursor: pointer;
  transition: background var(--trans-fast);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cal-day:hover { background: var(--bg3); }

.cal-day.other-month { background: var(--bg); opacity: .4; cursor: default; }
.cal-day.is-today { background: linear-gradient(180deg, rgba(212, 175, 55, 0.08), var(--bg2) 60%); }

.cal-day-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--text2);
  letter-spacing: 0;
}

.cal-day.is-today .cal-day-num {
  color: var(--gold);
  font-weight: 600;
}

.cal-booking {
  background: rgba(212, 175, 55, 0.1);
  border-left: 2px solid var(--gold);
  padding: 3px 6px;
  font-size: 9px;
  border-radius: 2px;
  color: var(--text);
  letter-spacing: .2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--trans-fast);
}

.cal-booking:hover { background: rgba(212, 175, 55, 0.18); }


/* --------- MODAL REFINEMENT --------- */
.modal-overlay {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.modal {
  background: #121212;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 32px;
  box-shadow: var(--shadow-lg);
}

.modal-hdr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border2);
}

.modal-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0;
}

.modal-close {
  background: transparent;
  border: none;
  color: var(--text3);
  cursor: pointer;
  font-size: 18px;
  padding: 6px 10px;
  transition: color var(--trans-fast);
}

.modal-close:hover { color: var(--gold); }


/* --------- SEARCH BAR --------- */
.search-bar {
  background: var(--bg-panel);
  border: 1px solid var(--border2);
  border-radius: 4px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  transition: border-color var(--trans-fast);
}

.search-bar:focus-within { border-color: var(--border-gold); }

.search-bar span { color: var(--text3); font-size: 13px; }

.search-bar input {
  background: transparent;
  border: none;
  padding: 13px 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  color: var(--text);
  width: 100%;
  letter-spacing: .2px;
}

.search-bar input:focus { outline: none; }
.search-bar input::placeholder { color: var(--text3); font-style: italic; }


/* --------- QUICK ACTIONS --------- */
.quick-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.qa-btn {
  background: var(--bg-panel);
  border: 1px solid var(--border2);
  color: var(--text2);
  padding: 14px 22px;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: all var(--trans-fast);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.qa-btn:hover {
  color: var(--gold);
  border-color: var(--border-gold);
  background: rgba(212, 175, 55, 0.03);
  transform: translateY(-1px);
}

.qa-icon {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}

.qa-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }


/* --------- TABLES --------- */
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.tbl th {
  font-family: 'Montserrat', sans-serif;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text3);
  padding: 12px 10px;
  border-bottom: 1px solid var(--border2);
  text-align: left;
}

.tbl td {
  padding: 14px 10px;
  border-bottom: 1px solid var(--border2);
  color: var(--text);
  letter-spacing: .2px;
}

.tbl tr:last-child td { border-bottom: none; }
.tbl tr:hover td { background: var(--bg-panel); }


/* --------- EMPTY STATES: italic serif encouragement --------- */
.empty-state {
  padding: 48px 24px;
  text-align: center;
  color: var(--text3);
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: .2px;
  line-height: 1.5;
}

.empty-state-sm {
  padding: 14px;
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  font-style: italic;
  color: var(--text3);
}


/* --------- PIPELINE (leads) --------- */
.pipeline {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  overflow-x: auto;
}

@media (max-width: 1100px) {
  .pipeline { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .pipeline { grid-template-columns: 1fr; }
}

.pipe-col {
  background: transparent;
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 16px 14px;
  min-height: 200px;
}

.pipe-col-hdr {
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border2);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.pipe-col-count {
  font-size: 9px;
  color: var(--gold);
  letter-spacing: 1px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
}

.lead-card {
  background: var(--bg-panel);
  border: 1px solid var(--border2);
  border-radius: 6px;
  padding: 14px;
  margin-bottom: 10px;
  font-size: 11px;
  transition: border-color var(--trans-fast);
}

.lead-card:hover { border-color: var(--border-gold); }

.lead-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 4px;
}

.lead-svc {
  font-size: 10px;
  color: var(--text2);
  letter-spacing: .2px;
  margin-bottom: 8px;
}

.lc-btn {
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--text2);
  padding: 5px 9px;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 3px;
  cursor: pointer;
  transition: all var(--trans-fast);
  font-family: 'Montserrat', sans-serif;
  margin-right: 4px;
}

.lc-btn:hover {
  color: var(--gold);
  border-color: var(--border-gold);
}


/* --------- TOAST REFINEMENT --------- */
.toast {
  background: #121212;
  border: 1px solid var(--border);
  border-left: 2px solid var(--gold);
  border-radius: 6px;
  padding: 14px 18px;
  min-width: 260px;
  box-shadow: var(--shadow-md);
  font-family: 'Montserrat', sans-serif;
}

.toast-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 2px;
}

.toast-msg {
  font-size: 10px;
  color: var(--text2);
  letter-spacing: .2px;
}


/* --------- LOGIN SCREEN: editorial premium --------- */
.login-screen {
  background:
    radial-gradient(ellipse at top, rgba(212, 175, 55, 0.08), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(212, 175, 55, 0.04), transparent 60%),
    var(--bg);
}

.login-card {
  background: rgba(18, 18, 18, 0.9);
  border: 1px solid var(--border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 48px 40px;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  max-width: 420px;
}

.login-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 48px;
  font-weight: 300;
  font-style: italic;
  color: var(--text);
  letter-spacing: -1px;
  margin-bottom: 4px;
  text-align: center;
  background: var(--gold-text-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.login-sub {
  font-size: 9px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--text3);
  text-align: center;
  margin-bottom: 40px;
  font-weight: 500;
}


/* --------- NOTIFICATION BELL --------- */
.notif-btn {
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--text2);
  padding: 10px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--trans-fast);
  position: relative;
}

.notif-btn:hover { color: var(--gold); border-color: var(--border-gold); }


/* --------- MOBILE NAV: modern, minimal --------- */
.mob-nav {
  background: rgba(10, 10, 10, 0.94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid var(--border2);
}

.mob-nav-item {
  color: var(--text3);
  transition: color var(--trans-fast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 0;
  font-size: 8px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
}

.mob-nav-item.active { color: var(--gold); }
.mob-nav-item svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }


/* --------- GOLD SCROLLBAR --------- */
*::-webkit-scrollbar         { width: 8px; height: 8px; }
*::-webkit-scrollbar-track   { background: transparent; }
*::-webkit-scrollbar-thumb   { background: rgba(212, 175, 55, 0.15); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(212, 175, 55, 0.3); }


/* --------- SELECTION COLOR --------- */
::selection { background: rgba(212, 175, 55, 0.3); color: var(--text); }


/* ==========================================================================
   33. NEW FEATURE STYLES — photos, expenses, widgets
   ========================================================================== */

/* Photo gallery in booking detail */
.photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.photo-thumb {
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  background: var(--bg3);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--trans-fast);
  border: 1px solid var(--border2);
}

.photo-thumb:hover { transform: scale(1.02); border-color: var(--border-gold); }

.photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-thumb-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(10, 10, 10, 0.85);
  color: var(--gold);
  padding: 3px 7px;
  font-size: 8px;
  letter-spacing: 2px;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 2px;
}

.photo-thumb-del {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(10, 10, 10, 0.85);
  color: var(--text2);
  border: none;
  width: 22px;
  height: 22px;
  border-radius: 11px;
  cursor: pointer;
  font-size: 11px;
  line-height: 22px;
  padding: 0;
  transition: color var(--trans-fast);
}

.photo-thumb-del:hover { color: var(--red); }

.photo-upload-btn {
  aspect-ratio: 4 / 3;
  border: 1px dashed var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text3);
  font-family: 'Cormorant Garamond', serif;
  font-size: 12px;
  font-style: italic;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all var(--trans-fast);
}

.photo-upload-btn:hover {
  border-color: var(--border-gold);
  color: var(--gold);
}

.photo-upload-btn span { font-size: 22px; font-style: normal; }

/* Photo viewer modal */
.photo-viewer {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
  cursor: zoom-out;
}

.photo-viewer.open { display: flex; }

.photo-viewer img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
}

.photo-viewer-close {
  position: absolute;
  top: 24px;
  right: 28px;
  background: transparent;
  border: none;
  color: var(--text2);
  font-size: 24px;
  cursor: pointer;
  padding: 8px 14px;
  letter-spacing: 2px;
}


/* Due-for-Detail widget */
.dfd-widget {
  background: var(--bg-panel);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 24px 26px;
  margin-bottom: 22px;
}

.dfd-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border2);
  transition: padding var(--trans-fast);
}

.dfd-row:last-child { border-bottom: none; }
.dfd-row:hover { padding-left: 6px; }

.dfd-row-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  color: var(--text);
  flex: 1;
}

.dfd-row-days {
  font-size: 10px;
  color: var(--text3);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
}

.dfd-row-btn {
  background: transparent;
  border: 1px solid var(--border-gold);
  color: var(--gold);
  padding: 7px 14px;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 3px;
  cursor: pointer;
  transition: all var(--trans-fast);
  font-family: 'Montserrat', sans-serif;
}

.dfd-row-btn:hover {
  background: rgba(212, 175, 55, 0.08);
}


/* Revenue goal ring */
.goal-ring {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--bg-panel);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 22px 26px;
  margin-bottom: 22px;
}

.goal-ring-svg {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}

.goal-ring-svg circle {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
}

.goal-ring-track { stroke: var(--border2); }
.goal-ring-fill {
  stroke: var(--gold);
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dasharray 1.5s var(--ease);
}

.goal-ring-pct {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-weight: 500;
  fill: var(--text);
}

.goal-ring-content { flex: 1; }

.goal-ring-label {
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 6px;
  font-weight: 600;
}

.goal-ring-amount {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -.3px;
}

.goal-ring-amount em {
  font-style: italic;
  color: var(--gold);
}

.goal-ring-sub {
  font-size: 10px;
  color: var(--text2);
  margin-top: 4px;
  letter-spacing: .3px;
}


/* Weather widget */
.wx {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--bg-panel);
  border: 1px solid var(--border2);
  border-radius: 6px;
  margin-bottom: 22px;
}

.wx-icon {
  width: 32px;
  height: 32px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wx-temp {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  color: var(--text);
  line-height: 1;
  letter-spacing: -.5px;
}

.wx-cond {
  font-size: 9px;
  color: var(--text3);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 3px;
  font-weight: 600;
}

.wx-note {
  margin-left: auto;
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  font-style: italic;
  color: var(--text2);
}


/* Expense row */
.exp-row {
  display: grid;
  grid-template-columns: 90px 1fr 120px 100px 40px;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--border2);
  font-size: 12px;
}

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

.exp-date {
  font-size: 10px;
  color: var(--text3);
  letter-spacing: 1px;
}

.exp-desc {
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  color: var(--text);
}

.exp-vendor {
  font-size: 10px;
  color: var(--text3);
  margin-top: 2px;
  letter-spacing: .3px;
}

.exp-cat {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text2);
  font-weight: 600;
}

.exp-amount {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  color: var(--red);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 700px) {
  .exp-row { grid-template-columns: 1fr; gap: 6px; padding: 14px 0; }
  .exp-amount { text-align: left; }
}


/* Message template buttons */
.msg-btn {
  background: var(--bg-panel);
  border: 1px solid var(--border2);
  color: var(--text);
  padding: 14px 16px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  transition: all var(--trans-fast);
  text-align: left;
  font-family: 'Montserrat', sans-serif;
}

.msg-btn:hover {
  border-color: var(--border-gold);
  background: rgba(212, 175, 55, 0.03);
}

.msg-btn-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.msg-btn-preview {
  font-size: 10px;
  color: var(--text3);
  letter-spacing: .2px;
  font-style: italic;
}


/* ==========================================================================
   34. MOTION — smoother page entrance + refined reveals
   ========================================================================== */

.page.active {
  animation: pageEnter 0.7s var(--ease-out);
}

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

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .9s var(--ease-out),
    transform .9s var(--ease-out);
}

[data-reveal].in-view {
  opacity: 1;
  transform: translateY(0);
}


/* ==========================================================================
   35. RESPONSIVE TWEAKS
   ========================================================================== */
@media (max-width: 900px) {
  .sidebar { display: none; }
  .mob-nav { display: flex; }
  .page-hero-title { font-size: 44px; }
  .stat-val { font-size: 32px; }
  .topbar { padding: 16px 20px; }
  .topbar-title { font-size: 22px; }
  .cust-card { padding: 22px 20px; }
  .cust-name { font-size: 19px; }
  .modal { padding: 24px 22px; }
  .modal-title { font-size: 22px; }
  .booking-time-hr { font-size: 22px; }
  .booking-name { font-size: 16px; }
  .page-hero-eyebrow { font-size: 8px; letter-spacing: 3px; }
  .content { padding: 20px 18px 90px; }
}

@media (max-width: 600px) {
  .page-hero-title { font-size: 36px; }
  .stat-val { font-size: 28px; }
  .quick-actions { gap: 8px; }
  .qa-btn { padding: 10px 14px; font-size: 9px; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .grid-7-5 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
}
/* ==========================================================================
   36. MOBILE POLISH — v6
   --------------------------------------------------------------------------
   Targeted fixes for real-world mobile issues observed on iPhone 14 Pro Max.
   This layer loads LAST so it overrides everything above.
   ========================================================================== */

/* ==========================================================================
   37. MOBILE HARD FIXES — v7
   Prevents horizontal page overflow and adds back navigation.
   ========================================================================== */

/* HARD OVERFLOW PREVENTION — the whole page must never exceed viewport width */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

.main {
  max-width: 100vw;
  overflow-x: hidden;
}

.content {
  max-width: 100%;
  box-sizing: border-box;
}

/* Every page container */
.page {
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width: 768px) {
  /* Kill any hidden horizontal scroll from grids that set explicit columns */
  .stat-grid,
  .quick-actions,
  .grid-2,
  .grid-3,
  .grid-7-5,
  .profile-grid {
    max-width: 100%;
  }

  /* The page hero title was 44px — still too wide for really long words like
     a page name wrapping. Cap more aggressively. */
  .page-hero-title {
    font-size: 38px !important;
    letter-spacing: -.8px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  /* Cards should never overflow */
  .card,
  .stat-card,
  .cust-card,
  .dfd-widget {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Any image inside cards */
  .card img,
  .stat-card img {
    max-width: 100%;
    height: auto;
  }

  /* The topbar often pushes content wider because of long button labels */
  .topbar {
    max-width: 100vw;
    box-sizing: border-box;
  }

  /* Calendar grid can be really wide — allow horizontal scroll but contained */
  .cal-grid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: grid;
    grid-template-columns: repeat(7, minmax(44px, 1fr));
  }
}


/* ----- MOBILE BACK BAR — appears when on a sub-page (profile, etc.) ----- */
.mobile-back-bar {
  display: none;
}

@media (max-width: 768px) {
  .mobile-back-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border2);
    position: sticky;
    top: 0;
    z-index: 150;
    min-height: 44px;
  }

  .mobile-back-btn {
    background: transparent;
    border: 1px solid var(--border2);
    color: var(--text);
    padding: 7px 14px;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: border-color var(--trans-fast), color var(--trans-fast);
  }

  .mobile-back-btn:hover,
  .mobile-back-btn:active {
    border-color: var(--gold);
    color: var(--gold);
  }

  .mobile-back-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    color: var(--text);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
@media (max-width: 768px) {

  .topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 16px 18px;
    position: sticky;
    top: 0;
    z-index: 100;
  }

  .topbar-left {
    width: 100%;
  }

  .topbar-title {
    font-size: 22px;
    line-height: 1.15;
  }

  .topbar-sub {
    font-size: 9px;
    letter-spacing: 2px;
    white-space: normal;
    line-height: 1.4;
  }

  .topbar-right {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* On mobile, "+ Add Lead" (ghost button) gets less room, primary stays prominent */
  .topbar-right .tb-btn:not(.gold) {
    padding: 11px 10px;
    font-size: 8px;
    letter-spacing: 1.2px;
    flex-shrink: 1;
  }

  /* Primary action button fills remaining space, notif bell sits right */
  .topbar-right .tb-btn.gold {
    flex: 1;
    padding: 11px 14px;
    font-size: 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 2px;
  }

  /* Notification bell — compact on mobile, no extra padding */
  .tb-notif,
  .notif-btn {
    flex-shrink: 0;
    padding: 11px 12px;
    font-size: 14px;
  }
}


/* ----- CONTENT: trim padding on mobile so content gets more width ----- */
@media (max-width: 768px) {
  .content {
    padding: 20px 16px 96px;
  }

  .page-hero {
    margin-bottom: 24px;
    padding-top: 4px;
  }

  .page-hero-title {
    font-size: 44px;
    letter-spacing: -1px;
    line-height: 1.05;
    margin-bottom: 12px;
  }

  .page-hero-eyebrow {
    font-size: 8px;
    letter-spacing: 3px;
    margin-bottom: 14px;
  }

  .page-hero-eyebrow::after {
    max-width: 80px;
  }

  .page-hero-sub {
    font-size: 12px;
    line-height: 1.55;
  }
}


/* ----- STAT CARDS: 2-col grid on mobile, tighter padding ----- */
@media (max-width: 768px) {
  .stat-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .stat-card {
    padding: 18px 18px;
  }

  .stat-label {
    font-size: 8px;
    letter-spacing: 2px;
    margin-bottom: 10px;
  }

  .stat-val {
    font-size: 28px;
    line-height: 1;
    letter-spacing: -.5px;
  }

  .stat-change {
    font-size: 8px;
    letter-spacing: 1.2px;
    margin-top: 6px;
  }
}


/* ----- QUICK ACTIONS: 3-column on mobile, more efficient ----- */
@media (max-width: 768px) {
  .quick-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 22px;
  }

  .qa-btn {
    padding: 14px 8px;
    font-size: 8px;
    letter-spacing: 1.2px;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
    min-height: 68px;
  }

  .qa-icon {
    width: 16px;
    height: 16px;
  }
}

/* On the very smallest phones, fall back to 2-col so icons don't get too cramped */
@media (max-width: 380px) {
  .quick-actions {
    grid-template-columns: 1fr 1fr;
  }
}


/* ----- TODAY'S BOOKINGS: fix the time column wrapping 08 -> :30 ----- */
@media (max-width: 768px) {
  .booking-item {
    gap: 14px;
    padding: 14px 0;
  }

  .booking-time {
    min-width: 52px;
    text-align: center;
    flex-shrink: 0;
  }

  /* Combine hour + minutes into a single readable "08:30" — no awkward wrap */
  .booking-time-hr {
    font-size: 22px;
    letter-spacing: -.3px;
    line-height: 1.1;
    white-space: nowrap;
  }

  .booking-time-min {
    font-size: 7px;
    letter-spacing: 1.5px;
    margin-top: 2px;
    white-space: nowrap;
  }

  .booking-name {
    font-size: 15px;
    line-height: 1.25;
    margin-bottom: 2px;
  }

  .booking-svc {
    font-size: 10px;
    line-height: 1.4;
  }

  .booking-meta {
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
  }

  /* The WhatsApp pill-button in today's bookings */
  .booking-item .tb-btn,
  .booking-item button {
    padding: 7px 10px;
    font-size: 8px;
    letter-spacing: 1.2px;
  }
}


/* ----- UNPAID INVOICES: stack vertically on mobile, no more off-screen buttons ----- */
@media (max-width: 768px) {

  .inv-row,
  #unpaid-invoices > div,
  #invoices-list > div {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "num num"
      "cust cust"
      "status amount"
      "actions actions" !important;
    gap: 8px 10px !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid var(--border2);
    align-items: center;
  }

  .inv-row .inv-num,
  #unpaid-invoices .inv-num,
  #invoices-list .inv-num {
    grid-area: num;
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--gold);
    font-weight: 600;
  }

  .inv-row .inv-cust,
  #unpaid-invoices .inv-cust,
  #invoices-list .inv-cust {
    grid-area: cust;
  }

  .inv-row .inv-svc,
  #unpaid-invoices .inv-svc,
  #invoices-list .inv-svc {
    font-size: 10px;
    color: var(--text3);
    margin-top: 2px;
    letter-spacing: .2px;
  }

  .inv-row .badge,
  #unpaid-invoices .badge,
  #invoices-list .badge {
    grid-area: status;
    justify-self: start;
  }

  .inv-row .inv-amount,
  #unpaid-invoices .inv-amount,
  #invoices-list .inv-amount {
    grid-area: amount;
    justify-self: end;
    font-size: 18px;
    font-weight: 500;
    color: var(--text);
    font-family: 'Cormorant Garamond', serif;
  }

  /* Action buttons go on their own row, full-width-ish, thumb-friendly */
  .inv-row .inv-actions,
  #unpaid-invoices .inv-actions,
  #invoices-list .inv-actions {
    grid-area: actions;
    display: flex;
    gap: 8px;
    width: 100%;
    padding-top: 4px;
  }

  .inv-row .inv-actions button,
  .inv-row .inv-actions .tb-btn,
  #unpaid-invoices .inv-actions button,
  #invoices-list .inv-actions button {
    flex: 1;
    padding: 10px 12px;
    font-size: 8px;
    letter-spacing: 1.5px;
    white-space: nowrap;
  }
}


/* ----- REVENUE CHART: contain within card, no horizontal overflow ----- */
@media (max-width: 768px) {
  .chart-wrap,
  #chart {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  .chart-wrap svg,
  #chart svg {
    max-width: 100%;
    height: auto;
  }

  /* Day labels below bars */
  .chart-wrap text {
    font-size: 9px;
  }
}


/* ----- SIDEBAR: hide on mobile (we have bottom nav) ----- */
@media (max-width: 900px) {
  .sidebar {
    display: none !important;
  }

  .main {
    margin-left: 0 !important;
    width: 100% !important;
  }
}


/* ----- MOBILE BOTTOM NAV: show on mobile, refine ----- */
@media (max-width: 900px) {
  .mob-nav {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    padding: 6px 0 max(6px, env(safe-area-inset-bottom));
    justify-content: space-around;
  }

  .mob-nav-item {
    flex: 1;
    padding: 10px 4px;
    font-size: 8px;
    letter-spacing: 1.5px;
    gap: 4px;
  }

  .mob-nav-item svg {
    width: 20px;
    height: 20px;
  }
}

/* Hide mobile nav on desktop */
@media (min-width: 901px) {
  .mob-nav { display: none !important; }
}


/* ----- MODALS: better mobile sizing and form layouts ----- */
@media (max-width: 768px) {
  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .modal {
    width: 100% !important;
    max-width: none !important;
    max-height: 90vh;
    border-radius: 14px 14px 0 0;
    padding: 24px 20px 28px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: modalSlideUp .4s var(--ease-out);
  }

  @keyframes modalSlideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }

  .modal-hdr {
    margin-bottom: 18px;
    padding-bottom: 14px;
  }

  .modal-title {
    font-size: 22px;
  }

  /* Form rows that are side-by-side on desktop stack on mobile */
  .form-row {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .form-input {
    font-size: 16px; /* iOS won't auto-zoom on focus when input is >= 16px */
    padding: 13px 14px;
  }

  /* BELT-AND-BRACES: iOS auto-zooms any input/select/textarea whose
     computed font-size is below 16px. This rule catches anything we might
     have missed in individual component rules (like the Assigned To select
     in the booking modal, the service dropdowns, datalist inputs, etc.) */
  input,
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input[type="date"],
  input[type="time"],
  input[type="search"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px !important;
  }

  .form-label {
    font-size: 8px;
    margin-bottom: 6px;
  }

  .form-submit {
    padding: 16px 20px;
    font-size: 11px;
  }
}


/* ----- TABLES: stack as cards on mobile (Quotes, Invoices list, Reports) ----- */
@media (max-width: 768px) {
  /* General strategy: hide the header, make each row a card stack */
  .tbl thead {
    display: none;
  }

  .tbl, .tbl tbody {
    display: block;
    width: 100%;
  }

  .tbl tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border2);
  }

  .tbl tr:last-child {
    border-bottom: none;
  }

  .tbl td {
    display: block;
    padding: 0 !important;
    border: none !important;
    font-size: 12px;
  }

  .tbl td:first-child {
    grid-column: 1 / -1;
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    color: var(--text);
    font-weight: 500;
  }

  .tbl td:last-child {
    grid-column: 1 / -1;
    padding-top: 4px !important;
  }

  .tbl td:last-child .lc-btn {
    width: auto;
  }

  /* Row hover off on mobile (no hover) */
  .tbl tr:hover td { background: transparent; }
}


/* ----- CUSTOMER CARDS GRID ----- */
@media (max-width: 768px) {
  .grid-3 {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .cust-card {
    padding: 22px 20px;
  }

  .cust-name {
    font-size: 20px;
  }

  .cust-stats {
    gap: 18px;
  }

  .cust-stat-val {
    font-size: 15px;
  }
}


/* ----- CUSTOMER PROFILE: stack layout on mobile ----- */
@media (max-width: 768px) {
  .profile-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  .profile-head-row {
    flex-wrap: wrap;
    gap: 14px;
    padding: 18px 18px;
  }

  .profile-av {
    width: 52px;
    height: 52px;
    font-size: 18px;
  }

  .profile-name {
    font-size: 24px;
  }

  .profile-head-stats {
    width: 100%;
    justify-content: space-around;
    padding-top: 12px;
    border-top: 1px solid var(--border2);
    gap: 12px;
  }

  .profile-stat-val {
    font-size: 16px;
  }

  /* Tabs stay horizontal but scroll if they overflow */
  .profile-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    white-space: nowrap;
    padding-bottom: 2px;
  }

  .profile-tab {
    padding: 10px 14px;
    font-size: 9px;
    letter-spacing: 1.2px;
    flex-shrink: 0;
  }
}


/* ----- CALENDAR: tighter cells, shorter day names ----- */
@media (max-width: 768px) {
  .cal-day {
    min-height: 70px;
    padding: 6px 4px;
    gap: 2px;
  }

  .cal-day-num {
    font-size: 13px;
  }

  .cal-day-name {
    padding: 10px 4px;
    font-size: 7px;
    letter-spacing: 1.5px;
  }

  .cal-booking {
    font-size: 8px;
    padding: 2px 4px;
    border-left-width: 2px;
  }

  /* Calendar prev/next toolbar stacks on mobile */
  #page-calendar > div:nth-child(2) {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  #page-calendar > div:nth-child(2) > div {
    justify-content: space-between;
  }
}


/* ----- PIPELINE (leads) on mobile: horizontal scroll columns ----- */
@media (max-width: 768px) {
  .pipeline {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    grid-template-columns: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
  }

  .pipe-col {
    scroll-snap-align: start;
    min-height: 180px;
  }
}


/* ----- SEARCH BAR: bigger on mobile ----- */
@media (max-width: 768px) {
  .search-bar {
    padding: 2px 14px;
  }

  .search-bar input {
    padding: 14px 0;
    font-size: 16px; /* prevents iOS zoom (must be >=16px) */
  }
}


/* ----- DASHBOARD LAYOUT: stack the main grid columns ----- */
@media (max-width: 900px) {
  .grid-7-5,
  .grid-2 {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  /* Also the dashboard weather+goal row which uses inline grid-2 style */
  #page-dashboard .grid-2,
  #page-dashboard > div.grid-2 {
    grid-template-columns: 1fr !important;
  }
}


/* ----- WEATHER + GOAL: stack side-by-side widgets on mobile ----- */
@media (max-width: 768px) {
  .goal-ring,
  .wx {
    padding: 16px 18px;
  }

  .goal-ring-svg {
    width: 60px;
    height: 60px;
  }

  .goal-ring-amount {
    font-size: 18px;
  }

  .wx-temp {
    font-size: 20px;
  }

  .wx-note {
    font-size: 12px;
  }
}


/* ----- BOOKING DETAIL MODAL: form layout tweaks ----- */
@media (max-width: 768px) {
  #booking-detail-body .form-row {
    grid-template-columns: 1fr 1fr !important; /* date + time still side-by-side */
    gap: 8px !important;
  }

  .photo-gallery {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
  }
}


/* ----- DUE-FOR-DETAIL ROWS: stack on very narrow ----- */
@media (max-width: 480px) {
  .dfd-row {
    flex-wrap: wrap;
    gap: 8px 12px;
  }

  .dfd-row > div:first-child {
    flex: 1 1 100%;
    order: 1;
  }

  .dfd-row-days {
    order: 2;
  }

  .dfd-row-btn {
    order: 3;
    margin-left: auto;
  }
}


/* ----- SETTINGS: 2-col form layout collapse ----- */
@media (max-width: 768px) {
  .settings-section {
    padding: 20px 18px;
  }

  .settings-row {
    flex-wrap: wrap;
    gap: 10px;
  }
}


/* ----- EXPENSES: already grid-based, just tighten ----- */
@media (max-width: 768px) {
  .exp-row {
    padding: 12px 0;
    gap: 4px;
  }

  .exp-desc {
    font-size: 14px;
  }

  .exp-amount {
    font-size: 15px;
    text-align: left;
    color: var(--red);
  }
}


/* ----- TOUCH-FRIENDLY TAP TARGETS ----- */
@media (max-width: 768px) {
  /* Any small inline button should be at least 36px tall for reliable tapping */
  .lc-btn,
  .sec-link,
  .modal-close {
    min-height: 36px;
    min-width: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}


/* ----- DISABLE HOVER EFFECTS ON TOUCH DEVICES ----- */
@media (hover: none) and (pointer: coarse) {
  .booking-item:hover,
  .cust-card:hover,
  .stat-card:hover,
  .tb-btn:hover,
  .qa-btn:hover,
  .sec-link:hover,
  .lead-card:hover {
    transform: none !important;
  }

  /* Keep the color/border changes though — they're fine as instant feedback */
}


/* ----- ACTIVE STATE (tap feedback) on touch ----- */
@media (hover: none) {
  .tb-btn:active,
  .qa-btn:active,
  .booking-item:active,
  .cust-card:active,
  .form-submit:active,
  .dfd-row-btn:active {
    transform: scale(0.98);
    transition: transform .1s ease-out;
  }
}
/* ==========================================================================
   38. BRANDED DOCUMENT OUTPUT (.bdoc)
   --------------------------------------------------------------------------
   Proper designed output for Quotes, Invoices, and Service Agreements.
   Matches the Legacy Auto Care brand mockup exactly: black header with
   gold LAC shield, cream body with gold accents, dark services table,
   banking + terms two-column footer, gold PAYMENT REF band.

   Renders beautifully both on-screen (inside the preview modal) AND in
   print/PDF output. The same CSS drives both — no separate print styles.
   ========================================================================== */

.bdoc {
  background: #1a1612;      /* near-black, warm tinted */
  color: #2a2520;
  font-family: 'Montserrat', sans-serif;
  max-width: 800px;
  margin: 0 auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: .2px;
}

/* ----- HEADER: black band with gold shield + brand ----- */
.bdoc-header {
  background: #0f0c08;
  padding: 36px 40px 28px;
  text-align: center;
  position: relative;
}

.bdoc-shield {
  width: 64px;
  height: 72px;
  display: block;
  margin: 0 auto 14px;
}

.bdoc-brand {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 6px;
  color: #f4efe3;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.bdoc-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 42px;
  font-weight: 400;
  font-style: italic;
  color: #d4af37;
  letter-spacing: 8px;
  background: linear-gradient(180deg, #f4d98a 0%, #d4af37 55%, #a68a2c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bdoc-rule {
  width: 100%;
  max-width: 520px;
  height: 1px;
  margin: 22px auto 0;
  background: linear-gradient(to right, transparent, rgba(212,175,55,.45), transparent);
}


/* ----- PAGE BODY: cream paper ----- */
.bdoc-page {
  background: #f8f4ec;      /* warm cream */
  color: #2a2520;
  padding: 34px 40px 40px;
}


/* ----- META ROW (date / valid until / prepared by) ----- */
.bdoc-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(42, 37, 32, 0.1);
  margin-bottom: 22px;
}

.bdoc-meta-cell {
  min-width: 0;
}


/* ----- SMALL-CAPS GOLD LABELS ----- */
.bdoc-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #8b6f1d;       /* deep gold */
  margin-bottom: 4px;
}

.bdoc-value {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #2a2520;
  word-break: break-word;
}


/* ----- SECTION TITLES ----- */
.bdoc-section-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #8b6f1d;
  margin-bottom: 10px;
  padding-bottom: 4px;
}


/* ----- TWO-COLUMN BLOCK (client + vehicle, banking + terms) ----- */
.bdoc-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 32px;
}


/* ----- LABELLED FIELDS inside two-column blocks ----- */
.bdoc-field {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dotted rgba(42, 37, 32, 0.12);
  align-items: baseline;
  font-size: 11.5px;
}

.bdoc-field:last-child {
  border-bottom: none;
}

.bdoc-field > span:first-child {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #8b6f1d;
}

.bdoc-field > span:last-child {
  color: #2a2520;
  font-weight: 500;
}


/* ----- SERVICES & ITEMS TABLE (dark header row like mockup) ----- */
.bdoc-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 12px;
}

.bdoc-table thead {
  background: #0f0c08;
}

.bdoc-table th {
  padding: 12px 14px;
  font-family: 'Montserrat', sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #d4af37;
}

.bdoc-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(42, 37, 32, 0.1);
  color: #2a2520;
  font-size: 11.5px;
}

.bdoc-table tfoot td {
  padding: 14px 14px 2px;
  border-top: 1px solid rgba(42, 37, 32, 0.15);
}

.bdoc-total {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 600;
  color: #8b6f1d;
  letter-spacing: -.3px;
}


/* ----- TERMS LIST ----- */
.bdoc-terms {
  list-style: none;
  padding: 0;
  margin: 0;
}

.bdoc-terms li {
  position: relative;
  padding-left: 16px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 11px;
  color: #3a322b;
  line-height: 1.5;
}

.bdoc-terms li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #d4af37;
}


/* ----- PAYMENT REF BAND (gold highlight strip) ----- */
.bdoc-payref {
  margin-top: 22px;
  padding: 12px 18px;
  background: linear-gradient(to right, #e8c968, #d4af37 55%, #a68a2c);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.bdoc-payref-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #1a1410;
}

.bdoc-payref-value {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #1a1410;
  letter-spacing: .5px;
}


/* ----- AGREEMENT-SPECIFIC: clause blocks + signatures ----- */
.bdoc-clauses {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(42, 37, 32, 0.1);
}

.bdoc-clause {
  margin-bottom: 16px;
  page-break-inside: avoid;
  break-inside: avoid;
}

.bdoc-clause h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #8b6f1d;
  margin: 0 0 5px;
}

.bdoc-clause p {
  font-size: 11px;
  line-height: 1.65;
  color: #3a322b;
  margin: 0;
}

.bdoc-agreement-summary {
  margin-top: 22px;
  padding: 14px 18px;
  background: rgba(212, 175, 55, 0.08);
  border-left: 3px solid #d4af37;
  font-style: italic;
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  color: #2a2520;
  line-height: 1.5;
}

.bdoc-signatures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 42px;
  padding-top: 14px;
  page-break-inside: avoid;
  break-inside: avoid;
}

.bdoc-sig-block {
  text-align: center;
}

.bdoc-sig-line {
  border-bottom: 1px solid #2a2520;
  height: 34px;
  margin-bottom: 6px;
}

.bdoc-sig-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #8b6f1d;
}

.bdoc-sig-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  color: #2a2520;
  margin-top: 4px;
  font-style: italic;
}


/* ----- CUSTOM DOCS fallback body ----- */
.bdoc-custom-body {
  font-family: 'Courier New', 'Consolas', monospace;
  font-size: 11px;
  line-height: 1.7;
  color: #2a2520;
  white-space: pre-wrap;
  word-wrap: break-word;
}


/* ----- FOOTER: black band with contact ----- */
.bdoc-footer {
  background: #0f0c08;
  padding: 14px 40px 18px;
  text-align: center;
}

.bdoc-footer-bar {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(212,175,55,.4), transparent);
  margin-bottom: 12px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.bdoc-footer-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 1.8px;
  color: rgba(244, 239, 227, 0.7);
  text-transform: lowercase;
}


/* ----- MOBILE ADAPTATIONS for the branded doc preview ----- */
@media (max-width: 700px) {
  .bdoc {
    font-size: 11px;
  }
  .bdoc-header { padding: 28px 22px 22px; }
  .bdoc-brand  { font-size: 18px; letter-spacing: 4px; }
  .bdoc-title  { font-size: 30px; letter-spacing: 5px; }
  .bdoc-page   { padding: 24px 22px 28px; }
  .bdoc-meta   { grid-template-columns: 1fr 1fr; gap: 14px; }
  .bdoc-two-col { grid-template-columns: 1fr; gap: 22px; }
  .bdoc-table th, .bdoc-table td { padding: 9px 10px; font-size: 10px; }
  .bdoc-payref { flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; }
  .bdoc-signatures { grid-template-columns: 1fr; gap: 32px; }
  .bdoc-footer { padding: 12px 20px 14px; }
  .bdoc-footer-text { font-size: 8.5px; letter-spacing: 1.2px; }
}


/* Override the doc-view-body styling so the branded HTML can render fully */
#modal-doc-view .doc-view-body {
  white-space: normal;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  max-height: 65vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}


/* ==========================================================================
   39. PRINT / PDF OUTPUT for branded documents
   This OVERRIDES the generic print CSS from section 36 when we're printing
   a branded document, preserving all the colours and styling in the PDF.
   ========================================================================== */
@media print {
  @page {
    size: A4;
    margin: 0;
  }

  body.printing-doc * { visibility: hidden !important; }
  body.printing-doc #modal-doc-view,
  body.printing-doc #modal-doc-view * { visibility: visible !important; }

  body.printing-doc #modal-doc-view {
    position: static !important;
    inset: auto !important;
    background: #fff !important;
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.printing-doc #modal-doc-view .modal {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    animation: none !important;
    display: block !important;
  }

  body.printing-doc .modal-hdr,
  body.printing-doc .modal-close,
  body.printing-doc #modal-doc-view button { display: none !important; }

  body.printing-doc .doc-view-body {
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* The branded doc itself — preserve all colours, expand to full page */
  body.printing-doc .bdoc {
    box-shadow: none !important;
    max-width: none !important;
    margin: 0 !important;
    width: 100% !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  body.printing-doc .bdoc * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  /* Give clauses and signatures proper page-break behaviour */
  body.printing-doc .bdoc-clause,
  body.printing-doc .bdoc-signatures,
  body.printing-doc .bdoc-payref {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Kill grain overlay + any other fixed decoration */
  body.printing-doc::before { display: none !important; }

  html, body {
    height: auto !important;
    overflow: visible !important;
    background: #fff !important;
  }

  /* Force inputs/selects/textareas NOT to clip or show outlines during print */
  body.printing-doc input,
  body.printing-doc select,
  body.printing-doc textarea {
    display: none !important;
  }
}
/* ==========================================================================
   40. MULTI-LINE-ITEM BUILDER (Quote + Invoice modals)
   --------------------------------------------------------------------------
   A proper items table inside the quote/invoice modals. Each row is a service
   with Qty + Price + Subtotal. User can add/remove rows freely.
   ========================================================================== */

/* Wide modal for the quote/invoice builder */
.modal.modal-wide {
  max-width: 820px;
  width: 94vw;
}

/* Table header */
.items-table {
  margin-top: 14px;
  margin-bottom: 6px;
  border: 1px solid var(--border2);
  border-radius: 8px;
  overflow: hidden;
}

.items-head {
  display: grid;
  grid-template-columns: 1fr 70px 110px 110px 36px;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(212, 175, 55, 0.06);
  border-bottom: 1px solid var(--border2);
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--gold);
}

.items-head span {
  display: flex;
  align-items: center;
}

.items-head span:nth-child(2) { justify-content: center; }
.items-head span:nth-child(3),
.items-head span:nth-child(4) { justify-content: flex-end; }

/* Body rows */
.items-row {
  display: grid;
  grid-template-columns: 1fr 70px 110px 110px 36px;
  gap: 10px;
  padding: 10px 12px;
  align-items: center;
  border-bottom: 1px solid var(--border2);
}

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

.items-cell {
  min-width: 0;
  display: flex;
  align-items: center;
}

.items-cell .form-input {
  padding: 8px 10px;
  font-size: 13px;
  height: auto;
  margin: 0;
  width: 100%;
}

.items-cell-name {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.items-cell input[type="number"] {
  text-align: right;
}

.items-cell:nth-child(2) input { text-align: center; }

.items-cell-subtotal {
  justify-content: flex-end;
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  color: var(--text);
  font-weight: 500;
}

.items-cell-rm {
  justify-content: center;
}

.items-cell-rm button {
  width: 28px;
  height: 28px;
  padding: 0;
  line-height: 1;
}

/* Total row */
.items-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 4px 10px;
  margin-top: 4px;
  border-top: 1px solid var(--border2);
}

.items-total-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--gold);
}

.items-vat-note {
  font-size: 9px;
  font-weight: 500;
  color: var(--text3);
  letter-spacing: 1.4px;
  margin-left: 8px;
  text-transform: none;
}

.items-total-amount {
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -.5px;
  background: linear-gradient(180deg, #f4d98a 0%, #d4af37 55%, #a68a2c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ----- MOBILE: stack each items row vertically as a card ----- */
@media (max-width: 700px) {
  .modal.modal-wide {
    max-width: none;
    width: 100%;
  }

  .items-head {
    display: none;  /* headers don't make sense in stacked mode */
  }

  .items-row {
    grid-template-columns: 1fr 36px;
    gap: 8px 10px;
    padding: 14px 12px;
    position: relative;
  }

  .items-cell-name {
    grid-column: 1 / -1;
  }

  .items-cell-name .form-input {
    font-size: 14px;
  }

  /* Create labels for qty/price/subtotal on mobile */
  .items-row .items-cell:nth-child(2)::before {
    content: 'Qty';
    font-size: 8px;
    letter-spacing: 1.5px;
    color: var(--gold);
    font-weight: 700;
    text-transform: uppercase;
    margin-right: 8px;
    min-width: 36px;
  }

  .items-row .items-cell:nth-child(3)::before {
    content: 'Price';
    font-size: 8px;
    letter-spacing: 1.5px;
    color: var(--gold);
    font-weight: 700;
    text-transform: uppercase;
    margin-right: 8px;
    min-width: 40px;
  }

  .items-row .items-cell:nth-child(4)::before {
    content: 'Subtotal';
    font-size: 8px;
    letter-spacing: 1.5px;
    color: var(--gold);
    font-weight: 700;
    text-transform: uppercase;
    margin-right: 8px;
    min-width: 56px;
  }

  .items-cell:nth-child(2),
  .items-cell:nth-child(3) {
    grid-column: 1 / -1;
  }

  .items-cell-subtotal {
    grid-column: 1 / -1;
    justify-content: flex-start;
    border-top: 1px dashed var(--border2);
    padding-top: 10px;
    margin-top: 4px;
  }

  /* Remove button floats top-right on mobile */
  .items-cell-rm {
    position: absolute;
    top: 10px;
    right: 10px;
    grid-column: unset;
  }

  .items-total-amount {
    font-size: 26px;
  }
}

/* ==========================================================================
   41. VISIBILITY / CONTRAST PASS (v8)
   --------------------------------------------------------------------------
   Dim-on-dark text audit: raise contrast on all hard-to-read elements
   (empty dashes, date/time placeholders, faded labels, etc).
   ========================================================================== */

/* Date and time inputs — use color-scheme:dark so the browser renders the
   native calendar/clock picker with dark styling (icons become white).
   Placeholders get a gold tint so they're readable on the dark bg. */
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  color-scheme: dark;
  color: var(--text);
  font-family: inherit;
}

/* When empty, the native placeholder ("yyyy/mm/dd" / "--:--") renders via
   the inner ::-webkit-datetime-edit element. Style it gold. */
input[type="date"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit {
  color: var(--text);
}
input[type="date"]:not(:focus):not([value]):not(:valid)::-webkit-datetime-edit,
input[type="time"]:not(:focus):not([value]):not(:valid)::-webkit-datetime-edit {
  color: rgba(212, 175, 55, 0.75); /* gold, slightly muted so filled values stand out more */
}

/* Calendar and clock icons inside the input (the native picker trigger) */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(70%) sepia(80%) saturate(450%) hue-rotate(10deg) brightness(0.9);
  cursor: pointer;
  opacity: 0.9;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* Firefox: date/time pickers inherit color already via color-scheme:dark */

/* Empty-state dashes and placeholder text in info rows */
.profile-field-row span:last-child,
.vehicle-badges .v-badge {
  color: var(--text);
}

/* When a value is literally "—" we want it visible but softer than real text */
/* (Current implementation already renders "—" as default body text, which is
   fine — no explicit rule needed, just kept here as a hook.) */

/* Text placeholders: brighter */
.form-input::placeholder,
input::placeholder,
textarea::placeholder {
  color: rgba(200, 195, 185, 0.45);
  opacity: 1;
}


/* ==========================================================================
   42. MOBILE SIDEBAR (hamburger slide-out)
   --------------------------------------------------------------------------
   On mobile only: a hamburger button in the topbar opens the sidebar as an
   overlay from the left. Desktop keeps the sidebar always-visible unchanged.
   ========================================================================== */

.hamburger {
  display: none;          /* hidden on desktop by default */
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--text);
  width: 42px;
  height: 42px;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  transition: border-color var(--trans-fast), color var(--trans-fast);
}

.hamburger:hover,
.hamburger:active {
  border-color: var(--gold);
  color: var(--gold);
}

.hamburger svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
}

/* Dim backdrop when mobile sidebar is open */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 199;
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Mobile layout */
@media (max-width: 900px) {
  .hamburger {
    display: inline-flex;
  }

  /* Sidebar becomes an off-canvas panel */
  .sidebar {
    display: flex !important;   /* override earlier "display:none" on mobile */
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    width: 260px;
    max-width: 82vw;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.3s var(--ease-out);
    box-shadow: 4px 0 30px rgba(0, 0, 0, 0.5);
  }

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

  .sidebar-backdrop.open {
    display: block;
  }

  .main {
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* Sidebar items slightly larger on mobile for thumb taps */
  .sidebar .nav-item {
    padding: 14px 18px;
    font-size: 13px;
  }
}


/* ==========================================================================
   43. CUSTOMERS LIST — compact contacts-style view
   --------------------------------------------------------------------------
   One row per customer (not big cards) grouped alphabetically like iOS
   Contacts. Scales cleanly to 100s of customers.
   ========================================================================== */

.cust-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 8px;
}

.cust-letter-group {
  margin-bottom: 8px;
}

.cust-letter-hdr {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 500;
  font-style: italic;
  color: var(--gold);
  padding: 14px 4px 8px;
  letter-spacing: 1px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.15);
  margin-bottom: 2px;
  background: linear-gradient(180deg, #f4d98a 0%, #d4af37 55%, #a68a2c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: sticky;
  top: 0;
  z-index: 5;
  background-color: var(--bg);   /* fallback for when sticky hits the top */
}

.cust-list-row {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 14px 10px;
  border-bottom: 1px solid var(--border2);
  cursor: pointer;
  transition: background var(--trans-fast), padding-left var(--trans-fast);
}

.cust-list-row:hover {
  background: rgba(255, 255, 255, 0.02);
  padding-left: 14px;
}

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

.cust-list-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.05));
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: var(--gold);
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -.2px;
}

.cust-list-main {
  min-width: 0;
}

.cust-list-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: .2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cust-list-sub {
  font-size: 10px;
  color: var(--text3);
  letter-spacing: .3px;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cust-list-sub span {
  color: var(--text2);
}

.cust-list-meta {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.cust-list-lifetime {
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  color: var(--gold);
  font-weight: 500;
  letter-spacing: -.2px;
}

.cust-list-jobs {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text3);
  font-weight: 600;
}

.cust-list-chev {
  color: var(--text3);
  font-size: 16px;
  margin-left: 4px;
}

/* Mobile: hide lifetime/jobs column, just name + chevron */
@media (max-width: 600px) {
  .cust-list-row {
    grid-template-columns: 34px 1fr auto;
    gap: 12px;
    padding: 12px 6px;
  }
  .cust-list-meta {
    font-size: 11px;
  }
  .cust-list-lifetime {
    font-size: 12px;
  }
  .cust-list-jobs {
    display: none;
  }
}

/* ==========================================================================
   44. EXPENSES OVERHAUL (v8)
   --------------------------------------------------------------------------
   Category breakdown (stacked bar + list), P&L panel, filter chips, cost/job
   metric, setup-toggle on add form. All category colours come from inline
   style="background:..." driven by EXPENSE_CATEGORIES in app.js, so changes
   there flow through the UI automatically.
   ========================================================================== */

/* Range tabs (Month / Year / All Time) */
.exp-range-tabs {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--border2);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg3);
}

.exp-range-btn {
  background: transparent;
  border: none;
  padding: 7px 14px;
  color: var(--text2);
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--trans-fast), color var(--trans-fast);
}

.exp-range-btn:hover {
  color: var(--text);
}

.exp-range-btn.active {
  background: rgba(212, 175, 55, 0.15);
  color: var(--gold);
}

/* Stacked category breakdown bar */
.exp-stacked-bar {
  display: flex;
  width: 100%;
  height: 14px;
  border-radius: 7px;
  overflow: hidden;
  background: var(--bg3);
  margin: 14px 0 18px;
  gap: 2px;
}

.exp-stacked-seg {
  height: 100%;
  min-width: 2px;
  transition: filter .15s ease;
}

.exp-stacked-seg:hover {
  filter: brightness(1.2);
}

.exp-stacked-empty {
  font-size: 11px;
  color: var(--text3);
  font-style: italic;
  padding: 18px 0;
  text-align: center;
  width: 100%;
}

/* Breakdown list rows — one per category */
.exp-cat-row {
  display: grid;
  grid-template-columns: 14px 1fr 50px 110px;
  gap: 12px;
  align-items: center;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border2);
  font-size: 12px;
}

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

.exp-cat-pill {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.exp-cat-name {
  color: var(--text);
  font-weight: 500;
  letter-spacing: .3px;
}

.exp-cat-pct {
  color: var(--text3);
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-align: right;
  letter-spacing: 1px;
}

.exp-cat-amount {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  color: var(--text);
  text-align: right;
  letter-spacing: .2px;
}

/* ----- P&L panel ----- */

.exp-pnl-period {
  font-size: 10px;
  color: var(--text3);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border2);
}

.exp-pnl-period strong {
  color: var(--gold);
  font-weight: 600;
}

.exp-pnl-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 4px;
  font-size: 13px;
  gap: 14px;
}

.exp-pnl-label {
  color: var(--text);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.exp-pnl-val {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  color: var(--text);
  font-weight: 500;
  letter-spacing: .2px;
}

.exp-pnl-sub {
  padding: 4px 4px 4px 14px;
  font-size: 11px;
}

.exp-pnl-sub .exp-pnl-label {
  color: var(--text2);
  font-weight: 400;
}

.exp-pnl-sub .exp-pnl-val {
  font-size: 13px;
  color: var(--red);
  opacity: 0.85;
}

.exp-pnl-revenue .exp-pnl-val {
  color: var(--green);
  font-size: 20px;
}

.exp-pnl-divider {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--border2);
  font-size: 9px;
  color: var(--text3);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
}

.exp-pnl-divider-strong {
  height: 1px;
  background: var(--border);
  margin: 12px 0 6px;
}

.exp-pnl-pos .exp-pnl-val {
  background: linear-gradient(180deg, #f4d98a 0%, #d4af37 55%, #a68a2c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 22px;
}

.exp-pnl-neg .exp-pnl-val {
  color: var(--red);
  font-size: 22px;
}

/* Meta row — cost-per-job + margin */
.exp-pnl-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border2);
}

.exp-pnl-meta-item {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 12px 14px;
}

.exp-pnl-meta-lbl {
  font-size: 8px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 6px;
}

.exp-pnl-meta-val {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -.3px;
}

.exp-pnl-meta-sub {
  font-size: 9px;
  color: var(--text3);
  letter-spacing: .8px;
  margin-top: 4px;
}

/* ----- Category filter chips ----- */
.exp-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border2);
}

.exp-filter-chip {
  background: var(--bg3);
  border: 1px solid var(--border2);
  color: var(--text2);
  padding: 6px 12px;
  border-radius: 14px;
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--trans-fast), color var(--trans-fast), background var(--trans-fast);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.exp-filter-chip:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.exp-filter-chip.active {
  border-color: var(--gold);
  background: rgba(212, 175, 55, 0.15);
  color: var(--gold);
}

.exp-filter-count {
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 7px;
  border-radius: 8px;
  font-size: 8px;
  color: inherit;
  opacity: 0.8;
}

/* Category pill inside the expense list row (left of the label) */
.exp-cat-pill-inline {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 7px;
  vertical-align: middle;
}

/* ----- Setup toggle (inside add-expense modal) ----- */
.exp-setup-toggle {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  margin-top: 4px;
  margin-bottom: 14px;
  background: rgba(200, 137, 42, 0.08);
  border: 1px solid rgba(200, 137, 42, 0.25);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color var(--trans-fast), background var(--trans-fast);
}

.exp-setup-toggle:hover {
  border-color: rgba(200, 137, 42, 0.45);
  background: rgba(200, 137, 42, 0.12);
}

.exp-setup-toggle input[type="checkbox"] {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: #c8892a;
  cursor: pointer;
  flex-shrink: 0;
}

.exp-setup-toggle-text {
  flex: 1;
}

.exp-setup-toggle-label {
  font-size: 12px;
  font-weight: 600;
  color: #c8892a;
  letter-spacing: .3px;
  margin-bottom: 2px;
}

.exp-setup-toggle-sub {
  font-size: 10px;
  color: var(--text3);
  line-height: 1.4;
}

/* Mobile tweaks */
@media (max-width: 600px) {
  .exp-pnl-meta {
    grid-template-columns: 1fr;
  }
  .exp-cat-row {
    grid-template-columns: 14px 1fr 40px 90px;
    gap: 8px;
    font-size: 11px;
  }
  .exp-cat-amount {
    font-size: 14px;
  }
  .exp-range-btn {
    padding: 7px 10px;
    font-size: 8px;
  }
}


/* ==========================================================================
   44. CLOUD SYNC INDICATOR
   --------------------------------------------------------------------------
   Tiny dot in the topbar that flashes when data is syncing to/from Supabase.
   Grey by default, gold while syncing, green when synced, red on error.
   Kept very small so it's informative but not distracting.
   ========================================================================== */
.sync-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  margin-right: 8px;
  flex-shrink: 0;
  transition: background-color .3s var(--ease);
  align-self: center;
}

.sync-dot.syncing {
  background: var(--gold);
  animation: syncPulse 1s ease-in-out infinite;
}

.sync-dot.synced {
  background: #2ecc71;
}

.sync-dot.error {
  background: var(--red);
}

@keyframes syncPulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.3); }
}


/* ==========================================================================
   45. CALENDAR DAY SHEET + MOBILE DOTS (v12)
   --------------------------------------------------------------------------
   Mobile calendar no longer shows cramped event chips. Instead each day
   shows up to 3 coloured dots + overflow "+N" label. Tapping any day opens
   a bottom-sheet modal (#modal-day-sheet) with that day's bookings + an
   "Add Booking" button.
   ========================================================================== */

/* DESKTOP: keep the rich event chips, hide the dots */
.cal-events-desktop { display: block; }
.cal-dots { display: none; }

/* MOBILE: flip the display — dots only, hide the chips */
@media (max-width: 700px) {
  .cal-events-desktop { display: none; }
  .cal-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 4px;
    height: 10px;
  }

  /* Compact day cells on mobile — just day number + dots */
  .cal-day {
    min-height: 52px;
    padding: 6px 4px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .cal-day-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 17px;
    font-weight: 500;
    margin-bottom: 2px;
  }
  .cal-day.today {
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.04));
    border-color: var(--gold);
  }
  .cal-day.today .cal-day-num {
    color: var(--gold);
    font-weight: 600;
  }
}

/* Coloured dot indicators */
.cal-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  display: inline-block;
  flex-shrink: 0;
}
.cal-dot.blue  { background: var(--blue); }
.cal-dot.green { background: var(--green); }
.cal-dot-more {
  font-size: 8px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: .3px;
  margin-left: 2px;
}

/* "+ more" chip on desktop when >3 bookings on a day */
.cal-event-more {
  cursor: pointer;
  opacity: .75;
  font-style: italic;
}
.cal-event-more:hover { opacity: 1; }


/* ==========================================================================
   46. DAY SHEET MODAL
   --------------------------------------------------------------------------
   Shows all bookings for the selected day, with a big "+ Add Booking" CTA
   at the top. Each row taps through to the full booking detail modal.
   ========================================================================== */
#modal-day-sheet .modal {
  max-width: 560px;
  width: 92vw;
  padding: 22px 20px 24px;
}

.day-sheet-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.day-sheet-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 10px;
  border-bottom: 1px solid var(--border2);
  cursor: pointer;
  transition: background .15s var(--ease), padding-left .15s var(--ease);
}
.day-sheet-row:last-child {
  border-bottom: none;
}
.day-sheet-row:hover {
  background: rgba(255, 255, 255, 0.02);
  padding-left: 14px;
}

.day-sheet-time {
  display: flex;
  align-items: baseline;
  font-family: 'Cormorant Garamond', serif;
  color: var(--gold);
  letter-spacing: -.3px;
}
.day-sheet-time-hr {
  font-size: 22px;
  font-weight: 500;
}
.day-sheet-time-min {
  font-size: 13px;
  font-weight: 400;
  opacity: .85;
}

.day-sheet-main {
  min-width: 0;
}
.day-sheet-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: .2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.day-sheet-sub {
  font-size: 10px;
  color: var(--text3);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.day-sheet-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.day-sheet-meta .badge {
  font-size: 8px;
}
.day-sheet-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 13px;
  color: var(--gold);
  font-weight: 500;
}

.day-sheet-chev {
  color: var(--text3);
  font-size: 18px;
  margin-left: 2px;
}

.day-sheet-empty {
  text-align: center;
  padding: 28px 20px 12px;
  color: var(--text2);
  font-size: 12px;
}
.day-sheet-empty-icon {
  font-size: 32px;
  margin-bottom: 10px;
  opacity: .7;
}

/* Mobile: the day sheet slides up from the bottom like a native bottom-sheet */
@media (max-width: 700px) {
  #modal-day-sheet .modal {
    width: 100%;
    max-width: none;
    border-radius: 18px 18px 0 0;
    padding: 18px 16px 28px;
  }
  .day-sheet-row {
    padding: 14px 8px;
  }
}


/* ==========================================================================
   47. START JOB BUTTON — prominent, pronounced
   --------------------------------------------------------------------------
   The "Start Job" button is the most-pressed action in the daily workflow,
   so it gets a full gold gradient treatment, larger padding, subtle glow,
   and a play icon so it reads as a trigger.
   ========================================================================== */
.bk-btn.bk-btn-start-prominent {
  background: linear-gradient(135deg, #D4AF37 0%, #8b6f1d 100%);
  color: #0e0e12;
  border: 1px solid rgba(212, 175, 55, 0.8);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 10px 16px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  box-shadow:
    0 2px 8px rgba(212, 175, 55, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform 0.15s var(--ease), box-shadow 0.2s var(--ease), filter 0.2s var(--ease);
}

.bk-btn.bk-btn-start-prominent:hover {
  transform: translateY(-1px);
  box-shadow:
    0 4px 16px rgba(212, 175, 55, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  filter: brightness(1.08);
}

.bk-btn.bk-btn-start-prominent:active {
  transform: translateY(0);
  box-shadow:
    0 1px 4px rgba(212, 175, 55, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.bk-btn-play {
  font-size: 10px;
  display: inline-block;
  transform: translateX(-1px);
}

/* Subtle pulse animation on mobile where button size is smaller, to draw eye.
   Runs once every 4s, very gentle — not annoying. */
@media (max-width: 700px) {
  .bk-btn.bk-btn-start-prominent {
    padding: 12px 18px;
    font-size: 12px;
    animation: startPulse 4s ease-in-out infinite;
  }
}
@keyframes startPulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(212, 175, 55, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
  50%      { box-shadow: 0 2px 14px rgba(212, 175, 55, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
}


/* ==========================================================================
   48. WORKER CARD — mobile-only hero on the dashboard
   --------------------------------------------------------------------------
   Shown above everything else on phones. Three states:
     .wc-active  — a job is in progress (finish CTA, timer, progress bar)
     .wc-next    — next job to start (start CTA, customer + service + total)
     .wc-empty   — no jobs today (friendly empty state)

   Hidden entirely on desktop (>700px) — desktop uses the regular dashboard
   with stats + widgets + Today's Bookings + charts.
   ========================================================================== */
.worker-card {
  /* Desktop: hidden */
  display: none;
}

@media (max-width: 700px) {
  .worker-card {
    display: block;
    margin: 4px 0 20px;
  }

  /* Hide the rich-dashboard pieces on mobile so worker card is the hero */
  .desktop-only-dash {
    display: none !important;
  }
}

.wc {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.08) 0%, rgba(212, 175, 55, 0.02) 100%);
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: 14px;
  padding: 22px 20px 20px;
  position: relative;
  overflow: hidden;
}

.wc::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #D4AF37 50%, transparent 100%);
  opacity: 0.7;
}

.wc-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.wc-cust {
  font-size: 22px;
  font-weight: 700;
  color: var(--text1);
  line-height: 1.2;
  margin-bottom: 4px;
  font-family: var(--font-serif, Georgia, serif);
  font-style: italic;
}

.wc-sub {
  font-size: 13px;
  color: var(--text2);
  margin-bottom: 6px;
  line-height: 1.4;
}

.wc-sub-loc {
  color: var(--text3);
  font-size: 12px;
}

.wc-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 14px 0 16px;
  padding: 10px 0;
  border-top: 1px solid rgba(212, 175, 55, 0.12);
  border-bottom: 1px solid rgba(212, 175, 55, 0.12);
}

.wc-price {
  font-size: 20px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.5px;
}

.wc-timer {
  font-size: 18px;
  font-weight: 700;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
}

.wc-count {
  font-size: 11px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
}

/* Progress bar for active jobs with checklists */
.wc-progress-row {
  margin: 0 0 14px;
}
.wc-progress-label {
  font-size: 11px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
  margin-bottom: 6px;
}
.wc-progress-bar {
  height: 6px;
  background: rgba(212, 175, 55, 0.12);
  border-radius: 4px;
  overflow: hidden;
}
.wc-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #D4AF37 0%, #f0c850 100%);
  transition: width 0.4s ease;
}

/* BUTTONS — the core interaction. Big enough to thumb-tap accurately but
   still aesthetically in line with the editorial style of the app. */
.wc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  cursor: pointer;
  border: 1px solid transparent;
  margin-bottom: 10px;
  transition: transform 0.15s var(--ease), filter 0.2s var(--ease), box-shadow 0.2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.wc-btn:last-child {
  margin-bottom: 0;
}

.wc-btn-primary {
  background: linear-gradient(135deg, #D4AF37 0%, #8b6f1d 100%);
  color: #0e0e12;
  border-color: rgba(212, 175, 55, 0.8);
  box-shadow:
    0 3px 14px rgba(212, 175, 55, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.wc-btn-primary:active {
  transform: scale(0.98);
  filter: brightness(1.05);
}

.wc-btn-secondary {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text1);
  border-color: rgba(212, 175, 55, 0.35);
}

.wc-btn-secondary:active {
  transform: scale(0.98);
  background: rgba(212, 175, 55, 0.08);
}

.wc-btn-start {
  padding: 18px 20px;
  font-size: 15px;
}

.wc-btn-play {
  font-size: 11px;
  display: inline-block;
  transform: translateX(-1px);
}

.wc-btn-link {
  background: transparent;
  color: var(--text3);
  border: 0;
  padding: 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: none;
}

.wc-btn-link:active {
  color: var(--gold);
}

/* Empty state */
.wc-empty {
  text-align: center;
  padding: 28px 20px 24px;
}

.wc-empty-icon {
  font-size: 42px;
  margin-bottom: 10px;
}

.wc-empty-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text1);
  font-family: var(--font-serif, Georgia, serif);
  font-style: italic;
  margin-bottom: 4px;
}

.wc-empty-sub {
  font-size: 13px;
  color: var(--text3);
  margin-bottom: 22px;
}

.wc-empty-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}


/* ==========================================================================
   49. WORKER MODE — simplified mobile sidebar
   --------------------------------------------------------------------------
   On phones the sidebar shows only the 5 core actions needed during a job
   (Home, Bookings, Customers, Active Jobs, Documents). Everything else is
   hidden behind an "Advanced" reveal so the UI isn't cluttered.

   Desktop: show everything always, hide the Advanced toggle.
   ========================================================================== */

/* Desktop default — Advanced toggle hidden, all items visible */
.nav-advanced-toggle {
  display: none;
}

@media (max-width: 900px) {
  /* Hide advanced items by default on mobile */
  .sidebar .nav-item[data-worker="adv"],
  .sidebar .nav-section[data-worker="adv"] {
    display: none;
  }

  /* When the user taps "Advanced" — reveal them */
  .sidebar.adv-open .nav-item[data-worker="adv"],
  .sidebar.adv-open .nav-section[data-worker="adv"] {
    display: flex;
  }
  .sidebar.adv-open .nav-section[data-worker="adv"] {
    display: block;
  }

  /* The toggle button itself — styled like a subtle nav item */
  .nav-advanced-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    margin-top: 12px;
    border-top: 1px solid rgba(212, 175, 55, 0.1);
    color: var(--text3);
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s ease, background 0.2s ease;
  }

  .nav-advanced-toggle:hover,
  .nav-advanced-toggle:active {
    color: var(--gold);
    background: rgba(212, 175, 55, 0.04);
  }

  .nav-advanced-toggle .ni-icon {
    width: 18px;
    height: 18px;
    opacity: 0.6;
  }

  .nav-advanced-toggle .ni-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
  }

  .nav-advanced-toggle .ni-chev {
    margin-left: auto;
    font-size: 12px;
    opacity: 0.7;
  }

  /* On mobile hide the section headers for Main / Operations since there's
     so few items — makes the reduced nav look intentional not truncated */
  .sidebar .nav-section:not([data-worker="adv"]) {
    display: none;
  }
}