/* ═══════════════════════════════════════════════════════════════════════════
   Sis.Orde.pw — tema sobre Bootstrap 5.3 (dark, mobile-first, WCAG AA)
   Paleta: slate escuro + verde de status
   ═══════════════════════════════════════════════════════════════════════════ */

:root,
[data-bs-theme="dark"] {
    /* Tokens do design system — tons neutros (preto/cinza) */
    --ow-bg:            #161616;
    --ow-surface:       #222222;
    --ow-surface-2:     #2c2c2c;
    --ow-border:        #454545;
    --ow-text:          #ececec;
    --ow-text-muted:    #a8a8a8;
    --ow-accent:        #22C55E;
    --ow-accent-hover:  #16A34A;
    --ow-receita:       #4ade80;
    --ow-despesa:       #f87171;
    --ow-alerta:        #fbbf24;
    --ow-info:          #60a5fa;

    /* Mapeamento Bootstrap */
    --bs-body-bg: var(--ow-bg);
    --bs-body-color: var(--ow-text);
    --bs-secondary-color: var(--ow-text-muted);
    --bs-border-color: var(--ow-border);
    --bs-emphasis-color: #ffffff;
    --bs-link-color: #c9c9c9;
    --bs-link-hover-color: #ffffff;
    --bs-link-color-rgb: 201, 201, 201;
    --bs-link-hover-color-rgb: 255, 255, 255;
    --bs-font-sans-serif: "Fira Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-font-size: 1rem;
    --bs-body-line-height: 1.5;
}

html { scroll-behavior: smooth; }

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    background:
        radial-gradient(1100px 500px at 85% -10%, rgba(255, 255, 255, .035), transparent 60%),
        var(--ow-bg);
    background-attachment: fixed;
}

/* ─── Links (estilo do sistema: cinza discreto, hover branco sublinhado) ── */

a { text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
.btn:hover, .btn:focus-visible { text-decoration: none; }

/* ─── Acessibilidade ─────────────────────────────────────────────────────── */

.skip-link {
    position: absolute;
    top: .5rem; left: .5rem;
    z-index: 2000;
    padding: .5rem 1rem;
    background: var(--ow-accent);
    color: #052e16;
    border-radius: .5rem;
    font-weight: 600;
    text-decoration: none;
}

:focus-visible {
    outline: 2px solid var(--ow-accent) !important;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ─── Navbar / menu ──────────────────────────────────────────────────────── */

.app-navbar {
    background: rgba(18, 18, 18, .85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.app-navbar .navbar-brand { font-weight: 600; letter-spacing: .02em; }

.app-navbar .nav-link { color: var(--ow-text); }
.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus-visible { color: var(--ow-accent); }

.btn-nav {
    --bs-btn-color: var(--ow-text);
    --bs-btn-hover-color: var(--ow-accent);
    --bs-btn-hover-bg: rgba(255, 255, 255, .06);
    --bs-btn-active-bg: rgba(255, 255, 255, .1);
    --bs-btn-padding-x: .65rem;
    --bs-btn-padding-y: .5rem;
    font-size: 1.2rem;
    line-height: 1;
    min-width: 44px;
    min-height: 44px;
}

.dropdown-menu {
    --bs-dropdown-bg: var(--ow-surface);
    --bs-dropdown-border-color: var(--ow-border);
    --bs-dropdown-link-hover-bg: var(--ow-surface-2);
    --bs-dropdown-link-active-bg: var(--ow-accent);
    --bs-dropdown-link-active-color: #052e16;
}

.offcanvas {
    --bs-offcanvas-bg: var(--ow-surface);
    --bs-offcanvas-border-color: var(--ow-border);
}

/* Modais seguem os tokens do sistema (nunca cor fixa por página) */
.modal-content {
    --bs-modal-bg: var(--ow-surface);
    --bs-modal-border-color: var(--ow-border);
    --bs-modal-header-border-color: var(--ow-border);
    --bs-modal-footer-border-color: var(--ow-border);
    color: var(--ow-text);
}

.menu-secao {
    margin: 0 0 .35rem;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ow-text-muted);
}

.offcanvas .nav-pills {
    --bs-nav-pills-link-active-bg: var(--ow-accent);
    --bs-nav-pills-link-active-color: #052e16;
}
.offcanvas .nav-link { color: var(--ow-text); padding: .55rem .85rem; }
.offcanvas .nav-link:hover { background: var(--ow-surface-2); }

/* ─── Cards / painéis ────────────────────────────────────────────────────── */

.card, .painel {
    --bs-card-bg: var(--ow-surface);
    --bs-card-border-color: rgba(255, 255, 255, .09);
    --bs-card-cap-bg: transparent;
}

.painel {
    background: var(--ow-surface);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: .75rem;
    padding: 1rem;
}

@media (min-width: 992px) {
    .painel { padding: 1.25rem 1.5rem; }
}

/* ─── Page header ────────────────────────────────────────────────────────── */

.page-header h1 { font-weight: 600; }
.page-header .bi { color: var(--ow-accent); }

/* ─── Tabelas ────────────────────────────────────────────────────────────── */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ow-text);
    --bs-table-border-color: rgba(255, 255, 255, .09);
    --bs-table-hover-bg: rgba(255, 255, 255, .045);
    --bs-table-hover-color: var(--ow-text);
    margin-bottom: 0;
}

.table thead th {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ow-text-muted);
    white-space: nowrap;
}

