/* =====================================================================
   NOAH EDUCACIONAL — ADMINISTRAÇÃO — Design System
   =====================================================================
   Documentado em DESIGN.md (raiz do projeto). Resumo:

   - Tipografia: "Source Sans Pro" única família (títulos e corpo) — a mesma
     fonte que o AdminLTE 2 (base visual original deste sistema) já usava,
     trocada de volta depois que uma primeira versão deste redesign usou uma
     serifada (Fraunces) pesada demais para uma tela de trabalho densa em
     dado. Carregada via Google Fonts em header.php / index.php / erro*.php.
   - Cor: identidade da marca (noahtecnologia.com.br) — tinta azul-marinho
     quase-preta (--noah-ink) + dourado (--noah-gold) como acento, sobre
     fundo claro neutro no app autenticado. Contraste alvo AA (>=4.5:1)
     em todo texto sobre cor.
   - Componentes: cards KPI em fundo branco com acento colorido (não mais
     texto branco sobre cor saturada — era o principal problema de
     contraste do dashboard anterior).
   ===================================================================== */

:root {
    /* Identidade de marca */
    --noah-ink: #0b1220;
    --noah-navy: #101c30;
    --noah-navy-soft: #16263f;
    --noah-navy-border: #24354f;
    --noah-gold: #e8c46a;
    --noah-gold-dark: #c9a227;

    /* Cor funcional (contraste testado sobre branco e sobre --noah-ink) */
    --noah-primary: #2451c4;
    --noah-primary-dark: #1c3d99;
    --noah-primary-tint: #e8edfc;
    --noah-success: #0e8a5f;
    --noah-success-tint: #e1f6ee;
    --noah-warning: #a6650a;
    --noah-warning-tint: #fbedd8;
    --noah-danger: #c22b3c;
    --noah-danger-tint: #fbe6e8;
    --noah-info: #0d6e8f;
    --noah-info-tint: #e2f3f8;

    /* Neutros / superfícies */
    --noah-bg: #f3f5f9;
    --noah-surface: #ffffff;
    --noah-border: #e3e7ee;
    --noah-text: #10162a;
    --noah-text-muted: #5c6478;
    --noah-text-faint: #8891a3;

    --noah-sidebar-width: 268px;
    --noah-radius: .75rem;
    --noah-shadow: 0 1px 2px rgba(16, 22, 42, .04), 0 8px 24px -12px rgba(16, 22, 42, .12);
    --noah-shadow-lg: 0 24px 60px -20px rgba(11, 18, 32, .35);

    --font-display: 'Source Sans Pro', -apple-system, 'Segoe UI', sans-serif;
    --font-body: 'Source Sans Pro', -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

body {
    background: var(--noah-bg);
    color: var(--noah-text);
    font-family: var(--font-body);
    font-size: .95rem;
}

h1, h2, h3, h4, h5, .box-title, .content-header h1 {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: normal;
    color: var(--noah-text);
}

a { color: var(--noah-primary); }
a:hover { color: var(--noah-primary-dark); }

/* ---------- Espaçamento de formulário "herdado" do Bootstrap 3 ----------
   O Bootstrap 5 REMOVEU o componente `.form-group` (tinha `margin-bottom:
   15px` embutido no Bootstrap 3/AdminLTE 2) e trocou por utilitários
   (`mb-3` etc.). Esta base de código inteira ainda usa `class="form-group"`
   à moda antiga (14 arquivos) - sem essa classe existir mais no BS5, todo
   `.form-group` ficava com `margin-bottom: 0`, e `label` sem negrito nem
   espaço embaixo (era esse o motivo real de tanto "grudado" recorrente,
   não só falta de padding pontual). Repor o comportamento clássico aqui
   cobre automaticamente TODA página que já usa essa marcação. */

.form-group {
    margin-bottom: 1rem;
}

.box-body label:not(.form-check-label):not(.filter-label):not(.form-label),
label.control-label {
    display: inline-block;
    margin-bottom: .4rem;
    font-weight: 600;
    color: var(--noah-text);
}

/* ---------- Layout: sidebar + área principal ---------- */

.app {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: var(--noah-sidebar-width);
    background: var(--noah-navy);
    background-image: radial-gradient(circle at 15% 0%, var(--noah-navy-soft), var(--noah-navy) 60%);
    color: #fff;
    flex-shrink: 0;
    border-right: 1px solid var(--noah-navy-border);
}

.sidebar-body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.sidebar-brand {
    padding: 1.5rem 1.25rem 1.25rem;
    border-bottom: 1px solid var(--noah-navy-border);
}

.sidebar-brand img {
    max-height: 42px;
}

.sidebar-nav {
    padding: 1rem .75rem;
    gap: .15rem;
}

.sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    color: rgba(255, 255, 255, .72);
    font-weight: 500;
    font-size: .92rem;
    padding: .7rem .9rem;
    border-radius: .55rem;
    transition: background .15s ease, color .15s ease;
}

