/* ── LANDMARK LOUIE — Unified Design System v1 ─────────────────────────────── */
/* Additive layer. Never overrides existing rules unless scoped to .ll- prefix. */

/* ── BUTTON SYSTEM — 4 types, consistent everywhere ─────────────────────────── */
.ll-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 20px; border-radius: 9px; border: none; cursor: pointer;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 13px;
  font-weight: 700; transition: opacity .15s, transform .1s, background .15s;
  text-decoration: none; white-space: nowrap; vertical-align: middle;
  line-height: 1; user-select: none; -webkit-tap-highlight-color: transparent;
}
.ll-btn:active { transform: scale(.97); }
.ll-btn:disabled, .ll-btn[disabled] { opacity: .42; cursor: default; pointer-events: none; }
.ll-btn svg { flex-shrink: 0; }

/* Primary — gold fill, dark text — the single most important action per screen */
.ll-btn-primary {
  background: #d4a017; color: #0d1117;
  box-shadow: 0 1px 4px rgba(212,160,23,.3);
}
.ll-btn-primary:hover { background: #e6b820; }
.ll-btn-primary:focus-visible { outline: 2px solid #e6b820; outline-offset: 3px; }

/* Secondary — dark fill + amber border — second-tier action */
.ll-btn-secondary {
  background: rgba(201,168,76,.1); border: 1px solid rgba(201,168,76,.35);
  color: #e6c878;
}
.ll-btn-secondary:hover { background: rgba(201,168,76,.18); }
.ll-btn-secondary:focus-visible { outline: 2px solid rgba(201,168,76,.5); outline-offset: 3px; }

/* Danger — red fill — destructive or irreversible action */
.ll-btn-danger { background: #dc2626; color: #f8f6f0; }
.ll-btn-danger:hover { background: #b91c1c; }
.ll-btn-danger:focus-visible { outline: 2px solid #f87171; outline-offset: 3px; }

/* Ghost — transparent, muted border — low-emphasis */
.ll-btn-ghost {
  background: transparent; border: 1px solid rgba(255,255,255,.15); color: #94a3b8;
}
.ll-btn-ghost:hover { background: rgba(255,255,255,.07); color: #e2e8f0; border-color: rgba(255,255,255,.25); }
.ll-btn-ghost:focus-visible { outline: 2px solid rgba(255,255,255,.3); outline-offset: 3px; }

/* Sizes */
.ll-btn-sm { padding: 6px 14px; font-size: 11.5px; border-radius: 7px; }
.ll-btn-lg { padding: 12px 26px; font-size: 14.5px; border-radius: 11px; }

/* ── BADGE SYSTEM ────────────────────────────────────────────────────────────── */
.ll-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 20px; font-size: 10px;
  font-weight: 800; letter-spacing: .3px; line-height: 1.6; white-space: nowrap;
}
.ll-badge-gold   { background: rgba(201,168,76,.15); border: 1px solid rgba(201,168,76,.3);  color: #e6c878; }
.ll-badge-red    { background: rgba(220,38,38,.12);  border: 1px solid rgba(220,38,38,.25);  color: #f87171; }
.ll-badge-green  { background: rgba(22,163,74,.1);   border: 1px solid rgba(22,163,74,.2);   color: #4ade80; }
.ll-badge-blue   { background: rgba(43,127,224,.1);  border: 1px solid rgba(43,127,224,.2);  color: #60a5fa; }
.ll-badge-purple { background: rgba(139,92,246,.1);  border: 1px solid rgba(139,92,246,.2);  color: #a78bfa; }
.ll-badge-muted  { background: rgba(148,163,184,.08); border: 1px solid rgba(148,163,184,.2); color: #94a3b8; }

/* ── EMPTY STATE COMPONENT ───────────────────────────────────────────────────── */
.ll-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 52px 24px; text-align: center; min-height: 180px;
}
.ll-empty-icon {
  width: 54px; height: 54px; border-radius: 16px; flex-shrink: 0;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: 18px;
}
.ll-empty-icon svg { opacity: .6; }
.ll-empty-title {
  font-size: 15px; font-weight: 800; color: #0a0f1e; margin: 0 0 6px;
  letter-spacing: -.01em;
}
.ll-empty-desc {
  font-size: 12.5px; color: #64748b; line-height: 1.65;
  max-width: 320px; margin: 0 auto 20px;
}

/* ── SKELETON LOADING ────────────────────────────────────────────────────────── */
@keyframes llShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.ll-skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.04) 75%);
  background-size: 200% 100%;
  animation: llShimmer 1.6s infinite;
  border-radius: 6px;
}
.ll-skeleton-line     { height: 13px; margin-bottom: 8px; }
.ll-skeleton-line.sm  { width: 42%; }
.ll-skeleton-line.md  { width: 68%; }
.ll-skeleton-line.xl  { height: 20px; }
.ll-skeleton-block    { height: 80px; margin-bottom: 12px; }

/* ── CHART CALLOUT ANNOTATION ────────────────────────────────────────────────── */
.ll-chart-callout {
  position: absolute; background: rgba(220,38,38,.1); border: 1px solid rgba(220,38,38,.35);
  border-radius: 8px; padding: 5px 10px; font-size: 10.5px; font-weight: 800;
  color: #fca5a5; pointer-events: none; z-index: 10; white-space: nowrap;
  letter-spacing: -.01em;
}
.ll-chart-callout::after {
  content: ''; position: absolute; bottom: -7px; left: 50%;
  transform: translateX(-50%); border: 7px solid transparent;
  border-top-color: rgba(220,38,38,.35); border-bottom: none;
}

/* ── LOUIE LOGOMARK ──────────────────────────────────────────────────────────── */
.ll-brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(135deg, #c9a84c 0%, #7a5c24 100%);
  box-shadow: 0 1px 5px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.15);
}

/* ── CARD ACCENT BORDERS ─────────────────────────────────────────────────────── */
.ll-card-pos  { border-left: 3px solid #16a34a !important; }
.ll-card-warn { border-left: 3px solid #d97706 !important; }
.ll-card-crit { border-left: 3px solid #dc2626 !important; }
.ll-card-info { border-left: 3px solid #2563eb !important; }

/* ── COUNT-UP PULSE ──────────────────────────────────────────────────────────── */
@keyframes llNumPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03); } }
.ll-counting { animation: llNumPulse .25s ease; display: inline-block; }

/* ── ERROR STATE ─────────────────────────────────────────────────────────────── */
.ll-error-state {
  display: flex; flex-direction: column; align-items: center;
  padding: 60px 24px; text-align: center;
}
.ll-error-icon {
  width: 60px; height: 60px; border-radius: 18px; flex-shrink: 0;
  background: rgba(220,38,38,.08); border: 1px solid rgba(220,38,38,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; margin-bottom: 16px;
}
.ll-error-title { font-size: 17px; font-weight: 800; color: #0a0f1e; margin: 0 0 8px; }
.ll-error-desc  { font-size: 12.5px; color: #64748b; margin: 0 0 20px; max-width: 300px; line-height: 1.6; }

/* ── CUSTOM SCROLLBAR — thin amber track, consistent platform-wide ───────────── */
::-webkit-scrollbar           { width: 6px; height: 6px; }
::-webkit-scrollbar-track     { background: rgba(255,255,255,.03); border-radius: 3px; }
::-webkit-scrollbar-thumb     { background: rgba(201,168,76,.35); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(201,168,76,.6); }
/* Keep light-mode panels (CRM list, activity board table) with a lighter thumb */
.crm3-center::-webkit-scrollbar-thumb,
#crm-list::-webkit-scrollbar-thumb,
.nm-body::-webkit-scrollbar-thumb { background: rgba(100,116,139,.35); }
.crm3-center::-webkit-scrollbar-thumb:hover,
#crm-list::-webkit-scrollbar-thumb:hover,
.nm-body::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,.6); }
/* Firefox */
* { scrollbar-width: thin; scrollbar-color: rgba(201,168,76,.3) rgba(255,255,255,.03); }

/* ── GLOBAL TYPOGRAPHY FIXES ─────────────────────────────────────────────────── */
/* H1 inherits browser default black — force dark-mode color */
h1 { color: var(--text, #0a0f1e); }
/* Retire sub-12px sizes that fail WCAG — enforce 12px floor on labels */
.kpi-label, .stat-label, .badge-label, [class*="-label"] { min-font-size: 12px; }

/* ── SEMANTIC COLOR TOKENS ──────────────────────────────────────────────────── */
:root {
  --ll-green:    #22c55e;  /* revenue, sold, positive */
  --ll-amber:    #f59e0b;  /* time-sensitive, warning */
  --ll-blue:     #3b82f6;  /* communications, BDC */
  --ll-purple:   #a78bfa;  /* pipeline stages only — do not reuse */
  --ll-red:      #ef4444;  /* alerts, 90+ days, danger */
  --ll-gold:     #c9a84c;  /* brand, primary actions — canonical, matches --color-gold-bright */
  --ll-navy:     #0d1b2a;  /* card surfaces */
}

/* ── PRIORITY ROW SEVERITY — Unified Action Queue ────────────────────────────── */
.priority-row-90d  { background: rgba(239,68,68,.07) !important; border-left: 3px solid rgba(239,68,68,.5) !important; }
.priority-row-60d  { background: rgba(245,158,11,.05) !important; border-left: 3px solid rgba(245,158,11,.4) !important; }
.priority-row-30d  { background: rgba(212,160,23,.04) !important; border-left: 3px solid rgba(212,160,23,.3) !important; }

/* ── FRESH START KANBAN — unify KPI card colors ───────────────────────────────── */
.fs-kpi-filings   { background: rgba(245,158,11,.12) !important; border-color: rgba(245,158,11,.25) !important; }
.fs-kpi-today     { background: rgba(239,68,68,.1)   !important; border-color: rgba(239,68,68,.25)  !important; }
.fs-kpi-ch7       { background: rgba(34,197,94,.1)   !important; border-color: rgba(34,197,94,.2)   !important; }
.fs-kpi-working   { background: rgba(59,130,246,.1)  !important; border-color: rgba(59,130,246,.2)  !important; }

/* ── OPERATIONS CENTER LABELS ────────────────────────────────────────────────── */
/* Re-labeled to "Floor Plan Exposure" in JS; CSS class hooks for quick reference */
.ops-floorplan-label::after { content: ' (Floor Plan)'; font-size: 9px; opacity:.6; }

/* ── EXPAND LOUIE TOOLTIP ────────────────────────────────────────────────────── */
[data-ll-expand-btn] { position: relative; }
[data-ll-expand-btn]::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  background: #0a1525; border: 1px solid #1e2a40; color: #0a0f1e;
  font-size: 11px; padding: 5px 10px; border-radius: 7px;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .15s;
}
[data-ll-expand-btn]:hover::after { opacity: 1; }

/* ── NOTIFICATION BELL PULSE ─────────────────────────────────────────────────── */
@keyframes llBellPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.5); } 50% { box-shadow: 0 0 0 6px rgba(239,68,68,0); } }
.notif-badge-critical { animation: llBellPulse 1.4s infinite; }

/* ── CLOSE BUTTON STANDARD ───────────────────────────────────────────────────── */
.ll-close-btn {
  position: absolute; top: 16px; right: 16px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  color: #94a3b8; width: 30px; height: 30px; border-radius: 8px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; transition: background .15s;
}
.ll-close-btn:hover { background: rgba(255,255,255,.12); color: #0a0f1e; }

/* ── DESK LOG EMPTY STATE CTA ────────────────────────────────────────────────── */
.desk-log-empty .ll-empty-cta {
  display: inline-flex; margin-top: 12px;
}

/* ── LOADING SKELETON STATES ──────────────────────────────────────────────────── */
.ll-module-loading {
  padding: 24px; display: flex; flex-direction: column; gap: 12px;
}
.ll-module-loading .ll-skeleton-line { width: 75%; }
.ll-module-loading .ll-skeleton-line:nth-child(2) { width: 55%; }
.ll-module-loading .ll-skeleton-block { height: 100px; border-radius: 10px; }

/* ── CRM LEAD TEMPERATURE HEAT BADGES ────────────────────────────────────────── */
.crm-temp-hot   { background: rgba(239,68,68,.12)  !important; color: #f87171  !important; border: 1px solid rgba(239,68,68,.25)  !important; }
.crm-temp-warm  { background: rgba(245,158,11,.12) !important; color: #fbbf24  !important; border: 1px solid rgba(245,158,11,.25) !important; }
.crm-temp-fresh { background: rgba(59,130,246,.12) !important; color: #60a5fa  !important; border: 1px solid rgba(59,130,246,.25)  !important; }
.crm-temp-cold  { background: rgba(100,116,139,.1) !important; color: #94a3b8  !important; border: 1px solid rgba(100,116,139,.2)  !important; }

/* ── BRAND WEIGHT — LANDMARK / LOUIE differentiation ────────────────────────── */
.ll-brand-landmark {
  font-size: 10px !important; letter-spacing: .1em !important;
  opacity: .65; font-weight: 500 !important;
}
.ll-brand-louie {
  font-size: 17px !important; font-weight: 900 !important; letter-spacing: -.01em;
}