
:root {
    --bg:           #f0f2f5;
    --card:         #ffffff;
    --text:         #2d3748;
    --muted:        #718096;
    --border:       #e2e8f0;
    --primary:      #4CAF50;
    --primary-light: rgba(76,175,80,0.15);
    --green:        #4CAF50;
    --green-light:  rgba(76,175,80,0.15);
    --green-bg:     rgba(76,175,80,0.08);
    --red:          #f44336;
    --red-light:    rgba(244,67,54,0.15);
    --blue:         #3182ce;
    --blue-light:   #bee3f8;
    --orange:       #dd6b20;
    --orange-light: #feebc8;
    --yellow:       #b7791f;
    --yellow-light: #fefcbf;
    --shadow:       0 2px 8px rgba(0,0,0,0.08);
    --shadow-md:    0 4px 16px rgba(0,0,0,0.12);
    --radius:       12px;
    --table-head-bg: #f7fafc;
    --table-hover:   #f7fafc;
    --total-row-bg:  #f7fafc;
    --bills-footer-bg: #f7fafc;
    --print-modal-bg: white;
}

[data-theme="dark"] {
    --bg:           #111113;
    --card:         #1a1a1e;
    --text:         #e4e4e7;
    --muted:        #a1a1aa;
    --border:       rgba(255,255,255,0.1);
    --primary:      #4ade80;
    --primary-light: rgba(74,222,128,0.18);
    --green:        #4ade80;
    --green-light:  rgba(74,222,128,0.18);
    --green-bg:     rgba(74,222,128,0.08);
    --red:          #f87171;
    --red-light:    rgba(248,113,113,0.18);
    --blue:         #60a5fa;
    --blue-light:   rgba(96,165,250,0.18);
    --orange:       #fb923c;
    --orange-light: rgba(251,146,60,0.18);
    --yellow:       #fbbf24;
    --yellow-light: rgba(251,191,36,0.18);
    --shadow:       0 2px 8px rgba(0,0,0,0.35);
    --shadow-md:    0 4px 16px rgba(0,0,0,0.5);
    --table-head-bg: #232329;
    --table-hover:   #232329;
    --total-row-bg:  #232329;
    --bills-footer-bg: #232329;
    --print-modal-bg: #1a1a1e;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    background-image: url(img/splash.png);
    transition: background-color 0.3s, color 0.3s;
    overflow-x: hidden;
}

/* ── Page Header ─────────────────────────────── */
.page-header {
    background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
    color: white;
    padding: 20px 28px 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
}

.header-brand h1 {
    font-family: 'Kaushan Script', cursive;
    font-size: 2rem;
    letter-spacing: 1px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    line-height: 1;
}

.header-brand p {
    font-size: 0.7rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: 0.55;
    margin-top: 4px;
}

.header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.btn-header {
    background: rgba(255,255,255,0.12);
    color: white;
    border: 1px solid rgba(255,255,255,0.25);
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s;
    font-family: inherit;
}

.btn-header:hover { background: rgba(255,255,255,0.22); }
.btn-header.btn-print { background: rgba(49,130,206,0.5); border-color: rgba(49,130,206,0.7); }
.btn-header.btn-print:hover { background: rgba(49,130,206,0.7); }

.btn-header.btn-agenda {
    display: none;
    background: rgba(221,107,32,0.45);
    border-color: rgba(221,107,32,0.7);
    position: relative;
}
.btn-header.btn-agenda.visible { display: inline-flex; }
.btn-header.btn-agenda:hover { background: rgba(221,107,32,0.7); }

@keyframes agenda-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(221,107,32,0.7); }
    70%  { box-shadow: 0 0 0 10px rgba(221,107,32,0); }
    100% { box-shadow: 0 0 0 0 rgba(221,107,32,0); }
}
.btn-header.btn-agenda.pulse {
    animation: agenda-pulse 1.2s ease-out 3;
}

/* ── Month Bar ───────────────────────────────── */
.month-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 0;
    flex-wrap: wrap;
}

.btn-month-nav {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    color: white;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.btn-month-nav:hover { background: rgba(255,255,255,0.25); }

.month-label {
    font-size: 1.2rem;
    font-weight: 700;
    color: white;
    min-width: 200px;
    text-align: center;
}

input[type="month"]#monthPicker {
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.12);
    color: white;
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
}

input[type="month"]#monthPicker::-webkit-calendar-picker-indicator { filter: invert(1); }

/* ── Tabs ────────────────────────────────────── */
.tabs-wrapper {
    display: flex;
    align-items: center;
    position: relative;
}

.tabs-arrow {
    display: none;
}