.sidebar-nav .nav-link i {
    width: 1.35rem;
    text-align: center;
    font-size: 1rem;
    color: rgba(255, 255, 255, .55);
}

.sidebar-nav .nav-link:hover {
    background: rgba(255, 255, 255, .07);
    color: #fff;
}

.sidebar-nav .nav-link.active {
    background: linear-gradient(90deg, rgba(232, 196, 106, .18), rgba(232, 196, 106, .05));
    color: #fff;
    box-shadow: inset 3px 0 0 var(--noah-gold);
}

.sidebar-nav .nav-link.active i {
    color: var(--noah-gold);
}

.sidebar-footer {
    margin-top: auto;
    padding: 1rem 1.25rem 1.5rem;
    font-size: .72rem;
    color: rgba(255, 255, 255, .35);
    border-top: 1px solid var(--noah-navy-border);
}

@media (min-width: 992px) {
    .sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
    }
}

.app-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-navbar {
    background: var(--noah-surface);
    border-bottom: 1px solid var(--noah-border);
}

.app-sidebar-toggle {
    border: none;
    font-size: 1.25rem;
    color: var(--noah-text);
}

.user-menu {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--noah-text) !important;
    font-weight: 600;
}

.content-wrapper {
    flex: 1;
    padding: 1.5rem clamp(1rem, 3vw, 2rem) 2.5rem;
}

.content-header h1 {
    font-size: clamp(1.4rem, 2.4vw, 1.85rem);
    margin-bottom: .35rem;
}

.breadcrumb {
    font-size: .82rem;
    color: var(--noah-text-muted);
}

.app-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem;
    padding: .9rem clamp(1rem, 3vw, 2rem);
    font-size: .78rem;
    color: var(--noah-text-faint);
    background: var(--noah-surface);
    border-top: 1px solid var(--noah-border);
}

.loader-ajax {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: rgba(11, 18, 32, .45);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Cards (equivalente ao .box do AdminLTE) ---------- */

.box {
    background: var(--noah-surface);
    border: 1px solid var(--noah-border);
    border-radius: var(--noah-radius);
    box-shadow: var(--noah-shadow);
    margin-bottom: 1.5rem;
}

.box-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--noah-border);
}

.box-title {
    font-size: 1.05rem;
    font-weight: 500;
}

/* ---------- Grupo de ações do cabeçalho do card (botões "Novo", atalhos de lista etc.) ----------
   Substitui o padrão antigo de <a class="btn btn-sm btn-warning/btn-info"> soltos, separados por
   "&nbsp;&nbsp;", sem wrap nem hierarquia de cor — quebrava de forma desalinhada no mobile e cada
   tela usava uma cor diferente para o mesmo tipo de ação. Ver DESIGN.md, seção "Grupo de ações do
   cabeçalho". Uma ação só (ex.: só "Novo") também deve usar este componente, para manter o mesmo
   alinhamento/espaçamento em toda a base. */

.box-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.box-header-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 38px;
    white-space: nowrap;
}

/* Ação principal (criar/novo registro) em destaque sólido; ações secundárias (atalhos para outra
   tela/lista) em contorno neutro — mesma cor em toda a base, no lugar do amarelo/ciano aleatório. */
