/* ==========================================================================
   ProvaDinâmica — camada de tema sobre o Bootstrap 5.3
   Redefine os tokens do Bootstrap (--bs-*) e refina componentes existentes
   (.card, .btn, .table, .form-*). NÃO cria classes paralelas às do Bootstrap;
   utilitários próprios usam o prefixo .pd-*. Carregado depois do app.css.
   ========================================================================== */

:root {
    /* Paleta base */
    --pd-ground: #f4f5f8;
    --pd-surface: #ffffff;
    --pd-surface-2: #fbfcfe;
    --pd-sidebar: #1b2437;
    --pd-sidebar-2: #161e2e;
    --pd-accent: #3457d5;
    --pd-accent-hover: #2a49b8;
    --pd-accent-soft: #e7edff;
    --pd-border: #e3e6ec;
    --pd-border-strong: #d3d8e2;
    --pd-txt: #1f2733;
    --pd-txt-muted: #6b7480;
    --pd-ok: #1f9d67;
    --pd-ok-soft: #e2f4ec;
    --pd-danger: #d64550;
    --pd-danger-soft: #fbe5e7;
    --pd-shadow: 0 1px 2px rgba(20, 28, 46, .06), 0 4px 16px rgba(20, 28, 46, .06);
    --pd-shadow-sm: 0 1px 2px rgba(20, 28, 46, .08);
    --pd-radius: 12px;
    --pd-radius-sm: 8px;

    /* Mapeamento para os tokens do Bootstrap 5.3 */
    --bs-body-bg: var(--pd-ground);
    --bs-body-color: var(--pd-txt);
    --bs-secondary-color: var(--pd-txt-muted);
    --bs-tertiary-bg: var(--pd-surface-2);
    --bs-border-color: var(--pd-border);
    --bs-border-color-translucent: var(--pd-border);
    --bs-primary: var(--pd-accent);
    --bs-primary-rgb: 52, 87, 213;
    --bs-link-color: var(--pd-accent);
    --bs-link-color-rgb: 52, 87, 213;
    --bs-link-hover-color: var(--pd-accent-hover);
    --bs-emphasis-color: var(--pd-txt);
}

/* Fonte de sistema refinada (sem webfont, conforme convenção do repo). */
html, body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--pd-txt);
    background-color: var(--pd-ground);
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--pd-accent);
    text-decoration: none;
}

    a:hover {
        color: var(--pd-accent-hover);
        text-decoration: underline;
    }

/* Âncoras que são componentes (botões, itens de menu, marca, chip) não devem
   sublinhar no hover — só links de texto de conteúdo. */
.btn:hover,
.nav-link:hover,
.navbar-brand:hover,
.user-chip:hover {
    text-decoration: none;
}

/* ---- Tipografia ---- */
h1, .h1 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

h2, .h2 {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.text-muted {
    color: var(--pd-txt-muted) !important;
}

/* ---- Área de conteúdo ---- */
.content {
    padding-top: 1.75rem;
    padding-bottom: 2.5rem;
    /* Sem limite de largura: o card/tabela usam toda a área disponível (evita a
       faixa vazia à direita em telas largas e maximiza o espaço das listagens). */
    max-width: none;
}

/* ---- Cards ---- */
.card {
    --bs-card-bg: var(--pd-surface);
    --bs-card-border-color: var(--pd-border);
    --bs-card-border-radius: var(--pd-radius);
    --bs-card-inner-border-radius: calc(var(--pd-radius) - 1px);
    --bs-card-cap-bg: transparent;
    box-shadow: var(--pd-shadow);
}

.card-header {
    border-bottom: 1px solid var(--pd-border);
    padding: 1.05rem 1.25rem;
    font-weight: 600;
    background: transparent;
}

    .card-header .card-subtitle {
        font-size: .78rem;
        color: var(--pd-txt-muted);
        font-weight: 400;
        margin-top: .15rem;
    }

.card-body {
    padding: 1.25rem;
}

.card-footer {
    background: transparent;
    border-top: 1px solid var(--pd-border);
    padding: .9rem 1.25rem;
}

/* ---- Botões ---- */
.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-font-size: .875rem;
    --bs-btn-border-radius: var(--pd-radius-sm);
    --bs-btn-padding-x: .9rem;
    --bs-btn-padding-y: .5rem;
}

.btn-sm {
    --bs-btn-font-size: .8rem;
    --bs-btn-padding-x: .65rem;
    --bs-btn-padding-y: .35rem;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--pd-accent);
    --bs-btn-border-color: var(--pd-accent);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--pd-accent-hover);
    --bs-btn-hover-border-color: var(--pd-accent-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--pd-accent-hover);
    --bs-btn-active-border-color: var(--pd-accent-hover);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--pd-accent);
    --bs-btn-disabled-border-color: var(--pd-accent);
}

