/* CariTalent demo mockup — shared styles beyond Tailwind CDN */

:root {
  --midnight: #0A0F1D;
  --slate-deep: #1E293B;
  --ice: #F0F4F8;
  --primary: #2563EB;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background: var(--ice);
  color: #0f172a;
}

/* Candidate availability status — internal signal, hidden from employers/guests.
   app.js adds body.staff-view when the role is administrator or support. */
.staff-only { display: none !important; }
body.staff-view .staff-only { display: inline-flex !important; }

/* Block-level staff-only content (cards/sections; .staff-only forces inline-flex) */
.staff-block { display: none !important; }
body.staff-view .staff-block { display: block !important; }

/* Elements staff must NOT see (e.g. "Apply via platform" on the job board) */
body.staff-view .staff-hide { display: none !important; }

/* Staff sees locked contact data in the clear (directory cards & candidate profiles) */
body.staff-view .blurred {
  filter: none;
  user-select: auto;
  pointer-events: auto;
}

/* BORRADO 2026-08-15: el layout compacto del directorio para staff
   (body.staff-view #results > [data-candidate], filas en vez de tarjetas).
   Estaba roto y era una bomba de tiempo: las tarjetas de directory.astro
   llevan data-candidate-ID, no data-candidate, así que las reglas hijas nunca
   coincidieron — pero `body.staff-view #results { display:flex }` sí
   coincidía. Mientras la clase la ponía app.js desde localStorage nunca se
   notó; al pasar staff-view a server-side se habría activado sola y roto la
   grilla de /directory para admin y support: contenedor en columna flex con
   las tarjetas sin ninguna de las reglas que lo compensaban.
   Si el layout compacto se quiere de verdad, va en directory.astro con las
   utilidades de Tailwind y condicionado por el rol, no como override global. */