.box-header-actions .btn-header-secondary {
    color: var(--noah-text-muted);
    border-color: var(--noah-border);
    background: var(--noah-surface);
}

.box-header-actions .btn-header-secondary:hover {
    color: var(--noah-text);
    background: var(--noah-bg);
    border-color: var(--noah-text-muted);
}

@media (max-width: 575.98px) {
    .box-header-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .box-header-actions .btn {
        justify-content: center;
    }
}

.box-body {
    padding: 1.25rem;
}

.box-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--noah-border);
}

.box-primary {
    border-top: 3px solid var(--noah-primary);
}

/* ---------- Ritmo vertical genérico ----------
   Vários formulários (protocolos, financeiro) empilham blocos de conteúdo -
   texto de apoio, `<legend>`, uma segunda seção `.row` - direto um embaixo
   do outro sem respiro nenhum. Regras genéricas para não depender de cada
   página adicionar margem manualmente. */

.box-header .row {
    --bs-gutter-y: 1rem;
}

.box-body legend {
    margin: 0 0 1.1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--noah-border);
    font-size: .95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--noah-text-muted);
}

.box-body form .row + .row {
    margin-top: 1.5rem;
}

.box-body .alert:first-child {
    margin-top: 0;
}

/* Bloco de informação rotulado (cabeçalho de detalhe: "Protocolo", "Registrado por" etc.) -
   rótulo pequeno em maiúsculas acima do valor, mesmo padrão visual do .filter-field. */

.info-block-row {
    --bs-gutter-y: 1.1rem;
}

.info-block {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.info-block-label {
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--noah-text-muted);
}

.info-block-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--noah-text);
    line-height: 1.4;
}

.info-block-sub {
    font-size: .82rem;
    color: var(--noah-text-muted);
}

/* ---------- Barra de filtros/pesquisa ----------
   Cabeçalho de formulário de busca (antes: campos "grudados" direto no
   .box-header, sem espaçamento nem alinhamento consistente). Agora: grid
   responsivo com rótulo acima do campo, gap generoso, e uma linha de ações
   (botões) sempre visualmente separada dos campos de filtro. */

.filter-bar {
    padding: 1.1rem 1.25rem;
    background: var(--noah-bg);
    border-bottom: 1px solid var(--noah-border);
}

.filter-bar .row {
    --bs-gutter-x: 1.25rem;
    --bs-gutter-y: 1rem;
}

.filter-field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 0;
}

.filter-field .filter-label {
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--noah-text-muted);
}

.filter-field .form-control,
.filter-field .form-select {
    background: var(--noah-surface);
}

.filter-range {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.filter-range .form-control {
    min-width: 0;
}

.filter-range-sep {
    color: var(--noah-text-faint);
    font-size: .8rem;
    flex-shrink: 0;
}

.filter-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    color: var(--noah-text-muted);
    white-space: nowrap;
}

.filter-hint {
    font-size: .8rem;
    color: var(--noah-text-faint);
    margin: 0;
}

/* Quando usado fora da .filter-bar, como texto de apoio solto no topo de um .box-body
   (ex.: configuracoes/asaas.php), precisa de respiro embaixo antes do próximo bloco. */
.box-body > .filter-hint {
    margin-bottom: 1.25rem;
}

.filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    padding-top: 1rem;
    margin-top: .25rem;
    border-top: 1px dashed var(--noah-border);
}

@media (min-width: 768px) {
    .filter-actions {
        border-top: none;
        margin-top: .85rem;
        padding-top: 0;
        align-items: flex-end;
        justify-content: flex-end;
    }
}

/* ---------- KPI cards do dashboard ----------
   Substituem os antigos ".small-box" com texto branco sobre cor
   saturada (baixo contraste). Agora: card branco + acento colorido,
   contraste do texto sempre >= AA sobre fundo branco. */

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

.kpi-card {
    background: var(--noah-surface);
    border: 1px solid var(--noah-border);
    border-radius: var(--noah-radius);
    padding: 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    position: relative;
    overflow: hidden;
}

.kpi-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--kpi-accent, var(--noah-primary));
}

