/* ═══════════════════════════════════════════════════════════════
   POLISH.CSS — visual refinements only, loaded LAST.
   Adds depth, motion, and breathing room without touching layout
   or existing class behavior. Safe to remove — purely cosmetic.
   ═══════════════════════════════════════════════════════════════ */

/* (overflow-x lock removed — body already has overflow:hidden in app.css. The !important rule
   was conflicting with iOS Safari scroll-momentum and locking pages on scroll-up.) */
.view, .view-body { overflow-x: hidden; }
/* Ensure scrollable views always release momentum cleanly */
.view { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* (Removed header z-index override — was breaking tap targets) */

/* ── Select tap area enlarged so dropdown is unmissable ── */
.balance-select, select.field-input {
  min-height: 44px;
  padding: 10px 14px !important;
  font-size: 14px !important;
}
.rd-source-filter select { padding: 10px 14px !important; min-height: 44px; }
.rd-source-filter { padding: 14px !important; }

/* ── Smoother global transitions ── */
.btn, .chip, .nav-item, .job-card, .balance-card, .pay-btn,
.detail-action-btn, .ttc-btn, .rd-pipeline-cell, .rd-tile {
  transition: transform 160ms cubic-bezier(.16,1,.3,1),
              box-shadow 220ms cubic-bezier(.16,1,.3,1),
              background 180ms ease,
              border-color 180ms ease,
              opacity 180ms ease;
}

/* ── Job card depth + lift on hover ── */
.job-card {
  position: relative;
  isolation: isolate;
  box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 4px 14px rgba(0,0,0,.12);
}
.job-card::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, transparent 30%);
  pointer-events: none;
  z-index: 0;
}
.job-card-inner { position: relative; z-index: 1; }
@media (hover: hover) {
  .job-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,.25), 0 16px 36px rgba(0,0,0,.22);
  }
}
.job-card:active { transform: translateY(0) scale(.995); }

