/*
 * DevTrack Utility System — camada de tema global.
 * Aplica o novo visual (ver docs/stitch-analysis.md) por cima do Bootstrap 5:
 *   1) Design tokens em :root
 *   2) Override das variáveis do Bootstrap (--bs-*)
 *   3) Componentes compartilhados por TODAS as páginas: shell (sidebar/appbar/
 *      conteúdo/nav mobile), card e cabeçalho de página.
 * Carregado DEPOIS de bootstrap.min.css e ANTES de site.css.
 *
 * Componentes usados por apenas uma ou algumas páginas (não todas) NÃO ficam aqui —
 * ficam em wwwroot/css/pages/<dominio>/<pagina>.css (ex.: pages/analistas/index.css,
 * com badge/matrícula/avatar/ações usados só pelo cellRenderer do grid) ou, quando
 * compartilhados por mais de uma página do mesmo domínio mas não por todo o app, em
 * wwwroot/css/pages/<dominio>/<dominio>.css (crie só quando esse caso existir de fato).
 */

/* ============================================================
   1. Design tokens
   ============================================================ */
:root {
    /* Cores */
    --dt-primary: #0f6cbd;
    --dt-primary-strong: #005396;
    --dt-primary-soft: #d3e3ff;
    --dt-on-primary: #ffffff;

    --dt-bg: #f5f8fc;
    --dt-surface: #ffffff;
    --dt-surface-low: #f1f4f8;
    --dt-surface-container: #ebeef2;

    --dt-on-surface: #181c1f;
    --dt-on-variant: #414751;
    --dt-outline: #717783;
    --dt-border: #9dadc4;

    /* Situação (badges) */
    --dt-ativo-bg: #dff6dd;
    --dt-ativo-fg: #107c10;
    --dt-inativo-bg: #edebe9;
    --dt-inativo-fg: #605e5c;

    /* Aviso — ações que mudam disponibilidade (ex.: Inativar), não são destrutivas de dados */
    --dt-warning: #b8790a;
    --dt-warning-soft: rgba(184, 121, 10, 0.1);

    /* Status da Demanda (badges) — compartilhado entre Listagem e Detalhes */
    --dt-status-planejamento-bg: #ebeef2;
    --dt-status-planejamento-fg: #414751;
    --dt-status-desenvolvimento-bg: #d3e3ff;
    --dt-status-desenvolvimento-fg: #005396;
    --dt-status-concluida-bg: #dff6dd;
    --dt-status-concluida-fg: #107c10;
    --dt-status-cancelada-bg: #fde7e9;
    --dt-status-cancelada-fg: #c4314b;
    --dt-status-uat-bg: #f3e8fd;
    --dt-status-uat-fg: #8764b8;

    /* Escala de espaçamento (4px) */
    --dt-xs: 4px;
    --dt-sm: 8px;
    --dt-md: 16px;
    --dt-lg: 24px;
    --dt-xl: 32px;

    /* Forma */
    --dt-radius: 0.5rem;
    --dt-radius-sm: 0.25rem;

    /* Elevação (discreta, "flat") */
    --dt-shadow-sm: 0 1px 2px rgba(20, 30, 45, 0.06);
    --dt-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.02);

    /* Shell */
    --dt-sidebar-w: 16rem;
    --dt-sidebar-w-collapsed: 5rem;
    --dt-appbar-h: 4rem;
}

/* ============================================================
   2. Override do Bootstrap
   ============================================================ */
:root {
    --bs-primary: var(--dt-primary);
    --bs-primary-rgb: 15, 108, 189;
    --bs-body-bg: var(--dt-bg);
    --bs-body-color: var(--dt-on-surface);
    --bs-border-color: var(--dt-border);
    --bs-border-radius: var(--dt-radius);
    --bs-border-radius-sm: var(--dt-radius-sm);
    --bs-link-color: var(--dt-primary);
    --bs-link-color-rgb: 15, 108, 189;
    --bs-link-hover-color: var(--dt-primary-strong);
}

body {
    background-color: var(--dt-bg);
    color: var(--dt-on-surface);
}