.kpi-card .kpi-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--kpi-tint, var(--noah-primary-tint));
    color: var(--kpi-accent, var(--noah-primary));
    font-size: 1rem;
}

.kpi-card .kpi-value {
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 600;
    color: var(--noah-text);
    line-height: 1.15;
    display: flex;
    align-items: baseline;
    gap: .3rem;
    flex-wrap: wrap;
}

.kpi-card .kpi-value small {
    font-family: var(--font-body);
    font-size: .8rem;
    font-weight: 700;
    color: var(--noah-text-faint);
}

.kpi-card .kpi-label {
    font-size: .82rem;
    color: var(--noah-text-muted);
    font-weight: 500;
}

.kpi-card .kpi-delta {
    align-self: flex-start;
    font-size: .74rem;
    font-weight: 700;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: var(--kpi-tint, var(--noah-primary-tint));
    color: var(--kpi-accent, var(--noah-primary));
}

.kpi-primary { --kpi-accent: var(--noah-primary); --kpi-tint: var(--noah-primary-tint); }
.kpi-success { --kpi-accent: var(--noah-success); --kpi-tint: var(--noah-success-tint); }
.kpi-warning { --kpi-accent: var(--noah-warning); --kpi-tint: var(--noah-warning-tint); }
.kpi-info    { --kpi-accent: var(--noah-info);    --kpi-tint: var(--noah-info-tint); }
.kpi-danger  { --kpi-accent: var(--noah-danger);  --kpi-tint: var(--noah-danger-tint); }

/* Badges de status (venc. contrato, %matrícula etc.) com bom contraste */
.badge.bg-success { background: var(--noah-success-tint) !important; color: var(--noah-success) !important; }
.badge.bg-warning { background: var(--noah-warning-tint) !important; color: var(--noah-warning) !important; }
.badge.bg-danger  { background: var(--noah-danger-tint) !important;  color: var(--noah-danger) !important; }

/* ---------- Botões ---------- */

.btn-primary {
    --bs-btn-bg: var(--noah-primary);
    --bs-btn-border-color: var(--noah-primary);
    --bs-btn-hover-bg: var(--noah-primary-dark);
    --bs-btn-hover-border-color: var(--noah-primary-dark);
}

.btn-success {
    --bs-btn-bg: var(--noah-success);
    --bs-btn-border-color: var(--noah-success);
}

/* =====================================================================
   LOGIN — painel bipartido (auth | imagem institucional)
   ===================================================================== */

.auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 480px) 1fr;
    background: var(--noah-surface);
}

.auth-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.75rem, 5vw, 4.5rem);
    position: relative;
}

.auth-panel-inner {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
}

.auth-logo {
    margin-bottom: 2.25rem;
}

.auth-logo img {
    height: 40px;
}

.auth-title {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--noah-text);
    margin-bottom: .35rem;
}

.auth-subtitle {
    color: var(--noah-text-muted);
    font-size: .9rem;
    margin-bottom: 2rem;
}

.auth-panel .form-label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--noah-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .35rem;
}

.auth-panel .form-control {
    padding: .7rem .9rem;
    border-radius: .6rem;
    border-color: var(--noah-border);
    background: var(--noah-bg);
}

.auth-panel .form-control:focus {
    background: #fff;
    border-color: var(--noah-primary);
    box-shadow: 0 0 0 4px var(--noah-primary-tint);
}

.auth-submit {
    background: var(--noah-ink);
    border-color: var(--noah-ink);
    border-radius: .6rem;
    padding: .75rem 1rem;
    font-weight: 700;
    letter-spacing: .02em;
    transition: background .15s ease, transform .1s ease;
}

.auth-submit:hover {
    background: var(--noah-navy-soft);
    border-color: var(--noah-navy-soft);
    transform: translateY(-1px);
}

.auth-footer {
    margin-top: 2.5rem;
    font-size: .75rem;
    color: var(--noah-text-faint);
}

