/* ============================================================
   COMPONENTS.CSS - Componentes Reutilizáveis
   ============================================================ */

/* ====== DASHBOARD ====== */
.dashboard {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 0.5rem 0;
}

.dashboard__welcome {
    background: linear-gradient(135deg, var(--clr-primary-dark) 0%, var(--clr-primary) 100%);
    border-radius: 0.75rem;
    padding: 2rem;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.25);
}

.dashboard__welcome-info {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.dashboard__avatar-wrap {
    flex-shrink: 0;
}

.dashboard__avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.4);
    object-fit: cover;
}

.dashboard__greeting {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.85;
    font-weight: 400;
}

.dashboard__username {
    margin: 0.15rem 0 0.5rem;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
}

.dashboard__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dashboard__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: white;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    backdrop-filter: blur(4px);
}

.dashboard__badge--admin {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.5);
}

.dashboard__welcome-date {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    opacity: 0.85;
    white-space: nowrap;
}

.dashboard__section-title {
    font-size: 1rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 1rem 0;
}

.dashboard__cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.dashboard__card {
    background: var(--clr-bg);
    border: 1px solid var(--clr-border);
    border-radius: 0.625rem;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: var(--clr-text);
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.dashboard__card:hover {
    border-color: var(--clr-primary);
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.12);
    transform: translateY(-2px);
    color: var(--clr-text);
}

.dashboard__card-icon {
    width: 48px;
    height: 48px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
    flex-shrink: 0;
}

