/* ══════════════════════════════════════════════════════════════
   finance-shared.css — shared layout for all finance pages
   Loaded for every finance page (dashboard, manage, grow, application)
   ══════════════════════════════════════════════════════════════ */

/* ── Design tokens ──────────────────────────────────────────── */
body:is(.dashboard-page,.finance-page) {
    --dash-bg:          #f4f7fb;
    --dash-surface:     #ffffff;
    --dash-surface2:    #f1f5f9;
    --dash-ink:         #182d45;
    --dash-muted:       #6b83a0;
    --dash-line:        #e2e8f0;
    --dash-green:       #14867f;
    --dash-green-soft:  #e8f7f5;
    --dash-purple:      #7c57c8;
    --dash-orange:      #c97b2e;
    --dash-danger:      #e5404a;
    --finance-shadow:   0 3px 14px rgba(24,45,69,.035);
    --finance-accent:   var(--dash-green);
    /* Bootstrap token overrides */
    --bs-body-color:        var(--dash-ink);
    --bs-body-bg:           var(--dash-surface);
    --bs-border-color:      var(--dash-line);
    --bs-secondary-color:   var(--dash-muted);
}
[data-theme=dark] body:is(.dashboard-page,.finance-page) {
    --dash-bg:         #121d29;
    --dash-surface:    #192838;
    --dash-surface2:   #203245;
    --dash-ink:        #e6eef7;
    --dash-muted:      #a1b2c3;
    --dash-line:       #2c4054;
    --dash-green:      #80c9b4;
    --dash-green-soft: #213e3d;
    --dash-purple:     #b5a4db;
    --dash-orange:     #dfb379;
    --dash-danger:     #fa939b;
}

