/* Intel X78 — design system + light/dark theme (Tailwind CDN handles utilities) */

/* ---- Theme tokens ---------------------------------------------------------
   The Tailwind config maps bg-bg -> var(--bg), bg-card -> var(--surface),
   border-line -> var(--border); those follow the theme automatically.
   Hardcoded zinc utilities in views are remapped for light mode below. */
:root,
:root[data-theme="dark"] {
  --bg: #09090b;
  --surface: #18181b;
  --surface-2: #1f1f23;
  --border: #27272a;
  --text: #f4f4f5;
  --muted: #a1a1aa;
  --input-bg: #0c0c0f;
  --input-text: #f4f4f5;
  --input-border: #3f3f46;
  --accent: #6366f1;
  --shadow: 0 12px 30px -12px rgba(0,0,0,.7);
}

:root[data-theme="light"] {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #f1f5f9;
  --border: #e4e7ec;
  --text: #0f172a;
  --muted: #5b6472;
  --input-bg: #ffffff;
  --input-text: #0f172a;
  --input-border: #cbd5e1;
  --accent: #6366f1;
  --shadow: 0 10px 26px -14px rgba(15,23,42,.25);
}

html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); }
[x-cloak] { display: none !important; }

/* Theme toggle icon: show moon in dark, sun in light */
:root[data-theme="dark"]  .theme-icon-sun  { display: none; }
:root[data-theme="light"] .theme-icon-moon { display: none; }
/* Smooth theme transition on the big surfaces */
body, .card, aside, header, input, textarea, select, .gradient-border { transition: background-color .25s ease, border-color .25s ease, color .25s ease; }

/* ---- Form controls: always readable in BOTH themes ------------------------ */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
textarea,
select {
  background-color: var(--input-bg) !important;
  color: var(--input-text) !important;
  border-color: var(--input-border) !important;
}
input::placeholder, textarea::placeholder { color: var(--muted) !important; opacity: .75; }
input:focus, textarea:focus, select:focus { border-color: var(--accent) !important; }
select option { background: var(--surface); color: var(--text); }

/* ---- Scrollbar ------------------------------------------------------------ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #8884; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #8888; }

/* ---- Cards ---------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
}
:root[data-theme="dark"] .card {
  background: linear-gradient(180deg, rgba(24,24,27,.9), rgba(20,20,23,.9));
}
.card-hover { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.card-hover:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--border) 60%, var(--accent) 40%); }

.gradient-border { position: relative; background: var(--surface); border-radius: 1rem; }
.gradient-border::before {
  content: ""; position: absolute; inset: 0; padding: 1px; border-radius: 1rem;
  background: linear-gradient(135deg, rgba(99,102,241,.6), rgba(99,102,241,0) 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}

/* ---- Effects -------------------------------------------------------------- */
@keyframes shimmer { 100% { transform: translateX(100%); } }
.shimmer { position: relative; overflow: hidden; }
.shimmer::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(127,127,127,.15), transparent); animation: shimmer 1.5s infinite; }
.skeleton { background: var(--surface-2); border-radius: .5rem; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fade-in { animation: fadeInUp .35s ease both; }
.row-fade { animation: fadeInUp .3s ease both; }
.typing span { display: inline-block; width: 6px; height: 6px; margin: 0 1px; background: var(--muted); border-radius: 50%; animation: blink 1.2s infinite both; }
.typing span:nth-child(2) { animation-delay: .2s; } .typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,80%,100% { opacity: .2; } 40% { opacity: 1; } }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.toast { animation: fadeInUp .3s ease both; }

/* ---- Timeline ------------------------------------------------------------- */
.timeline { position: relative; padding-left: 1.25rem; }
.timeline::before { content: ""; position: absolute; left: 5px; top: 4px; bottom: 4px; width: 2px; background: var(--border); }
.timeline-dot { position: absolute; left: -1.25rem; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }

