:root {
    --app-shell-rail-height: 3rem;
    /* Padronização cromática: a ÚNICA cor azul oficial é #0891B2 (RGB 8/145/178).
       Todas as 9 tonalidades históricas viram a mesma cor para tornar
       qualquer "tom azul" do sistema chapado em #0891B2. */
    --color-azul-100: #0891B2;
    --color-azul-200: #0891B2;
    --color-azul-300: #0891B2;
    --color-azul-400: #0891B2;
    --color-azul-500: #0891B2;
    --color-azul-600: #0891B2;
    --color-azul-700: #0891B2;
    --color-azul-800: #0891B2;
    --color-azul-900: #0891B2;

    --color-primary: var(--brand-primary, #0891B2);
    --color-primary-hover: var(--brand-secondary, #0891B2);
    --color-primary-active: #0891B2;
    --color-primary-soft: #0891B2;
    --color-primary-border: #0891B2;
    --color-primary-text: #0891B2;

    --color-bg-app: #f4f7fb;
    --color-bg-surface: #ffffff;
    --color-bg-card: #ffffff;
    --color-bg-muted: #f8fafc;
    --color-border: #dbe4f0;
    --color-border-strong: #bfd0e5;
    --color-text: #172033;
    --color-text-soft: #334155;
    --color-text-muted: #64748b;
    --color-white: #ffffff;

    --color-success: #15803d;
    --color-warning: #b45309;
    --color-danger: #be123c;
    --color-info: var(--color-azul-800);

    --shadow-panel: 0 18px 42px rgba(15, 23, 42, 0.06);
    --shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.04);
}

html {
    color-scheme: light;
}

/* ──────────────────────────────────────────────────────────────────
 * Garantia de legibilidade da cor azul oficial #0891B2.
 *
 * Como TODAS as paletas Tailwind blue/cyan/sky/indigo/teal foram
 * remapeadas para o mesmo #0891B2, qualquer elemento que tenha
 * SIMULTANEAMENTE uma classe `bg-<paleta>-<tom>` e uma classe
 * `text-<paleta>-<tom>` ficaria com texto invisível (azul sobre azul).
 *
 * As regras abaixo cobrem as 25 combinações possíveis (5 paletas no
 * background × 5 paletas no texto) forçando o texto para branco.
 * Aplica também às variantes `hover:`, `focus:`, `group-hover:` que
 * podem entrar em conflito em hover.
 * ────────────────────────────────────────────────────────────────── */
[class*="bg-blue-"][class*="text-blue-"],
[class*="bg-blue-"][class*="text-cyan-"],
[class*="bg-blue-"][class*="text-sky-"],
[class*="bg-blue-"][class*="text-indigo-"],
[class*="bg-blue-"][class*="text-teal-"],
[class*="bg-cyan-"][class*="text-blue-"],
[class*="bg-cyan-"][class*="text-cyan-"],
[class*="bg-cyan-"][class*="text-sky-"],
[class*="bg-cyan-"][class*="text-indigo-"],
[class*="bg-cyan-"][class*="text-teal-"],
[class*="bg-sky-"][class*="text-blue-"],
[class*="bg-sky-"][class*="text-cyan-"],
[class*="bg-sky-"][class*="text-sky-"],
[class*="bg-sky-"][class*="text-indigo-"],
[class*="bg-sky-"][class*="text-teal-"],
[class*="bg-indigo-"][class*="text-blue-"],
[class*="bg-indigo-"][class*="text-cyan-"],
[class*="bg-indigo-"][class*="text-sky-"],
[class*="bg-indigo-"][class*="text-indigo-"],
[class*="bg-indigo-"][class*="text-teal-"],
[class*="bg-teal-"][class*="text-blue-"],
[class*="bg-teal-"][class*="text-cyan-"],
[class*="bg-teal-"][class*="text-sky-"],
[class*="bg-teal-"][class*="text-indigo-"],
[class*="bg-teal-"][class*="text-teal-"] {
    color: #ffffff !important;
}

/* Também cobre quando o background vem inline (style="background:#0891B2;")
   ou via variável brand-primary — usuários esperam texto branco sobre azul. */
[style*="background: #0891B2"] [class*="text-blue-"],
[style*="background: #0891B2"] [class*="text-cyan-"],
[style*="background: #0891B2"] [class*="text-sky-"],
[style*="background: #0891B2"] [class*="text-indigo-"],
[style*="background: #0891B2"] [class*="text-teal-"],
[style*="background:#0891B2"] [class*="text-blue-"],
[style*="background:#0891B2"] [class*="text-cyan-"],
[style*="background:#0891B2"] [class*="text-sky-"],
[style*="background:#0891B2"] [class*="text-indigo-"],
[style*="background:#0891B2"] [class*="text-teal-"] {
    color: #ffffff !important;
}

body {
    /* Sem gradientes azuis: o fundo do app é uniforme em tom neutro claro.
       A cor azul oficial (#0891B2) aparece apenas em elementos de UI ativos
       (botões, badges, links), nunca em gradiente. */
    background: var(--color-bg-app);
    color: var(--color-text);
}

a {
    color: inherit;
}

a:hover {
    color: inherit;
}

::selection {
    background: rgba(8, 145, 178, 0.16);
    color: var(--color-text);
}

.shadow-panel {
    box-shadow: var(--shadow-panel);
}

.shell-rail {
    min-height: var(--app-shell-rail-height);
}

.sidebar-brand-shell,
.topbar-shell {
    background-color: rgba(255, 255, 255, 0.92);
}

.brand-bg {
    background-color: var(--color-primary);
}

.brand-text {
    color: var(--color-primary);
}

.brand-border {
    border-color: var(--color-primary);
}

#app-sidebar nav::-webkit-scrollbar {
    width: 8px;
}