.dashboard__card-icon--blue   { background: #eff6ff; color: #2563eb; }
.dashboard__card-icon--green  { background: #f0fdf4; color: #16a34a; }
.dashboard__card-icon--purple { background: #faf5ff; color: #7c3aed; }
.dashboard__card-icon--orange { background: #fff7ed; color: #ea580c; }
.dashboard__card-icon--red    { background: #fef2f2; color: #dc2626; }
.dashboard__card-icon--gray   { background: #f8fafc; color: #475569; }

.dashboard__card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.dashboard__card-title {
    font-size: 0.9375rem;
    font-weight: 600;
}

.dashboard__card-desc {
    font-size: 0.8125rem;
    color: #64748b;
}

.dashboard__card-arrow {
    color: #94a3b8;
    font-size: 1rem;
    transition: transform 0.2s, color 0.2s;
}

.dashboard__card:hover .dashboard__card-arrow {
    color: var(--clr-primary);
    transform: translateX(3px);
}

.dashboard__info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.dashboard__info-card {
    background: var(--clr-bg);
    border: 1px solid var(--clr-border);
    border-radius: 0.625rem;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.dashboard__info-icon {
    font-size: 1.375rem;
    color: var(--clr-primary);
    flex-shrink: 0;
}

.dashboard__info-label {
    display: block;
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.dashboard__info-value {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--clr-text);
    margin-top: 0.1rem;
}

@media (max-width: 640px) {
    .dashboard__welcome {
        flex-direction: column;
        align-items: flex-start;
    }

    .dashboard__welcome-info {
        flex-direction: column;
        align-items: flex-start;
    }

    .dashboard__cards {
        grid-template-columns: 1fr;
    }
}

/* ====== AUTH LAYOUT ====== */
.auth-layout {
    min-height: 100vh;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.auth-layout > main {
    width: 100%;
    max-width: 360px;
}

.auth-form {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.auth-form__container {
    width: 100%;
}

.auth-form__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background-color: rgba(37, 99, 235, 0.1);
    color: var(--clr-primary);
    font-size: 1.5rem;
}

/* Ícone sem fundo (quando substituído por logo) */
.auth-form__icon--logo {
    background: none;
    border-radius: 0;
    box-shadow: none;
    width: auto;
    height: auto;
    padding: 0;
}

/* Logo no formulário de autenticação */
.auth-form__logo {
    width: 250px;
    height: auto;
    display: block;
    margin: 0 auto 10px auto;
}

.auth-form__logo-container {
    background: none;
    border-radius: 0;
    padding: 0;
}

/* ====== FORM CARD ====== */
.form-card {
    background: var(--clr-bg);
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    overflow: hidden;
}

.form-card__header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--clr-border);
}

.form-card__header--centered {
    text-align: center;
}

.form-card__title {
    font-size: 1.375rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    color: var(--clr-text);
}

.form-card__subtitle {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
}

.form-card__body {
    padding: 1.5rem;
}

/* ====== PAGE FORM ====== */
.page-form {
    display: flex;
    justify-content: center;
    padding: 2rem 1rem;
}

.page-form__container {
    width: 100%;
}

/* ====== PAGE HERO (ícone de destaque no cabeçalho de página) ====== */
.page-hero-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1439a3, #6f42c1);
    color: #fff;
    font-size: 1.25rem;
    box-shadow: 0 4px 12px rgba(20, 57, 163, .25);
}

/* ====== PAGE HEADER v2 (breadcrumb + ícone de contexto) ======
   Cabeçalho padrão pra telas de Cadastro modernizadas (ver MODERNIZACAO_LAYOUT.md):
   ícone de contexto (.page-hero-icon) + breadcrumb (Módulo / Submódulo / Ação) +
   título/subtítulo à esquerda, botão Voltar à direita. */
.page-header-v2 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.page-header-v2__main {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    min-width: 0;
}

.page-header-v2__text {
    min-width: 0;
}

.page-header-v2__title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.15rem 0;
    color: var(--clr-text);
}

.page-header-v2__subtitle {
    font-size: 0.875rem;
    color: var(--clr-text-muted);
    margin: 0;
}

.page-breadcrumb {
    margin-bottom: 0.2rem;
}

.page-breadcrumb .breadcrumb {
    font-size: 0.78rem;
    margin-bottom: 0;
}

/* ====== FORM ACTIONS — barra fixa em mobile pra formulários longos ======
   Em telas < 768px, o rodapé de ações (Salvar/Cancelar) do formulário gruda no
   fundo da tela enquanto o card estiver em vista, evitando ter que rolar até o
   fim pra achar "Salvar". Aplicar a classe extra `form-actions-sticky` junto
   com `.form-actions`/`row` normal — sem efeito em telas >= 768px. */
@media (max-width: 767.98px) {
    .form-actions-sticky {
        position: sticky;
        bottom: 0;
        background: var(--clr-bg-card);
        padding: 0.75rem 0 0.25rem;
        margin-top: 1rem !important;
        border-top: 1px solid var(--clr-border);
        z-index: 2;
    }
}

/* ====== STAT TILES (cards de resumo genéricos, tipo KPI) ====== */
.stat-tile {
    border: 0;
    border-radius: 14px;
    transition: box-shadow .2s ease, transform .2s ease;
}

.stat-tile:hover {
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
    transform: translateY(-1px);
}

.stat-tile-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.stat-tile-value {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.1;
}

.stat-tile-label {
    font-size: .72rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: 2px;
}

/* ====== SYSTEM ACTION BUTTONS ====== */
.system-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.system-actions--inline {
    flex-wrap: nowrap;
}

.system-actions--wrap {
    flex-wrap: wrap;
}

.system-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.35rem;
    padding: 0.45rem 0.9rem;
    border-radius: 0.5rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
    text-decoration: none;
}

.system-action-btn:hover {
    transform: translateY(-1px);
}

.system-action-btn .bi {
    font-size: 0.95rem;
    line-height: 1;
    flex-shrink: 0;
}

.system-action-btn--compact {
    min-width: 5.5rem;
    padding-left: 0.7rem;
    padding-right: 0.7rem;
}

.system-action-btn--primary {
    background-color: var(--clr-primary);
    border: 1px solid var(--clr-primary);
    color: var(--clr-primary-text, #ffffff);
}

.system-action-btn--primary:hover,
.system-action-btn--primary:focus {
    background-color: var(--clr-primary-hover, var(--clr-primary-dark));
    border-color: var(--clr-primary-hover, var(--clr-primary-dark));
    color: var(--clr-primary-text, #ffffff);
}

.system-action-btn--secondary {
    background-color: var(--clr-text-muted);
    border: 1px solid var(--clr-text-muted);
    color: #ffffff;
}

.system-action-btn--secondary:hover,
.system-action-btn--secondary:focus {
    background-color: var(--clr-text);
    border-color: var(--clr-text);
    color: #ffffff;
}

.system-action-btn--success {
    background-color: var(--clr-success);
    border: 1px solid var(--clr-success);
    color: #ffffff;
}

.system-action-btn--success:hover,
.system-action-btn--success:focus {
    background-color: var(--clr-success-dark);
    border-color: var(--clr-success-dark);
    color: #ffffff;
}

.system-action-btn--danger {
    background-color: var(--clr-danger);
    border: 1px solid var(--clr-danger);
    color: #ffffff;
}

.system-action-btn--danger:hover,
.system-action-btn--danger:focus {
    background-color: var(--clr-danger-dark);
    border-color: var(--clr-danger-dark);
    color: #ffffff;
}

.system-action-btn--info {
    color: var(--clr-info);
    border-color: var(--clr-info);
}

.system-action-btn--info:hover {
    background-color: var(--clr-info);
    color: #fff;
    border-color: var(--clr-info);
}

.system-action-btn--outline {
    background-color: var(--clr-secondary-bg);
    border: 1px solid var(--clr-secondary-border);
    color: var(--clr-secondary-text);
}

.system-action-btn--outline:hover,
.system-action-btn--outline:focus {
    background-color: var(--clr-secondary-hover);
    border-color: var(--clr-primary);
    color: var(--clr-primary);
}

/* ====== FORM FIELDS ====== */
.form-fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-field {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}

.form-field__label {
    font-weight: 500;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    color: var(--clr-text);
}

.form-field__input {
    padding: 0.625rem 0.875rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-field__input:focus {
    border-color: var(--clr-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    outline: none;
}

.form-field__help {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: #64748b;
}

.form-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0;
}

.form-checkbox__input {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    accent-color: var(--clr-primary);
}

.form-checkbox__label {
    font-size: 0.875rem;
    color: var(--clr-text);
    cursor: pointer;
    user-select: none;
}

.form-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.form-field--full {
    grid-column: 1 / -1;
}

/* ====== BUTTONS ====== */
.btn {
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0.625rem 1rem;
    border-radius: 0.375rem;
    transition: all 0.2s;
    cursor: pointer;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.btn-primary {
    background-color: var(--clr-primary);
    border-color: var(--clr-primary);
    color: var(--clr-primary-text);
}

.btn-primary:hover {
    background-color: var(--clr-primary-hover);
    border-color: var(--clr-primary-hover);
    color: var(--clr-primary-text);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--clr-primary-rgb), 0.3);
}

.btn-outline-secondary {
    background-color: transparent;
    color: #64748b;
    border-color: #cbd5e1;
}

.btn-outline-secondary:hover {
    background-color: #f1f5f9;
    border-color: #94a3b8;
}

.btn-block {
    width: 100%;
}

/* ====== ALERTS ====== */
.alert {
    padding: 1rem;
    border-radius: 0.375rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    border: 1px solid;
}

/* Fundo levemente tingido pela cor de status (12%) + borda um pouco mais forte
   (30%), sobre o fundo real de card (var(--clr-bg-card)) — acompanha claro/
   escuro e qualquer customização de cor de status, em vez do rosa/verde/azul
   fixo do Bootstrap padrão (que ficava ilegível/deslocado no modo escuro). */
.alert-danger {
    background-color: color-mix(in srgb, var(--clr-danger) 12%, var(--clr-bg-card));
    border-color: color-mix(in srgb, var(--clr-danger) 30%, var(--clr-bg-card));
    color: var(--clr-danger);
}

.alert-success {
    background-color: color-mix(in srgb, var(--clr-success) 12%, var(--clr-bg-card));
    border-color: color-mix(in srgb, var(--clr-success) 30%, var(--clr-bg-card));
    color: var(--clr-success);
}

.alert-warning {
    background-color: color-mix(in srgb, var(--clr-warning) 12%, var(--clr-bg-card));
    border-color: color-mix(in srgb, var(--clr-warning) 30%, var(--clr-bg-card));
    color: var(--clr-warning);
}

.alert-info {
    background-color: color-mix(in srgb, var(--clr-info) 12%, var(--clr-bg-card));
    border-color: color-mix(in srgb, var(--clr-info) 30%, var(--clr-bg-card));
    color: var(--clr-info);
}

/* ====== TOASTS (pop-ups) ======
   As páginas continuam renderizando <div class="alert alert-success">...
   normalmente — o site.js "sequestra" esses elementos no carregamento da
   página e os move pra cá, transformando em pop-up. Usa os tokens do tema
   (fundo do card, texto, cor de status) em vez das cores fixas do .alert
   acima, então acompanha claro/escuro e qualquer customização. */
.toast-stack {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: min(380px, calc(100vw - 2rem));
    pointer-events: none;
}

.toast-popup {
    display: flex !important;
    align-items: flex-start;
    gap: 0.6rem;
    background: var(--clr-bg-card);
    color: var(--clr-text);
    border: 1px solid var(--clr-border);
    border-left: 4px solid var(--clr-text-muted);
    border-radius: var(--clr-radius-md);
    box-shadow: var(--clr-shadow-lg);
    padding: 0.75rem 0.85rem;
    margin: 0 !important;
    font-size: 0.85rem;
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: auto;
    /* Sem isso, um toast com mensagem gigante (ex.: erro cru do servidor) crescia
       além da largura do .toast-stack e o texto acabava por cima dos botões de
       fechar/copiar em vez de respeitar a caixa. */
    max-width: 100%;
    box-sizing: border-box;
}

.toast-popup--show {
    opacity: 1;
    transform: translateX(0);
}

.toast-popup--hide {
    opacity: 0;
    transform: translateX(24px);
}

.toast-popup.alert-success { border-left-color: var(--clr-success); }
.toast-popup.alert-success > i { color: var(--clr-success); }

.toast-popup.alert-danger { border-left-color: var(--clr-danger); }
.toast-popup.alert-danger > i { color: var(--clr-danger); }

.toast-popup.alert-warning { border-left-color: var(--clr-warning); }
.toast-popup.alert-warning > i { color: var(--clr-warning); }

.toast-popup.alert-info { border-left-color: var(--clr-info); }
.toast-popup.alert-info > i { color: var(--clr-info); }

.toast-popup > i {
    font-size: 1.1rem;
    flex-shrink: 0;
    /* Alinhado com a primeira linha do texto agora que .toast-popup usa
       align-items: flex-start (mensagem grande quebra em várias linhas; o ícone
       centralizado no meio delas ficava estranho). */
    margin-top: 0.15rem;
}

.toast-popup > span {
    flex: 1 1 auto;
    line-height: 1.4;
    /* O bug em si: sem min-width:0, um item flex com flex:1 1 auto nunca encolhe
       abaixo do tamanho do seu conteúdo — uma mensagem de erro grande (ou uma
       palavra/URL longa sem espaço) estourava a largura do .toast-stack inteiro e
       ficava por cima dos botões de copiar/fechar em vez de quebrar linha. */
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    /* Erro realmente enorme (stack trace colado, JSON cru, etc.) não vira uma
       caixa gigante cobrindo a tela — rola dentro do próprio toast. */
    max-height: min(60vh, 420px);
    overflow-y: auto;
}

.toast-popup__controls {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
    flex-shrink: 0;
}

.toast-popup__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: none;
    border-radius: var(--clr-radius-sm);
    background: transparent;
    color: var(--clr-text-muted);
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.toast-popup__btn:hover {
    background: var(--clr-bg-alt);
    color: var(--clr-text);
}

@media (max-width: 480px) {
    .toast-stack {
        top: 0.5rem;
        right: 0.5rem;
        left: 0.5rem;
        width: auto;
    }
}

/* ====== TABLES ====== */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.data-table thead {
    background-color: #f8fafc;
    border-bottom: 2px solid var(--clr-border);
}

.data-table th {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--clr-text);
}

.data-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--clr-border);
}

.data-table tbody tr:hover {
    background-color: #f8fafc;
}

/* ====== PROFILE HEADER ====== */
.profile-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
}

.profile-header__avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 2px solid var(--clr-border);
    object-fit: cover;
    flex-shrink: 0;
}