/* Botão primário */
.btn-primary {
    --bs-btn-bg: var(--dt-primary);
    --bs-btn-border-color: var(--dt-primary);
    --bs-btn-hover-bg: var(--dt-primary-strong);
    --bs-btn-hover-border-color: var(--dt-primary-strong);
    --bs-btn-active-bg: var(--dt-primary-strong);
    --bs-btn-active-border-color: var(--dt-primary-strong);
    --bs-btn-disabled-bg: var(--dt-primary);
    --bs-btn-disabled-border-color: var(--dt-primary);
    font-weight: 600;
}

/* Botão secundário/contorno */
.btn-outline-secondary {
    --bs-btn-color: var(--dt-primary);
    --bs-btn-border-color: var(--dt-border);
    --bs-btn-hover-bg: var(--dt-surface-low);
    --bs-btn-hover-color: var(--dt-primary-strong);
    --bs-btn-hover-border-color: var(--dt-outline);
    --bs-btn-active-bg: var(--dt-surface-low);
    --bs-btn-active-color: var(--dt-primary-strong);
    --bs-btn-active-border-color: var(--dt-outline);
}

.btn-secondary {
    --bs-btn-bg: var(--dt-surface);
    --bs-btn-border-color: var(--dt-border);
    --bs-btn-color: var(--dt-on-variant);
    --bs-btn-hover-bg: var(--dt-surface-low);
    --bs-btn-hover-border-color: var(--dt-outline);
    --bs-btn-hover-color: var(--dt-on-surface);
    --bs-btn-active-bg: var(--dt-surface-low);
    --bs-btn-active-color: var(--dt-on-surface);
    --bs-btn-active-border-color: var(--dt-outline);
}

/* Botão de perigo — ações destrutivas/irreversíveis em modais (arquétipo de confirmação de
   risco); mesma cor de #a4262c usada em severidade Crítico e no Console de Alertas. */
.btn-danger {
    --bs-btn-bg: #a4262c;
    --bs-btn-border-color: #a4262c;
    --bs-btn-hover-bg: #8e2025;
    --bs-btn-hover-border-color: #8e2025;
    --bs-btn-active-bg: #8e2025;
    --bs-btn-active-border-color: #8e2025;
    --bs-btn-disabled-bg: #a4262c;
    --bs-btn-disabled-border-color: #a4262c;
    font-weight: 600;
}

/* Campos de formulário */
.form-control,
.form-select {
    border-color: var(--dt-border);
    color: var(--dt-on-surface);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--dt-primary);
    box-shadow: 0 0 0 0.15rem rgba(15, 108, 189, 0.2);
}

/* Convenção do design system: todo rótulo (form-label, dt-detalhe-label, dt-switch-label, etc.)
   fica em negrito (font-weight: 700) para reforçar a leitura — manter em novas telas. */
.form-label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--dt-on-variant);
    margin-bottom: var(--dt-xs);
}

/* Rótulo/valor de campo somente-leitura em telas de Detalhes — promovido de
   pages/demandas/detalhes.css por ser usado por mais de um domínio (Demandas, Alertas). */
.dt-detalhe-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--dt-on-variant);
    margin-bottom: 2px;
}

.dt-detalhe-valor {
    font-size: 0.9375rem;
    color: var(--dt-on-surface);
}

/* Breadcrumb — componente genérico do Bootstrap, reaproveitável por qualquer página.
   Sem margin-bottom próprio: o espaçamento até o próximo elemento vem do `gap` de
   `.dt-content`, ajustado por `nav[aria-label="breadcrumb"] ~ .dt-page-header` abaixo
   (sem isso, o gap do container + esta margem somavam ~40px acima do título — bem mais
   que o espaço equivalente nas telas de listagem, que não têm breadcrumb). */
.breadcrumb {
    font-size: 0.8125rem;
    margin-bottom: 0;
}

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

.breadcrumb-item a:hover {
    text-decoration: underline;
}

.breadcrumb-item.active {
    color: var(--dt-on-variant);
}

