/* ============================================================================
   elite-polish.css — additive, reversible "elite graphics" layer.
   Lifts every surface a notch: crisper type, layered depth, smooth motion,
   premium focus/selection/scrollbars. Loaded LAST. Touches only safe visual
   properties (shadow/transition/radius/color) — no layout/position/width — so
   it can't break the SPA. Remove this one <link> to revert.
   ============================================================================ */

/* — crisper type everywhere — */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body { letter-spacing: -0.006em; }

/* — figures line up: tabular numerals on money/metrics — */
[class*="kpi"], [class*="stat"], [class*="metric"], [class*="num"], [class*="-val"],
table td, .money, [id*="payment"], [id*="gross"] { font-variant-numeric: tabular-nums; }

/* — premium selection + focus — */
::selection { background: rgba(201,168,76,.28); }
:focus-visible { outline: 2px solid #c9a84c; outline-offset: 2px; border-radius: 6px; }

/* — refined scrollbars (premium, unobtrusive) — */
* { scrollbar-width: thin; scrollbar-color: #c9b88a transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(13,27,42,.22); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(13,27,42,.38); background-clip: content-box; }

/* — smooth, consistent motion on interactive elements — */
button, a, .zone-trigger, .nav-item, .inv-trigger, .wp-stat, [role="button"] {
  transition: transform .12s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .15s ease;
}

/* — buttons feel tactile: subtle lift on hover, press on click — */
button:not(:disabled):hover, .zone-trigger:hover, .inv-trigger:hover { transform: translateY(-1px); }
button:not(:disabled):active, .zone-trigger:active, .inv-trigger:active { transform: translateY(0) scale(.985); }

/* — inputs: calm, premium focus ring — */
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: #c9a84c !important;
  box-shadow: 0 0 0 3px rgba(201,168,76,.16);
}

/* — layered, refined depth for the new car-guy surfaces (by id) — */
#cust-overlay, #cg-overlay, #up-overlay, #fimenu-overlay, #esign-overlay,
#autostruct-overlay, #recon-overlay, #mktg-overlay {
  backdrop-filter: saturate(1.05);
}
#cust-results > div, #mktg-assets, #as-out > div {
  box-shadow: 0 1px 2px rgba(13,27,42,.04), 0 6px 18px rgba(13,27,42,.06);
}

/* — cards & panels get one cohesive, soft elevation (additive; only adds shadow) — */
.war-card, .wc-body, .card, .panel, .ll-card, .modal, [class*="-card"] {
  box-shadow: 0 1px 2px rgba(13,27,42,.05), 0 8px 24px rgba(13,27,42,.07);
}

/* — the red UP! + gold action buttons get a confident glow on hover — */
button[onclick*="openUpAlert"]:hover { box-shadow: 0 8px 22px rgba(220,38,38,.45) !important; }
button[onclick*="openCarGuyHome"]:hover { box-shadow: 0 8px 22px rgba(201,168,76,.45) !important; }

/* — display headings: tighten the premium serif/grotesk where present — */
h1, h2, .wordmark, [class*="title"] { letter-spacing: -0.01em; }

/* — images/avatars never look broken — */
img { image-rendering: auto; }

/* — gentle entrance for overlays so nothing pops harshly — */
@keyframes eliteFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
#cust-overlay[style*="block"], #cg-overlay[style*="block"], #up-overlay[style*="flex"],
#fimenu-overlay[style*="block"], #autostruct-overlay[style*="block"], #recon-overlay[style*="block"],
#mktg-overlay[style*="block"] { animation: eliteFade .18s ease both; }

/* — live pulsing dot (for "Voice live" / active-system badges) — */
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; display: inline-block; position: relative; box-shadow: 0 0 0 0 rgba(34,197,94,.7); animation: livePulse 1.8s infinite; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.7); } 70% { box-shadow: 0 0 0 7px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }

/* — stat tiles respond on hover (the 5-round holdover) — */
.wp-stat { transition: transform .15s ease, box-shadow .18s ease; }
.wp-stat:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(13,27,42,.14); }

/* ── Unify the feel of the new module overlays (Customers, Car-Guy, UP!, Follow-ups,
   Pipeline, Conversation Intel, Team, F&I menu, e-sign, etc.). Scoped to [id$="-overlay"];
   only adds feel (hover/press/focus/depth) — never overrides inline colors or layout. ── */
