/*
 * award-v2.css — Design System Enforcement Pass
 * Fixes: token coherence, sidebar collapse, notification shelf,
 * Floor Board card CSS, motion design, button language.
 * Loaded last — overrides all prior sheets.
 */

/* ═══════════════════════════════════════════════════════════════
   1. CANONICAL TOKEN ALIASES (single source of truth)
   ═══════════════════════════════════════════════════════════════ */
:root {
  --ll-bg:        #0D0F14;   /* true dark — only dark bg allowed */
  --ll-surface:   #141720;   /* card surface */
  --ll-surface2:  #1A1F2E;   /* elevated / hover */
  --ll-border:    #1E2330;   /* all strokes */
  --ll-gold:      #c9a84c;   /* primary accent — canonical gold, matches --color-gold-bright */
  --ll-red:       #EF4444;   /* danger — loss, urgency */
  --ll-green:     #22C55E;   /* success — sold, funded */
  --ll-blue:      #3B82F6;   /* AI / data accent */
  --ll-text:      #F0F2F5;   /* primary text */
  --ll-muted:     #6B7280;   /* secondary text */
  --ll-subtle:    #4B5563;   /* disabled / hint */
  --ll-radius:    10px;
  --ll-radius-sm: 6px;
  --ll-radius-lg: 16px;
}

/* ═══════════════════════════════════════════════════════════════
   2. GLOBAL CARD / MODULE SURFACE COHERENCE
   All dark modules get a single canonical surface color.
   ═══════════════════════════════════════════════════════════════ */

/* Any element that previously used a slightly-off dark bg */
.card, .ll-card, .module-card,
.home-card, .war-card, .overlay-section,
.rpt-section, .gl-section,
[class*="-card"]:not(.ll-card-white):not(.fb-card),
[class*="-module"]:not([class*="white"]) {
  background: var(--ll-surface) !important;
  border-color: var(--ll-border) !important;
}

