/* ── Tema Claro (padrão) ── */
:root {
    /* Sem isso, o navegador desenha os controles nativos (calendario do
       input date, scrollbar, etc.) seguindo o tema do SO, ignorando o
       tema escolhido aqui no site */
    color-scheme: light;
    --body-bg:      #f1f5f9;
    --body-color:   #111827;
    --topbar-bg:    #1e3a5f;
    /* Texto/ícone SOBRE a topbar. A barra é escura nos dois temas, então o
       branco está certo — a variável existe para o par ficar explícito, e
       para o dia em que alguém clarear a topbar não sobrar texto invisível. */
    --topbar-color: #fff;
    --sidebar-bg:   #f8fafc;
    --sidebar-border: #e2e8f0;
    --nav-color:    #374151;
    --nav-hover-bg: #e5e7eb;
    --nav-hover-color: #111827;
    --nav-active-bg:   #e5e7eb;
    --nav-active-color:#111827;
    --nav-section-color: #9ca3af;
    --card-bg:      #fff;
    --card-border:  #e5e7eb;
    --table-head-bg:#f9fafb;
    --table-border: #e5e7eb;
    --table-row-border: #f3f4f6;
    --table-row-hover:  #f9fafb;
    --th-color:     #6b7280;
    --td-color:     #374151;
    --input-bg:     #fff;
    --input-border: #e2e8f0;
    --input-color:  #1e293b;
    --input-placeholder: #cbd5e1;
    --modal-bg:     #fff;
    --modal-overlay: rgba(0,0,0,.5);
    --page-title-color: #111827;
    --breadcrumb-color: #9ca3af;
    --breadcrumb-current: #374151;
    --badge-green-bg: #dcfce7; --badge-green-color: #15803d;
    --badge-gray-bg:  #f3f4f6; --badge-gray-color:  #6b7280;
    --badge-red-bg:   #fef2f2; --badge-red-color:   #dc2626;
    --pagination-color: #9ca3af;
    --pagination-active: #1d4ed8;

    /* Texto secundário e divisórias */
    --text-muted:   #6b7280;
    --text-faint:   #9ca3af;
    --label-color:  #374151;
    --divider:      #f3f4f6;
    --input-disabled-bg: #f9fafb;
    --icon-placeholder:  #d1d5db;

    /* Acentos (legíveis nos dois temas) */
    --accent-blue:   #1d4ed8;
    --accent-red:    #dc2626;
    --accent-orange: #ea580c;
    --accent-amber:  #d97706;
    --accent-amber-strong: #b45309;
    --accent-yellow: #ca8a04;
    --accent-green:  #16a34a;
    --accent-violet: #7c3aed;
    --accent-cyan:   #0369a1;

    /* Fundos suaves (chips de ícone, linhas de alerta, filtros) */
    --tint-blue:      #dbeafe;
    --tint-blue-soft: #eff6ff;
    --tint-orange:    #ffedd5;
    --tint-red:       #fee2e2;
    --tint-red-row:   #fef2f2;
    --tint-amber:     #fef3c7;
    --tint-amber-row: #fffbeb;
    --tint-yellow:    #fef9c3;
    --tint-green:     #dcfce7;
    --tint-violet:    #ede9fe;

    /* Fundo da LINHA da lista de Ordens, por situação da OS.
       São variáveis próprias, e não os `--tint-*` acima, de propósito: estas
       cores estavam fixas no template desde sempre e são bem mais saturadas
       que os tints (que servem a chip e alerta). Trocá-las pelos tints
       clarearia a lista inteira no tema claro — mudança visual que ninguém
       pediu. Aqui o tema claro fica IDÊNTICO ao que já era; o que muda é só o
       tema escuro, onde a cor fixa era ilegível. */
    --row-os-cancelada:  #f08080;
    --row-os-fechada:    #d3ffce;
    --row-os-pendencia:  #f0b880;
    --row-os-andamento:  #C0D6E4;

    /* Alertas (.alert-* do serviceorder.css) — o padrão da casa para caixa de
       aviso. As cores estavam fixas na própria classe, então TODO uso dela
       ficava ilegível no tema escuro (Manutenção, formulário de Ordens e o
       banner de erro do login). Valores do tema claro idênticos aos que já
       eram usados. */
    --alert-error-bg:     #fef2f2; --alert-error-border:   #fecaca; --alert-error-color:   #b91c1c;
    --alert-success-bg:   #f0fdf4; --alert-success-border: #bbf7d0; --alert-success-color: #15803d;
    --alert-warning-bg:   #fffbeb; --alert-warning-border: #fde68a; --alert-warning-color: #92400e;
    --alert-info-bg:      #eff6ff; --alert-info-border:    #bfdbfe; --alert-info-color:    #1d4ed8;

    /* Gráficos do dashboard */
    --chart-track: #f3f4f6;
    --chart-bar-bg: #e5e7eb;
}