@media (hover: hover) and (pointer: fine) {
    .tabs-arrow {
        display: flex;
        align-items: center;
        background: transparent;
        border: none;
        color: rgba(255,255,255,0.6);
        font-size: 1.5rem;
        line-height: 1;
        padding: 4px 8px;
        cursor: pointer;
        flex-shrink: 0;
        transition: color 0.2s, opacity 0.2s;
        opacity: 0;
        pointer-events: none;
        user-select: none;
    }

    .tabs-arrow.visible {
        opacity: 1;
        pointer-events: auto;
    }

    .tabs-arrow:hover { color: white; }
}

.tabs {
    display: flex;
    gap: 0;
    padding: 0 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex: 1;
}

.tabs::-webkit-scrollbar {
    display: none;
}

.tab-btn {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.5);
    padding: 12px 16px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
    letter-spacing: 0.3px;
    white-space: nowrap;
    flex-shrink: 0;
}

.tab-btn:hover { color: rgba(255,255,255,0.85); }
.tab-btn.active { color: white; border-bottom-color: #68d391; }

/* ── Main Layout ─────────────────────────────── */
.main {
    max-width: 1260px;
    margin: 0 auto;
    padding: 28px 24px;
}

.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ── Summary Cards ───────────────────────────── */
.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.summary-card {
    background: var(--card);
    border-radius: var(--radius);
    padding: 22px 20px 18px;
    box-shadow: var(--shadow);
    border-left: 4px solid transparent;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sc-icon  { font-size: 1.6rem; line-height: 1; }
.sc-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.sc-value { font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.sc-sub   { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }

.sc-green  { border-left-color: var(--green); }
.sc-green  .sc-value { color: var(--green); }
.sc-red    { border-left-color: var(--red); }
.sc-red    .sc-value { color: var(--red); }
.sc-blue   { border-left-color: var(--blue); }
.sc-blue   .sc-value { color: var(--blue); }
.sc-orange { border-left-color: var(--orange); }
.sc-orange .sc-value { color: var(--orange); }

/* ── Section ─────────────────────────────────── */
.section {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 24px;
    overflow: hidden;
}

.section-header {
    padding: 16px 22px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.section-title {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-subtitle {
    font-size: 0.8rem;
    color: var(--muted);
    font-weight: 400;
    margin-left: 4px;
}

.section-body { padding: 20px 22px; }

/* ── Table ───────────────────────────────────── */
.report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.report-table th {
    background: var(--table-head-bg);
    padding: 10px 16px;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--muted);
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}

.report-table td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    color: var(--text);
}

.report-table tr:last-child td  { border-bottom: none; }
.report-table tbody tr:hover td { background: var(--table-hover); }

.total-row td {
    font-weight: 700;
    background: var(--total-row-bg) !important;
    border-top: 2px solid var(--border) !important;
}

/* ── Badges ──────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.73rem;
    font-weight: 700;
    white-space: nowrap;
    line-height: 1.5;
}

.badge-paid    { background: var(--green-light); color: var(--green); }
.badge-pending { background: var(--yellow-light); color: var(--yellow); }
.badge-overdue { background: var(--red-light); color: var(--red); }
.badge-income  { background: var(--green-light); color: var(--green); }
.badge-expense { background: var(--red-light); color: var(--red); }
.badge-void    { background: #e2e8f0; color: #718096; }

/* ── Amount ──────────────────────────────────── */
.amt  { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.amt-g { color: var(--green); }
.amt-r { color: var(--red); }
.amt-b { color: var(--blue); }
.amt-m { color: var(--muted); }

/* ── Progress Bar ────────────────────────────── */
.progress-wrap {
    background: var(--border);
    border-radius: 99px;
    height: 7px;
    overflow: hidden;
    flex: 1;
    min-width: 50px;
}

.progress-bar {
    height: 100%;
    border-radius: 99px;
    transition: width 0.5s ease;
    background: var(--primary);
}
.progress-bar-overdue {
    background: var(--red);
}

.row-overdue {
    opacity: 0.9;
    color: var(--red);
    font-weight: 500;
}

/* ── Bills Footer ────────────────────────────── */
.bills-footer {
    display: flex;
    gap: 0;
    background: var(--bills-footer-bg);
    border-top: 2px solid var(--border);
    flex-wrap: wrap;
}

.bills-footer-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px 22px;
    border-right: 1px solid var(--border);
}

.bills-footer-item:last-child { border-right: none; }

.bfi-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    color: var(--muted);
}

.bfi-value {
    font-size: 1.05rem;
    font-weight: 800;
}

/* ── Category Grid ───────────────────────────── */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 16px;
}

.cat-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 18px;
    transition: box-shadow 0.2s, transform 0.15s;
}

.cat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