.btn-outline-primary {
    --bs-btn-color: var(--pd-accent);
    --bs-btn-border-color: var(--pd-accent);
    --bs-btn-hover-bg: var(--pd-accent);
    --bs-btn-hover-border-color: var(--pd-accent);
    --bs-btn-active-bg: var(--pd-accent-hover);
    --bs-btn-active-border-color: var(--pd-accent-hover);
}

.btn-outline-secondary {
    --bs-btn-color: var(--pd-txt);
    --bs-btn-border-color: var(--pd-border-strong);
    --bs-btn-hover-color: var(--pd-txt);
    --bs-btn-hover-bg: var(--pd-surface-2);
    --bs-btn-hover-border-color: var(--pd-txt-muted);
    --bs-btn-active-bg: var(--pd-surface-2);
    --bs-btn-active-border-color: var(--pd-txt-muted);
    --bs-btn-active-color: var(--pd-txt);
}

/* Override do foco herdado do app.css para casar com o acento. */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 3px var(--pd-accent-soft);
}

/* ---- Formulários ---- */
.form-label {
    font-weight: 600;
    font-size: .8rem;
    color: var(--pd-txt);
    margin-bottom: .35rem;
}

.form-control, .form-select {
    border-color: var(--pd-border-strong);
    border-radius: var(--pd-radius-sm);
    color: var(--pd-txt);
}

    .form-control:focus, .form-select:focus {
        border-color: var(--pd-accent);
        box-shadow: 0 0 0 3px var(--pd-accent-soft);
    }

.form-check-input:checked {
    background-color: var(--pd-accent);
    border-color: var(--pd-accent);
}

.form-text {
    color: var(--pd-txt-muted);
    font-size: .78rem;
}

/* ---- Tabelas ---- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--pd-txt);
    --bs-table-border-color: var(--pd-border);
    --bs-table-hover-bg: var(--pd-surface-2);
    --bs-table-striped-bg: var(--pd-surface-2);
    margin-bottom: 0;
    vertical-align: middle;
}

    .table > thead th {
        font-size: .72rem;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--pd-txt-muted);
        font-weight: 700;
        background: var(--pd-surface-2);
        border-bottom: 1px solid var(--pd-border);
        padding: .7rem 1rem;
    }

    .table > tbody > tr > td {
        padding: .8rem 1rem;
        border-bottom-color: var(--pd-border);
    }

/* Tabela dentro de card: encosta nas bordas e o card recorta os cantos. */
.card > .table-responsive, .card > .table {
    margin-bottom: 0;
}

    .card > .table-responsive .table > thead th:first-child,
    .card > .table > thead th:first-child {
        padding-left: 1.25rem;
    }

    .card > .table-responsive .table > thead th:last-child,
    .card > .table > thead th:last-child {
        padding-right: 1.25rem;
    }

    .card > .table-responsive .table > tbody td:first-child,
    .card > .table > tbody td:first-child {
        padding-left: 1.25rem;
    }

    .card > .table-responsive .table > tbody td:last-child,
    .card > .table > tbody td:last-child {
        padding-right: 1.25rem;
    }

/* ---- Alertas ---- */
.alert {
    border-radius: var(--pd-radius-sm);
    border: 1px solid transparent;
}

/* ---- Badges / pílulas de situação (utilitário próprio) ---- */
.pd-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .74rem;
    font-weight: 600;
    padding: .2rem .55rem;
    border-radius: 30px;
    line-height: 1.4;
}

    .pd-pill::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
    }

.pd-pill-ok {
    background: var(--pd-ok-soft);
    color: var(--pd-ok);
}

.pd-pill-off {
    background: var(--pd-danger-soft);
    color: var(--pd-danger);
}

/* ---- Cabeçalho de página (título + ação) ---- */
.pd-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

    .pd-page-head h1 {
        margin: 0 0 .15rem;
    }

    .pd-page-head .pd-page-sub {
        margin: 0;
        color: var(--pd-txt-muted);
        font-size: .85rem;
    }

/* ---- Paginação (usa .btn-group de botões, refina o texto de contexto) ---- */
.pd-muted {
    color: var(--pd-txt-muted);
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
}

/* ---- Card "flush" (tabela colada nas bordas): recorta os cantos arredondados ---- */
.card.pd-card-flush {
    overflow: hidden;
}

/* ---- Log de atividades: chave da ação (grupo.acao) e JSON de detalhes ---- */
.pd-action-key {
    font-size: .8rem;
    color: var(--pd-txt-muted);
    background: var(--pd-surface-2, rgba(0, 0, 0, .04));
    padding: .1rem .4rem;
    border-radius: .3rem;
    white-space: nowrap;
}

