/* Finanças da Família - wine and mustard theme on top of Bootstrap 5.3 (dark mode).
   Same layout as the Serra / Vivaio apps (side menu on wide screens, tab bar on phones). */

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../fonts/plus-jakarta-sans-latin.woff') format('woff');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --fin-bg-main: #1c0b10;      /* very dark wine */
    --fin-bg-card: #2a1118;      /* wine card */
    --fin-bg-header: #150709;
    --fin-bg-raised: #3d1722;
    --fin-wine: #7d1f36;
    --fin-wine-strong: #a02a48;
    --fin-mustard: #d9a521;      /* main accent */
    --fin-mustard-hover: #e9bb40;
    --fin-mustard-ink: #221704;
    --fin-cream: #f6ece0;
    --fin-muted: #c3a7a2;
    --fin-border: #4d2431;
    --fin-line: #3a1a24;
    --fin-in: #9bd8a6;           /* incomes */
    --fin-out: #f2a8b4;          /* expenses (rose, not the wine of the background) */
    --fin-neg: #ff8f8f;
    --app-sidebar-w: 240px;
}

[data-bs-theme="dark"] {
    --bs-body-bg: var(--fin-bg-main);
    --bs-body-color: var(--fin-cream);
    --bs-body-font-family: 'Plus Jakarta Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --bs-border-color: var(--fin-border);
    --bs-secondary-color: #dcc7c3;
    --bs-emphasis-color: #ffffff;
    --bs-tertiary-bg: var(--fin-bg-raised);
    --bs-link-color: var(--fin-mustard);
    --bs-link-hover-color: var(--fin-mustard-hover);
    --bs-link-color-rgb: 217, 165, 33;
    --bs-link-hover-color-rgb: 233, 187, 64;
}
body { background-color: var(--fin-bg-main); color: var(--fin-cream); }
a { color: var(--fin-mustard); }
a:hover { color: var(--fin-mustard-hover); }
:focus-visible { outline: 2px solid var(--fin-mustard); outline-offset: 2px; }
.text-muted { color: var(--fin-muted) !important; }
.text-mustard { color: var(--fin-mustard) !important; }
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 { letter-spacing: -0.01em; }

