/*
    Inter, served from this application rather than from Google - see templates/base.html.twig for
    what was removed and why.

    Inter is under the SIL Open Font License 1.1; the licence travels with the file in
    public/fonts/Inter-LICENSE.txt, as it requires.

    One variable file covers the weights the design uses (400-700), so the five separate weights
    the Google request asked for are a single download. font-display: swap keeps text readable in
    the fallback while it loads; the unicode-range lets the browser skip the download entirely for
    content outside Latin.
*/
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter-latin-variable.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;
}

/* ==========================================================================
   Budget Tool — design system
   Layered on top of Bootstrap 5; keeps Bootstrap's grid/utilities/JS intact
   and restyles surfaces (cards, nav, tables, forms, buttons) with a
   refined, modern palette and type scale.
   ========================================================================== */

:root {
    --bt-primary: #4f46e5;
    --bt-primary-dark: #4338ca;
    --bt-primary-darker: #3730a3;
    --bt-primary-light: #eef2ff;
    --bt-primary-100: #e0e7ff;

    --bt-ink: #0f172a;
    --bt-body: #334155;
    --bt-muted: #606f85;
    /* 2.56:1, and deliberately so: its only use is the scrollbar thumb on
       hover, which carries no text and conveys nothing. Do not reach for it
       for secondary text - the name invites exactly that, and it would be
       almost two stops under the floor. Use --bt-muted (5.11:1). */
    --bt-subtle: #94a3b8;

    --bt-bg: #f6f7fb;
    --bt-surface: #ffffff;
    /* Decoration only - the hairline round a card conveys nothing a sighted
       user needs, so WCAG asks nothing of its 1.22:1. */
    --bt-border: #e6e9f0;
    /* The edge of an input, a select or an outline button. That edge is the
       only thing saying where the control is, so 1.4.11 asks 3:1 of it -
       measured against BOTH grounds, because forms appear on the white surface
       and on the tinted page. #8692b1 was 3.11:1 on white and 2.90:1 on the
       page, so it passed the easy check and failed the real one. */
    --bt-border-strong: #7f8bab;   /* 3.40:1 on surface, 3.17:1 on --bt-bg */

    --bt-sidebar-bg: #0f1424;
    --bt-sidebar-bg-active: #171d33;
    --bt-sidebar-text: #aab0c6;
    --bt-sidebar-text-active: #ffffff;
    --bt-sidebar-border: #1f2540;

    --bt-success: #11813a;
    --bt-success-light: #ecfdf3;
    --bt-warning: #a95d05;
    --bt-warning-light: #fffaeb;
    --bt-danger: #d72323;
    --bt-danger-light: #fef2f2;
    --bt-info: #0276b2;
    --bt-info-light: #f0f9ff;

    --bt-radius-sm: 0.5rem;
    --bt-radius: 0.75rem;
    --bt-radius-lg: 1rem;

    --bt-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --bt-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.04);
    --bt-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10);

    --bt-focus: #4f46e5;
    --bt-focus-on-dark: #ffffff;

    --bs-primary: var(--bt-primary);
    --bs-primary-rgb: 79, 70, 229;
    --bs-link-color: var(--bt-primary);
    --bs-link-color-rgb: 79, 70, 229;
    --bs-link-hover-color: var(--bt-primary-dark);
    --bs-link-hover-color-rgb: 67, 56, 202;

    /*
     * Bootstrap variables that were never redefined, and so were still at
     * Bootstrap's own values. Measured against BOTH grounds, because most of
     * this application's forms and tables sit on the tinted --bt-bg rather
     * than on white, and that is where the defaults fell over:
     *
     *   --bs-danger #DC3545   4.53:1 on white, 4.23:1 on --bt-bg  - FAILED
     *   <code> #D63384        4.50:1 on white, ~4.2:1 on --bt-bg  - borderline
     *
     * Both halves of every -rgb pair, because Bootstrap 5.3 renders anything
     * that can take an opacity from the -rgb form: setting only the named
     * variable leaves .text-danger on Bootstrap's red while looking as though
     * it had been changed.
     */
    --bs-danger: var(--bt-danger);
    --bs-danger-rgb: 215, 35, 35;       /* 5.06:1 surface, 4.72:1 on --bt-bg */
    --bs-success: var(--bt-success);
    --bs-success-rgb: 17, 129, 58;      /* 4.97:1 surface */
    --bs-warning: var(--bt-warning);
    --bs-warning-rgb: 169, 93, 5;       /* 4.94:1 surface */
    --bs-info: var(--bt-info);
    --bs-info-rgb: 2, 118, 178;         /* 4.96:1 surface */

    --bs-body-color: var(--bt-body);
    --bs-body-color-rgb: 51, 65, 85;    /* 10.35:1 surface */
    --bs-body-bg: var(--bt-bg);
    --bs-body-bg-rgb: 246, 247, 251;
    --bs-heading-color: var(--bt-ink);  /* a class beats an h1..h6 selector */
    --bs-secondary-color: var(--bt-muted);  /* .text-muted reads this */
    --bs-border-color: var(--bt-border);
    --bs-focus-ring-color: rgba(79, 70, 229, .25);

    --bs-code-color: #9d1b60;           /* 7.61:1 surface, 7.11:1 on --bt-bg */
}

