/* Onest (SIL Open Font License), served from this app so pages make no outside requests. */
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("vendor/fonts/onest-cyrillic-ext.11a468877c94.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("vendor/fonts/onest-cyrillic.fe2bd26ae82a.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("vendor/fonts/onest-latin-ext.3e2cb9888206.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("vendor/fonts/onest-latin.3db826ed1c5d.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* --- Colours and Bootstrap overrides ------------------------------------- */

:root {
  --ink: #17232b;
  --muted: #55626b;
  --ground: #f2f4f3;
  --line: #dde3e1;
  --line-soft: #edf0ef;
  --line-strong: #94a3a0;
  --petrol: #0f5f6e;
  --petrol-dark: #0b4651;
  --petrol-deep: #0b3f49;
  --petrol-edge: #2e6672;
  --petrol-tint: #e3f0f1;
  --sun: #f4b740;
  --paid: #17663f;
  --paid-bg: #e2f3e9;
  --pending: #9a3412;
  --pending-bg: #fce9dd;
  --partial: #7a5200;
  --partial-bg: #fbf0cc;
  --danger: #b3261e;
  --radius: 0.625rem;
  --radius-lg: 1rem;

  --bs-body-font-family: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-font-size: 0.9375rem;
  --bs-body-line-height: 1.45;
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--ground);
  --bs-secondary-color: var(--muted);
  --bs-border-color: var(--line);
  --bs-border-radius: var(--radius);
  --bs-border-radius-sm: 0.5rem;
  --bs-primary: #0f5f6e;
  --bs-primary-rgb: 15, 95, 110;
  --bs-success: #17663f;
  --bs-success-rgb: 23, 102, 63;
  --bs-danger: #b3261e;
  --bs-danger-rgb: 179, 38, 30;
  --bs-link-color: #0f5f6e;
  --bs-link-color-rgb: 15, 95, 110;
  --bs-link-hover-color: #0b4651;
  --bs-link-hover-color-rgb: 11, 70, 81;
}

body { font-variant-numeric: tabular-nums; }
a { text-decoration-thickness: 1px; text-underline-offset: 2px; }
h1.h3 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.01em; }
h2.h5 { font-size: 1.125rem; font-weight: 700; }
.text-success { color: var(--paid) !important; }
.text-danger { color: var(--danger) !important; }

