/*
 * Componentes e tema escuro. Carregado depois de app.css.
 * As cores vêm das variáveis de app.css (--g50..--g900, --surface, --tint...);
 * no escuro, html.dark troca os valores e tudo acompanha.
 */

/* ---------- Campos ---------- */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="month"], input[type="search"], select, textarea {
    background-color: var(--surface);
    border-color: rgb(var(--g200));
    border-radius: 0.5rem;
    color: rgb(var(--g800));
}
input::placeholder, textarea::placeholder { color: rgb(var(--g400)); }
select {
    -webkit-appearance: none; appearance: none;
    padding-right: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%237A889B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .6rem center;
    background-size: 1rem;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--ink); }

/* ---------- Filtros em pílulas: ativo preenchido, inativo só contorno ---------- */
[class*="px-3"][class*="text-xs font-bold rounded-lg"] {
    border-radius: 999px !important;
    padding: .4rem .85rem !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
    border: 1px solid rgb(var(--g200));
    background: var(--surface);
    color: rgb(var(--g600));
}
[class*="px-3"][class*="text-xs font-bold rounded-lg"][class*="bg-gray-100"]:hover {
    border-color: rgb(var(--g300));
    background: var(--surface-2);
    color: rgb(var(--g800));
}
[class*="px-3"][class*="text-xs font-bold rounded-lg"][class*="bg-[#002B49]"] {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
    box-shadow: inset 0 -2px 0 var(--gold);
}
[class*="px-3"][class*="text-xs font-bold rounded-lg"][class*="bg-emerald-600"],
[class*="px-3"][class*="text-xs font-bold rounded-lg"][class*="bg-red-600"],
[class*="px-3"][class*="text-xs font-bold rounded-lg"][class*="bg-amber-500"],
[class*="px-3"][class*="text-xs font-bold rounded-lg"][class*="bg-orange-500"] { border-color: transparent; }

