/* =========================================================================
   Burse — "Kontobuch" design system
   A calm, ledger-grade skin layered over Bootstrap 5.

   Three type roles (IBM Plex superfamily):
     · Serif  — page titles, brand        (letterhead voice)
     · Sans   — UI / body                  (the workspace)
     · Mono   — money, IBAN, dates         (the data)

   Palette: ink-navy + warm paper + a single brass accent, with muted
   ledger green / red reserved for monetary signs.
   ========================================================================= */

:root {
    --ink:          #1d2a38;
    --ink-2:        #24333f;
    --ink-soft:     #50606e;

    --paper:        #edefe9;   /* app background — cool-warm ledger paper */
    --surface:      #ffffff;   /* card stock */
    --surface-2:    #f6f7f3;   /* zebra / muted rows */

    --line:         #dcded4;   /* hairline rules */
    --line-strong:  #c4c7ba;

    --brass:        #866a1c;   /* the one accent */
    --brass-soft:   #f3edda;

    --gain:         #1d7a4c;   /* ledger green — money in */
    --loss:         #b23b32;   /* ledger red   — money out */

    --radius:       .5rem;

    --font-sans:  "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
    --font-mono:  "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

    /* Bootstrap runtime hooks we can steer without recompiling SCSS */
    --bs-body-font-family: var(--font-sans);
    --bs-body-color: var(--ink-2);
    --bs-body-bg: var(--paper);
    --bs-border-color: var(--line);
    --bs-link-color: var(--brass);
    --bs-link-hover-color: var(--ink);
    --bs-emphasis-color: var(--ink);
}

/* -------------------------------------------------------------- base ----- */

body {
    min-height: 100vh;
    background-color: var(--paper);
    color: var(--ink-2);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
    font-family: var(--font-serif);
    color: var(--ink);
    letter-spacing: -.01em;
}

/* Tabular figures everywhere numbers congregate — the ledger lining up. */
.table, dl, .card-body dd, .display-5 {
    font-variant-numeric: tabular-nums;
}

a {
    text-underline-offset: .15em;
    text-decoration-color: color-mix(in srgb, var(--brass) 45%, transparent);
}
a:hover { text-decoration-color: currentColor; }

:focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: 2px;
}

/* ------------------------------------------------------------ navbar ----- */
/* Ink letterhead bar with a hairline brass underline. */

.app-navbar {
    background-color: var(--ink);
    border-bottom: 3px solid var(--brass);
    --bs-navbar-color: rgba(255, 255, 255, .68);
    --bs-navbar-hover-color: #fff;
    --bs-navbar-active-color: #fff;
    --bs-navbar-brand-color: #fff;
    --bs-navbar-brand-hover-color: #fff;
}

.app-navbar .navbar-brand {
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: .02em;
}

.app-navbar .nav-link {
    position: relative;
    font-size: .95rem;
}

/* Active section marked by a brass tick under the label, not a fill. */
.app-navbar .nav-link.active::after,
.app-navbar .nav-item.dropdown .nav-link.active::after {
    content: "";
    position: absolute;
    left: var(--bs-nav-link-padding-x, .5rem);
    right: var(--bs-nav-link-padding-x, .5rem);
    bottom: .15rem;
    height: 2px;
    background: var(--brass);
}

.app-navbar .dropdown-menu {
    --bs-dropdown-border-color: var(--line);
    --bs-dropdown-link-active-bg: var(--brass-soft);
    --bs-dropdown-link-active-color: var(--ink);
    border-radius: var(--radius);
    box-shadow: 0 .5rem 1.25rem rgba(29, 42, 56, .14);
}

/* --------------------------------------------------------------- cards --- */
/* Flat paper panels. Hairline border carries the structure; shadows retire. */

.card {
    --bs-card-border-color: var(--line);
    --bs-card-border-radius: var(--radius);
    --bs-card-cap-bg: var(--surface-2);
    background-color: var(--surface);
}

.shadow-sm {
    box-shadow: 0 1px 0 rgba(29, 42, 56, .04) !important;
}

.card .card-body h2,
.card .card-body h3 {
    color: var(--ink);
}

/* Definition lists used across all the show-pages read like a record card. */
.card-body dl.row dt {
    color: var(--ink-soft);
    font-weight: 500;
}
.card-body dl.row dd {
    color: var(--ink-2);
}

/* --------------------------------------------------------------- tables -- */
/* Ledger header: small, tracked, capitalised, sitting on an ink rule. */