/*
 * Components Bootstrap compiles to literal hex, so none of them read the
 * variables above and none of them followed the brand.
 */

.nav-pills {
    /* Was #0D6EFD - Bootstrap's blue beside this app's indigo, which reads as
       a bug rather than a choice. White on it is also exactly 4.50:1, AA only
       because Bootstrap tuned it onto the line. */
    --bs-nav-pills-link-active-bg: var(--bt-primary);
    --bs-nav-pills-link-active-color: #ffffff;   /* 6.29:1 on --bt-primary */
    --bs-nav-link-color: var(--bt-body);
    --bs-nav-link-hover-color: var(--bt-primary);
    --bs-nav-pills-border-radius: var(--bt-radius-sm);
}

.btn-outline-secondary {
    /* In 31 templates, and Bootstrap's #6C757D measured 4.69:1 on white but
       4.38:1 on the tinted page these buttons mostly sit on - under the floor
       on the ground that matters. */
    --bs-btn-color: var(--bt-body);              /* 10.35:1 surface */
    --bs-btn-border-color: var(--bt-border-strong);  /* 3.40:1 / 3.17:1 */
    --bs-btn-hover-bg: var(--bt-primary-light);
    --bs-btn-hover-color: var(--bt-primary-darker);
    --bs-btn-hover-border-color: var(--bt-primary);
    --bs-btn-active-bg: var(--bt-primary-light);
    --bs-btn-active-color: var(--bt-primary-darker);
}

.btn-secondary {
    --bs-btn-bg: var(--bt-body);
    --bs-btn-border-color: var(--bt-body);
    --bs-btn-color: #ffffff;                     /* 10.35:1 on --bt-body */
    --bs-btn-hover-bg: var(--bt-ink);
    --bs-btn-hover-border-color: var(--bt-ink);
    --bs-btn-hover-color: #ffffff;
}

.btn-outline-danger {
    --bs-btn-color: var(--bt-danger);            /* 5.06:1 / 4.72:1 */
    --bs-btn-border-color: var(--bt-danger);
    --bs-btn-hover-bg: var(--bt-danger);
    --bs-btn-hover-border-color: var(--bt-danger);
    --bs-btn-hover-color: #ffffff;
}

/* ---- focus -------------------------------------------------------------- */

/* WCAG 2.4.7. Bootstrap sets `outline: 0` on .form-control/.form-select focus
   and relies on a low-alpha box-shadow instead, which measured as fully
   transparent here - so the filter-bar selects had no focus indicator at all.
   The active sidebar item had none either, because its background already
   matched the colour the ring would have used. One explicit outline, on every
   focusable thing, rather than trusting each component's own treatment.

   These carry the same specificity as the Bootstrap rules they override and
   this file loads after Bootstrap, so no !important is needed - but the
   outline must never be removed again without replacing it with something
   equally visible. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.nav-link:focus-visible,
.page-link:focus-visible,
.accordion-button:focus-visible,
.dropdown-item:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--bt-focus);
    outline-offset: 2px;
}

/* On the dark sidebar the indigo ring is nearly invisible, and on the active
   item it is the same colour as the background behind it. */
.app-sidebar a:focus-visible,
.app-sidebar button:focus-visible,
.app-sidebar .nav-link:focus-visible {
    outline-color: var(--bt-focus-on-dark);
}

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

body {
    background: var(--bt-bg);
    color: var(--bt-body);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.9375rem;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--bt-ink);
    font-weight: 650;
    letter-spacing: -0.01em;
}

