/* ═══════════════════════════════════════════════════════════════
   NIP Manager — Global Theme System (Light + Dark)
   Default: Light mode. Toggle via body class .theme-dark
   ═══════════════════════════════════════════════════════════════ */

/* ── LIGHT MODE (default) ── */
:root, .theme-light {
  --bg-body: #ffffff;
  --bg-main: #f5f5f5;
  --bg-card: #ffffff;
  --bg-sidebar: #ffffff;
  --bg-topbar: #ffffff;
  --bg-input: #f3f4f6;
  --bg-hover: #e8e8e8;
  --bg-accent: #FFD215;
  --text-primary: #000000;
  --text-secondary: #333333;
  --text-muted: #777777;
  --text-sidebar: #111111;
  --text-accent: #FFD215;
  --border-color: #e0e0e0;
  --border-strong: #cccccc;
  --shadow: 0 1px 3px rgba(0,0,0,0.08);
  --nip-yellow: #FFD215;
  --nip-yellow2: #FFB800;
  --nip-black: #0A0A0A;
  --nip-paper: #000000;
  --nip-red: #D32F2F;
  --nip-green: #2E7D32;
  --nip-blue: #1565C0;
  --nip-zinc1: #f5f5f5;
  --nip-zinc2: #e0e0e0;
  --nip-zinc3: #cccccc;
  --nip-zinc4: #999999;
  --btn-shadow: #0A0A0A;
}

/* ── DARK MODE ── */
.theme-dark {
  --bg-body: #0A0A0A;
  --bg-main: #0A0A0A;
  --bg-card: #141414;
  --bg-sidebar: #101010;
  --bg-topbar: #0A0A0A;
  --bg-input: #1E1E1E;
  --bg-hover: #222222;
  --bg-accent: #FFD215;
  --text-primary: #F5F2EA;
  --text-secondary: #888888;
  --text-muted: #555555;
  --text-sidebar: #e5e5e5;
  --text-accent: #FFD215;
  --border-color: #222222;
  --border-strong: #333333;
  --shadow: 0 1px 3px rgba(0,0,0,0.4);
  --nip-yellow: #FFD215;
  --nip-yellow2: #FFB800;
  --nip-black: #0A0A0A;
  --nip-paper: #F5F2EA;
  --nip-red: #E53935;
  --nip-green: #43A047;
  --nip-blue: #1E88E5;
  --nip-zinc1: #141414;
  --nip-zinc2: #1E1E1E;
  --nip-zinc3: #282828;
  --nip-zinc4: #444444;
  --btn-shadow: #000000;
}

/* ── THEME UTILITY CLASSES ── */
body { background: var(--bg-body); color: var(--text-primary); }
.main-bg { background: var(--bg-main); }
.card-bg { background: var(--bg-card); }
.topbar-bg { background: var(--bg-topbar); }
.topbar-border { border-color: var(--border-color); }
.sidebar-bg { background: var(--bg-sidebar) !important; }
.nip-sidebar { width: 260px; min-width: 260px; max-width: 260px; }
.text-theme { color: var(--text-primary); }
.text-theme-secondary { color: var(--text-secondary); }
.text-theme-muted { color: var(--text-muted); }
.border-theme { border-color: var(--border-color); }
.input-bg { background: var(--bg-input); }
.hover-bg:hover { background: var(--bg-hover); }
.shadow-theme { box-shadow: var(--shadow); }

/* Override Tailwind nip- colors to use CSS vars — these map the dark-only
   Tailwind values to proper theme-aware values */
.bg-nip-black { background: var(--bg-body) !important; }
.bg-nip-zinc1 { background: var(--bg-card) !important; }
.bg-nip-zinc2 { background: var(--bg-input) !important; }
.bg-nip-zinc3 { background: var(--bg-hover) !important; }
.bg-nip-zinc4 { background: var(--border-strong) !important; }
.text-nip-paper { color: var(--text-primary) !important; }
.text-nip-zinc4 { color: var(--text-secondary) !important; }
.text-nip-zinc3 { color: var(--text-muted) !important; }
.text-nip-zinc2 { color: var(--border-color) !important; }
.text-zinc-400 { color: var(--text-secondary) !important; }
.text-zinc-500 { color: var(--text-muted) !important; }
.border-nip-zinc2 { border-color: var(--border-color) !important; }
.border-nip-zinc3 { border-color: var(--border-strong) !important; }
.border-nip-zinc4 { border-color: var(--border-strong) !important; }
.border-nip-black { border-color: var(--border-color) !important; }
.hover\:bg-nip-zinc2:hover { background: var(--bg-hover) !important; }
.hover\:bg-nip-zinc3:hover { background: var(--bg-hover) !important; }
.hover\:bg-nip-zinc4:hover { background: var(--border-strong) !important; }
.hover\:border-nip-zinc4:hover { border-color: var(--border-strong) !important; }
.hover\:border-nip-yellow:hover { border-color: var(--nip-yellow) !important; }
.hover\:text-nip-paper:hover { color: var(--text-primary) !important; }
.hover\:text-nip-yellow:hover { color: var(--nip-yellow) !important; }