/* ── Base resets ────────────────────────────────────────────── */
body:is(.dashboard-page,.finance-page) *,
body:is(.dashboard-page,.finance-page) *:before,
body:is(.dashboard-page,.finance-page) *:after { box-sizing: border-box; }
body:is(.dashboard-page,.finance-page) { -webkit-font-smoothing: antialiased; font-family: Inter,'Segoe UI',Arial,sans-serif; font-size: 13px; background: var(--dash-bg); color: var(--dash-ink); }
body:is(.dashboard-page,.finance-page) a { text-decoration: none; }
body:is(.dashboard-page,.finance-page) button, body:is(.dashboard-page,.finance-page) input, body:is(.dashboard-page,.finance-page) select { font: inherit; }
body:is(.dashboard-page,.finance-page) button { cursor: pointer; }
body:is(.dashboard-page,.finance-page) :focus-visible { outline: 3px solid #73b9b1; outline-offset: 3px; }

/* ── Page shell ─────────────────────────────────────────────── */
body:is(.dashboard-page,.finance-page) .page-shell { margin-top: 0 !important; padding: 0 0 30px; max-width: none; }

/* ── Inner content shells ───────────────────────────────────── */
body.application-page .application-shell { max-width: none; padding: 33px 42px 40px; }
body.application-page main.page-shell { padding: 0; }
body.application-page .application-shell > :is(.container,.container-fluid,.insights-container) { max-width: none; padding: 0; margin-top: 0 !important; }
body:is(.manage-page,.grow-page) .manage-shell { max-width: none; margin: 0; padding: 33px 42px 40px; color: var(--dash-ink); }
body.grow-page .grow-shell { max-width: none; margin: 0; padding: 33px 42px 40px; color: var(--dash-ink); font-family: inherit; font-size: 13px; }
body.finance-page .page-shell { padding: 0 0 30px !important; }
body.finance-page .ap, body.finance-page .transactions-shell { max-width: none; margin: 0; padding: 33px 42px 40px; color: var(--dash-ink); font-family: inherit; }

/* ── Navbar ─────────────────────────────────────────────────── */
body:is(.dashboard-page,.finance-page) .navbar { background: var(--dash-surface) !important; border-bottom: 1px solid var(--dash-line); padding: 8px 30px; min-height: 76px; color: var(--dash-ink); }
body:is(.dashboard-page,.finance-page) .navbar > .container-fluid { max-width: 1500px; margin: auto; gap: 18px; padding: 0; }
body:is(.dashboard-page,.finance-page) .navbar-brand { margin: 0; padding: 0; line-height: 1; flex-shrink: 0; }
body:is(.dashboard-page,.finance-page) .dashboard-app-logo { display: block; width: 180px; height: 60px; object-fit: contain; }
body:is(.dashboard-page,.finance-page) .navbar .navbar-nav { gap: 4px; }
body:is(.dashboard-page,.finance-page) .navbar .nav-link { display: flex; align-items: center; gap: 5px; color: var(--dash-muted); font-size: 11px; font-weight: 550; padding: 8px 10px; border-radius: 8px; white-space: nowrap; }
body:is(.dashboard-page,.finance-page) .navbar .nav-link:hover, body:is(.dashboard-page,.finance-page) .navbar .nav-link.show { background: var(--dash-surface2); color: var(--dash-ink); }
body:is(.dashboard-page,.finance-page) .navbar .nav-link > i { font-size: 14px; }
/* The nav markup emits its own .dashboard-nav-chevron icon, so Bootstrap's
   built-in ::after caret is suppressed here rather than in dashboard.css —
   this file loads on both dashboard-page and finance-page, so the two arrows
   cannot reappear when dashboard.css is absent. */
body:is(.dashboard-page,.finance-page) .navbar .dropdown-toggle::after { display: none; }
body:is(.dashboard-page,.finance-page) .navbar .dashboard-nav-chevron { font-size: 11px; opacity: .65; margin-left: 1px; transition: transform .18s; }
body:is(.dashboard-page,.finance-page) .navbar .dropdown-toggle.show .dashboard-nav-chevron { transform: rotate(180deg); }
body:is(.dashboard-page,.finance-page) .navbar .dropdown-menu { background: var(--dash-surface); color: var(--dash-ink); border: 1px solid var(--dash-line); box-shadow: 0 14px 40px rgba(19,46,72,.13); border-radius: 12px; padding: 8px; min-width: 220px; margin-top: 9px; }
body:is(.dashboard-page,.finance-page) .navbar .dropdown-item { color: var(--dash-ink); font-size: 12px; padding: 8px 10px; border-radius: 6px; display: flex; gap: 8px; }
body:is(.dashboard-page,.finance-page) .navbar .dropdown-item > i { color: var(--dash-green); }
body:is(.dashboard-page,.finance-page) .navbar .dropdown-item:hover, body:is(.dashboard-page,.finance-page) .navbar .dropdown-item:focus { background: var(--dash-surface2); }
body:is(.dashboard-page,.finance-page) .navbar .dropdown-divider { border-color: var(--dash-line); margin: 6px 0; }
body:is(.dashboard-page,.finance-page) .navbar .dropdown-header { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--dash-muted); padding: 8px 10px 4px; }
body:is(.dashboard-page,.finance-page) .dark-mode-toggle { width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--dash-line); border-radius: 8px; background: var(--dash-surface); color: var(--dash-ink); font-size: 14px; }
body:is(.dashboard-page,.finance-page) .navbar-toggler { border-color: var(--dash-line); box-shadow: none !important; }
body:is(.dashboard-page,.finance-page) .header-account-actions { flex-shrink: 0; align-items: center; gap: 8px; }
body:is(.dashboard-page,.finance-page) #userMenu { background: transparent; border: 1px solid var(--dash-line); color: var(--dash-ink); border-radius: 8px; padding: 6px 10px; font-size: 12px; }
body:is(.dashboard-page,.finance-page) .header-user-name { font-size: 12px; font-weight: 600; }
body:is(.dashboard-page,.finance-page) .header-account-menu { max-height: 80vh; overflow-y: auto; }