.table {
    --bs-table-border-color: var(--line);
    --bs-table-hover-bg: var(--surface-2);
    color: var(--ink-2);
    margin-bottom: 0;
}

.table > thead th {
    font-family: var(--font-sans);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-soft);
    background-color: var(--surface-2);
    border-bottom: 2px solid var(--ink);
    white-space: nowrap;
}

.table > tbody td {
    border-color: var(--line);
    vertical-align: middle;
}

/* The money column: monospaced so euros and cents stack like a real book. */
.amount-positive, .amount-negative,
.table td.text-end .amount-positive,
td.text-end.amount-positive, td.text-end.amount-negative {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
.amount-positive { color: var(--gain); }
.amount-negative { color: var(--loss); }

/* Bootstrap text colours used for amounts in the party ledger partial. */
.text-success { color: var(--gain) !important; }
.text-danger  { color: var(--loss) !important; }
.table td.text-end.text-success,
.table td.text-end.text-danger {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* IBANs and the like, when wrapped in <code>, stay in the data face. */
code { color: var(--ink); }

/* Booking date lies in the future — not yet cleared, so flag it in brass. */
.date-future {
    color: var(--brass);
    font-weight: 600;
}
.badge-future {
    color: var(--brass);
    background: var(--brass-soft);
    border: 1px solid var(--brass);
}

/* -------------------------------------------------------------- buttons -- */
/* Primary = ink (the deliberate action). Outline-secondary = quiet ink. */

.btn {
    --bs-btn-border-radius: .45rem;
    --bs-btn-font-weight: 500;
}

.btn-primary {
    --bs-btn-bg: var(--ink);
    --bs-btn-border-color: var(--ink);
    --bs-btn-hover-bg: var(--ink-2);
    --bs-btn-hover-border-color: var(--ink-2);
    --bs-btn-active-bg: #0f1925;
    --bs-btn-active-border-color: #0f1925;
    --bs-btn-disabled-bg: var(--ink);
    --bs-btn-disabled-border-color: var(--ink);
}

.btn-outline-primary {
    --bs-btn-color: var(--brass);
    --bs-btn-border-color: var(--brass);
    --bs-btn-hover-bg: var(--brass);
    --bs-btn-hover-border-color: var(--brass);
    --bs-btn-active-bg: var(--brass);
    --bs-btn-active-border-color: var(--brass);
    --bs-btn-focus-shadow-rgb: 134, 106, 28;
}

.btn-outline-secondary {
    --bs-btn-color: var(--ink-soft);
    --bs-btn-border-color: var(--line-strong);
    --bs-btn-hover-bg: var(--ink);
    --bs-btn-hover-border-color: var(--ink);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--ink);
    --bs-btn-active-border-color: var(--ink);
}

.btn-link { --bs-btn-color: var(--brass); --bs-btn-hover-color: var(--ink); }

.btn-outline-danger {
    --bs-btn-color: var(--loss);
    --bs-btn-border-color: var(--loss);
    --bs-btn-hover-bg: var(--loss);
    --bs-btn-hover-border-color: var(--loss);
    --bs-btn-active-bg: var(--loss);
}

/* --------------------------------------------------------------- forms --- */

.form-control, .form-select {
    --bs-border-color: var(--line-strong);
    border-radius: .45rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--brass);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brass) 22%, transparent);
}
.form-label { color: var(--ink-soft); font-weight: 500; font-size: .9rem; }
.form-check-input:checked {
    background-color: var(--brass);
    border-color: var(--brass);
}
.form-check-input:focus {
    border-color: var(--brass);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brass) 22%, transparent);
}

/* A filter bar sits in its own thin paper tray so it reads as a control,
   not as content. Targets the get-forms used on every index page. */
main > form.row.g-2,
main > form.row.g-3:not(.align-items-center) {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .75rem .85rem;
    align-items: center;
}

/* -------------------------------------------------------------- badges --- */

