/*
 * LandmarkLouie Design System v2
 * Z0-Z4 elevation depth, Louie amber signature, semantic color charter,
 * typography scale, animations, sparklines, skeletons, page transitions.
 * Loaded as override layer — does NOT replace existing styles.
 */

/* ============================================================
   LAYER 1 — Z-ELEVATION DEPTH SYSTEM
   ============================================================ */
:root {
  /* Elevation scale — creates physical depth sensation */
  --z0-floor: #0a0a0f;        /* page canvas */
  --z1-surface: #111118;      /* passive cards, containers */
  --z2-interactive: #18181f;  /* active/interactive layer */
  --z3-overlay: #1e1e2a;      /* modals, overlays */
  --z4-louie: #1a160a;        /* Louie AI layer — amber-tinted dark */

  /* Z-level box shadows (elevation = shadow intensity) */
  --shadow-z1: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-z2: 0 4px 12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
  --shadow-z3: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.08);
  --shadow-z4: 0 16px 48px rgba(0,0,0,0.7), 0 0 0 1px rgba(245,166,35,0.15);

  /* Border treatments */
  --border-z1: 1px solid rgba(255,255,255,0.05);
  --border-z2: 1px solid rgba(255,255,255,0.08);
  --border-z3: 1px solid rgba(255,255,255,0.12);
  --border-louie: 1px solid rgba(245,166,35,0.2);
}

/* Apply elevation to existing element classes */
.card, .kpi-tile, .home-kpi, .war-room-card, .metric-card {
  background: var(--z1-surface) !important;
  box-shadow: var(--shadow-z1);
  border: var(--border-z1);
}

.modal-overlay, .overlay-panel, [class*="-overlay"], [class*="-modal"] {
  background: var(--z3-overlay) !important;
  box-shadow: var(--shadow-z3);
}

/* Interactive cards get Z2 on hover */
.card:hover, .kpi-tile:hover, .home-kpi:hover {
  background: var(--z2-interactive) !important;
  box-shadow: var(--shadow-z2);
  transition: background 200ms ease, box-shadow 200ms ease;
}

/* ============================================================
   LAYER 2 — COLOR SEMANTIC CHARTER
   ============================================================ */
:root {
  /* Semantic color system — strict usage rules */
  --color-louie: #f5a623;           /* ONLY for Louie AI voice/output */
  --color-louie-dim: rgba(245,166,35,0.12);
  --color-louie-glow: rgba(245,166,35,0.25);
  --color-danger: #e53935;          /* money leaving, aging, risk */
  --color-warning: #ff8c00;         /* watch, take action soon */
  --color-healthy: #43a047;         /* on track, goal met */
  --color-neutral: #546e7a;         /* informational only */
  --color-teal: #00bfa5;            /* brand identity only */
  --color-pipeline: #7c3aed;        /* CRM/pipeline purple */
  --color-fi: #0891b2;              /* F&I teal-blue */

  /* Role accent colors */
  --role-rep: #3b82f6;
  --role-bdc: #8b5cf6;
  --role-fi: #0891b2;
  --role-gm: #f5a623;
  --role-owner: #fbbf24;
  --role-service: #10b981;
}

/* ============================================================
   LAYER 3 — LOUIE VISUAL SIGNATURE (The #1 Differentiator)
   ============================================================ */

/* THE amber left-border rule: EVERY container carrying Louie's voice */
.louie-voice,
.louie-says,
.louie-insight,
.louie-coaching,
.louie-alert,
.ai-insight,
.ai-message,
[class*="louie-"],
[class*="-louie"],
.war-room-alert,
.floor-call-card,
.game-plan-move,
.priority-card,
.opportunity-banner {
  border-left: 3px solid var(--color-louie) !important;
  background: var(--z4-louie) !important;
  box-shadow: var(--shadow-z4);
  padding-left: 16px;
}

/* Louie amber left-border on AI messages in chat */
.msg.assistant, .message.assistant, [data-role="assistant"] {
  border-left: 3px solid var(--color-louie);
  background: linear-gradient(90deg, rgba(245,166,35,0.05) 0%, transparent 60%);
}

/* ============================================================
   LAYER 4 — TYPOGRAPHY SCALE
   ============================================================ */

/* Louie Voice — humanist, spoken, loose tracking */
.louie-voice, .louie-says, .louie-insight, .ai-message, .msg.assistant,
.game-plan-text, .floor-call-text, .coaching-text, .alert-message {
  font-family: 'Inter', -apple-system, sans-serif;
  letter-spacing: 0.01em;
  line-height: 1.6;
  font-weight: 400;
}