/* Tabela (fallback quando não é ag-Grid) */
.table {
    --bs-table-color: var(--dt-on-surface);
    --bs-table-border-color: var(--dt-border);
    --bs-table-hover-bg: var(--dt-surface-low);
}

.table > thead {
    background-color: var(--dt-surface-low);
}

.table > thead th {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--dt-on-variant);
}

/* ============================================================
   3. Componentes do shell (.dt-*)
   ============================================================ */

/* --- Layout raiz --- */
.dt-app {
    display: flex;
    min-height: 100vh;
}

/* --- Sidebar --- */
.dt-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: var(--dt-sidebar-w);
    display: flex;
    flex-direction: column;
    gap: var(--dt-sm);
    padding: var(--dt-md);
    background-color: var(--dt-surface-container);
    border-right: 1px solid var(--dt-border);
    z-index: 60;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dt-sidebar.dt-collapsed {
    width: var(--dt-sidebar-w-collapsed);
}

.dt-sidebar-header {
    display: flex;
    align-items: center;
    gap: var(--dt-sm);
    margin-bottom: var(--dt-md);
    min-height: 2rem;
    overflow: hidden;
    transition: gap 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dt-sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    background-color: var(--dt-primary);
    color: var(--dt-on-primary);
    border-radius: var(--dt-radius-sm);
    overflow: hidden;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dt-sidebar-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--dt-on-surface);
    white-space: nowrap;
    overflow: hidden;
    max-width: 10rem;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dt-sidebar-toggle {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    background: none;
    border-radius: 9999px;
    color: var(--dt-on-variant);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.dt-sidebar-toggle:hover {
    background-color: var(--dt-surface-container);
}

.dt-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: var(--dt-xs);
    flex: 1;
}

.dt-nav-item {
    display: flex;
    align-items: center;
    gap: var(--dt-md);
    padding: var(--dt-sm);
    border-radius: var(--dt-radius);
    color: var(--dt-on-variant);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease, gap 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dt-nav-item:hover {
    background-color: var(--dt-surface-container);
    color: var(--dt-primary);
}

.dt-nav-item.active {
    background-color: var(--dt-primary);
    color: var(--dt-on-primary);
    font-weight: 600;
}

.dt-nav-item .dt-icon {
    min-width: 24px;
    flex-shrink: 0;
}

/* Contador de itens novos sobreposto ao ícone de um item de navegação (ex.: Alertas não
   visualizados) — funciona tanto na sidebar retrátil quanto na navegação inferior mobile. */
.dt-nav-badge-wrapper {
    position: relative;
    display: inline-flex;
}

.dt-badge-nav {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background-color: #a4262c;
    color: #ffffff;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

/* Estado colapsado: some o rótulo (largura anima até 0) e o item centraliza
   o ícone na trilha estreita. O `gap` reservado para o rótulo também vai a
   zero — sem isso, o espaço do gap (mesmo com o rótulo a 0px) permanecia
   somado ao lado direito do ícone, descentralizando-o em relação ao fundo
   azul do item ativo. */
.dt-sidebar.dt-collapsed .dt-nav-label,
.dt-sidebar.dt-collapsed .dt-sidebar-title {
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    pointer-events: none;
}

.dt-sidebar.dt-collapsed .dt-nav-item {
    justify-content: center;
    gap: 0;
}

/* Colapsado: a marca (brand) some suavemente (largura anima até 0, não
   `display: none`) e o `gap` do header some junto — sem eles, o botão de
   alternância (único item visível) fica centralizado na trilha estreita
   (5rem) sem vazar por cima do appbar do conteúdo principal. */
.dt-sidebar.dt-collapsed .dt-sidebar-header {
    justify-content: center;
    gap: 0;
}

.dt-sidebar.dt-collapsed .dt-sidebar-brand {
    opacity: 0;
    width: 0;
    min-width: 0;
    pointer-events: none;
}

.dt-sidebar.dt-collapsed .dt-sidebar-toggle {
    margin-left: 0;
}

.dt-sidebar.dt-collapsed .dt-sidebar-toggle svg {
    transform: rotate(180deg);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dt-nav-label {
    overflow: hidden;
    max-width: 12rem;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Área principal --- */
.dt-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin-left: var(--dt-sidebar-w);
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dt-main.dt-main-collapsed {
    margin-left: var(--dt-sidebar-w-collapsed);
}

/* --- Top app bar --- */
.dt-appbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--dt-appbar-h);
    padding: 0 var(--dt-lg);
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: var(--dt-surface);
    border-bottom: 1px solid var(--dt-border);
}

.dt-appbar-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--dt-primary);
    margin: 0;
}

