/* =====================================================================================
   DOCNITZ DESIGN SYSTEM — v2 (Fases 1 · 4 · 5 · 7)
   Camada visual própria sobre AdminLTE 4.9 / Bootstrap 5.3. AdminLTE = infraestrutura;
   a identidade é definida aqui. Documentação: docs/DESIGN-SYSTEM.md

   Ordem de carregamento (assets/AppAsset.php):
     adminlte.min.css → docnitz-tokens.css → docnitz-theme.css (este) → docnitz-layout.css
     → docnitz-tables.css → docnitz-dashboard.css → app.css (sobras de telas)

   REGRA DE OURO — uma definição por componente:
     o componente .docnitz-* é a fonte, e a classe Bootstrap equivalente (gerada pelos widgets
     do Yii) entra no MESMO seletor: `.docnitz-btn, .btn { ... }`. Quando o Bootstrap já lê
     variáveis (--bs-btn-*, --bs-card-*, --bs-alert-*, --bs-modal-*...), o componente Docnitz
     usa essas mesmas variáveis — assim as variantes do Bootstrap e as nossas nunca divergem.

   Estrutura:
     1. Tokens → docnitz-tokens.css (arquivo próprio, compartilhado com a landing)
     2. Ponte com o Bootstrap/AdminLTE (variáveis --bs-* globais)
     3. Base (tipografia, foco, seleção)
     4. Componentes:
          4.1 card            4.2 botões          4.3 campos (input/select/check/switch/grupo)
          4.4 formulário (rodapé, "Mais detalhes")  4.5 badges/status   4.6 abas
          4.7 menus suspensos · tooltip · popover   4.8 modal (+ confirmação)
          4.9 alertas         4.10 toasts         4.11 tabela · paginação
          4.12 cabeçalho de página · vazio · avatar · indicador (KPI) · ícone em bloco
     5. Movimento (keyframes) e preferências de acessibilidade
   ===================================================================================== */


/* =====================================================================================
   1. TOKENS — em web/css/docnitz-tokens.css (carregado antes deste arquivo; a landing também usa).
   ===================================================================================== */


/* =====================================================================================
   2. PONTE COM BOOTSTRAP / ADMINLTE
   Variáveis globais: todo componente Bootstrap passa a usar a paleta, os raios e a fonte Docnitz.
   (As classes de componente — .btn, .card, .form-control... — recebem o visual na seção 4,
   agrupadas com o componente Docnitz equivalente.)
   ===================================================================================== */
:root,
[data-bs-theme="light"] {
    --bs-primary: var(--docnitz-primary);
    --bs-primary-rgb: var(--docnitz-primary-rgb);
    --bs-primary-text-emphasis: var(--docnitz-deep);
    --bs-primary-bg-subtle: var(--docnitz-primary-100);
    --bs-primary-border-subtle: var(--docnitz-primary-200);
    /* Utilitários de status (text-danger, bg-warning, progress-bar bg-*) na paleta Docnitz */
    --bs-success: var(--docnitz-success);
    --bs-success-rgb: var(--docnitz-success-rgb);
    --bs-warning: var(--docnitz-warning);
    --bs-warning-rgb: var(--docnitz-warning-rgb);
    --bs-danger: var(--docnitz-danger);
    --bs-danger-rgb: var(--docnitz-danger-rgb);
    --bs-info: var(--docnitz-info);
    --bs-info-rgb: var(--docnitz-accent-rgb);
    --bs-success-text-emphasis: var(--docnitz-success-text);
    --bs-success-bg-subtle: var(--docnitz-success-bg);
    --bs-success-border-subtle: var(--docnitz-success-border);
    --bs-warning-text-emphasis: var(--docnitz-warning-text);
    --bs-warning-bg-subtle: var(--docnitz-warning-bg);
    --bs-warning-border-subtle: var(--docnitz-warning-border);
    --bs-danger-text-emphasis: var(--docnitz-danger-text);
    --bs-danger-bg-subtle: var(--docnitz-danger-bg);
    --bs-danger-border-subtle: var(--docnitz-danger-border);
    --bs-info-text-emphasis: var(--docnitz-info-text);
    --bs-info-bg-subtle: var(--docnitz-info-bg);
    --bs-info-border-subtle: var(--docnitz-info-border);
    --bs-secondary-text-emphasis: var(--docnitz-neutral-text);
    --bs-secondary-bg-subtle: var(--docnitz-neutral-bg);
    --bs-secondary-border-subtle: var(--docnitz-neutral-border);

    --bs-link-color: var(--docnitz-dark);
    --bs-link-color-rgb: var(--docnitz-dark-rgb);
    --bs-link-hover-color: var(--docnitz-deep);
    --bs-link-hover-color-rgb: var(--docnitz-deep-rgb);
    --bs-focus-ring-color: rgba(var(--docnitz-accent-rgb), .25);

    --bs-body-font-family: var(--docnitz-font);
    --bs-body-font-size: var(--docnitz-text-base);
    --bs-body-color: var(--docnitz-text);
    --bs-emphasis-color: var(--docnitz-deep);
    --bs-body-bg: var(--docnitz-card);
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-tertiary-bg: var(--docnitz-bg);
    --bs-tertiary-bg-rgb: 245, 249, 249;
    --bs-secondary-bg: var(--docnitz-surface-2);
    --bs-secondary-bg-rgb: 237, 243, 243;
    --bs-secondary-color: var(--docnitz-text-muted);
    --bs-secondary-color-rgb: 95, 100, 104;
    --bs-tertiary-color: var(--docnitz-gray);
    --bs-tertiary-color-rgb: 145, 149, 153;
    --bs-border-color: var(--docnitz-silver);
    --bs-border-color-translucent: var(--docnitz-border-strong);

    /* Validação: erro em vermelho Docnitz; "válido" fica neutro (sem verde gritante a cada campo) */
    --bs-form-invalid-color: var(--docnitz-danger-text);
    --bs-form-invalid-border-color: var(--docnitz-danger);
    --bs-form-valid-color: var(--docnitz-success-text);
    --bs-form-valid-border-color: var(--docnitz-silver);

    --bs-border-radius-sm: var(--docnitz-radius-sm);
    --bs-border-radius: var(--docnitz-radius-control);
    --bs-border-radius-lg: var(--docnitz-radius-md);
    --bs-border-radius-xl: var(--docnitz-radius-lg);
    --bs-border-radius-xxl: var(--docnitz-radius-xl);
    --bs-box-shadow-sm: var(--docnitz-shadow-xs);
    --bs-box-shadow: var(--docnitz-shadow-md);
    --bs-box-shadow-lg: var(--docnitz-shadow-lg);
}

.pagination {
    --bs-pagination-color: var(--docnitz-dark);
    --bs-pagination-hover-color: var(--docnitz-deep);
    --bs-pagination-focus-color: var(--docnitz-deep);
    --bs-pagination-active-bg: var(--docnitz-primary);
    --bs-pagination-active-border-color: var(--docnitz-primary);
    --bs-pagination-focus-box-shadow: var(--docnitz-ring);
}
.list-group {
    --bs-list-group-active-bg: var(--docnitz-primary);
    --bs-list-group-active-border-color: var(--docnitz-primary);
    --bs-list-group-border-color: var(--docnitz-border);
}
.progress,
.progress-stacked {
    --bs-progress-height: .375rem;
    --bs-progress-bar-bg: var(--docnitz-primary);
    --bs-progress-bg: var(--docnitz-neutral-bg);
    --bs-progress-border-radius: var(--docnitz-radius-pill);
}
body,
.bg-body-tertiary { background-color: var(--docnitz-bg) !important; }


/* =====================================================================================
   3. BASE
   ===================================================================================== */