/* Operational Voice — tight, compressed, data-first */
.kpi-value, .kpi-number, .metric-value, .stat-value,
[class*="-count"], [class*="-total"], [class*="-gross"] {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* KPI labels — drop ALL-CAPS to sentence case, reduce tracking */
.kpi-label, .metric-label, .tile-label, .stat-label,
[class*="-label"]:not(button) {
  font-size: 11px;
  letter-spacing: 0.02em;  /* was: tracking-widest = 0.1em */
  text-transform: none;     /* was: uppercase */
  font-weight: 500;
  opacity: 0.7;
  font-family: 'Inter', sans-serif;
}

/* ============================================================
   LAYER 5 — ALERT STRIP ANIMATIONS
   ============================================================ */

/* Slide-up ticker animation */
@keyframes tickerSlideUp {
  0% { transform: translateY(100%); opacity: 0; }
  15% { transform: translateY(0); opacity: 1; }
  85% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-100%); opacity: 0; }
}

.alert-strip, .war-strip, .top-alert-bar {
  overflow: hidden;
}

.alert-strip .message, .war-strip .message, .alert-item {
  animation: tickerSlideUp 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Urgency pulse on alert accent dot */
@keyframes urgencyPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.8; }
}

.alert-dot, .severity-dot, .status-dot.critical, .alert-accent {
  animation: urgencyPulse 2s ease-in-out infinite;
}

/* Progress bar replacing message dots */
.alert-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--color-louie);
  animation: alertProgress 6s linear infinite;
}
@keyframes alertProgress {
  from { width: 100%; }
  to { width: 0%; }
}

/* ============================================================
   LAYER 6 — SIDEBAR ENHANCEMENTS
   ============================================================ */

/* Active nav item — amber sweep from left */
.nav-item, .sidebar-item, [class*="nav-link"], .ll-nav-btn {
  position: relative;
  transition: background 200ms ease, color 200ms ease;
}

.nav-item::before, .sidebar-item::before, .ll-nav-btn::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--color-louie);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 0 2px 2px 0;
}

.nav-item.active::before,
.sidebar-item.active::before,
.ll-nav-btn.active::before,
.ll-nav-btn[style*="background"]::before {
  transform: scaleY(1);
}

/* Role-specific sidebar accent color shifting */
body[data-role="rep"] { --role-accent: var(--role-rep); }
body[data-role="bdc"] { --role-accent: var(--role-bdc); }
body[data-role="fi"], body[data-role="f&i"] { --role-accent: var(--role-fi); }
body[data-role="gm"] { --role-accent: var(--role-gm); }
body[data-role="owner"] { --role-accent: var(--role-owner); }
body[data-role="service"] { --role-accent: var(--role-service); }

/* When role changes, sidebar accent shifts */
body[data-role] .nav-item.active::before,
body[data-role] .sidebar-item.active::before {
  background: var(--role-accent, var(--color-louie));
}

/* LIVE dot in sidebar footer */
@keyframes livePulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(67, 160, 71, 0.4); }
  50% { opacity: 0.8; box-shadow: 0 0 0 6px rgba(67, 160, 71, 0); }
}

.sidebar-footer .live-dot, .dealer-live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-healthy);
  animation: livePulse 2.5s ease infinite;
  margin-right: 6px;
  vertical-align: middle;
}

/* ============================================================
   LAYER 7 — KPI SPARKLINES
   ============================================================ */

/* Sparkline container in KPI tile footer */
.kpi-sparkline {
  position: absolute;
  bottom: 8px;
  left: 12px;
  right: 12px;
  height: 32px;
  opacity: 0.5;
  pointer-events: none;
}

.kpi-tile, .home-kpi {
  position: relative;
  padding-bottom: 48px; /* make room for sparkline */
}

/* Sparkline canvas styling */
.kpi-sparkline canvas {
  width: 100% !important;
  height: 32px !important;
}

/* ============================================================
   LAYER 8 — LOADING SKELETONS
   ============================================================ */

@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.09) 50%,
    rgba(255,255,255,0.04) 75%
  );
  background-size: 200% auto;
  animation: shimmer 1.5s linear infinite;
  border-radius: 4px;
}

.kpi-skeleton-number {
  height: 40px;
  width: 70%;
  margin-bottom: 8px;
}
.kpi-skeleton-label {
  height: 12px;
  width: 50%;
}

/* Auto-apply skeleton when data is loading */
.kpi-tile.loading .kpi-value,
.kpi-tile.loading .kpi-number,
.home-kpi.loading .value {
  color: transparent;
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 200% auto;
  animation: shimmer 1.5s linear infinite;
  border-radius: 4px;
}

/* ============================================================
   LAYER 9 — OPS BUBBLE GLOW + THINKING ANIMATION
   ============================================================ */