.btn { --bs-btn-font-weight: 600; --bs-btn-border-radius: var(--radius); min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }
.btn-sm { --bs-btn-border-radius: 0.5rem; min-height: 2.25rem; }
.btn-link { min-height: 0; }
.btn-primary { --bs-btn-bg: var(--petrol); --bs-btn-border-color: var(--petrol); --bs-btn-hover-bg: var(--petrol-dark); --bs-btn-hover-border-color: var(--petrol-dark); --bs-btn-active-bg: var(--petrol-deep); --bs-btn-active-border-color: var(--petrol-deep); --bs-btn-disabled-bg: var(--petrol); --bs-btn-disabled-border-color: var(--petrol); }
.btn-outline-primary { --bs-btn-color: var(--petrol); --bs-btn-border-color: var(--petrol); --bs-btn-bg: #fff; --bs-btn-hover-bg: var(--petrol); --bs-btn-hover-border-color: var(--petrol); --bs-btn-active-bg: var(--petrol-dark); --bs-btn-active-border-color: var(--petrol-dark); }
.btn-success { --bs-btn-bg: var(--paid); --bs-btn-border-color: var(--paid); --bs-btn-hover-bg: #12512f; --bs-btn-hover-border-color: #12512f; --bs-btn-active-bg: #0e4226; --bs-btn-active-border-color: #0e4226; }
.btn-outline-secondary { --bs-btn-color: var(--ink); --bs-btn-border-color: #b9c6c4; --bs-btn-bg: #fff; --bs-btn-hover-bg: var(--ink); --bs-btn-hover-border-color: var(--ink); --bs-btn-active-bg: var(--ink); --bs-btn-active-border-color: var(--ink); }
.btn-danger { --bs-btn-bg: var(--danger); --bs-btn-border-color: var(--danger); --bs-btn-hover-bg: #8f1e18; --bs-btn-hover-border-color: #8f1e18; }
.btn-outline-danger { --bs-btn-color: var(--danger); --bs-btn-border-color: var(--danger); --bs-btn-bg: #fff; --bs-btn-hover-bg: var(--danger); --bs-btn-hover-border-color: var(--danger); }

.form-control, .form-select { min-height: 2.75rem; border-color: var(--line-strong); border-radius: var(--radius); }
.form-control:focus, .form-select:focus { border-color: var(--petrol); box-shadow: 0 0 0 0.2rem rgba(15, 95, 110, 0.2); }
.form-check-input:checked { background-color: var(--petrol); border-color: var(--petrol); }
.form-label { font-weight: 600; }

.card { --bs-card-bg: #fff; --bs-card-border-color: var(--line); --bs-card-border-radius: var(--radius-lg); --bs-card-inner-border-radius: var(--radius-lg); }
.card.border-primary, .card.border-success, .card.border-danger { border-width: 2px; }
.list-group { --bs-list-group-border-color: var(--line); --bs-list-group-border-radius: var(--radius-lg); }
.dropdown-menu { --bs-dropdown-border-radius: 0.75rem; --bs-dropdown-border-color: var(--line); --bs-dropdown-link-active-bg: var(--petrol); box-shadow: 0 8px 24px rgba(23, 35, 43, 0.12); }
.alert { --bs-alert-border-radius: 0.75rem; }
.modal-content { border-radius: var(--radius-lg); border-color: var(--line); }
.progress { --bs-progress-height: 0.625rem; --bs-progress-bg: #e3e9e7; --bs-progress-border-radius: 999px; --bs-progress-font-size: 0; }
.progress-bar.bg-success { background-color: var(--paid) !important; }

/* Tables read as white panels on the grey page. */
.table-responsive { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.table { --bs-table-bg: transparent; --bs-table-border-color: var(--line-soft); margin-bottom: 0; }
.table > :not(caption) > * > * { padding: 0.75rem 1rem; vertical-align: middle; }
.table > thead th { font-size: 0.8125rem; font-weight: 600; color: var(--muted); border-bottom-color: var(--line); }
.table > tbody > tr:last-child > *, .table > tfoot > tr:last-child > * { border-bottom-width: 0; }
.table-responsive + .small, .table-responsive + p { margin-top: 0.75rem; }

/* Status colours: green paid, amber partly paid, orange pending. */
.badge { --bs-badge-border-radius: 999px; --bs-badge-font-weight: 600; --bs-badge-font-size: 0.8125rem; --bs-badge-padding-x: 0.625rem; --bs-badge-padding-y: 0.3em; }
.text-bg-success { color: var(--paid) !important; background-color: var(--paid-bg) !important; }
.text-bg-danger { color: var(--pending) !important; background-color: var(--pending-bg) !important; }
.text-bg-warning { color: var(--partial) !important; background-color: var(--partial-bg) !important; }
.text-bg-secondary { color: #3f4c55 !important; background-color: #e6ebe9 !important; }
.text-bg-info { color: var(--petrol-dark) !important; background-color: var(--petrol-tint) !important; }
.text-bg-light { color: var(--petrol-deep) !important; background-color: #fff !important; }

/* --- Page shell: sidebar on a computer, bottom bar on a phone ------------- */

.icon { width: 1.125rem; height: 1.125rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-lg { width: 1.375rem; height: 1.375rem; }

.app { display: flex; min-height: 100vh; }
.app-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.content { flex: 1 1 auto; padding: 2rem clamp(1rem, 3vw, 2.5rem) 3rem; }
.content-inner { max-width: 67.5rem; margin: 0 auto; }

.sidebar { --bs-offcanvas-width: 17.5rem; --bs-offcanvas-bg: var(--petrol-deep); --bs-offcanvas-color: #fff; }
.sidebar-inner { display: flex; flex-direction: column; gap: 1.5rem; height: 100%; padding: 1.5rem 1rem; overflow-y: auto; background: var(--petrol-deep); color: #fff; }
.brand { display: flex; align-items: center; gap: 0.75rem; padding: 0 0.5rem; color: #fff; font-weight: 700; font-size: 1rem; text-decoration: none; }
.brand:hover { color: #fff; }
.brand small { display: block; font-size: 0.8125rem; font-weight: 400; color: #c9dde0; }
.brand-mark { width: 2.25rem; height: 2.25rem; flex: none; border-radius: 0.625rem; background: var(--sun); color: var(--petrol-deep); display: flex; align-items: center; justify-content: center; font-weight: 700; }

.year-switch { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; min-height: 3rem; padding: 0.5rem 0.75rem; border: 1px solid var(--petrol-edge); border-radius: var(--radius); background: #0f4e5a; color: #fff; font: inherit; text-align: left; }
.year-switch:hover, .year-switch:focus-visible { background: #135a67; }
.year-switch small { display: block; font-size: 0.75rem; color: #c9dde0; }
.year-switch strong { font-weight: 600; }
.year-switch-compact { width: auto; min-height: 2.75rem; }

.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-nav-title { padding: 0 0.75rem 0.375rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #c9dde0; }
.side-link { display: flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; padding: 0 0.75rem; border: 0; border-radius: var(--radius); background: transparent; color: #e6f0f1; font: inherit; text-align: left; text-decoration: none; width: 100%; }
.side-link:hover, .side-link:focus-visible { background: #135a67; color: #fff; }
.side-link.active { background: #fff; color: var(--petrol-deep); font-weight: 600; }

.side-footer { margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--petrol-edge); display: flex; flex-direction: column; gap: 0.75rem; }
.user-button { display: flex; align-items: center; gap: 0.625rem; width: 100%; min-height: 2.75rem; padding: 0.25rem 0.5rem; border: 0; border-radius: var(--radius); background: transparent; color: #fff; font: inherit; text-align: left; }
.user-button:hover, .user-button:focus-visible { background: #135a67; }
.user-button small { display: block; font-size: 0.75rem; color: #c9dde0; }
.avatar { width: 2.125rem; height: 2.125rem; flex: none; border-radius: 50%; background: #1c6876; display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; }

.lang-switch { display: inline-flex; align-self: flex-start; border: 1px solid var(--petrol-edge); border-radius: 0.5rem; overflow: hidden; }
.lang-switch button { min-width: 2.75rem; min-height: 2.25rem; border: 0; background: transparent; color: #e6f0f1; font: inherit; font-size: 0.8125rem; }
.lang-switch button[aria-pressed="true"] { background: #fff; color: var(--petrol-deep); font-weight: 600; }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 1rem; background: var(--petrol-deep); color: #fff; }

.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: flex; padding: 0.375rem 0.25rem calc(0.5rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #fff; }
.tab-link { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 3.25rem; border: 0; border-radius: var(--radius); background: transparent; color: #3f4c55; font: inherit; font-size: 0.75rem; font-weight: 600; text-decoration: none; }
.tab-link.active { background: var(--petrol-tint); color: var(--petrol-dark); font-weight: 700; }

@media (min-width: 992px) {
  .sidebar { width: 15.5rem; flex: none; position: sticky; top: 0; height: 100vh; }
}
@media (max-width: 991.98px) {
  .has-tabbar .content { padding-top: 1.25rem; padding-bottom: 6.5rem; }
}

/* --- Building blocks ------------------------------------------------------ */

.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.panel-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.875rem 1.25rem; border-bottom: 1px solid var(--line-soft); }
.panel-row:last-child { border-bottom: 0; }
.panel-link { display: block; color: var(--ink); text-decoration: none; }
.panel-link:hover { color: var(--ink); border-color: var(--line-strong); }

.stat-label { font-size: 0.875rem; color: var(--muted); }
.stat-value { font-size: 1.5rem; line-height: 1.15; font-weight: 700; }
.stat-value-lg { font-size: 2rem; line-height: 1.1; font-weight: 700; letter-spacing: -0.01em; }

.hero { padding: 1.5rem; border-radius: var(--radius-lg); background: var(--petrol); color: #fff; }
.hero .stat-label { color: #d5e8ea; }
.hero-total { font-size: clamp(2.25rem, 6vw, 2.75rem); line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; }
.hero-part { flex: 1 1 8.75rem; padding: 0.75rem 0.875rem; border-radius: 0.75rem; background: var(--petrol-dark); }
.hero-part strong { display: block; font-size: 1.25rem; font-weight: 600; }

.breakdown { margin: 0; display: flex; flex-direction: column; gap: 0.375rem; font-size: 0.875rem; }
.breakdown div { display: flex; justify-content: space-between; gap: 0.75rem; }
.breakdown dt { font-weight: 400; color: var(--muted); }
.breakdown dd { margin: 0; font-weight: 600; }

.notice { padding: 1.25rem; border: 1px solid #ead9a6; border-radius: var(--radius-lg); background: #fdf6e0; color: #5f4100; }
.notice .btn { --bs-btn-bg: #5f4100; --bs-btn-border-color: #5f4100; --bs-btn-color: #fff; --bs-btn-hover-bg: #453000; --bs-btn-hover-border-color: #453000; --bs-btn-hover-color: #fff; }

.filter { min-height: 2.75rem; padding: 0 1rem; border: 1px solid #b9c6c4; border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-weight: 600; }
.filter[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }

.split-bar { display: flex; height: 0.75rem; border-radius: 999px; background: #e3e9e7; overflow: hidden; }
.split-bar .got { background: var(--paid); }
.split-bar .coming { background: #f3c7a8; }

/* One child in a collection: a table-like row on a computer, a card on a phone. */
.due-row { display: grid; grid-template-columns: minmax(0, 1.2fr) 8.5rem minmax(0, 1.3fr) 18rem; align-items: center; gap: 0.5rem 1rem; padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--line-soft); }
.due-list.readonly .due-row { grid-template-columns: minmax(0, 1.2fr) 8.5rem minmax(0, 1.6fr); }
.due-row:last-child { border-bottom: 0; }
.due-row[hidden] { display: none; }
.due-head { font-size: 0.8125rem; font-weight: 600; color: var(--muted); border-bottom-color: var(--line); }
.due-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; }
.due-actions form { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.amount-box { display: flex; align-items: center; height: 2.75rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: #fff; overflow: hidden; }
.amount-box:focus-within { border-color: var(--petrol); box-shadow: 0 0 0 0.2rem rgba(15, 95, 110, 0.2); }
.amount-box input { width: 4.5rem; height: 100%; padding: 0 0.25rem 0 0.5rem; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-weight: 600; text-align: right; -moz-appearance: textfield; appearance: textfield; }
.amount-box input::-webkit-outer-spin-button, .amount-box input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.amount-box span { padding-right: 0.75rem; color: var(--muted); }
.icon-button { width: 2.75rem; height: 2.75rem; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #b9c6c4; border-radius: var(--radius); background: #fff; color: var(--ink); text-decoration: none; }
.icon-button:hover { border-color: var(--ink); color: var(--ink); }
.icon-button.danger { color: var(--danger); }
.icon-button.danger:hover { border-color: var(--danger); }
.icon-button.plain { width: 2.25rem; height: 2.25rem; border-color: transparent; background: transparent; }
.payment-line { display: flex; align-items: center; gap: 0.25rem; margin: 0; }

@media (max-width: 991.98px) {
  .due-head { display: none; }
  .due-row, .due-list.readonly .due-row { grid-template-columns: minmax(0, 1fr) auto; padding: 0.875rem 1rem; }
  .due-payments, .due-actions { grid-column: 1 / -1; }
  .due-payments:empty { display: none; }
  .due-actions { justify-content: flex-start; flex-wrap: wrap; min-width: 0; }
  .due-actions form { flex: 1 1 100%; min-width: 0; }
  .due-actions form .btn { flex: none; }
  .amount-box { flex: 1 1 0; min-width: 0; }
  .amount-box input { flex: 1 1 0; min-width: 0; width: auto; }
}

.receipt-thumb { max-width: 100%; max-height: 320px; border: 1px solid var(--bs-border-color); border-radius: .375rem; }
.item-row { border-bottom: 1px solid var(--bs-border-color); padding-bottom: .75rem; margin-bottom: .75rem; }
.report h2 { font-size: 1.1rem; margin-top: 1.5rem; }
.report { padding: 0 1rem 1rem; }
.min-w-0 { min-width: 0; }
.version-line { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: #c9dde0; text-decoration: none; }
.version-line:hover { color: #fff; text-decoration: underline; }
.version-dev { padding: 1px 0.5rem; border-radius: 999px; background: var(--sun); color: var(--petrol-deep); font-weight: 700; }