@tailwind base;
@tailwind components;
@tailwind utilities;

/* ---------------------------------------------------------------------------
 * @layer base — global element styling.
 * Why: keeps focus, scrollbars, and color-scheme decisions centralized so
 * every page inherits accessible defaults without per-component overrides.
 * ------------------------------------------------------------------------ */
@layer base {
  html {
    /* Tells the UA which form-control palette to use (date pickers, scrollbars
       on Firefox, autofill colors). Updated by theme_controller.js when dark
       class flips. */
    color-scheme: light;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
  }

  html.dark {
    color-scheme: dark;
  }

  body {
    @apply bg-slate-50 text-slate-900 antialiased;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  }

  html.dark body {
    @apply bg-slate-950 text-slate-100;
  }

  /* Visible focus ring — never strip outlines; we replace with a stronger ring
     for keyboard users only (focus-visible). Critical for WCAG 2.4.7. */
  :focus-visible {
    @apply outline-none ring-2 ring-primary-500 ring-offset-2 ring-offset-white;
  }

  html.dark :focus-visible {
    @apply ring-offset-slate-900;
  }

  /* Thin scrollbar on WebKit/Blink — Stripe-like discreet rails. */
  ::-webkit-scrollbar {
    @apply w-2 h-2;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-slate-300 rounded;
  }

  html.dark ::-webkit-scrollbar-thumb {
    @apply bg-slate-700;
  }

  ::-webkit-scrollbar-track {
    @apply bg-transparent;
  }

  /* Force a sensible heading hierarchy without relying on prose plugin
     (which is reserved for /docs/help content). */
  h1, h2, h3, h4 {
    @apply font-semibold tracking-tight text-slate-900;
  }

  html.dark h1,
  html.dark h2,
  html.dark h3,
  html.dark h4 {
    @apply text-slate-50;
  }
}

/* ---------------------------------------------------------------------------
 * @layer components — reusable utility classes composed from Tailwind.
 *
 * Rule of thumb: only add a component class here if (a) the pattern repeats
 * in 3+ places AND (b) the @apply expansion would otherwise leak ~5+ classes
 * into the markup. Keep markup readable; do not turn the codebase into BEM.
 * ------------------------------------------------------------------------ */
@layer components {
  /* --- Buttons ----------------------------------------------------------- */
  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm font-medium
           transition-colors duration-150 disabled:opacity-50 disabled:cursor-not-allowed
           focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
  }

  .btn-primary {
    @apply btn bg-primary-600 text-white shadow-sm hover:bg-primary-700
           focus-visible:ring-primary-500 focus-visible:ring-offset-white;
  }

  .btn-secondary {
    @apply btn bg-white text-slate-700 border border-slate-200 shadow-sm hover:bg-slate-50
           focus-visible:ring-slate-400 focus-visible:ring-offset-white;
  }

  html.dark .btn-secondary {
    @apply bg-slate-800 text-slate-100 border-slate-700 hover:bg-slate-700
           focus-visible:ring-offset-slate-900;
  }

  .btn-ghost {
    @apply btn bg-transparent text-slate-600 hover:bg-slate-100 hover:text-slate-900
           focus-visible:ring-slate-300;
  }

  html.dark .btn-ghost {
    @apply text-slate-300 hover:bg-slate-800 hover:text-white;
  }

  .btn-danger {
    @apply btn bg-red-600 text-white shadow-sm hover:bg-red-700 focus-visible:ring-red-500;
  }

  /* --- Form inputs ------------------------------------------------------- */
  /* @tailwindcss/forms provides the baseline; .input-base adds the brand look. */
  .input-base {
    @apply block w-full rounded-lg border-slate-300 bg-white text-slate-900 shadow-sm
           placeholder:text-slate-400
           focus:border-primary-500 focus:ring-primary-500
           disabled:bg-slate-50 disabled:text-slate-500 sm:text-sm;
  }

  html.dark .input-base {
    @apply bg-slate-900 border-slate-700 text-slate-100 placeholder:text-slate-500
           focus:border-primary-400 focus:ring-primary-400;
  }

  .label-base {
    @apply block text-sm font-medium text-slate-700 mb-1.5;
  }

  html.dark .label-base {
    @apply text-slate-200;
  }

  .form-error {
    @apply mt-1.5 text-sm text-red-600;
  }

  /* --- Surfaces ---------------------------------------------------------- */
  .card {
    @apply rounded-xl border border-slate-200 bg-white shadow-soft p-6;
  }

  html.dark .card {
    @apply bg-slate-900 border-slate-800;
  }

  .stat-card {
    @apply card flex flex-col gap-2;
  }

  /* --- Badges ------------------------------------------------------------ */
  .badge {
    @apply inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium;
  }

  .badge-neutral {
    @apply badge bg-slate-100 text-slate-700;
  }

  html.dark .badge-neutral {
    @apply bg-slate-800 text-slate-300;
  }

  .badge-success {
    @apply badge bg-accent-100 text-accent-700;
  }

  html.dark .badge-success {
    @apply bg-accent-700/20 text-accent-100;
  }

  .badge-warning {
    @apply badge bg-amber-100 text-amber-700;
  }

  html.dark .badge-warning {
    @apply bg-amber-700/20 text-amber-100;
  }

  .badge-danger {
    @apply badge bg-red-100 text-red-700;
  }

  html.dark .badge-danger {
    @apply bg-red-700/20 text-red-100;
  }

  /* --- Sidebar nav links -------------------------------------------------
     Note: the markup adds `group` directly (it's a marker class — Tailwind
     forbids @applying it). Hover states on the icon are handled via
     `.sidebar-link:hover svg` selectors below to avoid `group-hover:` in
     @apply, which the standalone CLI rejects. */
  .sidebar-link {
    @apply flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium
           text-slate-600 hover:bg-slate-100 hover:text-slate-900 transition-colors;
  }

  .sidebar-link svg {
    @apply h-5 w-5 text-slate-400 shrink-0 transition-colors;
  }

  .sidebar-link:hover svg {
    @apply text-slate-600;
  }

  html.dark .sidebar-link {
    @apply text-slate-400 hover:bg-slate-800 hover:text-white;
  }

  html.dark .sidebar-link svg {
    @apply text-slate-500;
  }

  html.dark .sidebar-link:hover svg {
    @apply text-slate-200;
  }

  .sidebar-link-active {
    @apply bg-primary-50 text-primary-700;
  }

  .sidebar-link-active svg {
    @apply text-primary-600;
  }

  html.dark .sidebar-link-active {
    @apply bg-primary-900/30 text-primary-200;
  }

  html.dark .sidebar-link-active svg {
    @apply text-primary-300;
  }

  /* --- Auth card (Devise) ------------------------------------------------ */
  .auth-card {
    @apply w-full max-w-md rounded-2xl bg-white shadow-xl ring-1 ring-slate-900/5 p-8;
  }

  html.dark .auth-card {
    @apply bg-slate-900 ring-white/10;
  }

  /* --- Toast / flash ----------------------------------------------------- */
  .toast {
    @apply pointer-events-auto flex items-start gap-3 rounded-lg border p-4 shadow-soft
           transition-all duration-200;
  }

  .toast-notice {
    @apply toast bg-accent-50 border-accent-200 text-accent-700;
  }

  .toast-alert {
    @apply toast bg-red-50 border-red-200 text-red-700;
  }
}