.h3 { font-size: 1.375rem; }
.h4 { font-size: 1.15rem; }
.h6 { font-size: 0.875rem; }

a { color: var(--bt-primary); }
a:hover { color: var(--bt-primary-dark); }

code {
    background: var(--bt-primary-light);
    color: var(--bt-primary-darker);
    padding: 0.15em 0.4em;
    border-radius: 0.35em;
    font-size: 0.85em;
}

::selection { background: var(--bt-primary-100); }

/* ---- app shell: sidebar + topbar ------------------------------------- */
/*
   Sizing and direction live here rather than in inline styles or Bootstrap
   utility classes, because the narrow-screen rules at the foot of this file
   cannot override either of those.
*/

.app-shell {
    display: flex;
    min-height: 100vh;
}

.app-sidebar {
    width: 248px;
    flex: 0 0 248px;
    display: flex;
    flex-direction: column;
    padding: 1rem 0.75rem;
    background: var(--bt-sidebar-bg);
    border-right: 1px solid var(--bt-sidebar-border);
    color: #fff;
}

.app-sidebar .bt-brand {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.375rem 0.5rem 1rem;
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    text-decoration: none;
}

.app-sidebar .nav-link {
    color: var(--bt-sidebar-text);
    border-radius: var(--bt-radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.55rem 0.75rem;
    margin-bottom: 0.15rem;
    white-space: nowrap;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.app-sidebar .nav-link:hover {
    background: var(--bt-sidebar-bg-active);
    color: #fff;
}

.app-sidebar .nav-link.active {
    background: var(--bt-primary);
    color: #fff !important;
    box-shadow: var(--bt-shadow-sm);
}

.app-sidebar .nav-link i {
    width: 1.1rem;
    text-align: center;
    opacity: 0.9;
}

.app-sidebar__footer {
    margin-top: 1rem;
    padding: 0.75rem 0.5rem 0;
    border-top: 1px solid var(--bt-sidebar-border);
    color: #777f9d;
    font-size: 0.75rem;
}

.app-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-topbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.5rem;
    background: var(--bt-surface);
    border-bottom: 1px solid var(--bt-border);
}

.app-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.5rem;
    background: var(--bt-bg);
}

/* app-body is the flex column, so this is what pushes the footer to the bottom
   of a short page instead of leaving it floating under the content. */
.app-body > .legal-footer {
    background: var(--bt-bg);
}

/* Bootstrap's .offcanvas-lg sets `background-color: transparent !important`
   from lg up, which would strip the sidebar's dark surface on desktop - the
   navigation would silently become whatever is behind it. Overriding an
   !important needs an !important; there is no tidier way, and leaving it out
   is not a subtle bug but an unreadable menu. */
@media (min-width: 992px) {
    .app-sidebar.offcanvas-lg {
        background-color: var(--bt-sidebar-bg) !important;
        border-right: 1px solid var(--bt-sidebar-border);
        visibility: visible;
        transform: none;
    }
}

.app-sidebar__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

/* ---- cards ------------------------------------------------------------ */

.card {
    background: var(--bt-surface);
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius);
    box-shadow: var(--bt-shadow-sm);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--bt-border);
    font-weight: 600;
    color: var(--bt-ink);
    font-size: 0.9rem;
    padding: 0.85rem 1.1rem;
}

.card-body { padding: 1.1rem; }

/* KPI stat cards */
.stat-card .card-body { padding: 1.1rem 1.2rem; }
.stat-card .stat-label {
    color: var(--bt-muted);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.stat-card .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bt-ink);
    letter-spacing: -0.01em;
}
.stat-card .stat-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--bt-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    background: var(--bt-primary-light);
    color: var(--bt-primary);
}

/* ---- buttons ------------------------------------------------------------ */

.btn {
    border-radius: var(--bt-radius-sm);
    font-weight: 550;
    font-size: 0.875rem;
    padding: 0.45rem 0.9rem;
    transition: all 0.12s ease;
}

.btn-primary {
    background: var(--bt-primary);
    border-color: var(--bt-primary);
    box-shadow: 0 1px 2px rgba(79, 70, 229, 0.25);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--bt-primary-dark);
    border-color: var(--bt-primary-dark);
}

.btn-outline-primary {
    color: var(--bt-primary);
    border-color: var(--bt-border-strong);
}
.btn-outline-primary:hover {
    background: var(--bt-primary);
    border-color: var(--bt-primary);
}