/* --- Menu do usuário (avatar na appbar → cartão com Sair) --- */
.dt-user-menu-trigger {
    display: flex;
    align-items: center;
    padding: 0;
    border: none;
    background: none;
    border-radius: 50%;
    cursor: pointer;
}

.dt-user-menu-trigger::after {
    display: none;
}

.dt-user-menu-trigger:focus-visible {
    outline: 2px solid var(--dt-primary);
    outline-offset: 2px;
}

.dt-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--dt-primary);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

.dt-user-menu-panel {
    width: min(19rem, calc(100vw - 1.5rem));
    overflow: hidden;
}

.dt-user-menu-banner {
    display: flex;
    align-items: center;
    gap: var(--dt-sm);
    padding: var(--dt-md);
    background-color: var(--dt-primary);
    color: #ffffff;
}

.dt-user-avatar-lg {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1rem;
    background-color: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.4);
}

.dt-user-menu-email {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dt-user-menu-body {
    display: flex;
    flex-direction: column;
    gap: var(--dt-xs);
    padding: var(--dt-sm);
}

.dt-user-menu-link {
    display: flex;
    align-items: center;
    width: 100%;
    gap: var(--dt-sm);
    padding: var(--dt-sm);
    border: none;
    border-radius: var(--dt-radius-sm);
    background: none;
    color: var(--dt-on-surface);
    font-size: 0.875rem;
    font-family: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.dt-user-menu-link:hover {
    background-color: var(--dt-surface-low);
    color: var(--dt-on-surface);
}

.dt-user-menu-link-sair {
    margin-top: var(--dt-xs);
    padding-top: calc(var(--dt-sm) + var(--dt-xs));
    border-top: 1px solid var(--dt-border);
}

/* --- Conteúdo --- */
.dt-content {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: var(--dt-lg);
    display: flex;
    flex-direction: column;
    gap: var(--dt-lg);
}

/* --- Card --- */
.dt-card {
    background-color: var(--dt-surface);
    border: 1px solid var(--dt-border);
    border-radius: var(--dt-radius);
    box-shadow: var(--dt-shadow-sm);
}

.dt-card-pad {
    padding: var(--dt-md);
}

/* Cabeçalho de cartão de grid (grid encostado nas bordas, sem `.dt-card-pad`): só o cabeçalho
   recebe padding horizontal/superior — o `.dt-form-section-title` dentro dele fornece a borda
   inferior. Usado por mais de um domínio (Indicadores, Alertas). */
.dt-grid-card-header {
    padding: var(--dt-md) var(--dt-md) 0;
}

/* --- Cabeçalho de página --- */
.dt-page-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--dt-md);
}

.dt-page-title {
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--dt-on-surface);
    margin: 0;
}

.dt-page-subtitle {
    font-size: 0.8125rem;
    color: var(--dt-on-variant);
    opacity: 0.75;
    margin: var(--dt-xs) 0 0;
}

/* Quando a página tem breadcrumb, reduz o gap padrão de `.dt-content` (var(--dt-lg), usado
   entre qualquer par de seções) só entre o breadcrumb e o título — telas sem breadcrumb
   (listagens) não têm esse espaço extra antes do título, então essa aproximação equipara a
   altura visual do cabeçalho nas duas situações. `~` (não `+`) porque algumas páginas têm um
   `<input type="hidden">` entre o breadcrumb e o `.dt-page-header`. */
nav[aria-label="breadcrumb"] ~ .dt-page-header {
    margin-top: calc(var(--dt-sm) - var(--dt-lg));
}

