/* JuliaNova dark-navy theme — palette adapted from the Video repo.
 *
 * The app's templates are Tailwind CDN-utility based. This stylesheet
 * re-skins the most-used utility classes (bg-white, text-slate-*, border,
 * inputs, etc.) without changing the markup. Tailwind utilities still work
 * — they just paint in the dark palette. Status colors (emerald / red /
 * amber) stay vivid because their meaning is semantic, not aesthetic.
 */

:root {
  --jn-bg-gradient: linear-gradient(135deg, #001229 0%, #002a5c 40%, #003d80 70%, #004c99 100%);
  --jn-surface: #002244;          /* primary card / nav bg */
  --jn-surface-2: #00305a;        /* nested cards, hover */
  --jn-surface-3: #001a33;        /* sunken (inputs, codeblocks) */
  --jn-border: #003366;
  --jn-border-soft: rgba(0, 76, 153, 0.4);
  --jn-text: #e2e8f0;
  --jn-text-muted: #b0c4de;
  --jn-text-faint: #8a8d8f;
  --jn-accent: #004c99;
  --jn-accent-hover: #0066cc;
  --jn-link: #4da6ff;
  --jn-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

/* ---- Base body ---- */
html,
body {
  background: var(--jn-bg-gradient) !important;
  background-attachment: fixed !important;
  color: var(--jn-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tailwind's default body bg-slate-50 → transparent so the gradient shows. */
body.bg-slate-50 {
  background: var(--jn-bg-gradient) !important;
}

/* ---- Surfaces ---- */
/* Tailwind's bg-white → dark navy card. */
.bg-white {
  background-color: var(--jn-surface) !important;
  color: var(--jn-text) !important;
  border: 1px solid var(--jn-border);
}

.shadow,
.shadow-lg,
.shadow-xl {
  box-shadow: var(--jn-shadow) !important;
}

.bg-slate-50 {
  background-color: var(--jn-surface-3) !important;
  color: var(--jn-text) !important;
}
.bg-slate-100 {
  background-color: var(--jn-surface-3) !important;
  color: var(--jn-text) !important;
}
.bg-slate-200 {
  background-color: var(--jn-surface-2) !important;
}

/* Inline <code> chips and <pre> blocks. */
code,
pre {
  background-color: var(--jn-surface-3) !important;
  color: var(--jn-text) !important;
  border-radius: 4px;
}

/* ---- Borders ---- */
.border,
.border-t,
.border-b,
.border-l,
.border-r {
  border-color: var(--jn-border) !important;
}
.border-slate-200,
.border-slate-300,
.border-slate-400 {
  border-color: var(--jn-border) !important;
}
.divide-y > * + * {
  border-top-color: var(--jn-border) !important;
}

/* ---- Text ---- */
.text-slate-900,
.text-slate-800,
.text-slate-700 {
  color: var(--jn-text) !important;
}
.text-slate-600 {
  color: var(--jn-text-muted) !important;
}
.text-slate-500,
.text-slate-400 {
  color: var(--jn-text-faint) !important;
}

/* Links / interactive text. */
a {
  color: var(--jn-link);
}
.text-indigo-600,
.text-indigo-700 {
  color: var(--jn-link) !important;
}
.hover\:text-indigo-600:hover,
.hover\:text-indigo-700:hover {
  color: #66b8ff !important;
}

/* ---- Inputs ---- */
input,
textarea,
select {
  background-color: var(--jn-surface-3) !important;
  color: var(--jn-text) !important;
  border: 1px solid var(--jn-border) !important;
}
input::placeholder,
textarea::placeholder {
  color: rgba(176, 196, 222, 0.45) !important;
}
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--jn-link);
  outline-offset: -1px;
}
select option {
  background: var(--jn-surface) !important;
  color: var(--jn-text) !important;
}

/* ---- Buttons ---- */
button.bg-indigo-600,
.bg-indigo-600 {
  background-color: var(--jn-accent) !important;
  color: #ffffff !important;
}
button.hover\:bg-indigo-700:hover,
.hover\:bg-indigo-700:hover {
  background-color: var(--jn-accent-hover) !important;
}

button.bg-emerald-600,
.bg-emerald-600 {
  background-color: #059669 !important;
}
button.hover\:bg-emerald-700:hover,
.hover\:bg-emerald-700:hover {
  background-color: #047857 !important;
}

/* Slate / cancel buttons. */
.bg-slate-200,
.bg-slate-400 {
  background-color: var(--jn-surface-2) !important;
  color: var(--jn-text) !important;
}
.hover\:bg-slate-300:hover {
  background-color: var(--jn-accent) !important;
  color: #ffffff !important;
}

/* ---- Hover row tint for tables / list rows ---- */
.hover\:bg-slate-50:hover,
.hover\:bg-slate-100:hover {
  background-color: var(--jn-border-soft) !important;
}

/* ---- Status-tinted pills + alert backgrounds ---------------------- *
 * Tailwind's bg-{color}-{50,100,200} are pastel light tints meant for a
 * light theme. On our dark background they wash out and the matching
 * text (text-{color}-700) becomes unreadable. Override each to a low-alpha
 * tint that reads on dark, and use a brightened text color so the pill
 * still carries its semantic meaning.
 */

/* === Backgrounds === */
.bg-red-50      { background-color: rgba(239, 68, 68,  0.10) !important; }
.bg-red-100     { background-color: rgba(239, 68, 68,  0.22) !important; }
.bg-red-200     { background-color: rgba(239, 68, 68,  0.30) !important; }

.bg-emerald-50,
.bg-green-50    { background-color: rgba(16, 185, 129, 0.10) !important; }
.bg-emerald-100,
.bg-green-100   { background-color: rgba(16, 185, 129, 0.22) !important; }
.bg-emerald-200,
.bg-green-200   { background-color: rgba(16, 185, 129, 0.30) !important; }

.bg-amber-50,
.bg-yellow-50   { background-color: rgba(245, 158, 11, 0.10) !important; }
.bg-amber-100,
.bg-yellow-100  { background-color: rgba(245, 158, 11, 0.22) !important; }
.bg-amber-200,
.bg-yellow-200  { background-color: rgba(245, 158, 11, 0.30) !important; }

.bg-blue-50     { background-color: rgba(77, 166, 255, 0.10) !important; }
.bg-blue-100    { background-color: rgba(77, 166, 255, 0.22) !important; }
.bg-blue-200    { background-color: rgba(77, 166, 255, 0.30) !important; }

.bg-violet-50   { background-color: rgba(139, 92, 246, 0.10) !important; }
.bg-violet-100  { background-color: rgba(139, 92, 246, 0.22) !important; }
.bg-violet-200  { background-color: rgba(139, 92, 246, 0.30) !important; }

.bg-teal-50     { background-color: rgba(20, 184, 166, 0.10) !important; }
.bg-teal-100    { background-color: rgba(20, 184, 166, 0.22) !important; }
.bg-teal-200    { background-color: rgba(20, 184, 166, 0.30) !important; }

.bg-rose-50     { background-color: rgba(244, 63, 94,  0.10) !important; }
.bg-rose-100    { background-color: rgba(244, 63, 94,  0.22) !important; }
.bg-rose-200    { background-color: rgba(244, 63, 94,  0.30) !important; }

.bg-indigo-50   { background-color: rgba(99, 102, 241, 0.10) !important; }
.bg-indigo-100  { background-color: rgba(99, 102, 241, 0.30) !important; }

.bg-slate-100   { background-color: rgba(148, 163, 184, 0.18) !important; }
.bg-slate-200   { background-color: rgba(148, 163, 184, 0.26) !important; }

/* === Text on those pills — readable against the 0.22-alpha tints above === */
.text-red-500,
.text-red-600,
.text-red-700     { color: #fca5a5 !important; }

.text-emerald-500,
.text-emerald-600,
.text-emerald-700,
.text-green-500,
.text-green-600,
.text-green-700   { color: #86efac !important; }

.text-amber-500,
.text-amber-600,
.text-amber-700,
.text-yellow-500,
.text-yellow-600,
.text-yellow-700  { color: #fcd34d !important; }

.text-blue-500,
.text-blue-600,
.text-blue-700    { color: #93c5fd !important; }

.text-violet-500,
.text-violet-600,
.text-violet-700  { color: #c4b5fd !important; }

.text-teal-500,
.text-teal-600,
.text-teal-700    { color: #5eead4 !important; }

.text-rose-500,
.text-rose-600,
.text-rose-700    { color: #fda4af !important; }

/* ---- Top nav bar ---- */
nav.bg-white {
  background-color: var(--jn-surface) !important;
  border-bottom: 1px solid var(--jn-border) !important;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--jn-surface-3); }
::-webkit-scrollbar-thumb {
  background: var(--jn-accent);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--jn-accent-hover); }

/* ---- Tables ---- */
table thead {
  background-color: var(--jn-surface-3) !important;
}
table thead th {
  color: var(--jn-text-faint) !important;
}

/* ---- Card with border-l-4 (preset cards) — keep the colored band, darken the body. */
[class*="border-l-4"][class*="bg-red-50"] { background-color: rgba(239, 68, 68, 0.10) !important; }
[class*="border-l-4"][class*="bg-emerald-50"],
[class*="border-l-4"][class*="bg-green-50"] { background-color: rgba(16, 185, 129, 0.10) !important; }
[class*="border-l-4"][class*="bg-blue-50"] { background-color: rgba(77, 166, 255, 0.10) !important; }
[class*="border-l-4"][class*="bg-slate-50"] { background-color: var(--jn-surface-2) !important; }
[class*="border-l-4"][class*="bg-violet-50"] { background-color: rgba(139, 92, 246, 0.10) !important; }
[class*="border-l-4"][class*="bg-amber-50"] { background-color: rgba(245, 158, 11, 0.10) !important; }
[class*="border-l-4"][class*="bg-teal-50"] { background-color: rgba(20, 184, 166, 0.10) !important; }
[class*="border-l-4"][class*="bg-rose-50"] { background-color: rgba(244, 63, 94, 0.10) !important; }