body {
    font-family: var(--docnitz-font);
    color: var(--docnitz-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "cv11", "ss01";
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
    color: var(--docnitz-deep);
    letter-spacing: -.015em;
}
::selection {
    background: var(--docnitz-selection);
}
:focus-visible {
    outline: 2px solid var(--docnitz-accent);
    outline-offset: 2px;
}
.tabular-nums { font-variant-numeric: tabular-nums; }
.min-w-0 { min-width: 0; }   /* filho flex que precisa truncar texto (text-truncate) */


/* =====================================================================================
   4. COMPONENTES
   ===================================================================================== */

/* ------------------------------------------------------------------ 4.1 Card
   .docnitz-card é a fonte; .card do Bootstrap (inclusive "card card-flat", que virou só um
   apelido sem regras próprias) recebe exatamente o mesmo visual. */
.docnitz-card,
.card {
    --bs-card-bg: var(--docnitz-card);
    --bs-card-border-width: 1px;
    --bs-card-border-color: var(--docnitz-border-card);
    --bs-card-border-radius: var(--docnitz-radius-lg);
    --bs-card-inner-border-radius: calc(var(--docnitz-radius-lg) - 1px);
    --bs-card-spacer-y: var(--docnitz-gutter);
    --bs-card-spacer-x: var(--docnitz-gutter);
    --bs-card-cap-padding-y: 1.125rem;
    --bs-card-cap-padding-x: var(--docnitz-gutter);
    --bs-card-cap-bg: transparent;
    --bs-card-cap-color: var(--docnitz-deep);
    --bs-card-box-shadow: var(--docnitz-shadow-card);
    --bs-card-title-color: var(--docnitz-deep);
    background-color: var(--docnitz-card);
    border: 1px solid var(--docnitz-border-card);
    border-radius: var(--docnitz-radius-lg);
    box-shadow: var(--docnitz-shadow-card);
    transition: box-shadow var(--docnitz-base) var(--docnitz-ease),
                transform var(--docnitz-base) var(--docnitz-ease),
                border-color var(--docnitz-base) var(--docnitz-ease);
}
.docnitz-card-header,
.card > .card-header {
    padding: 1.125rem var(--docnitz-gutter);
    background-color: transparent;
    border-bottom: 1px solid var(--docnitz-border);
    border-radius: var(--bs-card-inner-border-radius, calc(var(--docnitz-radius-lg) - 1px))
                   var(--bs-card-inner-border-radius, calc(var(--docnitz-radius-lg) - 1px)) 0 0;
}
.docnitz-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}
.docnitz-card-title,
.card-title,
.card > .card-header > :is(h2, h3, h4, h5, h6) {
    float: none;
    margin: 0;
    font-size: 1rem;
    font-weight: var(--docnitz-weight-semibold);
    line-height: 1.35;
    letter-spacing: -.01em;
    color: var(--docnitz-deep);
}
.card > .card-header > :is(h2, h3, h4, h5, h6) > .bi:first-child { color: var(--docnitz-primary); }
.docnitz-card-subtitle {
    margin: .125rem 0 0;
    font-size: var(--docnitz-text-sm);
    color: var(--docnitz-text-muted);
}
.docnitz-card-body {
    padding: var(--docnitz-gutter);
}
.docnitz-card-footer,
.card > .card-footer {
    padding: .875rem var(--docnitz-gutter);
    background-color: transparent;
    border-top: 1px solid var(--docnitz-border);
}
/* O clearfix do AdminLTE vira um item fantasma em cabeçalhos/corpos flex (empurrava "justify-content-between") */
.card-header::after,
.card-body::after,
.card-footer::after { content: none; }

/* Clicável: hover sutil só aqui (a.card cobre os contadores a.stat-card) */
.docnitz-card.is-interactive,
a.docnitz-card,
.card.is-interactive,
a.card {
    color: inherit;
    text-decoration: none;
}
.docnitz-card.is-interactive:hover,
a.docnitz-card:hover,
.card.is-interactive:hover,
a.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--docnitz-shadow-card-hover);
    border-color: var(--docnitz-border-strong);
    color: inherit;
}
/* Destaque lateral (resumo de funcionário/cliente) */
.docnitz-card.is-accent,
.card.card-accent {
    border-left: 4px solid var(--docnitz-primary);
}

/* ------------------------------------------------------------------ 4.2 Botões
   Usa as variáveis --bs-btn-* do próprio Bootstrap: .docnitz-btn-primary e .btn-primary são a
   mesma regra. Ícone + texto: o espaço vem do gap (o "me-1" dos ícones é neutralizado). */
.docnitz-btn,
.btn {
    --bs-btn-padding-x: 1.125rem;
    --bs-btn-padding-y: .5rem;
    --bs-btn-font-family: inherit;
    --bs-btn-font-size: var(--docnitz-text-base);
    --bs-btn-font-weight: var(--docnitz-weight-semibold);
    --bs-btn-line-height: 1.25;
    --bs-btn-border-width: 1px;
    --bs-btn-border-radius: var(--docnitz-radius-control);
    --bs-btn-box-shadow: none;
    --bs-btn-disabled-opacity: .5;
    --bs-btn-focus-box-shadow: var(--docnitz-ring);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: var(--docnitz-control-h);
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
    border-radius: var(--bs-btn-border-radius);
    background-color: var(--bs-btn-bg);
    color: var(--bs-btn-color);
    font-family: var(--bs-btn-font-family);
    font-size: var(--bs-btn-font-size);
    font-weight: var(--bs-btn-font-weight);
    line-height: var(--bs-btn-line-height);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--docnitz-fast) var(--docnitz-ease),
                border-color var(--docnitz-fast) var(--docnitz-ease),
                color var(--docnitz-fast) var(--docnitz-ease),
                box-shadow var(--docnitz-fast) var(--docnitz-ease),
                transform var(--docnitz-fast) var(--docnitz-ease);
}
/* Padrão do componente Docnitz sem variante (no .btn quem dá o padrão é o próprio Bootstrap) */
.docnitz-btn {
    --bs-btn-color: var(--docnitz-text);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--docnitz-deep);
    --bs-btn-hover-bg: var(--docnitz-primary-50);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--docnitz-deep);
    --bs-btn-active-bg: var(--docnitz-primary-100);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--docnitz-text);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
}
.docnitz-btn:hover,
.btn:hover {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}
.docnitz-btn:focus-visible,
.btn:focus-visible {
    outline: 0;
    box-shadow: var(--bs-btn-focus-box-shadow);
}
.docnitz-btn:active,
.docnitz-btn.active,
.btn:active,
.btn.active,
.btn.show {
    color: var(--bs-btn-active-color);
    background-color: var(--bs-btn-active-bg);
    border-color: var(--bs-btn-active-border-color);
}
.docnitz-btn:active,
.btn:active { transform: translateY(1px); }
.docnitz-btn:disabled,
.docnitz-btn.disabled,
.docnitz-btn[aria-disabled="true"],
.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
    color: var(--bs-btn-disabled-color);
    background-color: var(--bs-btn-disabled-bg);
    border-color: var(--bs-btn-disabled-border-color);
    opacity: var(--bs-btn-disabled-opacity);
    box-shadow: none;
    pointer-events: none;
}
.docnitz-btn > .bi,
.btn > .bi { font-size: 1.05em; line-height: 1; }
.docnitz-btn > .bi:is(.me-1, .me-2, .ms-1, .ms-2),
.btn > .bi:is(.me-1, .me-2, .ms-1, .ms-2) { margin-inline: 0 !important; }

/* Carregando (web/js/app.js adiciona is-loading ao enviar formulários POST): o texto continua
   ocupando o espaço (largura estável) e um único spinner aparece no centro. */
.docnitz-btn.is-loading,
.btn.is-loading {
    color: transparent !important;
    opacity: 1;
    pointer-events: none;
}
.docnitz-btn.is-loading::after,
.btn.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.1em;
    height: 1.1em;
    margin: -.55em 0 0 -.55em;
    border: 2px solid var(--bs-btn-color);
    border-right-color: transparent;
    border-radius: 50%;
    animation: docnitz-spin .7s linear infinite;
}

