/* ============================================================
   Kontta.AI — Layout Refresh (2026)
   Camada de polimento premium carregada por ÚLTIMO.
   Objetivo: alinhamento milimétrico de botões/toolbars e um
   acabamento profissional de alto padrão. SOMENTE layout —
   nenhuma funcionalidade é alterada.
   ============================================================ */

:root {
    /* Altura compartilhada de todos os controles interativos.
       É a base do alinhamento: botões, inputs e selects passam a
       medir exatamente o mesmo, então nunca ficam "um acima do outro". */
    --ctl-h: 34px;
    --ctl-h-sm: 28px;
    --ctl-h-lg: 40px;

    /* Ritmo de espaçamento consistente */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;

    /* Raios refinados */
    --radius: 14px;
    --radius-sm: 10px;
    --radius-lg: 18px;
    --radius-pill: 999px;

    /* Sombras em camadas, mais suaves e premium */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 6px 16px -4px rgba(15, 23, 42, 0.10), 0 2px 6px -2px rgba(15, 23, 42, 0.06);
    --shadow-lg: 0 18px 40px -12px rgba(15, 23, 42, 0.18), 0 6px 14px -6px rgba(15, 23, 42, 0.10);

    --ring: 0 0 0 3px var(--color-primary-soft);
    --transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 6px 16px -4px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 18px 40px -12px rgba(0, 0, 0, 0.65);
}

/* ------------------------------------------------------------
   1. Base / tipografia
   ------------------------------------------------------------ */
body { letter-spacing: -0.005em; }

h1, h2, h3, h4 { letter-spacing: -0.02em; }

/* Scrollbar mais discreta */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border-radius: var(--radius-pill);
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--color-text-subtle); background-clip: padding-box; }

/* ------------------------------------------------------------
   2. CONTROLES — altura unificada (núcleo do alinhamento)
   ------------------------------------------------------------ */
.btn {
    height: var(--ctl-h);
    min-height: var(--ctl-h);
    padding: 0 0.85rem;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.01em;
    transition: background var(--transition), border-color var(--transition),
                box-shadow var(--transition), transform var(--transition), color var(--transition);
}
.btn--sm {
    height: var(--ctl-h-sm);
    min-height: var(--ctl-h-sm);
    padding: 0 0.6rem;
    font-size: 0.75rem;
    border-radius: 8px;
}
.btn--lg {
    height: var(--ctl-h-lg);
    min-height: var(--ctl-h-lg);
    padding: 0 1.1rem;
    font-size: 0.88rem;
}
.btn--icon {
    width: var(--ctl-h);
    min-width: var(--ctl-h);
    height: var(--ctl-h);
    padding: 0;
}
.btn--sm.btn--icon { width: var(--ctl-h-sm); min-width: var(--ctl-h-sm); height: var(--ctl-h-sm); }

.btn--primary {
    background: linear-gradient(180deg, var(--color-primary), var(--color-primary-dark));
    box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.btn--primary:hover {
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
}
.btn--ghost { box-shadow: var(--shadow-xs); }
.btn--ghost:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Inputs / selects compartilham a mesma altura quando vivem em toolbars */
.input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
select {
    border-radius: var(--radius-sm);
}
.input:focus, input:focus, select:focus, textarea:focus {
    box-shadow: var(--ring);
}

/* ------------------------------------------------------------
   3. TOOLBARS / PAGE-HEADER — alinhamento por baseline
   ------------------------------------------------------------ */
.page-header {
    align-items: center;
    margin-bottom: var(--space-5);
}
.page-header h1 { font-weight: 700; }
.page-header__actions,
.page-header__actions--compact {
    align-items: center;
    gap: var(--space-2);
}
/* O menu "Ações" é um wrapper (.actions-menu), não um .btn — sem esta regra
   ele encolhe no flex (flex-wrap:nowrap) e o botão fica desalinhado dos
   demais. Faz o wrapper se comportar como os outros botões: não encolhe e
   alinha o botão pela mesma altura/centro. */
.page-header__actions .actions-menu,
.page-header__actions--compact .actions-menu {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
/* Toda barra de filtro/ações alinha verticalmente ao centro e
   mantém os controles na mesma altura */
.filters,
.searchbar,
.nf-topbar,
.pag-topbar,
.toolbar {
    align-items: center;
}
.filters .input,
.filters select,
.searchbar .input,
.searchbar select {
    height: var(--ctl-h);
}

/* Barra de ações utilitária reutilizável: tudo na mesma linha de base */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.toolbar > * { margin: 0; }
.toolbar__spacer { flex: 1 1 auto; }

/* ------------------------------------------------------------
   4. WORKFLOW STEPPER (premium)
   ------------------------------------------------------------ */
.workflow-stepper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
    padding: var(--space-2);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
}
.stepper__etapa {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: var(--ctl-h-sm);
    padding: 0 0.85rem;
    border-radius: var(--radius-pill);
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
}
.stepper__etapa:hover { background: var(--color-surface-hover); color: var(--color-text); }
.stepper__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
}
.stepper__etapa--concluida { color: var(--color-success); }
.stepper__etapa--concluida .stepper__num {
    background: var(--color-success-soft);
    color: var(--color-success);
}
.stepper__etapa--atual {
    background: linear-gradient(180deg, var(--color-primary), var(--color-primary-dark));
    color: #fff;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}
.stepper__etapa--atual .stepper__num {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}
.stepper__sep {
    color: var(--color-text-subtle);
    font-size: 0.8rem;
    opacity: 0.55;
}
@media (max-width: 640px) { .stepper__sep { display: none; } }

/* ------------------------------------------------------------
   5. PRÓXIMA AÇÃO (banner sugestão) — slim e alinhado
   ------------------------------------------------------------ */
.proxima-acao {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
    padding: 0.6rem 0.6rem 0.6rem 1rem;
    background: linear-gradient(90deg, var(--color-primary-soft), transparent 90%);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-xs);
    font-size: 0.875rem;
}
.proxima-acao__texto { flex: 1 1 240px; min-width: 0; line-height: 1.4; }
.proxima-acao__texto strong { color: var(--color-text); }
.proxima-acao .btn { flex-shrink: 0; }