.btn-outline-secondary {
    color: var(--bt-body);
    border-color: var(--bt-border-strong);
}
.btn-outline-secondary:hover {
    background: var(--bt-ink);
    border-color: var(--bt-ink);
}

/* Bootstrap's own warning, danger and success are used raw by .btn-outline-*,
   and its warning (#ffc107) measures 1.63:1 on white - unreadable, and a 1.4.3
   failure the moment one of these buttons appears. The --bt-* values were
   derived to clear 4.5:1 on every surface they are used on. */
.btn-outline-warning {
    color: var(--bt-warning);
    border-color: var(--bt-border-strong);
}
.btn-outline-warning:hover {
    background: var(--bt-warning);
    border-color: var(--bt-warning);
    color: #ffffff;
}

.btn-outline-danger {
    color: var(--bt-danger);
    border-color: var(--bt-border-strong);
}
.btn-outline-danger:hover {
    background: var(--bt-danger);
    border-color: var(--bt-danger);
    color: #ffffff;
}

.btn-outline-success {
    color: var(--bt-success);
    border-color: var(--bt-border-strong);
}
.btn-outline-success:hover {
    background: var(--bt-success);
    border-color: var(--bt-success);
    color: #ffffff;
}

.btn-sm { font-size: 0.8125rem; padding: 0.32rem 0.7rem; }

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

.form-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bt-body);
    margin-bottom: 0.3rem;
}

.form-control, .form-select {
    border-color: var(--bt-border-strong);
    border-radius: var(--bt-radius-sm);
    font-size: 0.875rem;
    padding: 0.45rem 0.75rem;
}

.form-control:focus, .form-select:focus {
    border-color: var(--bt-primary);
    box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.15);
}

.form-check-input:checked {
    background-color: var(--bt-primary);
    border-color: var(--bt-primary);
}
.form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.15);
}

/* ---- legal footer ------------------------------------------------------- */

/* Page chrome rather than page content: centred at the foot, below the main
   region, on both shells. The links are separated by spacing rather than a
   middot - a glyph between them is read out and then has to be hidden again -
   and never by a left border, which leaves a stray line on whichever link
   wraps to its own row. */
.legal-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem 1.5rem;
    padding: 1.5rem 1rem 2rem;
    font-size: 0.8125rem;
    color: var(--bt-muted);
}

.legal-footer a {
    color: var(--bt-muted);
    text-decoration: underline;
    /* 2.5.8: a link this small is still a target somebody taps. */
    padding: 0.35rem 0;
}

.legal-footer a:hover,
.legal-footer a:focus-visible {
    color: var(--bt-primary);
}

/* On the auth aside the footer sits on the deep gradient, where the muted grey
   would be unreadable. #C3C8E0 measures 11.05:1 on --bt-sidebar-bg. */
.auth-page__aside-footer {
    flex: 0 0 auto;
}

.auth-page__aside-footer .legal-footer {
    justify-content: flex-start;
    padding: 0;
    color: #c3c8e0;
}

.auth-page__aside-footer .legal-footer a {
    color: #c3c8e0;
}

.auth-page__aside-footer .legal-footer a:hover,
.auth-page__aside-footer .legal-footer a:focus-visible {
    color: #ffffff;
}

.auth-card__footer .legal-footer {
    padding-bottom: 0;
}

/* ---- demo notice --------------------------------------------------------- */

/* Tinted, so it reads as an aside to the form rather than as a second, weaker
   form competing with it - it sits on the plain canvas beside the elevated
   white `.auth-card__box`, not inside it. */
.demo-notice {
    margin-bottom: 1.5rem;
    padding: 0.9rem 1rem;
    background: var(--bt-primary-light);
    border: 1px solid var(--bt-primary-100);
    border-radius: var(--bt-radius-sm);
    font-size: 0.8125rem;
}

.demo-notice__heading {
    margin: 0 0 0.35rem;
    font-weight: 650;
    color: var(--bt-primary);
}

.demo-notice__body {
    margin: 0 0 0.6rem;
    color: var(--bt-body);
    line-height: 1.5;
}

.demo-notice__accounts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.2rem 0.75rem;
    margin: 0 0 0.6rem;
}

.demo-notice__accounts dt {
    font-weight: 600;
    color: var(--bt-body);
    white-space: nowrap;
}

.demo-notice__accounts dd {
    margin: 0;
    min-width: 0;
}