/* ---- Badges (dark defaults) ----------------------------------------------- */
.badge { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 600; border: 1px solid transparent; }
.badge-gray   { background: rgba(161,161,170,.12); color: #d4d4d8; border-color: rgba(161,161,170,.2); }
.badge-blue   { background: rgba(99,102,241,.14); color: #a5b4fc; border-color: rgba(99,102,241,.3); }
.badge-green  { background: rgba(34,197,94,.14);  color: #86efac; border-color: rgba(34,197,94,.3); }
.badge-amber  { background: rgba(245,158,11,.14); color: #fcd34d; border-color: rgba(245,158,11,.3); }
.badge-red    { background: rgba(239,68,68,.14);  color: #fca5a5; border-color: rgba(239,68,68,.3); }
.badge-violet { background: rgba(139,92,246,.14); color: #c4b5fd; border-color: rgba(139,92,246,.3); }
.badge-sky    { background: rgba(56,189,248,.14); color: #7dd3fc; border-color: rgba(56,189,248,.3); }

/* =====================================================================
   LIGHT THEME remaps for hardcoded utility classes used across the views.
   !important guarantees these win over Tailwind CDN utilities.
   ===================================================================== */
:root[data-theme="light"] .text-white,
:root[data-theme="light"] .text-zinc-100,
:root[data-theme="light"] .text-zinc-200,
:root[data-theme="light"] .text-zinc-300 { color: var(--text) !important; }

:root[data-theme="light"] .text-zinc-400,
:root[data-theme="light"] .text-zinc-500,
:root[data-theme="light"] .text-zinc-600,
:root[data-theme="light"] .text-zinc-700 { color: var(--muted) !important; }

:root[data-theme="light"] .bg-zinc-900,
:root[data-theme="light"] .bg-zinc-950,
:root[data-theme="light"] [class*="bg-zinc-9"] { background-color: var(--surface) !important; }

:root[data-theme="light"] .bg-white\/5,
:root[data-theme="light"] .bg-white\/10,
:root[data-theme="light"] .hover\:bg-white\/5:hover,
:root[data-theme="light"] .hover\:bg-white\/10:hover { background-color: rgba(15,23,42,.05) !important; }

:root[data-theme="light"] .border-zinc-600,
:root[data-theme="light"] .border-zinc-700,
:root[data-theme="light"] .border-zinc-800 { border-color: var(--border) !important; }

/* Accent / semantic text contrast on light backgrounds */
:root[data-theme="light"] .text-accent,
:root[data-theme="light"] .text-indigo-200,
:root[data-theme="light"] .text-indigo-300,
:root[data-theme="light"] .text-indigo-400,
:root[data-theme="light"] .text-indigo-500 { color: #4f46e5 !important; }
:root[data-theme="light"] .text-red-300,
:root[data-theme="light"] .text-red-400   { color: #dc2626 !important; }
:root[data-theme="light"] .text-amber-300,
:root[data-theme="light"] .text-amber-400 { color: #b45309 !important; }
:root[data-theme="light"] .text-emerald-300,
:root[data-theme="light"] .text-emerald-400 { color: #059669 !important; }
:root[data-theme="light"] .text-sky-400    { color: #0284c7 !important; }
:root[data-theme="light"] .text-violet-400 { color: #7c3aed !important; }
:root[data-theme="light"] .text-pink-400   { color: #db2777 !important; }

/* Badges on light */
:root[data-theme="light"] .badge-gray   { color: #3f3f46; background: rgba(100,116,139,.12); border-color: rgba(100,116,139,.22); }
:root[data-theme="light"] .badge-blue   { color: #4338ca; background: rgba(99,102,241,.12); border-color: rgba(99,102,241,.25); }
:root[data-theme="light"] .badge-green  { color: #15803d; background: rgba(34,197,94,.15);  border-color: rgba(34,197,94,.3); }
:root[data-theme="light"] .badge-amber  { color: #92400e; background: rgba(245,158,11,.18); border-color: rgba(245,158,11,.35); }
:root[data-theme="light"] .badge-red    { color: #b91c1c; background: rgba(239,68,68,.12);  border-color: rgba(239,68,68,.3); }
:root[data-theme="light"] .badge-violet { color: #6d28d9; background: rgba(139,92,246,.12); }
:root[data-theme="light"] .badge-sky    { color: #0369a1; background: rgba(56,189,248,.14); }

/* Buttons that use bg-indigo stay legible (white text) in both themes. */
:root[data-theme="light"] .text-zinc-600.hover\:text-white:hover { color: var(--text) !important; }