/* OPS bubble glow when pending actions */
@keyframes louieGlow {
  0% { box-shadow: 0 0 0 0 rgba(245,166,35,0.7); }
  70% { box-shadow: 0 0 0 12px rgba(245,166,35,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,166,35,0); }
}

.ops-bubble, .voice-fab, #voice-button, .louie-fab {
  transition: box-shadow 300ms ease;
}

.ops-bubble.pending, .voice-fab.pending {
  animation: louieGlow 2s ease infinite;
}

/* Louie "thinking" cognitive animation — amber dots */
@keyframes thinkDot1 { 0%,60%,100%{transform:scale(1);opacity:.3}30%{transform:scale(1.4);opacity:1} }
@keyframes thinkDot2 { 0%,60%,100%{transform:scale(1);opacity:.3}45%{transform:scale(1.4);opacity:1} }
@keyframes thinkDot3 { 0%,60%,100%{transform:scale(1);opacity:.3}60%{transform:scale(1.4);opacity:1} }

.louie-thinking {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
}

.louie-thinking span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-louie);
  display: inline-block;
}

.louie-thinking span:nth-child(1) { animation: thinkDot1 0.8s ease-in-out infinite; }
.louie-thinking span:nth-child(2) { animation: thinkDot2 0.8s ease-in-out infinite; }
.louie-thinking span:nth-child(3) { animation: thinkDot3 0.8s ease-in-out infinite; }

/* Replace standard spinner/loading indicators in AI contexts */
.ai-loading, .louie-loading, .thinking-indicator {
  background: none !important;
  border: none !important;
}

/* Staggered chip entrance animation */
@keyframes chipEnter {
  from { transform: translateY(8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.quick-chip, .prompt-chip, .context-chip {
  animation: chipEnter 400ms ease backwards;
}
.quick-chip:nth-child(1) { animation-delay: 0ms; }
.quick-chip:nth-child(2) { animation-delay: 80ms; }
.quick-chip:nth-child(3) { animation-delay: 160ms; }
.quick-chip:nth-child(4) { animation-delay: 240ms; }
.quick-chip:nth-child(5) { animation-delay: 320ms; }
.quick-chip:nth-child(6) { animation-delay: 400ms; }

/* ============================================================
   LAYER 10 — PAGE TRANSITIONS
   ============================================================ */

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

@keyframes pageOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-4px); }
}

.page-section, .ll-page, [class*="-page"], .view-panel {
  animation: pageIn 200ms ease-out forwards;
}

.page-section.exiting, .ll-page.exiting {
  animation: pageOut 200ms ease-in forwards;
}

/* ============================================================
   LAYER 11 — CHART ANIMATIONS
   ============================================================ */

/* Chart container — stagger bars via CSS */
.recharts-bar-rectangle, .chartjs-bar {
  transition: opacity 350ms ease;
}

/* Make bar charts grow from zero on load */
@keyframes barGrow {
  from { transform: scaleY(0); transform-origin: bottom; }
  to { transform: scaleY(1); transform-origin: bottom; }
}

.chart-container canvas {
  animation: fadeIn 400ms ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ============================================================
   LAYER 12 — EMPTY STATE ENHANCEMENTS
   ============================================================ */

/* Zero state styling — turn nothing into a coaching moment */
.zero-state, .empty-state, [data-value="0"].kpi-tile {
  position: relative;
}

/* Branded error reconnect state */
.live-dashboard-error {
  border-left: 3px solid var(--color-louie);
  background: var(--z4-louie) !important;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 8px;
}

.live-dashboard-error::before {
  content: '\29B8';
  color: var(--color-louie);
  font-size: 20px;
  animation: spin 2s linear infinite;
}

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

/* ============================================================
   LAYER 13 — AUTH SCREEN WORDMARK ANIMATION
   ============================================================ */

/* Login screen brand mark assembly animation */
@keyframes wordmarkIn {
  0% { opacity: 0; letter-spacing: 0.5em; }
  100% { opacity: 1; letter-spacing: normal; }
}

@keyframes subtitleType {
  0% { width: 0; opacity: 0; }
  1% { opacity: 1; }
  100% { width: 100%; opacity: 1; }
}

.login-logo, .auth-wordmark, .login-title {
  animation: wordmarkIn 600ms cubic-bezier(0.4, 0, 0.2, 1) 200ms backwards;
}

.login-subtitle, .auth-tagline {
  overflow: hidden;
  white-space: nowrap;
  animation: subtitleType 1.2s steps(30) 800ms backwards;
}

/* Overall login form entrance */
.login-card, .auth-card, .login-form {
  animation: pageIn 400ms ease 400ms backwards;
}