/* ─────────────────────────────────────────────────────────────────────────
   ui-system.css — canonical UI component rules (KPI cards, buttons, chips,
   filter tabs, empty states, premium card shell).
   Loaded after base.css and theme.css so cascade order alone wins; previously
   injected from app/app.js as a `<style>` tag.
   ───────────────────────────────────────────────────────────────────────── */

/* ─── SCREEN SCROLL AREA — no top/bottom gap beyond the fixed bars ─── */
/* Top padding is set to 0 globally in base.css (§3 layout block), so primary
   and secondary pages share an identical baseline. Here we only hide the
   bottom-nav on secondary pages — the canonical .screen rule + the
   `body.mobile-secondary-page .screen { padding-bottom: ... }` rule in
   base.css handle padding. Single source of truth. */
body.mobile-secondary-page #bottom-nav{display:none;}

/* ─── QUOTATION WIZARD — hide bottom tab bar while wizard is open ─── */
body.wizard-open #bottom-nav{display:none;}
body.wizard-open #screen-container .screen{padding-bottom:calc(var(--safe-bottom,0px) + 16px);}

/* ─── HAIRLINE DIVIDERS — top bar bottom edge + bottom tab bar top edge ─── */
@media (max-width:1023px) {
  .top-nav{border-bottom:1px solid rgba(0,0,0,0.09) !important;}
  #bottom-nav{border-top:1px solid rgba(0,0,0,0.1) !important;}
}

/* ─── BACK BUTTON — only on more-menu pages, never on primary tabs ─── */
@media (max-width:768px) {
  body:not(.mobile-secondary-page) #nav-back-btn{display:none;}
}

/* ─── CARD SHELL — uniform border + elevation ─── */
.card,.vendor-card,.event-card,.task-card,
.lead-card,.lead-card-v2,.client-card,.quot-mobile-card {
  border-radius:var(--r-md) !important;
  border:1px solid var(--border-light) !important;
  box-shadow:0 1px 3px rgba(0,0,0,0.06),0 4px 12px rgba(0,0,0,0.05) !important;
  background:var(--bg-card) !important;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}


/* ─── TYPOGRAPHY ─── */
.cc-name{font-weight:600 !important;letter-spacing:0 !important;}
.cc-meta{font-weight:400 !important;font-size:11.5px !important;}
.cc-amount{font-weight:700 !important;font-size:14px !important;letter-spacing:0 !important;}
.cc-tiny{font-weight:500 !important;font-size:10.5px !important;}
.cc-badge{font-weight:700 !important;font-size:9.5px !important;padding:2px 7px !important;letter-spacing:0.02em !important;}

/* ─── STAT / KPI CARDS — Premium ─── */
.layout-kpi-block,.stat-card,.crm-kpi-card{
  border:1px solid rgba(92,91,212,0.09) !important;
  box-shadow:0 2px 6px rgba(92,91,212,0.07),0 6px 20px rgba(0,0,0,0.06) !important;
  padding:14px 16px !important;
  position:relative;
  overflow:hidden;
}
.stat-card::before,.stat-card::after{content:none;}
.stat-card .crm-kpi-head span,.stat-card .layout-kpi-block__label{
  font-size:9.5px !important;font-weight:700 !important;
  letter-spacing:0.07em !important;text-transform:uppercase !important;
}
.stat-card .crm-kpi-value,.stat-card .layout-kpi-block__value{
  font-size:1.5rem !important;font-weight:700 !important;
  letter-spacing:0 !important;margin:5px 0 2px;
  color:var(--text-primary) !important;
}
.crm-kpi-icon{width:30px !important;height:30px !important;border-radius:9px !important;font-size:12px !important;}
.crm-kpi-sub{font-size:10.5px !important;font-weight:400 !important;}

/* ─── BUTTONS ─── */
.btn-gold,.btn-primary,.btn-secondary,.btn-outline,.btn-ghost,.btn-danger{
  font-weight:500 !important;letter-spacing:0.01em !important;
}
.btn-sm{
  font-size:11.5px !important;font-weight:500 !important;
  min-height:30px !important;padding:0 10px !important;
  border-radius:9px !important;gap:4px;
}
.btn-sm i,.btn-sm .fa-solid,.btn-sm .fa-regular{font-size:10px !important;}
button:disabled{opacity:0.4;pointer-events:none;}
/* Lead card delete — square icon-only btn that always matches sibling btn-sm height */
.lead-card-del{
  flex-shrink:0;align-self:stretch;
  width:36px;min-width:36px;
  padding:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:9px;
}

/* ─── EVENT CARD — matches quotation card style, no accent line ─── */
.event-card,.ev-card-premium{padding:0;}
.ev-card-header{
  display:flex;align-items:center;
  justify-content:space-between;
  padding:9px 13px 8px;
  border-bottom:1px solid rgba(0,0,0,0.06);
}
.ev-card-body{padding:0;}
.ev-card-row{display:flex;align-items:center;gap:10px;padding:10px 13px 0;}
.ev-card-chips{
  display:flex;gap:5px;flex-wrap:wrap;
  padding:8px 13px 9px;
  border-top:1px solid rgba(0,0,0,0.05);
  margin-top:9px;align-items:center;
}
.ev-card-actions{
  display:flex;gap:6px;
  padding:7px 10px 9px;
  border-top:1px solid rgba(0,0,0,0.06);
  background:rgba(0,0,0,0.018);
  border-radius:0 0 var(--r-md) var(--r-md) !important;
}
.ev-card-title{font-size:13px !important;font-weight:600 !important;}
.ev-card-status{font-size:9.5px !important;font-weight:600 !important;padding:2px 7px !important;}
.ev-card-info{flex:1;min-width:0;}
.ev-card-right{text-align:right;flex-shrink:0;}
.ev-card-meta{display:flex;align-items:center;gap:4px;margin-top:1px;}
.cc-chip{
  font-size:10.5px !important;font-weight:500 !important;
  padding:2px 7px !important;border-radius:6px !important;
  background:rgba(0,0,0,0.03) !important;border-color:rgba(0,0,0,0.07) !important;
}

/* ─── QUOTATION CARD ─── */
.quot-mobile-card{padding:0;}
.quot-card-body{padding:0;}
.quot-card-header{
  display:flex;align-items:center;
  justify-content:space-between;
  padding:9px 13px 8px;
  border-bottom:1px solid rgba(0,0,0,0.06);
}
.quot-card-qno{
  font-size:9.5px !important;font-weight:600 !important;
  color:var(--text-muted) !important;letter-spacing:0.04em !important;
  text-transform:uppercase;
}
.quot-status-badge{
  display:inline-flex;align-items:center;
  padding:2px 8px;border-radius:12px;
  font-size:9.5px;font-weight:600;white-space:nowrap;
}
.quot-card-main{
  display:flex;align-items:center;
  gap:10px;padding:10px 13px 0;
}
.quot-card-client{font-size:13px !important;font-weight:600 !important;color:var(--text-primary) !important;}
.quot-card-meta{font-size:10.5px !important;font-weight:400;color:var(--text-muted) !important;margin-top:1px;}
.quot-card-right-col{text-align:right;flex-shrink:0;}
.quot-card-amount{font-size:13px !important;font-weight:700 !important;color:var(--text-primary) !important;letter-spacing:0;font-variant-numeric:tabular-nums;}
.quot-card-date{font-size:9.5px;color:var(--text-muted);margin-top:2px;font-weight:400;}
.quot-card-chips{
  display:flex;gap:5px;flex-wrap:wrap;
  padding:8px 13px 9px;
  border-top:1px solid rgba(0,0,0,0.05);
  margin-top:9px;align-items:center;
}
.quot-chip{
  display:inline-flex;align-items:center;gap:3px;
  padding:2px 7px;border-radius:6px;
  font-size:10px;font-weight:500;color:var(--text-muted);
  background:rgba(0,0,0,0.03);border:1px solid rgba(0,0,0,0.07);
}
.quot-chip--service{
  background:var(--primary-light);color:var(--primary);
  border-color:rgba(26,86,219,0.18);
}
.quot-card-actions{
  display:flex;gap:6px;
  padding:7px 10px 9px;
  border-top:1px solid rgba(0,0,0,0.06) !important;
  background:rgba(0,0,0,0.018) !important;
  border-radius:0 0 var(--r-md) var(--r-md) !important;
}

/* ─── LEAD CARDS ─── */
.lead-card__head{padding:12px 14px 10px;}
.lead-card__strip{
  display:flex;align-items:center;
  padding:0 14px 10px;
  border-bottom:1px solid rgba(0,0,0,0.055);
}
.lead-card__notes{
  padding:8px 14px;
  border-bottom:1px solid rgba(0,0,0,0.055);
}
.lead-card__actions{
  display:flex;gap:6px;
  padding:7px 10px 8px;
  background:rgba(0,0,0,0.018);
  border-top:1px solid rgba(0,0,0,0.06);
}

/* ─── CLIENT CARDS ─── */
.client-card{cursor:pointer;}
.cc-card-actions{
  display:flex;gap:6px;
  padding-top:9px;margin-top:8px;
  border-top:1px solid rgba(0,0,0,0.06);
}
/* ─── VENDOR CARDS ─── */
.vendor-card{padding:13px !important;}
.cc-meta-block{font-size:11.5px !important;line-height:1.7 !important;}

/* ─── BADGES ─── */
.badge{font-weight:600 !important;font-size:10px !important;padding:2.5px 8px !important;}

/* ─── PAGE TITLES ─── */
.page-title{font-weight:700 !important;letter-spacing:0 !important;}
.page-sub{font-weight:400;font-size:12px;margin-top:2px;}

/* ─── HERO ─── */
.crm-hero-kicker{font-size:11.5px;font-weight:400;opacity:0.7;}
.crm-hero-title{font-weight:700;letter-spacing:-0.025em;}
.crm-hero-sub{font-size:11px;font-weight:400;opacity:0.6;}
.crm-hero-btn{font-weight:500;font-size:12.5px;}