.cat-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.cat-dot   { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.cat-name  { font-weight: 700; font-size: 0.88rem; flex: 1; }
.cat-total { font-weight: 800; font-size: 0.92rem; }

.cat-progress-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.cat-pct {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
    min-width: 48px;
    text-align: right;
}

.cat-bills { display: flex; flex-direction: column; gap: 5px; }

.cat-bill-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
}

.cat-bill-name {
    color: var(--muted);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cat-bill-val {
    font-weight: 600;
    white-space: nowrap;
    font-size: 0.78rem;
    min-width: 80px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ── Charts Grid ─────────────────────────────── */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
    gap: 24px;
}

.chart-card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px;
}

.chart-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 12px;
}

.chart-container {
    position: relative;
    height: 300px;
}

/* ── Responsive ──────────────────────────────── */
@media (max-width: 768px) {
    .page-header  { padding: 10px 12px 0; }
    .main         { padding: 16px 12px; }
    .header-top   { gap: 8px; margin-bottom: 8px; }
    .header-brand h1 { font-size: 1.3rem; }
    .header-brand p  { font-size: 0.6rem; letter-spacing: 2px; margin-top: 2px; }
    .header-actions {
        display: flex;
        gap: 8px;
        width: 100%;
        justify-content: stretch;
    }
    .header-actions .btn-header {
        flex: 1;
        justify-content: center;
        padding: 7px 10px;
        font-size: 0.78rem;
        text-align: center;
    }
    .month-bar    { padding: 8px 0; gap: 8px; }
    .month-label  { min-width: 130px; font-size: 0.95rem; }
    .btn-month-nav { width: 30px; height: 30px; font-size: 1rem; }
    .charts-grid  { grid-template-columns: 1fr; }
    .tabs         { padding: 0; }
    .tab-btn      { padding: 8px 12px; font-size: 0.8rem; }
    .report-table { font-size: 0.78rem; }
    .report-table th, .report-table td { padding: 9px 10px; }
    .section-header { padding: 14px 14px; }
    .section-body { padding: 14px; }
    .bills-footer-item { padding: 12px 14px; }
}

@media (max-width: 480px) {
    .page-header  { padding: 8px 10px 0; }
    .header-top   { gap: 6px; margin-bottom: 6px; }
    .header-brand h1 { font-size: 1.1rem; }
    .header-brand p  { font-size: 0.55rem; letter-spacing: 1.5px; display: none; }
    .header-actions .btn-header {
        padding: 6px 8px;
        font-size: 0.72rem;
    }
    .month-bar    { padding: 6px 0; gap: 6px; }
    .month-label  { min-width: 110px; font-size: 0.85rem; }
    .btn-month-nav { width: 28px; height: 28px; font-size: 0.9rem; }
    .tab-btn      { padding: 7px 10px; font-size: 0.75rem; }
    .summary-grid { grid-template-columns: 1fr 1fr; }
    .sc-value { font-size: 1.2rem; }
}

/* ── Print Modal ─────────────────────────────── */
.print-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}
.print-modal-overlay.open { display: flex; }

.print-modal-box {
    background: var(--print-modal-bg);
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.45);
    width: min(480px, 94vw);
    overflow: hidden;
}

.print-modal-header {
    background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
    color: white;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: 1rem;
}

.print-modal-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    opacity: 0.7;
    padding: 0 4px;
    font-family: inherit;
}
.print-modal-close:hover { opacity: 1; }

.print-modal-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.print-option-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s;
    width: 100%;
}
.print-option-btn:hover { background: var(--table-hover); border-color: var(--muted); }

.po-icon  { font-size: 1.8rem; flex-shrink: 0; }
.po-title { font-weight: 700; font-size: 0.92rem; color: var(--text); }
.po-desc  { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }

/* ── Print ───────────────────────────────────── */
@page { margin: 10mm 8mm; }

