/* ============================================================
   VARIÁVEIS DE TEMA — CLARO (padrão)
============================================================ */
:root {
    --primary-green: #22c55e;
    --primary-blue: #2563eb;
    --primary-white: #ffffff;
    --dark-slate: #0f172a;

    --bg-page:        #f1f5f9;
    --bg-card:        #ffffff;
    --bg-card-hover:  #f8fafc;
    --text-primary:   #0f172a;
    --text-secondary: #64748b;
    --border-color:   #e2e8f0;
    --sidebar-bg:     #0f172a;
    --input-bg:       #f8fafc;
    --table-head-bg:  #f8fafc;
    --hover-row:      #f1f5f9;
}

/* ============================================================
   MODO ESCURO
============================================================ */
html.dark {
    --bg-page:        #0f172a;
    --bg-card:        #1e293b;
    --bg-card-hover:  #263248;
    --text-primary:   #f1f5f9;
    --text-secondary: #94a3b8;
    --border-color:   #334155;
    --sidebar-bg:     #020617;
    --input-bg:       #0f172a;
    --table-head-bg:  #1e293b;
    --hover-row:      #263248;
}

/* ============================================================
   BASE
============================================================ */
body {
    background-color: var(--bg-page) !important;
    color: var(--text-primary) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

html.dark .bg-white,
html.dark .bg-white\/90 {
    background-color: var(--bg-card) !important;
}

html.dark .bg-slate-100 {
    background-color: var(--bg-page) !important;
}

html.dark .bg-slate-50,
html.dark .bg-slate-50\/60,
html.dark .bg-slate-50\/50 {
    background-color: var(--table-head-bg) !important;
}

html.dark .text-slate-800,
html.dark .text-slate-900 {
    color: var(--text-primary) !important;
}

html.dark .text-slate-500,
html.dark .text-slate-600 {
    color: var(--text-secondary) !important;
}

html.dark .text-slate-700 {
    color: #cbd5e1 !important;
}

html.dark .border-slate-200,
html.dark .border-slate-100 {
    border-color: var(--border-color) !important;
}

html.dark .hover\:bg-slate-50:hover {
    background-color: var(--hover-row) !important;
}

html.dark .divide-slate-100 > * {
    border-color: var(--border-color) !important;
}

aside {
    background-color: var(--sidebar-bg) !important;
    transition: background-color 0.3s ease;
}

/* ============================================================
   INPUTS GERAIS
============================================================ */
html.dark input:not([type="checkbox"]):not([type="radio"]),
html.dark textarea,
html.dark select {
    background-color: #0f172a !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

/* Ícone do calendário — datetime-local no dark mode */
html.dark input[type="datetime-local"],
html.dark input[type="date"],
html.dark input[type="time"] {
    color-scheme: dark;
}

/* ============================================================
   LABELS FLUTUANTES (field-group) — DARK MODE
   Corrige o background:white que estoura no dark
============================================================ */
html.dark .field-group > label {
    background-color: var(--bg-card) !important;
    color: #64748b !important;
}

/* Label em foco vira azul */
html.dark .field-group:focus-within > label {
    color: #3b82f6 !important;
}

/* Labels no modo claro também ficam azul no foco */
.field-group:focus-within > label {
    color: #3b82f6 !important;
}

/* ============================================================
   TOPBAR — DARK MODE
============================================================ */
html.dark .sticky.top-0.bg-white {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

html.dark .sticky.top-0.bg-white input {
    background-color: #0f172a !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

/* ============================================================
   SEÇÃO DIVISOR (sec-div)
============================================================ */
html.dark .sec-div span {
    color: #475569 !important;
}

html.dark .sec-div::before,
html.dark .sec-div::after {
    background: #334155 !important;
}

/* ============================================================
   BOTÃO + CATEGORIA
============================================================ */
html.dark .btn-add-cat {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #3b82f6 !important;
}

html.dark .btn-add-cat:hover {
    background: #263248 !important;
}

/* ============================================================
   CARDS GERAIS
============================================================ */
html.dark section.bg-white,
html.dark div.bg-white {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

html.dark .bg-white.rounded-lg,
html.dark .bg-white.rounded-xl,
html.dark .bg-white.rounded-2xl {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

/* ============================================================
   DASHBOARD — KPI CARDS
============================================================ */
html.dark .bg-blue-100  { background-color: #1e3a5f !important; }
html.dark .bg-green-100 { background-color: #052e16 !important; }
html.dark .bg-amber-100 { background-color: #2d1a00 !important; }
html.dark .bg-purple-100{ background-color: #2e1a47 !important; }
html.dark .bg-slate-100 { background-color: #0f172a !important; color: #94a3b8 !important; }
html.dark .bg-red-100   { background-color: #2d0a0a !important; }

/* Badge de origem de anexo - Finalização (contraste no dark mode) */
html.dark .bg-slate-200.text-slate-700 {
    background-color: #334155 !important;
    color: #cbd5e1 !important;
}

/* ============================================================
   EDITAR TICKET — TABS (PAUSAR / FINALIZAR / RETOMAR)
============================================================ */
html.dark .hover\:bg-amber-50:hover { background-color: #2d1a00 !important; }
html.dark .hover\:bg-green-50:hover { background-color: #052e16 !important; }
html.dark .hover\:bg-blue-50:hover  { background-color: #1e3a5f !important; }

html.dark .bg-amber-50\/50,
html.dark .bg-amber-50 { background-color: #2d1a00 !important; }
html.dark .bg-green-50\/50,
html.dark .bg-green-50 { background-color: #052e16 !important; }
html.dark .bg-blue-50\/20,
html.dark .bg-blue-50  { background-color: #1e3a5f !important; }
html.dark .bg-blue-50\/30 { background-color: #1a2f4a !important; }

html.dark .border-amber-200 { border-color: #92400e !important; }
html.dark .border-green-200 { border-color: #166534 !important; }
html.dark .border-blue-200  { border-color: #1e40af !important; }
html.dark .border-blue-300  { border-color: #1e40af !important; }

/* ============================================================
   EDITAR TICKET — DESCRIÇÃO
============================================================ */
.description-box {
    background-color: #f8fafc;
    color: #334155;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

html.dark .description-box {
    background-color: #0f172a !important;
    color: #94a3b8 !important;
    border-left-color: #3b82f6 !important;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.4) !important;
}

html.dark .bg-slate-50.shadow-inner {
    background-color: #0f172a !important;
    color: #cbd5e1 !important;
}

/* ============================================================
   LINX / PAUSA — CAMPOS INTERNOS
============================================================ */
html.dark #linx-fields {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

html.dark .bg-slate-900 {
    background-color: #020617 !important;
}

/* ============================================================
   MODAL NOVA CATEGORIA
============================================================ */
html.dark #modal-cat {
    color: #f1f5f9 !important;
}

html.dark #modal-cat .bg-white {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

/* ============================================================
   TOM SELECT — DARK MODE
============================================================ */
html.dark .ts-wrapper .ts-control {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

html.dark .ts-dropdown {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

html.dark .ts-dropdown .option:hover,
html.dark .ts-dropdown .option.active {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

/* ============================================================
   PAINEL CONTROLE
============================================================ */
.config-card {
    background-color: #ffffff;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

html.dark .config-card {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

html.dark .config-card .text-slate-700,
html.dark .config-card label,
html.dark .config-card p.text-sm {
    color: #cbd5e1 !important;
}

/* ============================================================
   ALERTAS
============================================================ */
html.dark .bg-green-50 { background-color: #052e16 !important; }
html.dark .bg-red-50   { background-color: #2d0a0a !important; }
html.dark .bg-amber-50 { background-color: #2d1a00 !important; }

html.dark .border-green-200 { border-color: #166534 !important; }
html.dark .border-red-200   { border-color: #991b1b !important; }
html.dark .border-amber-200 { border-color: #92400e !important; }

html.dark .text-green-700 { color: #86efac !important; }
html.dark .text-red-700   { color: #fca5a5 !important; }
html.dark .text-amber-700 { color: #fde68a !important; }

/* ============================================================
   TOGGLE TEMA
============================================================ */
#theme-toggle {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    background-color: #1e293b;
    color: #94a3b8;
}

#theme-toggle:hover {
    background-color: #334155;
    color: #f1f5f9;
    transform: scale(1.1);
}

#theme-toggle .icon-sun  { display: none; }
#theme-toggle .icon-moon { display: block; }

html.dark #theme-toggle .icon-sun  { display: block; }
html.dark #theme-toggle .icon-moon { display: none; }

/* ============================================================
   UTILITÁRIOS DE MARCA
============================================================ */
.bg-brand-green    { background-color: var(--primary-green); }
.text-brand-green  { color: var(--primary-green); }
.border-brand-green{ border-color: var(--primary-green); }

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

.btn-primary {
    background-color: var(--primary-blue);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.2s;
}
.btn-primary:hover { background-color: #1d4ed8; transform: translateY(-1px); }

.btn-success {
    background-color: var(--primary-green);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.2s;
}
.btn-success:hover { background-color: #16a34a; transform: translateY(-1px); }

/* ============================================================
   SCROLLBAR SIDEBAR
============================================================ */
.sidebar-scroll {
    scrollbar-width: thin;
    scrollbar-color: #334155 transparent;
}
.sidebar-scroll::-webkit-scrollbar       { width: 4px; }
.sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
.sidebar-scroll::-webkit-scrollbar-thumb { background-color: #334155; border-radius: 99px; }
.sidebar-scroll::-webkit-scrollbar-thumb:hover { background-color: #475569; }

/* ============================================================
   INPUTS PADRAO GLOBAL (.f-input / .f-label)
   So define o estado de repouso — o foco ja e tratado pela
   regra HIGHLIGHT DE CAMPOS NO FOCO logo abaixo (por cor de
   fundo da pagina, com !important). Paginas que ja definem
   .f-input localmente (clientes.php, usuarios.php,
   editar_usuario.php) continuam intocadas — CSS local vence
   por vir depois no documento.
============================================================ */
.f-input {
    width: 100%;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 9px 14px;
    font-size: 13px;
    outline: none;
    background: #f9fafb;
    color: #1f2937;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.f-input:hover { border-color: #cbd5e1; }
.f-label {
    display: block;
    font-size: 10px;
    font-weight: 900;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 5px;
}
html.dark .f-input {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
    box-shadow: none;
}
html.dark .f-input:hover { border-color: #475569; }
html.dark .f-label { color: #64748b; }
/* ============================================================
   HIGHLIGHT DE CAMPOS NO FOCO
============================================================ */
body.bg-slate-50 input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
body.bg-slate-50 textarea:focus,
body.bg-slate-50 select:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
    outline: none !important;
}

body.bg-slate-100 input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
body.bg-slate-100 textarea:focus,
body.bg-slate-100 select:focus {
    border-color: #22c55e !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15) !important;
    outline: none !important;
}

body.bg-slate-50 .ts-wrapper.focus .ts-control {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

body.bg-slate-100 .ts-wrapper.focus .ts-control {
    border-color: #22c55e !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15) !important;
}

html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
html.dark textarea:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

html.dark .ts-wrapper.focus .ts-control {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* ============================================================
   DARK MODE — SOMBRAS COLORIDAS (shadow-blue-*, shadow-green-*)
   Tailwind usa --tw-shadow-color que estoura no dark
============================================================ */
html.dark [class*="shadow-blue-"] {
    --tw-shadow-color: rgba(37, 99, 235, 0.25) !important;
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color) !important;
    box-shadow: var(--tw-shadow) !important;
}

html.dark [class*="shadow-green-"] {
    --tw-shadow-color: rgba(22, 163, 74, 0.25) !important;
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color) !important;
    box-shadow: var(--tw-shadow) !important;
}

html.dark [class*="shadow-amber-"] {
    --tw-shadow-color: rgba(180, 83, 9, 0.25) !important;
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color) !important;
    box-shadow: var(--tw-shadow) !important;
}

html.dark [class*="shadow-red-"] {
    --tw-shadow-color: rgba(185, 28, 28, 0.25) !important;
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color) !important;
    box-shadow: var(--tw-shadow) !important;
}

/* Cards com hover shadow no dark */
html.dark .hover\:shadow-blue-100:hover,
html.dark .hover\:shadow-lg:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

/* Ícone do cabeçalho (w-9 h-9 bg-blue-600 rounded-xl) — remove shadow colorida */
html.dark .shadow-blue-200 {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

/* TomSelect controle */
.ts-wrapper .ts-control {
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    box-shadow: none !important;
    color: #374151 !important;
    overflow: hidden !important;
}
#select-clientes ~ .ts-wrapper .ts-control .item,
.ts-wrapper#select-clientes-ts .ts-control .item { display: none !important; }
.ts-wrapper .ts-control input {
    font-size: 12px !important;
    color: #374151 !important;
    background: transparent !important;
}
.ts-wrapper .ts-control input::placeholder { color: #cbd5e1 !important; }

/* ============================================================
   BOTÃO REAGENDAR — DARK MODE
============================================================ */
html.dark .btn-reagendar {
    background-color: rgba(217, 119, 6, 0.15) !important;
    border-color: rgba(217, 119, 6, 0.35) !important;
    color: #fbbf24 !important;
}
html.dark .btn-reagendar:hover {
    background-color: rgba(217, 119, 6, 0.25) !important;
    border-color: #f59e0b !important;
    color: #fcd34d !important;
}
html.dark .btn-reagendar i {
    color: #fbbf24 !important;
}

/* Clientes VIP - dourado premium (mais rico no claro; mantem o tom atual no escuro) */
:root { --vip-gold-border: #D4AF37; }
html.dark { --vip-gold-border: #C9A227; }
.vip-badge-ouro { background-color: #FFFF00 !important; }
html.dark .vip-badge-ouro { background-color: #C9A227 !important; }

/* Scrollbar fina - TomSelect dropdown (replicado de demo, 20/08/2026) */
.ts-dropdown .ts-dropdown-content::-webkit-scrollbar { width: 5px !important; }
.ts-dropdown .ts-dropdown-content::-webkit-scrollbar-track { background: transparent !important; }
.ts-dropdown .ts-dropdown-content::-webkit-scrollbar-thumb { background: #cbd5e1 !important; border-radius: 99px !important; }
.ts-dropdown .ts-dropdown-content::-webkit-scrollbar-thumb:hover { background: #94a3b8 !important; }
html.dark .ts-dropdown .ts-dropdown-content::-webkit-scrollbar-thumb { background: #475569 !important; }

/* Scrollbar fina - regra global do sistema (replicado de demo, 20/08/2026) */
* {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 99px; }
*::-webkit-scrollbar-thumb:hover { background-color: #94a3b8; }
html.dark *::-webkit-scrollbar-thumb { background-color: #475569; }
html.dark *::-webkit-scrollbar-thumb:hover { background-color: #64748b; }