/* ============================================================================
   InovaVet — Camada de compatibilidade Tailwind → Tokens (somente dark mode)

   Por que existe: o projeto usa Tailwind Play CDN com classes hardcoded
   (bg-white, text-slate-*, border-slate-*, badges coloridos). Essas classes
   geram cores fixas que não respondem a `data-theme`. Este arquivo aplica
   overrides com `!important` quando `[data-theme="dark"]` está ativo,
   mapeando cada classe para o token semântico equivalente.

   ----------------------------------------------------------------------------
   TABELA DE TRADUÇÃO (Tailwind → Token)
   ----------------------------------------------------------------------------
   SUPERFÍCIES (fundos)
     bg-white                → var(--surface)
     bg-slate-50             → var(--surface-2)
     bg-slate-100            → var(--surface-hi)
     bg-slate-200            → var(--surface-hi)

   TEXTOS
     text-slate-900, 800, 700 → var(--text-1)    (primário)
     text-slate-600, 500      → var(--text-2)    (secundário)
     text-slate-400, 300      → var(--text-3)    (terciário/placeholder)

   BORDAS E DIVISORES
     border-slate-100, 200   → var(--border)
     border-slate-300        → var(--border-2)
     divide-slate-100, 200   → var(--border)

   CORES SEMÂNTICAS (paleta de estado, mapeadas para tokens correspondentes)
     bg-{green,emerald}-50/100   → var(--green-subtle)
     text-{green,emerald}-600/700→ var(--green-text)
     border-{green,emerald}-200/300 → var(--green-text)

     bg-{red,rose}-50/100        → var(--red-subtle)
     text-{red,rose}-400/500/600/700 → var(--red-text)
     border-{red,rose}-200/300   → var(--red-text)

     bg-amber-50/100             → var(--amber-subtle)
     text-amber-500/600/700      → var(--amber-text)
     border-amber-200/300        → var(--amber-text)

     bg-blue-50/100              → var(--blue-subtle)
     text-blue-600/700           → var(--blue-text)
     border-blue-200/300         → var(--blue-text)

   MARCA
     bg-brand-50                 → var(--brand-subtle)
     text-brand-500/600/700      → var(--brand-text)
     border-brand-100/200/300    → var(--brand-text)

   ALPHAS (Tailwind aceita /50, /70, /80, /90, /95)
     bg-white/{50..95}           → rgba(var(--surface-rgb), <alpha>)
     bg-slate-50/{50,70}         → fundo escuro semi-translúcido

   ----------------------------------------------------------------------------
   COMO ESTENDER:
   1) Identifique a classe Tailwind hardcoded nova (ex.: `text-orange-700`)
   2) Veja em qual papel ela cai (texto secundário? badge âmbar?)
   3) Adicione uma linha no bloco apropriado abaixo com o token equivalente
   ============================================================================ */