.profile-header__info {
    flex: 1;
}

.profile-header__title {
    font-size: 1.375rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
    color: var(--clr-text);
}

.profile-header__meta {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
}

/* ====== BADGES ====== */
.badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-primary {
    background-color: rgba(37, 99, 235, 0.1);
    color: var(--clr-primary);
}

.badge-success {
    background-color: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.badge-danger {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.badge-warning {
    background-color: rgba(234, 179, 8, 0.1);
    color: #eab308;
}

/* ============================================================
   TEMA — componentes Bootstrap nativos (card/tabela/form/modal/
   dropdown). O Bootstrap vendorizado (5.1) não expõe esses
   componentes via variável CSS, então são sobrescritos aqui pra
   acompanhar os tokens do root.css (inclui modo escuro e cores
   customizadas por usuário). Carrega depois do bootstrap.min.css
   no <head>, então ganha no empate de especificidade.
   ============================================================ */
.card {
    background-color: var(--clr-bg-card);
    color: var(--clr-text);
    border-color: var(--clr-border);
}

.card-header,
.card-footer {
    background-color: var(--clr-bg-alt);
    border-color: var(--clr-border);
    color: var(--clr-text);
}

/* `.card-header bg-white`/`bg-light` é o padrão usado em ~50 páginas do app pra
   destacar o cabeçalho/rodapé do card — mas são utilitários do Bootstrap com
   `!important` embutido (`background-color:#fff!important` / `#f8f9fa!important`),
   que sempre vence a regra `.card-header` acima (sem `!important`), mesmo ela
   vindo depois no CSS. Resultado: cabeçalho ficava sempre branco/cinza-claro
   fixo, mesmo em tema escuro ou com "Fundo dos cards" customizado — visto em
   quase toda página com filtro/listagem (`Ramais/Index` entre outras).
   `.bg-white` puro é sobrescrito global (nenhum uso como badge/chip no app,
   só como superfície de card) — `.bg-light` só quando em card-header/-footer,
   porque em badge (`badge bg-light text-dark`) precisa continuar cinza-claro
   fixo com texto escuro, senão vira texto escuro sobre fundo escuro no tema
   escuro. */
.bg-white {
    background-color: var(--clr-bg-card) !important;
    color: var(--clr-text) !important;
}

.card-header.bg-light,
.card-footer.bg-light,
.card.bg-light {
    background-color: var(--clr-bg-alt) !important;
    color: var(--clr-text) !important;
}

.table {
    color: var(--clr-text);
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--clr-border);
    color: inherit;
}

/* O Bootstrap pinta `.table-light` (fundo normal E hover) via variáveis CSS
   próprias (--bs-table-bg/--bs-table-hover-bg/...), não direto em
   background-color — a célula lê `var(--bs-table-bg)` no estado normal e, no
   hover, `.table-hover>tbody>tr:hover` troca `--bs-table-accent-bg` pro valor
   de `--bs-table-hover-bg`, pintado via `box-shadow` (não `background-color`).
   Sobrescrever só `background-color` (como a regra abaixo já faz) resolve o
   fundo parado, mas o HOVER continua usando o cinza quase-branco fixo do
   Bootstrap (`--bs-table-hover-bg:#e5e6e7`) por baixo — só redefinindo as
   variáveis em si é que cobre os dois estados de uma vez. */
.table-light,
.table > thead.table-light > tr,
.table > :not(caption) > tr.table-light {
    --bs-table-bg: var(--clr-bg-alt);
    --bs-table-hover-bg: var(--clr-bg-alt);
    --bs-table-hover-color: var(--clr-text);
    --bs-table-active-bg: var(--clr-bg-alt);
    --bs-table-striped-bg: var(--clr-bg-alt);
}

.table-light,
.table > thead.table-light > tr > *,
.table > :not(caption) > tr.table-light > * {
    background-color: var(--clr-bg-alt) !important;
    color: var(--clr-text) !important;
    border-color: var(--clr-border) !important;
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--clr-bg-alt);
    color: var(--clr-text);
}

