/* O tema do MILO: as cores do painel do Controle de Acessos (o lounge), no escuro, que é o padrão, e no claro.
   Toda tela do MILO chama este arquivo antes do próprio CSS e escreve as cores com estas variáveis.
   A escolha mora no navegador, na mesma chave do lounge ("hl_checkin_theme"), e vale para todas as telas;
   quem aplica é o assets/js/tema.js. */
:root {
    --bg-base: #16171b;
    --bg-panel: #212229;
    --bg-input: #121317;
    --text-main: #d1d5db;
    --text-muted: #8b92a5;
    --text-strong: #ffffff;
    --border-color: #31333f;
    --accent-orange: #ea6010; /* Laranja Oficial Harmony */
    --accent-blue: #3b82f6;
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --surface-hover: rgba(255, 255, 255, 0.05);
    --surface-soft: rgba(255, 255, 255, 0.03);
    --overlay: rgba(22, 23, 27, 0.94);
    --shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
}

/* O claro, como o body.light-mode do lounge. Vale no <html> (aplicado antes de a tela aparecer) e no <body>. */
html.light-mode,
body.light-mode {
    --bg-base: #f3f4f6;
    --bg-panel: #ffffff;
    --bg-input: #f9fafb;
    --text-main: #676363; /* Cinza Oficial Harmony */
    --text-muted: #8b92a5;
    --text-strong: #676363;
    --border-color: #e5e7eb;
    --surface-hover: rgba(0, 0, 0, 0.04);
    --surface-soft: rgba(0, 0, 0, 0.02);
    --overlay: rgba(243, 244, 246, 0.95);
    --shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    color-scheme: light;
}

/* Campos no claro, como no lounge. */
html.light-mode input:not([type="radio"]):not([type="checkbox"]):not([type="range"]),
html.light-mode select,
html.light-mode textarea {
    color: var(--text-main);
    background-color: #ffffff;
    border-color: #d1d5db;
}

/* Logo branco (feito para o fundo escuro): no claro, vira a silhueta cinza, como o "a" do lounge. */
html.light-mode .milo-logo-escuro { filter: brightness(0) opacity(0.62); }

/* Nas telas com as duas logos (milo-logo-par): no escuro, a do "harmony" branco; no claro, a colorida padrão, sem filtro. */
.milo-logo-claro { display: none; }
html.light-mode .milo-logo-claro { display: inline-block; }
html.light-mode .milo-logo-escuro.milo-logo-par { display: none; }

/* O botão de tema mostra o tema ligado: a lua no escuro, o sol no claro (como no lounge). */
.milo-tema-claro { display: none; }
html.light-mode .milo-tema-claro { display: inline; }
html.light-mode .milo-tema-escuro { display: none; }

.milo-tema-btn {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: border-color 0.2s, color 0.2s;
}
.milo-tema-btn:hover { border-color: var(--accent-orange); color: var(--accent-orange); }
html.light-mode .milo-tema-btn { color: var(--accent-orange); }