/* Variantes */
.docnitz-btn-primary,
.btn-primary {
    --bs-btn-color: var(--docnitz-on-color);
    --bs-btn-bg: var(--docnitz-primary);
    --bs-btn-border-color: var(--docnitz-primary);
    --bs-btn-hover-color: var(--docnitz-on-color);
    --bs-btn-hover-bg: var(--docnitz-dark);
    --bs-btn-hover-border-color: var(--docnitz-dark);
    --bs-btn-active-color: var(--docnitz-on-color);
    --bs-btn-active-bg: var(--docnitz-primary-press);
    --bs-btn-active-border-color: var(--docnitz-primary-press);
    --bs-btn-disabled-color: var(--docnitz-on-color);
    --bs-btn-disabled-bg: var(--docnitz-primary);
    --bs-btn-disabled-border-color: var(--docnitz-primary);
    box-shadow: var(--docnitz-shadow-btn);
}
/* Secundário: teal suave (ação de apoio com a cor da marca) */
.docnitz-btn-secondary,
.btn-secondary {
    --bs-btn-color: var(--docnitz-dark);
    --bs-btn-bg: var(--docnitz-primary-50);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--docnitz-deep);
    --bs-btn-hover-bg: var(--docnitz-primary-100);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--docnitz-deep);
    --bs-btn-active-bg: var(--docnitz-primary-200);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--docnitz-dark);
    --bs-btn-disabled-bg: var(--docnitz-primary-50);
    --bs-btn-disabled-border-color: transparent;
}
/* Contorno neutro (o "secundário" das telas: Editar, Baixar, ⋯) */
.docnitz-btn-outline,
.btn-outline-secondary,
.btn-light {
    --bs-btn-color: var(--docnitz-text);
    --bs-btn-bg: var(--docnitz-card);
    --bs-btn-border-color: var(--docnitz-silver);
    --bs-btn-hover-color: var(--docnitz-dark);
    --bs-btn-hover-bg: var(--docnitz-card);
    --bs-btn-hover-border-color: var(--docnitz-primary);
    --bs-btn-active-color: var(--docnitz-deep);
    --bs-btn-active-bg: var(--docnitz-primary-50);
    --bs-btn-active-border-color: var(--docnitz-primary);
    --bs-btn-disabled-color: var(--docnitz-text-muted);
    --bs-btn-disabled-bg: var(--docnitz-card);
    --bs-btn-disabled-border-color: var(--docnitz-silver);
}
/* Contorno na cor da marca (ex.: "Renovar" nas listas, "Ver planos") */
.docnitz-btn-outline-primary,
.btn-outline-primary {
    --bs-btn-color: var(--docnitz-dark);
    --bs-btn-bg: var(--docnitz-card);
    --bs-btn-border-color: var(--docnitz-primary-200);
    --bs-btn-hover-color: var(--docnitz-deep);
    --bs-btn-hover-bg: var(--docnitz-primary-50);
    --bs-btn-hover-border-color: var(--docnitz-primary);
    --bs-btn-active-color: var(--docnitz-deep);
    --bs-btn-active-bg: var(--docnitz-primary-100);
    --bs-btn-active-border-color: var(--docnitz-primary);
    --bs-btn-disabled-color: var(--docnitz-dark);
    --bs-btn-disabled-bg: var(--docnitz-card);
    --bs-btn-disabled-border-color: var(--docnitz-primary-200);
}
/* Fantasma: sem caixa até o hover ("Cancelar", "Limpar filtros") */
.docnitz-btn-ghost,
.btn-link {
    --bs-btn-color: var(--docnitz-text-muted);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--docnitz-deep);
    --bs-btn-hover-bg: var(--docnitz-hover);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--docnitz-deep);
    --bs-btn-active-bg: var(--docnitz-press);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--docnitz-text-muted);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-font-weight: var(--docnitz-weight-medium);
    text-decoration: none;
}
.btn-link:hover,
.btn-link:focus-visible { text-decoration: none; }
.docnitz-btn-danger,
.btn-danger {
    --bs-btn-color: var(--docnitz-on-color);
    --bs-btn-bg: var(--docnitz-danger);
    --bs-btn-border-color: var(--docnitz-danger);
    --bs-btn-hover-color: var(--docnitz-on-color);
    --bs-btn-hover-bg: var(--docnitz-danger-hover);
    --bs-btn-hover-border-color: var(--docnitz-danger-hover);
    --bs-btn-active-color: var(--docnitz-on-color);
    --bs-btn-active-bg: var(--docnitz-danger-press);
    --bs-btn-active-border-color: var(--docnitz-danger-press);
    --bs-btn-disabled-color: var(--docnitz-on-color);
    --bs-btn-disabled-bg: var(--docnitz-danger);
    --bs-btn-disabled-border-color: var(--docnitz-danger);
    --bs-btn-focus-box-shadow: var(--docnitz-ring-danger);
}
/* Perigo suave (Inativar, Cancelar convite): visível sem gritar */
.docnitz-btn-danger-soft,
.btn-outline-danger {
    --bs-btn-color: var(--docnitz-danger-text);
    --bs-btn-bg: var(--docnitz-danger-bg);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--docnitz-danger-text);
    --bs-btn-hover-bg: var(--docnitz-danger-soft-hover);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--docnitz-on-color);
    --bs-btn-active-bg: var(--docnitz-danger);
    --bs-btn-active-border-color: var(--docnitz-danger);
    --bs-btn-disabled-color: var(--docnitz-danger-text);
    --bs-btn-disabled-bg: var(--docnitz-danger-bg);
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-focus-box-shadow: var(--docnitz-ring-danger);
}
.docnitz-btn-success,
.btn-success {
    --bs-btn-color: var(--docnitz-on-color);
    --bs-btn-bg: var(--docnitz-success);
    --bs-btn-border-color: var(--docnitz-success);
    --bs-btn-hover-color: var(--docnitz-on-color);
    --bs-btn-hover-bg: var(--docnitz-success-hover);
    --bs-btn-hover-border-color: var(--docnitz-success-hover);
    --bs-btn-active-color: var(--docnitz-on-color);
    --bs-btn-active-bg: var(--docnitz-success-text);
    --bs-btn-active-border-color: var(--docnitz-success-text);
    --bs-btn-disabled-color: var(--docnitz-on-color);
    --bs-btn-disabled-bg: var(--docnitz-success);
    --bs-btn-disabled-border-color: var(--docnitz-success);
}
.docnitz-btn-success-soft,
.btn-outline-success {
    --bs-btn-color: var(--docnitz-success-text);
    --bs-btn-bg: var(--docnitz-success-bg);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--docnitz-success-text);
    --bs-btn-hover-bg: var(--docnitz-success-soft-hover);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--docnitz-on-color);
    --bs-btn-active-bg: var(--docnitz-success);
    --bs-btn-active-border-color: var(--docnitz-success);
    --bs-btn-disabled-color: var(--docnitz-success-text);
    --bs-btn-disabled-bg: var(--docnitz-success-bg);
    --bs-btn-disabled-border-color: transparent;
}

/* Tamanhos */
.docnitz-btn-sm,
.btn-sm {
    --bs-btn-padding-x: .75rem;
    --bs-btn-padding-y: .25rem;
    --bs-btn-font-size: var(--docnitz-text-sm);
    --bs-btn-border-radius: var(--docnitz-radius-sm);
    gap: .375rem;
    min-height: var(--docnitz-control-h-sm);
}
.docnitz-btn-lg,
.btn-lg {
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-padding-y: .625rem;
    --bs-btn-font-size: var(--docnitz-text-lg);
    --bs-btn-border-radius: var(--docnitz-radius-md);
    min-height: var(--docnitz-control-h-lg);
}
.docnitz-btn-block { width: 100%; }

/* Botão só com ícone (sempre com aria-label ou texto .visually-hidden) */
.docnitz-btn-icon,
.btn-icon {
    --bs-btn-padding-x: 0;
    width: var(--docnitz-control-h);
}
.docnitz-btn-icon:is(.docnitz-btn-sm, .btn-sm),
.btn-icon:is(.docnitz-btn-sm, .btn-sm) { width: var(--docnitz-control-h-sm); }

/* Grupo de ações (ex.: ações de linha de tabela) */
.docnitz-actions {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

/* Botão de fechar do Bootstrap (alertas antigos, modais) */
.btn-close {
    --bs-btn-close-opacity: .55;
    --bs-btn-close-hover-opacity: .9;
    --bs-btn-close-focus-shadow: var(--docnitz-ring);
    border-radius: var(--docnitz-radius-sm);
}

/* ------------------------------------------------------------------ 4.3 Campos
   .docnitz-input = .form-control · .docnitz-select = .form-select · .docnitz-label = .form-label
   .docnitz-help = .form-text · .docnitz-error = .invalid-feedback (ActiveForm bootstrap5) */
.docnitz-label,
.form-label {
    margin-bottom: .375rem;
    font-size: var(--docnitz-text-label);
    font-weight: var(--docnitz-weight-semibold);
    line-height: 1.35;
    color: var(--docnitz-deep);
}
.docnitz-label { display: block; }
/* Obrigatório: asterisco discreto (classe "required" do ActiveForm; desligado nas telas de acesso) */
.required > .form-label::after,
.docnitz-label.is-required::after {
    content: " *";
    color: var(--docnitz-danger);
    font-weight: var(--docnitz-weight-medium);
    opacity: .85;
}
.auth-page .required > .form-label::after { content: none; }

.docnitz-input,
.docnitz-select,
.form-control,
.form-select {
    display: block;
    width: 100%;
    min-height: var(--docnitz-control-h);
    padding: .625rem .875rem;
    border: 1px solid var(--docnitz-silver);
    border-radius: var(--docnitz-radius-control);
    background-color: var(--docnitz-card);
    color: var(--docnitz-text);
    font-family: inherit;
    font-size: var(--docnitz-text-base);
    font-weight: 400;
    line-height: 1.4;
    box-shadow: none;
    appearance: none;
    transition: border-color var(--docnitz-fast) var(--docnitz-ease),
                box-shadow var(--docnitz-fast) var(--docnitz-ease),
                background-color var(--docnitz-fast) var(--docnitz-ease);
}
.docnitz-input::placeholder,
.form-control::placeholder { color: var(--docnitz-gray); opacity: 1; }
.docnitz-input:hover:not(:disabled):not([readonly]):not(:focus),
.docnitz-select:hover:not(:disabled):not(:focus),
.form-control:hover:not(:disabled):not([readonly]):not(:focus),
.form-select:hover:not(:disabled):not(:focus) { border-color: var(--docnitz-silver-hover); }
.docnitz-input:focus,
.docnitz-select:focus,
.form-control:focus,
.form-select:focus {
    outline: 0;
    border-color: var(--docnitz-accent);
    background-color: var(--docnitz-card);
    color: var(--docnitz-text);
    box-shadow: var(--docnitz-ring);
}
.docnitz-input:disabled,
.docnitz-select:disabled,
.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
    background-color: var(--docnitz-surface-muted);
    color: var(--docnitz-text-muted);
    opacity: 1;
}
.docnitz-input:disabled,
.docnitz-select:disabled,
.form-control:disabled,
.form-select:disabled { cursor: not-allowed; }
textarea.docnitz-input,
textarea.form-control { min-height: 5.5rem; resize: vertical; }

/* Select: seta própria; o Bootstrap ainda consegue empilhar o ícone de validação na 2ª camada */
.docnitz-select,
.form-select {
    --bs-form-select-bg-img: var(--docnitz-icon-chevron);
    padding-right: 2.5rem;
    background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
    background-repeat: no-repeat;
    background-position: right .875rem center, center right 2.5rem;
    background-size: 16px 16px, 1rem 1rem;
    cursor: pointer;
}

/* Arquivo: botão "Escolher arquivo" em teal suave, dentro do campo */
.docnitz-input[type="file"],
.form-control[type="file"] { padding: .3125rem; cursor: pointer; }
.docnitz-input::file-selector-button,
.form-control::file-selector-button {
    margin: 0 .75rem 0 0;
    padding: .3125rem .875rem;
    border: 0;
    border-radius: var(--docnitz-radius-sm);
    background-color: var(--docnitz-primary-50);
    color: var(--docnitz-dark);
    font-weight: var(--docnitz-weight-semibold);
    transition: background-color var(--docnitz-fast) var(--docnitz-ease), color var(--docnitz-fast) var(--docnitz-ease);
}
.docnitz-input:hover:not(:disabled)::file-selector-button,
.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
    background-color: var(--docnitz-primary-100);
    color: var(--docnitz-deep);
}

