/**
 * Tema claro (padrão) e escuro — variáveis consumidas em style.css e demais folhas.
 * Alternância: document.documentElement data-theme="light" | "dark"
 */
:root {
    /* Fundo da tela: cinza bem claro (menos “agressivo” que branco puro) */
    --page-bg: #eceff3;
    --page-text: #0f172a;
    --page-text-muted: #64748b;
    /* Conteúdo em branco suave sobre o fundo cinza */
    --surface: #ffffff;
    --surface-hover: #f0f2f5;
    --border: #cbd5e1;
    --card-shadow: 0 2px 10px rgba(15, 23, 42, 0.07);
    --input-bg: #ffffff;
    --input-text: #0f172a;
    --topbar-bg: #001b27;
    --topbar-text: #ffffff;
    --topbar-btn-hover: rgba(255, 255, 255, 0.14);
    --footer-bg: #e3e8ef;
    --footer-text: #475569;
    --dropdown-bg: #ffffff;
    --dropdown-text: #0f172a;
    --dropdown-hover: #f1f5f9;
    --dropdown-border: #e2e8f0;
    --sidebar-bg-start: #001b27;
    --sidebar-bg-end: #012c39;
    --sidebar-link: rgba(255, 255, 255, 0.92);
    --sidebar-heading-opacity: 0.65;
    --backdrop-scrim: rgba(15, 20, 25, 0.42);
    --login-card-border: #e2e8f0;
    --quill-toolbar-bg: #f8f9fa;
    --photo-border: #cbd5e1;
    --link-accent: #02577a;
    /* Aliases usados em dashboards e telas legadas */
    --card-bg: var(--surface);
    --muted: var(--page-text-muted);
    --color-surface-elevated: var(--surface);
    --color-border: var(--border);
    --color-text-muted: var(--page-text-muted);
    /* Painéis e listas (evita #fff / cinzas fixos no escuro) */
    --panel-soft: rgba(248, 250, 252, 0.92);
    --abertura-box-bg: rgba(241, 245, 249, 0.55);
    --dia-label-bg: rgba(15, 23, 42, 0.04);
    --tramite-card-bg: #f8fafc;
    --inset-readonly-bg: rgba(15, 23, 42, 0.045);
    --footer-bar-bg: rgba(15, 23, 42, 0.02);
    --toggle-track-bg: #e2e8f0;
    --chart-grid-color: rgba(15, 23, 42, 0.08);
    --chart-tick-color: var(--page-text-muted);
}

.login-extras-link {
    color: var(--link-accent);
}

/* Alternância Light / Dark (barra superior) */
.theme-switcher {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    margin-right: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.theme-switcher-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.85;
    margin-right: 0.15rem;
    white-space: nowrap;
}

.theme-btn {
    font-size: 0.7rem;
    padding: 0.22rem 0.5rem;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: transparent;
    color: inherit;
    cursor: pointer;
    line-height: 1.2;
    transition: background 0.15s, border-color 0.15s;
}

.theme-btn:hover {
    background: var(--topbar-btn-hover);
}

.theme-btn.is-active {
    background: rgba(255, 255, 255, 0.22);
    font-weight: 700;
    border-color: rgba(255, 255, 255, 0.55);
}

html[data-theme="dark"] .theme-btn {
    border-color: rgba(230, 237, 243, 0.35);
}

html[data-theme="dark"] .theme-btn.is-active {
    background: rgba(56, 139, 253, 0.22);
    border-color: rgba(56, 139, 253, 0.55);
}

html[data-theme="dark"] .btn-secondary {
    background: #30363d;
    color: #e6edf3;
}

html[data-theme="dark"] .btn-secondary:hover {
    background: #484f58;
}

/* Tema no cartão claro (ex.: login) */
.theme-switcher.theme-on-light .theme-btn {
    border-color: #94a3b8;
    color: #0f172a;
}

.theme-switcher.theme-on-light .theme-switcher-label {
    color: #64748b;
}

.theme-switcher.theme-on-light .theme-btn.is-active {
    background: #e2e8f0;
    border-color: #02577a;
    color: #0f172a;
}

.theme-switcher.theme-on-light .theme-btn:hover {
    background: #f1f5f9;
}

html[data-theme="dark"] .theme-switcher.theme-on-light .theme-btn {
    border-color: rgba(230, 237, 243, 0.35);
    color: #e6edf3;
}

html[data-theme="dark"] .theme-switcher.theme-on-light .theme-switcher-label {
    color: #9aa8b8;
}

html[data-theme="dark"] .theme-switcher.theme-on-light .theme-btn.is-active {
    background: rgba(56, 139, 253, 0.2);
    border-color: #58a6ff;
    color: #e6edf3;
}

