/* ==============================================================================
   Tema do sistema — cores, tipografia e acabamento dos componentes
   ------------------------------------------------------------------------------
   Esta e a aparencia padrao de todas as telas. O base.css continua cuidando de
   layout e estrutura (sidebar, grade, componentes compartilhados); este arquivo
   entra DEPOIS dele e do CSS de cada pagina e define como as coisas se parecem.

   Duas escolhas que merecem explicacao:

   1. As regras se penduram em `html[data-theme]` — o atributo que o script no
      <head> de cada pagina sempre define. Um seletor de atributo pesa o mesmo
      que uma classe, e e isso que da a este arquivo a ultima palavra sobre
      regras do base.css como `[data-theme="dark"] .table tbody td`. Sem essa
      ancora, um seletor solto como `.table tbody td` perderia.

   2. As variaveis ficam no `html` (e nao no `body`) porque os graficos leem
      `--text-primary`, `--border-color` e a paleta com
      `getComputedStyle(document.documentElement)`.

   Origem dos valores: dados-db/static/carga.css.
   ============================================================================== */

/* ============================================================== 1. VARIAVEIS */

html[data-theme] {
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --bg-primary: #f4f5f7;
    --bg-secondary: #eef0f3;
    --bg-tertiary: #e4e7ec;
    --surface: #ffffff;
    --surface-2: #f8f9fb;
    --text-primary: #1b2230;
    --text-secondary: #555f70;
    --text-muted: #8a93a3;
    --border-color: #dde1e7;
    --border-strong: #c7cdd6;

    --sidebar-bg: #ffffff;
    --sidebar-border: #dde1e7;
    --sidebar-link: #555f70;
    --sidebar-link-hover: #eef0f3;

    --card-bg: #ffffff;
    --card-border: #dde1e7;
    --table-bg: #ffffff;
    --table-header-bg: #f5f6f8;
    --table-border: #dde1e7;
    --table-hover: rgba(31, 63, 110, 0.04);
    --input-bg: #ffffff;
    --input-border: #cfd5de;
    --modal-bg: #ffffff;
    --alert-bg: #ffffff;

    /* No base.css `--shadow` e uma COR usada dentro de `box-shadow`, nao a
       sombra inteira. Mantemos essa semantica e so suavizamos o tom. */
    --shadow: rgba(16, 24, 40, 0.06);
    --shadow-lg: rgba(16, 24, 40, 0.14);

    --accent: #1f4f8f;
    --accent-strong: #173d70;
    --accent-soft: rgba(31, 79, 143, 0.08);
    --accent-ring: rgba(31, 79, 143, 0.18);
    --on-accent: #ffffff;

    --ok: #1e7a4f;
    --ok-soft: rgba(30, 122, 79, 0.08);
    --warn: #9a6a12;
    --warn-soft: rgba(196, 140, 30, 0.1);
    --danger: #b42332;
    --danger-soft: rgba(180, 35, 50, 0.07);

    --radius: 8px;
    --radius-sm: 6px;
    --ease: cubic-bezier(.2, .8, .2, 1);

    --tp-pos: #1e7a4f;
    --tp-neg: #b42332;

    /* Paleta dos graficos. As barras de geografia sao uma medida so — a coluna
       ja diz o nome de cada barra —, entao usam UMA cor; as linhas de tendencia
       precisam separar regioes e usam a trinca validada (contraste e daltonismo
       conferidos com o validador do skill dataviz). */
    --tp-bar: #1f4f8f;
    --tp-series-1: #1f4f8f;
    --tp-series-2: #c2701c;
    --tp-series-3: #8e4585;

    /* Rampa sequencial de um tom so, para fatias que tem ordem (Advantage Tier
       vai de Diamond a Bronze): o escuro-para-claro ja conta a hierarquia. */
    --tp-ramp-1: #14315c;
    --tp-ramp-2: #1f4f8f;
    --tp-ramp-3: #2f6cb5;
    --tp-ramp-4: #5289c9;
    --tp-ramp-5: #7ba5d7;
    --tp-ramp-6: #a3c0e3;
    --tp-ramp-7: #c5d8ed;
    --tp-ramp-8: #e1ebf5;

    color-scheme: light;
}