/* White-background report/print modules stay white */
.rpt-body, .gl-modal, .mi-modal-inner,
[data-theme="light"] .card { background: #0a0f1e !important; }

/* Strip mismatched backgrounds on dark overlays */
.overlay-wrap > .overlay-inner,
.ll-overlay > .ll-ov-inner,
[id$="-overlay"] > div > .ov-body,
[id$="-overlay"] > .ov-inner {
  background: var(--ll-bg) !important;
}

/* Section headers — uniform bottom border */
.section-header, .panel-header, .ov-header,
.ll-section-head, .module-head,
[class*="-header"]:not(.chat-header):not(.page-header) {
  border-bottom: 1px solid var(--ll-border) !important;
}

/* ═══════════════════════════════════════════════════════════════
   3. BUTTON LANGUAGE SYSTEM — 3 patterns only
   .ll-btn-primary  → gold, filled (main action)
   .ll-btn-review   → outlined gold (review / judgment)
   .ll-btn-danger   → red tinted (destructive / urgent)
   ═══════════════════════════════════════════════════════════════ */
.ll-btn-primary {
  background: var(--ll-gold);
  border: 1px solid var(--ll-gold);
  color: #000;
  font-weight: 800;
  font-family: inherit;
  border-radius: var(--ll-radius-sm);
  padding: 8px 18px;
  cursor: pointer;
  font-size: 13px;
  transition: opacity .12s, transform .1s;
}
.ll-btn-primary:hover { opacity: .88; transform: translateY(-1px); }
.ll-btn-primary:active { transform: translateY(0); }

.ll-btn-review {
  background: rgba(244,185,66,.1);
  border: 1px solid rgba(244,185,66,.35);
  color: var(--ll-gold);
  font-weight: 700;
  font-family: inherit;
  border-radius: var(--ll-radius-sm);
  padding: 7px 16px;
  cursor: pointer;
  font-size: 13px;
  transition: background .12s;
}
.ll-btn-review:hover { background: rgba(244,185,66,.18); }

.ll-btn-danger {
  background: rgba(239,68,68,.1);
  border: 1px solid rgba(239,68,68,.35);
  color: #FCA5A5;
  font-weight: 700;
  font-family: inherit;
  border-radius: var(--ll-radius-sm);
  padding: 7px 16px;
  cursor: pointer;
  font-size: 13px;
  transition: background .12s;
}
.ll-btn-danger:hover { background: rgba(239,68,68,.2); }

/* ═══════════════════════════════════════════════════════════════
   4. SIDEBAR COLLAPSE — icon rail on tablet (769–1024px) only.
      Desktop (≥1025px): sidebar is always full-width at 260px.
   ═══════════════════════════════════════════════════════════════ */
.sidebar {
  transition: width .22s cubic-bezier(.4,0,.2,1) !important;
  flex-shrink: 0 !important;
}

@media (min-width: 769px) and (max-width: 1024px) {
  .sidebar {
    width: 58px !important;
    overflow: hidden !important;
  }
  .sidebar:hover,
  .sidebar.expanded {
    width: 260px !important;
    overflow: visible !important;
  }

  /* In icon-rail mode, hide text labels */
  .sidebar:not(:hover):not(.expanded) .sidebar-brand .lm-landmark,
  .sidebar:not(:hover):not(.expanded) .sidebar-brand .lm-louie,
  .sidebar:not(:hover):not(.expanded) .new-chat-btn span,
  .sidebar:not(:hover):not(.expanded) .inv-trigger span,
  .sidebar:not(:hover):not(.expanded) .nav-section-label,
  .sidebar:not(:hover):not(.expanded) .sidebar-group-header,
  .sidebar:not(:hover):not(.expanded) #role-badge > span:not(.rb-tag),
  .sidebar:not(:hover):not(.expanded) #role-badge > span:last-child,
  .sidebar:not(:hover):not(.expanded) #chat-hist-toggle > span:last-child,
  .sidebar:not(:hover):not(.expanded) #louie-score-chip > div:last-child,
  .sidebar:not(:hover):not(.expanded) #louie-score-chip > span:last-child,
  .sidebar:not(:hover):not(.expanded) .convo-list,
  .sidebar:not(:hover):not(.expanded) #chat-hist-wrap,
  .sidebar:not(:hover):not(.expanded) .sidebar-footer > span,
  .sidebar:not(:hover):not(.expanded) .sidebar-footer > div {
    opacity: 0 !important;
    pointer-events: none !important;
    white-space: nowrap !important;
  }
  .sidebar:not(:hover):not(.expanded) #sidebar-war-strip,
  .sidebar:not(:hover):not(.expanded) #dark-store-sidebar-dot {
    display: none !important;
  }
  .sidebar:not(:hover):not(.expanded) .inv-trigger {
    padding: 10px !important;
    justify-content: center !important;
  }
  .sidebar:not(:hover):not(.expanded) .inv-trigger svg { flex-shrink: 0 !important; }
  .sidebar:not(:hover):not(.expanded) #role-badge {
    padding: 8px !important; border-radius: 50% !important;
    width: 40px !important; height: 40px !important;
    justify-content: center !important; margin: 0 auto !important;
  }
  .sidebar:not(:hover):not(.expanded) .sidebar-header {
    padding: 12px 8px !important; justify-content: center !important;
  }
  .sidebar:not(:hover):not(.expanded) .sidebar-brand { gap: 0 !important; }
  .sidebar:not(:hover):not(.expanded) .new-chat-btn { display: none !important; }

  /* Tap-to-expand fallback for the icon rail above -- :hover alone never reveals
     labels on touch devices, and this button is the only path to .expanded there. */
  #ll-sidebar-expand-toggle { display: flex !important; align-items: center; justify-content: center; }
  .sidebar.expanded #ll-sidebar-expand-toggle svg { transform: rotate(180deg); }
}
@media (min-width: 1025px), (max-width: 768px) {
  /* Outside the icon-rail breakpoint the toggle has nothing to do -- keep it hidden. */
  #ll-sidebar-expand-toggle { display: none !important; }
}