.demo-notice code {
    color: var(--bt-ink);
    background: rgba(255, 255, 255, 0.75);
    padding: 0.05rem 0.3rem;
    border-radius: 0.25rem;
    font-size: 0.95em;
    overflow-wrap: anywhere;
}

/* Each option is a whole clickable row, so the target is the card rather than
   the few words in it - 2.5.8 asks 24px and this clears 44 comfortably. */
.demo-picker {
    display: grid;
    gap: 0.6rem;
}

.demo-picker__option {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.15rem 0.75rem;
    width: 100%;
    text-align: left;
    padding: 0.85rem 1rem;
    background: var(--bt-surface);
    border: 1px solid var(--bt-border-strong);
    border-radius: var(--bt-radius-sm);
    cursor: pointer;
}

.demo-picker__option:hover {
    background: var(--bt-primary-light);
    border-color: var(--bt-primary);
}

.demo-picker__label {
    font-weight: 650;
    color: var(--bt-ink);
}

.demo-picker__description {
    grid-column: 1;
    font-size: 0.8125rem;
    color: var(--bt-muted);
    line-height: 1.45;
}

.demo-picker__arrow {
    grid-row: 1 / span 2;
    grid-column: 2;
    color: var(--bt-primary);
    font-size: 1.1rem;
}

.demo-notice__footnote {
    margin: 0;
    color: var(--bt-muted);
}

/* ---- tables -------------------------------------------------------------- */

/* A .table-responsive only becomes focusable when it actually overflows (see
   base.html.twig), so this ring appears exactly when there is something to
   scroll - and has to be explicit, because a keyboard user needs to see which
   region the arrow keys are about to move. */
.table-responsive:focus-visible,
.doc-body pre:focus-visible {
    outline: 2px solid var(--bt-primary);
    outline-offset: 2px;
    border-radius: var(--bt-radius-sm);
}


.table {
    --bs-table-color: var(--bt-body);
    font-size: 0.875rem;
    margin-bottom: 0;
}

.table thead th {
    background: #fbfbfe;
    color: var(--bt-muted);
    font-size: 0.72rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.045em;
    border-bottom: 1px solid var(--bt-border);
    padding: 0.7rem 0.9rem;
    white-space: nowrap;
}

.table td {
    padding: 0.65rem 0.9rem;
    vertical-align: middle;
    border-bottom-color: var(--bt-border);
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--bt-primary-light);
}

.table > :not(caption) > * > * { box-shadow: none; }

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

.badge { font-weight: 600; font-size: 0.72rem; letter-spacing: 0.01em; padding: 0.4em 0.65em; border-radius: 0.4rem; }