/* Tamanho compacto (barras de filtro): 40 px, fonte 13 px.
   .docnitz-input-sm/.docnitz-select-sm = .form-control-sm/.form-select-sm (e o .input-group-sm) */
.docnitz-input-sm,
.docnitz-select-sm,
.form-control-sm,
.form-select-sm,
.input-group-sm > :is(.form-control, .form-select, .input-group-text) {
    min-height: var(--docnitz-field-h-sm);
    padding: .4375rem .75rem;
    font-size: var(--docnitz-text-sm);
    border-radius: var(--docnitz-radius-sm);
}
.docnitz-select-sm,
.form-select-sm,
.input-group-sm > .form-select { padding-right: 2.25rem; background-position: right .75rem center, center right 2.25rem; }
.docnitz-field-icon > :is(.docnitz-input-sm, .form-control-sm) { padding-left: 2.25rem; }
.docnitz-field-icon:has(> :is(.docnitz-input-sm, .form-control-sm)) > .bi { left: .75rem; font-size: .875rem; }
.form-control-lg,
.form-select-lg {
    min-height: var(--docnitz-control-h-lg);
    font-size: var(--docnitz-text-lg);
    border-radius: var(--docnitz-radius-md);
}

/* Erro: borda vermelha, sem o ícone dentro do campo (o ícone fica na mensagem) */
.docnitz-input.is-invalid,
.docnitz-select.is-invalid,
.form-control.is-invalid,
.form-select.is-invalid { border-color: var(--docnitz-danger); }
.docnitz-input.is-invalid,
.form-control.is-invalid { padding-right: .875rem; background-image: none; }
.form-control[type="file"].is-invalid { padding-right: .3125rem; }
.docnitz-input.is-invalid:focus,
.docnitz-select.is-invalid:focus,
.form-control.is-invalid:focus,
.form-select.is-invalid:focus { border-color: var(--docnitz-danger); box-shadow: var(--docnitz-ring-danger); }
/* "Válido" (validação do ActiveForm ao digitar) fica neutro: só o erro chama atenção */
.form-control.is-valid {
    border-color: var(--docnitz-silver);
    padding-right: .875rem;
    background-image: none;
}
.form-control.is-valid:focus,
.form-select.is-valid:focus { border-color: var(--docnitz-accent); box-shadow: var(--docnitz-ring); }
.form-select.is-valid { border-color: var(--docnitz-silver); }
.form-select.is-invalid:not([multiple]):not([size]),
.form-select.is-valid:not([multiple]):not([size]) {
    --bs-form-select-bg-icon: none;
    padding-right: 2.5rem;
    background-position: right .875rem center, center right 2.5rem;
    background-size: 16px 16px, 1rem 1rem;
}

/* Campo com ícone: <div class="docnitz-field-icon"><i class="bi bi-search" aria-hidden="true"></i><input class="form-control"></div>
   (busca, e-mail, senha...). Ícone à direita: adicione .is-end no wrapper. */
.docnitz-field-icon {
    position: relative;
}
.docnitz-field-icon > .bi {
    position: absolute;
    top: 50%;
    left: .875rem;
    z-index: 2;
    transform: translateY(-50%);
    color: var(--docnitz-gray);
    pointer-events: none;
    transition: color var(--docnitz-fast) var(--docnitz-ease);
}
.docnitz-field-icon > :is(.docnitz-input, .form-control) { padding-left: 2.5rem; }
.docnitz-field-icon:focus-within > .bi { color: var(--docnitz-accent); }
.docnitz-field-icon.is-end > .bi { left: auto; right: .875rem; }
.docnitz-field-icon.is-end > :is(.docnitz-input, .form-control) { padding-left: .875rem; padding-right: 2.5rem; }

/* Grupo (prefixo/sufixo): "dias", ícone de busca */
.input-group-text {
    padding: .625rem .875rem;
    border: 1px solid var(--docnitz-silver);
    border-radius: var(--docnitz-radius-control);
    background-color: var(--docnitz-surface-muted);
    color: var(--docnitz-text-muted);
    font-size: var(--docnitz-text-base);
    transition: border-color var(--docnitz-fast) var(--docnitz-ease), color var(--docnitz-fast) var(--docnitz-ease);
}
/* Prefixo só com ícone: parece um ícone dentro do campo */
.input-group > .input-group-text:has(> .bi:only-child) {
    padding-right: 0;
    border-right: 0;
    background-color: var(--docnitz-card);
    color: var(--docnitz-gray);
}
.input-group > .input-group-text:has(> .bi:only-child) + :is(.form-control, .form-select) {
    border-left: 0;
    padding-left: .625rem;
}
/* Foco no grupo inteiro: um único anel em volta de campo + prefixo/sufixo */
.input-group:has(> .input-group-text:not(.border-0)):focus-within {
    border-radius: var(--docnitz-radius-control);
    box-shadow: var(--docnitz-ring);
}
.input-group-sm:has(> .input-group-text:not(.border-0)):focus-within { border-radius: var(--docnitz-radius-sm); }
.input-group:has(> .input-group-text:not(.border-0)):focus-within > :is(.form-control, .form-select) { box-shadow: none; }
.input-group:has(> .input-group-text:not(.border-0)):focus-within > .input-group-text:not(.border-0) { border-color: var(--docnitz-accent); }
.input-group:has(> .input-group-text:not(.border-0)):focus-within > .input-group-text:has(> .bi:only-child) { color: var(--docnitz-accent); }
.input-group:has(> .is-invalid) > .input-group-text { border-color: var(--docnitz-danger); }
.input-group:has(> .is-invalid):focus-within { box-shadow: var(--docnitz-ring-danger); }
/* O erro do ActiveForm fica fora do .input-group: mostra mesmo assim */
.input-group:has(> .is-invalid) ~ .invalid-feedback { display: block; }

/* Checkbox, rádio e switch */
.form-check { min-height: 1.5rem; }
.form-check-input {
    --bs-form-check-bg: var(--docnitz-card);
    width: 1.125em;
    height: 1.125em;
    margin-top: .175em;
    border: 1.5px solid var(--docnitz-silver);
    cursor: pointer;
    transition: background-color var(--docnitz-fast) var(--docnitz-ease),
                border-color var(--docnitz-fast) var(--docnitz-ease),
                box-shadow var(--docnitz-fast) var(--docnitz-ease),
                background-position var(--docnitz-base) var(--docnitz-ease);
}
.form-check-input[type="checkbox"] { border-radius: var(--docnitz-radius-xs); }
.form-check-input:hover:not(:disabled):not(:checked) { border-color: var(--docnitz-light); }
.form-check-input:focus {
    border-color: var(--docnitz-accent);
    box-shadow: var(--docnitz-ring);
}
.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate,
.form-check-input.is-valid:checked {
    background-color: var(--docnitz-primary);
    border-color: var(--docnitz-primary);
}
.form-check-input.is-valid { border-color: var(--docnitz-silver); }
.form-check-input.is-valid ~ .form-check-label { color: inherit; }
.form-check-input.is-invalid { border-color: var(--docnitz-danger); }
.form-check-label { cursor: pointer; }
.form-check-input:disabled ~ .form-check-label { cursor: not-allowed; }
.form-switch .form-check-input {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23919599'/%3e%3c/svg%3e");
    width: 2.25em;
    border-radius: 2em;
}
.form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2310AAA4'/%3e%3c/svg%3e");
}
.form-range {
    --bs-form-range-thumb-bg: var(--docnitz-primary);
    --bs-form-range-thumb-active-bg: var(--docnitz-primary-200);
    --bs-form-range-track-bg: var(--docnitz-neutral-bg);
}
.form-range:focus::-webkit-slider-thumb { box-shadow: var(--docnitz-ring); }
.form-range:focus::-moz-range-thumb { box-shadow: var(--docnitz-ring); }

/* Ajuda e erro */
.docnitz-help,
.form-text {
    margin-top: .375rem;
    font-size: var(--docnitz-text-sm);
    line-height: 1.45;
    color: var(--docnitz-text-muted);
}
.docnitz-error,
.invalid-feedback {
    margin-top: .375rem;
    font-size: var(--docnitz-text-sm);
    font-weight: var(--docnitz-weight-medium);
    line-height: 1.4;
    color: var(--docnitz-danger-text);
    animation: docnitz-fade-in var(--docnitz-base) var(--docnitz-ease);
}
.docnitz-error { display: flex; align-items: flex-start; }
.docnitz-error::before,
.invalid-feedback:not(:empty)::before {
    content: "";
    display: inline-block;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    margin-right: .375rem;
    vertical-align: -.15em;
    background-color: currentColor;
    -webkit-mask: var(--docnitz-icon-alert) center / contain no-repeat;
    mask: var(--docnitz-icon-alert) center / contain no-repeat;
}
.docnitz-error::before { margin-top: .1em; }
.invalid-feedback:empty { display: none !important; }

/* ------------------------------------------------------------------ 4.4 Formulário
   Rodapé de ações e grupo opcional "Mais detalhes" (padrão das telas de cadastro). */