/* --- Nav inferior mobile --- */
.dt-bottom-nav {
    display: none;
}

/* --- Badge de situação (Ativo/Inativo) — usado por toda listagem de cadastro ---
   display:inline-flex + align-items:center + line-height:1 são essenciais aqui: sem eles,
   o badge herda o line-height do body (1.5, do Bootstrap) e fica visualmente descentralizado
   dentro da célula do grid (a "folga" vira grossura + desalinhamento vertical). */
.dt-badge {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.dt-badge-ativo {
    background-color: var(--dt-ativo-bg);
    color: var(--dt-ativo-fg);
}

.dt-badge-inativo {
    background-color: var(--dt-inativo-bg);
    color: var(--dt-inativo-fg);
}

/* --- Badges de severidade de Alerta — só cor; formato/tipografia vêm de `.dt-badge` acima.
   Usadas pelo painel de Alertas e pelas telas de Demandas (Detalhes/Visão Consolidada). --- */
.dt-badge-severidade-informativo {
    background-color: var(--dt-primary-container, #e3f0fc);
    color: var(--dt-primary, #0f6cbd);
}

.dt-badge-severidade-atencao {
    background-color: #fff4ce;
    color: #7a5b00;
}

.dt-badge-severidade-critico {
    background-color: #fde7e9;
    color: #a4262c;
}

/* --- Badges de status de Alerta (Ativo reaproveita `.dt-badge-ativo` acima) — usadas pelo
   Console de Alertas por Demanda. --- */
.dt-badge-status-resolvido {
    background-color: var(--dt-ativo-bg);
    color: var(--dt-ativo-fg);
}

.dt-badge-status-dispensado {
    background-color: var(--dt-inativo-bg);
    color: var(--dt-inativo-fg);
}

/* --- Blocos de apresentação da Memória de Cálculo — usados pelo painel de Alertas e pelas
   telas de Demandas (Detalhes/Visão Consolidada) que exibem alertas da própria demanda. --- */
.dt-memoria-secao-titulo {
    font-weight: 700;
    margin-top: var(--dt-md);
    margin-bottom: var(--dt-xs);
}

.dt-memoria-secao-titulo:first-child {
    margin-top: 0;
}

.dt-memoria-lista {
    margin: 0;
    padding-left: 1.25rem;
}

.dt-memoria-dia-desconsiderado {
    color: var(--dt-on-variant);
}

/* --- Botões de ação por linha (Editar/Inativar/Reativar) — usados por toda listagem --- */
.dt-acoes-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--dt-xs);
}

.dt-btn-acao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 9999px;
    border: 1px solid transparent;
    background: none;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Editar: ação neutra e frequente */
.dt-btn-acao--editar {
    border-color: var(--dt-border);
    color: var(--dt-on-variant);
}

.dt-btn-acao--editar:hover {
    background-color: var(--dt-surface-low);
    border-color: var(--dt-outline);
    color: var(--dt-on-surface);
}

/* Inativar: muda disponibilidade em novas demandas — não é exclusão, mas merece
   um sinal visual de atenção (âmbar), não vermelho (RN-G2: não é destrutiva). */
.dt-btn-acao--inativar {
    border-color: var(--dt-warning);
    color: var(--dt-warning);
}

.dt-btn-acao--inativar:hover {
    background-color: var(--dt-warning-soft);
}

/* Reativar: ação reversível e de baixo risco — mesmo peso visual do Editar,
   com a cor primária para indicar retomada. */
.dt-btn-acao--reativar {
    border-color: var(--dt-primary);
    color: var(--dt-primary);
}

.dt-btn-acao--reativar:hover {
    background-color: rgba(15, 108, 189, 0.08);
}

/* Ver memória (Alertas): ação neutra e de consulta — mesmo peso visual do Editar. */
.dt-btn-acao--memoria {
    border-color: var(--dt-border);
    color: var(--dt-on-variant);
}

.dt-btn-acao--memoria:hover {
    background-color: var(--dt-surface-low);
    border-color: var(--dt-outline);
    color: var(--dt-on-surface);
}

/* Resolver (Alertas): encerra o alerta com sucesso — verde, mesma semântica de "Ativo". */
.dt-btn-acao--resolver {
    border-color: var(--dt-ativo-fg);
    color: var(--dt-ativo-fg);
}

.dt-btn-acao--resolver:hover {
    background-color: var(--dt-ativo-bg);
}

/* Dispensar (Alertas): descarta sem resolver — cinza neutro, mesma semântica de "Inativo"
   (não é destrutiva, apenas retira o alerta da atenção do desenvolvedor). */
.dt-btn-acao--dispensar {
    border-color: var(--dt-inativo-fg);
    color: var(--dt-inativo-fg);
}

.dt-btn-acao--dispensar:hover {
    background-color: var(--dt-inativo-bg);
}

/* --- Chip de matrícula (monoespaçado) — usado por toda listagem com Matrícula
   (Analistas, Clientes) --- */
.dt-matricula {
    display: inline-block;
    line-height: 1;
    font-family: var(--bs-font-monospace);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--dt-primary);
    background-color: rgba(15, 108, 189, 0.1);
    padding: 2px var(--dt-xs);
    border-radius: var(--dt-radius-sm);
}