.auth-showcase {
    position: relative;
    background: var(--noah-ink);
    background-image:
        radial-gradient(circle at 85% 15%, rgba(232, 196, 106, .16), transparent 45%),
        radial-gradient(circle at 10% 90%, rgba(36, 81, 196, .25), transparent 50%),
        linear-gradient(160deg, var(--noah-ink), #060a14 85%);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: clamp(2rem, 4vw, 3.5rem);
    color: #fff;
}

.auth-showcase::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../../imagens/login-bg.webp');
    background-size: cover;
    background-position: center;
    opacity: .18;
    mix-blend-mode: screen;
}

.auth-showcase-badge {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    align-self: flex-start;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    padding: .4rem .85rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--noah-gold);
}

.auth-showcase-copy {
    position: relative;
    z-index: 1;
    max-width: 30rem;
    margin-top: 2rem;
}

.auth-showcase-copy h2 {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 600;
    line-height: 1.15;
    margin-bottom: 1rem;
    color: #fff;
}

.auth-showcase-copy h2 em {
    font-style: normal;
    color: var(--noah-gold);
}

.auth-showcase-copy p {
    color: rgba(255, 255, 255, .68);
    font-size: .98rem;
    line-height: 1.6;
}

.auth-showcase-image {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    flex: 1;
    margin: 1rem -1rem -3.5rem;
}

.auth-showcase-image img {
    max-height: min(52vh, 480px);
    width: auto;
    filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45));
}

.auth-showcase-stats {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.auth-showcase-stats strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--noah-gold);
}

.auth-showcase-stats span {
    font-size: .76rem;
    color: rgba(255, 255, 255, .6);
}

@media (max-width: 991.98px) {
    .auth-shell {
        grid-template-columns: 1fr;
    }

    .auth-showcase {
        order: -1;
        padding: 2.25rem 1.5rem 2rem;
    }

    .auth-showcase-image {
        display: none;
    }

    .auth-showcase-copy h2 {
        font-size: 1.5rem;
    }

    .auth-showcase-stats {
        display: none;
    }

    .auth-panel {
        padding: 2rem 1.5rem 2.5rem;
    }
}

/* ---------- Páginas de erro (mesmo shell simplificado) ---------- */

.homelogin {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--noah-ink);
    background-image:
        radial-gradient(circle at 85% 15%, rgba(232, 196, 106, .16), transparent 45%),
        linear-gradient(160deg, var(--noah-ink), #060a14 85%);
    padding: 1.5rem;
}

.login-box {
    width: 100%;
    max-width: 380px;
}

.login-logo {
    text-align: center;
    margin-bottom: 1.25rem;
}

.login-logo img {
    max-height: 46px;
}

.login-box-body {
    background: #fff;
    padding: 1.75rem;
    border-radius: var(--noah-radius);
    box-shadow: var(--noah-shadow-lg);
}

.login-box .text-center.small,
.login-box .text-center {
    color: rgba(255, 255, 255, .55);
}

/* =====================================================================
   DATATABLES — skin próprio
   =====================================================================
   O bundle vendorizado em plugins/datatables usa marcação da integração
   Bootstrap 3 (ex.: botões ".btn.btn-default", paginação em
   "li.paginate_button" sem as classes ".page-item/.page-link" que o CSS
   do Bootstrap 5 espera) - por isso os controles apareciam sem estilo,
   colados uns nos outros. Em vez de depender do tema que vem com o
   plugin (incompatível com o BS5 já usado no resto do app), o DataTables
   é estilizado diretamente aqui pelas classes que ele sempre gera,
   independente de versão do Bootstrap. ===================================================================== */

.dataTables_wrapper {
    padding-top: .25rem;
}

/* Barra superior (botões Imprimir/Exportar + busca) */
.dataTables_wrapper > .row:first-child,
.dataTables_wrapper .dt-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1rem;
}

.dataTables_wrapper .dt-buttons {
    background: none;
    border: none;
}