.form-control,
.form-select {
    background-color: var(--clr-bg-card);
    color: var(--clr-text);
    border-color: var(--clr-border);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--clr-bg-card);
    color: var(--clr-text);
    border-color: var(--clr-primary-light);
}

.form-control::placeholder {
    color: var(--clr-text-light);
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--clr-bg-alt);
    color: var(--clr-text-muted);
}

.input-group-text {
    background-color: var(--clr-bg-alt);
    color: var(--clr-text-muted);
    border-color: var(--clr-border);
}

.list-group-item {
    background-color: var(--clr-bg-card);
    color: var(--clr-text);
    border-color: var(--clr-border);
}

.form-label,
.form-check-label {
    color: var(--clr-text);
}

.modal-content {
    background-color: var(--clr-bg-card);
    color: var(--clr-text);
    border-color: var(--clr-border);
}

.modal-header,
.modal-footer {
    border-color: var(--clr-border);
}

.dropdown-menu {
    background-color: var(--clr-bg-card);
    color: var(--clr-text);
    border-color: var(--clr-border);
}

.dropdown-item {
    color: var(--clr-text);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--clr-bg-alt);
    color: var(--clr-text);
}

.dropdown-divider {
    border-color: var(--clr-border);
}

.alert {
    border-color: var(--clr-border);
}