.docnitz-form-actions,
.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--docnitz-border);
}
@media (max-width: 575.98px) {
    .docnitz-form-actions > :is(.btn-primary, .docnitz-btn-primary):first-child,
    .form-actions > :is(.btn-primary, .docnitz-btn-primary):first-child { flex: 1 1 auto; }
}
.docnitz-more-toggle,
.more-toggle {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem .5rem .25rem .25rem;
    margin-left: -.25rem;
    border-radius: var(--docnitz-radius-sm);
    color: var(--docnitz-dark);
    font-size: var(--docnitz-text-label);
    font-weight: var(--docnitz-weight-semibold);
    text-decoration: none;
    transition: background-color var(--docnitz-fast) var(--docnitz-ease), color var(--docnitz-fast) var(--docnitz-ease);
}
.docnitz-more-toggle:hover,
.more-toggle:hover { background-color: var(--docnitz-primary-50); color: var(--docnitz-deep); }
.docnitz-more-toggle .bi-chevron-down,
.more-toggle .bi-chevron-down { transition: transform var(--docnitz-base) var(--docnitz-ease); }
.docnitz-more-toggle[aria-expanded="true"] .bi-chevron-down,
.more-toggle[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }

/* ------------------------------------------------------------------ 4.5 Badges / status (pill)
   .docnitz-badge-* é a fonte; ".badge text-bg-*" do Bootstrap ganha o mesmo tom suave
   (o !important vence o utilitário .text-bg-*, que também é !important).
   Mapa: success = Em dia/Ativo · warning = Vencendo/Pendente/Convite pendente · danger = Vencido/Excluído
         info = informativo · primary = destaque (Atual, Recomendado) · neutral/secondary/light = Inativo/Arquivado/Sem vencimento */
.docnitz-badge,
.badge {
    --bs-badge-padding-x: .625rem;
    --bs-badge-padding-y: .25rem;
    --bs-badge-font-size: var(--docnitz-text-xs);
    --bs-badge-font-weight: var(--docnitz-weight-semibold);
    --bs-badge-border-radius: var(--docnitz-radius-pill);
    display: inline-flex;
    align-items: center;
    gap: .3125rem;
    padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
    border-radius: var(--docnitz-radius-pill);
    font-size: var(--bs-badge-font-size);
    font-weight: var(--bs-badge-font-weight);
    line-height: 1.35;
    letter-spacing: .005em;
    white-space: nowrap;
    vertical-align: middle;
}
.docnitz-badge {
    background-color: var(--docnitz-neutral-bg);
    color: var(--docnitz-neutral-text);
}
.docnitz-badge .bi,
.badge .bi { font-size: .95em; line-height: 1; }
.docnitz-badge > .bi:is(.me-1, .me-2),
.badge > .bi:is(.me-1, .me-2) { margin-right: 0 !important; }
.badge.border { border-color: var(--docnitz-border-strong) !important; }
/* Ponto de status: <span class="docnitz-badge docnitz-badge-success docnitz-badge-dot">Em dia</span> */
.docnitz-badge-dot::before {
    content: "";
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.docnitz-badge-success,
.badge.text-bg-success { background-color: var(--docnitz-success-bg) !important; color: var(--docnitz-success-text) !important; }
.docnitz-badge-warning,
.badge.text-bg-warning { background-color: var(--docnitz-warning-bg) !important; color: var(--docnitz-warning-text) !important; }
.docnitz-badge-danger,
.badge.text-bg-danger  { background-color: var(--docnitz-danger-bg) !important;  color: var(--docnitz-danger-text) !important; }
.docnitz-badge-info,
.badge.text-bg-info    { background-color: var(--docnitz-info-bg) !important;    color: var(--docnitz-info-text) !important; }
.docnitz-badge-primary,
.badge.text-bg-primary { background-color: var(--docnitz-primary-100) !important; color: var(--docnitz-deep) !important; }
.docnitz-badge-neutral,
.badge.text-bg-secondary,
.badge.text-bg-light   { background-color: var(--docnitz-neutral-bg) !important; color: var(--docnitz-neutral-text) !important; }
/* Texto de dias ao lado de datas ("Vence em 5 dias") */
.days-text {
    font-size: var(--docnitz-text-sm);
    font-weight: var(--docnitz-weight-semibold);
}

/* ------------------------------------------------------------------ 4.6 Abas (nav nav-underline) */
.nav-underline {
    --bs-nav-underline-gap: 1.5rem;
    --bs-nav-underline-border-width: 2px;
    --bs-nav-underline-link-active-color: var(--docnitz-deep);
    --bs-nav-link-color: var(--docnitz-text-muted);
    --bs-nav-link-hover-color: var(--docnitz-deep);
    --bs-nav-link-font-weight: var(--docnitz-weight-semibold);
    --bs-nav-link-padding-y: .625rem;
    /* Linha de base desenhada por sombra interna: o sublinhado da aba ativa a cobre sem margem negativa
       (as abas rolam na horizontal com overflow-auto sem gerar rolagem vertical de 1 px) */
    border-bottom: 0;
    box-shadow: inset 0 -1px 0 var(--docnitz-border);
    scrollbar-width: none;
}
.nav-underline::-webkit-scrollbar { display: none; }
.nav-underline .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--docnitz-text-label);
    white-space: nowrap;
    transition: color var(--docnitz-fast) var(--docnitz-ease), border-color var(--docnitz-fast) var(--docnitz-ease);
}
.nav-underline .nav-link:hover,
.nav-underline .nav-link:focus { border-bottom-color: var(--docnitz-border-strong); }
.nav-underline .nav-link:focus-visible {
    outline: none;
    border-radius: var(--docnitz-radius-sm) var(--docnitz-radius-sm) 0 0;
    box-shadow: var(--docnitz-ring);
}
.nav-underline .nav-link.active,
.nav-underline .show > .nav-link {
    font-weight: var(--docnitz-weight-semibold);
    color: var(--docnitz-deep);
    border-bottom-color: var(--docnitz-accent);
}
.nav-underline .nav-link .bi { opacity: .8; }
.nav-underline .nav-link.active .bi { color: var(--docnitz-primary); opacity: 1; }
/* Contador em pílula: abas (.docnitz-tab-count) e segmented control (.docnitz-segment-count, Fase 6) */
.docnitz-tab-count,
.docnitz-segment-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.375rem;
    height: 1.25rem;
    padding: 0 .375rem;
    border-radius: var(--docnitz-radius-pill);
    background: var(--docnitz-press);
    color: var(--docnitz-text-muted);
    font-size: var(--docnitz-text-xs);
    font-weight: var(--docnitz-weight-semibold);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.nav-underline .nav-link.active .docnitz-tab-count,
.docnitz-segment.active .docnitz-segment-count { background: var(--docnitz-primary-100); color: var(--docnitz-deep); }
:is(.docnitz-tab-count, .docnitz-segment-count).is-danger:not(.is-zero) { background: var(--docnitz-danger-bg); color: var(--docnitz-danger-text); }
:is(.docnitz-tab-count, .docnitz-segment-count).is-warning:not(.is-zero) { background: var(--docnitz-warning-bg); color: var(--docnitz-warning-text); }

/* ------------------------------------------------------------------ 4.7 Menus suspensos, tooltip, popover */
.docnitz-dropdown,
.dropdown-menu {
    --bs-dropdown-bg: var(--docnitz-card);
    --bs-dropdown-color: var(--docnitz-text);
    --bs-dropdown-border-color: var(--docnitz-border);
    --bs-dropdown-border-radius: var(--docnitz-radius-md);
    --bs-dropdown-box-shadow: var(--docnitz-shadow-md);
    --bs-dropdown-font-size: var(--docnitz-text-sm);
    --bs-dropdown-padding-x: .375rem;
    --bs-dropdown-padding-y: .375rem;
    --bs-dropdown-item-padding-x: .75rem;
    --bs-dropdown-item-padding-y: .5rem;
    --bs-dropdown-item-border-radius: var(--docnitz-radius-sm);
    --bs-dropdown-link-color: var(--docnitz-text);
    --bs-dropdown-link-hover-color: var(--docnitz-deep);
    --bs-dropdown-link-hover-bg: var(--docnitz-primary-50);
    --bs-dropdown-link-active-color: var(--docnitz-on-color);
    --bs-dropdown-link-active-bg: var(--docnitz-primary);
    --bs-dropdown-divider-bg: var(--docnitz-border);
    --bs-dropdown-header-color: var(--docnitz-text-muted);
    box-shadow: var(--bs-dropdown-box-shadow);
}
/* Entrada de 150 ms. Usa "translate" (propriedade própria) para não brigar com o transform do Popper. */
.docnitz-dropdown.show,
.dropdown-menu.show { animation: docnitz-dropdown-in var(--docnitz-fast) var(--docnitz-ease); }
/* Item: ícone + texto alinhados (o espaço vem do gap; "me-2" dos ícones é neutralizado) */
.dropdown-item {
    display: flex;
    align-items: center;
    gap: .625rem;
    font-weight: var(--docnitz-weight-medium);
    text-decoration: none;
    transition: background-color var(--docnitz-fast) var(--docnitz-ease), color var(--docnitz-fast) var(--docnitz-ease);
}
.dropdown-item > .bi {
    width: 1rem;
    color: var(--docnitz-gray);
    font-size: 1rem;
    text-align: center;
    transition: color var(--docnitz-fast) var(--docnitz-ease);
}
.dropdown-item > .bi:is(.me-1, .me-2) { margin-right: 0 !important; }
.dropdown-item:hover > .bi,
.dropdown-item:focus > .bi { color: var(--docnitz-primary); }
.dropdown-item.active > .bi,
.dropdown-item:active > .bi,
.dropdown-item.text-danger > .bi { color: inherit; }
.dropdown-item.text-danger:hover,
.dropdown-item.text-danger:focus { background-color: var(--docnitz-danger-bg); color: var(--docnitz-danger-text) !important; }
.dropdown-divider { margin: .375rem calc(var(--bs-dropdown-padding-x) * -1); }