.dataTables_wrapper .dt-buttons.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.dataTables_wrapper .dt-buttons .btn,
.dataTables_wrapper .dt-buttons button {
    flex: 0 0 auto;
    background: var(--noah-surface);
    border: 1px solid var(--noah-border) !important;
    color: var(--noah-text-muted);
    font-size: .8rem;
    font-weight: 600;
    padding: .45rem .9rem;
    border-radius: .5rem !important;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.dataTables_wrapper .dt-buttons .btn:hover,
.dataTables_wrapper .dt-buttons button:hover {
    background: var(--noah-primary-tint);
    border-color: var(--noah-primary);
    color: var(--noah-primary);
}

.dataTables_length,
.dataTables_filter {
    display: flex;
    align-items: center;
}

.dataTables_length label,
.dataTables_filter label {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--noah-text-muted);
    margin: 0;
    white-space: nowrap;
}

.dataTables_length select,
.dataTables_filter input {
    background: var(--noah-surface);
    border: 1px solid var(--noah-border);
    border-radius: .5rem;
    padding: .4rem .65rem;
    font-size: .85rem;
    color: var(--noah-text);
    min-height: 2.15rem;
}

.dataTables_filter input:focus,
.dataTables_length select:focus {
    outline: none;
    border-color: var(--noah-primary);
    box-shadow: 0 0 0 3px var(--noah-primary-tint);
}

/* Tabela */
table.dataTable {
    border-collapse: separate !important;
    border-spacing: 0;
    width: 100% !important;
}

table.dataTable thead th {
    background: var(--noah-bg);
    color: var(--noah-text-muted);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--noah-border) !important;
    padding: .65rem .75rem;
    white-space: nowrap;
}

table.dataTable tbody td {
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--noah-border);
    vertical-align: middle;
}

table.dataTable tbody tr:hover {
    background: var(--noah-primary-tint);
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {
    position: relative;
    padding-left: 2rem;
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
    top: 50%;
    left: .6rem;
    margin-top: -8px;
    width: 16px;
    height: 16px;
    line-height: 15px;
    background: var(--noah-primary);
    border-radius: 50%;
    box-shadow: none;
    font-size: .68rem;
}

/* Cabeçalhos clicáveis (ordenação) - o CSS que vem no bundle usa ::before/::after com opacity 0.12
   quase invisível sobre --noah-bg; redesenhado aqui com as setas visíveis em cima do estado ativo. */
table.dataTable thead th.dt-orderable-asc,
table.dataTable thead th.dt-orderable-desc,
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    cursor: pointer;
    padding-right: 1.5rem;
    position: relative;
}

table.dataTable thead th.sorting::before,
table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::before,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::before,
table.dataTable thead th.sorting_desc::after,
table.dataTable thead th.dt-orderable-asc span.dt-column-order::before,
table.dataTable thead th.dt-orderable-asc span.dt-column-order::after,
table.dataTable thead th.dt-orderable-desc span.dt-column-order::before,
table.dataTable thead th.dt-orderable-desc span.dt-column-order::after {
    font-family: "Font Awesome 5 Free", FontAwesome, sans-serif;
    font-weight: 900;
    position: absolute;
    right: .55rem;
    font-size: .65rem;
    line-height: 1;
    opacity: .35;
}

table.dataTable thead th.sorting::before,
table.dataTable thead th.dt-orderable-asc span.dt-column-order::before {
    content: "\f0de";
    top: 40%;
}

table.dataTable thead th.sorting::after,
table.dataTable thead th.dt-orderable-desc span.dt-column-order::after {
    content: "\f0dd";
    top: 58%;
}

table.dataTable thead th.sorting_asc::before,
table.dataTable thead th.sorting_asc span.dt-column-order::before {
    content: "\f0de";
    top: 48%;
    opacity: 1;
    color: var(--noah-primary);
}

table.dataTable thead th.sorting_desc::after,
table.dataTable thead th.sorting_desc span.dt-column-order::after {
    content: "\f0dd";
    top: 48%;
    opacity: 1;
    color: var(--noah-primary);
}

table.dataTable thead th[data-dt-column]:not(.sorting_disabled):hover {
    color: var(--noah-primary);
}

/* Linha de detalhe (child row) que o plugin Responsive abre no mobile quando colunas são escondidas */
table.dataTable > tbody > tr.child {
    background: var(--noah-bg) !important;
}