/* NF topbar: banner + botão Ações na mesma linha, com o botão alinhado à
   altura do banner (bordas superior/inferior coincidem). */
.nf-topbar,
.pag-topbar {
    display: flex;
    align-items: stretch;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
}
.nf-topbar .proxima-acao,
.pag-topbar .proxima-acao { margin-bottom: 0; }
/* A coluna do menu de Ações estica e o botão preenche a altura do banner,
   ficando alinhado com ele em vez de flutuar centralizado. */
.nf-topbar > .actions-menu,
.pag-topbar > .actions-menu { display: flex; align-items: stretch; }
.nf-topbar > .actions-menu > .btn,
.pag-topbar > .actions-menu > .btn { height: auto; }
/* Quando quebra em duas linhas (telas estreitas), volta a ter altura natural. */
@media (max-width: 640px) {
    .nf-topbar > .actions-menu > .btn,
    .pag-topbar > .actions-menu > .btn { height: var(--ctl-h-sm); }
}

/* ------------------------------------------------------------
   6. TABS (hub Pagamentos / abas internas)
   ------------------------------------------------------------ */
.pagamentos-tabs {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}
.pagamentos-tabs__link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 42px;
    padding: 0 1rem;
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--transition), border-color var(--transition);
}
.pagamentos-tabs__link:hover { color: var(--color-primary); }
.pagamentos-tabs__link i { width: 16px; height: 16px; }
.pagamentos-tabs__link--active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    font-weight: 600;
}
.pagamentos-tabs__cta { margin-left: auto; }

/* ------------------------------------------------------------
   7. SIDEBAR — acabamento
   ------------------------------------------------------------ */
.sidebar { box-shadow: var(--shadow-xs); }
.sidebar__item.is-active {
    background: linear-gradient(90deg, var(--color-primary-soft), transparent);
}
.sidebar__item, .sidebar__subitem { border-radius: 7px; }

/* ------------------------------------------------------------
   8. TOPBAR — acabamento
   ------------------------------------------------------------ */
.topbar {
    backdrop-filter: saturate(1.4) blur(6px);
    background: color-mix(in srgb, var(--color-surface) 88%, transparent);
}
.topbar__user { gap: var(--space-2); align-items: center; }

/* ------------------------------------------------------------
   9. CARDS / PANELS — profundidade refinada
   ------------------------------------------------------------ */
.card, .panel {
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.cards-grid { gap: var(--space-4); }
.panel__title { letter-spacing: 0.05em; }

/* ------------------------------------------------------------
   10. TABELAS — leitura confortável
   ------------------------------------------------------------ */
.table-wrap { border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.table th { background: var(--color-surface-hover); }
.table tbody tr { transition: background var(--transition); }
.table tbody tr:hover { background: var(--color-primary-soft); }
[data-theme="dark"] .table tbody tr:hover { background: var(--color-surface-hover); }

/* Coluna de ações sempre estreita e centralizada (alinha o menu) */
.col-acoes, td.col-acoes { white-space: nowrap; }
.actions-menu__btn { height: var(--ctl-h-sm); }
.actions-menu__panel {
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

/* ------------------------------------------------------------
   11. BADGES / STATUS — pílulas consistentes
   ------------------------------------------------------------ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    height: 22px;
    padding: 0 0.6rem;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* ------------------------------------------------------------
   12. MODAIS — sombra e raio premium
   ------------------------------------------------------------ */
.modal, [class*="modal"] > div, .modal-card {
    border-radius: var(--radius-lg);
}

/* ------------------------------------------------------------
   13. Responsivo
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    .page-header__actions,
    .page-header__actions--compact { width: 100%; }
    .proxima-acao { padding: 0.6rem 0.75rem; }
    .proxima-acao .btn { width: 100%; }
}

/* Respeita usuários que preferem menos movimento */
@media (prefers-reduced-motion: reduce) {
    .btn, .card, .card--link, .table tbody tr { transition: none !important; transform: none !important; }
}

/* ------------------------------------------------------------
   14. FILTROS — acabamento do padrão único (.filters-bar /
   .filters-panel__grid). O componente já existe em style.css;
   aqui só refinamos espaçamento, foco e sombra para o mesmo
   acabamento premium do resto do app.
   ------------------------------------------------------------ */
.filters-bar {
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
}
.filters-bar__toggle:focus-visible,
.filters-bar__search:focus-visible { box-shadow: var(--ring); }
.filters-panel__grid {
    gap: var(--space-4);
    box-shadow: var(--shadow-sm);
}
.filters-panel__grid .form__group label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

/* ------------------------------------------------------------
   15. FORMULÁRIOS — cartão de opção "Beneficiário" (pagamentos)
   Movido do <style> inline de pagamentos/form.html para manter
   os templates livres de CSS embutido.
   ------------------------------------------------------------ */
#box-fornecedor .choices,
#box-colaborador .choices,
#box-cliente .choices { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }

.beneficiario-opcao {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.beneficiario-opcao:has(input[type="radio"]:checked) {
    border-color: var(--color-primary);
    box-shadow: var(--ring);
}
.beneficiario-opcao + .beneficiario-opcao { margin-top: var(--space-2); }
.beneficiario-opcao__radio {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-weight: 500;
}
.beneficiario-opcao__campo { margin-top: var(--space-3); }