/* Filtro ativo com cor própria (ex.: Com Atraso, Sem Entregas): a regra de pílula acima não pode apagar a cor */
[class*="px-3"][class*="text-xs font-bold rounded-lg"][class*="bg-red-500"] { background: #ef4444; border-color: transparent; color: #fff; }
[class*="px-3"][class*="text-xs font-bold rounded-lg"][class*="bg-yellow-500"] { background: #eab308; border-color: transparent; color: #fff; }
[class*="px-3"][class*="text-xs font-bold rounded-lg"][class*="bg-purple-500"] { background: #a855f7; border-color: transparent; color: #fff; }
[class*="px-3"][class*="text-xs font-bold rounded-lg"][class*="bg-gray-500"] { background: #6b7280; border-color: transparent; color: #fff; }
[class*="px-3"][class*="text-xs font-bold rounded-lg"][class*="bg-teal-500"] { background: #14b8a6; border-color: transparent; color: #fff; }
[class*="px-3"][class*="text-xs font-bold rounded-lg"][class*="bg-indigo-500"] { background: #6366f1; border-color: transparent; color: #fff; }
[class*="px-3"][class*="text-xs font-bold rounded-lg"][class*="bg-green-500"] { background: #22c55e; border-color: transparent; color: #fff; }
[class*="px-3"][class*="text-xs font-bold rounded-lg"][class*="bg-emerald-500"] { background: #10b981; border-color: transparent; color: #fff; }
[class*="px-3"][class*="text-xs font-bold rounded-lg"][class*="bg-blue-500"] { background: #3b82f6; border-color: transparent; color: #fff; }
[class*="px-3"][class*="text-xs font-bold rounded-lg"][class*="bg-blue-600"] { background: #2563eb; border-color: transparent; color: #fff; }

/* Atalhos de período pequenos (Este Mês, 1º Tri...) */
[class*="px-2 py-1 text-[10px] font-bold rounded-md"] {
    border-radius: 999px !important;
    border: 1px solid rgb(var(--g200));
    background: var(--surface);
    padding: .2rem .65rem !important;
    font-weight: 600 !important;
}
[class*="px-2 py-1 text-[10px] font-bold rounded-md"]:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Atalhos de período (Este mês, Mês ant., Trimestre) */
button[class*="px-3 py-1.5 text-sm"][class*="border-gray-200"] { border-radius: 999px; font-weight: 500; }

/* ---------- Cartões de indicador ---------- */
div[class*="items-center"][class*="justify-center"][class*="-50"]:has(> i:only-child),
div[class*="items-center"][class*="justify-center"][class*="bg-[#F5F0E8]"]:has(> i:only-child) {
    background: var(--tint) !important;
    border-radius: 999px !important;
}
div[class*="items-center"][class*="justify-center"][class*="-50"]:has(> i:only-child) > i,
div[class*="items-center"][class*="justify-center"][class*="bg-[#F5F0E8]"]:has(> i:only-child) > i {
    color: var(--tint-ink) !important;
}
.text-3xl.font-bold, .text-2xl.font-bold:not(h2), .text-xl.font-bold:not(h2):not(h3) {
    font-weight: 600;
    letter-spacing: -0.02em;
}
.bg-white.rounded-2xl.border.shadow-sm { position: relative; }
.bg-white.rounded-2xl.border.shadow-sm.p-5::before {
    content: '';
    position: absolute; left: 0; right: 0; top: 0; height: 2px;
    border-radius: 12px 12px 0 0;
    background: linear-gradient(90deg, var(--ink) 0 28px, transparent 28px);
}

/* ---------- Chave de tema no topo ---------- */
#theme-toggle {
    position: relative;
    display: inline-flex; align-items: center; justify-content: space-between;
    width: 56px; height: 28px; padding: 0 8px;
    border-radius: 999px;
    background: rgb(var(--g100));
    border: 1px solid rgb(var(--g200));
    font-size: 11px;
    color: rgb(var(--g400));
    cursor: pointer;
}
#theme-toggle > i { position: relative; z-index: 1; }
#theme-toggle .fa-sun { color: #B8860B; }
#theme-toggle .knob {
    position: absolute; top: 2px; left: 2px;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--surface);
    box-shadow: 0 1px 3px rgba(0,43,73,.3);
    transition: transform .2s ease;
}
#theme-toggle[aria-checked="true"] .knob { transform: translateX(28px); }
#theme-toggle[aria-checked="true"] .fa-moon { color: var(--gold); }

/* ---------- Tema escuro ---------- */
html.dark {
    color-scheme: dark;
    --g50: 23 42 66; --g100: 10 20 34; --g200: 36 55 80; --g300: 52 73 95; --g400: 124 139 160;
    --g500: 152 168 187; --g600: 179 192 208; --g700: 203 213 225; --g800: 221 229 238; --g900: 237 242 247;
    --surface: #12233A;
    --surface-2: #17304C;
    --tint: rgba(179,154,106,.16);
    --tint-ink: #D6BE8A;
    --title: #E3EBF4;
    --paper: #0A1422;
    --line: #243750;
}
html.dark body { background-color: var(--paper); color: rgb(var(--g800)); }
html.dark .bg-white { background-color: var(--surface) !important; }
html.dark .bg-\[\#F5F0E8\] { background-color: var(--tint) !important; }
html.dark header.bg-white { background: rgba(18,35,58,.92) !important; }
html.dark .text-\[\#002B49\] { color: var(--title); }
html.dark .border-\[\#002B49\], html.dark .focus\:border-\[\#002B49\]:focus { border-color: #5E86AC; }
html.dark .bg-\[\#002B49\] { background-color: #1F5282; }
html.dark .bg-\[\#002B49\]:hover,
html.dark .hover\:bg-\[\#003d6b\]:hover,
html.dark .hover\:bg-\[\#003b63\]:hover { background-color: #2A639B; }
html.dark .hover\:text-\[\#002B49\]:hover { color: #fff; }
html.dark #sidebar { background: #050F1B; }
html.dark thead { background: var(--surface-2); }
html.dark tbody td { border-color: #1B2E47; }
html.dark input:focus, html.dark select:focus, html.dark textarea:focus {
    border-color: #5E86AC !important;
    box-shadow: 0 0 0 3px rgba(179,154,106,.30) !important;
}
html.dark select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2398A8BB' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E");
}
html.dark ::-webkit-scrollbar-thumb, html.dark .custom-scrollbar::-webkit-scrollbar-thumb { background: #34495F; }
html.dark * { scrollbar-color: #34495F transparent; }
html.dark .bg-black\/30, html.dark .bg-gray-900\/50 { background-color: rgba(0,0,0,.6); }
html.dark .shadow-sm, html.dark .shadow-md, html.dark .shadow-lg,
html.dark .shadow-xl, html.dark .shadow-2xl { box-shadow: 0 1px 2px rgba(0,0,0,.5); }
html.dark #theme-toggle { background: #0A1422; border-color: #243750; }
html.dark .bg-white.rounded-2xl.border.shadow-sm.p-5::before {
    background: linear-gradient(90deg, var(--gold) 0 28px, transparent 28px);
}

/* Tom Select no escuro */
html.dark .ts-control, html.dark .ts-dropdown {
    background: var(--surface) !important;
    border-color: #243750 !important;
    color: rgb(var(--g800)) !important;
}
html.dark .ts-control input, html.dark .ts-dropdown .option { color: rgb(var(--g800)) !important; }
html.dark .ts-dropdown .option:hover:not(.active) { background: var(--surface-2) !important; }
html.dark .ts-dropdown .option.active { background: #1F5282 !important; color: #fff !important; }

/* Cores semânticas (badges, alertas) no escuro: fundo translúcido e texto claro */
html.dark .bg-blue-50 { background-color: rgba(59,130,246,.14) !important; }
html.dark .bg-blue-100 { background-color: rgba(59,130,246,.20) !important; }
html.dark .text-blue-500, html.dark .text-blue-600, html.dark .text-blue-700 { color: #8DB8F7; }
html.dark .border-blue-100, html.dark .border-blue-200 { border-color: rgba(59,130,246,.35); }
html.dark .bg-green-50 { background-color: rgba(34,197,94,.14) !important; }
html.dark .bg-green-100 { background-color: rgba(34,197,94,.20) !important; }
html.dark .text-green-500, html.dark .text-green-600, html.dark .text-green-700 { color: #6EDC95; }
html.dark .border-green-100, html.dark .border-green-200 { border-color: rgba(34,197,94,.35); }
html.dark .bg-emerald-50 { background-color: rgba(16,185,129,.14) !important; }
html.dark .bg-emerald-100 { background-color: rgba(16,185,129,.20) !important; }
html.dark .text-emerald-500, html.dark .text-emerald-600, html.dark .text-emerald-700 { color: #5FD8AE; }
html.dark .border-emerald-100, html.dark .border-emerald-200 { border-color: rgba(16,185,129,.35); }
html.dark .bg-red-50 { background-color: rgba(239,68,68,.14) !important; }
html.dark .bg-red-100 { background-color: rgba(239,68,68,.20) !important; }
html.dark .text-red-500, html.dark .text-red-600, html.dark .text-red-700 { color: #F59595; }
html.dark .border-red-100, html.dark .border-red-200 { border-color: rgba(239,68,68,.35); }
html.dark .bg-orange-50 { background-color: rgba(249,115,22,.14) !important; }
html.dark .bg-orange-100 { background-color: rgba(249,115,22,.20) !important; }
html.dark .text-orange-500, html.dark .text-orange-600, html.dark .text-orange-700 { color: #F8AD74; }
html.dark .border-orange-100, html.dark .border-orange-200 { border-color: rgba(249,115,22,.35); }
html.dark .bg-amber-50 { background-color: rgba(245,158,11,.14) !important; }
html.dark .bg-amber-100 { background-color: rgba(245,158,11,.20) !important; }
html.dark .text-amber-500, html.dark .text-amber-600, html.dark .text-amber-700 { color: #F7C469; }
html.dark .border-amber-100, html.dark .border-amber-200 { border-color: rgba(245,158,11,.35); }
html.dark .bg-yellow-50 { background-color: rgba(234,179,8,.14) !important; }
html.dark .bg-yellow-100 { background-color: rgba(234,179,8,.20) !important; }
html.dark .text-yellow-500, html.dark .text-yellow-600, html.dark .text-yellow-700 { color: #EBCB5C; }
html.dark .border-yellow-100, html.dark .border-yellow-200 { border-color: rgba(234,179,8,.35); }
html.dark .bg-purple-50 { background-color: rgba(168,85,247,.14) !important; }
html.dark .bg-purple-100 { background-color: rgba(168,85,247,.20) !important; }
html.dark .text-purple-500, html.dark .text-purple-600, html.dark .text-purple-700 { color: #C9A0F7; }
html.dark .border-purple-100, html.dark .border-purple-200 { border-color: rgba(168,85,247,.35); }
html.dark .bg-indigo-50 { background-color: rgba(99,102,241,.14) !important; }
html.dark .bg-indigo-100 { background-color: rgba(99,102,241,.20) !important; }
html.dark .text-indigo-500, html.dark .text-indigo-600, html.dark .text-indigo-700 { color: #A5A8F5; }
html.dark .border-indigo-100, html.dark .border-indigo-200 { border-color: rgba(99,102,241,.35); }
html.dark .bg-teal-50 { background-color: rgba(20,184,166,.14) !important; }
html.dark .bg-teal-100 { background-color: rgba(20,184,166,.20) !important; }
html.dark .text-teal-500, html.dark .text-teal-600, html.dark .text-teal-700 { color: #5FD6C9; }
html.dark .border-teal-100, html.dark .border-teal-200 { border-color: rgba(20,184,166,.35); }
html.dark .bg-pink-50 { background-color: rgba(236,72,153,.14) !important; }
html.dark .bg-pink-100 { background-color: rgba(236,72,153,.20) !important; }
html.dark .text-pink-500, html.dark .text-pink-600, html.dark .text-pink-700 { color: #F4A0C8; }
html.dark .border-pink-100, html.dark .border-pink-200 { border-color: rgba(236,72,153,.35); }
html.dark .bg-sky-50 { background-color: rgba(14,165,233,.14) !important; }
html.dark .bg-sky-100 { background-color: rgba(14,165,233,.20) !important; }
html.dark .text-sky-500, html.dark .text-sky-600, html.dark .text-sky-700 { color: #78CBF2; }
html.dark .border-sky-100, html.dark .border-sky-200 { border-color: rgba(14,165,233,.35); }
html.dark .bg-cyan-50 { background-color: rgba(6,182,212,.14) !important; }
html.dark .bg-cyan-100 { background-color: rgba(6,182,212,.20) !important; }
html.dark .text-cyan-500, html.dark .text-cyan-600, html.dark .text-cyan-700 { color: #6ADBEA; }
html.dark .border-cyan-100, html.dark .border-cyan-200 { border-color: rgba(6,182,212,.35); }
html.dark .bg-rose-50 { background-color: rgba(244,63,94,.14) !important; }
html.dark .bg-rose-100 { background-color: rgba(244,63,94,.20) !important; }
html.dark .text-rose-500, html.dark .text-rose-600, html.dark .text-rose-700 { color: #F5959F; }
html.dark .border-rose-100, html.dark .border-rose-200 { border-color: rgba(244,63,94,.35); }
html.dark .bg-violet-50 { background-color: rgba(139,92,246,.14) !important; }
html.dark .bg-violet-100 { background-color: rgba(139,92,246,.20) !important; }
html.dark .text-violet-500, html.dark .text-violet-600, html.dark .text-violet-700 { color: #B7A0F7; }
html.dark .border-violet-100, html.dark .border-violet-200 { border-color: rgba(139,92,246,.35); }
html.dark [class*="bg-blue-50/"] { background-color: rgba(59,130,246,.08) !important; }
html.dark [class*="bg-green-50/"] { background-color: rgba(34,197,94,.08) !important; }
html.dark [class*="bg-emerald-50/"] { background-color: rgba(16,185,129,.08) !important; }
html.dark [class*="bg-red-50/"] { background-color: rgba(239,68,68,.08) !important; }
html.dark [class*="bg-orange-50/"] { background-color: rgba(249,115,22,.08) !important; }
html.dark [class*="bg-amber-50/"] { background-color: rgba(245,158,11,.08) !important; }
html.dark [class*="bg-yellow-50/"] { background-color: rgba(234,179,8,.08) !important; }
html.dark [class*="bg-purple-50/"] { background-color: rgba(168,85,247,.08) !important; }