.text-bg-success { background-color: var(--bt-success-light) !important; color: var(--bt-success) !important; }
.text-bg-warning { background-color: var(--bt-warning-light) !important; color: var(--bt-warning) !important; }
.text-bg-danger  { background-color: var(--bt-danger-light) !important;  color: var(--bt-danger) !important; }
.text-bg-info    { background-color: var(--bt-info-light) !important;    color: var(--bt-info) !important; }
.text-bg-primary { background-color: var(--bt-primary-light) !important; color: var(--bt-primary) !important; }
.text-bg-secondary { background-color: #f1f3f9 !important; color: var(--bt-muted) !important; }
.text-bg-light { background-color: #f8fafc !important; color: var(--bt-body) !important; border-color: var(--bt-border) !important; }

.badge.border { border-color: var(--bt-border) !important; }

.text-success { color: var(--bt-success) !important; }
.text-warning { color: var(--bt-warning) !important; }
.text-danger  { color: var(--bt-danger) !important; }
.border-success { border-color: var(--bt-success) !important; }
.border-warning { border-color: var(--bt-warning) !important; }
.border-danger  { border-color: var(--bt-danger) !important; }

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

.alert { border: 1px solid transparent; border-radius: var(--bt-radius-sm); font-size: 0.875rem; }
.alert-success { background: var(--bt-success-light); color: #14532d; border-color: #bbf7d0; }
.alert-danger  { background: var(--bt-danger-light);  color: #7f1d1d; border-color: #fecaca; }
.alert-warning { background: var(--bt-warning-light); color: #78350f; border-color: #fde68a; }
.alert-info    { background: var(--bt-info-light);    color: #0c4a6e; border-color: #bae6fd; }

/* ---- auth pages (login / forgot / reset / 2fa) --------------------------- */
/*
   Split screen: a dark panel carrying the mark and what the product actually
   does, and an elevated card carrying the form. Below lg the panel is removed
   rather than squeezed, and the card gets the mark above it instead.
*/

.auth-page {
    display: flex;
    min-height: 100vh;
}

/* Three regions: mark pinned top, proposition centred in the space left, notice
   links pinned bottom. `justify-content: center` on the whole column instead
   leaves the mark floating beside the heading in the middle of the panel. */
.auth-page__aside {
    display: none;
    /* 1.1:1 against .auth-page__main below, matching the reference
       implementation's `grid-template-columns: 1.1fr 1fr` - flex-grow encodes
       the same ratio when both sides share a 0% basis. */
    flex: 1.1 1 0%;
    flex-direction: column;
    padding: 3rem;
    color: #e7e9f5;
    background:
        radial-gradient(circle at 15% 15%, rgba(99, 102, 241, 0.28), transparent 42%),
        radial-gradient(circle at 85% 85%, rgba(67, 56, 202, 0.30), transparent 48%),
        var(--bt-sidebar-bg);
}

.auth-page__aside-head {
    flex: 0 0 auto;
}

.auth-page__aside-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Stops a long proposition pushing the notice links off the foot of a short
       viewport - the body scrolls rather than the layout breaking. */
    min-height: 0;
    padding: 2rem 0;
}

.auth-page__aside .bt-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #fff;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
}

.auth-page__aside h2 {
    max-width: 20ch;
    color: #fff;
    font-size: 1.9rem;
    line-height: 1.25;
}

.auth-page__points {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    max-width: 44ch;
}

.auth-page__points li {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.1rem;
    font-size: 0.9rem;
    line-height: 1.5;
}

.auth-page__points i {
    flex: 0 0 auto;
    margin-top: 0.15rem;
    color: #a5b4fc;
    font-size: 1.05rem;
}

.auth-page__main {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--bt-bg);
}

/* `.auth-card` is layout only - width and centring - deliberately with no
   background, border or shadow of its own. The heading, the demo notice and
   a page's trailing "back to sign in"/"create one" link all live directly
   inside it, on the plain canvas; only `.auth-card__box`, wrapped around the
   actual form in each page's own template, carries the elevated white-panel
   treatment. A card that styled the whole column made every link inside it
   read as part of the form beneath it - see CLAUDE.md's "Consistent means
   copying the sibling". */
.auth-card {
    width: 100%;
    max-width: 27rem;
}

.auth-card__box {
    background: var(--bt-surface);
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-lg);
    box-shadow: var(--bt-shadow-lg);
    padding: 2rem;
}

.auth-card .bt-brand {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--bt-ink);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: -0.01em;
}

/* A one-time code is read back digit by digit, so it gets room to breathe. */
.auth-code-input {
    font-size: 1.25rem;
    letter-spacing: 0.3em;
}

@media (min-width: 992px) {
    .auth-page__aside {
        display: flex;
    }

    .auth-page__main {
        flex: 1 1 0%;
    }
}

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

.dropdown-menu {
    border-color: var(--bt-border);
    border-radius: var(--bt-radius-sm);
    box-shadow: var(--bt-shadow);
}

.pagination .page-link { color: var(--bt-body); border-color: var(--bt-border-strong); }
.pagination .page-item.active .page-link { background: var(--bt-primary); border-color: var(--bt-primary); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bt-border-strong); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--bt-subtle); }

/* ---- skip link --------------------------------------------------------- */

.skip-link {
    position: absolute;
    top: -3rem;
    left: 0.75rem;
    z-index: 1100;
    padding: 0.5rem 1rem;
    background: var(--bt-primary);
    color: #fff;
    border-radius: 0 0 var(--bt-radius-sm) var(--bt-radius-sm);
    text-decoration: none;
    transition: top 0.15s ease;
}

.skip-link:focus {
    top: 0;
    color: #fff;
}

/* ---- help widget ------------------------------------------------------ */

.help-fab {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 1040;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: none;
    background: var(--bt-primary);
    color: #fff;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--bt-shadow-lg);
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.help-fab:hover { background: var(--bt-primary-dark); }

.help-fab:focus-visible {
    outline: none;
    box-shadow: var(--bt-shadow-lg), 0 0 0 0.25rem rgba(79, 70, 229, 0.35);
}

@media (prefers-reduced-motion: reduce) {
    .help-fab,
    .offcanvas,
    .modal.fade .modal-dialog,
    .collapsing,
    .fade {
        transition: none !important;
    }
}

#helpPanel .accordion-button:not(.collapsed) {
    background: var(--bt-primary-light);
    color: var(--bt-primary-darker);
    box-shadow: none;
}