/* Enable the horizontal KPI bar when sidebar is collapsed (tablet only) */
@media (min-width: 769px) and (max-width: 1024px) {
  #kpi-live-bar { display: flex !important; }
}
@media (min-width: 1025px) {
  /* Desktop: sidebar always full-width — override any prior collapse rules */
  .sidebar { width: 260px !important; overflow: visible !important; }
}

/* ═══════════════════════════════════════════════════════════════
   5. UNIFIED NOTIFICATION SHELF
   Replaces competing ticker + louie-says-banner with one layer.
   ═══════════════════════════════════════════════════════════════ */
#ll-alert-shelf {
  display: none;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #0B1218;
  border-bottom: 1px solid var(--ll-border);
  min-height: 40px;
  flex-shrink: 0;
  overflow: hidden;
}
#ll-alert-shelf.has-alerts {
  display: flex;
}
.ll-alert-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  font-size: 12px;
  color: var(--ll-text);
  font-weight: 500;
  cursor: pointer;
  transition: background .12s;
  white-space: nowrap;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}
.ll-alert-item:hover { background: rgba(255,255,255,.08); }
.ll-alert-item.priority-high {
  border-color: rgba(239,68,68,.3);
  background: rgba(239,68,68,.06);
  color: #FCA5A5;
}
.ll-alert-item.priority-gold {
  border-color: rgba(244,185,66,.3);
  background: rgba(244,185,66,.06);
  color: #FDE68A;
}
.ll-alert-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ll-alert-dismiss {
  background: none;
  border: none;
  color: var(--ll-subtle);
  cursor: pointer;
  font-size: 13px;
  padding: 0 0 0 6px;
  line-height: 1;
  flex-shrink: 0;
  transition: color .12s;
}
.ll-alert-dismiss:hover { color: var(--ll-text); }
#ll-alert-shelf .shelf-see-all {
  margin-left: auto;
  font-size: 11px;
  color: var(--ll-muted);
  cursor: pointer;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color .12s, background .12s;
}
#ll-alert-shelf .shelf-see-all:hover {
  color: var(--ll-text);
  background: rgba(255,255,255,.06);
}

/* Hide the old competing notification systems */
#louie-says-banner:not(:empty) {
  display: none !important;
}
/* deal-ticker still shows in header but smaller */
#deal-ticker {
  font-size: 11px !important;
}

/* ═══════════════════════════════════════════════════════════════
   6. KPI LIVE BAR — enhanced (already exists, now always visible)
   ═══════════════════════════════════════════════════════════════ */
#kpi-live-bar {
  background: #0B1623 !important;
  border-bottom: 1px solid #1a2840 !important;
  min-height: 36px !important;
}
.kpi-pill {
  cursor: pointer;
}
.kpi-pill:hover { background: rgba(255,255,255,.07) !important; }

/* ═══════════════════════════════════════════════════════════════
   7. TYPOGRAPHY HIERARCHY — enforce on all module headers
   ═══════════════════════════════════════════════════════════════ */

/* Module overlay headers — consistent size + weight */
.ov-title, .overlay-title, .panel-title,
[class*="-title"]:not(h1):not(h2) {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--ll-text) !important;
  letter-spacing: -0.02em !important;
}

/* Section labels / subheadings — uniform */
.section-label, .panel-label, .tile-label,
.ll-label, [class*="-label"]:not(button):not(input) {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: var(--ll-subtle) !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
}

/* KPI numbers everywhere */
.kpi-value, .kp-value, [class*="-value"]:not(input):not(select) {
  font-family: 'Barlow Condensed', 'DM Mono', sans-serif !important;
}

/* ═══════════════════════════════════════════════════════════════
   8. MOTION DESIGN — micro-animations on key actions
   ═══════════════════════════════════════════════════════════════ */

