/* ==========================================================================
   Painel Call Center — Tema dark/light global (paleta GuiaChat).
   Importado em todas as views via <link>. Aplique <html data-theme="dark|light">.
   ========================================================================== */

:root[data-theme="dark"] {
    --bg-app: #0f1115;
    --bg-card: #1a1d23;
    --bg-card-hover: #252932;
    --bg-card-active: #2a3142;
    --bg-card-new: #2d3748;
    --bg-section: #14161b;
    --bg-input: #252932;
    --bg-navbar: #14161b;
    --bg-sidebar: #14161b;
    --bg-sidebar-hover: #1f232b;
    --border-soft: #2d3138;
    --border-medium: #3a3f4a;
    --text-primary: #e4e6eb;
    --text-secondary: #a0a6ad;
    --text-muted: #6c757d;
    --text-on-accent: #fff;
    --accent: #F4813F;
    --accent-hover: #DA6620;
    --success: #28a745;
    --warning: #ffc107;
    --danger: #e5484d;
    --info: #17a2b8;
    --inbound-bg: #1f232b;
    --outbound-bg: #134e4a;
    --internal-bg: #3a2f1a;
    --shadow: 0 1px 3px rgba(0,0,0,.3);
    --link: #e0914f;
}

:root[data-theme="light"] {
    --bg-app: #f0f2f5;
    --bg-card: #ffffff;
    --bg-card-hover: #f8f9fa;
    --bg-card-active: #e7f3ff;
    --bg-card-new: #fff8e1;
    --bg-section: #f4f6f9;
    --bg-input: #f8f9fa;
    --bg-navbar: #ffffff;
    --bg-sidebar: #ffffff;
    --bg-sidebar-hover: #f0f2f5;
    --border-soft: #e9ecef;
    --border-medium: #dde1e7;
    --text-primary: #1b1f27;
    --text-secondary: #5b6472;
    --text-muted: #8a929e;
    --text-on-accent: #fff;
    --accent: #F4813F;
    --accent-hover: #DA6620;
    --success: #1e9e4a;
    --warning: #c77f0a;
    --danger: #d64045;
    --info: #1b8fa3;
    --inbound-bg: #ffffff;
    --outbound-bg: #dcf8c6;
    --internal-bg: #fff3cd;
    --shadow: 0 1px 3px rgba(0,0,0,.08);
    --link: #C2611F;
}

/* ============================== AdminLTE/Bootstrap overrides ============================== */
body, .wrapper, .content-wrapper { background: var(--bg-app) !important; color: var(--text-primary) !important; }
.main-header.navbar { background: var(--bg-navbar) !important; border-bottom: 1px solid var(--border-soft) !important; }
[data-theme="dark"] .main-header .nav-link { color: var(--text-primary) !important; }
[data-theme="dark"] .main-header .navbar-brand { color: var(--text-primary) !important; }

.main-sidebar { background: var(--bg-sidebar) !important; border-right: 1px solid var(--border-soft) !important; }
.brand-link img, .brand-link .brand-image { filter: none; }
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link { color: var(--text-secondary) !important; }
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active { background: var(--accent) !important; color: var(--text-on-accent) !important; }
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:hover { background: var(--bg-sidebar-hover) !important; color: var(--text-primary) !important; }
.brand-link { background: var(--bg-navbar) !important; color: var(--text-primary) !important; border-bottom: 1px solid var(--border-soft) !important; }

.content-header h1 { color: var(--text-primary) !important; }

/* Cards */
.card { background: var(--bg-card) !important; color: var(--text-primary) !important; border: 1px solid var(--border-soft) !important; box-shadow: var(--shadow) !important; }
.card-header { background: var(--bg-section) !important; border-bottom: 1px solid var(--border-soft) !important; color: var(--text-primary) !important; }
.card-header.bg-info { background: var(--info) !important; }
.card-header.bg-primary { background: var(--accent) !important; }
.card-body { background: var(--bg-card) !important; color: var(--text-primary) !important; }
.card-footer { background: var(--bg-section) !important; border-top: 1px solid var(--border-soft) !important; }

/* Tabelas */
.table { color: var(--text-primary) !important; }
.table thead th { background: var(--bg-section) !important; color: var(--text-secondary) !important; border-bottom: 1px solid var(--border-medium) !important; }
.table tbody tr { background: var(--bg-card) !important; border-bottom: 1px solid var(--border-soft) !important; }
.table tbody tr:hover { background: var(--bg-card-hover) !important; }
[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,.02) !important; }