html[data-theme="dark"] {
    --bg-primary: #111418;
    --bg-secondary: #171b21;
    --bg-tertiary: #20252d;
    --surface: #181c22;
    --surface-2: #1c2128;
    --text-primary: #e6e8eb;
    --text-secondary: #a4abb6;
    --text-muted: #7a828e;
    --border-color: #2a3039;
    --border-strong: #38404b;

    --sidebar-bg: #15181d;
    --sidebar-border: #2a3039;
    --sidebar-link: #a4abb6;
    --sidebar-link-hover: #20252d;

    --card-bg: #181c22;
    --card-border: #2a3039;
    --table-bg: #181c22;
    --table-header-bg: #1c2128;
    --table-border: #2a3039;
    --table-hover: rgba(126, 166, 220, 0.06);
    --input-bg: #13171c;
    --input-border: #333b46;
    --modal-bg: #181c22;
    --alert-bg: #181c22;

    --shadow: rgba(0, 0, 0, 0.4);
    --shadow-lg: rgba(0, 0, 0, 0.55);

    --accent: #7ea6dc;
    --accent-strong: #a3c0e8;
    --accent-soft: rgba(126, 166, 220, 0.12);
    --accent-ring: rgba(126, 166, 220, 0.26);
    --on-accent: #111418;

    --ok: #5fb88a;
    --ok-soft: rgba(95, 184, 138, 0.1);
    --warn: #d6a64a;
    --warn-soft: rgba(214, 166, 74, 0.1);
    --danger: #e0707a;
    --danger-soft: rgba(224, 112, 122, 0.1);

    --tp-pos: #5fb88a;
    --tp-neg: #e0707a;

    --tp-bar: #5b8cc4;
    --tp-series-1: #5b8cc4;
    --tp-series-2: #c2882f;
    --tp-series-3: #a868a5;

    /* No escuro a rampa anda ao contrario: comeca clara para nao sumir no fundo. */
    --tp-ramp-1: #cfe0f2;
    --tp-ramp-2: #a9c5e5;
    --tp-ramp-3: #85aad8;
    --tp-ramp-4: #6390c9;
    --tp-ramp-5: #4a77b0;
    --tp-ramp-6: #3a5f8e;
    --tp-ramp-7: #2d4a6e;
    --tp-ramp-8: #24394f;

    color-scheme: dark;
}

/* ============================================================ 2. TIPOGRAFIA */