.breadcrumb-item a {
    color: var(--clr-text-muted);
    text-decoration: none;
}

.breadcrumb-item a:hover {
    color: var(--clr-primary);
    text-decoration: underline;
}

.breadcrumb-item.active,
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--clr-text-light);
}

/* ============================================================
   SHIM — utilitários "subtle"/"emphasis" do Bootstrap 5.3+
   (bg-*-subtle, text-*-emphasis, border-*-subtle) não existem no
   Bootstrap 5.1.0 vendorizado deste projeto — mesma família de bug já
   documentada no Colinha.md pro `text-bg-*` (badge). Sem essa classe
   definida, o elemento fica sem cor nenhuma (herda o texto/fundo do
   pai), o que em tema escuro geralmente vira texto escuro sobre fundo
   escuro = ilegível. Achado em Tickets/Cadastro (chips de prioridade),
   Usuarios/Cadastro, KpisMetricas (Dashboard/Monitoramento/
   Competencia5W2H) e RH/Treinamentos/Colaboradores/Importar.
   Definindo aqui como shim (mapeado pra var(--clr-*)) corrige todos os
   usos existentes de uma vez e qualquer uso futuro, sem precisar caçar
   cada ocorrência isolada. Mesma técnica de "fundo tingido 16% + borda
   30%" já usada em .alert-* logo acima. ============================================================ */