#app-sidebar nav::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.22);
    border-radius: 9999px;
}

button,
input,
select,
textarea {
    transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease, color 180ms ease;
}

/* Exclui checkbox/radio: o plugin @tailwindcss/forms desenha a marcação
   (checkmark branco sobre fundo currentColor) via @layer base. Como CSS sem
   camada vence @layer, forçar background-color aqui apagaria o preenchimento
   do checkbox marcado (checkmark branco sobre fundo branco = invisível). */
input:not([type='checkbox']):not([type='radio']),
select,
textarea {
    background-color: var(--color-white);
    color: var(--color-text);
}

input::placeholder,
textarea::placeholder {
    color: var(--color-text-muted);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 4px rgba(8, 145, 178, 0.12) !important;
    outline: none;
}

table thead th {
    color: var(--color-text-muted);
}

table tbody tr:hover {
    background-color: rgba(8, 145, 178, 0.035);
}

.bg-slate-950,
.hover\:bg-slate-950:hover {
    background-color: var(--color-primary) !important;
}

.bg-slate-900 {
    background-color: var(--color-bg-muted) !important;
}

.bg-slate-100 {
    background-color: #f1f5f9 !important;
}

.bg-slate-50,
.hover\:bg-slate-50:hover {
    background-color: var(--color-bg-muted) !important;
}

.text-cyan-300,
.text-cyan-200,
.text-cyan-700,
.text-cyan-800,
.hover\:text-cyan-700:hover {
    color: var(--color-primary) !important;
}

.bg-cyan-50 {
    background-color: #f0fbff !important;
}

.bg-cyan-100 {
    background-color: var(--color-primary-soft) !important;
}

.border-slate-100 {
    border-color: #eef2f7 !important;
}

.border-slate-200,
.divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--color-border) !important;
}

.border-slate-300,
.border-cyan-200,
.hover\:border-cyan-300:hover {
    border-color: var(--color-border-strong) !important;
}

.text-slate-950 {
    color: var(--color-text) !important;
}

.text-slate-900 {
    color: #1e293b !important;
}

.text-slate-700 {
    color: var(--color-text-soft) !important;
}

.text-slate-600,
.text-slate-500,
.text-slate-400 {
    color: var(--color-text-muted) !important;
}

.focus\:border-cyan-500:focus,
.border-cyan-500 {
    border-color: var(--color-primary) !important;
}

.focus\:ring-cyan-500:focus {
    --tw-ring-color: rgba(8, 145, 178, 0.14) !important;
    box-shadow: 0 0 0 4px rgba(8, 145, 178, 0.12) !important;
}

.hover\:bg-white\/5:hover {
    background-color: rgba(8, 145, 178, 0.06) !important;
}

.hover\:text-white:hover {
    color: var(--color-primary) !important;
}

.bg-white\/5 {
    background-color: rgba(255, 255, 255, 0.72) !important;
}

.border-white\/10 {
    border-color: rgba(189, 211, 251, 0.58) !important;
}

.shadow-sm {
    box-shadow: var(--shadow-soft) !important;
}

.shadow-lg {
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08) !important;
}

.rounded-3xl,
.rounded-\[2rem\],
.rounded-\[1\.75rem\] {
    border-radius: 1.5rem !important;
}

body.sidebar-lock {
    overflow: hidden;
}

#app-shell-content {
    transition: margin-left 220ms ease;
}

#app-sidebar {
    will-change: transform, width;
}

.sidebar-scroll {
    scrollbar-gutter: stable both-edges;
}

.sidebar-group-trigger[aria-expanded="true"] .sidebar-chevron {
    transform: rotate(180deg);
}

@media (min-width: 1024px) {
    html[data-sidebar-collapsed="0"] #app-sidebar {
        width: 18rem;
    }

    html[data-sidebar-collapsed="1"] #app-sidebar {
        width: 5.75rem;
    }

    html[data-sidebar-collapsed="0"] #app-shell-content {
        margin-left: 18rem !important;
    }

    html[data-sidebar-collapsed="1"] #app-shell-content {
        margin-left: 5.75rem !important;
    }

    html[data-sidebar-collapsed="1"] .sidebar-brand-copy,
    html[data-sidebar-collapsed="1"] .sidebar-section-copy,
    html[data-sidebar-collapsed="1"] .sidebar-item-label,
    html[data-sidebar-collapsed="1"] .sidebar-item-meta,
    html[data-sidebar-collapsed="1"] .sidebar-chevron {
        opacity: 0;
        width: 0;
        overflow: hidden;
        pointer-events: none;
        margin: 0;
    }

    html[data-sidebar-collapsed="1"] .sidebar-link,
    html[data-sidebar-collapsed="1"] .sidebar-group-trigger {
        justify-content: center;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    html[data-sidebar-collapsed="1"] .sidebar-link .sidebar-icon,
    html[data-sidebar-collapsed="1"] .sidebar-group-trigger > span:first-child {
        margin-right: 0;
    }

    html[data-sidebar-collapsed="1"] .sidebar-brand-logo-full {
        display: none;
    }

    html[data-sidebar-collapsed="1"] .sidebar-brand-logo-compact {
        display: block !important;
    }
}

@media (max-width: 1023px) {
    body {
        background: var(--color-bg-app);
    }

    #app-sidebar {
        box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
    }

    html:not([data-sidebar-mobile-open="1"]) #app-sidebar {
        transform: translateX(-100%);
    }

    html[data-sidebar-mobile-open="1"] #app-sidebar {
        transform: translateX(0);
    }

    html[data-sidebar-mobile-open="1"] #app-sidebar-backdrop {
        display: block;
    }

    #app-shell-content {
        margin-left: 0 !important;
    }
}