/* ── Status badge — refined colors (no backdrop-filter; heavy on iOS) ── */
.status-badge {
  border: 1px solid rgba(255,255,255,.05);
  font-weight: 800 !important;
  letter-spacing: .3px;
}
.sb-new        { background: rgba(96,165,250,.16) !important; color: #93C5FD !important; }
.sb-scheduled  { background: rgba(167,139,250,.16) !important; color: #C4B5FD !important; }
.sb-inprogress { background: rgba(251,191,36,.18) !important;  color: #FCD34D !important; }
.sb-closed     { background: rgba(52,211,153,.16) !important;  color: #6EE7B7 !important; }
.sb-paid       { background: rgba(74,222,128,.18) !important;  color: #86EFAC !important; }
.sb-follow_up  { background: rgba(251,146,60,.18) !important;  color: #FDBA74 !important; }
.sb-lost       { background: rgba(239,68,68,.18) !important;   color: #FCA5A5 !important; }

/* ── Filter chips — refined active state, smooth scale ── */
.filter-chips { padding: 4px 12px 8px; gap: 6px; }
.chip {
  border: 1px solid var(--color-border-2);
  background: var(--color-surface);
  font-weight: 700 !important;
  letter-spacing: .2px;
}
.chip:active { transform: scale(.96); }
.chip.active {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px rgba(59,130,246,.32), inset 0 1px 0 rgba(255,255,255,.18);
}

/* ── Reports tiles — bolder typography, gradient sheen ── */
.rd-tile {
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-2) 100%);
  border: 1px solid var(--color-border-2);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 6px 18px rgba(0,0,0,.15);
}
.rd-tile-value { font-size: 28px; letter-spacing: -.5px; }
.rd-tile-label { font-size: 10px; }
@media (max-width: 480px) {
  .rd-tiles { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .rd-tile { padding: 12px 12px 10px; }
  .rd-tile-value { font-size: 22px; }
}

/* ── Pipeline cells — hover lift, better hierarchy ── */
.rd-pipeline-cell {
  border: 1px solid transparent;
}
@media (hover: hover) {
  .rd-pipeline-cell:hover {
    border-color: var(--color-border-2);
    transform: translateY(-1px);
  }
}
.rd-pipeline-cell b { letter-spacing: -.3px; }

/* ── Buttons — subtle gradient + spring press ── */
.btn { letter-spacing: .2px; }
.btn-primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important;
  box-shadow: 0 4px 14px rgba(59,130,246,.25), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-success {
  background: linear-gradient(135deg, var(--color-success), var(--color-success-dark)) !important;
  box-shadow: 0 4px 14px rgba(34,197,94,.25), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn:active { transform: scale(.97); }

/* ── Detail action bar buttons (Call/Text/Dispatch/Edit) ── */
.detail-action-btn {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border-2) !important;
  transition: transform 140ms, background 180ms;
}
.detail-action-btn:active { transform: scale(.94); }
.detail-action-btn.dab-green {
  background: linear-gradient(135deg, rgba(34,197,94,.16), rgba(22,163,74,.10)) !important;
  border-color: rgba(34,197,94,.30) !important;
  color: #86EFAC !important;
}
.detail-action-btn.dab-warn {
  background: linear-gradient(135deg, rgba(245,158,11,.16), rgba(217,119,6,.10)) !important;
  border-color: rgba(245,158,11,.30) !important;
  color: #FCD34D !important;
}

/* ── Modal entrance — silkier ── */
.modal {
  box-shadow: 0 -10px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04);
  /* Trap scroll so dragging up at the top doesn't chain to body and cause iOS lock */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.modal-overlay {
  /* No backdrop-filter — was contributing to iOS compositing stalls / scroll freeze */
}
.modal-handle {
  background: var(--color-text-faint) !important;
  opacity: .7;
}

/* ── Field inputs — soft focus glow ── */
.field-input:focus, .balance-select:focus {
  outline: none !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.18) !important;
}

/* ── Job card summary preview — tighter, premium ── */
.job-card-summary {
  background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(139,92,246,.04)) !important;
  border-left-color: rgba(139,92,246,.5) !important;
  font-weight: 500;
}

/* ── Dispatcher source banner — premium ── */
.dispatcher-banner {
  background: linear-gradient(135deg, rgba(99,102,241,.10), rgba(99,102,241,.04)) !important;
  border-left-width: 4px !important;
  border-radius: 10px !important;
}
.dispatcher-banner .db-chip {
  border: 1px solid rgba(99,102,241,.25);
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}

/* ── Stale-lead badges — subtle pulse on red ── */
@keyframes stalePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.4); }
  50%      { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}
.job-card-stale.jc-stale-red {
  animation: stalePulse 2s ease-in-out infinite;
}

/* ── Returning customer banner — premium gradient ── */
.returning-banner {
  background: linear-gradient(135deg, rgba(99,102,241,.16), rgba(139,92,246,.10)) !important;
  border: 1px solid rgba(139,92,246,.28) !important;
  font-weight: 700;
}

/* ── Bottom nav — slight elevation ── */
.bottom-nav {
  box-shadow: 0 -4px 24px rgba(0,0,0,.32), 0 -1px 0 var(--color-border-2);
}
.nav-item.active { color: var(--color-primary) !important; }
/* Labels must always render — guard against any future hide rules */
.nav-label { display: block !important; opacity: 1 !important; visibility: visible !important; }

/* (Header backdrop-filter removed — caused iOS Safari rendering hangs that froze taps) */

/* ── Empty state — softer ── */
.empty-state {
  padding: 48px 20px;
}
.empty-icon {
  opacity: .5;
  font-size: 56px !important;
  margin-bottom: 12px;
}

/* (Job card stagger animation removed — could offset tap targets during animation) */

/* ── Reports list rows — better visual rhythm ── */
.rd-list-row { padding: 8px 0; }
.rd-list-row-bar {
  height: 6px !important;
  background: rgba(255,255,255,.05) !important;
}
.rd-list-row-bar > div {
  background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899) !important;
  box-shadow: 0 0 12px rgba(139,92,246,.4);
}

/* ── Phone iPhone-friendly: prevent filter chips wrap ugly ── */
@media (max-width: 480px) {
  .filter-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .filter-chips::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; white-space: nowrap; }
}

