/*
 * Bootstrap 5, held to Bootstrap 4's metrics.
 *
 * The app was designed on Bootstrap 4.1 and moved to 5.3 in October 2026
 * (static/vendor/bootstrap-5.3.8/). Bootstrap 5 changed a run of defaults
 * the screens were laid out against: 24px gutters instead of 30, 1rem card
 * and alert padding instead of 1.25rem, .5rem table cells instead of .75rem,
 * <small> at .875em instead of 80%, h1-h4 that shrink with the viewport,
 * underlined links, and a drawn checkbox. This file puts the Bootstrap 4
 * values back, so the swap itself changed no layout. Adopting any of the
 * new defaults is a design decision of its own: delete the rule here and
 * check the screens it touches.
 *
 * It loads between Bootstrap and themes.css, which is where Bootstrap 4's own
 * rules used to sit, so every rule in themes.css still wins at equal weight.
 * The values are Bootstrap's, not the app's, which is why they are literals
 * rather than steps from the scales in themes.css.
 *
 * Colours don't belong here: the --bs-* palette is pointed at the theme
 * tokens in themes.css ("Mappings onto Bootstrap").
 */

:root {
    --bs-border-radius: 0.25rem;
    --bs-border-radius-sm: 0.2rem;
    --bs-border-radius-lg: 0.3rem;
    /* .nav-link reads its padding from these, which Bootstrap 5 defines only
       on .nav and .navbar-nav: a bare .nav-link (Pricing in the public nav,
       Household in the sidebar) got none. Set here, they are the default
       those two still override. */
    --bs-nav-link-padding-y: 0.5rem;
    --bs-nav-link-padding-x: 1rem;
}

/* Links: underlined on hover only, and not at all on the components that
   are links underneath -- buttons, nav links, the brand, list items. */
a { text-decoration: none; }
a:hover { text-decoration: underline; }
a:not([href]):not([tabindex]),
a:not([href]):not([tabindex]):hover,
.btn:hover,
.btn:focus,
.nav-link:hover,
.nav-link:focus,
.navbar-brand:hover,
.navbar-brand:focus,
.list-group-item-action:hover,
.list-group-item-action:focus,
.card-link:hover { text-decoration: none; }

/* Type. */
h1, .h1 { font-size: 2.5rem; }
h2, .h2 { font-size: 2rem; }
h3, .h3 { font-size: 1.75rem; }
h4, .h4 { font-size: 1.5rem; }
small, .small { font-size: 80%; }
label { margin-bottom: 0.5rem; }
.form-check-label { margin-bottom: 0; }

/* Lists keep the browser's 40px indent (Bootstrap 5 sets 2rem), and a rule
   is drawn at full strength (5 fades it to 25%). */
ol, ul { padding-left: 40px; }
hr { opacity: 1; }

/* Grid. This outweighs Bootstrap 5's .g-* gutter utilities, so a row that
   needs another gutter gets a class of its own, as .field-row does. */
.container,
.container-fluid,
.row { --bs-gutter-x: 30px; }

/* Bootstrap 5 widens the container to 1320px from 1400px; 4 stopped at 1140. */
@media (min-width: 1400px) {
    .container { max-width: 1140px; }
}

/* A compact row of form fields: Bootstrap 4's .form-row, which 5 dropped. */
.field-row { --bs-gutter-x: 10px; }

/* A row of inline controls: Bootstrap 4's .form-inline, also dropped.
   Wrapped on a phone; side by side at their own width from 576px. */
.inline-form {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}
@media (min-width: 576px) {
    .inline-form label {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0;
    }
    .inline-form .form-control {
        display: inline-block;
        width: auto;
        vertical-align: middle;
    }
}

.card {
    --bs-card-spacer-y: 1.25rem;
    --bs-card-spacer-x: 1.25rem;
    --bs-card-title-spacer-y: 0.75rem;
    --bs-card-cap-padding-y: 0.75rem;
    --bs-card-cap-padding-x: 1.25rem;
}

.alert {
    --bs-alert-padding-y: 0.75rem;
    --bs-alert-padding-x: 1.25rem;
}

.list-group {
    --bs-list-group-item-padding-y: 0.75rem;
    --bs-list-group-item-padding-x: 1.25rem;
}