[id$="-overlay"] button:not(:disabled) { transition: transform .12s cubic-bezier(.2,.8,.2,1), filter .15s ease, box-shadow .18s ease; }
[id$="-overlay"] button:not(:disabled):hover { filter: brightness(1.05); transform: translateY(-1px); }
[id$="-overlay"] button:not(:disabled):active { transform: translateY(0) scale(.985); filter: brightness(.98); }
[id$="-overlay"] a[href^="tel:"]:hover { filter: brightness(1.05); }
[id$="-overlay"] input:focus, [id$="-overlay"] select:focus, [id$="-overlay"] textarea:focus {
  outline: none; border-color: #c9a84c !important; box-shadow: 0 0 0 3px rgba(201,168,76,.16);
}
/* consistent sticky header weight across every overlay's first child header bar */
[id$="-overlay"] > div:first-child { box-shadow: 0 2px 12px rgba(13,27,42,.12); }

/* — reduce motion if the user prefers it — */
@media (prefers-reduced-motion: reduce) {
  *, button, a { transition: none !important; animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ELITE GRAPHICS V2 — glass, glow, depth, motion. All additive.
   ══════════════════════════════════════════════════════════════════════════ */

/* Glass morphism overlay headers — frosted depth */
[id$="-overlay"] > div > div:first-child,
.briefing-full-overlay > div:first-child,
#role-brief-overlay > div:first-child {
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  background: rgba(10,22,40,.85) !important;
}

/* Money numbers get a subtle positive/negative glow */
[style*="color:#22c55e"], [style*="color:#4ade80"], [style*="color:rgb(34,197,94)"] {
  text-shadow: 0 0 14px rgba(34,197,94,.22);
}
[style*="color:#ef4444"], [style*="color:#f87171"], [style*="color:rgb(239,68,68)"] {
  text-shadow: 0 0 14px rgba(239,68,68,.22);
}
[style*="color:#f59e0b"], [style*="color:#fbbf24"] {
  text-shadow: 0 0 14px rgba(245,158,11,.18);
}

/* Gradient progress bars — scoped to actual progress-fill elements only.
   [id$="-bar"] used to match ANY element whose id ends in "-bar", including
   #ll-role-bar (the persistent top role/logout bar, mounted by JS in
   public/index.html), painting it blue-to-purple instead of brand navy/gold.
   Excluded here 2026-08-03; other "-bar" ids (kpi/status/summary bars) are
   left alone since none of them set an explicit background of their own.
   That claim was wrong for #ap-summary-bar (accounts_payable's AP Invoice
   Inbox summary strip, public/index.html ~L93953) -- confirmed live via
   Playwright (AP's 2026-08-03 sequential-workday walk): it sets its own
   inline background:#1a2535 (brand-navy card tone, matching every other
   summary strip in this overlay family) but this !important rule painted it
   blue-to-purple anyway since its id also ends in "-bar". At least 14 more
   "-bar"-suffixed ids elsewhere in this app (academy-rank-bar, bdc-cadence-bar,
   bdc-reply-bar, ch-email-reply-bar, ch-sms-reply-bar, floorplan-ticker-bar,
   lcrm-alert-bar, mc-progress-bar, md-auto-bar, mkt-dealer-login-bar,
   ri-compare-bar, ts-era-status-bar, wf-status-bar, acb-bar) also set an
   explicit inline background and are likely mispainted the same way --
   flagged for the next platform-wide visual pass rather than fixed here
   (out of scope for an AP-focused audit; each needs its own live-render
   check before excluding, same as this one). */
[id$="-bar"]:not(#ll-role-bar):not(#ap-summary-bar), .progress-bar, .score-bar > div {
  background: linear-gradient(90deg, #2B7FE0 0%, #7C3AED 100%) !important;
}

/* Premium KPI / stat tiles — layered depth + glow on hover */
.home-kpi, .war-kpi, .mt-kpi, .kpi-tile, [class*="-kpi"] {
  transition: transform .15s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease !important;
  position: relative;
}
.home-kpi:hover, .war-kpi:hover, .mt-kpi:hover, .kpi-tile:hover, [class*="-kpi"]:hover {
  transform: translateY(-3px) scale(1.01) !important;
  box-shadow: 0 12px 32px rgba(43,127,224,.18), 0 2px 8px rgba(0,0,0,.3) !important;
  z-index: 2;
}

/* Gold accent glow on primary CTA buttons */
button[style*="background:linear-gradient"][style*="d4af37"],
button[style*="background:#D4AF37"],
button[style*="background:#d4af37"] {
  box-shadow: 0 4px 18px rgba(212,175,55,.35) !important;
}
button[style*="background:linear-gradient"][style*="d4af37"]:hover,
button[style*="background:#D4AF37"]:hover,
button[style*="background:#d4af37"]:hover {
  box-shadow: 0 8px 28px rgba(212,175,55,.5) !important;
  transform: translateY(-2px) !important;
}

/* Blue primary button glow */
button[style*="background:#2B7FE0"],
button[style*="background:linear-gradient"][style*="2B7FE0"] {
  box-shadow: 0 4px 16px rgba(43,127,224,.35) !important;
}
button[style*="background:#2B7FE0"]:hover,
button[style*="background:linear-gradient"][style*="2B7FE0"]:hover {
  box-shadow: 0 8px 26px rgba(43,127,224,.5) !important;
}

/* Sidebar active state — premium gradient underline indicator */
.nav-item.active, [class*="nav-item"][class*="active"],
.ll-page-link.active, [data-active="true"].nav-item {
  background: linear-gradient(90deg, rgba(43,127,224,.18) 0%, rgba(43,127,224,.04) 100%) !important;
  border-left: 3px solid #2B7FE0 !important;
  box-shadow: inset 0 0 20px rgba(43,127,224,.06) !important;
}

/* Animated scan-line shimmer on loading skeletons */
@keyframes ll-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.ll-skeleton, [class*="skeleton"] {
  background: linear-gradient(90deg, #0d1b2a 25%, #1a3050 50%, #0d1b2a 75%) !important;
  background-size: 200% auto !important;
  animation: ll-shimmer 1.6s linear infinite !important;
  border-radius: 6px;
}

/* War Room header — premium gradient mesh background */
#war-header, .war-header, #war-room-header {
  background: linear-gradient(135deg, #060e1a 0%, #0d1b2a 40%, #0a1628 70%, #07111f 100%) !important;
  border-bottom: 1px solid rgba(43,127,224,.2) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.4) !important;
}

/* Overlay entrance animations — crisp, cinematic */
@keyframes overlayRise {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes overlayFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
[id$="-overlay"][style*="flex"], [id$="-overlay"][style*="block"] {
  animation: overlayFade .18s ease both;
}
[id$="-overlay"] > div {
  animation: overlayRise .22s cubic-bezier(.16,1,.3,1) both;
}

/* Home FAB pulse — draws eye gently */
@keyframes fabPulse {
  0%,100% { box-shadow: 0 4px 20px rgba(0,0,0,.5), 0 0 0 0 rgba(43,127,224,.4); }
  50%      { box-shadow: 0 4px 20px rgba(0,0,0,.5), 0 0 0 8px rgba(43,127,224,0); }
}
#ll-home-fab {
  animation: fabPulse 3s ease-in-out infinite;
}

/* Louie Score sidebar chip — pulsing purple glow */
#louie-score-chip {
  animation: louieScoreGlow 4s ease-in-out infinite;
}
@keyframes louieScoreGlow {
  0%,100% { box-shadow: 0 0 14px rgba(124,58,237,.1); }
  50%      { box-shadow: 0 0 22px rgba(124,58,237,.3); }
}

/* War Room critical-state red pulse on overdue items */
[class*="overdue"], [class*="sla-breach"], [data-overdue="true"] {
  animation: overdueFlash 2.5s ease-in-out infinite;
}
@keyframes overdueFlash {
  0%,100% { box-shadow: none; }
  50%      { box-shadow: 0 0 12px rgba(239,68,68,.4); }
}

/* Number reveal animation — count-up feel via CSS opacity slide-in */
@keyframes numReveal {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
.kpi-val, [id*="-val"], [class*="-val"] {
  animation: numReveal .35s ease both;
}

/* Mobile: safe-area insets for notches */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  #ll-home-fab { bottom: calc(24px + env(safe-area-inset-bottom)); }
  .sidebar, #sidebar { padding-bottom: env(safe-area-inset-bottom); }
}

/* ── Mobile optimizations ──────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Touch targets must be at least 44px */
  button, .nav-item, .zone-trigger, .inv-trigger, [role="button"] { min-height: 40px; }
  /* Prevent double-tap zoom */
  button, a, input, select { touch-action: manipulation; }
  /* Overlay fills screen on mobile */
  [id$="-overlay"] > div { border-radius: 0 !important; width: 100% !important; max-width: 100% !important; height: 100% !important; max-height: 100% !important; }
  /* Sidebar collapses tighter */
  .sidebar-wrap, #sidebar { padding: 8px 6px !important; }
  /* KPI tiles stack */
  .war-kpi-grid, .kpi-grid, [class*="kpi-grid"] { grid-template-columns: repeat(2, 1fr) !important; }
}