.table td, .table th { padding: .6rem .75rem; }

/* Linhas com estado (vencida / a vencer): barra só na 1ª célula, fundo em todas */
.table tr.linha-erro   > * { background: rgba(248, 113, 113, .07); }
.table tr.linha-alerta > * { background: rgba(251, 191, 36, .06); }
.table tr.linha-erro   > *:first-child { box-shadow: inset 3px 0 0 var(--ow-despesa); }
.table tr.linha-alerta > *:first-child { box-shadow: inset 3px 0 0 var(--ow-alerta); }

/* Linha com formulário de pagamento (data + valor), aberta pelo botão Pagar — togglePagar() */
.form-pagar { display: none; }
tr.form-pagar.open { display: table-row; }
div.form-pagar.open { display: block; }

/* ─── Formulários ────────────────────────────────────────────────────────── */

.form-control, .form-select {
    background-color: var(--ow-surface-2);
    border-color: var(--ow-border);
    color: var(--ow-text);
    min-height: 44px;
}

.form-control:focus, .form-select:focus {
    background-color: var(--ow-surface-2);
    border-color: var(--ow-accent);
    color: var(--ow-text);
    box-shadow: 0 0 0 .25rem rgba(34, 197, 94, .18);
}

.form-control::placeholder { color: #8b96a8; }

.form-label { font-weight: 500; margin-bottom: .3rem; }

/* Controles de data nativos em modo escuro: o navegador desenha o ícone do
   calendário claro e o popup do calendário também sai escuro */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
    color-scheme: dark;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
    filter: none;
    opacity: .85;
    cursor: pointer;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* ─── Botões ─────────────────────────────────────────────────────────────── */

.btn { min-height: 44px; font-weight: 500; }

/* Botões compactos (ações dentro de linhas de tabela) mantêm o tamanho do
   Bootstrap para alinhar com o texto da linha */
.btn-sm {
    min-height: 0;
    --bs-btn-padding-y: .25rem;
}

.table .btn-sm { vertical-align: baseline; }

.btn-success {
    --bs-btn-bg: var(--ow-accent);
    --bs-btn-border-color: var(--ow-accent);
    --bs-btn-color: #052e16;
    --bs-btn-hover-bg: var(--ow-accent-hover);
    --bs-btn-hover-border-color: var(--ow-accent-hover);
    --bs-btn-hover-color: #f0fdf4;
    --bs-btn-active-bg: var(--ow-accent-hover);
    --bs-btn-active-color: #f0fdf4;
}

/* ─── Cores semânticas de texto ──────────────────────────────────────────── */

.texto-receita { color: var(--ow-receita); }
.texto-despesa { color: var(--ow-despesa); }
.texto-alerta  { color: var(--ow-alerta); }
.texto-info    { color: var(--ow-info); }

/* ─── Dashboard: KPI cards ───────────────────────────────────────────────── */

.dash-kpi {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

@media (min-width: 768px)  { .dash-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 1200px) { .dash-kpi { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.dash-card {
    position: relative;
    background: var(--ow-surface);
    border: 1px solid rgba(255, 255, 255, .09);
    border-top: 3px solid var(--ow-border);
    border-radius: .75rem;
    padding: .9rem 1rem;
    overflow: hidden;
}

.dash-card.verde   { border-top-color: var(--ow-accent); }
.dash-card.receita { border-top-color: var(--ow-receita); }
.dash-card.azul    { border-top-color: var(--ow-info); }
.dash-card.alerta  { border-top-color: var(--ow-alerta); }
.dash-card.pagar   { border-top-color: var(--ow-despesa); }
.dash-card.liquido { border-top-color: #a78bfa; }

.dash-card-icon {
    position: absolute;
    right: .75rem; top: .75rem;
    font-size: 1.4rem;
    opacity: .35;
}

.dash-card-label {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ow-text-muted);
}

.dash-card-value {
    font-size: clamp(1.05rem, 2.5vw, 1.45rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-top: .15rem;
}

.dash-card-sub { font-size: .78rem; color: var(--ow-text-muted); }

/* Ocultar valores (privacidade) */
.valores-ocultos .valor-sensivel,
.kpi-oculto .dash-card-value {
    filter: blur(8px);
    user-select: none;
}

/* ─── Dashboard: painéis de listas ───────────────────────────────────────── */

.dash-panels {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 992px) { .dash-panels { grid-template-columns: 1fr 1fr; } }

.dash-panel {
    background: var(--ow-surface);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: .75rem;
    padding: 1rem;
}

.dash-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
}

.dash-panel-header h2 { font-size: 1rem; font-weight: 600; margin: 0; }

.dash-panel-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .25rem;
    border-top: 1px solid rgba(255, 255, 255, .06);
    flex-wrap: wrap;
}

.dash-panel-row a {
    flex: 1 1 12rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
}
.dash-panel-row a:hover { text-decoration: underline; }

.dash-panel-row .val {
    margin-left: auto;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dash-empty {
    padding: 1rem .25rem;
    color: var(--ow-text-muted);
}

.badge-vencida {
    color: #7f1d1d;
    background: var(--ow-despesa);
    font-weight: 700;
}

/* ─── Conciliação bancária ───────────────────────────────────────────────── */

.conc-borda { border-color: rgba(255, 255, 255, .09) !important; }
.conc-scroll { max-height: 30rem; overflow-y: auto; }

.conc-cat {
    font-weight: 500;
    color: var(--ow-text);
    background: var(--ow-surface-2);
    border: 1px solid var(--ow-border);
}
.conc-cat-pix-recebido { color: var(--ow-receita); border-color: rgba(74, 222, 128, .35); }
.conc-cat-pix-enviado  { color: var(--ow-despesa); border-color: rgba(248, 113, 113, .35); }
.conc-cat-cobranca     { color: var(--ow-info);    border-color: rgba(96, 165, 250, .35); }
.conc-cat-encargos     { color: var(--ow-alerta);  border-color: rgba(251, 191, 36, .35); }

/* ─── Gráfico ────────────────────────────────────────────────────────────── */

.dash-chart-wrap {
    background: var(--ow-surface);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: .75rem;
    padding: 1rem;
    margin: 1rem 0;
}

.dash-chart-wrap h2 { font-size: 1rem; font-weight: 600; margin-bottom: .75rem; }

/* ─── Documentos para impressão (fatura / recibo / NFS) ──────────────────── */

@media print {
    body { background: #fff !important; }
    .app-navbar, .app-footer, .skip-link, .nao-imprimir { display: none !important; }
    main { padding: 0 !important; }
    [data-bs-theme="dark"] { --bs-body-bg: #fff; --bs-body-color: #111; }
}

/* ─── Utilidades ─────────────────────────────────────────────────────────── */

.numero { font-variant-numeric: tabular-nums; }

.app-footer {
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: .9rem;
}
.app-footer a { text-decoration: none; }
.app-footer a:hover { text-decoration: underline; }