.text-primary-emphasis { color: var(--clr-primary) !important; }
.text-success-emphasis { color: var(--clr-success) !important; }
.text-danger-emphasis { color: var(--clr-danger) !important; }
.text-warning-emphasis { color: var(--clr-warning) !important; }
.text-info-emphasis { color: var(--clr-info) !important; }
.text-secondary-emphasis { color: var(--clr-text-muted) !important; }

.bg-primary-subtle { background-color: color-mix(in srgb, var(--clr-primary) 16%, var(--clr-bg-card)) !important; }
.bg-success-subtle { background-color: color-mix(in srgb, var(--clr-success) 16%, var(--clr-bg-card)) !important; }
.bg-danger-subtle { background-color: color-mix(in srgb, var(--clr-danger) 16%, var(--clr-bg-card)) !important; }
.bg-warning-subtle { background-color: color-mix(in srgb, var(--clr-warning) 16%, var(--clr-bg-card)) !important; }
.bg-info-subtle { background-color: color-mix(in srgb, var(--clr-info) 16%, var(--clr-bg-card)) !important; }
.bg-secondary-subtle { background-color: var(--clr-bg-alt) !important; }
.bg-light-subtle { background-color: var(--clr-bg-alt) !important; }
.bg-dark-subtle { background-color: var(--clr-bg-alt) !important; }

.border-primary-subtle { border-color: color-mix(in srgb, var(--clr-primary) 30%, var(--clr-bg-card)) !important; }
.border-success-subtle { border-color: color-mix(in srgb, var(--clr-success) 30%, var(--clr-bg-card)) !important; }
.border-danger-subtle { border-color: color-mix(in srgb, var(--clr-danger) 30%, var(--clr-bg-card)) !important; }
.border-warning-subtle { border-color: color-mix(in srgb, var(--clr-warning) 30%, var(--clr-bg-card)) !important; }
.border-info-subtle { border-color: color-mix(in srgb, var(--clr-info) 30%, var(--clr-bg-card)) !important; }
.border-secondary-subtle { border-color: var(--clr-border) !important; }