html[data-theme] body {
    font-family: var(--font-sans);
    font-size: 0.93rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

html[data-theme] .mono,
html[data-theme] .tp-cell-mono {
    font-family: var(--font-mono);
    font-size: 0.82em;
}

html[data-theme] a {
    color: var(--accent);
}

html[data-theme] a:hover {
    color: var(--accent-strong);
}

html[data-theme] :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

html[data-theme] ::selection {
    background: var(--accent-ring);
}

/* Barras de rolagem finas nos dois temas (o base.css so trata o escuro). */
html[data-theme] * {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

html[data-theme] ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html[data-theme] ::-webkit-scrollbar-track,
html[data-theme] ::-webkit-scrollbar-corner {
    background: transparent;
}

html[data-theme] ::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

/* =============================================================== 3. SIDEBAR */

html[data-theme] .sidebar {
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
}

html[data-theme] .sidebar .nav-link {
    border-radius: var(--radius-sm);
    padding: 0.45rem 0.7rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sidebar-link);
}

html[data-theme] .sidebar .nav-link:hover {
    background: var(--sidebar-link-hover);
    color: var(--text-primary);
}

html[data-theme] .sidebar .nav-link.active,
html[data-theme] .sidebar .nav-link.active:hover {
    background: var(--accent);
    color: var(--on-accent) !important;
    box-shadow: none;
}

html[data-theme] .sidebar-collapse-btn {
    border-radius: var(--radius-sm);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

html[data-theme] .sidebar-collapse-btn:hover {
    background: var(--sidebar-link-hover);
    color: var(--accent);
}

html[data-theme] .theme-toggle-btn {
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
}

html[data-theme] .theme-toggle-btn:hover {
    color: var(--text-primary) !important;
}

html[data-theme] .sidebar hr {
    border-color: var(--border-color);
    opacity: 1;
}

/* ============================================ 4. CABECALHO FIXO DA PAGINA */

html[data-theme] .dashboard-fixed-header,
html[data-theme] .page-fixed-header {
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    box-shadow: none;
}

html[data-theme] .dashboard-fixed-header h1.h3,
html[data-theme] .page-fixed-header h1.h3 {
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
}

/* Sobrancelha acima do titulo, como o "PASSO N DE 6" do dados-db. */
html[data-theme] .page-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.3rem;
}

html[data-theme] .page-eyebrow::before {
    content: '';
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

html[data-theme] .dashboard-fixed-header small,
html[data-theme] .page-fixed-header small {
    font-size: 0.78rem;
}

html[data-theme] .dashboard-fixed-header strong,
html[data-theme] .page-fixed-header strong {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* ================================================================ 5. CARDS */

html[data-theme] .card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px var(--shadow);
}

html[data-theme] .card-header {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border-color);
    padding: 0.85rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

html[data-theme] .card-header i {
    color: var(--accent);
}

html[data-theme] .card-body {
    padding: 1.1rem;
}

/* O cartao de resultados vinha com canto de 0.85rem e um degrade no cabecalho;
   aqui ele e plano como qualquer outro painel. */
html[data-theme] .results-data-card {
    border-radius: var(--radius);
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 1px 2px var(--shadow) !important;
}

html[data-theme] .results-card-header {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border-color);
}

/* ============================================================== 6. BOTOES */

html[data-theme] .btn {
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.45rem 0.9rem;
    transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}

html[data-theme] .btn-sm {
    font-size: 0.78rem;
    padding: 0.3rem 0.65rem;
    border-radius: 5px;
}

html[data-theme] .btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

html[data-theme] .btn-primary:hover,
html[data-theme] .btn-primary:focus-visible {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
    color: var(--on-accent);
}

html[data-theme] .btn-outline-primary {
    background: var(--surface);
    border-color: var(--accent);
    color: var(--accent);
}

html[data-theme] .btn-outline-primary:hover,
html[data-theme] .btn-outline-primary:focus-visible {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

html[data-theme] .btn-outline-secondary {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

html[data-theme] .btn-outline-secondary:hover,
html[data-theme] .btn-outline-secondary:focus-visible {
    background: var(--surface-2);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

/* O par de botoes CCAs/Doctors/Avg e TM/RM vira um seletor segmentado, igual
   ao `.seg` do dados-db: uma calha cinza com a opcao ativa em branco. */
html[data-theme] .tp-metric-toggle {
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
}

html[data-theme] .tp-metric-toggle .btn {
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
}

html[data-theme] .tp-metric-toggle .btn:hover:not(.active) {
    background: var(--surface);
    color: var(--text-primary);
}

html[data-theme] .tp-metric-toggle .btn.active {
    background: var(--surface);
    color: var(--text-primary);
    box-shadow: 0 1px 2px var(--shadow);
}

/* ========================================================== 7. FORMULARIOS */

html[data-theme] .form-control,
html[data-theme] .form-select {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    font-size: 0.86rem;
    padding: 0.45rem 0.7rem;
}

/* Campos de busca com a lupa por dentro: o shorthand `padding` acima apagaria
   o recuo que abre espaco para o icone. */
html[data-theme] .dd-toolbar-search .form-control,
html[data-theme] .ex-toolbar-search .form-control {
    padding-left: 2rem;
}

html[data-theme] .form-control-sm,
html[data-theme] .form-select-sm,
html[data-theme] .input-group-sm > .form-control,
html[data-theme] .input-group-sm > .form-select {
    font-size: 0.82rem;
    padding: 0.32rem 0.6rem;
}

/* A abreviacao `padding` das duas regras acima tambem apaga o recuo que o
   Bootstrap reserva a direita do select para a seta. Em select de largura
   automatica (os "Rows per page" de todas as telas) o campo encolhia ate o
   texto e a seta ficava por cima do numero. Aqui o recuo volta, e a seta fica
   alinhada ao mesmo padding de cada tamanho. Select multiplo nao tem seta. */
html[data-theme] .form-select {
    padding-right: 2.25rem;
    background-position: right 0.7rem center;
}

html[data-theme] .form-select-sm,
html[data-theme] .input-group-sm > .form-select {
    padding-right: 2rem;
    background-position: right 0.6rem center;
}

html[data-theme] .form-select[multiple],
html[data-theme] .form-select[size]:not([size="1"]) {
    padding-right: 0.7rem;
}

html[data-theme] .form-control:hover,
html[data-theme] .form-select:hover {
    border-color: var(--border-strong);
}

html[data-theme] .form-control:focus,
html[data-theme] .form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}

html[data-theme] .input-group-text,
html[data-theme] .tp-compare-group .input-group-text {
    background-color: var(--bg-secondary);
    border-color: var(--input-border);
    color: var(--text-secondary);
    font-size: 0.78rem;
    border-radius: var(--radius-sm);
}

/* Rotulos de campo: caixa alta pequena, como o `.field-label` do dados-db. */
html[data-theme] .tp-label,
html[data-theme] .form-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin-bottom: 0.3rem;
}

html[data-theme] .tp-label-inline {
    margin-bottom: 0;
}

html[data-theme] .tp-picker {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    padding: 0.32rem 0.6rem;
    color: var(--text-primary);
}

html[data-theme] .tp-picker:hover {
    border-color: var(--border-strong);
}

html[data-theme] .tp-picker:focus-visible,
html[data-theme] .tp-picker.is-open {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
    outline: none;
}

html[data-theme] .tp-picker.is-filtered {
    border-color: var(--accent);
    background: var(--accent-soft);
}

html[data-theme] .tp-picker.is-filtered .tp-picker-value {
    color: var(--accent-strong);
    font-weight: 600;
}

html[data-theme="dark"] .tp-picker.is-filtered .tp-picker-value {
    color: var(--accent);
}

html[data-theme] .tp-filters-note {
    background: var(--surface-2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.8rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

html[data-theme] .tp-filters-note i {
    color: var(--accent);
}

/* ========================================================= 8. CHIPS E TAGS */

/* Sem degrade: a pilula vira uma etiqueta de contorno, como as `.tag`. */
html[data-theme] .tp-chip {
    background: var(--accent-soft);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: var(--radius-sm);
    color: var(--accent-strong);
    font-size: 0.75rem;
    font-weight: 600;
}

html[data-theme="dark"] .tp-chip {
    color: var(--accent);
}

html[data-theme] .tp-chip--column {
    background: var(--warn-soft);
    border-color: color-mix(in srgb, var(--warn) 30%, transparent);
    color: var(--warn);
}

html[data-theme] .tp-chip-label {
    opacity: 1;
    color: var(--text-secondary);
    font-weight: 400;
}

html[data-theme] .tp-chip-source {
    background: var(--bg-secondary);
    color: var(--text-muted);
    border-radius: 4px;
}

html[data-theme] .tp-chip-remove {
    background: transparent;
    color: inherit;
    border-radius: 4px;
}

html[data-theme] .tp-chip-remove:hover,
html[data-theme] .tp-chip-remove:focus-visible {
    background: color-mix(in srgb, currentColor 18%, transparent);
}

html[data-theme] .badge {
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0.2rem 0.5rem;
}

html[data-theme] .tp-drill-level,
html[data-theme] .tp-meta-pill {
    border-radius: 4px;
    border-color: var(--border-color);
}

html[data-theme] .tp-meta-pill {
    background: var(--bg-secondary);
    font-size: 0.78rem;
}

/* =================================================================== 9. KPI */

/* Mesma anatomia do `.stat`: faixa fina a esquerda, numero grande tabular e
   rotulo em caixa alta. Sem levantar no hover — o painel e de leitura. */
html[data-theme] .card.tp-kpi {
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px var(--shadow);
}

html[data-theme] .card.tp-kpi:hover {
    transform: none;
    border-color: var(--border-strong);
    box-shadow: 0 1px 2px var(--shadow);
}

html[data-theme] .card.tp-kpi:hover.is-positive { border-left-color: var(--tp-pos); }
html[data-theme] .card.tp-kpi:hover.is-negative { border-left-color: var(--tp-neg); }

html[data-theme] .tp-kpi .card-body {
    padding: 0.8rem 1rem;
}

html[data-theme] .tp-kpi-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}

html[data-theme] .tp-kpi-label i {
    color: var(--text-muted);
}

html[data-theme] .tp-kpi-value {
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

html[data-theme] .tp-kpi-sub {
    font-size: 0.76rem;
    color: var(--text-muted);
}

/* Seta de tendencia (a de varios angulos, bi-graph-up-arrow / -down-arrow)
   antes do numero. Fica no ::before para nao disputar com o texto que o contador
   animado reescreve, e serve de segunda pista alem da cor: quem nao distingue
   verde de vermelho continua lendo a direcao. */
html[data-theme] .tp-kpi-value.is-positive::before,
html[data-theme] .tp-kpi-value.is-negative::before {
    content: '\F673';
    font-family: bootstrap-icons !important;
    font-weight: normal;
    font-style: normal;
    font-size: 0.52em;
    line-height: 1;
    margin-right: 0.35rem;
    vertical-align: 0.22em;
    -webkit-font-smoothing: antialiased;
}

html[data-theme] .tp-kpi-value.is-negative::before {
    content: '\F672';
}

/* ============================================================== 10. ABAS */

/* Calha cinza com pilula branca ativa — o `.seg` do dados-db. */
html[data-theme] .results-segmented-tabs {
    gap: 2px;
    padding: 3px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

html[data-theme] .results-segmented-tabs .nav-link {
    border-radius: 4px;
    padding: 0.35rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}

html[data-theme] .results-segmented-tabs .nav-link > i {
    font-size: 0.85rem;
}

html[data-theme] .results-segmented-tabs .nav-link:hover:not(.active) {
    background: var(--surface);
    color: var(--text-primary);
}

html[data-theme] .results-segmented-tabs .nav-link.active {
    background: var(--surface);
    color: var(--text-primary);
    box-shadow: 0 1px 2px var(--shadow);
}

html[data-theme] .results-segmented-tabs .nav-link:focus-visible {
    outline: 2px solid var(--accent);
}

/* ============================================================= 11. TABELAS */

html[data-theme] .table,
html[data-theme] .tp-table {
    font-size: 0.85rem;
}

html[data-theme] .table thead th,
html[data-theme] .tp-table thead th,
html[data-theme] .table.results-table thead th {
    background: var(--table-header-bg);
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--border-color);
    padding: 0.55rem 0.8rem;
}

html[data-theme] .table tbody td,
html[data-theme] .tp-table tbody td,
html[data-theme] .table.results-table tbody td {
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

html[data-theme] .tp-table tbody tr:last-child td {
    border-bottom: 0;
}

/* Sem zebra: a listra some e a linha do hover passa a ser a unica marcacao,
   como na `table.grid`. */
html[data-theme] .table tbody tr:nth-of-type(even),
html[data-theme] .table.results-table tbody tr.row-odd,
html[data-theme] .table.results-table tbody tr.row-even {
    background-color: var(--table-bg);
}

html[data-theme] .table-hover > tbody > tr:hover > *,
html[data-theme="dark"] .table-hover > tbody > tr:hover > * {
    background-color: var(--table-hover) !important;
}

html[data-theme] .table.results-table tbody tr.row-highlight,
html[data-theme] .table.results-table tbody tr.row-highlight > * {
    background-color: var(--accent-soft) !important;
}

html[data-theme] .tp-cell-num,
html[data-theme] .tp-kpi-value {
    font-variant-numeric: tabular-nums;
}

html[data-theme] .tp-th-btn:hover,
html[data-theme] th[aria-sort="ascending"] .tp-th-btn,
html[data-theme] th[aria-sort="descending"] .tp-th-btn {
    color: var(--accent);
}

html[data-theme] .tp-th-btn:focus-visible,
html[data-theme] .tp-nav-btn:focus-visible,
html[data-theme] .tp-row-clickable:focus-visible {
    outline: 2px solid var(--accent);
}

html[data-theme] .tp-th-menu-btn.is-filtered,
html[data-theme] .tp-th-menu-btn:hover,
html[data-theme] .tp-th-menu-btn.is-open {
    color: var(--accent);
}

html[data-theme] .tp-th-filtered {
    box-shadow: inset 0 -2px 0 var(--accent);
}

html[data-theme] .tp-table-count {
    font-size: 0.76rem;
    color: var(--text-muted);
}

html[data-theme] .tp-rank {
    border-radius: 4px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.72rem;
}

html[data-theme] .tp-breadcrumb button {
    color: var(--accent);
}

/* =================================================== 12. MENU DE COLUNA */

html[data-theme] .tp-colmenu {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px var(--shadow-lg);
    background: var(--surface);
}

html[data-theme] .tp-colmenu-header {
    background: var(--surface-2);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

html[data-theme] .tp-colmenu-btn {
    border-radius: 5px;
    font-size: 0.78rem;
    font-weight: 600;
}

html[data-theme] .tp-colmenu-btn-primary {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

html[data-theme] .tp-colmenu-btn-primary:hover {
    background-color: var(--accent-strong);
    border-color: var(--accent-strong);
}

/* ================================================= 13. MODAL, ALERTA, VAZIO */

html[data-theme] .modal-content {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px var(--shadow-lg);
}

html[data-theme] .modal-header {
    background: var(--surface-2);
}

html[data-theme] .tp-drill-nav {
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

html[data-theme] .tp-nav-btn {
    border-radius: 4px;
    font-size: 0.76rem;
}

html[data-theme] .tp-nav-btn:hover:not(:disabled) {
    background: var(--surface);
    color: var(--text-primary);
    box-shadow: 0 1px 2px var(--shadow);
}

/* Alertas com a faixa colorida a esquerda, como o `.flash`. */
html[data-theme] .alert {
    border: 1px solid var(--border-color);
    border-left-width: 4px;
    border-radius: var(--radius-sm);
    box-shadow: 0 1px 2px var(--shadow);
    font-size: 0.86rem;
}

html[data-theme] .alert-danger {
    background: var(--danger-soft);
    border-color: color-mix(in srgb, var(--danger) 35%, transparent);
    border-left-color: var(--danger);
    color: var(--danger);
}

html[data-theme] .alert-warning {
    background: var(--warn-soft);
    border-color: color-mix(in srgb, var(--warn) 35%, transparent);
    border-left-color: var(--warn);
    color: var(--warn);
}

html[data-theme] .alert-success {
    background: var(--ok-soft);
    border-color: color-mix(in srgb, var(--ok) 35%, transparent);
    border-left-color: var(--ok);
    color: var(--ok);
}

html[data-theme] .tp-empty-host {
    border-radius: var(--radius);
}

html[data-theme] .tp-empty-icon {
    background: var(--accent-soft);
    color: var(--accent);
}

html[data-theme] .tp-empty-action {
    border-radius: var(--radius-sm);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
}

html[data-theme] .tp-empty-action:hover {
    background-color: var(--accent);
    color: var(--on-accent);
}

html[data-theme] .tp-period-warning {
    color: var(--warn);
}

html[data-theme] .back-to-top {
    background-color: var(--accent);
    border-radius: var(--radius-sm);
}

html[data-theme] .back-to-top:hover {
    background-color: var(--accent-strong);
}

/* Entrada dos cartoes: o painel de leitura nao precisa deslizar. */
html[data-theme] .territory-panel.is-ready .tp-kpi,
html[data-theme] .territory-panel.is-ready .tp-chart-card {
    animation: none;
}

/* ================================== 14. BOTOES DE ACAO DO CABECALHO */

/* Refresh e Reset all: icone com tamanho optico proprio, alinhado ao texto.
   No `.card-header` o `i` herda a cor de destaque; aqui ele segue o botao. */
html[data-theme] .card-header .tp-action-btn i {
    color: inherit;
    font-size: 0.9rem;
    line-height: 1;
}

html[data-theme] .tp-action-btn {
    gap: 0.35rem;
    display: inline-flex;
    align-items: center;
}

/* A borracha do Reset e ligeiramente maior que a seta do Refresh no mesmo
   corpo de fonte; o ajuste deixa os dois com o mesmo peso visual. */
html[data-theme] #tpResetAll i {
    font-size: 0.86rem;
}


/* =============================== 15. BOTOES SEMANTICOS (success/danger/...) */

html[data-theme] .btn-success {
    background: var(--ok);
    border-color: var(--ok);
    color: #fff;
}

html[data-theme] .btn-success:hover,
html[data-theme] .btn-success:focus-visible {
    background: color-mix(in srgb, var(--ok) 85%, black);
    border-color: color-mix(in srgb, var(--ok) 85%, black);
    color: #fff;
}

html[data-theme] .btn-danger {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

html[data-theme] .btn-danger:hover,
html[data-theme] .btn-danger:focus-visible {
    background: color-mix(in srgb, var(--danger) 85%, black);
    border-color: color-mix(in srgb, var(--danger) 85%, black);
    color: #fff;
}

html[data-theme] .btn-outline-danger {
    background: transparent;
    border-color: color-mix(in srgb, var(--danger) 45%, transparent);
    color: var(--danger);
}

html[data-theme] .btn-outline-danger:hover,
html[data-theme] .btn-outline-danger:focus-visible {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

html[data-theme] .btn-warning {
    background: var(--warn);
    border-color: var(--warn);
    color: #fff;
}

html[data-theme] .btn-info {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

html[data-theme] .btn-info:hover,
html[data-theme] .btn-info:focus-visible {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
    color: var(--on-accent);
}

html[data-theme] .btn-secondary {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

html[data-theme] .btn-secondary:hover,
html[data-theme] .btn-secondary:focus-visible {
    background: var(--surface-2);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

/* Faixas de cor do Bootstrap usadas como fundo de badge/linha. */
html[data-theme] .bg-success { background-color: var(--ok) !important; }
html[data-theme] .bg-danger { background-color: var(--danger) !important; }
html[data-theme] .bg-warning { background-color: var(--warn) !important; color: #fff !important; }
html[data-theme] .bg-primary,
html[data-theme] .bg-info { background-color: var(--accent) !important; color: var(--on-accent) !important; }

/* Com bg-opacity-10 a faixa e so um tom claro. Sem isto, as regras acima a
   pintavam solida, da mesma cor do titulo, e o titulo sumia (avisos de
   sucesso/erro de Display Data e Settings). */
html[data-theme] .bg-success.bg-opacity-10 { background-color: color-mix(in srgb, var(--ok) 12%, transparent) !important; }
html[data-theme] .bg-danger.bg-opacity-10 { background-color: color-mix(in srgb, var(--danger) 12%, transparent) !important; }
html[data-theme] .bg-warning.bg-opacity-10 { background-color: color-mix(in srgb, var(--warn) 12%, transparent) !important; color: inherit !important; }

html[data-theme] .text-success { color: var(--ok) !important; }
html[data-theme] .text-danger { color: var(--danger) !important; }
html[data-theme] .text-warning { color: var(--warn) !important; }
html[data-theme] .text-primary { color: var(--accent) !important; }

/* ========================== 16. TELAS AVULSAS (login, 404, link expirado) */

/* Essas paginas nao herdam do base.html: trazem um <style> proprio com as
   mesmas variaveis. O skin entra depois e vence pela especificidade, menos
   onde o <style> usa !important — dai a repeticao aqui. */
html[data-theme] body,
html[data-theme="dark"] body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary);
}

html[data-theme] .card.shadow {
    box-shadow: 0 8px 24px var(--shadow-lg) !important;
}

html[data-theme] h2.fw-bold.text-primary {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--text-primary) !important;
}

html[data-theme] .error-code {
    color: var(--accent);
    letter-spacing: -0.03em;
}

/* ============================================ 17. LADRILHOS DE METRICA */

/* Os quadradinhos `bg-light rounded` (modal do medico e blocos legados do
   dashboard) ganham o desenho do `.stat`: fundo de superficie, borda fina e
   numero tabular — em vez de um bloco cinza chapado. */
html[data-theme] .bg-light.rounded {
    background: var(--surface-2) !important;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm) !important;
}

html[data-theme] .bg-light.rounded h4,
html[data-theme] .bg-light.rounded h5,
html[data-theme] .bg-light.rounded h6 {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

html[data-theme] .bg-light.rounded > h6.text-muted,
html[data-theme] .bg-light.rounded > small:first-child {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary) !important;
}

/* ========================================================== 18. RESPONSIVO */

/* Telas estreitas apertam o mesmo conjunto que a secao 5 define: como as regras
   de la usam `html[data-theme]`, as reducoes por breakpoint precisam da mesma
   ancora, senao perdem por especificidade (media query nao conta como peso).
   Vieram do dashboard_main.css, recalculadas a partir do padrao novo. */

@media (max-width: 991.98px) {
    html[data-theme] .card-header {
        padding: 0.7rem 0.85rem;
    }

    html[data-theme] .card-body {
        padding: 0.85rem;
    }

    html[data-theme] .table,
    html[data-theme] .tp-table {
        font-size: 0.82rem;
    }

    html[data-theme] .table tbody td,
    html[data-theme] .tp-table tbody td,
    html[data-theme] .table.results-table tbody td {
        padding: 0.5rem 0.6rem;
    }

    html[data-theme] .table thead th,
    html[data-theme] .tp-table thead th,
    html[data-theme] .table.results-table thead th {
        padding: 0.45rem 0.6rem;
    }
}

@media (max-width: 767.98px) {
    html[data-theme] .card-header {
        padding: 0.6rem 0.75rem;
        font-size: 0.85rem;
    }

    html[data-theme] .card-body {
        padding: 0.75rem;
    }
}

@media (max-width: 575.98px) {
    html[data-theme] .card-header {
        padding: 0.55rem 0.7rem;
        font-size: 0.8rem;
    }

    html[data-theme] .card-body {
        padding: 0.6rem;
    }

    html[data-theme] .table,
    html[data-theme] .tp-table {
        font-size: 0.78rem;
    }

    html[data-theme] .table tbody td,
    html[data-theme] .tp-table tbody td,
    html[data-theme] .table.results-table tbody td {
        padding: 0.4rem 0.5rem;
    }

    html[data-theme] .table thead th,
    html[data-theme] .tp-table thead th,
    html[data-theme] .table.results-table thead th {
        padding: 0.4rem 0.5rem;
    }
}