/* Premium tiny touches */

/* Default theme is LIGHT */
:root { color-scheme: light; }

/* Dark theme (when theme-light class is NOT present) */
:root:not(.theme-light) { color-scheme: dark; }

/* Ambient blobs (light by default) */
.ambient .blob-a{ background: rgba(99,102,241,0.22); }
.ambient .blob-b{ background: rgba(34,211,238,0.18); }
.ambient .blob-c{ background: rgba(217,70,239,0.12); }
.stars{ opacity: 0.0; }

/* Auth page blobs (light-first, premium) */
.auth-blob-a{ background: rgba(99,102,241,0.18); }
.auth-blob-b{ background: rgba(34,211,238,0.14); }
.auth-blob-c{ background: rgba(217,70,239,0.10); }
:root:not(.theme-light) .auth-blob-a{ background: rgba(217,70,239,0.26); }
:root:not(.theme-light) .auth-blob-b{ background: rgba(34,211,238,0.18); }
:root:not(.theme-light) .auth-blob-c{ background: rgba(99,102,241,0.16); }

:root:not(.theme-light) .ambient .blob-a{ background: rgba(217,70,239,0.30); }
:root:not(.theme-light) .ambient .blob-b{ background: rgba(34,211,238,0.20); }
:root:not(.theme-light) .ambient .blob-c{ background: rgba(99,102,241,0.15); }
:root:not(.theme-light) .stars{ opacity: 0.40; }

/* LIGHT theme (default) — brighter, premium */
.theme-light body{
  background: radial-gradient(1200px 700px at 20% 0%, rgba(99,102,241,0.12), transparent 55%),
              radial-gradient(1200px 700px at 90% 10%, rgba(34,211,238,0.10), transparent 55%),
              radial-gradient(1200px 700px at 50% 100%, rgba(217,70,239,0.07), transparent 55%),
              #F7F8FC !important;
  color: #0B1220 !important;
}

/* Light theme should never look "washed" — enforce readable defaults */
.theme-light{
  --js-bg: #F7F8FC;
  --js-surface: rgba(255,255,255,0.86);
  --js-surface-2: rgba(255,255,255,0.74);
  --js-border: rgba(15,23,42,0.10);
  --js-border-strong: rgba(15,23,42,0.14);
  --js-text: rgba(15,23,42,0.92);
  --js-muted: rgba(15,23,42,0.70);
  --js-muted-2: rgba(15,23,42,0.58);
  --js-shadow: 0 24px 60px rgba(15,23,42,0.10);
  --js-shadow-strong: 0 30px 80px rgba(15,23,42,0.14);
}
.theme-light header{
  background: rgba(255,255,255,0.72) !important;
  border-bottom-color: rgba(15,23,42,0.10) !important;
}

/* Header controls: crisp in light */
.theme-light header a,
.theme-light header button{
  border-color: rgba(15,23,42,0.10) !important;
}
.theme-light header a:hover,
.theme-light header button:hover{
  background: rgba(15,23,42,0.04) !important;
}
.theme-light .glass,
.theme-light .card{
  background: linear-gradient(180deg, var(--js-surface), var(--js-surface-2)) !important;
  border-color: var(--js-border) !important;
  box-shadow: var(--js-shadow) !important;
}
.theme-light .card:hover{
  border-color: rgba(99,102,241,0.25) !important;
  box-shadow: var(--js-shadow-strong) !important;
}
.theme-light .btn-ghost,
.theme-light .input{
  background: rgba(255,255,255,0.85) !important;
  border-color: rgba(15,23,42,0.12) !important;
}
.theme-light .btn-ghost:hover{ background: rgba(15,23,42,0.04) !important; }
.theme-light .chip{
  background: rgba(255,255,255,0.70) !important;
  border-color: var(--js-border) !important;
  color: var(--js-text) !important;
}

/* Fix low-contrast Tailwind utilities used across templates (light theme only) */
.theme-light [class*="text-slate-100"],
.theme-light [class*="text-slate-900"],
.theme-light [class*="text-slate-950"]{
  color: var(--js-text) !important;
}
.theme-light [class*="text-slate-200"]{
  color: var(--js-muted) !important;
}
.theme-light [class*="text-slate-300"]{
  color: var(--js-muted-2) !important;
}

/* Surfaces/borders that were tuned for dark mode */
.theme-light [class*="bg-white/5"],
.theme-light [class*="bg-white/7"],
.theme-light [class*="bg-white/10"]{
  background: rgba(15,23,42,0.03) !important;
}
.theme-light [class*="border-white/10"],
.theme-light [class*="border-white/12"],
.theme-light [class*="border-white/5"]{
  border-color: var(--js-border) !important;
}