table.dataTable > tbody > tr.child:hover {
    background: var(--noah-bg) !important;
}

table.dataTable > tbody > tr.child ul.dtr-details {
    list-style: none;
    margin: 0;
    padding: .5rem .75rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

table.dataTable > tbody > tr.child ul.dtr-details li {
    border-bottom: 1px dashed var(--noah-border);
    padding-bottom: .5rem;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    max-width: 100%;
}

table.dataTable > tbody > tr.child ul.dtr-details li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

table.dataTable > tbody > tr.child span.dtr-title {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--noah-text-muted);
    flex: 0 0 auto;
}

table.dataTable > tbody > tr.child span.dtr-data {
    color: var(--noah-text);
    text-align: right;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Colunas visíveis também podem receber valores longos e sem espaços (tokens, e-mails) - sem isso
   elas também conseguem forçar a tabela inteira a ficar mais larga que a viewport no mobile.
   "overflow-wrap: anywhere" só quebra a palavra quando realmente não há outro jeito de caber -
   diferente de "word-break: break-word", que quebra de forma mais agressiva mesmo cabendo. */
table.dataTable td,
table.dataTable th {
    overflow-wrap: anywhere;
}

/* Rodapé: contagem + paginação */
.dataTables_wrapper > .row:last-child {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--noah-border);
}

.dataTables_info {
    font-size: .8rem;
    color: var(--noah-text-faint);
}

.dataTables_paginate {
    margin-left: auto;
}

.dataTables_paginate .pagination {
    display: flex;
    align-items: center;
    gap: .3rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.dataTables_paginate .paginate_button {
    display: block;
}

.dataTables_paginate .paginate_button a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    height: 2.1rem;
    padding: 0 .55rem;
    border-radius: .5rem;
    border: 1px solid transparent;
    color: var(--noah-text-muted);
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.dataTables_paginate .paginate_button:hover a {
    background: var(--noah-primary-tint);
    color: var(--noah-primary);
    text-decoration: none;
}

.dataTables_paginate .paginate_button.current a {
    background: var(--noah-primary);
    border-color: var(--noah-primary);
    color: #fff;
}

.dataTables_paginate .paginate_button.disabled a {
    color: var(--noah-text-faint);
    opacity: .5;
    cursor: default;
    pointer-events: none;
}

.dataTables_processing {
    background: var(--noah-surface) !important;
    color: var(--noah-text) !important;
    border: 1px solid var(--noah-border);
    border-radius: var(--noah-radius);
    box-shadow: var(--noah-shadow);
}

@media (max-width: 767.98px) {
    .dataTables_wrapper > .row:first-child,
    .dataTables_wrapper > .row:last-child {
        flex-direction: column;
        align-items: stretch;
    }

    .dataTables_paginate {
        margin-left: 0;
    }

    .dataTables_paginate .pagination {
        justify-content: center;
        flex-wrap: wrap;
    }

    .dataTables_filter input {
        flex: 1;
    }
}

/* ---------- Abas do módulo Configurações ---------- */

.settings-tabs {
    border-bottom: none;
    padding: .35rem .5rem 0;
}

.settings-tabs .nav-link {
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    color: var(--noah-text-muted);
    font-weight: 600;
    font-size: .88rem;
    padding: .9rem 1.1rem;
}

.settings-tabs .nav-link:hover {
    color: var(--noah-primary);
}

.settings-tabs .nav-link.active {
    color: var(--noah-primary);
    border-bottom-color: var(--noah-primary);
    background: none;
}

/* ---------- Status financeiro (pago/não pago) ---------- */
/* Antes vinha como <style> inline duplicado em cada página do financeiro - centralizado aqui. */

.pago {
    color: var(--noah-success);
}

.nao-pago {
    color: var(--noah-danger);
}

/* ---------- Variante compacta do .kpi-grid ----------
   Usada quando o resumo de KPIs é secundário na página (ex.: resumo do período acima da grade de
   lançamentos) - mesmo componente do dashboard, só com cards menores para não competir visualmente
   com o conteúdo principal (a lista de resultados) logo abaixo. */

.kpi-grid-compact {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .75rem;
}

.kpi-grid-compact .kpi-card {
    padding: .85rem .9rem;
    gap: .4rem;
}

.kpi-grid-compact .kpi-icon {
    width: 1.9rem;
    height: 1.9rem;
    font-size: .85rem;
}

.kpi-grid-compact .kpi-value {
    font-size: 1.2rem;
}

/* ---------- Rodapé da grade de lançamentos (financeiro) ---------- */

.lancamentos-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--noah-border);
}