/* Semantic color overrides for theme awareness */
/* Yellow text: darker gold in light mode for readability, bright in dark mode */
.theme-light .text-nip-yellow { color: #9E7B00 !important; }
.theme-dark .text-nip-yellow { color: #FFD215 !important; }
.text-nip-red { color: var(--nip-red) !important; }
.text-nip-green { color: var(--nip-green) !important; }
.text-nip-blue { color: var(--nip-blue) !important; }
.bg-nip-yellow { background: var(--nip-yellow) !important; }
.bg-nip-red { background: var(--nip-red) !important; }
.border-nip-yellow { border-color: var(--nip-yellow) !important; }
.border-nip-red { border-color: var(--nip-red) !important; }

/* Button shadow fix — uses theme-aware shadow color */
.shadow-\[3px_3px_0_\#0A0A0A\] { box-shadow: 3px 3px 0 var(--btn-shadow) !important; }
.shadow-\[4px_4px_0_\#0A0A0A\] { box-shadow: 4px 4px 0 var(--btn-shadow) !important; }
.shadow-\[4px_4px_0_0_\#0A0A0A\] { box-shadow: 4px 4px 0 0 var(--btn-shadow) !important; }

/* Input fields — ensure they follow theme */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="url"],
textarea, select {
  color: var(--text-primary);
}
input::placeholder, textarea::placeholder {
  color: var(--text-muted);
}

/* Tables */
table { color: var(--text-primary); }
th { color: var(--text-secondary); }

* { box-sizing: border-box; }
html { font-family: 'Host Grotesk', system-ui, sans-serif; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

[x-cloak] { display: none !important; }

/* ── SCROLLBARS ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-card); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border: 2px solid var(--bg-card); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--nip-yellow); }

/* ── SELECTION ── */
::selection { background: var(--nip-yellow); color: var(--nip-black); }

/* ── CAROUSEL RAIL ── */
.carousel-rail {
  scrollbar-width: thin;
  scrollbar-color: var(--nip-zinc3) transparent;
}
.carousel-rail > * { scroll-snap-align: start; }

/* ── FOCUS VISIBLE ── */
*:focus-visible {
  outline: 2px solid var(--nip-yellow);
  outline-offset: 2px;
}
.flyer-card:focus-visible {
  border-color: var(--nip-yellow);
  outline: none;
  box-shadow: 0 0 0 2px var(--nip-yellow);
}

/* ── HEAVY HORIZONTAL RULE LOOK  ── */
.rule {
  height: 2px;
  background: var(--border-color);
}

/* ── EDITORIAL NUMBER TICKER (used in KPIs & countdown) ── */
.tabular { font-variant-numeric: tabular-nums; }

/* ── LINE CLAMP UTILITIES ── */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Skeleton shimmer — for card image loading ── */
.skeleton-shimmer {
  background: linear-gradient(
    90deg,
    var(--bg-input) 0%,
    var(--bg-hover) 50%,
    var(--bg-input) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── HTMX transitions ── soft card enter/leave ── */
.htmx-swapping { opacity: 0; transition: opacity 150ms ease-out; }
.htmx-settling { opacity: 1; }

@keyframes card-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-8px); }
}

/* ── Pipeline animations ── */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes count-up {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.phase-done { animation: slide-in-right 0.4s ease-out; }
.phase-running .phase-dot { animation: pulse-dot 1.2s ease-in-out infinite; }
.stat-value { animation: count-up 0.3s ease-out; }
#live-status-data { transition: opacity 0.2s ease; }

/* ── Pipeline phase row hover ── */
.phase-row { transition: background 0.15s ease; }
.phase-row:hover { background: var(--bg-hover); }

/* ── Icons follow theme ── */
[data-lucide] { color: var(--text-primary); }
.text-nip-yellow [data-lucide],
.icon-accent [data-lucide] { color: var(--nip-yellow) !important; }

/* ── Mobile utilities ── */
@media (max-width: 767px) {
  .overflow-x-auto { -webkit-overflow-scrolling: touch; }
  table { font-size: 0.8125rem; }
  table th, table td { padding: 0.375rem 0.5rem; }
}