html[data-theme="dark"] .theme-switcher.theme-on-light .theme-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] {
    --page-bg: #0d1117;
    --page-text: #e6edf3;
    --page-text-muted: #9aa8b8;
    --surface: #161b22;
    --surface-hover: #21262d;
    --border: #30363d;
    --card-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
    --input-bg: #0d1117;
    --input-text: #e6edf3;
    --topbar-bg: #161b22;
    --topbar-text: #e6edf3;
    --topbar-btn-hover: rgba(255, 255, 255, 0.1);
    --footer-bg: #010409;
    --footer-text: #9aa8b8;
    --dropdown-bg: #21262d;
    --dropdown-text: #e6edf3;
    --dropdown-hover: #30363d;
    --dropdown-border: #30363d;
    --sidebar-bg-start: #010409;
    --sidebar-bg-end: #161b22;
    --sidebar-link: rgba(230, 237, 243, 0.95);
    --sidebar-heading-opacity: 0.75;
    --backdrop-scrim: rgba(0, 0, 0, 0.68);
    --login-card-border: #30363d;
    --quill-toolbar-bg: #21262d;
    --photo-border: #30363d;
    --link-accent: #58a6ff;
    --color-surface-elevated: var(--surface);
    --color-border: var(--border);
    --color-text-muted: var(--page-text-muted);
    --panel-soft: rgba(30, 35, 42, 0.96);
    --abertura-box-bg: rgba(255, 255, 255, 0.04);
    --dia-label-bg: rgba(255, 255, 255, 0.06);
    --tramite-card-bg: #21262d;
    --inset-readonly-bg: rgba(255, 255, 255, 0.06);
    --footer-bar-bg: rgba(255, 255, 255, 0.04);
    --toggle-track-bg: #30363d;
    --chart-grid-color: rgba(230, 237, 243, 0.12);
    --chart-tick-color: var(--page-text-muted);
}

/* Alertas no tema escuro (melhor contraste) */
html[data-theme="dark"] .alert-success {
    background: #12261a;
    color: #b4f7c8;
    border-color: #1f5c32;
}

html[data-theme="dark"] .alert-error {
    background: #2d1216;
    color: #fecdd3;
    border-color: #7f1d1d;
}

html[data-theme="dark"] .alert-info {
    background: #132339;
    color: #bfdbfe;
    border-color: #1e3a5f;
}

html[data-theme="dark"] .dropdown-item.logout:hover {
    background: #3d1f24;
    color: #fecdd3;
}

/* Badges — tema escuro */
html[data-theme="dark"] .badge-success {
    background: #12261a;
    color: #b4f7c8;
}

html[data-theme="dark"] .badge-danger {
    background: #2d1216;
    color: #fecdd3;
}

html[data-theme="dark"] .badge-info {
    background: #132339;
    color: #bfdbfe;
}

html[data-theme="dark"] .acesso-badge {
    background: rgba(245, 158, 11, 0.18);
    color: #fde68a;
}

/* Campos de formulário — placeholder e autofill legível no escuro */
html[data-theme="dark"] .form-control::placeholder {
    color: #8b9bab;
    opacity: 1;
}

html[data-theme="dark"] .form-control:-webkit-autofill,
html[data-theme="dark"] .form-control:-webkit-autofill:hover,
html[data-theme="dark"] .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--input-text);
    box-shadow: 0 0 0 1000px #21262d inset;
    transition: background-color 9999s ease-out;
}

/*
 * Quill (snow) — o vendor define fundo claro depois de theme.css.
 * !important garante contraste no tema escuro em todas as telas.
 */
html[data-theme="dark"] .ql-toolbar.ql-snow {
    background: var(--quill-toolbar-bg) !important;
    border-color: var(--border) !important;
}

html[data-theme="dark"] .ql-container.ql-snow {
    background: var(--input-bg) !important;
    border-color: var(--border) !important;
    color: var(--input-text) !important;
}

html[data-theme="dark"] .ql-editor.ql-blank::before {
    color: var(--page-text-muted) !important;
}

html[data-theme="dark"] .ql-snow .ql-stroke {
    stroke: var(--page-text-muted) !important;
}

html[data-theme="dark"] .ql-snow .ql-fill {
    fill: var(--page-text-muted) !important;
}

html[data-theme="dark"] .ql-snow .ql-picker {
    color: var(--input-text) !important;
}

html[data-theme="dark"] .ql-snow .ql-picker-options {
    background: var(--dropdown-bg) !important;
    border-color: var(--border) !important;
}

html[data-theme="dark"] .ql-snow .ql-picker-item {
    color: var(--dropdown-text) !important;
}

html[data-theme="dark"] .ql-snow .ql-picker-item:hover {
    background: var(--dropdown-hover) !important;
    color: var(--dropdown-text) !important;
}

html[data-theme="dark"] .ql-snow a {
    color: var(--link-accent) !important;
}

/* Conteúdo rich-text costuma herdar cores do Quill; reforça texto do editor */
html[data-theme="dark"] .ql-editor {
    color: var(--input-text) !important;
}

html[data-theme="dark"] .ql-editor h1,
html[data-theme="dark"] .ql-editor h2,
html[data-theme="dark"] .ql-editor h3 {
    color: var(--page-text) !important;
}