/* Reference-image palette: #3b36dc indigo, white surfaces and blue-gray navigation. */
:root {
    --primary: #3b36dc;
    --primary-hover: #2f2bbd;
    --accent: #3b36dc;
    --accent-light: #eeedff;
    --green: var(--primary);
    --green-light: #efefff;
    --ink: #354056;
    --muted: #8496ab;
    --line: #e9edf5;
    --paper: #fff;
    --bg: #f6f8fc;
    --gold: #8a96ad;
}

/* Reserve the page scrollbar, including on short pages, so navigation stays put. */
html { overflow-y: scroll; scrollbar-gutter: stable; }
body { background: var(--bg); }
:focus-visible { outline-color: #aaa6f1; }
.sidebar {
    width: 256px;
    padding: 24px 18px;
    background: #f0f4fa;
    border-left-color: var(--line);
    box-shadow: -2px 0 10px #35405603;
}
.app-shell { margin-right: 256px; }

/* Fixed header and logo geometry prevents font load/active labels changing it. */
.sidebar > .brand {
    flex: 0 0 98px;
    height: 98px;
    min-height: 98px;
    max-height: 98px;
    padding: 0 7px 18px;
    gap: 12px;
    align-items: center;
}
.sidebar .brand-mark {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
    height: 50px;
    min-height: 50px;
    max-height: 50px;
    padding: 0;
    font: 30px/1 Georgia, serif;
}
.brand-mark { background: var(--accent); color: #fff; }
.brand-copy { min-width: 0; flex: 1 1 auto; }
.brand-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.9;
    color: var(--ink);
}
.brand small { white-space: nowrap; font-size: 9px; color: var(--muted); }
.nav-label { color: #8ca1b1; }
.sidebar nav {
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #d5dfe7 transparent;
    overflow-anchor: none;
}
.sidebar nav > a {
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    padding: 10px 13px;
    gap: 10px;
    color: #718da2;
    white-space: nowrap;
}
.sidebar nav > a > .nav-icon {
    flex: 0 0 24px;
    width: 24px;
    color: #82a0b5;
}
.sidebar nav > a > .nav-text {
    min-width: 0;
    width: auto;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
    font: inherit;
    color: inherit;
}
.sidebar nav > a:hover { background: #f1f6fa; color: #4d718f; }
.sidebar nav > a.active { background: var(--accent); color: #fff; font-weight: 600; }
.sidebar nav > a.active > .nav-icon { color: #fff; }
.sidebar nav > a.active > .nav-text { color: #fff; }
.sidebar-account { background: transparent; }
.avatar { background: #eeedff; color: #5e59cc; }
.profile { color: #4a5868; }
.sidebar-logout { background: #f8fafc; color: #7892a6; border-color: #dce6ed; }
.sidebar-logout:hover { background: #efefff; color: var(--primary); border-color: #c9c7f5; }
.topbar { background: #fff; }
.today { color: #8498a8; }
.menu-button { color: #687f92; }

.button { background: var(--primary); border-color: var(--primary); }
.button:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.button.secondary { background: #efefff; border-color: #e5e4fc; color: #514bd1; }
.button.secondary:hover { background: #e8e6ff; }
.button.ghost { background: #fff; border-color: #dce5ed; color: #72899a; }
.button.ghost:hover { background: #f3f7fb; color: var(--primary); border-color: #c5c2f4; }
.inline-link, .person-link, .row-actions a, .pagination a { color: #5d59b8; }
.text-button:hover, .inline-link:hover, .row-actions a:hover { color: var(--accent); }
.row-actions a.button:not(.ghost):not(.secondary) { color: white; }
.row-actions a.button.ghost { color: #72899a; }
.amount { color: #42576a; }
.stat-top { color: #748b9d; }
.stat-foot, .stat > strong small { color: #8fa3b2; }
.primary-stat { background: #3b36dc; border-color: #3b36dc; }
.primary-stat .stat-top, .primary-stat .stat-foot, .primary-stat > strong small { color: #e2e0ff; }
.stat-icon { color: #e5d8ff; }
.stat-icon.mint { background: #eef8f7; color: #69aaa4; }
.stat-icon.amber { background: #f0efff; color: #8b86d5; }
.stat-icon.blue { background: #efefff; color: #8a86d5; }
.impact { background: #fff; }
.impact-symbol { color: #aaa6dc; }
.impact-row { border-bottom-color: #edf1f5; color: #8097a8; }
.impact-row strong { color: #4b6275; }
.chart-column { color: #8fa4b4; }
.chart-column .chart-value { color: #768fa4; }
.chart { background-image: repeating-linear-gradient(to top,transparent 0px,transparent 51px,#edf2f7 52px,#edf2f7 53px); }
.chart-column meter, .chart-column meter::-webkit-meter-bar { background: #f1f5f9; }
.chart-column meter::-webkit-meter-optimum-value { background: #aaa6ec; }
.chart-column:last-child meter::-webkit-meter-optimum-value { background: var(--accent); }
.chart-column meter::-moz-meter-bar { background: var(--accent); }
th { background: #f7fafc; color: #8199ac; border-block-color: #edf2f6; }
td { border-bottom-color: #edf2f6; }
tbody tr:hover { background: #f8fbff; }
.badge { background: #f6f8fc; color: #8198aa; }
.badge.orange { background: #eeedfc; color: #837ec4; }
.badge.green { background: #e8f7f3; color: #52a28c; }
label { color: #688298; }
input, select, textarea { border-color: #dfe8ef; }
input:focus, select:focus, textarea:focus { border-color: #8a85e5; box-shadow: 0 0 0 3px #efeeff; }
input[readonly] { background: #f4f8fb; color: #8ca0b0; }
input::placeholder, textarea::placeholder { color: #b0bfca; }
.field-hint { color: #8ba0b1; }
.help-panel { background: #f4f8fb; border-color: #e2ebf2; }
.help-panel p { color: #7c94a7; }
.help-icon { color: #a29ddf; }
.required { color: #8e88cc; }
.receipt-details dt, .report-period, .report-summary span { color: #859bae; }
.receipt-header > strong { color: #8c86c4; }
.signatures, .receipt-footer { color: #8b9faf; }
.report-summary strong { color: #536b80; }
.table-sub, .pagination, .page-footer { color: #91a5b5; }
.auth-shell { background: radial-gradient(ellipse at 20% 20%,#e9e7fc,transparent 50%),radial-gradient(ellipse at 85% 90%,#e8edff,transparent 45%),var(--bg); }
.auth-card { box-shadow: 0 12px 60px #49678605; }
.auth-footer { color: #99acba; }
.checkbox-label input { accent-color: var(--accent); }

@media(max-width:950px) {
    .sidebar { width: 256px; }
    .app-shell { margin-right: 0; }
}
@media print {
    html { overflow-y: visible; scrollbar-gutter: auto; }
    .app-shell { margin: 0; }
    .primary-stat { background: #fff; color: #111; border-color: #bbb; }
    .primary-stat .stat-top, .primary-stat .stat-foot, .primary-stat > strong small { color: #444; }
    .brand-mark { background: #eee; color: #111; }
}


/* Compact financial summaries, shared by dashboard and reports. */
.stats-grid { gap: 14px; margin-bottom: 20px; }
.stat { padding: 16px 20px; min-height: 128px; }
.stat-top { margin-bottom: 7px; }
.stat-icon { width: 28px; height: 28px; font-size: 19px; }
.stat > strong { font-size: 25px; line-height: 1.45; }
.stat-foot { margin-top: 7px; }
.stats-grid.three .stat { min-height: 112px; padding: 16px 20px; }
.stats-grid.three .stat > span { font-size: 12px; }
.report-summary { padding: 15px 10px; }
.report-summary strong { font-size: 17px; margin-top: 3px; }
.dashboard-middle { grid-template-columns: minmax(0, 1.8fr) minmax(240px, 1fr); align-items: start; }
.financial-trend { min-width: 0; }
.financial-trend .panel-heading { padding-bottom: 14px; }
.trend-totals { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 0 24px; padding: 12px 0; border-block: 1px solid var(--line); }
.trend-totals > div { min-width: 0; }
.trend-totals span { display: block; font-size: 10px; color: var(--muted); }
.trend-totals strong { display: block; font-size: 16px; overflow-wrap: anywhere; }
.trend-legend { display: flex; flex-wrap: wrap; gap: 16px; padding: 14px 24px 6px; font-size: 10px; color: #687a91; }
.trend-legend > span { display: flex; gap: 6px; align-items: center; }
.trend-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; }
.inflow-key, .trend-bar.inflow { background: var(--primary); }
.outflow-key, .trend-bar.outflow { background: #b8b4f5; }
.trend-legend .balance-key { background: #248e96; height: 3px; width: 15px; }
.trend-empty { margin: 8px 24px 0; font-size: 11px; }
.trend-scroll { overflow-x: auto; margin: 8px 18px 18px; }
.trend-plot { min-width: 720px; position: relative; padding-left: 64px; direction: ltr; }
.trend-axis { position: absolute; left: 0; top: 0; height: 144px; display: flex; flex-direction: column; justify-content: space-between; width: 60px; padding-right: 8px; align-items: flex-end; font-size: 9px; color: var(--muted); }
.trend-bars { height: 144px; display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); background: repeating-linear-gradient(to top,var(--line) 0px,var(--line) 1px,transparent 1px,transparent 71.5px); }
.trend-month { min-width: 0; padding-inline: 7px; }
.trend-pair { display: flex; align-items: flex-end; justify-content: center; gap: 5px; height: 100%; border-radius: 5px; }
.trend-pair:hover, .trend-pair:focus-visible { background: #eeedff88; }
.trend-bar { width: 22px; max-width: 40%; border-radius: 5px 5px 0 0; }
.balance-caption { display: flex; justify-content: space-between; gap: 8px; direction: rtl; font-size: 10px; color: #647b8f; margin-top: 15px; }
.balance-caption small { font-size: 9px; }
.balance-line { display: block; width: 100%; height: 80px; overflow: visible; }
.balance-line polyline { fill: none; stroke: #248e96; stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.balance-line circle { fill: #fff; stroke: #248e96; stroke-width: 2; }
.balance-line circle:hover, .balance-line circle:focus-visible { fill: #248e96; }
.balance-zero { stroke: var(--line); stroke-dasharray: 4 4; }
.trend-labels { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); text-align: center; font-size: 9px; color: #73899e; }
.trend-labels span { direction: rtl; }
.current-month-note { display: block; font-size: 9px; color: var(--primary); }
.trend-details { border-top: 1px solid var(--line); }
.trend-details summary { padding: 12px 24px; color: var(--primary); font-size: 11px; }
.trend-details > p { padding: 0 24px 12px; font-size: 10px; }
.trend-details td, .trend-details th { padding: 10px 12px; white-space: nowrap; font-size: 10px; }
@media(max-width:1100px) { .dashboard-middle { grid-template-columns: minmax(0,1fr); } }
@media(max-width:600px) {
    .stat { padding: 12px; min-height: 119px; }
    .stat-top { font-size: 10px; margin-bottom: 6px; }
    .stat > strong { font-size: 22px; }
    .stat-foot { font-size: 9px; margin-top: 6px; }
    .stats-grid.three .stat { min-height: 92px; padding: 12px 16px; }
    .report-summary { padding: 14px 8px; gap: 12px 5px; }
    .trend-totals { margin-inline: 18px; }
    .trend-totals strong { font-size: 14px; }
    .trend-legend { padding-inline: 18px; gap: 10px; }
    .trend-scroll { margin-inline: 12px; }
}
@media print { .trend-details > * { display: block; } .trend-scroll { overflow: visible; } .trend-totals, .trend-plot { break-inside: avoid; } }

.future-month-note { display: block; font-size: 9px; color: var(--muted); }
.future-month { background: #f6f8fc88; }

/* Horizontal summary strip for overview and financial reports. */
.compact-stats {
    gap: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 18px;
}
.compact-stats .stat,
.stats-grid.three.compact-stats .stat {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 5px 12px;
    min-height: 0;
    padding: 12px 16px;
    border: 0;
    border-inline-end: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
}
.compact-stats .stat:last-child { border-inline-end: 0; }
.compact-stats .stat-top {
    display: flex;
    justify-content: flex-start;
    flex-direction: row-reverse;
    gap: 7px;
    margin: 0;
    font-size: 11px;
    color: #64758c;
}
.compact-stats .stat-icon { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 7px; font-size: 16px; background: #eeedff; color: var(--primary); }
.compact-stats .stat > strong {
    font-size: 21px;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: -.5px;
    text-align: left;
    white-space: nowrap;
}
.compact-stats .stat > strong small { font-size: 9px; font-weight: 400; color: #8496ab; }
.compact-stats .stat-foot { grid-column: 1 / -1; margin: 0; font-size: 9px; line-height: 1.7; color: #8496ab; }
.compact-stats .primary-stat { background: #f3f2ff; box-shadow: inset -3px 0 var(--primary); }
.compact-stats .primary-stat::after { display: none; }
.compact-stats .primary-stat > strong { color: var(--primary); }
.compact-stats .primary-stat .stat-top { color: #5955a2; }
.compact-stats.three .stat { padding-block: 15px; }
.stats-grid.three.compact-stats .stat > span { font-size: 11px; line-height: 1.7; color: #64758c; }
@media (min-width:601px) and (max-width:1250px) {
    .compact-stats:not(.three) { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .compact-stats:not(.three) .stat:nth-child(2) { border-inline-end: 0; }
    .compact-stats:not(.three) .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
    .compact-stats.three .stat { grid-template-columns: 1fr; gap: 2px; }
    .compact-stats.three .stat > strong { text-align: right; }
}
@media (max-width:600px) {
    .stats-grid.compact-stats, .stats-grid.three.compact-stats { grid-template-columns: 1fr; gap: 0; }
    .compact-stats .stat, .stats-grid.three.compact-stats .stat { padding: 10px 13px; min-height: 0; border-inline-end: 0; border-bottom: 1px solid var(--line); gap: 3px 10px; }
    .compact-stats .stat:last-child { border-bottom: 0; }
    .compact-stats .stat-top { font-size: 11px; }
    .compact-stats .stat > strong { font-size: 20px; }
    .compact-stats .stat-foot { font-size: 9px; }
}
@media print {
    .stats-grid.compact-stats { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
    .stats-grid.three.compact-stats { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
    .compact-stats .stat, .stats-grid.three.compact-stats .stat { min-height: 0; padding: 8px !important; }
    .compact-stats .primary-stat { background: #fff; box-shadow: none; }
    .compact-stats .primary-stat > strong { color: #111; }
}

/* Consistent compact page header and content spacing throughout the application. */
.app-shell > .topbar { height: 80px; padding-top: 6px; }
.app-shell > .topbar .topbar-title { font-size: 16px; }
.app-shell > .topbar .today { font-size: 14px; }
.app-shell > main#main-content { padding-top: 28px; }
.app-shell .page-heading { margin-bottom: 16px; }
.app-shell .page-heading .eyebrow { margin-bottom: 2px; }
.app-shell .page-heading p:not(.eyebrow) { margin-top: 3px; }
@media (max-width:600px) {
    .app-shell > .topbar { height: 68px; padding-top: 4px; }
    .app-shell > .topbar .topbar-title { font-size: 15px; }
    .app-shell > .topbar .today { font-size: 13px; }
    .app-shell > main#main-content { padding-top: 22px; }
    .app-shell .page-heading { gap: 10px; margin-bottom: 14px; }
}
@media print {
    .app-shell > main#main-content { padding-top: 0; }
}

/* Mobile option lists remain inside the viewport, including long borrower names. */
select { min-width: 0; max-width: 100%; text-overflow: ellipsis; }
.mobile-select-dialog {
    width: min(420px, calc(100% - 24px));
    max-width: calc(100% - 24px);
    max-height: min(620px, calc(100dvh - 32px));
    margin: auto;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    color: var(--ink);
    box-shadow: 0 14px 50px #26324930;
    overflow: hidden;
    direction: rtl;
    font: inherit;
}
.mobile-select-dialog[open] { display: flex; flex-direction: column; }
.mobile-select-dialog::backdrop { background: #25304766; }
.mobile-select-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.mobile-select-heading h2 { font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }
.mobile-select-close { display: grid; place-items: center; flex: 0 0 40px; height: 40px; padding: 0; border: 0; border-radius: 8px; background: #f4f5fb; color: #718199; font: 26px/1 Arial; }
.mobile-select-dialog .mobile-select-search { width: calc(100% - 28px); margin: 12px 14px; font-size: 16px; flex-shrink: 0; }
.mobile-select-options { overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding: 6px; scrollbar-width: thin; }
.mobile-select-option { display: block; width: 100%; min-height: 46px; padding: 12px; border: 0; border-radius: 8px; background: #fff; color: var(--ink); text-align: right; font: inherit; font-size: 14px; line-height: 1.9; white-space: normal; overflow-wrap: anywhere; }
.mobile-select-option[aria-selected="true"] { background: var(--accent-light); color: var(--primary); font-weight: 650; }
.mobile-select-option:hover, .mobile-select-option:focus-visible { background: #f1f3fc; }
.mobile-select-option:disabled { opacity: .45; }
.mobile-select-empty { padding: 18px; text-align: center; font-size: 12px; }
@media(max-width:950px) {
    .form-grid > div { min-width: 0; max-width: 100%; }
    .filters > div { max-width: 100%; }
    select { width: 100%; }
}
@media print { .mobile-select-dialog { display: none !important; } }