#helpPanel .accordion-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.15);
}

/* A labelled rule between two ways of signing in. The label sits on the line
   rather than above it, so the two options read as alternatives rather than as
   a sequence. */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.5rem 0;
    color: var(--bt-muted);
    font-size: 0.8125rem;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1 1 auto;
    border-top: 1px solid var(--bt-border);
}

/* ---- settings section nav ---------------------------------------------- */
/*
   Sits inside the settings pages rather than adding a sidebar entry per
   integration - one settings area with sections is what makes SSO, mail and
   whatever comes next feel like parts of the same thing.
*/

.settings-nav {
    border-bottom: 1px solid var(--bt-border);
    padding-bottom: 0.75rem;
}

.settings-nav .nav-link {
    color: var(--bt-body);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.45rem 0.85rem;
    border-radius: var(--bt-radius-sm);
}

.settings-nav .nav-link:hover {
    background: var(--bt-primary-light);
    color: var(--bt-primary-dark);
}

.settings-nav .nav-link.active {
    background: var(--bt-primary);
    color: #fff;
}

/* ---- platform console -------------------------------------------------- */
/*
   Deliberately a different colour from the organisation app. An operator should
   never have to look twice to know whether they are in the platform console or
   inside a customer's data.
*/

.platform-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bt-bg);
}

.platform-topbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    background: var(--bt-sidebar-bg);
    border-bottom: 3px solid var(--bt-primary);
    color: #fff;
}

.platform-brand {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: #fff;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-decoration: none;
}

.platform-brand__tag {
    padding: 0.1rem 0.45rem;
    border-radius: 0.35rem;
    background: var(--bt-primary);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.platform-main {
    flex: 1 1 auto;
    padding: 1.5rem;
}

/* ---- impersonation banner ---------------------------------------------- */
/*
   Fixed, full width and not dismissible, for the whole duration of a support
   session. The app shell is pushed down rather than overlapped, so it can never
   cover a control.
*/

.impersonation-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1.25rem;
    background: var(--bt-warning);
    color: #fff;
    font-size: 0.875rem;
    box-shadow: var(--bt-shadow);
}

.app-shell--impersonating {
    padding-top: 2.75rem;
}

@media (max-width: 575.98px) {
    .impersonation-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .app-shell--impersonating {
        padding-top: 5rem;
    }
}

/* ---- legal / public pages ---------------------------------------------- */
/*
   The one surface somebody sees before they have an account. Centred, narrow,
   and quiet: no navigation, because there is nowhere else for them to go yet.
   Sized in rem so it follows the browser's own text size.
*/

.legal-page {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    padding: 3rem 1rem;
    background: var(--bt-bg);
}

.legal-page__card {
    width: 100%;
    max-width: 48rem;
    background: var(--bt-surface);
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-lg);
    box-shadow: var(--bt-shadow);
    padding: 2.5rem;
}

/* ---- published documentation ------------------------------------------- */

.doc-list {
    display: grid;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.doc-list__item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.2rem 1rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--bt-border-strong);
    border-radius: var(--bt-radius-sm);
    text-decoration: none;
}

.doc-list__item:hover {
    background: var(--bt-primary-light);
    border-color: var(--bt-primary);
}

.doc-list__title {
    font-weight: 650;
    color: var(--bt-ink);
}