@media print {
    /* ── GLOBAL: tudo dentro da largura da página ── */
    *, *::before, *::after {
        box-sizing: border-box !important;
    }
    html, body {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        background: white !important;
        font-size: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Mata qualquer scroll horizontal dos wrappers de tabela */
    [style*="overflow-x"], [style*="overflow"] {
        overflow: visible !important;
        max-width: 100% !important;
    }

    /* ── Header compacto ── */
    .page-header {
        background: #2d3748 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        position: static !important;
        padding: 6px 12px 0 !important;
        box-shadow: none !important;
    }
    .header-brand h1 { font-size: 1rem !important; }
    .header-brand p  { display: none !important; }
    .month-bar { padding: 2px 0 !important; }
    .month-label { color: white !important; font-size: 0.9rem !important; }
    .btn-header, .month-bar input, .tabs, .btn-month-nav,
    .header-actions { display: none !important; }

    /* ── Layout ── */
    .main {
        padding: 8px !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .print-modal-overlay { display: none !important; }

    /* ── Base: mostra tab-demo, oculta tab-charts/fornec ── */
    #tab-demo   { display: block !important; }
    #tab-charts { display: none  !important; }
    #tab-fornec { display: none  !important; }

    /* ── Sections ── */
    .section {
        break-inside: auto;
        box-shadow: none !important;
        border: 1px solid #ddd;
        margin-bottom: 8px !important;
        border-radius: 4px !important;
        overflow: hidden !important;
        max-width: 100% !important;
    }
    .section-header {
        padding: 6px 10px !important;
    }
    .section-title { font-size: 0.8rem !important; }
    .section-subtitle { font-size: 0.7rem !important; }
    .section-body { padding: 8px 10px !important; }

    /* ── Summary Cards ── */
    .summary-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px !important;
        margin-bottom: 10px !important;
    }
    .summary-card {
        padding: 8px 6px !important;
        box-shadow: none !important;
        border: 1px solid #ddd;
        border-radius: 4px !important;
        gap: 2px !important;
    }
    .sc-icon  { font-size: 0.9rem !important; }
    .sc-label { font-size: 0.55rem !important; letter-spacing: 0.5px !important; }
    .sc-value { font-size: 0.85rem !important; }
    .sc-sub   { font-size: 0.55rem !important; }

    /* ── TABELAS: forçar dentro da página ── */
    .report-table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed !important;
        font-size: 8px !important;
        border-collapse: collapse !important;
    }
    .report-table th,
    .report-table td {
        padding: 4px 5px !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        vertical-align: top !important;
        font-size: 8px !important;
    }
    .report-table th {
        font-size: 7px !important;
        letter-spacing: 0.3px !important;
    }
    /* Badges menores em impressão */
    .badge {
        font-size: 6px !important;
        padding: 1px 4px !important;
    }
    /* Barra de progresso */
    .progress-wrap {
        display: flex !important;
        min-width: 50px !important;
        max-width: 90px !important;
        height: 6px !important;
        background: #e2e8f0 !important;
        border-radius: 99px !important;
        overflow: hidden !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    .progress-bar {
        height: 6px !important;
        border-radius: 99px !important;
        background: #e53e3e !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    /* Valores monetários */
    .amt { font-size: 8px !important; }

    /* ── Bills Footer compacto ── */
    .bills-footer {
        flex-wrap: wrap !important;
    }
    .bills-footer-item {
        padding: 6px 10px !important;
    }
    .bfi-label { font-size: 0.55rem !important; }
    .bfi-value { font-size: 0.75rem !important; }

    /* ── Category Grid compacto ── */
    .category-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
        gap: 6px !important;
    }
    .cat-card {
        break-inside: avoid;
        padding: 6px 8px !important;
    }
    .cat-name  { font-size: 0.7rem !important; }
    .cat-total { font-size: 0.7rem !important; }
    .cat-bill-row  { font-size: 0.65rem !important; }
    .cat-bill-name { font-size: 0.65rem !important; }
    .cat-bill-val  { font-size: 0.65rem !important; }

    /* ── Gráficos ── */
    .charts-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .chart-card {
        padding: 6px !important;
        box-shadow: none !important;
        border: 1px solid #ddd;
        break-inside: avoid;
        border-radius: 4px !important;
    }
    .chart-container {
        height: auto !important;
        overflow: hidden !important;
        max-width: 100% !important;
    }
    .chart-container img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    .chart-title {
        font-size: 0.65rem !important;
        padding-bottom: 3px !important;
        margin-bottom: 3px !important;
    }
    canvas { max-width: 100% !important; }

    /* ════════════════════════════════════════════
       MODO: RELATÓRIO
       Cabeçalho + Lançamentos (só)
       ════════════════════════════════════════════ */
    body[data-print-mode="relatorio"] .summary-grid,
    body[data-print-mode="relatorio"] #sectionCategories,
    body[data-print-mode="relatorio"] #sectionBills,
    body[data-print-mode="relatorio"] #sectionInstitutions { display: none !important; }

    /* ════════════════════════════════════════════
       MODO: GRÁFICOS
       Cabeçalho + Sumário + Lançamentos + Gráficos
       ════════════════════════════════════════════ */
    body[data-print-mode="graficos"] #sectionCategories,
    body[data-print-mode="graficos"] #sectionBills,
    body[data-print-mode="graficos"] #sectionInstitutions { display: none !important; }
    body[data-print-mode="graficos"] #tab-charts { display: block !important; }

    /* ════════════════════════════════════════════
       MODO: COMPLETA — tudo visível
       ════════════════════════════════════════════ */
    body[data-print-mode="completa"] #tab-charts { display: block !important; }
}

.print-month-selector {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.print-month-selector input {
    padding: 5px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
}