/* ---- Buttons ---- */
.btn-main {
    --bs-btn-color: var(--fin-mustard-ink); --bs-btn-bg: var(--fin-mustard); --bs-btn-border-color: var(--fin-mustard);
    --bs-btn-hover-color: var(--fin-mustard-ink); --bs-btn-hover-bg: var(--fin-mustard-hover); --bs-btn-hover-border-color: var(--fin-mustard-hover);
    --bs-btn-active-color: var(--fin-mustard-ink); --bs-btn-active-bg: var(--fin-mustard-hover); --bs-btn-active-border-color: var(--fin-mustard-hover);
    --bs-btn-disabled-color: var(--fin-mustard-ink); --bs-btn-disabled-bg: var(--fin-mustard); --bs-btn-disabled-border-color: var(--fin-mustard);
    font-weight: 700;
}
.btn-outline-main {
    --bs-btn-color: var(--fin-mustard); --bs-btn-border-color: #7a5d1c; --bs-btn-bg: transparent;
    --bs-btn-hover-color: var(--fin-mustard-ink); --bs-btn-hover-bg: var(--fin-mustard); --bs-btn-hover-border-color: var(--fin-mustard);
    --bs-btn-active-color: var(--fin-mustard-ink); --bs-btn-active-bg: var(--fin-mustard); --bs-btn-active-border-color: var(--fin-mustard);
}
.btn-outline-danger { --bs-btn-color: var(--fin-out); --bs-btn-border-color: #8a3a4a; --bs-btn-hover-bg: var(--fin-wine-strong); --bs-btn-hover-border-color: var(--fin-wine-strong); --bs-btn-hover-color: #fff; }
.btn-link { color: var(--fin-mustard); }

/* ---- Cards, forms, alerts ---- */
.card { --bs-card-bg: var(--fin-bg-card); --bs-card-border-color: var(--fin-border); --bs-card-cap-bg: rgba(125, 31, 54, .35); }
.card-soft { border-radius: 14px; overflow: hidden; }
.card-soft > .card-header { font-weight: 700; border-bottom: 1px solid var(--fin-line); padding: .75rem 1rem; }
.card-soft > .card-footer { background: rgba(0, 0, 0, .15); border-top: 1px solid var(--fin-line); }
.card-alert { border-color: #8a2f43; }
.card-alert > .card-header { background: rgba(160, 42, 72, .55); color: #ffe3e3; }
.form-control, .form-select { background-color: var(--fin-bg-header); border-color: var(--fin-border); color: var(--fin-cream); }
.form-control:focus, .form-select:focus { background-color: var(--fin-bg-header); border-color: var(--fin-mustard); box-shadow: 0 0 0 .2rem rgba(217, 165, 33, .25); color: var(--fin-cream); }
.form-control::placeholder { color: #8f6f6c; }
.input-group-text { background: var(--fin-bg-raised); border-color: var(--fin-border); color: var(--fin-muted); }
.form-check-input:checked { background-color: var(--fin-mustard); border-color: var(--fin-mustard); }
.form-check-input:focus { border-color: var(--fin-mustard); box-shadow: 0 0 0 .2rem rgba(217, 165, 33, .25); }
.form-text { color: var(--fin-muted); }
.form-fin .form-label { font-weight: 600; font-size: .85rem; margin-bottom: .3rem; }
.alert-warning { --bs-alert-bg: #3b2a08; --bs-alert-color: #ffe2a0; --bs-alert-border-color: #7a5d1c; }
.alert-success { --bs-alert-bg: #12301b; --bs-alert-color: #c8f0d0; --bs-alert-border-color: #2f6b40; }
.alert-danger { --bs-alert-bg: #4a1220; --bs-alert-color: #ffd4dc; --bs-alert-border-color: #8a2f43; }
.alert-info { --bs-alert-bg: #2a1a2e; --bs-alert-color: #f1dcf3; --bs-alert-border-color: #5a3a60; }
.text-bg-warning { background-color: var(--fin-mustard) !important; color: var(--fin-mustard-ink) !important; }
.text-bg-danger { background-color: var(--fin-wine-strong) !important; color: #fff !important; }
.text-bg-success { background-color: #2f7a46 !important; color: #fff !important; }
.est-box, .repeat-box { background: rgba(217, 165, 33, .07); border: 1px dashed #7a5d1c; border-radius: 10px; padding: .75rem 1rem; }
[hidden] { display: none !important; }

/* Expense / income switch on the forms */
.kind-switch { display: flex; gap: 8px; }
.kind-switch .btn { flex: 1 1 0; border-radius: 10px; font-weight: 700; padding: .6rem; border: 1px solid var(--fin-border); color: var(--fin-muted); background: var(--fin-bg-header); }
.btn-check:checked + .btn-kind-out { background: var(--fin-wine-strong); border-color: var(--fin-wine-strong); color: #fff; }
.btn-check:checked + .btn-kind-in { background: #2f7a46; border-color: #2f7a46; color: #fff; }

/* ---- Amounts ---- */
.amt-in { color: var(--fin-in) !important; font-weight: 600; }
.amt-out { color: var(--fin-out) !important; font-weight: 600; }
.amt-bal { color: var(--fin-cream); }
.amt-neg { color: var(--fin-neg) !important; font-weight: 700; }

/* ---- Navigation: side menu (wide screens) ---- */
.app-sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 1030; width: var(--app-sidebar-w);
    display: none; flex-direction: column; gap: 18px; padding: 18px 14px;
    background: linear-gradient(180deg, #24090f 0%, var(--fin-bg-header) 60%);
    border-right: 1px solid var(--fin-line); overflow-y: auto;
}
.app-brand { display: flex; align-items: center; gap: 10px; padding: 0 8px; color: var(--fin-cream); text-decoration: none; font-weight: 800; font-size: 1rem; }
.app-brand:hover { color: #fff; }
.app-brand img { width: 34px; height: 34px; border-radius: 9px; flex: none; }
.app-nav { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
.app-nav-link { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 10px; border-radius: 8px; color: #e2cfc9; text-decoration: none; font-size: .92rem; font-weight: 500; }
.app-nav-link i { color: #a88580; }
.app-nav-link:hover { background: #2a0f16; color: var(--fin-cream); }
.app-nav-link.active { background: var(--fin-wine); color: #fff; font-weight: 700; }
.app-nav-link.active i { color: var(--fin-mustard); }
.app-user { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; background: #240c12; border: 1px solid var(--fin-line); }
.app-avatar { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--fin-mustard); color: var(--fin-mustard-ink); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .8rem; }
.app-user-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.app-user-text strong { font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-user-text small { font-size: .72rem; color: var(--fin-muted); }
.app-icon-btn { width: 34px; height: 34px; flex: none; border-radius: 8px; border: 1px solid var(--fin-border); background: transparent; color: #e2cfc9; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.app-icon-btn:hover { background: var(--fin-bg-raised); color: var(--fin-cream); }
.app-icon-btn-lg { width: 44px; height: 44px; border-radius: 12px; background: var(--fin-bg-card); }

/* ---- Navigation: top bar + tab bar (phones and tablets) ---- */
.app-topbar {
    position: sticky; top: 0; z-index: 1030; display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top));
    background: rgba(21, 7, 9, .94); border-bottom: 1px solid var(--fin-line);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.app-topbar .app-brand { padding: 0; }
.app-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: flex; align-items: center; justify-content: space-around;
    min-height: 64px; padding: 6px 6px max(8px, env(safe-area-inset-bottom));
    background: var(--fin-bg-header); border-top: 1px solid var(--fin-line);
}
.app-tab {
    flex: 1 1 0; min-width: 0; min-height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border: 0; background: transparent; color: var(--fin-muted); font-size: .7rem; font-weight: 600; text-decoration: none;
}
.app-tab i { font-size: 1.15rem; }
.app-tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-tab.active { color: var(--fin-mustard); font-weight: 700; }
.app-tab:hover { color: var(--fin-cream); }
.app-tab-add {
    flex: 0 0 auto; width: 56px; height: 56px; margin: -24px 6px 0; border-radius: 18px;
    background: var(--fin-mustard); color: var(--fin-mustard-ink); font-size: 1.35rem; box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
}
.app-tab-add span { display: none; }
.app-tab-add:hover, .app-tab-add.active { background: var(--fin-mustard-hover); color: var(--fin-mustard-ink); }
.app-offcanvas { --bs-offcanvas-bg: var(--fin-bg-header); --bs-offcanvas-color: var(--fin-cream); --bs-offcanvas-width: 300px; border-left: 1px solid var(--fin-line) !important; }
.app-offcanvas .app-nav { margin-bottom: 16px; }
.app-offcanvas .app-nav-link { min-height: 46px; }

.app-main { padding: 18px 14px 24px; max-width: 1280px; margin: 0 auto; }
body.has-app-nav { padding-bottom: 84px; }
@media (min-width: 1200px) {
    .app-sidebar { display: flex; }
    .app-topbar, .app-tabbar { display: none; }
    body.has-app-nav { padding-left: var(--app-sidebar-w); padding-bottom: 0; }
    .app-main { padding: 28px 32px; }
}

/* ---- Page header ---- */
.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 18px; }
.page-head h1 { font-size: 1.55rem; font-weight: 800; }
.page-head-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- KPI tiles ---- */
.kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 992px) { .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi {
    display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 14px;
    background: linear-gradient(145deg, var(--fin-bg-raised) 0%, var(--fin-bg-card) 100%); border: 1px solid var(--fin-border);
    border-top: 3px solid var(--fin-mustard);
}
.kpi-alert { border-top-color: var(--fin-neg); background: linear-gradient(145deg, #4a1220 0%, var(--fin-bg-card) 100%); }
.kpi-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--fin-muted); font-weight: 700; }
.kpi-value { font-size: 1.45rem; font-weight: 800; line-height: 1.2; }
.kpi-note { font-size: .75rem; color: var(--fin-muted); }
.kpi-grid-sm .kpi-value { font-size: 1.15rem; }

/* ---- Filter bar: one row of button groups; on phones it scrolls sideways instead of breaking the page width */
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filter-bar .btn-group { flex: none; }
.filter-bar .btn { white-space: nowrap; }

/* ---- Scenario bar, month navigation, view selector ---- */
.scenario-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 12px; background: rgba(217, 165, 33, .08); border: 1px solid #5a4416; }
.month-nav { display: flex; align-items: center; gap: 10px; }
.month-title { font-size: 1.15rem; min-width: 160px; text-align: center; }
.who-form { display: inline-block; }

/* ---- Entry lists ---- */
.list-entries { display: flex; flex-direction: column; }
.list-day { padding: 6px 14px; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--fin-muted); background: rgba(0, 0, 0, .18); border-top: 1px solid var(--fin-line); }
.list-day.is-today { color: var(--fin-mustard); }
.entry-line { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--fin-line); }
.list-entries > .entry-line:first-child { border-top: 0; }
.entry-line.is-skipped { opacity: .5; text-decoration: line-through; }
.entry-icon { width: 38px; height: 38px; flex: none; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; }
.entry-icon.is-out { background: rgba(160, 42, 72, .45); color: var(--fin-out); }
.entry-icon.is-in { background: rgba(47, 122, 70, .4); color: var(--fin-in); }
.entry-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; text-decoration: none; color: var(--fin-cream); }
.entry-main:hover { color: #fff; }
.entry-desc { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.entry-meta { font-size: .78rem; color: var(--fin-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry-side { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }
.entry-amount { font-size: .98rem; white-space: nowrap; }
.entry-actions { flex: none; }
.entry-actions .btn { min-width: 40px; min-height: 40px; }
.tag { display: inline-flex; align-items: center; gap: 3px; font-size: .68rem; font-weight: 700; padding: 1px 6px; border-radius: 6px; background: var(--fin-bg-raised); color: var(--fin-muted); vertical-align: middle; }
.tag-card { background: #2b2440; color: #d6c8ff; }
.tag-est { background: #3b2a08; color: var(--fin-mustard); }

/* ---- Tables ---- */
.table-fin { --bs-table-bg: transparent; --bs-table-color: var(--fin-cream); --bs-table-border-color: var(--fin-line); --bs-table-hover-bg: rgba(255, 255, 255, .03); margin: 0; }
.table-fin th { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--fin-muted); font-weight: 700; background: rgba(0, 0, 0, .15); }
.table-fin td, .table-fin th { padding: .6rem .9rem; vertical-align: middle; }
.table-fin td.text-end, .table-fin th.text-end, .table-fin td.text-nowrap { white-space: nowrap; }
.table-fin td a { text-decoration: none; font-weight: 600; }
.row-neg td { background: rgba(160, 42, 72, .18) !important; }
.row-off td { opacity: .55; }
.row-today td:first-child { box-shadow: inset 3px 0 0 var(--fin-mustard); color: var(--fin-mustard); font-weight: 700; }
.row-month td { background: var(--fin-bg-raised) !important; font-weight: 800; color: var(--fin-mustard); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.move { display: inline-block; margin: 1px 8px 1px 0; text-decoration: none; }
.move.is-in { color: var(--fin-in); }
.move.is-out { color: var(--fin-out); }

@media (max-width: 767.98px) {
    .app-main { padding: 14px 10px 24px; }
    .page-head h1 { font-size: 1.3rem; }
    .page-head-actions { margin-left: 0; width: 100%; }
    .kpi-value { font-size: 1.2rem; }
    .kpi { padding: 10px 12px; }
    .kpi-grid-sm { gap: 8px; }
    .kpi-grid-sm .kpi-value { font-size: 1rem; }
    .kpi-grid-sm .kpi-label { font-size: .65rem; }
    .kpi-grid-sm .kpi-note { font-size: .68rem; }
    .filter-bar { flex-wrap: nowrap; overflow-x: auto; margin-left: -10px; margin-right: -10px; padding: 0 10px 4px; scrollbar-width: none; }
    .filter-bar::-webkit-scrollbar { display: none; }
    .month-nav { justify-content: space-between; }
    .month-title { min-width: 0; flex: 1 1 auto; }
    .page-head { margin-bottom: 12px; }
    html, body { overflow-x: hidden; }
    .entry-line { padding: 10px; gap: 8px; }
    .entry-icon { width: 34px; height: 34px; border-radius: 10px; }
    .entry-desc { font-size: .92rem; white-space: nowrap; }
    .entry-amount { font-size: .9rem; }
    .entry-side .badge { font-size: .62rem; }
    .entry-actions .btn { min-width: 40px; padding: .25rem .5rem; }
    /* Wide tables become one card per row. data-label (set by app.js) is the column title. */
    .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
    .table-stack thead { display: none; }
    .table-stack tbody tr { background-color: var(--fin-bg-card); border: 1px solid var(--fin-border); border-radius: 10px; margin: 0 0 10px; padding: 6px 0; }
    .table-stack tbody tr.row-month { background: transparent; border: 0; margin: 14px 0 6px; padding: 0; }
    .table-responsive:has(.table-stack) { overflow-x: visible; }
    .card:has(.table-stack) { background: transparent; border: 0; }
    .table-stack td { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 0; padding: .3rem .85rem !important; text-align: right; background: transparent; }
    .table-stack td::before { content: attr(data-label); flex: 0 0 38%; text-align: left; font-weight: 600; font-size: .75rem; color: var(--fin-muted); text-transform: uppercase; }
    .table-stack td[data-label=""]::before, .table-stack tr.row-month td::before { display: none; }
    .table-stack td[data-label=""] { justify-content: flex-end; }
    .table-stack td:empty { display: none; }
    .table-stack td .btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* ---- Forecast chart ---- */
.balance-chart { width: 100%; height: 200px; display: block; }
.ch-area { fill: rgba(217, 165, 33, .14); }
.ch-line { fill: none; stroke: var(--fin-mustard); stroke-width: 2.5; }
.ch-zero { stroke: var(--fin-neg); stroke-width: 1; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }
.ch-month { stroke: rgba(255, 255, 255, .08); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ch-label { fill: var(--fin-muted); font-size: 14px; }

/* ---- Accounts ---- */
.acc-card { border-top: 3px solid var(--fin-mustard); }
.acc-card.is-off { opacity: .6; border-top-color: var(--fin-border); }

/* ---- Login, 2FA and error pages ---- */
.page-login, .page-center { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.page-login { background: radial-gradient(circle at 20% 10%, #4a1322 0%, var(--fin-bg-main) 55%); }
.card-login { width: 100%; max-width: 400px; background-color: var(--fin-bg-card); border: 1px solid var(--fin-border); border-top: 4px solid var(--fin-mustard); border-radius: 14px; }
.card-2fa { max-width: 440px; }
.login-logo { height: 96px; width: 96px; border-radius: 22px; }
.login-lang a { color: var(--fin-mustard); }
.qr-box { width: 220px; max-width: 100%; background: #fff; padding: 4px; border-radius: 6px; }
.qr-box svg { display: block; width: 100%; height: auto; }
.secret-key { font-size: 1.05rem; letter-spacing: 1px; color: var(--fin-cream); word-break: break-all; }
.backup-codes { font-size: 1.15rem; line-height: 1.9; text-align: center; letter-spacing: 2px; background: var(--fin-bg-header); border: 1px dashed var(--fin-border); border-radius: 6px; padding: 10px; color: var(--fin-cream); }
.toast-container { z-index: 2000; }

@media print {
    .app-sidebar, .app-topbar, .app-tabbar, .app-offcanvas, .no-print, #toast-box, .entry-actions { display: none !important; }
    body.has-app-nav { padding: 0 !important; }
    body, .card { background: #fff !important; color: #000 !important; }
    .backup-codes { background: #fff !important; color: #000 !important; border-color: #000 !important; }
}