.tooltip {
    --bs-tooltip-bg: var(--docnitz-deep);
    --bs-tooltip-color: var(--docnitz-on-color);
    --bs-tooltip-border-radius: var(--docnitz-radius-sm);
    --bs-tooltip-padding-x: .625rem;
    --bs-tooltip-padding-y: .375rem;
    --bs-tooltip-font-size: var(--docnitz-text-xs);
    --bs-tooltip-opacity: 1;
    font-family: var(--docnitz-font);
}
.tooltip-inner { font-weight: var(--docnitz-weight-medium); box-shadow: var(--docnitz-shadow-md); }
.popover {
    --bs-popover-border-color: var(--docnitz-border);
    --bs-popover-border-radius: var(--docnitz-radius-md);
    --bs-popover-inner-border-radius: calc(var(--docnitz-radius-md) - 1px);
    --bs-popover-box-shadow: var(--docnitz-shadow-md);
    --bs-popover-header-bg: transparent;
    --bs-popover-header-color: var(--docnitz-deep);
    --bs-popover-body-color: var(--docnitz-text);
    --bs-popover-font-size: var(--docnitz-text-sm);
    box-shadow: var(--bs-popover-box-shadow);
}

/* ------------------------------------------------------------------ 4.8 Modal
   .docnitz-modal e .modal do Bootstrap: mesmas variáveis. Confirmação (data-confirm do yii.js)
   é montada por web/js/app.js com .docnitz-confirm. */
.docnitz-modal,
.modal {
    --bs-modal-padding: var(--docnitz-gutter);
    --bs-modal-bg: var(--docnitz-card);
    --bs-modal-color: var(--docnitz-text);
    --bs-modal-border-width: 0;
    --bs-modal-border-radius: var(--docnitz-radius-modal);
    --bs-modal-inner-border-radius: var(--docnitz-radius-modal);
    --bs-modal-box-shadow: var(--docnitz-shadow-lg);
    --bs-modal-header-padding: 1.25rem var(--docnitz-gutter) .5rem;
    --bs-modal-header-border-width: 0;
    --bs-modal-title-line-height: 1.35;
    --bs-modal-footer-gap: .5rem;
    --bs-modal-footer-bg: transparent;
    --bs-modal-footer-border-color: var(--docnitz-border);
    --bs-modal-footer-border-width: 1px;
}
.docnitz-modal .modal-content,
.modal-content {
    box-shadow: var(--bs-modal-box-shadow);
    overflow: hidden;
}
.modal-title {
    font-size: 1.125rem;
    font-weight: var(--docnitz-weight-semibold);
    color: var(--docnitz-deep);
}
.modal-header + .modal-body { padding-top: .5rem; }
.modal-footer { padding: 1rem var(--docnitz-gutter); }
@media (max-width: 575.98px) {
    .modal-footer > .btn { flex: 1 1 0; }
}
.docnitz-modal.fade .modal-dialog,
.modal.fade .modal-dialog {
    transform: translateY(8px) scale(.98);
    transition: transform var(--docnitz-slow) var(--docnitz-ease);
}
.docnitz-modal.show .modal-dialog,
.modal.show .modal-dialog { transform: none; }
.modal-backdrop {
    --bs-backdrop-bg: var(--docnitz-deep);
    --bs-backdrop-opacity: var(--docnitz-backdrop-opacity);
}
/* Confirmação: ícone + título + mensagem; botões alinhados à direita */
.docnitz-confirm .modal-body {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: var(--docnitz-gutter);
}
.docnitz-confirm .modal-title { margin: .25rem 0 .375rem; }
.docnitz-confirm-text {
    margin: 0;
    color: var(--docnitz-text-muted);
    overflow-wrap: anywhere;
}

/* Modais de tela (web/js/app.js, "Modais de tela"): cadastrar/editar/renovar e detalhes rápidos sobre a tela
   atual. O conteúdo é a própria view da tela (sem menu); aqui ela perde as "caixas" de página. */
.docnitz-modal-remote .modal-header {
    align-items: flex-start;
    gap: .5rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--docnitz-border);
}
.docnitz-modal-heading { flex: 1 1 auto; min-width: 0; }
.docnitz-modal-remote .modal-title { margin: 0; font-size: 1.25rem; }
.docnitz-modal-subtitle {
    margin: .25rem 0 0;
    color: var(--docnitz-text-muted);
    font-size: var(--docnitz-text-sm);
    line-height: 1.45;
}
.docnitz-modal-expand {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--docnitz-radius-sm);
    color: var(--docnitz-text-muted);
    text-decoration: none;
    transition: background-color var(--docnitz-fast) var(--docnitz-ease), color var(--docnitz-fast) var(--docnitz-ease);
}
.docnitz-modal-expand:hover { background: var(--docnitz-bg); color: var(--docnitz-deep); }
.docnitz-modal-expand[hidden] { display: none; }
.docnitz-modal-remote .btn-close { flex: none; margin: 0; width: 2rem; height: 2rem; padding: 0; }
.docnitz-modal-remote .modal-body { padding-top: 1.25rem; }
/* A view da tela vem com linhas/colunas e cards de página: no modal ocupa tudo e fica "plana" */
.docnitz-modal-remote .modal-body > .row > [class*="col-xl-"],
.docnitz-modal-remote .modal-body > .row > [class*="col-lg-"] {
    flex: 0 0 100%;
    max-width: 100%;
}
.docnitz-modal-remote .modal-body .card {
    border: 0;
    box-shadow: none;
    background: transparent;
}
.docnitz-modal-remote .modal-body .card > .card-body { padding: 0; }
.docnitz-modal-remote .modal-body .card + .card { margin-top: 1.25rem; }
/* Resumo destacado (ex.: documento sendo renovado) continua como bloco suave */
.docnitz-modal-remote .modal-body .card.mb-3:has(+ .card) {
    padding: .875rem 1rem;
    border-radius: var(--docnitz-radius-md);
    background: var(--docnitz-bg);
}
/* Botões do formulário fixos no rodapé do modal (o corpo rola por baixo) */
.docnitz-modal-remote .form-actions {
    position: sticky;
    bottom: calc(-1 * var(--bs-modal-padding));
    z-index: 2;
    margin: 1.5rem calc(-1 * var(--bs-modal-padding)) calc(-1 * var(--bs-modal-padding));
    padding: 1rem var(--bs-modal-padding);
    border-top: 1px solid var(--docnitz-border);
    background: var(--docnitz-card);
}
.docnitz-modal-loading,
.docnitz-modal-failure {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    min-height: 12rem;
    color: var(--docnitz-text-muted);
    text-align: center;
}
.docnitz-modal-loading .spinner-border { color: var(--docnitz-primary); }
.docnitz-modal-failure > .bi { font-size: 2rem; color: var(--docnitz-danger-text); }
.docnitz-modal-failure p { margin: 0; max-width: 24rem; }
/* "Descartar alterações?" sem abrir um segundo modal */
.docnitz-modal-discard {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    padding: .75rem var(--docnitz-gutter);
    border-bottom: 1px solid var(--docnitz-border);
    background: var(--docnitz-warning-bg);
    color: var(--docnitz-warning-text);
    font-size: var(--docnitz-text-sm);
}
.docnitz-modal-discard[hidden] { display: none; }
.docnitz-modal-discard > span { flex: 1 1 14rem; }
/* Pré-visualização de arquivo */
.docnitz-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    border-radius: var(--docnitz-radius-md);
    background: var(--docnitz-bg);
    overflow: hidden;
}
.docnitz-preview-frame { width: 100%; height: 70vh; border: 0; background: var(--docnitz-card); }
.docnitz-preview-image { max-width: 100%; max-height: 70vh; object-fit: contain; }
.docnitz-preview-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
}
.docnitz-preview-actions .bi { margin-right: .375rem; }
@media (max-width: 575.98px) {
    .docnitz-preview { min-height: 50vh; }
    .docnitz-preview-frame { height: 60vh; }
}

/* ------------------------------------------------------------------ 4.9 Alertas
   .docnitz-alert (ícone + título + descrição + fechar) é a fonte; .alert/.alert-* do Bootstrap
   usam as mesmas variáveis (--bs-alert-*). FlashMessages renderiza .docnitz-alert. */