[data-theme="dark"] {

    /* ── Superfícies ─────────────────────────────────────────────────────── */
    .bg-white         { background-color: var(--surface) !important; }
    .bg-slate-50      { background-color: var(--surface-2) !important; }
    .bg-slate-100     { background-color: var(--surface-hi) !important; }
    .bg-slate-200     { background-color: var(--surface-hi) !important; }

    /* Superfícies com alpha (sticky toolbars, overlays glass) */
    .bg-white\/95     { background-color: rgb(var(--surface-rgb) / .95) !important; }
    .bg-white\/90     { background-color: rgb(var(--surface-rgb) / .90) !important; }
    .bg-white\/80     { background-color: rgb(var(--surface-rgb) / .80) !important; }
    .bg-white\/70     { background-color: rgb(var(--surface-rgb) / .70) !important; }
    .bg-white\/50     { background-color: rgb(var(--surface-rgb) / .50) !important; }
    .bg-slate-50\/95,
    .bg-slate-50\/90,
    .bg-slate-50\/80,
    .bg-slate-50\/70,
    .bg-slate-50\/50,
    .bg-slate-100\/70,
    .bg-slate-100\/50 { background-color: rgb(var(--surface-rgb) / .85) !important; }

    /* ── Textos ──────────────────────────────────────────────────────────── */
    .text-slate-900,
    .text-slate-800,
    .text-slate-700   { color: var(--text-1) !important; }
    .text-slate-600,
    .text-slate-500   { color: var(--text-2) !important; }
    .text-slate-400,
    .text-slate-300   { color: var(--text-3) !important; }

    /* ── Bordas e divisores ──────────────────────────────────────────────── */
    .border-slate-100,
    .border-slate-200 { border-color: var(--border) !important; }
    .border-slate-300 { border-color: var(--border-2) !important; }
    .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
    .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border) !important; }

    /* ── Hovers ──────────────────────────────────────────────────────────── */
    .hover\:bg-slate-50:hover,
    .hover\:bg-slate-100:hover,
    .hover\:bg-slate-200:hover { background-color: var(--surface-hi) !important; }
    .hover\:bg-white:hover     { background-color: var(--surface) !important; }
    .hover\:text-slate-600:hover,
    .hover\:text-slate-700:hover,
    .hover\:text-slate-800:hover { color: var(--text-1) !important; }

    /* ── Marca (brand) ───────────────────────────────────────────────────── */
    .bg-brand-50              { background-color: var(--brand-subtle) !important; }
    .hover\:bg-brand-50:hover { background-color: var(--brand-subtle) !important; }
    .text-brand-500,
    .text-brand-600,
    .text-brand-700,
    .text-brand-800           { color: var(--brand-text) !important; }
    .hover\:text-brand-700:hover { color: var(--brand-text) !important; }
    .border-brand-100,
    .border-brand-200,
    .border-brand-300         { border-color: var(--brand-text) !important; }
    .hover\:border-brand-300:hover { border-color: var(--brand-text) !important; }
    .ring-brand-400,
    .ring-brand-500,
    .ring-brand-600           { --tw-ring-color: var(--brand-text) !important; }

    /* ── Verde (green + emerald) ─────────────────────────────────────────── */
    .bg-green-50,
    .bg-green-100,
    .bg-emerald-50,
    .bg-emerald-100   { background-color: var(--green-subtle) !important; }
    .text-green-600,
    .text-green-700,
    .text-emerald-600,
    .text-emerald-700 { color: var(--green-text) !important; }
    .border-green-200,
    .border-green-300,
    .border-emerald-200,
    .border-emerald-300 { border-color: var(--green-text) !important; }
    .ring-green-600\/20,
    .ring-emerald-600\/20 { --tw-ring-color: var(--green-text) !important; }

    /* ── Vermelho (red + rose) ───────────────────────────────────────────── */
    .bg-red-50,
    .bg-red-100,
    .bg-rose-50,
    .bg-rose-100      { background-color: var(--red-subtle) !important; }
    .text-red-400,
    .text-red-500,
    .text-red-600,
    .text-red-700,
    .text-rose-400,
    .text-rose-500,
    .text-rose-600,
    .text-rose-700    { color: var(--red-text) !important; }
    .border-red-200,
    .border-red-300,
    .border-rose-200,
    .border-rose-300  { border-color: var(--red-text) !important; }
    .ring-red-400,
    .ring-red-500,
    .ring-red-600,
    .ring-rose-400,
    .ring-rose-500    { --tw-ring-color: var(--red-text) !important; }
    .hover\:bg-red-50:hover,
    .hover\:bg-rose-50:hover { background-color: var(--red-subtle) !important; }

    /* ── Âmbar ───────────────────────────────────────────────────────────── */
    .bg-amber-50,
    .bg-amber-100     { background-color: var(--amber-subtle) !important; }
    .text-amber-500,
    .text-amber-600,
    .text-amber-700   { color: var(--amber-text) !important; }
    .border-amber-200,
    .border-amber-300 { border-color: var(--amber-text) !important; }
    .ring-amber-400,
    .ring-amber-500   { --tw-ring-color: var(--amber-text) !important; }

    /* ── Azul ────────────────────────────────────────────────────────────── */
    .bg-blue-50,
    .bg-blue-100      { background-color: var(--blue-subtle) !important; }
    .text-blue-600,
    .text-blue-700    { color: var(--blue-text) !important; }
    .border-blue-200,
    .border-blue-300  { border-color: var(--blue-text) !important; }

    /* ── Inputs e selects ────────────────────────────────────────────────── */
    input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]),
    select,
    textarea {
        background-color: var(--surface-2);
        color: var(--text-1);
        border-color: var(--border) !important;
    }
    input::placeholder,
    textarea::placeholder { color: var(--text-3); }

    /* Pickers nativos de data/hora (Chrome/Edge) */
    input[type="date"]::-webkit-calendar-picker-indicator,
    input[type="time"]::-webkit-calendar-picker-indicator,
    input[type="datetime-local"]::-webkit-calendar-picker-indicator,
    input[type="month"]::-webkit-calendar-picker-indicator,
    input[type="week"]::-webkit-calendar-picker-indicator {
        filter: invert(1) brightness(1.4);
        cursor: pointer;
    }

    /* ── Sombras suavizadas ──────────────────────────────────────────────── */
    .shadow-sm { box-shadow: var(--shadow-sm) !important; }
    .shadow,
    .shadow-md { box-shadow: var(--shadow-md) !important; }
    .shadow-lg { box-shadow: var(--shadow-lg) !important; }

    /* ── FullCalendar (Agenda) ───────────────────────────────────────────── */
    .fc { color: var(--text-1); }
    .fc .fc-scrollgrid,
    .fc .fc-scrollgrid-section > * { border-color: var(--border) !important; background-color: transparent !important; }
    .fc .fc-col-header,
    .fc .fc-col-header-cell { background-color: var(--surface-2) !important; border-color: var(--border) !important; }
    .fc .fc-col-header-cell-cushion { color: var(--text-1) !important; }
    .fc .fc-daygrid-day,
    .fc .fc-timegrid-slot,
    .fc .fc-timegrid-axis,
    .fc .fc-timegrid-col,
    .fc td,
    .fc th { border-color: var(--border) !important; }
    .fc .fc-daygrid-day-number,
    .fc .fc-timegrid-slot-label-cushion,
    .fc .fc-timegrid-axis-cushion,
    .fc .fc-toolbar-title { color: var(--text-1) !important; }
    .fc .fc-day-today { background-color: var(--surface-hi) !important; }
    .fc .fc-day-other .fc-daygrid-day-number { color: var(--text-3) !important; }
    .fc .fc-button,
    .fc .fc-button-primary {
        background-color: var(--surface-2) !important;
        border-color: var(--border) !important;
        color: var(--text-1) !important;
    }
    .fc .fc-button-primary:not(:disabled).fc-button-active,
    .fc .fc-button-primary:not(:disabled):active {
        background-color: var(--brand) !important;
        border-color: var(--brand) !important;
        color: #ffffff !important;
    }
    .fc .fc-button:hover { background-color: var(--surface-hi) !important; }
}