.badge { font-weight: 500; letter-spacing: .01em; }
.text-bg-success   { background-color: var(--gain) !important; color: #fff !important; }
.text-bg-danger    { background-color: var(--loss) !important; color: #fff !important; }
.text-bg-warning   { background-color: #b8860b !important; color: #fff !important; }
.text-bg-secondary { background-color: var(--ink-soft) !important; color: #fff !important; }
.text-bg-light     { background-color: var(--surface-2) !important; color: var(--ink-soft) !important; }

/* -------------------------------------------------------------- alerts --- */

.alert { border-radius: var(--radius); border-width: 1px; }

/* ------------------------------------------------------ dashboard tiles -- */
/* Statement tiles: a category-coloured header band names the figure, the
   figure itself fills the body like the running total on a ledger sheet. */

.stat-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    --tile-accent: var(--ink);
}

.stat-band {
    background: var(--tile-accent);
    color: #fff;
    font-family: var(--font-sans);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: .55rem .9rem;
}

.stat-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1.1rem .9rem 1rem;
}

.stat-figure {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 3rem;
    line-height: 1;
    color: var(--ink);
}

.stat-link {
    margin-top: auto;
    padding-top: .9rem;
    color: var(--brass);
}

.tile-members  { --tile-accent: var(--ink); }
.tile-bookings { --tile-accent: var(--gain); }
.stat-tile.is-warn  { --tile-accent: #8a6410; }
.stat-tile.is-alert { --tile-accent: var(--loss); }
.stat-tile.is-alert .stat-figure { color: var(--loss); }

/* --------------------------------------------------- ledger disclosure --- */
/* Two ways to carve up one booking (by payee, by category) sit side by
   side as tabbed panels in a paper ledger — collapsed to a labelled spine
   until opened, so neither reads as the assumed default. */

.ledger-panel {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
}
.ledger-panel + .ledger-panel { margin-top: .75rem; }

.ledger-panel-toggle {
    width: 100%;
    display: flex;
    align-items: baseline;
    gap: .6rem;
    padding: .85rem 1.1rem;
    background: var(--surface-2);
    border: none;
    text-align: left;
    cursor: pointer;
    font: inherit;
}
.ledger-panel-toggle:hover { background: var(--brass-soft); }
.ledger-panel-toggle:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; }

.ledger-panel-title {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    color: var(--ink);
}
.ledger-panel-sub {
    color: var(--ink-soft);
    font-size: .82rem;
    margin-left: .25rem;
}
.ledger-panel-chevron {
    margin-left: auto;
    color: var(--brass);
    font-family: var(--font-mono);
    transition: transform .2s ease;
    flex: none;
}
.ledger-panel-toggle[aria-expanded="true"] .ledger-panel-chevron { transform: rotate(180deg); }

.ledger-panel-body {
    padding: 1.1rem;
    border-top: 1px solid var(--line);
}

/* ------------------------------------------------------- login / brand --- */

.login-card {
    max-width: 400px;
    margin: 10vh auto;
    border-top: 3px solid var(--brass);
}
.login-brand {
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--ink);
}

/* ----------------------------------------------------------- misc tidy --- */

.table-actions { white-space: nowrap; }

.page-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* -------------------------------------------------------------- footer --- */
/* Hairline ledger footer: brass top rule, app mark left, version right. */
.app-footer {
    margin-top: 3rem;
    border-top: 1px solid var(--line);
    background: var(--surface);
}
.app-footer-mark {
    font-family: var(--font-serif);
    color: var(--ink-soft);
    letter-spacing: .02em;
}
.app-footer-link {
    color: var(--brass);
    text-decoration: none;
}
.app-footer-link:hover { color: var(--ink); }
.app-footer-sep { color: var(--line-strong); margin: 0 .4rem; }
.app-footer-version {
    font-family: var(--font-mono);
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- about --- */
.about-hero {
    background: var(--ink);
    color: #fff;
    border-bottom: 3px solid var(--brass);
    border-radius: var(--radius);
    padding: 2.25rem 2rem;
}
.about-hero h1 {
    color: #fff;
    font-family: var(--font-serif);
    margin: 0 0 .35rem;
}
.about-hero .about-tagline {
    color: rgba(255, 255, 255, .82);
    font-size: 1.05rem;
    margin: 0;
}
.about-version-badge {
    display: inline-block;
    margin-top: 1rem;
    padding: .2rem .6rem;
    border: 1px solid var(--brass);
    border-radius: 2rem;
    font-family: var(--font-mono);
    font-size: .85rem;
    color: #fff;
    background: color-mix(in srgb, var(--brass) 35%, transparent);
}
.about-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.25rem 1.4rem;
    height: 100%;
}
.about-card h2 {
    font-size: 1.05rem;
    color: var(--ink);
    margin: 0 0 .5rem;
}
.about-card p:last-child { margin-bottom: 0; }
.about-colophon {
    color: var(--ink-soft);
    font-size: .9rem;
}