.docnitz-alert,
.alert {
    --bs-alert-padding-x: 1rem;
    --bs-alert-padding-y: .875rem;
    --bs-alert-margin-bottom: 1rem;
    --bs-alert-border-radius: var(--docnitz-radius-md);
    position: relative;
    padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);
    margin-bottom: var(--bs-alert-margin-bottom);
    border: 1px solid var(--bs-alert-border-color);
    border-radius: var(--bs-alert-border-radius);
    background-color: var(--bs-alert-bg);
    color: var(--bs-alert-color);
    line-height: 1.5;
}
.docnitz-alert {
    --bs-alert-bg: var(--docnitz-info-bg);
    --bs-alert-color: var(--docnitz-info-text);
    --bs-alert-border-color: var(--docnitz-info-border);
    --bs-alert-link-color: var(--docnitz-info-text);
    --dn-alert-icon: var(--docnitz-info);
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    font-size: var(--docnitz-text-base);
    animation: docnitz-slide-down var(--docnitz-base) var(--docnitz-ease);
}
.docnitz-alert-success,
.alert-success { --bs-alert-bg: var(--docnitz-success-bg); --bs-alert-color: var(--docnitz-success-text); --bs-alert-border-color: var(--docnitz-success-border); --bs-alert-link-color: var(--docnitz-success-text); --dn-alert-icon: var(--docnitz-success); }
.docnitz-alert-warning,
.alert-warning { --bs-alert-bg: var(--docnitz-warning-bg); --bs-alert-color: var(--docnitz-warning-text); --bs-alert-border-color: var(--docnitz-warning-border); --bs-alert-link-color: var(--docnitz-warning-text); --dn-alert-icon: var(--docnitz-warning); }
.docnitz-alert-danger,
.alert-danger  { --bs-alert-bg: var(--docnitz-danger-bg);  --bs-alert-color: var(--docnitz-danger-text);  --bs-alert-border-color: var(--docnitz-danger-border);  --bs-alert-link-color: var(--docnitz-danger-text);  --dn-alert-icon: var(--docnitz-danger); }
.docnitz-alert-info,
.alert-info,
.alert-primary { --bs-alert-bg: var(--docnitz-info-bg); --bs-alert-color: var(--docnitz-info-text); --bs-alert-border-color: var(--docnitz-info-border); --bs-alert-link-color: var(--docnitz-info-text); --dn-alert-icon: var(--docnitz-info); }
.docnitz-alert-neutral,
.alert-secondary,
.alert-light   { --bs-alert-bg: var(--docnitz-neutral-bg); --bs-alert-color: var(--docnitz-neutral-text); --bs-alert-border-color: var(--docnitz-neutral-border); --bs-alert-link-color: var(--docnitz-deep); --dn-alert-icon: var(--docnitz-neutral-text); }
.alert-link,
.docnitz-alert a:not(.btn) {
    color: var(--bs-alert-link-color);
    font-weight: var(--docnitz-weight-semibold);
}
/* Ícone inicial de alertas antigos ganha a cor do status */
.alert > .bi:first-child,
.alert > .d-flex > .bi:first-child { color: var(--dn-alert-icon); }
.docnitz-alert-icon {
    flex-shrink: 0;
    margin-top: .1rem;
    font-size: 1.15rem;
    line-height: 1;
    color: var(--dn-alert-icon);
}
.docnitz-alert-content { flex: 1 1 auto; min-width: 0; }
.docnitz-alert-title {
    display: block;
    margin-bottom: .125rem;
    font-weight: var(--docnitz-weight-semibold);
}
.docnitz-alert-text { margin: 0; opacity: .92; }
/* Fechar (alerta e toast) */
.docnitz-alert-close,
.docnitz-toast-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    margin: -.25rem -.375rem 0 0;
    padding: 0;
    border: 0;
    border-radius: var(--docnitz-radius-sm);
    background: transparent;
    color: inherit;
    font-size: .8rem;
    opacity: .6;
    line-height: 1;
    cursor: pointer;
    transition: opacity var(--docnitz-fast) var(--docnitz-ease), background-color var(--docnitz-fast) var(--docnitz-ease);
}
.docnitz-alert-close:hover,
.docnitz-toast-close:hover { opacity: 1; background-color: var(--docnitz-press); }
.docnitz-alert-close:focus-visible,
.docnitz-toast-close:focus-visible { outline: 0; opacity: 1; box-shadow: var(--docnitz-ring); }

/* ------------------------------------------------------------------ 4.10 Toasts
   Canto inferior direito; somem sozinhos (~5 s, pausa com o mouse/foco). Sucesso das ações vira
   toast; aviso e erro continuam como alerta fixo (ver FlashMessages). API: Docnitz.toast(). */
.docnitz-toast-stack {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: .625rem;
    width: min(380px, calc(100vw - 2.5rem));
    pointer-events: none;
}
.docnitz-toast {
    --dn-toast-icon: var(--docnitz-info);
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .875rem 1rem;
    border: 1px solid var(--docnitz-border);
    border-radius: var(--docnitz-radius-md);
    background: var(--docnitz-card);
    box-shadow: var(--docnitz-shadow-lg);
    color: var(--docnitz-text);
    overflow: hidden;
    pointer-events: auto;
    animation: docnitz-toast-in var(--docnitz-slow) var(--docnitz-ease);
}
.docnitz-toast-success { --dn-toast-icon: var(--docnitz-success); }
.docnitz-toast-warning { --dn-toast-icon: var(--docnitz-warning); }
.docnitz-toast-danger  { --dn-toast-icon: var(--docnitz-danger); }
.docnitz-toast-info    { --dn-toast-icon: var(--docnitz-info); }
.docnitz-toast-icon {
    flex-shrink: 0;
    margin-top: .1rem;
    font-size: 1.15rem;
    line-height: 1;
    color: var(--dn-toast-icon);
}
.docnitz-toast-content { flex: 1 1 auto; min-width: 0; }
.docnitz-toast-title {
    display: block;
    font-weight: var(--docnitz-weight-semibold);
    color: var(--docnitz-deep);
}
.docnitz-toast-text {
    margin: .125rem 0 0;
    font-size: var(--docnitz-text-sm);
    color: var(--docnitz-text-muted);
    overflow-wrap: anywhere;
}
.docnitz-toast-close { color: var(--docnitz-text-muted); }
/* Barra de tempo restante (pausa junto com o temporizador do app.js) */
.docnitz-toast-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: var(--dn-toast-icon);
    opacity: .35;
    transform-origin: left center;
    animation: docnitz-toast-progress var(--docnitz-toast-duration) linear forwards;
}
.docnitz-toast:is(:hover, :focus-within) .docnitz-toast-progress { animation-play-state: paused; }
.docnitz-toast.is-hiding { animation: docnitz-toast-out var(--docnitz-base) var(--docnitz-ease) forwards; }
@media (max-width: 575.98px) {
    .docnitz-toast-stack { left: 1rem; right: 1rem; bottom: 1rem; width: auto; }
}

/* ------------------------------------------------------------------ 4.11 Tabela */
.docnitz-table-wrap {
    position: relative;   /* textos .visually-hidden (position:absolute) ficam presos à rolagem e não alargam a página */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
/* Mesmo motivo para os demais contêineres com rolagem horizontal */
.table-responsive,
.nav-underline { position: relative; }
.docnitz-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--docnitz-text-base);
}
.docnitz-table > thead > tr > th {
    padding: .75rem 1rem;
    background: transparent;
    border-bottom: 1px solid var(--docnitz-border);
    color: var(--docnitz-text-muted);
    font-size: var(--docnitz-text-xs);
    font-weight: var(--docnitz-weight-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.docnitz-table > tbody > tr > td {
    padding: 1rem;
    border-bottom: 1px solid var(--docnitz-border);
    vertical-align: middle;
    transition: background-color var(--docnitz-fast) var(--docnitz-ease);
}
.docnitz-table > :is(thead, tbody) > tr > :first-child { padding-left: var(--docnitz-gutter); }
.docnitz-table > :is(thead, tbody) > tr > :last-child { padding-right: var(--docnitz-gutter); }
.docnitz-table > tbody > tr:last-child > td { border-bottom: 0; }
.docnitz-table > tbody > tr:hover > td { background: var(--docnitz-row-hover); }
.docnitz-table > tbody > tr[data-href] { cursor: pointer; }
.docnitz-table .cell-title {
    font-weight: var(--docnitz-weight-semibold);
    color: var(--docnitz-deep);
}
.docnitz-table .cell-sub {
    margin-top: .125rem;
    font-size: var(--docnitz-text-sm);
    color: var(--docnitz-text-muted);
}

/* Paginação */
.docnitz-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.docnitz-pagination a,
.docnitz-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 .625rem;
    border-radius: var(--docnitz-radius-sm);
    color: var(--docnitz-text-muted);
    font-size: var(--docnitz-text-sm);
    font-weight: var(--docnitz-weight-semibold);
    text-decoration: none;
    transition: background-color var(--docnitz-fast) var(--docnitz-ease), color var(--docnitz-fast) var(--docnitz-ease);
}
.docnitz-pagination a:hover { background: var(--docnitz-primary-50); color: var(--docnitz-deep); }
.docnitz-pagination .active > a,
.docnitz-pagination .active > span { background: var(--docnitz-primary); color: var(--docnitz-on-color); }
.docnitz-pagination .disabled > a,
.docnitz-pagination .disabled > span { opacity: .4; pointer-events: none; }

/* ------------------------------------------------------------------ 4.12 Cabeçalho de página */
.docnitz-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: var(--docnitz-gap);
}
.docnitz-page-title {
    margin: 0;
    font-size: var(--docnitz-text-2xl);
    font-weight: var(--docnitz-weight-bold);
    letter-spacing: -.02em;
    color: var(--docnitz-deep);
}
.docnitz-page-subtitle {
    margin: .25rem 0 0;
    font-size: var(--docnitz-text-base);
    color: var(--docnitz-text-muted);
}
.docnitz-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* Estado vazio (widget EmptyState) */
.docnitz-empty {
    padding: 3rem 1.5rem;
    text-align: center;
}
.docnitz-empty.is-compact { padding: 2rem 1rem; }
.docnitz-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 1rem;
    border-radius: var(--docnitz-radius-xl);
    background: var(--docnitz-primary-50);
    color: var(--docnitz-primary);
    font-size: 1.75rem;
}
.docnitz-empty.is-compact .docnitz-empty-icon {
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: .75rem;
    border-radius: var(--docnitz-radius-lg);
    font-size: 1.4rem;
}
.docnitz-empty-title {
    margin: 0 0 .375rem;
    font-size: 1.0625rem;
    font-weight: var(--docnitz-weight-semibold);
    color: var(--docnitz-deep);
}
.docnitz-empty-text {
    max-width: 32rem;
    margin: 0 auto 1.25rem;
    color: var(--docnitz-text-muted);
}
.docnitz-empty-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
}