/* --- Avatar com iniciais — usado por toda listagem com célula de nome --- */
.dt-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    background-color: var(--dt-surface-container);
    color: var(--dt-primary);
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* --- Célula de nome (avatar + texto) — usada por toda listagem com célula de nome --- */
.dt-nome-cell {
    display: flex;
    align-items: center;
    gap: var(--dt-sm);
    line-height: 1;
}

.dt-nome-cell.dt-inativo {
    opacity: 0.6;
}

.dt-nome-texto {
    font-weight: 600;
    color: var(--dt-on-surface);
}

/* --- Cabeçalho de seção dentro de um card de formulário — usado por todo
   formulário de cadastro (Analistas, Sistemas e futuros) --- */
.dt-form-section-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--dt-on-surface);
    margin: 0 0 var(--dt-md);
    padding-bottom: var(--dt-sm);
    border-bottom: 1px solid var(--dt-border);
}

/* --- Linha da Situação (toggle) — só aparece no modo Editar, em todo formulário --- */
.dt-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dt-md);
    padding: var(--dt-md);
    background-color: var(--dt-surface-low);
    border: 1px solid var(--dt-border);
    border-radius: var(--dt-radius);
}

.dt-toggle-row-title {
    display: block;
    font-weight: 600;
    color: var(--dt-on-surface);
}

.dt-toggle-row-desc {
    margin: 2px 0 0;
    font-size: 0.8125rem;
    color: var(--dt-on-variant);
}

/* --- Switch (Ativo/Inativo, Prioritária, filtros booleanos, etc.) ---
   Alterar o switch só muda o estado visual — nada é salvo nem confirmado nesse momento
   (quando usado em formulário, só é efetivado ao clicar em "Salvar").
   Componente único para todo switch do app — tamanho é obrigatório via modificador
   (.dt-switch-sm/.dt-switch-md/.dt-switch-lg) combinado com .dt-switch. Padrão do app:
   .dt-switch-md; .dt-switch-sm preserva o tamanho original (pré-variantes) para telas
   muito densas; .dt-switch-lg para destaque. */
.dt-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--dt-sm);
    cursor: pointer;
}

.dt-switch:has(input:disabled) {
    cursor: not-allowed;
    opacity: 0.6;
}

.dt-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.dt-switch-track {
    position: relative;
    display: inline-block;
    background-color: var(--dt-outline);
    border-radius: 9999px;
    flex-shrink: 0;
    transition: background-color 0.15s ease;
}

.dt-switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    background-color: #ffffff;
    border-radius: 50%;
    transition: transform 0.15s ease;
}

.dt-switch input:checked + .dt-switch-track {
    background-color: var(--dt-ativo-fg);
}

.dt-switch input:focus-visible + .dt-switch-track {
    outline: 2px solid var(--dt-primary);
    outline-offset: 2px;
}