/* Locked contact info */
.blurred {
  filter: blur(5px);
  user-select: none;
  pointer-events: none;
}

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Subtle entrance animation */
.fade-up { animation: fadeUp .35s ease-out both; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* Modal */
.modal-backdrop { background: rgba(10, 15, 29, .65); backdrop-filter: blur(2px); }

/* Off-canvas drawer (dashboard sidebar on mobile) */
.drawer { transition: transform .25s ease; }
@media (max-width: 1023px) {
  .drawer { transform: translateX(-100%); }
  .drawer.open { transform: translateX(0); }
}

/* BORRADO 2026-08-15 (174 líneas): .stars, .table-scroll, el switcher de rol
   flotante (.role-toggle/.rt-*) y el chat flotante (.chat-*). Los cuatro
   tenían cero referencias en src/ — los dos últimos solo los usaba el chrome
   que app.js inyectaba, y ese inyector se borró en la misma tanda. El chat en
   particular se mostraba en producción en todas las páginas y contestaba con
   un texto enlatado por setTimeout, sin mandar nada a ningún lado; el soporte
   real vive en /support con tickets. */

/* ---------- Dark mode (html.dark, toggled via ct-theme) ----------
   Pages are authored light with Tailwind CDN utilities; rather than adding dark:
   variants to every class across 12+ static pages, the most common light-theme
   utilities are re-mapped here. Sections already on bg-midnight stay as-is. */

html.dark { background: #0A0F1D; color-scheme: dark; }
html.dark body { background: #0A0F1D; color: #E2E8F0; }

html.dark .bg-white { background-color: #111a2e !important; }
html.dark .bg-ice, html.dark .bg-slate-50, html.dark .bg-slate-100 { background-color: #0d1526 !important; }
html.dark .hover\:bg-slate-50:hover, html.dark .hover\:bg-slate-100:hover { background-color: #1a2740 !important; }

html.dark .text-midnight, html.dark .text-slate-900, html.dark .text-slate-800 { color: #F0F4F8 !important; }
html.dark .text-slate-700, html.dark .text-slate-600 { color: #B6C2D6 !important; }
html.dark .text-slate-500 { color: #8B99B0 !important; }
html.dark .text-slate-400 { color: #74839C !important; }

html.dark .border-slate-100, html.dark .border-slate-200, html.dark .border-slate-300 { border-color: #263450 !important; }
html.dark .divide-slate-100 > *, html.dark .divide-slate-200 > * { border-color: #263450 !important; }

html.dark .shadow-sm, html.dark .shadow, html.dark .shadow-md, html.dark .shadow-lg, html.dark .shadow-xl { box-shadow: 0 8px 24px rgba(0, 0, 0, .45) !important; }

/* Colored tint chips/panels (bg-*-50 with dark text) */
html.dark .bg-blue-50 { background-color: rgba(37, 99, 235, .15) !important; }
html.dark .bg-emerald-50, html.dark .bg-emerald-100 { background-color: rgba(16, 185, 129, .12) !important; }
html.dark .bg-amber-50 { background-color: rgba(245, 158, 11, .12) !important; }
html.dark .bg-violet-50 { background-color: rgba(139, 92, 246, .14) !important; }
html.dark .bg-rose-50 { background-color: rgba(244, 63, 94, .12) !important; }
html.dark .bg-sky-50 { background-color: rgba(14, 165, 233, .12) !important; }
html.dark .bg-slate-200 { background-color: #263450 !important; }
html.dark .bg-amber-100 { background-color: rgba(245, 158, 11, .18) !important; }
html.dark .bg-rose-100 { background-color: rgba(244, 63, 94, .18) !important; }
html.dark .border-amber-300 { border-color: rgba(245, 158, 11, .4) !important; }

/* Premium upsell card: light amber→white gradient becomes a dark amber wash */
html.dark .bg-gradient-to-r.from-amber-50 { background: linear-gradient(to right, rgba(245, 158, 11, .12), #111a2e) !important; }

/* Solid bright buttons keep dark text for contrast (text-midnight is lightened globally) */
html.dark .bg-amber-400.text-midnight, html.dark .bg-amber-300.text-midnight,
html.dark .hover\:bg-amber-300:hover.text-midnight { color: #0A0F1D !important; }
html.dark .border-blue-100, html.dark .border-blue-200 { border-color: rgba(59, 130, 246, .35) !important; }
html.dark .border-emerald-100, html.dark .border-emerald-200 { border-color: rgba(16, 185, 129, .35) !important; }
html.dark .border-amber-100, html.dark .border-amber-200 { border-color: rgba(245, 158, 11, .35) !important; }
html.dark .border-violet-100, html.dark .border-violet-200 { border-color: rgba(139, 92, 246, .35) !important; }
html.dark .border-rose-100, html.dark .border-rose-200 { border-color: rgba(244, 63, 94, .35) !important; }
html.dark .text-blue-700, html.dark .text-blue-800, html.dark .text-blue-900 { color: #93c5fd !important; }
html.dark .text-emerald-700, html.dark .text-emerald-800 { color: #6ee7b7 !important; }
html.dark .text-amber-700, html.dark .text-amber-800 { color: #fcd34d !important; }
html.dark .text-violet-700, html.dark .text-violet-800 { color: #c4b5fd !important; }
html.dark .text-violet-900\/80 { color: rgba(196, 181, 253, .85) !important; }
html.dark .text-blue-900\/80, html.dark .text-blue-900\/70 { color: rgba(147, 197, 253, .85) !important; }
html.dark .text-rose-700 { color: #fda4af !important; }
html.dark .border-sky-100, html.dark .border-sky-200 { border-color: rgba(14, 165, 233, .35) !important; }
html.dark .text-sky-700, html.dark .text-sky-800 { color: #7dd3fc !important; }

/* Form controls */
html.dark input, html.dark select, html.dark textarea {
  background-color: #0d1526 !important;
  color: #E2E8F0 !important;
  border-color: #334155 !important;
}
html.dark input::placeholder, html.dark textarea::placeholder { color: #64748b; }
html.dark input[type="file"]::file-selector-button { background-color: rgba(37, 99, 235, .2); color: #93c5fd; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}