/* Avatar de iniciais (.avatar-initials do cabeçalho e de Usuários = .docnitz-avatar) */
.docnitz-avatar,
.avatar-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--docnitz-primary), var(--docnitz-accent));
    color: var(--docnitz-on-color);
    font-size: var(--docnitz-text-sm);
    font-weight: var(--docnitz-weight-semibold);
    letter-spacing: .02em;
}
.docnitz-avatar-lg,
.avatar-initials.avatar-lg { width: 3rem; height: 3rem; font-size: 1.05rem; }

/* Indicador (KPI) — dashboard, resumo de funcionário/cliente, relatório.
   <a class="docnitz-card docnitz-stat is-{success|warning|danger|neutral} [has-items] [is-compact] [is-current]">
       <span class="docnitz-icon-tile is-…"><i class="bi …"></i></span>
       <span class="docnitz-stat-body"><span class="docnitz-stat-label">…</span><span class="docnitz-stat-value">…</span>
       <span class="docnitz-stat-meta">…</span></span></a>
   O número ganha a cor do status só com "has-items" (há algo a resolver). */
.docnitz-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .875rem;
    height: 100%;
    padding: 1.25rem;
}
.docnitz-stat-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .125rem;
    min-width: 0;
}
.docnitz-stat-label {
    font-size: var(--docnitz-text-sm);
    font-weight: var(--docnitz-weight-medium);
    color: var(--docnitz-text-muted);
}
.docnitz-stat-value {
    font-size: 2rem;
    font-weight: var(--docnitz-weight-bold);
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--docnitz-deep);
    font-variant-numeric: tabular-nums;
}
.docnitz-stat.is-warning.has-items .docnitz-stat-value { color: var(--docnitz-warning-text); }
.docnitz-stat.is-danger.has-items .docnitz-stat-value  { color: var(--docnitz-danger-text); }
.docnitz-stat-meta {
    margin-top: auto;
    padding-top: .25rem;
    font-size: var(--docnitz-text-xs);
    color: var(--docnitz-text-muted);
}
/* Compacto: ícone ao lado, número antes do rótulo (resumo de funcionário/cliente, relatório) */
.docnitz-stat.is-compact {
    flex-direction: row;
    align-items: center;
    gap: .75rem;
    padding: .875rem 1rem;
}
.docnitz-stat.is-compact .docnitz-stat-body { flex-direction: column-reverse; }
.docnitz-stat.is-compact .docnitz-stat-value { font-size: 1.5rem; }
/* Dentro de outro card (resumo de funcionário/cliente): fundo suave, sem sombra própria */
.docnitz-stat.is-inset {
    background-color: var(--docnitz-bg);
    border-color: transparent;
    box-shadow: none;
}
a.docnitz-stat.is-inset:hover {
    background-color: var(--docnitz-card);
    border-color: var(--docnitz-border-strong);
    box-shadow: var(--docnitz-shadow-sm);
}
/* Filtro aplicado (relatório): contorno na cor da marca */
.docnitz-stat.is-current,
a.docnitz-stat.is-current:hover {
    border-color: var(--docnitz-primary);
    box-shadow: var(--docnitz-outline-selected), var(--docnitz-shadow-card);
}
@media (max-width: 575.98px) {
    .docnitz-stat { padding: 1rem; gap: .625rem; }
    .docnitz-stat-value { font-size: 1.5rem; }
    .docnitz-stat.is-compact {
        flex-direction: column;
        align-items: flex-start;
        gap: .5rem;
        padding: .75rem;
    }
    .docnitz-stat.is-compact .docnitz-stat-value { font-size: 1.25rem; }
    .docnitz-stat.is-compact .docnitz-stat-label { font-size: var(--docnitz-text-xs); }
}

/* Ícone em bloco: -sm 36 px · padrão 40 px · -lg 48 px (resumo de funcionário/cliente, upgrade) */
.docnitz-icon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--docnitz-radius-md);
    background: var(--docnitz-primary-50);
    color: var(--docnitz-primary);
    font-size: 1.15rem;
}
.docnitz-icon-tile-lg {
    width: 3rem;
    height: 3rem;
    font-size: 1.375rem;
}
.docnitz-icon-tile-sm {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--docnitz-radius-control);
    font-size: 1rem;
}
.docnitz-icon-tile.is-success { background: var(--docnitz-success-bg); color: var(--docnitz-success); }
.docnitz-icon-tile.is-warning { background: var(--docnitz-warning-bg); color: var(--docnitz-warning); }
.docnitz-icon-tile.is-danger  { background: var(--docnitz-danger-bg);  color: var(--docnitz-danger); }
.docnitz-icon-tile.is-neutral { background: var(--docnitz-neutral-bg); color: var(--docnitz-neutral-text); }
@media (max-width: 575.98px) {
    .docnitz-stat .docnitz-icon-tile { width: 2rem; height: 2rem; border-radius: var(--docnitz-radius-sm); font-size: 1rem; }
}

/* ------------------------------------------------------------------ Confirmação de salvamento
   Registro recém-salvo ([data-record] + .is-just-saved, via app.js): brilho aqua suave + selo "Salvo agora".
   Toast de sucesso com horário do salvamento (.docnitz-toast-meta) e ação "Desfazer" (.docnitz-toast-action). */
.is-just-saved {
    animation: docnitz-saved-glow 2.6s var(--docnitz-ease);
}
tr.is-just-saved > td {
    animation: docnitz-saved-row 2.6s var(--docnitz-ease);
}
tr.is-just-saved { animation: none; }
.has-saved-chip { position: relative; }
.docnitz-saved-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-left: .5rem;
    padding: .125rem .5rem;
    border-radius: var(--docnitz-radius-pill);
    background: var(--docnitz-info-bg);
    color: var(--docnitz-info-text);
    font-size: var(--docnitz-text-xs);
    font-weight: var(--docnitz-weight-semibold);
    line-height: 1.5;
    white-space: nowrap;
    vertical-align: middle;
    animation: docnitz-pop-in var(--docnitz-slow) var(--docnitz-ease);
    transition: opacity var(--docnitz-slow) var(--docnitz-ease);
}
.has-saved-chip > .docnitz-saved-chip {
    position: absolute;
    top: .75rem;
    right: .75rem;
    margin: 0;
    z-index: 2;
}
.docnitz-saved-chip.is-fading { opacity: 0; }
.docnitz-toast-meta {
    display: flex;
    align-items: center;
    gap: .375rem;
    margin: .375rem 0 0;
    font-size: var(--docnitz-text-xs);
    font-weight: var(--docnitz-weight-semibold);
    color: var(--docnitz-success-text);
}
.docnitz-toast-action { margin: .625rem 0 0; }



/* =====================================================================================
   5. MOVIMENTO E ACESSIBILIDADE
   ===================================================================================== */
@keyframes docnitz-spin { to { transform: rotate(360deg); } }
@keyframes docnitz-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes docnitz-fade-out { from { opacity: 1; } to { opacity: 0; transform: translateY(4px); } }
@keyframes docnitz-slide-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes docnitz-slide-down { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes docnitz-pop-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes docnitz-dropdown-in { from { opacity: 0; translate: 0 -4px; } to { opacity: 1; translate: 0 0; } }
@keyframes docnitz-toast-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes docnitz-toast-out { from { opacity: 1; } to { opacity: 0; transform: translateX(16px); } }
@keyframes docnitz-toast-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes docnitz-saved-glow {
    0%   { box-shadow: 0 0 0 0 rgba(var(--docnitz-accent-rgb), 0); }
    20%  { box-shadow: 0 0 0 4px rgba(var(--docnitz-accent-rgb), .35); }
    100% { box-shadow: 0 0 0 0 rgba(var(--docnitz-accent-rgb), 0); }
}
@keyframes docnitz-saved-row {
    0%, 35% { background-color: rgba(var(--docnitz-accent-rgb), .14); }
    100%    { background-color: transparent; }
}

.docnitz-animate-in { animation: docnitz-slide-up var(--docnitz-slow) var(--docnitz-ease) both; }

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }
    .docnitz-card.is-interactive:hover,
    a.docnitz-card:hover,
    .card.is-interactive:hover,
    a.card:hover,
    .docnitz-btn:active,
    .btn:active { transform: none; }
    .docnitz-toast-progress { display: none; }
}

@media print {
    .docnitz-toast-stack,
    .modal,
    .modal-backdrop { display: none !important; }
}