/* Nav active states */
body:is(.dashboard-page,.finance-page) .navbar .nav-link[href="/dashboard"] { background: var(--dash-green-soft); color: var(--dash-green); }
body.finance-page .navbar .nav-link[href="/dashboard"] { background: transparent; color: var(--dash-muted); }
body.finance-page .navbar .nav-link[href="/dashboard"]:hover { background: var(--dash-surface2); color: var(--dash-ink); }
body.finance-page .navbar .nav-link.finance-nav-active,
body.finance-page .navbar .dropdown-item[aria-current="page"] { background: var(--dash-green-soft); color: var(--dash-green); }

/* Context bar */
.dashboard-context-bar { background: var(--dash-surface); border-bottom: 1px solid var(--dash-line); }
.dashboard-context-bar > div { max-width: 1420px; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: auto; padding: 11px 42px; color: var(--dash-muted); font-size: 9px; }
.dashboard-context-bar > div span { display: flex; align-items: center; gap: 6px; }
.dashboard-context-bar .bi-circle-fill { font-size: 7px; color: var(--dash-green); }

/* ── Page headings ──────────────────────────────────────────── */
body.finance-page .finance-eyebrow { font-size: 10px; font-weight: 650; letter-spacing: 1.6px; color: var(--dash-green); text-transform: uppercase; margin-bottom: 4px; }
body:is(.dashboard-page,.finance-page) :is(.page-title,.insights-header h1,.admin-page-hero-title) { font-size: 31px; font-weight: 600; line-height: 1.4; letter-spacing: -1px; color: var(--dash-ink); margin: 0 0 8px; }
body.application-page .application-page-description { font-size: 12px; color: var(--dash-muted); margin: 0 0 26px; max-width: 700px; }
body.application-page .page-title:not(:has(+ .application-page-description)) { margin-bottom: 26px; }