/* ─── DASHBOARD TODAY CARD — premium ─── */
.dash-today-card{
  background:var(--bg-card) !important;
  border:1px solid rgba(245,158,11,0.22) !important;
  border-radius:var(--r-md) !important;overflow:hidden;
  box-shadow:0 1px 3px rgba(15,17,35,0.05),0 4px 14px rgba(15,17,35,0.04) !important;
}
.dash-today-card__header{
  display:flex;align-items:center;
  justify-content:space-between;
  padding:10px 14px 9px;
  border-bottom:1px solid rgba(245,158,11,0.12);
  background:linear-gradient(135deg,rgba(245,158,11,0.09) 0%,rgba(251,191,36,0.05) 100%);
}
.dash-today-card__pulse-wrap{
  width:26px;height:26px;border-radius:50%;
  background:rgba(245,158,11,0.15);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.dash-today-card__title{font-size:12px;font-weight:700;color:#92400E;line-height:1.2;}
.dash-today-card__sub{font-size:10px;font-weight:400;color:#B45309;margin-top:1px;}
.dash-today-card__view-btn{
  display:inline-flex;align-items:center;
  padding:5px 10px;border-radius:6px;
  background:rgba(245,158,11,0.12);color:#92400E;
  border:none;font-size:11px;font-weight:600;
  cursor:pointer;font-family:inherit;
  -webkit-tap-highlight-color:transparent;white-space:nowrap;
}
.dash-today-card__list{display:flex;flex-direction:column;}
.dash-today-card__item{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:background 0.1s;
}
.dash-today-card__item:active{background:rgba(0,0,0,0.03);}
.dash-today-card__item--border{border-top:1px solid rgba(0,0,0,0.05);}

/* ─── DASHBOARD TODAY BANNER (legacy fallback) ─── */
.dash-today-banner{display:flex;align-items:center;gap:8px;background:#fff8e8;border:1px solid #fde68a;border-radius:8px;padding:10px 13px;flex-wrap:wrap;}
.dash-today-banner__left{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.dash-today-banner__label{font-size:11.5px;font-weight:700;color:#92400E;white-space:nowrap;}
.dash-today-banner__events{display:flex;gap:5px;flex-wrap:wrap;flex:1;align-items:center;}
.dash-live-dot{width:7px;height:7px;border-radius:50%;background:#F59E0B;flex-shrink:0;animation:pulseLive 1.4s ease-in-out infinite;}
.dash-today-ev-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:12px;background:rgba(245,158,11,0.12);border:1px solid rgba(245,158,11,0.3);font-size:11px;font-weight:600;color:#92400E;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.dash-today-ev-chip__dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}

/* ─── DASHBOARD TWO-COL ─── */
.dash-two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:680px){.dash-two-col{grid-template-columns:1fr;}}
.dash-panel{overflow:hidden !important;}
.dash-rq-row{
  display:flex;align-items:center;gap:10px;
  padding:9px 16px !important;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:background 0.1s !important;
}
.dash-rq-row:active{background:var(--surface) !important;}

/* ─── HERO — compact single row ─── */
.crm-hero-native{border-radius:var(--r-md) !important;margin-bottom:10px;overflow:hidden;box-shadow:0 4px 20px rgba(30,27,75,0.18),0 1px 4px rgba(0,0,0,0.08) !important;}
.crm-hero-content{padding:13px 15px;}
.crm-hero-row{display:flex;align-items:center;gap:10px;}
.crm-hero-avatar{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,0.2);border:1.5px solid rgba(255,255,255,0.3);color:#fff;font-size:16px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.crm-hero-text{flex:1;min-width:0;}
.crm-hero-kicker{font-size:10px;color:rgba(255,255,255,0.7);font-weight:500;margin:0 0 1px;}
.crm-hero-title{font-size:15px;font-weight:700;color:#fff;letter-spacing:0;margin:0;}
.crm-hero-actions{display:flex;gap:5px;flex-shrink:0;}
.crm-hero-btn{display:inline-flex;align-items:center;gap:4px;padding:6px 10px;border-radius:8px;font-size:11.5px;font-weight:600;border:none;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent;white-space:nowrap;}
.crm-hero-btn-secondary{background:rgba(255,255,255,0.15);color:rgba(255,255,255,0.9);}
.crm-hero-btn-secondary:active{background:rgba(255,255,255,0.25);}
.crm-hero-btn-primary{background:#fff;color:var(--primary);box-shadow:0 1px 4px rgba(0,0,0,0.15);}
.crm-hero-btn-label{display:inline;}
@media(max-width:360px){.crm-hero-btn-label{display:none;}}

/* ─── KPI ACCENT LINES — no pseudo-elements on stat cards ─── */

/* ─── SECTION LABEL ─── */
.section-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-muted);margin-bottom:6px;display:block;}

/* ─── INPUT FOCUS RING ─── */
.form-input:focus{border-color:var(--primary) !important;box-shadow:0 0 0 3px rgba(26,86,219,0.12) !important;outline:none !important;}

/* ─── SKELETON LOADING ─── */
.skel{background:linear-gradient(90deg,var(--surface) 25%,var(--border-light) 50%,var(--surface) 75%);background-size:200% 100%;animation:skelShimmer 1.4s ease-in-out infinite;border-radius:6px;display:block;}
@keyframes skelShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skel-card{background:#fff;border:1px solid rgba(0,0,0,0.06);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:10px;}
.skel-h{height:12px;}.skel-h-lg{height:16px;}.skel-circle{border-radius:50%;width:36px;height:36px;}
.skel-row{display:flex;gap:10px;align-items:center;}

/* ─── MICRO ANIMATIONS ─── */
.badge,.cc-badge{transition:background 0.2s,color 0.2s;}
.bnav-item.active .bnav-icon{transform:scale(1.08) !important;}

/* ─── EMPTY STATE ─── */
.empty-state{padding:32px 16px !important;text-align:center !important;}
.empty-state-title{font-size:14px !important;font-weight:700 !important;color:var(--text-primary) !important;margin-bottom:4px;}
.empty-state-sub{font-size:12px !important;color:var(--text-muted) !important;margin-bottom:16px;line-height:1.5;}

/* ─── MOBILE/TABLET RESPONSIVE ─── */
@media(max-width:480px){
  .dash-two-col{grid-template-columns:1fr;gap:8px;}
  .btn-gold,.btn-secondary{font-size:12px !important;}
  .cc-name{font-size:13px !important;}
}
@media(min-width:481px) and (max-width:768px){
  .dash-two-col{grid-template-columns:1fr;}
}

/* ─── QUOTATION WIZARD — compact native ─── */
.wiz-native-header{display:flex;align-items:center;justify-content:space-between;padding:10px 0 8px;}
.wiz-native-header__step{font-size:10px;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:0.07em;}
.wiz-native-header__title{font-size:17px;font-weight:700;color:var(--text-primary);letter-spacing:0;line-height:1.2;margin-top:1px;}
.wiz-reset-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:8px;background:var(--surface);color:var(--text-muted);border:1px solid var(--border-light);font-size:11.5px;font-weight:500;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent;}
.wiz-progress-bar{height:3px;background:var(--border-light) !important;border-radius:2px;margin:8px 0 10px;overflow:hidden;}
.wiz-progress-bar__fill{height:100%;background:var(--primary) !important;border-radius:2px;transition:width 0.3s ease;}
.wiz-steps-row{display:flex;align-items:center;gap:4px;margin-bottom:14px;overflow-x:auto;}
.wiz-step-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 9px !important;border-radius:20px;border:1px solid var(--border-light) !important;background:var(--white) !important;flex-shrink:0;transition:all 0.15s;}
.wiz-step-pill--active{background:var(--primary-light) !important;border-color:rgba(26,86,219,0.3) !important;}
.wiz-step-pill--done{background:rgba(14,201,168,0.08) !important;border-color:rgba(14,201,168,0.25) !important;}
.wiz-step-pill__dot{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--border);color:var(--text-muted);}
.wiz-step-pill--active .wiz-step-pill__dot{background:var(--primary);color:#fff;}
.wiz-step-pill--done .wiz-step-pill__dot{background:var(--success);color:#fff;}
.wiz-step-pill__label{font-size:11px;font-weight:600;color:var(--text-muted);}
.wiz-step-pill--active .wiz-step-pill__label{color:var(--primary);}
.wiz-step-pill--done .wiz-step-pill__label{color:var(--success);}

/* ─── UI CONSISTENCY — supplementary helpers (canonical chip/empty rules live in the Unified component system block below) ─── */
.ev-filter-row{margin-bottom:14px;}
.ev-filter-scroll{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding:2px 2px 4px;}
.ev-filter-scroll::-webkit-scrollbar{display:none;}
.ev-filter-tab .ev-filter-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:18px;padding:0 6px;border-radius:10px;font-size:10.5px;font-weight:700;background:var(--surface);color:var(--text-muted);line-height:1;}
.ev-filter-tab.active .ev-filter-icon{color:var(--primary);}
select.form-input{height:36px !important;font-size:12.5px !important;font-weight:500 !important;cursor:pointer;}
.badge-green{background:#dcfce7 !important;color:#15803d !important;}
.badge-blue{background:#dbeafe !important;color:#1d4ed8 !important;}
.badge-yellow{background:#fef9c3 !important;color:#a16207 !important;}
.badge-red{background:#fee2e2 !important;color:#b91c1c !important;}
.badge-gray{background:#f3f4f6 !important;color:#4b5563 !important;}
.badge-purple{background:#f3e8ff !important;color:#7e22ce !important;}
.badge-orange{background:#ffedd5;color:#c2410c;}

.cc-chip{display:inline-flex !important;align-items:center !important;gap:3px !important;padding:2.5px 7px !important;border-radius:5px !important;font-size:10.5px !important;font-weight:500 !important;background:var(--surface) !important;border:1px solid var(--border-light) !important;color:var(--text-muted) !important;white-space:nowrap !important;}
.search-icon{padding:0 10px;color:var(--text-muted);flex-shrink:0;font-size:12px;}

/* ── Expense filter bar (single source of truth) ── */
.exp-filter-row{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;}
.exp-search-box{display:flex;align-items:center;gap:10px;background:var(--bg-card);border:1.5px solid var(--border-light);border-radius:var(--r-sm);padding:0 12px;height:40px;transition:border-color 0.15s;}
.exp-search-box:focus-within{border-color:var(--primary);}
.exp-filter-selects{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.exp-filter-select{height:36px;font-size:12.5px;background:var(--bg-card);border:1.5px solid var(--border-light);border-radius:var(--r-sm);padding:0 28px 0 10px;flex:1;min-width:80px;color:var(--text-primary);font-family:inherit;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' viewBox='0 0 10 6'%3E%3Cpath stroke='%238888A6' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;-webkit-appearance:none;appearance:none;cursor:pointer;transition:border-color 0.15s;}
.exp-filter-select:focus{border-color:var(--primary);outline:none;}
.exp-filter-reset{flex-shrink:0;height:36px;color:var(--error);}

/* ═══════════════════════════════════════════════════════════════
   NATIVE POLISH — removes every remaining web-app artifact
═══════════════════════════════════════════════════════════════ */

/* 1 · iOS zoom prevention — 16px minimum on every editable field */
input:not([type="checkbox"]):not([type="radio"]),
textarea{font-size:16px !important;}

/* 2 · Input corners — native 10 px (vs webby 6 px) */
.form-input,
input[type="text"]:not(.login-input),
input[type="email"]:not(.login-input),
input[type="tel"]:not(.login-input),
input[type="number"]:not(.login-input),
input[type="date"]:not(.login-input),
input[type="password"]:not(.login-input),
input[type="search"]:not(.login-input),
textarea:not(.login-input){border-radius:10px !important;}

/* 3 · Form labels — native iOS uppercase micro-label */
.form-label,label.form-label{
  font-size:11.5px !important;font-weight:700 !important;
  letter-spacing:0.06em !important;text-transform:uppercase !important;
  color:var(--text-muted) !important;
}

/* 4 · Generic section / group headers */
.section-title,.page-section-title,.list-section-title,
.form-section-title,.crm-section-label,.settings-section-header{
  font-size:11.5px !important;font-weight:700 !important;
  letter-spacing:0.07em !important;text-transform:uppercase !important;
  color:var(--text-muted) !important;
}

/* 5 · Native heading hierarchy — tight tracking like SF Pro */
h1{font-size:26px;font-weight:800;letter-spacing:-0.03em;line-height:1.15;}
h2{font-size:20px;font-weight:700;letter-spacing:-0.02em;line-height:1.2;}
h3{font-size:17px !important;font-weight:700 !important;letter-spacing:-0.01em !important;line-height:1.25 !important;}

/* 6 · Top nav title — same as native iOS large-title collapsed weight */
.nav-page-title{font-size:17px !important;font-weight:700 !important;letter-spacing:-0.02em !important;}

/* 7 · Nav back button — spring press */
#nav-back-btn:active{
  transform:scale(0.84);background:var(--surface);
  transition:transform 40ms ease,background 40ms ease;
}

/* 8 · Buttons — spring release curve (feels physical, not CSS-linear) */
.btn-gold,.btn-primary,.btn-secondary,.btn-outline,.btn-ghost,.btn-danger{
  transition:transform 220ms cubic-bezier(0.34,1.56,0.64,1),
             background 120ms ease,box-shadow 120ms ease,opacity 120ms ease !important;
}
.btn-gold:active,.btn-primary:active{transform:scale(0.955) !important;transition-duration:40ms !important;}
.btn-secondary:active,.btn-outline:active{transform:scale(0.955) !important;transition-duration:40ms !important;}
.btn-ghost:active{transform:scale(0.955) !important;transition-duration:40ms !important;}
.btn-danger:active{transform:scale(0.955);transition-duration:40ms !important;}

/* 9 · Bottom-nav pill — spring width expand/collapse */
.bnav-item .bnav-icon-wrap{
  transition:width 280ms cubic-bezier(0.34,1.56,0.64,1),
             background 180ms ease !important;
}
.bnav-label{font-size:10px !important;font-weight:600 !important;letter-spacing:0 !important;}
.bnav-item.active .bnav-label{font-weight:700 !important;}
.bnav-item.active .bnav-icon{transform:scale(1.08) !important;transition:transform 280ms cubic-bezier(0.34,1.56,0.64,1) !important;}

/* 10 · Modal close spring */
.modal-close:active,.modal-close-btn:active{
  transform:scale(0.86) !important;transition-duration:40ms !important;
}

/* 11 · Search bar — pill shape, filled, native feel */
.list-search-bar{
  border-radius:12px;height:44px;
  background:var(--surface);border:1.5px solid transparent;
  box-shadow:none;
}
.list-search-bar:focus-within{
  background:var(--bg-card);border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(92,91,212,0.10);
}
.list-search-bar input{background:transparent !important;border:none !important;box-shadow:none !important;border-radius:0 !important;}

/* 12 · Toast — frosted card feel */
#toast{
  border-radius:16px;
  font-size:13.5px;font-weight:500;
  padding:12px 16px;gap:10px;
  box-shadow:0 8px 32px rgba(0,0,0,0.20),0 2px 6px rgba(0,0,0,0.10);
}
#toast-msg{font-weight:600;font-size:13.5px;line-height:1.3;}
#toast-sub{font-size:12px;color:rgba(255,255,255,0.75);margin-top:1px;}

/* 13 · Page header — type */
.page-title{font-size:22px !important;font-weight:800 !important;letter-spacing:-0.025em !important;color:var(--text-primary) !important;}
.page-sub{font-size:13px;color:var(--text-muted) !important;margin-top:3px;}

/* 14 · Settings rows — native iOS list cell minimum height */
.settings-nav-item,.settings-row,[class*="setting-item"]{
  min-height:52px !important;background:var(--bg-card) !important;
  display:flex !important;align-items:center !important;gap:14px !important;
  padding:0 16px !important;cursor:pointer;
  border-bottom:1px solid var(--border-light) !important;
  transition:background 60ms ease !important;
}
.settings-nav-item:active,.settings-row:active,[class*="setting-item"]:active{
  background:var(--surface) !important;transition-duration:40ms;
}
.settings-nav-item:last-child,.settings-row:last-child{border-bottom:none !important;}

/* 16 · touch-callout off — no long-press bubble on interactive elements */
button,a,[onclick],[role=button],.bnav-item,.more-menu-item,.card,.lead-card,.vendor-card,.event-card,.client-card,.quot-mobile-card{
  -webkit-touch-callout:none;
}

/* 17 · Generic onclick row press (catch-all for inline onclick divs) */
[onclick]:not(input):not(textarea):not(select):not(button):not(a):not([class*="btn"]):not([class*="card"]):not(.bnav-item):not([class*="chip"]):not([class*="filter-"]):not(.kpi-card-clickable):not(.nav-icon-btn):not(.more-menu-item):not(.wiz-step-pill):not(.modal-hd-icon):not(.more-menu-handle){
  cursor:pointer;
}
[onclick]:not(input):not(textarea):not(select):not(button):not(a):not([class*="btn"]):not([class*="card"]):not(.bnav-item):not([class*="chip"]):not([class*="filter-"]):not(.kpi-card-clickable):not(.nav-icon-btn):not(.more-menu-item):not(.wiz-step-pill):not(.modal-hd-icon):not(.more-menu-handle):active{
  background:rgba(0,0,0,0.045);transition:background 40ms;
}

/* 18 · Task list row / expense row / payment row press */
.task-list-row:active,.expense-row:active,.payment-row:active,
.crm-table-row:active,.vendor-job-row:active{
  background:var(--surface) !important;transition-duration:40ms !important;
}

/* 19 · More-menu drag handle */
.more-menu-handle{
  width:40px !important;height:4px !important;
  border-radius:2px !important;margin:14px auto 8px !important;
}

/* 20 · Bottom sheet drag handle */
#bottom-sheet::before,#page-form-panel::before{
  width:40px;height:4px;
  border-radius:2px;margin:14px auto 4px;
}

/* 21 · Scrollable areas — allow iOS natural bounce on containers */
.screen,.modal-body,#more-menu-sheet,.wiz-steps-row{
  -webkit-overflow-scrolling:touch;
}

/* 22 · Remove focus ring on mobile (tap interactions) */
@media(hover:none){
  :focus:not(:focus-visible){outline:none;box-shadow:none;}
}

/* 23 · No text cursor on non-editable elements */
[onclick]:not(input):not(textarea),.bnav-item,.card,.vendor-card,
.event-card,.client-card,.quot-mobile-card,.lead-card,.lead-card-v2{
  -webkit-user-select:none;user-select:none;
}

/* Unified component system — KPI cards, buttons, chips, empty states.
   Placed last so it wins the cascade against the polish rules above. */
.crm-kpi-grid,.layout-kpi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important;
  gap:10px !important;margin-bottom:14px;
}
@media (max-width:767px){
  .crm-kpi-grid,.layout-kpi-grid{grid-template-columns:repeat(2,1fr) !important;}
}
.stat-card,.layout-kpi-block,.quot-kpi-card{
  background:var(--bg-card) !important;
  border:1px solid rgba(0,0,0,0.06) !important;
  border-radius:var(--r-md) !important;
  padding:11px 13px;min-height:88px;
  display:flex;flex-direction:column;gap:2px;
  box-shadow:0 1px 2px rgba(15,17,35,0.04) !important;
}
.stat-card.kpi-card-clickable:active,
.layout-kpi-block.kpi-card-clickable:active,
.quot-kpi-card:active{transform:scale(0.985) !important;transition-duration:var(--dur-instant) !important;}
.stat-card .crm-kpi-value,
.layout-kpi-block .crm-kpi-value,
.layout-kpi-block .layout-kpi-block__value,
.quot-kpi-card .crm-kpi-value{
  font-size:1.5rem !important;font-weight:700 !important;
  letter-spacing:0 !important;margin:5px 0 2px;
  color:var(--text-primary) !important;font-variant-numeric:tabular-nums;
}
.crm-kpi-icon{
  width:30px !important;height:30px !important;border-radius:9px !important;
  font-size:12px !important;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
}
.crm-kpi-head,.layout-kpi-block__head{
  display:flex;align-items:center;
  justify-content:space-between;gap:6px;
}
.crm-kpi-sub{
  font-size:10.5px !important;font-weight:400 !important;
  color:var(--text-muted) !important;line-height:1.35 !important;
  overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important;
}
.btn-gold,.btn-primary,.btn-secondary,.btn-outline,
.btn-ghost,.btn-danger,.btn-danger-filled{
  display:inline-flex;align-items:center;justify-content:center !important;
  gap:6px;font-family:inherit;
  font-weight:600 !important;letter-spacing:0.01em !important;
  height:40px !important;min-height:40px !important;padding:0 16px !important;
  font-size:13px !important;border-radius:999px !important;
  -webkit-tap-highlight-color:transparent;
}
.btn-sm{
  height:32px !important;min-height:32px !important;
  padding:0 12px !important;font-size:12px !important;
  border-radius:999px !important;gap:5px;
}
.btn-sm i,.btn-sm .fa-solid,.btn-sm .fa-regular{font-size:10.5px !important;}
.btn-icon{
  width:36px;height:36px;min-height:36px;
  padding:0;border-radius:50%;
}
.btn-icon.btn-sm{width:32px;height:32px !important;min-height:32px !important;}
.btn-gold:active,.btn-primary:active,.btn-secondary:active,
.btn-outline:active,.btn-ghost:active,.btn-danger:active,
.btn-danger-filled:active{transform:scale(0.96) !important;transition-duration:var(--dur-instant) !important;}
button:disabled{opacity:0.4;pointer-events:none;}
.cc-card-action-btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:5px;flex:1;
  height:32px;min-height:32px;padding:0 12px;
  border-radius:999px;border:none;
  font-family:inherit;font-size:12px;font-weight:600;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.cc-card-action-btn.primary{background:var(--primary-light);color:var(--primary);}
.cc-card-action-btn.danger {background:var(--error-light);color:var(--error);}
.cc-card-action-btn:active {transform:scale(0.96);transition-duration:var(--dur-instant);}
.lead-filter-chip,.ev-filter-tab,.exp-type-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 13px !important;border-radius:22px;
  font-family:inherit;font-size:12px !important;font-weight:600;
  border:1.5px solid var(--border-light);
  background:var(--white);color:var(--text-secondary);
  min-height:34px;cursor:pointer;
  white-space:nowrap;flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
}
.lead-filter-chip.active,.ev-filter-tab.active,.exp-type-pill.active{
  background:var(--primary-light) !important;color:var(--primary) !important;
  border-color:rgba(26,86,219,0.4);
  box-shadow:0 1px 4px rgba(26,86,219,0.15) !important;
}
.lead-filter-chip:active,.ev-filter-tab:active,.exp-type-pill:active{transform:scale(0.96);}
.exp-type-pill--out.active{background:#FEF2F2 !important;border-color:rgba(220,38,38,0.4);color:#DC2626 !important;}
.exp-type-pill--in.active {background:var(--success-light) !important;border-color:rgba(14,201,168,0.4);color:#047857 !important;}
/* Empty state — clean, seamless, container-less.
   Chrome only: no card background, no dashed/dotted borders, no shadow.
   Spacing, typography and hierarchy preserved exactly as before. */
.ev-empty-card{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:32px 20px !important;
  text-align:center !important;display:flex;flex-direction:column;
  align-items:center;gap:10px;margin:6px 0;
}
.ev-empty-card .es-illustration{
  display:flex;align-items:center;justify-content:center;
  margin-bottom:4px;
}
.ev-empty-icon{
  width:56px;height:56px;border-radius:16px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:22px;margin-bottom:4px;
  background:var(--primary-light);color:var(--primary);
}
.ev-empty-title{font-size:15px !important;font-weight:700 !important;color:var(--text-primary) !important;}
.ev-empty-sub{
  font-size:12.5px !important;color:var(--text-muted) !important;
  max-width:320px;line-height:1.5;
}
.ev-empty-actions{
  display:flex;gap:8px;flex-wrap:wrap;
  justify-content:center;margin-top:10px;
}

/* ════════════════════════════════════════════════════════════════
   §UI-POLISH · Native interaction baseline (Task #9)
   - Universal tap feedback for cards & list rows that don't already
     declare an :active state.
   - Safe-area baseline for floating action buttons.
   - Global prefers-reduced-motion: strips decorative motion across
     page transitions, splash, logo spinners, skeleton shimmer, and
     micro-bounces — without disabling functional state changes.
════════════════════════════════════════════════════════════════ */

/* Tap-feedback baseline — only for surfaces that are themselves the
   click target. Cards containing inner action buttons (e.g.
   .client-card, .vendor-card, .event-card) are intentionally NOT
   listed here, otherwise a tap on a child button would also shrink
   the parent card. The :has() guard belt-and-suspenders the rule on
   browsers that support it (iOS 15.4+, Chromium 105+ — covers the
   PWA's mobile-only target). Per-page rules keep precedence via
   !important / higher specificity. */
.list-row,.kpi-card-clickable,
[role="button"]:not(button):not(a){
  -webkit-tap-highlight-color:transparent;
  transition:transform var(--dur-fast,80ms) var(--ease-standard,cubic-bezier(0.2,0,0,1)),
             background-color var(--dur-quick,120ms) var(--ease-standard,cubic-bezier(0.2,0,0,1));
}
.list-row:active,.kpi-card-clickable:active,
[role="button"]:not(button):not(a):active{
  transform:scale(0.985);
}
@supports selector(:has(*)){
  .list-row:has(button:active,a:active,[role="button"]:active):active,
  .kpi-card-clickable:has(button:active,a:active,[role="button"]:active):active{
    transform:none;
  }
}

/* Safe-area FAB — any element with .fab / .floating-action-btn sits
   above the bottom nav and respects iOS home indicator. */
.fab,.floating-action-btn{
  bottom:calc(var(--bnav-height,58px) + var(--safe-bottom,0px) + 12px) !important;
}

/* ─── Back-to-top FAB (Task #18) ──────────────────────────────────
   Compact circular FAB that fades in once a long list page has been
   scrolled past ~2× the viewport height. Sits in the bottom-right,
   above the bottom nav + home indicator. Hidden by default; the
   .show class fades + lifts it into view. */
.back-to-top-fab{
  position:fixed; right:16px;
  bottom:calc(var(--bnav-height,58px) + var(--safe-bottom,0px) + 16px);
  width:44px; height:44px; border-radius:50%;
  background:var(--bg-card); color:var(--text-primary);
  border:1px solid var(--border-light);
  box-shadow:0 4px 14px rgba(0,0,0,0.18), 0 1px 3px rgba(0,0,0,0.10);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; cursor:pointer; z-index:401;
  opacity:0; pointer-events:none; transform:translateY(8px) scale(0.92);
  transition:opacity var(--dur-quick,150ms) var(--ease-standard,ease),
             transform var(--dur-quick,150ms) var(--ease-standard,ease),
             background-color 0.15s;
  -webkit-tap-highlight-color:transparent;
}
.back-to-top-fab.show{
  opacity:1; pointer-events:auto; transform:translateY(0) scale(1);
}
.back-to-top-fab:active{
  transform:translateY(0) scale(0.92);
  transition-duration:var(--dur-instant,60ms);
}
.back-to-top-fab i{ display:block; line-height:1; }
@media (prefers-reduced-motion: reduce){
  .back-to-top-fab{ transition:opacity 0.01ms !important; transform:none !important; }
  .back-to-top-fab.show{ transform:none !important; }
}

/* ─── prefers-reduced-motion (global) ─────────────────────────── */
@media (prefers-reduced-motion: reduce){
  /* Kill page-swap animations entirely */
  .entering-right,.entering-left,.entering-fade,
  .leaving-right,.leaving-left,.leaving-fade{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
  /* Kill decorative loops */
  .skel,.skeleton,.skeleton-line,.skeleton-block,
  [class*="skeleton"],[data-skeleton],
  .nav-mobile-logo-box::before,.logo-ring-ccw,
  .app-loading-bar,.app-loading-icon,.app-loading-wordmark,
  .app-loading-bar-wrap,
  .ev-live-dot,.live-dot,
  #nav-progress-bar,#nav-progress-bar::after{
    animation:none !important;
  }
  /* Tap-feedback shrinks become instant */
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
  /* But keep functional state changes visible */
  .bnav-item.active .bnav-icon{transform:none !important;}
}


/* §UI-CHROME · Page-chrome helpers. */

/* Canonical page header — used by every top-level page renderer through the
   pageHeader() helper in app/components/page-header.js. Title appears only on
   desktop (>=1024px); on smaller screens the top nav-bar already shows it.
   Subtitle always carries .page-sub so the existing _sahaUpdateNavSub() reader
   and global hide rules apply unchanged (kept in DOM for nav-bar mirroring). */
.page-header{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px; margin-bottom:10px; flex-wrap:wrap;
}
.page-header__title-wrap{ min-width:0; flex:1 1 auto; }
.page-header__title{
  font-size:22px; font-weight:800; letter-spacing:-0.025em;
  color:var(--text-primary); margin:0; line-height:1.2;
}
.page-header__sub{
  font-size:13px; color:var(--text-muted);
  margin:3px 0 0; line-height:1.4;
}
.page-header__actions{
  display:flex; align-items:center; gap:8px; flex-shrink:0;
}
/* Back button — shown at every breakpoint on sub-pages so the user always has
   a clear way back, even on desktop where the nav-bar back button is hidden. */
.page-header__back{
  width:36px; height:36px; flex-shrink:0;
  border-radius:10px;
  background:var(--surface);
  border:1.5px solid var(--border);
  color:var(--text-primary);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-family:inherit; font-size:14px;
  -webkit-tap-highlight-color:transparent;
  transition:background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.page-header__back:active{
  background:var(--primary-light);
  border-color:var(--primary);
  color:var(--primary);
}
.page-header__back > i{ pointer-events:none; }
/* When a back button is present, vertically center it with the title-wrap.
   The h1 is hidden in-page (top nav-bar shows it) so only sub/breadcrumb show. */
.page-header--with-back{ align-items:center; }

/* Breadcrumb trail — always visible so deep navigation context is clear
   (the title h1 is hidden in-page; the trail still shows the user where they are). */
.page-header__breadcrumb{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:6px; margin:0 0 4px;
  font-size:12px; line-height:1.3; color:var(--text-muted);
}
.page-header__crumb{
  display:inline-flex; align-items:center;
  background:none; border:none; padding:0;
  font:inherit; color:inherit;
  max-width:160px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.page-header__crumb--link{
  color:var(--primary); cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.page-header__crumb--link:hover{ text-decoration:underline; }
.page-header__crumb--current{
  color:var(--text-primary); font-weight:600;
}
.page-header__crumb-sep{
  font-size:9px; color:var(--text-muted); opacity:0.7;
}
/* Title h1 is always hidden in-page (top nav-bar shows it). Header collapses
   to zero margin unless it has an actions slot, back button, or breadcrumb. */
.screen .page-header__title{ display:none; }
.screen .page-header:not(.page-header--hero){ margin-bottom:var(--space-3); }
.screen .page-header:not(.page-header--hero):has(.page-header__actions),
.screen .page-header:not(.page-header--hero):has(.page-header__back),
.screen .page-header:not(.page-header--hero):has(.page-header__breadcrumb){
  margin-bottom:10px;
}

/* Search-row wrapper (used when the bar shares a line with a filter button).
   The canonical `.page-search-bar` look itself lives in §UI-FIXES at the end
   of this file — that block uses `!important` and is the single source of
   truth so every page (Clients, Events, Vendors, Quotations, Leads,
   Payments, Expenses, Gallery chat) renders the SAME unified search box. */
.page-search-row{
  display:flex; align-items:center; gap:6px; margin-bottom:12px;
}
.page-search-row > .page-search-bar{ flex:1; }

/* Coming-soon page. */
.coming-soon{
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; min-height:60vh; gap:16px;
}
.coming-soon__icon{
  width:80px; height:80px; border-radius:12px;
  background:var(--primary-light);
  display:flex; align-items:center; justify-content:center;
}
.coming-soon__icon i{ font-size:30px; color:var(--primary); }
.coming-soon__title{
  font-size:22px; font-weight:700; color:var(--text-primary);
  margin:0;
}
.coming-soon__sub{
  font-size:14px; color:var(--text-muted); margin:0;
}

/* Long-value KPI value override. */
.crm-kpi-value--sm{ font-size:1.1rem !important; }

/* Panel-head icon-chip; tone via --phi-bg / --phi-color. */
.crm-panel-head-row{ display:flex; align-items:center; gap:8px; }
.crm-panel-head-row--between{ justify-content:space-between; width:100%; }
.crm-panel-head-icon{
  width:26px; height:26px; border-radius:7px;
  background:var(--phi-bg, var(--primary-light));
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.crm-panel-head-icon i{
  font-size:11px; color:var(--phi-color, var(--primary));
}
.crm-panel-head__pill{
  font-size:9px; font-weight:700;
  padding:2px 7px; border-radius:4px; margin-left:4px;
  background:var(--error-light); color:var(--error);
  letter-spacing:0.02em;
}

/* API-integration notice; tone via --an-bg-1/2 / --an-border /
   --an-icon-bg / --an-title / --an-sub. */
.api-notice{
  background:linear-gradient(135deg, var(--an-bg-1,#FFF8E1), var(--an-bg-2,#FFF3CD));
  border:1.5px solid var(--an-border,#F9A825);
  border-radius:12px; padding:14px 16px; margin-bottom:16px;
  display:flex; align-items:flex-start; gap:12px;
}
.api-notice__icon{
  width:36px; height:36px; border-radius:9px;
  background:var(--an-icon-bg, var(--an-border,#F9A825));
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.api-notice__icon i{ color:#fff; font-size:15px; }
.api-notice__body{ flex:1; min-width:0; }
.api-notice__title{
  font-size:13px; font-weight:700;
  color:var(--an-title,#7C5500); margin-bottom:3px;
}
.api-notice__sub{
  font-size:12px; line-height:1.5;
  color:var(--an-sub,#A16207);
}

/* Reports — Top-Services row. */
.report-row{
  display:flex; align-items:center; gap:10px; padding:9px 0;
}
.report-row + .report-row{ border-top:1px solid rgba(0,0,0,0.05); }
.report-rank{
  width:22px; height:22px; border-radius:6px;
  background:var(--primary-light);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  font-size:9px; font-weight:800; color:var(--primary);
}
.report-row__label{
  flex:1; font-size:12px; font-weight:600; color:var(--text-primary);
}
.report-row__count{
  font-size:11px; font-weight:700; color:var(--text-muted);
  min-width:30px; text-align:right;
}

/* Reports — Quotation status legend row. */
.report-legend-row{ display:flex; align-items:center; gap:6px; }
.report-legend-row__dot{
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
}
.report-legend-row__label{
  flex:1; font-size:11px; font-weight:600; color:var(--text-secondary);
}
.report-legend-row__count{
  font-size:11px; font-weight:700; color:var(--text-muted);
}

/* Reports — Month-over-month trend pill (--mom-color). */
.mom-badge{
  font-size:10px; font-weight:700;
  color:var(--mom-color, var(--success));
}

/* FontAwesome icon-size utilities. */
.fa-7 { font-size:7px; }
.fa-8 { font-size:8px; }
.fa-9 { font-size:9px; }
.fa-10{ font-size:10px; }
.fa-11{ font-size:11px; }
.fa-12{ font-size:12px; }
.fa-13{ font-size:13px; }
.fa-14{ font-size:14px; }
.fa-15{ font-size:15px; }
.fa-16{ font-size:16px; }
.fa-18{ font-size:18px; }

/* Section header label. */
.section-label{
  font-size:12px; font-weight:700;
  color:var(--text-muted); text-transform:uppercase;
  letter-spacing:0.8px;
}
.section-label__sub{
  margin-left:8px; font-size:10px;
  color:var(--text-muted); font-weight:500;
}

/* Settings / About sub-card chrome. */
.settings-pad-md  { padding:16px; }
.settings-pad-lg  { padding:24px; }
.settings-row-label { font-size:14px; color:var(--text-primary); }
.settings-row-meta  { font-size:12px; color:var(--text-muted); }

/* Company summary banner. */
.cmp-summary-title{
  font-size:14px; font-weight:700; color:var(--primary);
}
.cmp-summary-row{
  display:flex; align-items:center; gap:10px;
  font-size:13px; color:var(--text-secondary);
}

/* Vendor portal page chrome. */
.vp-hero-title{ font-size:18px; font-weight:800; color:var(--text-primary); }
.vp-hero-icon{
  width:52px; height:52px; border-radius:10px; background:var(--primary);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; box-shadow:0 2px 8px rgba(0,0,0,0.12);
}
.vp-hero-icon i{ color:#fff; font-size:20px; }
.vp-wo-btn{
  width:100%; padding:10px; border-radius:10px;
  border:1.5px solid var(--primary); background:var(--primary-light);
  color:var(--primary); font-size:12px; font-weight:700;
  cursor:pointer; font-family:inherit;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.vp-stat-card{
  background:var(--white); border-radius:10px; padding:14px;
  border:1.5px solid var(--border); box-shadow:var(--elevation-1);
}
.vp-stat-head{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.vp-stat-label{
  font-size:10.5px; font-weight:700; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:0.6px;
}
.vp-stat-value{ font-size:22px; font-weight:800; }
.vp-stat-value--sm{ font-size:14px; }
.vp-section-title{
  font-size:16px; font-weight:800; color:var(--text-primary);
  margin-bottom:12px; display:flex; align-items:center; gap:8px;
}
.vp-wo-qno{ font-size:13px; font-weight:800; color:var(--primary); }
.vp-wo-tag{
  display:inline-block; padding:2px 8px; border-radius:12px;
  background:var(--primary-light); color:var(--primary);
  font-size:10.5px; font-weight:600; margin:0 3px 3px 0;
}
.vp-total-amount{ font-size:24px; font-weight:800; color:var(--primary); }
.vp-pay-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0; border-bottom:1px solid var(--border-light); gap:8px;
}
.vp-pay-name{
  font-weight:600; font-size:13px; color:var(--text-primary);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vp-pay-amount{ font-weight:700; color:var(--success); flex-shrink:0; }
.vp-job-title{
  font-weight:700; font-size:14px; color:var(--text-primary);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vp-ev-title{ font-size:14px; font-weight:700; color:var(--text-primary); }
.vp-ev-status{
  font-size:10px; font-weight:600; padding:3px 9px; border-radius:12px;
}
.vp-ev-cell{ padding:8px 10px; background:var(--surface); border-radius:8px; }
.vp-ev-cell__label{ font-size:10px; color:var(--text-muted); font-weight:600; }
.vp-ev-cell__value{ font-size:13px; font-weight:600; }
.vp-ev-cell__value--sm{ font-size:12px; font-weight:500; }
.vp-mq-status{
  font-size:10px; font-weight:600; padding:2.5px 9px; border-radius:12px;
}
.vp-mq-title{
  font-size:14px; font-weight:700; color:var(--text-primary); margin-bottom:4px;
}

/* Settings sub-page picker rows. */
.settings-picker-row{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:14px 16px; background:none; border:none;
  cursor:pointer; font-family:inherit;
  -webkit-tap-highlight-color:transparent;
  font-size:14px; color:var(--text-primary);
}
.settings-picker-row:hover{ background:var(--surface); }
.settings-picker-row.is-selected{ font-weight:700; }
.settings-picker-check{ color:var(--primary); font-size:16px; }
.settings-picker-radio{
  width:20px; height:20px; border-radius:50%;
  border:2px solid var(--border);
}

/* Settings sub-page misc chrome. */
.settings-2fa-title { font-size:14px; font-weight:600; color:var(--text-primary); }
.settings-2fa-sub   { font-size:12px; color:var(--text-muted); margin-top:3px; line-height:1.5; }
.settings-session-name{ font-size:13.5px; font-weight:600; color:var(--text-primary); }
.settings-session-meta{ font-size:11.5px; color:var(--text-muted); margin-top:2px; }
.settings-session-this{
  font-size:10px; background:var(--success-light); color:var(--success);
  padding:2px 7px; border-radius:10px; font-weight:700; margin-left:4px;
}
.settings-end-btn{
  background:none; border:none; cursor:pointer; color:var(--error);
  padding:6px; font-family:inherit; font-weight:600; font-size:12px;
  -webkit-tap-highlight-color:transparent;
}
.settings-faq-q{
  font-size:13.5px; font-weight:600; color:var(--text-primary); line-height:1.4;
}
.settings-faq-a{ font-size:13px; color:var(--text-muted); line-height:1.6; }
.settings-info-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 0; border-bottom:1px solid var(--border-light);
}
.settings-info-row__k{ font-size:13px; color:var(--text-muted); }
.settings-info-row__v{ font-size:13px; font-weight:600; color:var(--text-primary); }

/* Users page — mobile card chrome. */
.users-mc-action{
  flex:1; display:flex; align-items:center; justify-content:center;
  gap:6px; padding:10px; background:none; border:none;
  font-size:var(--text-sm); font-weight:600; cursor:pointer;
  font-family:inherit; -webkit-tap-highlight-color:transparent;
}
.users-mc-action--primary  { color:var(--primary); }
.users-mc-action--danger   { color:#F45B41; }
.users-mc-divider{ width:1px; background:var(--border-light); }
.users-role-pill{
  font-size:11px; font-weight:700; padding:4px 10px;
  border-radius:6px; white-space:nowrap;
}
.users-table-avatar{
  width:38px; height:38px; border-radius:10px;
  border:1.5px solid; display:flex; align-items:center;
  justify-content:center; font-size:13px; font-weight:800;
  flex-shrink:0;
}
.users-table-name { font-weight:700; font-size:13.5px; color:var(--text-primary); }
.users-table-email{ font-size:11.5px; color:var(--text-muted); }
.users-table-cell { padding:14px 16px; font-size:13px; color:var(--text-secondary); }
.users-table-cell--phone{ font-size:13px; color:var(--text-secondary); }
.users-table-cell--meta { font-size:12px; color:var(--text-muted); }
.users-status-pill{
  font-size:11px; font-weight:700;
  padding:3px 10px; border-radius:12px;
}

/* Chat stub card. */
.chat-stub{ text-align:center; padding:32px 20px; }
.chat-stub__icon{
  font-size:34px; color:var(--primary); opacity:.75;
  display:block; margin-bottom:10px;
}
.chat-stub__title{
  font-size:15px; font-weight:700; color:var(--text-primary); margin-bottom:4px;
}
.chat-stub__sub{
  font-size:12px; color:var(--text-muted);
  max-width:420px; margin:0 auto 14px;
}

/* Social-media page chrome. */
.sm-platform-name{ font-size:13px; font-weight:600; color:var(--text-primary); }
.sm-stat-icon { margin-bottom:4px; display:block; }
.sm-stat-value{ font-size:1rem; font-weight:700; letter-spacing:-0.03em; }
.sm-stat-label{ font-size:9.5px; color:var(--text-muted); margin-top:2px; }
.sm-empty-icon{ font-size:28px; margin-bottom:8px; }
.sm-empty-msg { font-size:13px; font-weight:600; color:var(--text-secondary); }
.sm-post-thumb{ width:100%; height:100%; object-fit:cover; border-radius:8px; }
.sm-post-caption{
  font-size:12px; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sm-post-likes{ font-size:11px; font-weight:600; color:var(--primary); }
.sm-post-reach{ font-size:9.5px; color:var(--text-muted); }
.sm-key-label{
  font-size:11px; font-weight:600; color:var(--text-secondary);
  margin-bottom:4px; display:flex; align-items:center; gap:5px;
}

/* Settings · contact-row icon size variants. */
.settings-contact-icon__i     { font-size:17px; }
.settings-contact-icon__i--lg { font-size:19px; }

/* Settings · feedback page chrome. */
.fb-thanks{
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:48px 24px; text-align:center;
}
.fb-thanks__icon{
  width:72px; height:72px; border-radius:12px;
  background:var(--success-light);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
}
.fb-thanks__icon i{ color:var(--success); font-size:28px; }
.fb-thanks__title{
  font-size:22px; font-weight:800;
  color:var(--text-primary); letter-spacing:-0.5px; margin-bottom:10px;
}
.fb-thanks__sub{
  font-size:14px; color:var(--text-muted);
  line-height:1.6; max-width:280px;
}
.fb-thanks__again{ margin-top:24px; }
.fb-rate-card{ text-align:center; }
.fb-star-row{
  display:flex; justify-content:center; gap:8px; margin-bottom:8px;
}
.fb-star{
  background:none; border:none; cursor:pointer;
  font-size:38px; padding:4px; transition:all 0.15s;
  -webkit-tap-highlight-color:transparent;
}
.fb-rating-label{
  font-size:14px; font-weight:600;
  color:var(--text-muted); min-height:22px;
}
.fb-tag-chip{
  padding:8px 14px; border-radius:12px;
  border:1.5px solid var(--border); background:var(--white);
  font-size:12.5px; font-weight:600; color:var(--text-muted);
  cursor:pointer; font-family:inherit; transition:all 0.15s;
  -webkit-tap-highlight-color:transparent;
}
.fb-submit{
  margin-top:4px; padding:15px;
  font-size:15px; border-radius:10px;
}

/* Event-types page chrome. */
.et-icon{
  width:44px; height:44px; border-radius:10px;
  border:2px solid; display:flex; align-items:center;
  justify-content:center; font-size:22px; flex-shrink:0;
}
.et-action-btn{
  width:32px; height:32px; border-radius:8px;
  border:1.5px solid var(--border); background:var(--surface);
  cursor:pointer; color:var(--text-muted);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transition:background 150ms,color 150ms,border-color 150ms;
}
.et-action-btn--edit{ color:var(--primary); font-size:12px; }
.et-action-btn--del {
  color:var(--error); border-color:var(--error-light);
  background:var(--white); font-size:12px;
}
.et-desc{
  display:none; margin-top:10px; padding:10px 12px;
  background:var(--surface); border-radius:8px;
  border-left:3px solid; font-size:12.5px;
  color:var(--text-secondary); line-height:1.55;
}
.et-desc--empty{ color:var(--text-muted); }

/* Gallery page chrome. */
.gal-vid-duration{
  position:absolute; bottom:5px; right:5px;
  padding:1px 5px; border-radius:4px;
  background:rgba(0,0,0,0.72); color:#fff;
  font-size:9px; font-weight:700;
  font-family:monospace; letter-spacing:0.01em;
}
.gal-add-item-btn{
  padding:4px 10px; border-radius:8px;
  border:1.5px solid var(--primary); background:var(--primary-light);
  color:var(--primary); font-size:11px; font-weight:700;
  cursor:pointer; font-family:inherit;
  display:flex; align-items:center; gap:4px;
  -webkit-tap-highlight-color:transparent;
}
.gal-cat-mini-btn{
  width:28px; height:28px; border-radius:7px;
  border:1.5px solid var(--border); background:var(--surface);
  cursor:pointer; color:var(--text-muted);
  display:flex; align-items:center; justify-content:center;
  font-size:10px; -webkit-tap-highlight-color:transparent;
}
.gal-cat-mini-btn--del{
  border-color:var(--error-light); color:var(--error);
}
.gal-thumb-fallback{
  position:absolute; inset:0;
  align-items:center; justify-content:center; font-size:28px;
}
.gal-vid-overlay{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.gal-vid-overlay__btn{
  width:34px; height:34px; border-radius:50%;
  background:rgba(0,0,0,0.52);
  display:flex; align-items:center; justify-content:center;
}
.gal-vid-overlay__btn i{ color:#fff; font-size:11px; margin-left:2px; }
.gal-thumb-count{
  position:absolute; top:6px; left:6px;
  padding:2px 6px; border-radius:10px;
  background:rgba(0,0,0,0.58); color:#fff;
  font-size:10px; font-weight:700;
}
.gal-thumb-empty-icon{ font-size:26px; }
.gal-thumb-add-photo{
  font-size:9px; color:var(--text-muted); font-weight:600;
}
.gal-sub-name{
  font-size:12px; font-weight:700; color:var(--text-primary);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.gal-sub-desc{
  font-size:10px; color:var(--text-muted); margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.gal-item-edit-btn,
.gal-item-del-btn{
  position:absolute; right:6px;
  width:30px; height:30px; border-radius:8px;
  cursor:pointer; font-size:12px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 6px rgba(0,0,0,0.12);
  -webkit-tap-highlight-color:transparent;
}
.gal-item-edit-btn{
  top:6px; background:rgba(255,255,255,0.95);
  border:1px solid rgba(0,0,0,0.10); color:var(--text-muted);
}
.gal-item-del-btn{
  top:42px; background:rgba(255,235,235,0.97);
  border:1px solid rgba(239,68,68,0.22); color:var(--error);
}
.gal-add-item-card{
  background:var(--surface); border:2px dashed var(--border);
  border-radius:10px; cursor:pointer;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:6px; min-height:160px; transition:all 0.15s;
  -webkit-tap-highlight-color:transparent;
}
.gal-add-item-card__label{
  font-size:11px; font-weight:600; color:var(--text-muted);
}

/* Payments page row chrome. */
.pay-row-icon{
  width:36px; height:36px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}

/* Leads card amount column. */
.lead-card-amount{
  flex:1; font-size:var(--text-sm);
  display:flex; align-items:center; gap:4px;
}

/* Google Ads campaign-row chrome. */
.ads-campaign-name{
  font-size:12.5px; font-weight:600; color:var(--text-primary);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ads-campaign-status{ font-size:11px; font-weight:600; }
.ads-campaign-clicks{ font-size:9.5px; color:var(--text-muted); }

/* Vendor rating numeric. */
.vendor-rating-num{ font-size:12px; font-weight:700; color:var(--text-secondary); }

/* Roles page permissions count. */
.role-perm-count{ font-size:11.5px; margin-top:5px; font-weight:600; }

/* Google Ads "Connect" empty card. */
.ads-connect-card{ padding:32px; text-align:center; margin-bottom:16px; }
.ads-connect-card__icon{
  width:64px; height:64px; border-radius:16px; background:#e8f0fe;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 16px;
}
.ads-connect-card__icon i{ font-size:28px; color:#4285F4; }
.ads-connect-card__title{
  font-size:15px; font-weight:700; color:var(--text-primary); margin-bottom:8px;
}
.ads-connect-card__sub{
  font-size:12.5px; color:var(--text-muted); line-height:1.6; margin-bottom:20px;
}

/* ════════════════════════════════════════════════════════════════
   §UI-CARDBODY · Shared card-body helpers (Task #22)
   - Row layout / icon-chip / meta primitives so card bodies for
     leads, users (mobile), vendors, gallery thumbs, social-media
     tiles & posts, and google-ads campaign rows share one ruleset.
   - Keeps data-driven colors inline; layout/font tokens move here.
════════════════════════════════════════════════════════════════ */

/* Generic flex row used inside card bodies. */
.cc-row{ display:flex; align-items:center; gap:12px; }
.cc-row--start  { align-items:flex-start; }
.cc-row--between{ justify-content:space-between; }
.cc-row--tight  { gap:0; }
.cc-row__main   { flex:1; min-width:0; }
.cc-row__main--ellipsis>.cc-meta,
.cc-row__main--ellipsis .cc-meta--ellipsis{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cc-row__end{
  display:flex; flex-direction:column;
  align-items:flex-end; gap:5px; flex-shrink:0;
}
.cc-meta--tight{ margin-top:1px; }
.cc-meta--lh   { line-height:1.45; }

/* Inline icon+text run used in info-strips and badges. */
.cc-icon-row{ display:inline-flex; align-items:center; gap:5px; }
.cc-icon-row--xs{ gap:4px; }
.cc-icon-row--grow{ flex:1; }

/* Square coloured icon-chip used by social-media platform tiles &
   ads campaign rows (data-driven background/colour stays inline). */
.cc-icon-chip{
  width:38px; height:38px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.cc-icon-chip--sm{ width:36px; height:36px; border-radius:8px; }
.cc-icon-chip--dot{
  width:10px; height:10px; border-radius:50%; flex-shrink:0;
}

/* Vendor-style meta block icons (left-padded inline icon). */
.cc-meta-icon{ width:16px; margin-right:6px; opacity:0.5; }

/* Equal-width action button inside a card-actions row. */
.cc-action-grow{ flex:1; justify-content:center; }
.cc-action-grow.is-disabled{ opacity:0.45; }

/* Users mobile-card layout. */
.users-mc-card{
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.users-mc-head { padding:13px 14px 10px; }
.users-mc-strip{ display:flex; align-items:center; padding:0 14px 10px; }
.users-mc-actions{ display:flex; border-top:1px solid var(--border-light); }

/* Vendor-card header (avatar+name | rating). */
.vendor-card__head{
  display:flex; align-items:flex-start; justify-content:space-between;
  margin-bottom:12px;
}
.vendor-card__head-left{ display:flex; align-items:center; gap:12px; }
.vendor-card__rating{
  display:flex; align-items:center; gap:3px; flex-shrink:0;
}

/* Social-media platform tile + post list. */
.sm-platform-grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:10px; margin-bottom:18px;
}
.sm-platform-card{ padding:12px 14px; cursor:pointer; }
.sm-platform-card__row{ gap:10px; }
.sm-platform-card__status{ font-size:10.5px; font-weight:500; }
.sm-platform-row{ display:flex; gap:6px; flex-wrap:wrap; }
.sm-analytics-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:rgba(0,0,0,0.06);
}
.sm-analytics-cell{ background:var(--white); padding:12px; text-align:center; }
.sm-analytics-foot{ padding:12px 16px; }
.sm-empty       { padding:20px; text-align:center; }
.sm-post-list   { display:flex; flex-direction:column; }
.sm-post-row{
  display:flex; align-items:center; gap:10px; padding:10px 16px;
}
.sm-post-row + .sm-post-row{ border-top:1px solid rgba(0,0,0,0.05); }
.sm-post-row__thumb{
  width:40px; height:40px; border-radius:8px;
  background:var(--surface);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; overflow:hidden;
}
.sm-post-row__end{ text-align:right; flex-shrink:0; }
.sm-key-list{
  padding:14px 16px; display:flex; flex-direction:column; gap:10px;
}
.sm-key-row{ display:flex; gap:6px; }
.sm-key-row .form-input{ flex:1; font-size:12px; height:34px; }
.sm-key-row .btn-gold  { flex-shrink:0; }
.sm-create-panel-body  { padding:14px 16px; }
.sm-create-panel-actions{ margin-bottom:12px; }

/* Google-ads campaign row + key-list. */
.ads-camp-list{ display:flex; flex-direction:column; }
.ads-camp-row{
  display:flex; align-items:center; gap:12px;
  padding:11px 16px; cursor:pointer;
}
.ads-camp-row + .ads-camp-row{ border-top:1px solid rgba(0,0,0,0.05); }
.ads-camp-row__end{ text-align:right; flex-shrink:0; }
.ads-empty{ padding:20px; text-align:center; }
.ads-key-list{
  padding:14px 16px; display:flex; flex-direction:column; gap:12px;
}
.ads-key-row{ display:flex; gap:6px; }
.ads-key-row .form-input{ flex:1; font-size:12px; height:34px; }
.ads-key-row .btn-gold  { flex-shrink:0; }

/* Gallery — category section, grid, and thumb card. */
/* Native-style sticky service tabs (Google Pay / Apple Wallet inspired). */
.gal-tabs-v2{
  position:sticky; top:0; z-index:20;
  margin:0 -4px 10px;
  padding:6px 4px 0;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -ms-overflow-style:none;
  background:var(--bg, #fff);
  -webkit-backdrop-filter:saturate(180%) blur(10px);
          backdrop-filter:saturate(180%) blur(10px);
}
.gal-tabs-v2::-webkit-scrollbar{ display:none; }
.gal-tabs-v2__track{
  position:relative;
  display:inline-flex; align-items:stretch; gap:4px;
  padding:4px 4px 10px;
  min-width:100%;
}
.gal-tab-v2{
  position:relative;
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px;
  border:0; background:transparent;
  font-family:inherit; font-size:13px; font-weight:600;
  color:var(--text-muted);
  border-radius:12px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:color 200ms ease, background-color 200ms ease, transform 120ms ease;
  white-space:nowrap;
}
.gal-tab-v2:hover{ color:var(--text-primary); }
.gal-tab-v2:active{ transform:scale(0.97); }
.gal-tab-v2.is-active{ color:var(--primary); }
.gal-tab-v2__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; font-size:16px; line-height:1;
}
.gal-tab-v2__label{ letter-spacing:0.1px; }
.gal-tab-v2__count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:18px; padding:0 6px;
  border-radius:10px;
  font-size:10.5px; font-weight:700; line-height:1;
  background:var(--surface); color:var(--text-muted);
  transition:background-color 200ms ease, color 200ms ease;
}
.gal-tab-v2.is-active .gal-tab-v2__count{
  background:var(--primary); color:#fff;
}
.gal-tabs-v2__indicator{
  position:absolute;
  left:0; bottom:4px;
  height:3px; width:0;
  border-radius:3px;
  background:var(--primary);
  transform:translate3d(0,0,0);
  transition:transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
             width 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events:none;
  will-change:transform, width;
}
.gal-pager.is-dragging ~ .gal-tabs-v2 .gal-tabs-v2__indicator,
.gal-pager.is-dragging .gal-tabs-v2__indicator{ transition:none; }

/* Swipeable pager (one panel per service). */
.gal-pager{
  position:relative;
  overflow:hidden;
  width:100%;
  touch-action:pan-y;
  -webkit-user-select:none; user-select:none;
}
.gal-pager__track{
  display:flex; align-items:flex-start;
  width:100%;
  will-change:transform;
  transform:translate3d(0,0,0);
  backface-visibility:hidden;
}
.gal-pager.is-dragging .gal-pager__track{ transition:none !important; }
.gal-pager__page{
  flex:0 0 100%;
  width:100%;
  min-width:0;
  box-sizing:border-box;
  padding:0 2px;
}
.gal-pager__grid{ min-height:120px; }

/* Legacy class kept for backwards-compat (chips wrapper). */
.gal-chips-row{ min-height:10px; }
.gal-grid-pad { padding-bottom:80px; }
.gal-cat-section{ margin-bottom:28px; }
.gal-cat-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px;
}
.gal-cat-head__actions{ display:flex; gap:5px; align-items:center; }
.gal-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
  gap:10px;
}
.gal-thumb-card{
  background:var(--white);
  border:1.5px solid var(--border-strong);
  border-radius:10px; overflow:hidden; position:relative;
  box-shadow:0 2px 10px rgba(12,31,61,0.13),0 1px 4px rgba(12,31,61,0.08);
  transition:transform 0.18s, box-shadow 0.18s;
}
.gal-thumb-card:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(12,31,61,0.18),0 2px 8px rgba(12,31,61,0.10);
}
.gal-thumb-media{
  height:110px; background:var(--surface); position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.gal-thumb-media__img{
  width:100%; height:100%; object-fit:cover;
}
.gal-thumb-media__empty{
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:5px; width:100%; height:100%;
}
.gal-thumb-meta{ padding:8px 10px; }
.gal-add-item-card:hover{
  border-color:var(--primary); background:var(--primary-light);
}
.gal-add-item-card__icon{ font-size:18px; color:var(--text-muted); }
.gal-empty-wrap{ padding:8px 0; }

/* Page-level chrome margins used inside the six refactored renderers. */
.panel-mb { margin-bottom:16px; }
.panel-mt { margin-top:16px; }
.search-row-tight{ margin-bottom:8px; }
.cc-meta--mt4{ margin-top:4px; }
.btn-mt-10{ margin-top:10px; }
.btn-mt-4 { margin-top:4px; }

/* Leads virtual-list stack (the host of the lead cards). */
.leads-list-stack{ display:flex; flex-direction:column; gap:8px; }

/* Vendors page search row wrapper. */
.vendors-search-row{ margin-bottom:12px; }

/* Users desktop table — chrome moved off inline styles so the data
   table looks identical without per-cell style attributes. */
.data-table{ width:100%; border-collapse:collapse; }
.data-table thead tr   { background:var(--surface); }
.data-table .th--center { text-align:center; }
.data-table-row        { border-top:1px solid var(--border-light); }
.users-table-cell--main{ padding:14px 16px; }
.users-table-cell--actions{
  padding:14px 16px; text-align:center;
}
.users-table-actions{
  display:flex; gap:6px; justify-content:center;
}
.users-role-pill__icon{ margin-right:4px; }

/* Users mobile-card role badge — fixed corner radius (no data colour). */
.users-mc-role-badge       { border-radius:6px; }
.users-mc-role-badge__icon { margin-right:3px; }

/* ────────────────────────────────────────────────────────────────
   Form-body & action-sheet layout helpers (Task #28).
   Folds repeated inline `style="display:flex/grid;padding/margin/gap"`
   off page-form bodies, role permission picker, services category
   form, and the lead/quote action-sheet status grids.
   Data-driven colour state (active border / bg / text colour) stays
   inline since it depends on per-row status config.
   ──────────────────────────────────────────────────────────────── */

/* Form-body utilities. */
.form-mb        { margin-bottom:14px; }
.form-mb-lg     { margin-bottom:16px; }
.form-grid-full { grid-column:1/-1; }
.form-textarea-md{ height:68px; }

/* Roles — color swatch row + permission picker. */
.role-color-row{ display:flex; align-items:center; gap:10px; }
.role-color-swatch{
  width:42px; height:41px; padding:2px;
  border:1.5px solid var(--border); border-radius:8px;
  background:var(--white); cursor:pointer;
}
.role-color-hex{ flex:1; }
.role-perm-label{ margin-bottom:10px; }
.role-perm-list{
  max-height:300px; overflow-y:auto; padding-right:4px;
}
.role-perm-row{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; margin-bottom:6px;
  border:1.5px solid var(--border); border-radius:6px;
  background:var(--white); cursor:pointer;
}
.role-perm-row__cb{
  width:15px; height:15px; accent-color:var(--primary);
  flex-shrink:0;
}
.role-perm-row__main { flex:1; min-width:0; }
.role-perm-row__title{ font-size:13px; font-weight:600; }
.role-perm-row__desc { font-size:11px; color:var(--text-muted); }

/* Services — feature toggle (image-selection checkbox label). */
.svc-feature-toggle{
  display:flex; align-items:flex-start; gap:12px;
  padding:12px 14px; margin-top:14px;
  border:1.5px solid var(--border); border-radius:10px;
  background:var(--surface); cursor:pointer;
}
.svc-feature-toggle__cb{
  width:18px; height:18px; margin-top:1px;
  accent-color:var(--primary); cursor:pointer; flex-shrink:0;
}
.svc-feature-toggle__title{
  font-size:13px; font-weight:600; color:var(--text-primary);
}
.svc-feature-toggle__desc{
  margin-top:3px; font-size:11.5px; line-height:1.5;
  color:var(--text-muted);
}

/* Services — category items list (head + row + thumb + remove). */
.svc-cat-items-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px;
}
.svc-cat-items-head .form-label{ margin:0; }
.svc-cat-row{
  display:grid; grid-template-columns:1fr auto;
  gap:6px; align-items:start; margin-bottom:6px;
}
.svc-cat-input     { font-size:12px; height:36px; margin-bottom:4px; }
.svc-cat-input--desc{ height:32px; color:var(--text-muted); }
.svc-cat-upload    { display:flex; align-items:center; gap:8px; margin-top:4px; }
.svc-cat-upload__label{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; color:var(--text-muted); cursor:pointer;
}
.svc-cat-upload__input  { display:none; }
.svc-cat-upload__trigger{
  padding:4px 8px; border-radius:7px;
  border:1px solid var(--border); background:var(--surface);
}
.svc-cat-img{
  width:42px; height:42px; border-radius:8px; object-fit:cover;
  border:1px solid var(--border);
}
.svc-cat-img-empty{
  width:42px; height:42px; border-radius:8px;
  background:var(--surface);
  border:1px dashed var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); font-size:11px;
}
.svc-cat-row__remove{
  width:32px; height:36px; border-radius:7px;
  border:1px solid var(--error-light); background:none;
  color:var(--error); cursor:pointer; flex-shrink:0;
}

/* Bottom-sheet — section label + status-button grid. */
.bsheet-section-label{
  font-size:10.5px; font-weight:700;
  color:var(--text-muted); letter-spacing:0.5px;
  text-transform:uppercase;
  padding:0 4px; margin-bottom:6px;
}
.bsheet-status-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:8px;
}
.bsheet-status-btn{
  display:flex; align-items:center; gap:9px;
  padding:10px 12px; border-radius:8px;
  border:1.5px solid var(--border); background:var(--surface);
  font-family:inherit; font-size:13px; font-weight:500;
  color:var(--text-secondary);
  cursor:pointer; transition:all 0.12s;
  -webkit-tap-highlight-color:transparent;
}
.bsheet-status-btn.is-active     { font-weight:700; }
.bsheet-status-btn__icon         { font-size:14px; flex-shrink:0; }
.bsheet-status-btn__check        { margin-left:auto; font-size:10px; }

/* Client detail bottom-sheet body — 3-stat strip, info chips, recent
   quotes/events lists. Used by openClientDetail (clients-actions.js). */
.cc-detail-stats{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:rgba(0,0,0,0.06);
  margin:-14px -16px 14px;
}
.cc-detail-stat{
  background:var(--white,#fff);
  padding:12px 14px; text-align:center;
}
.cc-detail-stat__value{
  font-size:1.1rem; font-weight:700;
  letter-spacing:-0.03em; color:var(--text-primary);
}
.cc-detail-stat__label{
  margin-top:2px; font-size:11px; font-weight:600;
  color:var(--text-muted);
}
.cc-detail-info{
  display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px;
}
.cc-detail-notes{
  background:var(--surface); border:1px solid var(--border-light);
  border-radius:10px; padding:10px 12px; margin-bottom:14px;
  font-size:12px; color:var(--text-secondary); line-height:1.5;
}
.cc-detail-section{ margin-bottom:14px; }
.cc-detail-section:last-child{ margin-bottom:0; }
.cc-detail-section__label{
  font-size:10px; font-weight:700;
  color:var(--text-muted); letter-spacing:0.07em;
  text-transform:uppercase; margin-bottom:8px;
}
.cc-detail-list{ display:flex; flex-direction:column; gap:6px; }
.cc-detail-row{
  display:flex; align-items:center; gap:10px;
  padding:8px 11px; background:var(--surface);
  border:1px solid var(--border-light); border-radius:10px;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.cc-detail-row__main{ flex:1; min-width:0; }
.cc-detail-row__title{
  font-size:12px; font-weight:600; color:var(--text-primary);
}
.cc-detail-row__right{ text-align:right; flex-shrink:0; }
.cc-detail-row__amount{ font-size:12px; font-weight:700; }
.cc-detail-row__pill{
  display:inline-block; font-size:9.5px; font-weight:600;
  padding:1.5px 7px; border-radius:12px;
}
.cc-detail-evicon{
  width:36px; height:36px; border-radius:9px;
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; flex-shrink:0;
}
.cc-detail-evbudget{
  font-size:11px; font-weight:600; color:var(--text-muted);
}

/* Client filter bottom-sheet — single-column option list. Used by
   showClientFilterSheet (clients-actions.js). */
.cc-filter-list{ display:flex; flex-direction:column; gap:6px; }
.cc-filter-option{
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 14px; border-radius:8px;
  border:1.5px solid var(--border); background:var(--surface);
  cursor:pointer; font-family:inherit;
  font-size:13px; font-weight:500; color:var(--text-secondary);
  -webkit-tap-highlight-color:transparent;
}
.cc-filter-option.is-active{
  border-color:var(--primary); background:var(--primary-light);
  color:var(--primary); font-weight:700;
}


/* ════════════════════════════════════════════════════════════════
   §UI-BSHEET · Unified bottom-sheet primitive (Task #14)
   - Canonical sheet built dynamically by openBottomSheet({...}).
   - Legacy #pf-sheet / #bottom-sheet share the same drag-to-dismiss,
     focus-trap, escape, and reduced-motion behavior via the shared
     JS controller (_attachSheetBehavior).
   - Scrim fades in/out, sheet slides in/out with spring easing,
     bottom safe-area inset is honoured, drag-handle visible on
     mobile only.
════════════════════════════════════════════════════════════════ */
.bsheet-root{
  position:fixed; inset:0; z-index:var(--z-sheet, 2100);
  display:flex; flex-direction:column; justify-content:flex-end;
  pointer-events:none;
}
.bsheet-scrim{
  position:absolute; inset:0;
  background:rgba(0,0,0,0.42);
  opacity:0;
  transition:opacity 220ms cubic-bezier(0.25,0.46,0.45,0.94);
  pointer-events:none;
}
.bsheet-root.open .bsheet-scrim{ opacity:1; pointer-events:auto; }
.bsheet{
  position:relative; pointer-events:auto;
  background:var(--bg-card,#fff);
  border-radius:24px 24px 0 0;
  box-shadow:0 -4px 24px rgba(0,0,0,0.16);
  max-height:90dvh; display:flex; flex-direction:column; overflow:hidden;
  transform:translateY(100%);
  transition:transform 260ms cubic-bezier(0.32,0.72,0,1);
  padding-bottom:env(safe-area-inset-bottom,0px);
  will-change:transform;
}
.bsheet-root.open .bsheet{ transform:translateY(0); }
.plt-ios .bsheet{ border-radius:36px 36px 0 0; }
.bsheet-handle{
  /* Drag-to-dismiss disabled — handle hidden to avoid implying gesture. */
  display:none;
}
.bsheet-head{
  display:flex; align-items:center; gap:10px;
  padding:12px 16px 10px;
  border-bottom:1px solid var(--border-light); flex-shrink:0;
}
.bsheet-head-icon{
  width:36px; height:36px; border-radius:10px; flex-shrink:0;
  background:var(--primary-light);
  display:flex; align-items:center; justify-content:center;
}
.bsheet-head-icon i{ color:var(--primary); font-size:15px; }
.bsheet-head-text{ flex:1; min-width:0; }
.bsheet-title{
  font-size:15px; font-weight:700; color:var(--text-primary);
  letter-spacing:-0.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bsheet-sub{ font-size:11.5px; color:var(--text-muted); margin-top:1px; }
.bsheet-close{
  width:32px; height:32px; border-radius:50%;
  background:var(--surface); border:1px solid var(--border-light);
  color:var(--text-muted); font-size:13px; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
.bsheet-body{
  flex:1 1 auto; overflow-y:auto;
  padding:14px 16px;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
.bsheet-actions{
  display:flex; gap:8px; padding:12px 16px;
  padding-bottom:max(12px, env(safe-area-inset-bottom,12px));
  border-top:1px solid var(--border-light);
  background:var(--surface); flex-shrink:0;
}
.bsheet-actions .bsheet-action{ flex:1; justify-content:center; }
.bsheet-actions .bsheet-action.btn-gold,
.bsheet-actions .bsheet-action.btn-danger-filled{ flex:1.5; }

@media (min-width:768px){
  .bsheet-root{ justify-content:center; align-items:center; padding:40px; }
  .bsheet{
    width:min(520px,100%); max-height:80dvh;
    border-radius:var(--r-lg,16px) !important;
    transform:translateY(20px) scale(0.97); opacity:0;
    transition:transform 220ms ease, opacity 200ms ease;
  }
  .bsheet-root.open .bsheet{ transform:translateY(0) scale(1); opacity:1; }
  .bsheet-handle{ display:none; }
}

/* Reduced motion: snap open/close, no slide. Applies to the new
   primitive AND the legacy modal-as-bottom-sheet elements so that
   every sheet in the app respects the system preference. */
@media (prefers-reduced-motion: reduce){
  .bsheet, .bsheet-scrim,
  #pf-sheet, #bottom-sheet, #more-menu-sheet, #pf-backdrop, #bs-overlay{
    transition:none !important; animation:none !important;
  }
  .bsheet-root .bsheet{ transform:none !important; opacity:1 !important; }
  .bsheet-root .bsheet-scrim{ opacity:1 !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   §UI-EVENT-DETAIL — Event Detail modal body helpers
   Used by openEventDetail / _buildMenuHtml in app/clients-actions.js.
   Only data-driven colors (service color, status check color, progress %)
   stay inline; everything else is centralized here.
   ───────────────────────────────────────────────────────────────────── */
.evd-body{ display:flex; flex-direction:column; gap:12px; }

.evd-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.evd-stat{ padding:10px 12px; background:var(--surface); border-radius:8px; }
.evd-stat__label{
  font-size:10px; color:var(--text-muted); font-weight:600;
  text-transform:uppercase; letter-spacing:0.04em;
}
.evd-stat__value{ font-size:16px; font-weight:700; margin-top:2px; }
.evd-stat__value--paid{ color:var(--success); }
.evd-progress-bar{
  height:3px; background:var(--border); border-radius:2px; margin-top:4px;
}
.evd-progress-fill{
  height:100%; background:var(--primary); border-radius:2px;
  transition:width 0.4s;
}

.evd-info-row{
  display:flex; align-items:center; gap:8px;
  padding:9px 12px; background:var(--surface); border-radius:8px;
  font-size:12.5px; color:var(--text-secondary);
}
.evd-info-row i{ color:var(--primary); font-size:12px; flex-shrink:0; }
.evd-info-row--note{
  display:block; font-size:12px; line-height:1.5; font-style:italic;
}

.evd-section-label{
  font-size:10px; font-weight:700; color:var(--text-muted);
  letter-spacing:0.06em; text-transform:uppercase; margin-bottom:7px;
}

.evd-list{ display:flex; flex-direction:column; gap:5px; }
.evd-row{
  padding:8px 10px; background:var(--surface); border-radius:8px;
  display:flex; align-items:center; gap:8px;
}
.evd-row--split{ justify-content:space-between; }
.evd-row__more{ font-size:11px; color:var(--text-muted); padding:4px 0; }
.evd-empty{ font-size:12px; color:var(--text-muted); }

.evd-task-check{
  width:16px; height:16px; border-radius:50%;
  border:2px solid var(--border); background:transparent;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.evd-task-check--done{ border-color:var(--success); background:var(--success); }
.evd-task-check i{ font-size:8px; color:#fff; }
.evd-task-title{ flex:1; font-size:12px; }
.evd-task-title--done{ text-decoration:line-through; color:var(--text-muted); }

.evd-pay-amt{ font-size:12px; font-weight:600; }
.evd-pay-meta,
.evd-pay-date{ font-size:10.5px; color:var(--text-muted); }

.evd-menu-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:8px;
}
.evd-menu-head .evd-section-label{ margin-bottom:0; }
.evd-menu-head i{ margin-right:4px; }

.evd-pdf-btn{ width:100%; justify-content:center; }
.evd-menu-count{ font-size:11px; color:var(--text-muted); }
.evd-services{ display:flex; flex-direction:column; gap:8px; }

.evd-svc{
  background:var(--white); border:1px solid rgba(0,0,0,0.07);
  border-radius:9px; overflow:hidden;
}
.evd-svc__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 13px; border-bottom:1px solid rgba(0,0,0,0.06);
}
.evd-svc__head-left{ display:flex; align-items:center; gap:9px; }
.evd-svc__icon{
  width:28px; height:28px; border-radius:7px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.evd-svc__icon i{ font-size:12px; }
.evd-svc__title{ font-size:13px; font-weight:700; color:var(--text-primary); }
.evd-svc__body{ padding:10px 12px 11px; }

.evd-cat{ margin-bottom:10px; }
.evd-cat:last-child{ margin-bottom:0; }
.evd-cat__label{
  font-size:10px; font-weight:700; color:var(--text-muted);
  letter-spacing:0.05em; text-transform:uppercase;
  margin-bottom:5px; padding-left:2px;
}
.evd-cat__items{
  display:flex; flex-direction:column; gap:1px;
  background:var(--border-light); border-radius:7px; overflow:hidden;
}
.evd-cat__item{
  display:flex; align-items:center; gap:10px;
  padding:8px 11px; background:var(--white);
}
.evd-cat__dot{
  width:4px; height:4px; border-radius:50%;
  flex-shrink:0; opacity:0.7;
}
.evd-cat__name{
  flex:1; min-width:0;
  font-size:12px; font-weight:500; color:var(--text-primary);
}

/* ════════════════════════════════════════════════════════════════
   §UI-FIXES — Targeted polish (bottom-sheet actions, confirm
   buttons, 3-card KPI grid balancing). Placed last so these win
   the cascade.
════════════════════════════════════════════════════════════════ */

/* ── 3-card KPI grid balancing ────────────────────────────────────
   When a .crm-kpi-grid contains exactly 3 cards, the 3rd card
   wraps onto its own row and looks unbalanced sitting half-width.
   Stretch it across both columns so the row reads as a "wide
   summary" card. Auto-applies whenever a page renders exactly 3
   cards (currently the Payments page); pages with 4+ cards keep
   the 2-column grid unchanged. */
@media (max-width:767px){
  .crm-kpi-grid > .stat-card:nth-child(3):last-child,
  .crm-kpi-grid > .layout-kpi-block:nth-child(3):last-child,
  .crm-kpi-grid > .quot-kpi-card:nth-child(3):last-child{
    grid-column:1 / -1;
  }
}

/* ── Bottom-sheet body — better breathing room ──────────────────── */
.bsheet-body{
  padding:16px 18px 18px !important;
  min-height:80px;
}

/* ── Bottom-sheet actions — taller, more readable, wrap on >2 ──── */
.bsheet-actions{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  padding:14px 16px !important;
  padding-bottom:max(14px, env(safe-area-inset-bottom,14px)) !important;
}
.bsheet-actions .bsheet-action{
  flex:1 1 calc(50% - 5px) !important;
  min-width:120px !important;
  height:46px !important;
  min-height:46px !important;
  padding:0 14px !important;
  font-size:14px !important;
  font-weight:600 !important;
  border-radius:12px !important;
  justify-content:center !important;
}
.bsheet-actions .bsheet-action i{ font-size:13px !important; }
/* Primary / danger get visual priority — span full width when present
   alongside other actions, so the main CTA always reads as the headline. */
.bsheet-actions .bsheet-action.btn-gold,
.bsheet-actions .bsheet-action.btn-primary,
.bsheet-actions .bsheet-action.btn-danger-filled{
  flex:1 1 100% !important;
  order:-1;
}
/* When there's only one action, span full width too. */
.bsheet-actions .bsheet-action:only-child{
  flex:1 1 100% !important;
}

@media (min-width:768px){
  /* Desktop / tablet sheet — keep all actions on one row, taller too. */
  .bsheet-actions{ flex-wrap:nowrap !important; }
  .bsheet-actions .bsheet-action{
    flex:1 1 0 !important;
    min-width:0 !important;
  }
  .bsheet-actions .bsheet-action.btn-gold,
  .bsheet-actions .bsheet-action.btn-primary,
  .bsheet-actions .bsheet-action.btn-danger-filled{
    flex:1.6 1 0 !important;
    order:0;
  }
}

/* ── Confirm modal (#modal-confirm) — bigger, more tappable ─────── */
#modal-confirm .modal-footer{
  padding:14px 18px !important;
  padding-bottom:max(16px, env(safe-area-inset-bottom,16px)) !important;
  gap:12px !important;
}
#modal-confirm .modal-footer .btn-secondary,
#modal-confirm .modal-footer .btn-danger,
#modal-confirm .modal-footer .btn-gold,
#modal-confirm .modal-footer #confirm-btn{
  height:48px !important;
  min-height:48px !important;
  padding:0 18px !important;
  font-size:15px !important;
  font-weight:600 !important;
  border-radius:14px !important;
  flex:1 !important;
  justify-content:center !important;
}
#modal-confirm .modal-footer #confirm-btn{ flex:1.4 !important; }
#modal-confirm .modal-footer .btn-secondary i,
#modal-confirm .modal-footer #confirm-btn i{ font-size:13px !important; }
#modal-confirm #confirm-title{
  font-size:18px !important; font-weight:700 !important;
  margin-bottom:6px !important;
}
#modal-confirm #confirm-message{
  font-size:14px !important; line-height:1.55 !important;
}
#modal-confirm #confirm-icon-wrap{
  width:56px !important; height:56px !important;
}
#modal-confirm #confirm-icon{ font-size:24px !important; }

/* ── Wizard z-index — sticky CTA bar must beat the cart-FAB ──────
   `#cart-fab` is z-index:1600 (`app/base.css`), `.wiz-cta-bar` was
   z-index:20 — so the floating cart button could overlap the
   sticky Back/Next buttons inside the wizard. Bump the CTA bar
   above the FAB, AND hide the FAB whenever the wizard page is
   active (the wizard already shows an inline "X items selected /
   View" strip in step 3, so the FAB is redundant and only adds
   visual noise). */
.wizard-page .wiz-cta-bar{ z-index:1700 !important; }
body:has(.wizard-page) #cart-fab,
.wizard-page #cart-fab{ display:none !important; }

/* ════════════════════════════════════════════════════════════════
   §UI-WIZARD — Visual polish for the 4-step quotation wizard.
   Pure CSS, no markup changes. Targets existing class names so
   the wizard's logic in `app/wizard.js` and renderers in
   `app/mvc/views/pages/wizard.js` are untouched.
════════════════════════════════════════════════════════════════ */

/* ── Header — larger title, tighter eyebrow, more prominent reset ─ */
.wizard-page .wiz-native-header{
  align-items:flex-end !important;
  margin-bottom:14px !important;
  padding-top:2px;
}
.wizard-page .wiz-native-header__step{
  font-size:10.5px !important;
  letter-spacing:0.12em !important;
  color:var(--primary) !important;
  margin-bottom:4px !important;
}
.wizard-page .wiz-native-header__title{
  font-size:24px !important;
  letter-spacing:-0.01em !important;
  line-height:1.1 !important;
}
.wizard-page .wiz-reset-btn{
  background:var(--white) !important;
  border:1.5px solid var(--border-light) !important;
  color:var(--text-muted) !important;
  padding:8px 12px !important;
  font-size:11.5px !important;
  border-radius:10px !important;
  transition:border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast) !important;
}
.wizard-page .wiz-reset-btn:active{
  border-color:var(--primary) !important;
  color:var(--primary) !important;
  transform:scale(0.96);
}

/* ── Progress bar — thicker, softer track ───────────────────────── */
.wizard-page .wiz-progress-bar{
  height:5px !important;
  background:var(--surface-2) !important;
  margin-bottom:12px !important;
}
.wizard-page .wiz-progress-bar__fill{
  background:linear-gradient(90deg, var(--primary) 0%, #8B7BFF 100%) !important;
  box-shadow:0 1px 3px rgba(26,86,219,0.3);
}

/* ── Step pills — bigger, clearer hierarchy ─────────────────────── */
.wizard-page .wiz-steps-row{
  gap:6px !important;
  margin-bottom:18px !important;
}
.wizard-page .wiz-step-pill{
  padding:7px 12px 7px 7px !important;
  font-size:12px !important;
  border:1.5px solid transparent;
  background:var(--surface) !important;
  transition:background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.wizard-page .wiz-step-pill__dot{
  width:22px !important; height:22px !important;
  font-size:10px !important;
}
.wizard-page .wiz-step-pill--active{
  background:var(--primary-light) !important;
  border-color:rgba(26,86,219,0.35) !important;
  color:var(--primary) !important;
  box-shadow:0 2px 6px rgba(26,86,219,0.18);
}
.wizard-page .wiz-step-pill--active .wiz-step-pill__dot{
  background:var(--primary) !important;
  color:#fff !important;
}
.wizard-page .wiz-step-pill--done{
  background:var(--success-light) !important;
  color:#047857 !important;
}
.wizard-page .wiz-step-pill--done .wiz-step-pill__dot{
  background:#10B981 !important;
  color:#fff !important;
}

/* ── Mode tabs (Step 1: Find Client / New Client) ───────────────── */
.wizard-page .wiz-mode-tabs{ gap:8px !important; margin-bottom:14px !important; }
.wizard-page .wiz-mode-tab{
  height:42px !important;
  font-size:13px !important;
  border-radius:10px !important;
  border-width:1.5px !important;
}
.wizard-page .wiz-mode-tab.active{
  border-color:var(--primary) !important;
  background:var(--primary-light) !important;
  color:var(--primary) !important;
  box-shadow:0 2px 8px rgba(26,86,219,0.15);
  font-weight:700 !important;
}

/* ── Recent clients chip row — tighter, friendlier ──────────────── */
.wizard-page .wiz-recent-row{
  padding:8px 12px 10px !important;
  background:linear-gradient(180deg, var(--surface) 0%, var(--white) 100%) !important;
}
.wizard-page .wiz-recent-chip{
  height:30px;
  padding:0 10px 0 4px !important;
  font-size:12px !important;
  border-width:1.5px !important;
}
.wizard-page .wiz-recent-chip__avatar{
  width:22px !important; height:22px !important; font-size:10.5px !important;
}

/* ── Form labels inside wizard — uniform, more prominent ────────── */
.wizard-page .form-label{
  font-size:12px !important;
  font-weight:700 !important;
  color:var(--text-primary) !important;
  margin-bottom:6px !important;
  text-transform:none !important;
  letter-spacing:0 !important;
}
.wizard-page .form-input{
  height:42px !important;
  font-size:14px !important;
  border-radius:10px !important;
  border-width:1.5px !important;
  transition:border-color var(--dur-fast), box-shadow var(--dur-fast) !important;
}
.wizard-page .form-input:focus{
  border-color:var(--primary) !important;
  box-shadow:0 0 0 3px rgba(26,86,219,0.12) !important;
  outline:none !important;
}
.wizard-page textarea.form-input{ height:auto !important; min-height:64px !important; padding:10px 12px !important; }

/* ── Step 2 event-type grid — bigger tap targets, smoother ─────── */
.wizard-page #ws-2 button[data-event-type]{
  padding:14px 6px 11px !important;
  font-size:11.5px !important;
  border-radius:13px !important;
  min-height:74px !important;
}
.wizard-page #ws-2 button[data-event-type] span:first-of-type{ font-size:24px !important; }

/* ── Step 3 — service tag chips ─────────────────────────────────── */
.wizard-page .service-tag{
  border-radius:10px !important;
  padding:8px 12px !important;
  font-size:12px !important;
  border-width:1.5px !important;
  transition:border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast) !important;
}
.wizard-page .service-tag.selected{
  border-color:var(--primary) !important;
  background:var(--primary-light) !important;
  color:var(--primary) !important;
  font-weight:700 !important;
}
.wizard-page .service-tag:active{ transform:scale(0.96); }
.wizard-page .service-tag-count{
  background:var(--primary) !important; color:#fff !important;
  border-radius:10px !important; padding:1px 7px !important;
  font-size:10px !important; font-weight:800 !important;
  margin-left:4px;
}

/* ── Step 3 — category tabs (sub-navigation inside service) ─────── */
.wizard-page .ws3-cat-tab{
  padding:9px 14px !important;
  font-size:12px !important;
  font-weight:600 !important;
  white-space:nowrap;
  border:none;
  background:transparent;
  color:var(--text-muted);
  border-bottom:2.5px solid transparent;
  margin-bottom:-1px;
  cursor:pointer;
  font-family:inherit;
  transition:color var(--dur-fast), border-color var(--dur-fast);
  -webkit-tap-highlight-color:transparent;
}
.wizard-page .ws3-cat-tab.active{
  color:var(--primary) !important;
  border-bottom-color:var(--primary) !important;
  font-weight:700 !important;
}

/* ── Step 3 — slot tabs for multi-event quotations ──────────────── */
.wizard-page .wiz-slot-tabs{
  display:flex;
  gap:6px;
  overflow-x:auto;
  scrollbar-width:none;
  margin-bottom:10px;
  padding-bottom:2px;
}
.wizard-page .wiz-slot-tabs::-webkit-scrollbar{ display:none; }
.wizard-page .wiz-slot-tab{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px;
  border:1.5px solid var(--border-light);
  background:var(--white);
  border-radius:999px;
  font-size:12px; font-weight:600; color:var(--text-muted);
  white-space:nowrap; cursor:pointer;
  font-family:inherit;
  -webkit-tap-highlight-color:transparent;
  transition:border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
  flex-shrink:0;
}
.wizard-page .wiz-slot-tab.active{
  border-color:var(--primary);
  background:var(--primary-light);
  color:var(--primary);
  font-weight:700;
  box-shadow:0 2px 6px rgba(26,86,219,0.15);
}
.wizard-page .wiz-slot-tab:active{ transform:scale(0.97); transition-duration:var(--dur-instant); }
.wizard-page .wiz-slot-badge{
  background:var(--primary); color:#fff;
  font-size:10px; font-weight:800;
  padding:1px 6px; border-radius:10px;
  min-width:18px; text-align:center;
}
.wizard-page .wiz-slot-tab.active .wiz-slot-badge{
  background:#fff; color:var(--primary);
}

/* ── Step 3 — Browse services button → larger, primary-tinted ──── */
.wizard-page .wiz-browse-services-btn{
  height:46px !important;
  font-size:13px !important;
  font-weight:700 !important;
  border-radius:11px !important;
  border:1.5px dashed rgba(26,86,219,0.4) !important;
  background:var(--primary-light) !important;
  color:var(--primary) !important;
}

/* ── Step 4 — pricing mode segmented control (Per Head / Overall) ─ */
.wizard-page #ws-4 [id^="pm-ph-"],
.wizard-page #ws-4 [id^="pm-ov-"]{
  height:38px !important;
  font-size:12px !important;
  border-radius:10px !important;
  letter-spacing:0.01em;
}

/* ── Bottom CTA bar — match the app's standard 40px button height ── */
.wizard-page .wiz-cta-bar{
  margin:14px -12px 0 !important;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  gap:8px !important;
  background:linear-gradient(to top, var(--bg-card) 60%, rgba(255,255,255,0.92) 100%) !important;
  border-top:1px solid var(--border-light) !important;
}
.wizard-page .wiz-cta-bar > .btn-gold,
.wizard-page .wiz-cta-bar > .btn-secondary,
.wizard-page .wiz-cta-bar > button{
  min-height:40px !important;
  height:40px;
  font-size:13px !important;
  font-weight:700 !important;
  border-radius:10px !important;
  padding:0 14px !important;
}
.wizard-page .wiz-cta-bar > .btn-secondary[style*="flex:1"]{ flex:1 !important; }
.wizard-page .wiz-cta-bar > .btn-gold[style*="flex:2"]{ flex:1.6 !important; }

/* ── Search box unification (Wizard Step 1 + Step 3) ─────────────
   Pages already use `.page-search-bar` correctly; the wizard's
   two custom search inputs are visually disconnected. Force them
   to look the same as the rest of the app via descendant selectors,
   without rewriting the wizard markup.                            */
.wizard-page .wiz-step3-search-wrap > div[style*="position:relative"]{
  display:flex !important;
  align-items:center !important;
  background:var(--bg-card) !important;
  border:1.5px solid var(--border-light) !important;
  border-radius:var(--r-sm) !important;
  overflow:hidden !important;
  transition:border-color 0.15s !important;
  position:relative !important;
}
.wizard-page .wiz-step3-search-wrap > div[style*="position:relative"]:focus-within{
  border-color:var(--primary) !important;
}
.wizard-page #wiz-step3-search{
  border:none !important; background:transparent !important; outline:none !important;
  height:42px !important; padding-left:38px !important; padding-right:38px !important;
}
/* Step 1 client search lives in a flex wrapper with inline border;
   normalize to the canonical look. */
.wizard-page input[placeholder^="Search by name"]{
  height:42px !important;
}
.wizard-page input[placeholder^="Search by name"]:focus{ outline:none !important; }
.wizard-page div:has(> span > i.fa-magnifying-glass) > span{
  padding:0 8px 0 12px !important;
  color:var(--text-muted) !important;
}


/* Bell icon strictly dashboard-only — CSS belt-and-suspenders so the bell
   never leaks onto secondary pages even if a navigation path skips
   _sahaSetNavTitle. Body class is set in _sahaSetNavTitle (app/app.js). */
body:not(.page-dashboard) #nav-notif-btn,
body:not(.page-dashboard) #nav-notif-badge { display: none !important; }

/* Back arrow strictly hidden on every primary tab and shown on every
   secondary page. Driven by `body.is-primary-tab` set in _updateBackButton,
   which uses the dynamic _primaryTabPages set built from the role's actual
   bottom-nav. This avoids hardcoding slugs (admin's primary tabs are
   dashboard/events/quotations/leads, vendor's are different, etc.) and
   survives any race condition where the per-page renderer toggles the back
   button before navigation finishes. */
body.is-primary-tab #nav-back-btn { display: none !important; }
body:not(.is-primary-tab) #nav-back-btn { display: flex !important; }
/* Dedupe: when the page renders its own inline `.page-back-btn` (e.g.
   pageHeader({back:true}) sub-pages), suppress the top-bar chevron so we
   don't show two back buttons. Class is toggled by
   `_syncTopBackButtonWithScreen` in app/app.js. */
body.has-inline-back #nav-back-btn { display: none !important; }

/* ──────────────────────────────────────────────────────────────────────
   Unified search bar — single rounded box, icon and input share one
   container. Wins over legacy `.search-bar`, `.search-bar-wrap`,
   `.exp-search-box`, `.pay-search-box`, `[class*="-search-box"]`,
   `.search-input-wrap` rules in app/theme.css that previously gave the
   icon its own border / background / radius and made it look like a
   separate box.
   ──────────────────────────────────────────────────────────────────── */
.page-search-bar,
.exp-search-box.page-search-bar,
.pay-search-box.page-search-bar,
.search-input-wrap.page-search-bar,
.search-bar.page-search-bar {
  display: flex !important; align-items: center !important;
  gap: 0 !important;
  height: 42px !important;
  padding: 0 !important;
  background: var(--bg-card) !important;
  border: 1.5px solid var(--border-light) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transition: border-color 120ms ease, box-shadow 120ms ease !important;
}
.page-search-bar:focus-within {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(26,86,219,0.10) !important;
}
.page-search-bar > .page-search-bar__icon,
.page-search-bar > i.page-search-bar__icon {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 38px !important; height: 100% !important;
  padding: 0 !important; margin: 0 !important;
  background: transparent !important; border: none !important; box-shadow: none !important;
  color: var(--text-muted) !important; font-size: 14px !important;
  flex-shrink: 0 !important;
}
.page-search-bar > .page-search-bar__input {
  flex: 1 1 auto !important; min-width: 0 !important;
  height: 100% !important;
  padding: 0 12px 0 0 !important; margin: 0 !important;
  background: transparent !important; border: none !important; outline: none !important; box-shadow: none !important;
  font-size: 13.5px !important; font-family: inherit !important;
  color: var(--text-primary) !important;
}
.page-search-bar > .page-search-bar__clear {
  flex-shrink: 0 !important;
  width: 36px !important; height: 36px !important;
  margin-right: 4px !important;
  background: transparent !important; border: none !important;
  color: var(--text-muted) !important; cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  border-radius: 8px !important;
  -webkit-tap-highlight-color: transparent !important;
}
.page-search-bar > .page-search-bar__clear:active { background: var(--surface) !important; }

/* When the back arrow is visible (every secondary page), the small mobile
   logo next to it is redundant — hide it so the title sits flush with the
   chevron. On primary tabs the logo is also hidden because the page title
   already identifies the screen, giving a clean single-element look. */
.nav-mobile-logo { display: none !important; }

/* Title-col left edge: when a back button is visible, drop the extra
   padding-left so title sits right next to the chevron. */
body:not(.is-primary-tab) .nav-title-col { padding-left: 4px !important; }
.nav-page-title, .nav-page-sub { padding-left: 0 !important; text-align: left !important; }