/* Forms */
.form-control, .form-control:focus { background: var(--bg-input) !important; color: var(--text-primary) !important; border: 1px solid var(--border-medium) !important; }
.form-control::placeholder { color: var(--text-muted) !important; }
[data-theme="dark"] select.form-control option { background: var(--bg-card) !important; color: var(--text-primary) !important; }
.input-group-text { background: var(--bg-section) !important; border: 1px solid var(--border-medium) !important; color: var(--text-secondary) !important; }
label { color: var(--text-primary); }
small.form-text, .text-muted { color: var(--text-muted) !important; }

/* Botões */
.btn-primary { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--text-on-accent) !important; }
.btn-primary:hover { background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; }
.btn-default, .btn-light { background: var(--bg-card-hover) !important; color: var(--text-primary) !important; border: 1px solid var(--border-medium) !important; }
.btn-default:hover, .btn-light:hover { background: var(--bg-card-active) !important; }

/* Alerts */
.alert { background: var(--bg-card) !important; color: var(--text-primary) !important; border: 1px solid var(--border-medium) !important; }
.alert-success { border-left: 4px solid var(--success) !important; }
.alert-danger  { border-left: 4px solid var(--danger)  !important; }
.alert-warning { border-left: 4px solid var(--warning) !important; }
.alert-info    { border-left: 4px solid var(--info)    !important; }

/* Modals */
.modal-content { background: var(--bg-card) !important; color: var(--text-primary) !important; }
.modal-header { border-bottom: 1px solid var(--border-soft) !important; }
.modal-footer { border-top: 1px solid var(--border-soft) !important; }

/* Code/pre */
code { background: var(--bg-input); color: var(--accent); padding: 1px 4px; border-radius: 3px; }

/* ============================== Tema toggle (botão pequeno no navbar) ============================== */
.theme-switcher { background: transparent; border: 0; color: var(--text-secondary); cursor: pointer; padding: 6px 10px; font-size: 14px; }
.theme-switcher:hover { color: var(--text-primary); }

/* Sound config dropdown */
.sound-cfg-menu { min-width: 240px; padding: 12px; }
.sound-cfg-menu .pattern-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; cursor: pointer; border-radius: 4px; }
.sound-cfg-menu .pattern-row:hover { background: var(--bg-card-hover); }
.sound-cfg-menu .pattern-row.active { color: var(--accent); font-weight: 600; }
.sound-cfg-menu input[type="range"] { width: 100%; }

/* ============================== Correcoes de legibilidade (auditoria WCAG 21/10) ============================== */

/* text-muted estava abaixo de AA (claro 3.14:1, escuro 3.6:1). Nudge para passar 4.5:1. */
:root[data-theme="light"] { --text-muted: #626975; }
:root[data-theme="dark"]  { --text-muted: #868e96; }

/* Sidebar: nav-header e nome do usuario usavam cinza-claro do AdminLTE e sumiam no tema CLARO
   (medido 1.49:1 e 1.70:1). Puxar para tokens do tema. */
.main-sidebar .nav-header { color: var(--text-secondary) !important; }
.main-sidebar .user-panel .info > a.d-block,
.main-sidebar .brand-text { color: var(--text-primary) !important; }
.main-sidebar .user-panel .info .text-muted { color: var(--text-muted) !important; }

/* Rodape: AdminLTE deixa .main-footer branco — vira uma faixa branca no tema ESCURO. */
.main-footer { background: var(--bg-section) !important; color: var(--text-secondary) !important; border-top: 1px solid var(--border-soft) !important; }

/* <code>: laranja do accent sobre cinza dava 2.47:1 no claro. Usar a cor de link do tema (legivel nos dois). */
code { color: var(--link) !important; }
/* No claro o link (#C2611F) ainda ficava em 3.97:1 sobre o cinza do fundo — escurecer so o code pra bater AA (4.5:1). */
:root[data-theme="light"] code { color: #9a4a12 !important; }

/* list-group (lista de atividade do dashboard): AdminLTE deixa o fundo branco fixo —
   no tema ESCURO o texto claro ficava invisivel (1.25:1 medido). */
.list-group-item { background: var(--bg-card) !important; color: var(--text-primary) !important; border-color: var(--border-soft) !important; }