.badge {
    --bs-badge-padding-y: 0.25em;
    --bs-badge-padding-x: 0.4em;
    --bs-badge-border-radius: 0.25rem;
}

.navbar { --bs-navbar-padding-x: 1rem; }
/* No fade on a nav link's hover, and no glow on a toggler a mouse clicked
   (Bootstrap 5 added both). */
.nav-link { transition: none; }
.navbar-toggler:focus { box-shadow: none; }
/* Below its expand step, a navbar's container gives up its side padding:
   the navbar's own carries the inset. */
@media (max-width: 767.98px) {
    .navbar-expand-md > .container {
        padding-right: 0;
        padding-left: 0;
    }
}
@media (max-width: 991.98px) {
    .navbar-expand-lg > .container {
        padding-right: 0;
        padding-left: 0;
    }
}

/* Tables: .75rem top-aligned cells (a <tfoot> included -- Bootstrap 5 leaves
   it at the browser's middle), a rule above each row rather than below it,
   2px under the head and between two bodies. */
.table {
    --bs-table-active-bg: rgba(0, 0, 0, 0.075);
    --bs-table-hover-bg: rgba(0, 0, 0, 0.075);
}
.table > :not(caption) > * > * {
    padding: 0.75rem;
    vertical-align: top;
    border-top-width: 1px;
    border-bottom-width: 0;
}
.table-sm > :not(caption) > * > * { padding: 0.3rem; }
/* Bootstrap 4's own selector, for its weight: (0,1,2) is what lets the
   2px head rule beat a one-class-and-element table rule in themes.css. */
.table thead th {
    vertical-align: bottom;
    border-bottom-width: 2px;
}
.table > tbody + tbody { border-top-width: 2px; }

/* Fields: a fixed height, as Bootstrap 4 had, rather than one grown from
   the padding -- a rule that trims a field's padding (.flat-input) must not
   shrink it. Bootstrap 5 also floors a textarea at a line and a half, which
   made every one-line autogrow textarea 6px taller. */
.form-control { height: calc(2.25rem + 2px); }
.form-control-sm { height: calc(1.8125rem + 2px); }
.form-control-lg { height: calc(2.875rem + 2px); }
textarea.form-control,
select.form-control[size],
select.form-control[multiple] { height: auto; }
textarea.form-control,
textarea.form-control-sm,
textarea.form-control-lg { min-height: 0; }
/* Bootstrap 5's .form-control strips a <select>'s native arrow (it expects
   .form-select there). Three selects still carry .form-control -- the
   feedback kind, Ask's model picker, Import's column mapping -- and keep the
   native control they had. */
select.form-control {
    appearance: auto;
    -webkit-appearance: auto;
}
.input-group-sm > .form-control,
.input-group-sm > .input-group-text { height: calc(1.8125rem + 2px); }
.input-group-lg > .form-control,
.input-group-lg > .input-group-text { height: calc(2.875rem + 2px); }

/* A button's label stays on one line. */
.btn { white-space: nowrap; }

/* Selects: Bootstrap 4's .custom-select and .custom-select-sm. */
.form-select {
    height: calc(2.25rem + 2px);
    display: inline-block;
    vertical-align: middle;
    padding-right: 1.75rem;
}
.form-select[multiple],
.form-select[size]:not([size="1"]) { height: auto; }
.form-select-sm {
    height: calc(1.8125rem + 2px);
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    padding-left: 0.75rem;
    font-size: 75%;
}

/* Checkboxes. Bootstrap 5 replaces the native box with a drawn one whose
   tick is a data: image, which img-src 'self' blocks -- a ticked box would
   show as a filled square with no tick. So the native control stays, hung
   in the label's left padding the way Bootstrap 4 did it (planning/forms.py
   relies on that). */
.form-check {
    position: relative;
    min-height: 0;
    margin-bottom: 0;
    padding-left: 1.25rem;
}
.form-check-input,
.form-check .form-check-input {
    position: absolute;
    float: none;
    margin-top: 0.3rem;
    margin-left: -1.25rem;
}
.form-check-input {
    appearance: auto;
    -webkit-appearance: auto;
    width: auto;
    height: auto;
    background-image: none;
    border: 0;
}
.form-check-input:focus { box-shadow: none; }