.pd-json {
    font-size: .8rem;
    background: var(--pd-surface-2, rgba(0, 0, 0, .04));
    padding: .6rem .75rem;
    border-radius: .4rem;
    max-height: 40vh;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ---- Busca por coluna: linha de filtros no cabeçalho da tabela ---- */
.pd-col-search > thead > tr.pd-col-filters > td {
    background: var(--pd-surface);
    border-bottom: 2px solid var(--pd-border);
    padding: .5rem .6rem;
    vertical-align: middle;
}

    .pd-col-search > thead > tr.pd-col-filters .form-control,
    .pd-col-search > thead > tr.pd-col-filters .form-select {
        font-size: .8rem;
    }

/* ---- Coluna de ações fixa à direita ----
   Em tabelas largas (muitos filtros), a última coluna cairia fora da borda direita,
   exigindo rolar até o fim para alcançar Buscar/Limpar (linha de filtros) e
   Editar/Excluir (cada linha). Fixando-a (sticky) ela acompanha a rolagem horizontal
   e fica sempre visível. Fundos opacos por contexto para o conteúdo rolado não vazar;
   linhas de mensagem (td[colspan]) ficam de fora. */
.pd-col-search > thead > tr > th:last-child,
.pd-col-search > thead > tr.pd-col-filters > td:last-child,
.pd-col-search > tbody > tr > td:last-child:not([colspan]) {
    position: sticky;
    right: 0;
    z-index: 2;
    box-shadow: -8px 0 8px -8px rgba(20, 28, 46, .12);
}

    /* Cabeçalho e linha de filtros ficam acima das células comuns coladas. */
    .pd-col-search > thead > tr > th:last-child {
        background: var(--pd-surface-2);
    }

    .pd-col-search > thead > tr.pd-col-filters > td:last-child {
        background: var(--pd-surface);
        z-index: 3;
    }

    /* Corpo: fundo padrão da linha e o mesmo realce do hover do Bootstrap. */
    .pd-col-search > tbody > tr > td:last-child:not([colspan]) {
        background: var(--pd-surface);
    }

    .pd-col-search > tbody > tr:hover > td:last-child:not([colspan]) {
        background: var(--pd-surface-2);
    }

/* ---- Botões de ação por linha (ícones) ----
   Editar/Excluir viraram botões-ícone; deixa-os compactos e quadrados na coluna
   de ações das listagens (mantém as classes .btn do Bootstrap). */
.pd-col-search > tbody > tr > td:last-child .btn {
    padding: .3rem .45rem;
    line-height: 1;
}

    .pd-col-search > tbody > tr > td:last-child .btn svg {
        display: block;
    }

/* ---- Menu lateral recolhível (rail de ícones) ----
   Colapsa a sidebar para um trilho estreito só com ícones, liberando largura para
   o conteúdo. Ativado pela classe .sidebar-collapsed no <html> (persistida em
   localStorage; ver wwwroot/js/sidebar.js), sobrevivendo a filtros/navegação.
   Só no desktop; no mobile o menu tem o próprio comportamento. */
@media (min-width: 641px) {
    html.sidebar-collapsed .page .sidebar {
        width: 72px;
    }

    html.sidebar-collapsed .page .navbar-brand {
        justify-content: center;
    }

    html.sidebar-collapsed .page .brand-text {
        display: none;
    }

    /* Sem cabeçalhos de grupo no trilho (os grupos são abertos ao recolher). */
    html.sidebar-collapsed .page .nav-group-header {
        display: none;
    }

    html.sidebar-collapsed .page .nav-group {
        border-top: none;
    }

    /* Ícones centralizados; rótulos ocultos (nó de texto some com font-size:0,
       o ícone .bi tem tamanho em rem e não é afetado).
       ESCOPADO À .sidebar: .nav-item/.nav-link são classes do Bootstrap e qualquer
       tela com nav-tabs no conteúdo perdia o texto das abas com a sidebar recolhida. */
    html.sidebar-collapsed .page .sidebar .nav-item {
        padding-left: .5rem !important;
        padding-right: .5rem !important;
    }

    html.sidebar-collapsed .page .sidebar .nav-item .nav-link {
        justify-content: center;
        font-size: 0;
    }

        html.sidebar-collapsed .page .sidebar .nav-item .nav-link .bi {
            margin-right: 0;
        }
}

/* ---- Cabeçalho de coluna ordenável ---- */
.pd-sort {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: inherit;
    text-decoration: none;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
}

    .pd-sort:hover {
        color: var(--pd-accent);
        text-decoration: none;
    }

/* Indicador: duas setas (cima/baixo). Neutro visível; direção ativa em destaque. */
.pd-sort-ind {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
}

    .pd-sort-ind svg {
        display: block;
        flex: 0 0 auto;
    }

    .pd-sort-ind .pd-sort-up,
    .pd-sort-ind .pd-sort-down {
        fill: var(--pd-txt-muted);
        opacity: .4;
    }

.pd-sort:hover .pd-sort-up,
.pd-sort:hover .pd-sort-down {
    opacity: .65;
}

/* Coluna ativa: rótulo em acento e a seta da direção corrente destacada. */
.pd-sort-asc,
.pd-sort-desc {
    color: var(--pd-accent);
    font-weight: 700;
}

.pd-sort-asc .pd-sort-up {
    fill: var(--pd-accent);
    opacity: 1;
}

.pd-sort-desc .pd-sort-down {
    fill: var(--pd-accent);
    opacity: 1;
}

/* Prioridade (ordem) quando há múltiplas colunas ordenadas. */
.pd-sort-pos {
    font-size: .6rem;
    font-weight: 700;
    color: var(--pd-accent);
    line-height: 1;
}

/* ===== Paginação (Bootstrap .pagination tematizada) ===== */
.pagination {
    --bs-pagination-color: var(--pd-txt);
    --bs-pagination-bg: var(--pd-surface);
    --bs-pagination-border-color: var(--pd-border);
    --bs-pagination-border-radius: var(--pd-radius-sm);
    --bs-pagination-hover-color: var(--pd-accent);
    --bs-pagination-hover-bg: var(--pd-accent-soft);
    --bs-pagination-hover-border-color: var(--pd-border-strong);
    --bs-pagination-focus-color: var(--pd-accent);
    --bs-pagination-focus-bg: var(--pd-accent-soft);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(52, 87, 213, .18);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--pd-accent);
    --bs-pagination-active-border-color: var(--pd-accent);
    --bs-pagination-disabled-color: var(--pd-txt-muted);
    --bs-pagination-disabled-bg: var(--pd-surface);
    --bs-pagination-disabled-border-color: var(--pd-border);
    gap: .25rem;
}