/* Price flash — triggered when a reprice is approved */
@keyframes ll-price-down {
  0%   { color: var(--ll-text); background: transparent; }
  15%  { color: #000; background: var(--ll-green); border-radius: 4px; padding: 0 4px; }
  70%  { color: #000; background: var(--ll-green); border-radius: 4px; padding: 0 4px; }
  100% { color: var(--ll-green); background: transparent; padding: 0; }
}
.ll-price-flash {
  animation: ll-price-down .9s var(--ease-spring, ease) forwards;
  display: inline-block;
}

/* Deal sold ring — a circular pulse when sold is toggled */
@keyframes ll-sold-ring {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.7); }
  70%  { box-shadow: 0 0 0 16px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.ll-sold-pulse {
  animation: ll-sold-ring .7s ease forwards;
}

/* Approval button — brief confirmation flash */
@keyframes ll-approve-flash {
  0%   { transform: scale(1); }
  30%  { transform: scale(.95); }
  60%  { transform: scale(1.04); background: var(--ll-green); color: #000; border-color: var(--ll-green); }
  100% { transform: scale(1); }
}
.ll-approve-flash {
  animation: ll-approve-flash .45s var(--ease-spring, ease) forwards;
}

/* Number count-up — used by ll-countUp() JS utility */
@keyframes ll-num-tick {
  from { opacity: .4; transform: translateY(4px); }
  to   { opacity: 1;  transform: translateY(0); }
}
.ll-counting { animation: ll-num-tick .18s ease; }

/* Slide-in for new alert shelf items */
@keyframes ll-shelf-slide {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
.ll-alert-item { animation: ll-shelf-slide .22s ease; }

/* Card entrance — floor board cards animate in */
@keyframes ll-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fb-card {
  animation: ll-card-in .25s ease backwards;
}
.fb-card:nth-child(1) { animation-delay: .03s; }
.fb-card:nth-child(2) { animation-delay: .06s; }
.fb-card:nth-child(3) { animation-delay: .09s; }
.fb-card:nth-child(4) { animation-delay: .12s; }
.fb-card:nth-child(5) { animation-delay: .15s; }
.fb-card:nth-child(6) { animation-delay: .18s; }

/* Step complete flash */
@keyframes ll-step-done {
  0%  { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100%{ transform: scale(1); }
}
.fb-step.done .fb-step-dot,
.fb-step.sold-done .fb-step-dot {
  animation: ll-step-done .3s ease;
}

/* ═══════════════════════════════════════════════════════════════
   9. EMOJI USAGE DICTIONARY ENFORCEMENT
   Ensure fire emoji is only used for urgency contexts.
   ═══════════════════════════════════════════════════════════════ */
/* No visual enforcement possible, but we standardize via CSS classes */
.ll-icon-urgency::before   { content: "🔥"; }
.ll-icon-ai::before        { content: "⚡"; }
.ll-icon-data::before      { content: "📊"; }
.ll-icon-goal::before      { content: "🎯"; }
.ll-icon-inventory::before { content: "🚗"; }
.ll-icon-money::before     { content: "💰"; }

/* ═══════════════════════════════════════════════════════════════
   10. FLOOR BOARD — ensure dark theme on card backgrounds
       (floor-beat.js injects its own CSS, but override any light-bleed)
   ═══════════════════════════════════════════════════════════════ */
#floor-board-overlay .fb-stat { background: var(--ll-surface) !important; border-color: var(--ll-border) !important; }
#floor-board-overlay .fb-stat .fsv { color: var(--ll-text) !important; }
#floor-board-overlay { background: var(--ll-bg) !important; }
.fb-card-actions { background: transparent !important; }

/* ═══════════════════════════════════════════════════════════════
   11. MOBILE — sidebar always full at mobile (no icon-rail confusion)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .sidebar {
    width: 0 !important;
    overflow: hidden !important;
  }
  .sidebar.mob-open {
    width: 260px !important;
    overflow: visible !important;
  }
}