/* ── Calendar conflict warning — sharper ── */
.cal-conflict-warn {
  background: linear-gradient(135deg, rgba(239,68,68,.14), rgba(220,38,38,.06)) !important;
  border-left: 3px solid #ef4444 !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
}

/* ── Tech today card — premium ── */
.tech-today-card {
  background: linear-gradient(135deg, var(--color-surface), var(--color-surface-2)) !important;
  border: 1px solid var(--color-border-2);
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

/* ── Light-mode overrides — make sure premium stays premium ── */
[data-theme="light"] .rd-tile {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-color: rgba(0,0,0,.06);
}
[data-theme="light"] .chip.active {
  box-shadow: 0 4px 12px rgba(59,130,246,.28);
}
[data-theme="light"] .job-card-summary {
  background: linear-gradient(135deg, rgba(99,102,241,.06), rgba(139,92,246,.03)) !important;
}
[data-theme="light"] .dispatcher-banner {
  background: linear-gradient(135deg, rgba(99,102,241,.07), rgba(99,102,241,.02)) !important;
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM TYPOGRAPHY — Inter, fallback to system
   ═══════════════════════════════════════════════════════════════ */
:root {
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Segoe UI', Roboto, sans-serif !important;
}
body, button, input, select, textarea {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
  -webkit-font-feature-settings: 'cv11', 'ss01';
  font-feature-settings: 'cv11', 'ss01';
  letter-spacing: -.01em;
}
h1, h2, h3, .step-title, .modal-title, .settings-section-title {
  letter-spacing: -.02em;
  font-weight: 800;
}

/* ═══════════════════════════════════════════════════════════════
   SPLASH SCREEN — refined, fades on init
   ═══════════════════════════════════════════════════════════════ */
#app-shell {
  background: radial-gradient(ellipse at top, #1e293b 0%, #0f172a 60%) !important;
}
#app-shell img {
  box-shadow: 0 12px 40px rgba(59,130,246,.35), 0 0 0 1px rgba(255,255,255,.06);
  animation: splashLogo 1.4s ease-in-out infinite;
}
@keyframes splashLogo {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
[data-theme="light"] #app-shell {
  background: radial-gradient(ellipse at top, #f1f5f9 0%, #e2e8f0 60%) !important;
}

/* ═══════════════════════════════════════════════════════════════
   TOAST — premium top banner
   ═══════════════════════════════════════════════════════════════ */
.toast {
  border-radius: 14px !important;
  padding: 14px 18px !important;
  font-weight: 600 !important;
  letter-spacing: -.01em;
  box-shadow: 0 12px 36px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.08) !important;
}
.toast-success { background: linear-gradient(135deg, rgba(34,197,94,.92), rgba(22,163,74,.95)) !important; color: #fff !important; }
.toast-error   { background: linear-gradient(135deg, rgba(239,68,68,.92), rgba(220,38,38,.95)) !important; color: #fff !important; }
.toast-warning { background: linear-gradient(135deg, rgba(245,158,11,.92), rgba(217,119,6,.95)) !important; color: #fff !important; }
.toast-info    { background: linear-gradient(135deg, rgba(59,130,246,.92), rgba(37,99,235,.95)) !important; color: #fff !important; }

/* (View transitions removed — caused tap-target offset during animation) */

/* (Dashboard radial glow removed — it caused horizontal scroll & clipped bottom content) */

/* ═══════════════════════════════════════════════════════════════
   SKELETON LOADERS — usable as <div class="sk sk-line"></div>
   ═══════════════════════════════════════════════════════════════ */
.sk {
  background: linear-gradient(90deg, var(--color-surface) 0%, var(--color-surface-2) 50%, var(--color-surface) 100%);
  background-size: 200% 100%;
  animation: skShimmer 1.4s linear infinite;
  border-radius: 8px;
}
@keyframes skShimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
.sk-line { height: 14px; margin-bottom: 8px; }
.sk-line.short { width: 40%; }
.sk-line.medium { width: 70%; }
.sk-card {
  height: 120px;
  border-radius: 16px;
  margin-bottom: 12px;
}

/* ═══════════════════════════════════════════════════════════════
   THEME TOGGLE PILL (Settings)
   ═══════════════════════════════════════════════════════════════ */
.theme-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 2px;
  margin-top: 6px;
}
.theme-toggle-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
}
.theme-toggle-pill {
  position: relative;
  display: inline-flex;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-2);
  border-radius: 999px;
  padding: 4px;
  cursor: pointer;
  user-select: none;
}
.theme-toggle-opt {
  position: relative;
  z-index: 2;
  background: transparent;
  border: 0;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 220ms;
}
.theme-toggle-opt.active { color: #fff; }
[data-theme="light"] .theme-toggle-opt.active { color: var(--color-text); }
.theme-toggle-slider {
  position: absolute;
  top: 4px; bottom: 4px;
  width: calc(50% - 4px);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border-radius: 999px;
  transition: transform 280ms cubic-bezier(.16,1,.3,1);
  z-index: 1;
  box-shadow: 0 2px 8px rgba(59,130,246,.32);
  left: 4px;
}
[data-theme="light"] .theme-toggle-pill .theme-toggle-slider {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.theme-toggle-pill .theme-toggle-opt[data-theme="light"].active ~ .theme-toggle-slider,
[data-theme="light"] .theme-toggle-slider {
  transform: translateX(100%);
}
[data-theme="dark"] .theme-toggle-slider {
  transform: translateX(0);
}

/* ═══════════════════════════════════════════════════════════════
   ICON SIZE NORMALIZATION (emoji rendering polish)
   ═══════════════════════════════════════════════════════════════ */
.dab-icon {
  font-size: 19px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.call-btn, .wa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-2);
  text-decoration: none;
  color: var(--color-text);
}
.call-btn:active, .wa-btn:active { transform: scale(.92); }
.call-btn { background: linear-gradient(135deg, rgba(34,197,94,.18), rgba(22,163,74,.10)); border-color: rgba(34,197,94,.30); color: #86EFAC; }
.wa-btn { background: linear-gradient(135deg, rgba(37,211,102,.18), rgba(18,140,126,.10)); border-color: rgba(37,211,102,.30); color: #34D399; }

/* ═══════════════════════════════════════════════════════════════
   REPORTS DASHBOARD — extra polish
   ═══════════════════════════════════════════════════════════════ */
.rd-source-filter {
  background: linear-gradient(135deg, var(--color-surface), var(--color-surface-2)) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SETTINGS CARD — premium
   ═══════════════════════════════════════════════════════════════ */
.settings-card {
  background: linear-gradient(135deg, var(--color-surface), var(--color-surface-2));
  border: 1px solid var(--color-border-2);
  box-shadow: 0 1px 3px rgba(0,0,0,.18), 0 8px 24px rgba(0,0,0,.10);
}
[data-theme="light"] .settings-card {
  background: #ffffff;
  border-color: rgba(0,0,0,.06);
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 14px rgba(0,0,0,.04);
}
.settings-section-title {
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: .08em !important;
  color: var(--color-text-muted) !important;
  font-weight: 800 !important;
  margin-bottom: 12px !important;
}

/* ═══════════════════════════════════════════════════════════════
   DETAIL HERO — gradient depth
   ═══════════════════════════════════════════════════════════════ */
.detail-hero {
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-2) 100%);
  position: relative;
  overflow: hidden;
}
.detail-hero::after {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(59,130,246,.10), transparent 70%);
  pointer-events: none;
}
.detail-name {
  letter-spacing: -.03em !important;
  font-weight: 800 !important;
}

/* ═══════════════════════════════════════════════════════════════
   HEADER DATE PILL
   ═══════════════════════════════════════════════════════════════ */
.header-date {
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-top: 1px;
  opacity: .82;
}
@media (max-width: 380px) { .header-date { display: none; } }

/* ═══════════════════════════════════════════════════════════════
   FILTER CHIP COUNTS
   ═══════════════════════════════════════════════════════════════ */
.chip-count {
  font-size: 11px;
  font-weight: 700;
  margin-left: 4px;
  opacity: .7;
}
.chip.active .chip-count { opacity: 1; color: rgba(255,255,255,.8); }

/* ═══════════════════════════════════════════════════════════════
   CUSTOMER AVATAR CIRCLES
   ═══════════════════════════════════════════════════════════════ */
.customer-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  margin-right: 8px;
  text-transform: uppercase;
  letter-spacing: 0;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.18);
  vertical-align: middle;
}
.job-card-name {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.job-card-name > span:not(.customer-avatar) { /* customer name text falls here? */ }

/* ═══════════════════════════════════════════════════════════════
   TOAST MOVED TO TOP
   ═══════════════════════════════════════════════════════════════ */
.toast {
  position: fixed !important;
  top: calc(var(--header-h) + var(--safe-top) + 12px) !important;
  bottom: auto !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(-150%);
  max-width: calc(100vw - 32px);
  z-index: 9000 !important;
  transition: transform 320ms cubic-bezier(.16,1,.3,1) !important;
  pointer-events: none !important;
  /* No backdrop-filter — heavy on iOS, can stall compositing */
}
.toast.show { transform: translateX(-50%) translateY(0) !important; }

/* ═══════════════════════════════════════════════════════════════
   REPORTS TILES — phone 2x2 grid (was 4 cols)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .rd-tiles {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .rd-tile { padding: 14px !important; min-height: 90px; }
  .rd-tile-value { font-size: 26px !important; }
}

/* (Bottom nav glow + pointer-events overrides removed — were breaking taps) */

/* ═══════════════════════════════════════════════════════════════
   MODAL DRAG HANDLE — clearer
   ═══════════════════════════════════════════════════════════════ */
.modal-handle {
  width: 44px !important;
  height: 5px !important;
  background: var(--color-text-faint) !important;
  border-radius: 3px !important;
  margin: 8px auto 12px !important;
  opacity: .6;
}

/* ═══════════════════════════════════════════════════════════════
   EMPTY STATES — richer
   ═══════════════════════════════════════════════════════════════ */
.empty-state {
  padding: 56px 24px;
  text-align: center;
}
.empty-icon {
  font-size: 64px !important;
  opacity: .35;
  margin-bottom: 14px;
  filter: grayscale(.3);
}
.empty-title {
  font-size: 17px !important;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: 4px;
  color: var(--color-text);
}
.empty-sub {
  font-size: 13px !important;
  color: var(--color-text-muted);
  max-width: 280px;
  margin: 0 auto;
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════
   ADD JOB STEP INDICATOR
   ═══════════════════════════════════════════════════════════════ */
.step-content::before {
  content: attr(data-step-label);
  display: inline-block;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
  box-shadow: 0 2px 6px rgba(59,130,246,.32);
}

/* ═══════════════════════════════════════════════════════════════
   PULL-TO-REFRESH — bigger banner
   ═══════════════════════════════════════════════════════════════ */
.ptr-indicator {
  width: 48px !important;
  height: 48px !important;
}
.ptr-spinner {
  width: 28px !important;
  height: 28px !important;
  border-width: 3px !important;
}

/* ═══════════════════════════════════════════════════════════════
   SKELETON LOADERS — premium shimmer (used on initial load)
   ═══════════════════════════════════════════════════════════════ */
.sk-card {
  background: linear-gradient(90deg,
    var(--color-surface) 0%,
    var(--color-surface-2) 40%,
    var(--color-surface-3) 50%,
    var(--color-surface-2) 60%,
    var(--color-surface) 100%) !important;
  background-size: 200% 100% !important;
  border: 1px solid var(--color-border-2);
  border-radius: 16px !important;
  margin: 0 12px 12px;
}