/* ── Tema Carbon (escuro) ── */
[data-theme="dark"] {
    color-scheme: dark;
    --body-bg:      #1a1a1a;
    --body-color:   #e2e8f0;
    --topbar-bg:    #2d2d2d;
    --topbar-color: #fff;
    --sidebar-bg:   #242424;
    --sidebar-border: #333;
    --nav-color:    #a0aec0;
    --nav-hover-bg: #333;
    --nav-hover-color: #e2e8f0;
    --nav-active-bg:   #3a3a3a;
    --nav-active-color:#fff;
    --nav-section-color: #4a5568;
    --card-bg:      #2a2a2a;
    --card-border:  #333;
    --table-head-bg:#242424;
    --table-border: #333;
    --table-row-border: #2e2e2e;
    --table-row-hover:  #2e2e2e;
    --th-color:     #718096;
    --td-color:     #a0aec0;
    --input-bg:     #333;
    --input-border: #444;
    --input-color:  #e2e8f0;
    --input-placeholder: #555;
    --modal-bg:     #2a2a2a;
    --modal-overlay: rgba(0,0,0,.7);
    --page-title-color: #e2e8f0;
    --breadcrumb-color: #4a5568;
    --breadcrumb-current: #a0aec0;
    --badge-green-bg: #1a3a2a; --badge-green-color: #4ade80;
    --badge-gray-bg:  #2d2d2d; --badge-gray-color:  #9ca3af;
    --badge-red-bg:   #3a1a1a; --badge-red-color:   #f87171;
    --pagination-color: #4a5568;
    --pagination-active: #60a5fa;

    /* Texto secundário e divisórias */
    --text-muted:   #9ca3af;
    --text-faint:   #718096;
    --label-color:  #cbd5e1;
    --divider:      #333;
    --input-disabled-bg: #242424;
    --icon-placeholder:  #4a5568;

    /* Acentos (versões mais claras para fundo escuro) */
    --accent-blue:   #60a5fa;
    --accent-red:    #f87171;
    --accent-orange: #fb923c;
    --accent-amber:  #fbbf24;
    --accent-amber-strong: #f59e0b;
    --accent-yellow: #facc15;
    --accent-green:  #4ade80;
    --accent-violet: #a78bfa;
    --accent-cyan:   #38bdf8;

    /* Fundos suaves (chips de ícone, linhas de alerta, filtros) */
    --tint-blue:      #1e3a5f;
    --tint-blue-soft: #1c2c44;
    --tint-orange:    #3a2718;
    --tint-red:       #3a1e1e;
    --tint-red-row:   #2e1a1a;
    --tint-amber:     #3a3018;
    --tint-amber-row: #2e2818;
    --tint-yellow:    #38331a;
    --tint-green:     #1a3a2a;
    --tint-violet:    #2e2545;

    /* Linha da lista de Ordens — mesma família dos `--tint-*` escuros acima:
       fundo escuro o bastante para o texto claro continuar legível, mantendo
       a cor que identifica a situação (vermelho/verde/laranja/azul). No claro
       essas quatro são as cores originais da tela, inalteradas. */
    --row-os-cancelada:  #4a2020;
    --row-os-fechada:    #1e4030;
    --row-os-pendencia:  #4a3520;
    --row-os-andamento:  #24384d;

    /* Alertas — fundo escuro da mesma família dos `--tint-*`, borda um passo
       mais clara para o contorno não sumir, e texto no `--accent-*` escuro. */
    --alert-error-bg:     #3a1a1a; --alert-error-border:   #5a2a2a; --alert-error-color:   #f87171;
    --alert-success-bg:   #1a3a2a; --alert-success-border: #2a5a40; --alert-success-color: #4ade80;
    --alert-warning-bg:   #3a3018; --alert-warning-border: #5a4a28; --alert-warning-color: #fbbf24;
    --alert-info-bg:      #1e3a5f; --alert-info-border:    #2e5a8f; --alert-info-color:    #60a5fa;

    /* Gráficos do dashboard */
    --chart-track: #333;
    --chart-bar-bg: #3a3a3a;
}