html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

@media (max-width: 768px) {
    .row > [class*='col-'] {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 1rem;
    }

    #formFiltros .col-md-5, #formFiltros .col-md-4 {
        width: auto;
        flex: 1 1 auto;
        text-align: left !important;
        margin-top: 0.5rem;
    }
}

@media (max-width: 768px) {
    .topbar .saudacao-empresa {
        font-size: 1.1rem !important;
        white-space: nowrap;
    }
}

@media (max-width: 480px) {
    .topbar .saudacao-empresa {
        font-size: 1rem !important;
    }
}

.table th,
.table td {
    vertical-align: middle;
}

@media (max-width: 992px) {
    .table-responsive .table th,
    .table-responsive .table td {
        white-space: nowrap;
    }
}

/* Links de ordenação de tabela — seguem cor do tema */
.header-sort-link {
    color: var(--sidebar-color);
    text-decoration: none;
}

.header-sort-link:hover {
    color: var(--hover-bg);
    text-decoration: underline;
}

.header-sort-link i {
    color: inherit;
}

/* =============================================================
   REGRAS GLOBAIS DE TEMAS
   Aplicadas a todas as páginas automaticamente.
   Estratégia de segurança:
   - Regras genéricas (ex: .table thead th) têm especificidade
     baixa — seletores de ID/classe nas páginas sempre ganham.
   - Temas escuros usam prefixo body.tema (especificidade maior)
     para não afetar o tema padrão e não conflitar com páginas.
   ============================================================= */

/* ── Tabela: cabeçalho segue identidade visual do tema ──
   Especificidade 0,0,2. IDs como #tabelaItens thead th (1,0,2)
   e classes como .chamados-table thead th (0,1,2) sempre ganham. */
.table thead th {
    background: linear-gradient(to right, #3a78bb 0%, #74b0e8 100%);
    color: #ffffff;
    border-bottom: 2px solid #1a4a8a;
}

.table thead th a,
.table thead th a:visited {
    color: #ffffff;
    text-decoration: none;
}

/* ── Botão primário segue cor do tema ──
   Especificidade 0,1,0. Overrides em themes.css (body.tema .btn-primary)
   têm especificidade 0,2,1 e sempre ganham sobre esta regra. */
.btn-primary {
    background-color: var(--hover-bg);
    border-color: var(--hover-border);
    color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--hover-border);
    border-color: var(--hover-border);
    color: #ffffff;
}

/* ── Focus ring neutro que funciona em todos os temas ── */
.btn:focus, .btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem rgba(128,128,128,0.15),
                0 0 0 0.25rem rgba(128,128,128,0.2);
}

/* =============================================================
   TEMAS ESCUROS — inputs, cards, tabelas, dropdowns
   Prefixo body.tema garante especificidade 0,2,0 ou maior,
   sem afetar o tema padrão nem páginas com CSS próprio.
   ============================================================= */

body.dark-mode .form-control,
body.dark-mode .form-select,
body.windows-theme .form-control,
body.windows-theme .form-select {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus,
body.windows-theme .form-control:focus,
body.windows-theme .form-select:focus {
    background-color: var(--card-bg);
    border-color: var(--hover-bg);
    color: var(--text-color);
    box-shadow: 0 0 0 0.25rem rgba(128,128,128,0.2);
}

body.dark-mode .form-control::placeholder,
body.windows-theme .form-control::placeholder {
    color: var(--text-color);
    opacity: 0.45;
}

body.dark-mode .form-control:read-only,
body.dark-mode .form-control:disabled,
body.windows-theme .form-control:read-only,
body.windows-theme .form-control:disabled {
    background-color: rgba(128,128,128,0.12);
    color: var(--text-color);
    opacity: 0.7;
}

body.dark-mode .card,
body.windows-theme .card {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

body.dark-mode .card-header,
body.dark-mode .card-body,
body.dark-mode .card-footer,
body.windows-theme .card-header,
body.windows-theme .card-body,
body.windows-theme .card-footer {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

body.dark-mode .table,
body.windows-theme .table {
    color: var(--text-color);
}

body.dark-mode .table td,
body.dark-mode .table th,
body.windows-theme .table td,
body.windows-theme .table th {
    border-color: var(--border-color);
    color: var(--text-color);
}

body.dark-mode .dropdown-menu,
body.windows-theme .dropdown-menu {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

body.dark-mode .dropdown-item,
body.windows-theme .dropdown-item {
    color: var(--text-color);
}

body.dark-mode .dropdown-item:hover,
body.windows-theme .dropdown-item:hover {
    background-color: var(--hover-bg);
    color: #ffffff;
}

/* Inputs de texto em telas de seleção (autocomplete etc.) */
body.dark-mode input[type="text"],
body.dark-mode input[type="search"],
body.dark-mode input[type="number"],
body.dark-mode input[type="email"],
body.dark-mode textarea,
body.windows-theme input[type="text"],
body.windows-theme input[type="search"],
body.windows-theme input[type="number"],
body.windows-theme input[type="email"],
body.windows-theme textarea {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}