/* ── Primary button ─────────────────────────────────────────── */
body:is(.dashboard-page,.finance-page) .btn-primary { background: #163957; border-color: #163957; color: #fff; border-radius: 8px; font-size: 12px; font-weight: 650; padding: 11px 16px; min-height: 42px; box-shadow: none; }
body:is(.dashboard-page,.finance-page) .btn-primary:hover { background: #245373; border-color: #245373; }
[data-theme=dark] body:is(.dashboard-page,.finance-page) .btn-primary { background: #8ac3c9; border-color: #8ac3c9; color: #14293b; }
body:is(.dashboard-page,.finance-page) .btn-outline-primary { color: var(--dash-green); border-color: var(--dash-green); }
body:is(.dashboard-page,.finance-page) .btn-outline-primary:hover { background: var(--dash-green-soft); }
body:is(.dashboard-page,.finance-page) .btn-outline-secondary { color: var(--dash-ink); border-color: var(--dash-line); background: var(--dash-surface); }
body:is(.dashboard-page,.finance-page) .btn-outline-secondary:hover { background: var(--dash-surface2); }
body:is(.dashboard-page,.finance-page) .btn { min-height: 38px; border-radius: 8px; font-size: 12px; padding: 9px 14px; font-weight: 600; box-shadow: none; }
body:is(.dashboard-page,.finance-page) .btn-secondary { background: var(--dash-surface2); color: var(--dash-ink); border-color: var(--dash-line); }
body:is(.dashboard-page,.finance-page) .btn-success { background: var(--dash-green); border-color: var(--dash-green); }
body:is(.dashboard-page,.finance-page) .btn-light { background: var(--dash-surface2); color: var(--dash-ink); border-color: var(--dash-line); }
[data-theme=dark] body:is(.dashboard-page,.finance-page) .btn-close { filter: invert(1) grayscale(1) brightness(2); }

/* ── Cards ──────────────────────────────────────────────────── */
body:is(.dashboard-page,.finance-page) .card,
body:is(.dashboard-page,.finance-page) .section-card,
body:is(.dashboard-page,.finance-page) .table-card { background: var(--dash-surface); border: 1px solid var(--dash-line); border-radius: 12px; box-shadow: var(--finance-shadow); color: var(--dash-ink); min-width: 0; }
body:is(.dashboard-page,.finance-page) .card-body { padding: 22px; }
body:is(.dashboard-page,.finance-page) .card-header { background: transparent; padding: 18px 22px; border-bottom-color: var(--dash-line); font-size: 14px; font-weight: 650; color: var(--dash-ink); }
body:is(.dashboard-page,.finance-page) .card-footer { background: var(--dash-surface2); border-top-color: var(--dash-line); padding: 16px 22px; }

/* ── Form controls ──────────────────────────────────────────── */
body:is(.dashboard-page,.finance-page) .form-control,
body:is(.dashboard-page,.finance-page) .form-select,
body:is(.dashboard-page,.finance-page) .input-group-text { background: var(--dash-surface); color: var(--dash-ink); border-color: var(--dash-line); border-radius: 8px; font-size: 12px; min-height: 42px; box-shadow: none; }
body:is(.dashboard-page,.finance-page) .form-control:focus,
body:is(.dashboard-page,.finance-page) .form-select:focus { border-color: var(--dash-green); box-shadow: 0 0 0 3px rgba(115,185,177,.2); }
body:is(.dashboard-page,.finance-page) .form-control::placeholder { color: var(--dash-muted); opacity: .85; }
body:is(.dashboard-page,.finance-page) .form-label { display: block; font-size: 12px; color: var(--dash-ink); font-weight: 600; margin-bottom: 7px; }
body:is(.dashboard-page,.finance-page) .form-text, body:is(.dashboard-page,.finance-page) .text-muted { color: var(--dash-muted) !important; }
body:is(.dashboard-page,.finance-page) .bg-light, body:is(.dashboard-page,.finance-page) .bg-white { background: var(--dash-surface2) !important; }
body:is(.dashboard-page,.finance-page) .text-dark { color: var(--dash-ink) !important; }
body:is(.dashboard-page,.finance-page) .border { border-color: var(--dash-line) !important; }

/* ── Tables ─────────────────────────────────────────────────── */
body:is(.dashboard-page,.finance-page) .table { --bs-table-color: var(--dash-ink); --bs-table-bg: transparent; --bs-table-hover-bg: var(--dash-surface2); --bs-table-striped-bg: var(--dash-surface2); --bs-table-active-bg: var(--dash-green-soft); --bs-table-border-color: var(--dash-line); }
body:is(.dashboard-page,.finance-page) .table th { background: var(--dash-surface2); color: var(--dash-muted); font-size: 11px; font-weight: 600; padding: 13px 12px; white-space: nowrap; border-color: var(--dash-line); }
body:is(.dashboard-page,.finance-page) .table td { padding: 13px 12px; border-color: var(--dash-line); vertical-align: middle; font-size: 12px; }
body:is(.dashboard-page,.finance-page) .table-responsive { border-radius: 8px; }

/* ── Modals ─────────────────────────────────────────────────── */
body:is(.dashboard-page,.finance-page) .modal-dialog { margin: 16px auto; width: calc(100% - 32px); }
body:is(.dashboard-page,.finance-page) .modal-content { background: var(--dash-surface); color: var(--dash-ink); border: 1px solid var(--dash-line); border-radius: 14px; box-shadow: 0 24px 70px rgba(10,27,43,.25); max-height: calc(100dvh - 32px); }
body:is(.dashboard-page,.finance-page) .modal-header, body:is(.dashboard-page,.finance-page) .modal-footer { padding: 18px 22px; border-color: var(--dash-line); }
body:is(.dashboard-page,.finance-page) .modal-header { background: var(--dash-surface); }
body:is(.dashboard-page,.finance-page) .modal-footer { background: var(--dash-surface2); }
body:is(.dashboard-page,.finance-page) .modal-body { padding: 22px; overflow-y: auto; }
body:is(.dashboard-page,.finance-page) .modal-title { color: var(--dash-ink); font-size: 18px; font-weight: 600 !important; }
body:is(.dashboard-page,.finance-page) .dropdown-menu { background: var(--dash-surface); color: var(--dash-ink); border-color: var(--dash-line); }
body:is(.dashboard-page,.finance-page) .dropdown-item { color: var(--dash-ink); }
body:is(.dashboard-page,.finance-page) .dropdown-item:hover { background: var(--dash-surface2); }

/* ── Nav tabs ───────────────────────────────────────────────── */
body:is(.dashboard-page,.finance-page) .nav-tabs { gap: 8px; border-color: var(--dash-line); }
body:is(.dashboard-page,.finance-page) .nav-tabs .nav-link { color: var(--dash-muted); background: transparent; border-radius: 8px 8px 0 0; font-size: 12px; border-color: transparent; }
body:is(.dashboard-page,.finance-page) .nav-tabs .nav-link.active { color: var(--dash-green); background: var(--dash-surface); border-color: var(--dash-line); }

/* ── Misc components ────────────────────────────────────────── */
body:is(.dashboard-page,.finance-page) .progress { background: var(--dash-surface2); border-radius: 20px; }
body:is(.dashboard-page,.finance-page) .progress-bar { background: var(--dash-green); }
body:is(.dashboard-page,.finance-page) .alert { border-radius: 10px; font-size: 12px; }
body:is(.dashboard-page,.finance-page) .alert-info { background: var(--dash-green-soft); color: var(--dash-ink); border-color: var(--dash-line); }
body:is(.dashboard-page,.finance-page) .list-group-item { background: var(--dash-surface); border-color: var(--dash-line); color: var(--dash-ink); }
body:is(.dashboard-page,.finance-page) .accordion-item { background: var(--dash-surface); border-color: var(--dash-line); }
body:is(.dashboard-page,.finance-page) .accordion-button { background: var(--dash-surface); color: var(--dash-ink); }
body:is(.dashboard-page,.finance-page) .accordion-button:not(.collapsed) { background: var(--dash-green-soft); color: var(--dash-green); box-shadow: none; }
body:is(.dashboard-page,.finance-page) .badge { font-size: 10px; }

/* ── FAB ────────────────────────────────────────────────────── */
body:is(.dashboard-page,.finance-page) .fab-main { background: #163957; width: 48px; height: 48px; font-size: 20px; }
body:is(.dashboard-page,.finance-page) .fab-action { background: var(--dash-green); width: 41px; height: 41px; }

/* ── Footer ─────────────────────────────────────────────────── */
body:is(.dashboard-page,.finance-page) .app-footer { background: var(--dash-bg); border-top: 1px solid var(--dash-line); color: var(--dash-muted); font-size: 9px; padding: 20px 42px; margin-top: 0; }
body:is(.dashboard-page,.finance-page) .app-footer-brand { color: var(--dash-ink); font-size: 10px; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1199px) {
    body:is(.dashboard-page,.finance-page) .navbar { padding: 8px 16px; }
    body:is(.dashboard-page,.finance-page) .dashboard-context-bar > div { padding: 11px 20px; }
}
@media (max-width: 767px) {
    body.application-page .application-shell { padding: 24px 20px 36px; }
    body:is(.manage-page,.grow-page) .manage-shell { padding: 26px 20px 32px; }
    body.grow-page .grow-shell { padding: 24px 20px 36px; }
    body.finance-page .ap, body.finance-page .transactions-shell { padding: 26px 20px 32px; }
    body:is(.dashboard-page,.finance-page) :is(.page-title,.insights-header h1) { font-size: 27px; }
    body:is(.dashboard-page,.finance-page) .modal-content { border-radius: 10px; }
    body:is(.dashboard-page,.finance-page) .table { min-width: 520px; }
}
@media (max-width: 575px) {
    body:is(.dashboard-page,.finance-page) .navbar { padding: 6px 12px; }
    body:is(.dashboard-page,.finance-page) .navbar-brand { margin-right: 0; }
}
@media (max-width: 480px) {
    body.application-page .application-shell { padding: 20px 14px 30px; }
    body:is(.manage-page,.grow-page) .manage-shell { padding: 16px 14px; }
    body.grow-page .grow-shell { padding: 20px 14px 30px; }
    body.finance-page .ap, body.finance-page .transactions-shell { padding: 16px 14px; }
}
@media (prefers-reduced-motion: reduce) {
    body:is(.dashboard-page,.finance-page) * { transition: none !important; animation: none !important; }
}