.doc-list__audience {
    grid-column: 2;
    grid-row: 1;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bt-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.doc-list__summary {
    grid-column: 1 / -1;
    font-size: 0.8125rem;
    color: var(--bt-muted);
    line-height: 1.5;
}

/* Rendered Markdown. Spacing only - the guides are long, and the default
   stylesheet leaves them as an undifferentiated wall. */
.doc-body { color: var(--bt-body); }
.doc-body h1 { font-size: 1.6rem; margin-bottom: 0.75rem; }
.doc-body h2 { font-size: 1.2rem; margin-top: 2.25rem; margin-bottom: 0.6rem; padding-top: 1.25rem; border-top: 1px solid var(--bt-border); }
.doc-body h3 { font-size: 1rem; margin-top: 1.5rem; margin-bottom: 0.4rem; }
.doc-body h1 + p, .doc-body h2 + p, .doc-body h3 + p { margin-top: 0; }
.doc-body p, .doc-body li { line-height: 1.6; }
.doc-body ul, .doc-body ol { margin-bottom: 1rem; }
.doc-body li + li { margin-top: 0.3rem; }
.doc-body code { background: var(--bt-bg); padding: 0.05rem 0.3rem; border-radius: 0.25rem; color: var(--bt-ink); }
.doc-body pre { background: var(--bt-bg); border: 1px solid var(--bt-border); border-radius: var(--bt-radius-sm); padding: 0.9rem 1rem; overflow-x: auto; }
.doc-body pre code { background: none; padding: 0; }
.doc-body table { width: 100%; margin-bottom: 1.25rem; font-size: 0.875rem; }
.doc-body th, .doc-body td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--bt-border); text-align: left; vertical-align: top; }
.doc-body th { font-weight: 650; color: var(--bt-ink); }
.doc-body blockquote { margin: 0 0 1rem; padding-left: 1rem; border-left: 3px solid var(--bt-primary-100); color: var(--bt-muted); }
.doc-body hr { border: 0; border-top: 1px solid var(--bt-border); margin: 2rem 0; }

.imported-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 1rem;
    font-size: 0.875rem;
}

.imported-facts dt {
    font-weight: 600;
    color: var(--bt-muted);
    white-space: nowrap;
}

.imported-facts dd {
    margin: 0;
    color: var(--bt-ink);
    min-width: 0;
    overflow-wrap: anywhere;
}

.doc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

.api-endpoint {
    margin: 1.25rem 0 2rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--bt-border);
    border-left: 3px solid var(--bt-primary);
    border-radius: var(--bt-radius-sm);
    background: var(--bt-surface);
}

.api-endpoint__line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.api-endpoint__method {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #ffffff;
    background: var(--bt-success);
    padding: 0.15rem 0.45rem;
    border-radius: 0.25rem;
}

.api-endpoint__path {
    font-size: 0.9rem;
    font-weight: 600;
    background: none;
    padding: 0;
}

.api-endpoint__scope {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--bt-primary);
    background: var(--bt-primary-light);
    border: 1px solid var(--bt-primary-100);
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
}

.api-endpoint__summary {
    margin-bottom: 0.35rem;
    font-weight: 600;
    color: var(--bt-ink);
}

.api-endpoint__label {
    margin: 1rem 0 0.3rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--bt-muted);
}

.api-endpoint__required {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bt-danger);
    margin-left: 0.3rem;
}

.error-page__code {
    margin: 0 0 0.25rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bt-muted);
}

.error-page__message {
    margin-top: 0.75rem;
    color: var(--bt-body);
}

.error-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.75rem;
}

.legal-page__card mark {
    background: var(--bt-warning-light);
    color: var(--bt-warning);
    padding: 0.1em 0.3em;
    border-radius: 0.25em;
}

@media (max-width: 575.98px) {
    .legal-page {
        padding: 1rem 0.5rem;
    }

    .legal-page__card {
        padding: 1.5rem;
    }
}

/* ---- narrow screens ---------------------------------------------------- */
/*
   Below lg the sidebar stops being a column beside the content and becomes a
   horizontal strip above it, scrolling sideways if the nav outgrows the
   viewport. Nothing here is a toggle, so there is no state to get stuck in and
   no hover-only path - a tablet has neither.
*/

@media (max-width: 991.98px) {
    /* Below lg the sidebar is Bootstrap's responsive offcanvas, opened from the
       topbar. It replaces a horizontal scrolling strip of every nav item, which
       needed no toggle but hid a dozen links behind a sideways scroll nobody
       finds. Width and colours are set here because the offcanvas ships its own. */
    .app-sidebar.offcanvas-lg {
        width: min(19rem, 82vw);
        background: var(--bt-sidebar-bg);
        border-right: 1px solid var(--bt-sidebar-border);
        padding: 1rem 0.75rem;
    }

    .app-topbar {
        padding: 0.5rem 1rem;
    }

    .app-main {
        padding: 1rem;
    }
}

@media (max-width: 575.98px) {
    .app-main {
        padding: 0.75rem;
    }

    .auth-card__box {
        padding: 1.5rem;
    }

    /* The FAB must not sit on top of the last row of a table on a phone. */
    .help-fab {
        right: 1rem;
        bottom: 1rem;
    }
}