/* Tamanho sm — dimensões originais do componente, mantidas para telas densas (ex.: célula de grid). */
.dt-switch-sm .dt-switch-track {
    width: 2.75rem;
    height: 1.5rem;
}

.dt-switch-sm .dt-switch-thumb {
    width: 1.25rem;
    height: 1.25rem;
}

.dt-switch-sm input:checked + .dt-switch-track .dt-switch-thumb {
    transform: translateX(1.25rem);
}

/* Tamanho md — padrão do app. */
.dt-switch-md .dt-switch-track {
    width: 3rem;
    height: 1.625rem;
}

.dt-switch-md .dt-switch-thumb {
    width: 1.375rem;
    height: 1.375rem;
}

.dt-switch-md input:checked + .dt-switch-track .dt-switch-thumb {
    transform: translateX(1.375rem);
}

/* Tamanho lg — para destaque pontual. */
.dt-switch-lg .dt-switch-track {
    width: 3.75rem;
    height: 2rem;
}

.dt-switch-lg .dt-switch-thumb {
    width: 1.75rem;
    height: 1.75rem;
}

.dt-switch-lg input:checked + .dt-switch-track .dt-switch-thumb {
    transform: translateX(1.75rem);
}

.dt-switch-label {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--dt-on-variant);
}

/* --- Rodapé de ações de formulário — usado por todo formulário de cadastro --- */
.dt-form-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--dt-sm);
    margin-top: var(--dt-lg);
}

/* --- Modais padronizados — usados por toda modal do app. Dois arquétipos de cabeçalho:
   (1) ícone inline + título à esquerda, para modais de formulário/informativos (`.modal-header`
   comum, só com `.dt-modal-cabecalho-icone` antes do título); (2) ícone circular centralizado,
   sem `.modal-header` tradicional, para confirmação de risco e erro de validação
   (`.dt-modal-corpo-centralizado`). --- */
.dt-modal-cabecalho-icone {
    display: inline-flex;
    color: var(--dt-primary);
    flex-shrink: 0;
}

.dt-modal-corpo-centralizado {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--dt-xs);
}

.dt-modal-icone-central {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 9999px;
    margin-bottom: var(--dt-sm);
}

.dt-modal-icone-central--perigo {
    background-color: #fde7e9;
    color: #a4262c;
}

.dt-modal-icone-central--sucesso {
    background-color: var(--dt-ativo-bg);
    color: var(--dt-ativo-fg);
}

.dt-modal-titulo-central {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--dt-on-surface);
}

.dt-modal-descricao-central {
    color: var(--dt-on-variant);
    font-size: 0.9rem;
}

.dt-modal-lista-erros {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--dt-xs);
    text-align: left;
    background-color: var(--dt-surface-low);
    border-radius: var(--dt-radius);
    margin: var(--dt-md) 0 0;
    padding: var(--dt-sm) var(--dt-md);
    width: 100%;
}

.dt-modal-lista-erros li {
    display: flex;
    align-items: flex-start;
    gap: var(--dt-xs);
    color: var(--dt-on-variant);
    font-size: 0.875rem;
}

.dt-modal-lista-erros svg {
    color: #a4262c;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ============================================================
   4. Responsivo
   ============================================================ */
@media (max-width: 767.98px) {
    .dt-sidebar {
        display: none;
    }

    .dt-main {
        margin-left: 0;
    }

    .dt-content {
        padding: var(--dt-md);
        padding-bottom: calc(var(--dt-appbar-h) + var(--dt-md));
    }

    .dt-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: var(--dt-appbar-h);
        justify-content: space-around;
        align-items: center;
        background-color: var(--dt-surface);
        border-top: 1px solid var(--dt-border);
        z-index: 50;
        box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.05);
    }

    .dt-bottom-nav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        color: var(--dt-on-variant);
        text-decoration: none;
        font-size: 10px;
        font-weight: 500;
    }

    .dt-bottom-nav a.active {
        color: var(--dt-primary);
        font-weight: 700;
    }
}