/* Itens espaçados e arredondados (padrão do tema, cada página é um "botão"). */
.pagination .page-link {
    border-radius: var(--pd-radius-sm);
    min-width: 2rem;
    text-align: center;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}

.pagination .page-item.active .page-link {
    font-weight: 600;
}

/* Modo callback: os controles são <button> mas devem parecer/agir como page-link. */
.pagination button.page-link {
    cursor: pointer;
}

.pagination button.page-link:disabled {
    cursor: default;
}


/* ==========================================================================
   Autenticação (tela de login) — card único centralizado (padrão Dhonu).
   ========================================================================== */
.auth-shell {
    min-height: 100vh;
}

/* Página cheia, conteúdo centralizado vertical e horizontalmente. */
.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem 1.25rem;
    background-color: var(--pd-ground);
}

/* Coluna estreita que empilha marca + card + rodapé. */
.auth-col {
    width: 100%;
    max-width: 25rem;
}

/* Marca + saudação. */
.auth-brand .auth-logo {
    display: inline-block;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--pd-accent);
}

.auth-welcome {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--pd-txt);
}

.auth-lead {
    margin: .5rem auto 0;
    max-width: 22rem;
    color: var(--pd-txt-muted);
}

/* Card do formulário — cantos mais arredondados, respiro interno (p-4 no markup). */
.auth-card {
    border-radius: var(--pd-radius);
}

.auth-foot {
    font-size: .8125rem;
    color: var(--pd-txt-muted);
}

/* Modal de confirmação (ex.: "manter conectado"). SSR estático → sempre no DOM,
   exibido ao ganhar a classe .show (via JS inline). */
.pd-confirm-backdrop {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(20, 28, 46, .5);
    z-index: 1080;
}

    .pd-confirm-backdrop.show {
        display: flex;
    }

.pd-confirm-card {
    width: 100%;
    max-width: 26rem;
}

/* Links auxiliares (esqueci a senha / voltar ao login). */
.auth-link {
    font-size: .875rem;
    color: var(--pd-txt-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}

    .auth-link:hover {
        color: var(--pd-accent);
    }

/* ---- Ícone genérico inline (SVG via MarkupString) ---- */
.pd-icon {
    width: 1rem;
    height: 1rem;
    vertical-align: -0.125em;
    fill: currentColor;
}

/* ---- Botão mostrar/ocultar senha (SSR estático + toggle JS) ----
   Ambos os ícones ficam no DOM; a classe .pd-revealed (alternada no clique)
   decide qual aparece. Sem .pd-revealed: olho (senha oculta). Com: olho-cortado. */
.pd-pwd-toggle .pd-eye-slash {
    display: none;
}

.pd-pwd-toggle.pd-revealed .pd-eye {
    display: none;
}

.pd-pwd-toggle.pd-revealed .pd-eye-slash {
    display: inline-block;
}