/* Hero gradient text: darker in light mode so it reads well */
.theme-light .hero-gradient-text{
  background-image: linear-gradient(90deg, #4F46E5 0%, #06B6D4 45%, #10B981 100%) !important;
}

/* Skeleton in light mode needs subtle gray, not dark glass */
.theme-light .skeleton{
  background: rgba(15,23,42,0.04) !important;
  border-color: rgba(15,23,42,0.08) !important;
}
.theme-light .skeleton::after{
  background: linear-gradient(90deg, rgba(15,23,42,0) 0%, rgba(15,23,42,0.08) 50%, rgba(15,23,42,0) 100%) !important;
}
.theme-light .text-slate-300,
.theme-light .text-slate-300\/80,
.theme-light .text-slate-200,
.theme-light .text-slate-200\/70{
  color: var(--js-muted) !important;
}

/* DARK theme overrides */
:root:not(.theme-light) body{
  background: #020617 !important;
  color: #e2e8f0 !important;
}
:root:not(.theme-light) header{
  background: rgba(2,6,23,0.55) !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
}

.glass{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
}

.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem 1.1rem; border-radius: 1.25rem;
  background: linear-gradient(135deg, rgba(217,70,239,.95), rgba(34,211,238,.9));
  color: rgba(2,6,23,1);
  font-weight: 800;
  box-shadow: 0 20px 40px rgba(217,70,239,.18);
  transition: transform .2s ease, filter .2s ease;
}
.btn-primary:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.btn-primary:active{ transform: translateY(0px) scale(.99); }

.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.85rem 1.1rem; border-radius: 1.25rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  font-weight: 700;
  transition: background .2s ease, transform .2s ease;
}
.btn-ghost:hover{ background: rgba(255,255,255,.08); transform: translateY(-1px); }
.btn-ghost:active{ transform: translateY(0px) scale(.99); }

.card{
  border-radius: 1.75rem;
  padding: 1.25rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 30px 60px rgba(0,0,0,0.25);
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.card:hover{
  transform: translateY(-3px);
  border-color: rgba(34,211,238,0.28);
  background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.03));
}

.chip{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.35rem .7rem; border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  font-size: .75rem;
  color: rgba(226,232,240,.9);
}

/* line-clamp fallback */
.line-clamp-3{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Input styling */
.input{
  width:100%;
  border-radius: 1.25rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  padding: .9rem 1rem;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.input:focus{
  border-color: rgba(34,211,238,.45);
  box-shadow: 0 0 0 6px rgba(34,211,238,.10);
  background: rgba(255,255,255,.05);
}

.textarea{ min-height: 110px; resize: vertical; }

/* Admin */
.admin-shell{
  min-height: calc(100vh - 64px);
}

.sidebar{
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.10);
}

.neon-divider{
  height:1px;
  background: linear-gradient(90deg, rgba(217,70,239,0), rgba(217,70,239,.65), rgba(34,211,238,.55), rgba(217,70,239,0));
}

/* Language menu styling in light */
.theme-light .lang-menu{
  background: rgba(255,255,255,0.92) !important;
  border-color: rgba(15,23,42,0.12) !important;
  box-shadow: 0 22px 60px rgba(15,23,42,0.14) !important;
}
.theme-light .lang-menu a:hover{ background: rgba(15,23,42,0.04) !important; }


.chip-soft{ background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); }

/* Hover depth effect */
.card-depth{
  box-shadow: 0 18px 45px rgba(0,0,0,0.28);
  transform: translateY(0);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card-depth:hover{
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 28px 70px rgba(0,0,0,0.35);
  border-color: rgba(217,70,239,0.25);
}

/* Micro animations
   Make content readable even if JS fails to load.
   - Default: visible
   - When <html> has .js: run reveal animation
*/
/*
  Reveal animations MUST NEVER hide content.
  Previous builds set opacity:0 until IntersectionObserver ran, causing
  a flash/disappear effect on slower devices or race conditions.

  Rule: keep content visible by default; only animate transform subtly.
*/
.reveal{ opacity: 1; transform: none; }
.js .reveal{ opacity: 1; transform: translateY(10px); }
.js .reveal.revealed{ opacity: 1; transform: translateY(0); transition: transform .6s ease; }

/* Skeleton loading */
.skeleton{
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}
.skeleton::after{
  content:'';
  position:absolute; inset:0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0) 100%);
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer{ 100%{ transform: translateX(100%); } }

/* Status pills */
.status-pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding: .35rem .7rem; border-radius: 999px;
  font-size: .75rem; font-weight: 800;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
}
.status-pending{ border-color: rgba(250,204,21,0.25); background: rgba(250,204,21,0.10); }
.status-under_review{ border-color: rgba(56,189,248,0.25); background: rgba(56,189,248,0.10); }
.status-interview{ border-color: rgba(167,139,250,0.25); background: rgba(167,139,250,0.10); }
.status-accepted{ border-color: rgba(34,197,94,0.25); background: rgba(34,197,94,0.10); }
.status-rejected{ border-color: rgba(244,63,94,0.25); background: rgba(244,63,94,0.10); }