.lancamentos-totais {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.lancamentos-total {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    text-align: right;
}

.lancamentos-total-label {
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--noah-text-muted);
}

/* =====================================================================
   IMPLANTAÇÕES — barra de progresso do roteiro, cards de etapa, notas
   ===================================================================== */

.implan-progress {
    height: .4rem;
    border-radius: 1rem;
    background: var(--noah-border);
    overflow: hidden;
    margin-bottom: .25rem;
}

.implan-progress-bar {
    height: 100%;
    background: var(--noah-primary);
    border-radius: 1rem;
    transition: width .2s ease;
}

.implan-etapas {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.implan-etapa {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .75rem .9rem;
    border: 1px solid var(--noah-border);
    border-radius: var(--noah-radius);
    background: var(--noah-surface);
}

.implan-etapa-concluida {
    background: var(--noah-success-tint);
    border-color: transparent;
}

.implan-etapa-ordem {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    flex: 0 0 auto;
}

.implan-etapa-corpo {
    flex: 1 1 auto;
    min-width: 0;
}

.implan-etapa-titulo {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.implan-etapa-acoes {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 0 0 auto;
}

.implan-etapa-acoes .form-select {
    width: auto;
}

.implan-etapa-form {
    border-top: 1px dashed var(--noah-border);
    padding-top: 1rem;
}

.implan-notas {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    max-height: 320px;
    overflow-y: auto;
}

.implan-nota {
    padding: .6rem .75rem;
    border-radius: var(--noah-radius);
    background: var(--noah-bg);
    border: 1px solid var(--noah-border);
}

.implan-participantes li,
.implan-anexos li {
    padding: .5rem 0;
    border-bottom: 1px dashed var(--noah-border);
}

.implan-participantes li:last-child,
.implan-anexos li:last-child {
    border-bottom: none;
}

@media (max-width: 575.98px) {
    .implan-etapa {
        flex-wrap: wrap;
    }

    .implan-etapa-ordem {
        flex-direction: row;
    }

    .implan-etapa-acoes {
        width: 100%;
        justify-content: space-between;
    }

    .implan-etapa-acoes .form-select {
        flex: 1 1 auto;
    }
}

/* Página pública de assinatura (implantacoes/assinar.php) - painel único centralizado, sem a
   vitrine institucional do login (.auth-shell é grid de 2 colunas, não serve aqui). */
.auth-shell-single {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--noah-bg);
    padding: 1.5rem;
}

.auth-shell-single .auth-panel {
    background: var(--noah-surface);
    border: 1px solid var(--noah-border);
    border-radius: var(--noah-radius);
    box-shadow: var(--noah-shadow);
    padding: clamp(1.5rem, 5vw, 3rem);
    width: 100%;
    max-width: 560px;
}

.lancamentos-total-value {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
}

/* =====================================================================
   CONTRATOS — texto renderizado (vindo do CKEditor) precisa de tipografia
   própria, já que reset do Bootstrap deixa parágrafo/título sem respiro.
   ===================================================================== */

.contrato-corpo {
    line-height: 1.7;
    color: var(--noah-text);
}

.contrato-corpo p {
    margin-bottom: 1rem;
}

.contrato-corpo h1,
.contrato-corpo h2,
.contrato-corpo h3 {
    margin-top: 1.5rem;
    margin-bottom: .75rem;
    font-family: var(--font-display);
}

.contrato-corpo table {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
}

.contrato-corpo table td,
.contrato-corpo table th {
    border: 1px solid var(--noah-border);
    padding: .5rem;
}

.contrato-tags .btn {
    white-space: normal;
    line-height: 1.3;
}