/* Palette — see AGENTS.md: use these custom properties, no hard-coded hex elsewhere */
:root {
    --color-main: #005f66;
    --color-dark: #0b3a42;
    --color-accent: #123d5a;
    --color-bg: #e6e1d6;
    --color-highlight: #c58b5a;

    --color-white: #ffffff;
    --color-text: #1e2a2c;
    --color-muted: #5d6b6d;
    --color-danger: #a33a2a;

    /* Source badge tints (derived from the palette) */
    --color-source-teal-light: #4d9298;
    --color-source-blue-light: #3d6a8a;
    --color-source-sand: #d8c9b3;
    --color-source-green: #4a7a5e;
    --color-source-plum: #6d4a63;

    /* Direction select option backgrounds (SB open form) */
    --color-long-bg: #dcebe0;
    --color-short-bg: #f5e0dc;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
}

/* ---------- Layout shell ---------- */
.shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 240px;
    flex-shrink: 0;
    background: var(--color-dark);
    color: var(--color-bg);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
}

.sidebar-brand {
    padding: 1rem;
    background: var(--color-main);
    text-align: center;
}
.sidebar-brand img {
    width: 130px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.sidebar-nav { display: flex; flex-direction: column; padding: 0.5rem 0; flex: 1; }
.sidebar-nav a {
    color: var(--color-bg);
    text-decoration: none;
    padding: 0.65rem 1rem;
}
.sidebar-nav a:hover { background: var(--color-main); color: var(--color-white); }
.sidebar-nav .nav-section-title {
    color: rgba(230, 225, 214, 0.55);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.9rem 1rem 0.25rem;
}
.sidebar-nav .nav-disabled {
    color: rgba(230, 225, 214, 0.4);
    padding: 0.65rem 1rem;
    cursor: default;
}

/* ---------- Sidebar footer: admin accordion + user block ---------- */
.sidebar-footer {
    border-top: 1px solid rgba(230, 225, 214, 0.25);
    padding: 0.75rem 1rem 1rem;
}

.sidebar-admin { margin-bottom: 0.75rem; }

.sidebar-admin-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    color: var(--color-highlight);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0;
    cursor: pointer;
}

.sidebar-admin-chevron { transition: transform 0.15s ease; }
.sidebar-admin.open .sidebar-admin-chevron { transform: rotate(90deg); }

.sidebar-admin-links { display: none; flex-direction: column; padding: 0.25rem 0; }
.sidebar-admin.open .sidebar-admin-links { display: flex; }
.sidebar-admin-links a {
    color: var(--color-bg);
    text-decoration: none;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 0.9rem;
}
.sidebar-admin-links a:hover { background: var(--color-main); color: var(--color-white); }

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(230, 225, 214, 0.15);
    color: var(--color-white);
}
.sidebar-user-icon { width: 26px; height: 26px; flex-shrink: 0; }
.sidebar-user-name { font-size: 0.95rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }

.sidebar-user-actions { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.6rem; padding-left: 2.1rem; }
.sidebar-user-actions form { margin: 0; }

.sidebar-user-btn {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: 4px;
    padding: 0.4rem 0.6rem;
    color: var(--color-bg);
    font-size: 0.8rem;
    cursor: pointer;
    text-decoration: none;
    opacity: 0.9;
}
.sidebar-user-btn:hover {
    background: var(--color-main);
    color: var(--color-white);
    opacity: 1;
}

.sidebar-last-login {
    margin-top: 0.6rem;
    padding-left: 2.1rem;
    font-size: 0.7rem;
    color: var(--color-bg);
    opacity: 0.6;
}

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
    display: none; /* desktop: only shown on mobile for the menu toggle */
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1.25rem;
    background: var(--color-white);
    border-bottom: 1px solid rgba(11, 58, 66, 0.15);
}

.nav-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.4rem;
    color: var(--color-main);
    cursor: pointer;
}

.content { padding: 1.5rem; width: 100%; }

/* ---------- Auth screens ---------- */
.auth-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.auth-card {
    background: var(--color-main);
    border-top: 4px solid var(--color-highlight);
    border-radius: 6px;
    box-shadow: 0 4px 18px rgba(11, 58, 66, 0.18);
    padding: 2rem;
    width: 100%;
    max-width: 420px;
    color: var(--color-white);
}

.auth-card h2 { color: var(--color-white); }
.auth-card .muted { color: rgba(255, 255, 255, 0.75); }
.auth-card .form-group label { color: var(--color-white); }
.auth-card .btn-primary { background: var(--color-highlight); }
.auth-card .btn-primary:hover:not(:disabled) { background: var(--color-dark); }
.auth-card .flash-success { background: var(--color-accent); }

.auth-brand {
    margin: 0 0 1rem;
    color: var(--color-main);
    font-size: 1.4rem;
}

.auth-logo {
    width: 110px;
    height: auto;
    display: block;
    margin: 0 auto 1.25rem;
}

.auth-center { text-align: center; }

/* ---------- Cards, tables, forms ---------- */
.card {
    background: var(--color-white);
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(11, 58, 66, 0.12);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}
/* A leading/trailing child's own margin (e.g. a muted intro paragraph's
   default 1em) otherwise reads as a blank "header"/footer band in the card */
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

/* Clickable card linking to another page (e.g. Tax Reports landing) */
.report-card {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
}

.report-card:hover {
    background: rgba(0, 95, 102, 0.06);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}
.card-header h3 { margin: 0; }
.card-header-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }

/* Collapsible card (native <details>): summary line acts as the card title */
.card-toggle summary {
    position: relative;
    list-style: none;
    cursor: pointer;
    font-size: 1.17em;
    font-weight: bold;
    color: var(--color-accent);
    padding-right: 2rem;
}
.card-toggle summary::-webkit-details-marker { display: none; }
.card-toggle summary::after {
    content: '▾';
    position: absolute;
    right: 0.25rem;
    color: var(--color-muted);
    transition: transform 0.15s ease;
}
.card-toggle[open] summary::after { transform: rotate(180deg); }
.card-toggle[open] summary { margin-bottom: 1rem; }

/* Collapsible cards whose summary also carries header actions (e.g. the Tax
   Returns document cards): title left, buttons right; the summary's 2rem
   right padding keeps the buttons clear of the toggle arrow. Clicking a
   button must preventDefault() so it doesn't also toggle the card. */
.card-toggle summary.card-toggle-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
/* Buttons inside the bold summary inherit its weight — keep them normal */
.card-toggle summary .btn { font-weight: normal; }

/* Divider between the % picker groups in the SB calculator card */
.calc-divider {
    border: none;
    border-top: 1px solid rgba(11, 58, 66, 0.15);
    margin: 0 0 1rem;
}

/* Annual export grid (Tax Reports index): report rows with download buttons */
.export-grid {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}
.export-grid td {
    padding: 0.4rem 0.5rem 0.4rem 0;
    border-bottom: 1px solid rgba(11, 58, 66, 0.15);
    vertical-align: middle;
}
.export-grid tr:last-child td { border-bottom: none; }
.export-grid-actions {
    text-align: right;
    white-space: nowrap;
}
.export-grid-actions .btn + .btn { margin-left: 0.4rem; }
.export-grid-section td {
    padding-top: 1rem;
    border-bottom: 2px solid var(--color-main);
    font-weight: 700;
    color: var(--color-main);
}
.export-grid tr:first-child.export-grid-section td { padding-top: 0.4rem; }

/* % picker groups: stacked on mobile, label-left/buttons-right on desktop */
.calc-picker-row > p { margin: 0 0 0.35rem; }
.calc-picker-row > .btn-row { margin-bottom: 1rem; }
@media (min-width: 769px) {
    .calc-picker-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1rem;
    }
    .calc-picker-row > p { margin: 0; }
    .calc-picker-row > .btn-row { margin-bottom: 0; justify-content: flex-end; flex-wrap: nowrap; }
}

.table { width: 100%; border-collapse: collapse; }
.table th, .table td {
    text-align: left;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid rgba(11, 58, 66, 0.12);
}
.table th { color: var(--color-accent); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; }
.table-actions { white-space: nowrap; text-align: right; }
/* Inside .table, the td left-align above outranks .table-actions on
   specificity — re-assert right alignment so action buttons sit flush
   against the table's right edge instead of leaving a blank margin */
.table td.table-actions { text-align: right; }

/* Overview page: Investments Total (Portfolios + SB) is semi-bold against the
   fully bold Combined total, with a light divider before the savings columns */
.table .investments-total { border-right: 1px solid rgba(11, 58, 66, 0.2); }
.table td.investments-total { font-weight: 600; }

/* Cron logs: job code, status badge and the two timestamps keep their natural
   one-line width; the message column takes the remaining space and wraps over
   as many lines as it needs (long unbreakable tokens such as URLs or exception
   text break anywhere so they can't force the table wider than the card) */
.cron-logs-table td:nth-child(1),
.cron-logs-table td:nth-child(2),
.cron-logs-table td:nth-child(4),
.cron-logs-table td:nth-child(5) { white-space: nowrap; }
.cron-logs-table td:nth-child(3) { overflow-wrap: anywhere; }

/* Dividend report: subtotal/grand-total rows — one cell per column so the
   sum always lands in the Amount column, however many columns are hidden */
.total-row td { border-top: 2px solid var(--color-main); }
.total-row .total-label { text-align: right; }

/* Dividend report: bulk-change mode — checkbox column and bulk bar stay
   hidden until toggled on */
.col-bulk { display: none; }
.bulk-bar { display: none; }
.bulk-mode .col-bulk { display: table-cell; }
.bulk-mode .bulk-bar { display: flex; }

/* Bordered checkbox row (modal forms) — the compound selectors outrank
   .form-group label / .form-group input, which would otherwise force
   block display and a full-width bordered checkbox. */
.form-group label.form-check {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid rgba(11, 58, 66, 0.25);
    border-radius: 6px;
    cursor: pointer;
    font-weight: normal;
    font-size: 0.95rem;
    margin-bottom: 0;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.form-group label.form-check:hover { background: rgba(0, 95, 102, 0.05); border-color: var(--color-main); }
.form-group label.form-check + label.form-check { margin-top: 0.4rem; }
.form-group label.form-check input[type="checkbox"],
.form-group label.form-check input[type="radio"] {
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    padding: 0;
    flex: none;
    margin: 0;
    accent-color: var(--color-main);
}
.form-group label.form-check:has(input:disabled) { opacity: 0.55; cursor: default; }
.form-group label.form-check:has(input:disabled):hover { background: none; border-color: rgba(11, 58, 66, 0.25); }

/* Notes sub-row sits directly under its entry row, no divider between them */
.table tbody tr.has-notes > td { border-bottom: none; }
/* ...and the entry/sub-row pair highlight together on hover (same wash as
   the plain row hover below) */
.table tbody tr.has-notes:hover + tr.notes-row > td,
.table tbody tr.has-notes:has(+ tr.notes-row:hover) > td { background: rgba(0, 95, 102, 0.06); }

.table-compact th, .table-compact td { padding: 0.3rem 0.5rem; font-size: 0.88rem; }

.form-group { margin-bottom: 1rem; }
.form-group-narrow { max-width: 360px; }

.form-subgroup {
    border: 1px solid rgba(11, 58, 66, 0.2);
    border-radius: 4px;
    padding: 1rem;
    margin-bottom: 1rem;
}
.form-subgroup legend {
    padding: 0 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-accent);
}

.cash-balance { font-size: 1.4rem; font-weight: 600; color: var(--color-main); margin: 0; }

/* ---------- Stat cards (portfolio summary) ---------- */
.stat-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}
.stat-cards .card { margin-bottom: 0; transition: background-color 0.15s ease; }
.stat-cards .card:hover { background: rgba(0, 95, 102, 0.05); }
/* display:grid above beats the UA [hidden] rule — restate it so results can
   stay hidden until calculated */
.stat-cards[hidden] { display: none; }
.stat-cards-2 { grid-template-columns: repeat(2, 1fr); }
.stat-cards-4 { grid-template-columns: repeat(4, 1fr); }
.stat-cards-5 { grid-template-columns: repeat(5, 1fr); }
.stat-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
    margin-bottom: 0.4rem;
}
.stat-value { font-size: 1.5rem; font-weight: 700; color: var(--color-main); }
.stat-card-total { border-top: 3px solid var(--color-main); }
.stat-card-total .stat-value { color: var(--color-dark); }

/* ---------- Modal ---------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(11, 58, 66, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
}
.modal-overlay[hidden] { display: none; }

.modal {
    background: var(--color-white);
    border-radius: 6px;
    border-top: 4px solid var(--color-main);
    box-shadow: 0 8px 30px rgba(11, 58, 66, 0.3);
    padding: 1.5rem;
    max-width: 400px;
    width: calc(100% - 2rem);
}
.modal-message { margin-top: 0; }

.amount-pos { color: var(--color-main); font-weight: 600; }
.amount-neg { color: var(--color-danger); font-weight: 600; }
.amount-long { color: var(--color-accent); font-weight: 600; }
/* Open option legs past their expiry date */
.row-expired td { background: color-mix(in srgb, var(--color-danger) 10%, transparent); }
/* Days-to-expiry cell under 3 days: very light red wash behind the dark red number */
.days-warning { background: color-mix(in srgb, var(--color-danger) 6%, transparent); }
/* Moneyness cell when in the money: very light green wash */
.itm-cell { background: color-mix(in srgb, var(--color-main) 6%, transparent); }
/* Moneyness cell contents: badge pinned left, % pinned right */
.moneyness-split { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
/* Option strategy grouping: header row + boxed legs */
.strategy-head td {
    font-weight: 600;
    background: color-mix(in srgb, var(--color-main) 8%, transparent);
    /* collapsed border (not outline) so it shares the exact grid lines of the
       leg rows' left/right borders below */
    border: 1.5px solid var(--color-main);
}
.strategy-leg td:first-child { border-left: 1.5px solid var(--color-main); }
.strategy-leg td:last-child { border-right: 1.5px solid var(--color-main); }
.strategy-leg-last td { border-bottom: 1.5px solid var(--color-main); }
/* Chrome swallows a first-row border-top across a tbody boundary in collapsed
   tables, so the strategy header's top edge is drawn as the bottom border of
   the row above it — same grid line, same colour, and it always renders. */
#positions-table thead:has(+ tbody.strategy-group) th,
#positions-table tbody:has(+ tbody.strategy-group) > tr:last-child td {
    border-bottom: 1.5px solid var(--color-main);
}
.table .col-num { text-align: right; }
.table .col-center { text-align: center; }

.table-totals td { border-top: 2px solid var(--color-dark); }

.holding-row, .run-row { cursor: pointer; }
.table tbody tr:hover > td { background: rgba(0, 95, 102, 0.06); }
/* The expanded detail cell keeps its own background on hover */
.table tbody tr.holding-detail:hover > td { background: var(--color-bg); }

/* Direct-child selector: must not leak into the nested history table's cells */
.holding-detail > td {
    background: var(--color-bg);
    border-left: 3px solid var(--color-main);
    padding: 0.75rem 1rem;
}

.table-sub-wrap {
    background: var(--color-white);
    border: 1px solid rgba(11, 58, 66, 0.2);
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(11, 58, 66, 0.1);
    overflow-x: auto;
    max-width: 100%;
}
/* Stacked per-account sub-tables inside one card (position-history pages:
   SB open runs, portfolio current holdings) get space between them. */
.card > .table-sub-wrap + .table-sub-wrap { margin-top: 1rem; }
.table-sub { margin: 0; }
.table-sub th {
    background: rgba(11, 58, 66, 0.07);
    font-size: 0.75rem;
    padding: 0.35rem 0.5rem;
}
.table-sub tbody tr:nth-child(even) td { background: rgba(11, 58, 66, 0.03); }
.table-sub tr:last-child td { border-bottom: none; }
.table-sub .table-totals td { background: rgba(0, 95, 102, 0.05); }
/* Section snapshot sub-tables: the Total (GBP) row belongs to the currency
   rows above it — the normal thin row line separates them, and the bold
   line moves to the bottom of the total row, closing the snapshot group. */
.table-sub tr.table-totals.snapshot-total td {
    border-top: none;
    border-bottom: 2px solid var(--color-dark);
}
/* Same specificity as the striping above but later, so hovered rows highlight
   on even rows too (the striping otherwise wins by source order). */
.table-sub tbody tr:hover > td { background: rgba(0, 95, 102, 0.06); }
/* Run tables are themselves .table-sub: their striping would win over the
   detail cell's own background on even rows — restate it later to prevail. */
.table-sub tbody tr.holding-detail > td { background: var(--color-bg); }
.sub-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem 1.5rem;
    flex-wrap: wrap;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(11, 58, 66, 0.12);
}
.sub-head-title { display: flex; align-items: center; gap: 0.5rem; }
.sub-head-title strong { color: var(--color-dark); }
.sub-head-stats { display: flex; gap: 1.5rem; align-items: center; }
.sub-head-stat { text-align: right; }
.sub-head-stat-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
}
.sub-head-stat-value { font-weight: 700; color: var(--color-main); }
.form-group label { display: block; margin-bottom: 0.3rem; font-weight: 600; font-size: 0.9rem; }
.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: 0.55rem 0.65rem;
    border: 1px solid rgba(11, 58, 66, 0.3);
    border-radius: 4px;
    font: inherit;
    font-size: 1rem;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: 2px solid var(--color-main);
    outline-offset: 1px;
}

/* Filter input with an in-field clear (×) button (SB positions / holdings) */
.filter-wrap { position: relative; }
.filter-wrap input { padding-right: 1.75rem; }
.filter-wrap button {
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0 0.3rem;
    line-height: 1;
    font-size: 1.15rem;
    color: var(--color-muted);
    cursor: pointer;
}
.filter-wrap button:hover { color: var(--color-dark); }

/* Safety net: bare checkboxes/radios must not inherit the full-width text
   input styling above — pin them to a fixed size and lay wrapping labels out
   as rows. For user-facing options prefer .form-check (bordered rows) or
   .checkbox-grid (two-column grid) below. */
.form-group input[type="checkbox"], .form-group input[type="radio"] {
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    padding: 0;
    margin: 0;
    flex: none;
    accent-color: var(--color-main);
}
.form-group label:not(.form-check):has(> input[type="checkbox"]),
.form-group label:not(.form-check):has(> input[type="radio"]) {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: normal;
}

/* Same vertical rhythm as standalone .form-group — without it consecutive
   rows touch while standalone groups have a 1rem gap */
.form-row { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1rem; }
.form-row .form-group { flex: 1; min-width: 180px; margin-bottom: 0; }
/* Rows with muted help text under some inputs: top-align so the inputs
   themselves line up and the help text hangs below */
.form-row.align-start { align-items: flex-start; }
/* Rows inside a bordered sub-group would double the box's bottom padding */
.form-subgroup .form-row { margin-bottom: 0; }
.form-group-actions { flex: 0 0 auto; }

/* Date fields: visible DD/MM/YY text input + hidden native picker (app.js).
   The picker trigger sits inside the input on the right, greyed out. */
.date-field { position: relative; }
.date-field input.date-display { padding-right: 2rem; }
.date-field .date-picker-btn {
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0 0.3rem;
    line-height: 1;
    color: var(--color-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}
.date-field .date-picker-btn:hover { color: var(--color-dark); }
.date-field .date-picker-btn svg { width: 1.1rem; height: 1.1rem; }
.date-field input.date-native {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 1px;
    height: 1px;
    min-width: 0;
    padding: 0;
    border: none;
    opacity: 0;
    pointer-events: none;
}

/* Security finder widget (search-as-you-type security picker) */
.security-finder { position: relative; }
.security-results {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--color-white);
    border: 1px solid rgba(11, 58, 66, 0.25);
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(11, 58, 66, 0.2);
    z-index: 30;
    max-height: 16rem;
    overflow-y: auto;
}
.security-results li {
    padding: 0.55rem 0.9rem;
    font-size: 0.9rem;
    cursor: pointer;
}
.security-results li:hover, .security-results li.active { background: var(--color-main); color: var(--color-white); }
.security-results li.security-add-new {
    border-top: 1px solid rgba(11, 58, 66, 0.15);
    font-weight: 600;
    color: var(--color-accent);
}
.security-results li.security-add-new:hover, .security-results li.security-add-new.active { background: var(--color-main); color: var(--color-white); }

/* Rest of the form locked until a security is chosen */
.form-rest { border: none; padding: 0; margin: 0; min-width: 0; }
.form-rest:disabled { opacity: 0.55; }

/* Direction select option backgrounds (SB open form) */
select.direction-select option[value="long"] { background: var(--color-long-bg); }
select.direction-select option[value="short"] { background: var(--color-short-bg); }

/* Checkbox option grids (e.g. the report export column picker) */
.form-group.checkbox-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1.5rem; }
.checkbox-grid label { display: flex; align-items: center; gap: 0.5rem; font-weight: normal; margin-bottom: 0; white-space: nowrap; }
/* .form-group input above forces width:100%/padding on every input — pin
   checkboxes back to a fixed size (classes are on the same element, so no
   descendant combinator here). */
.form-group.checkbox-grid input[type="checkbox"],
.form-group.checkbox-grid input[type="radio"] {
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    padding: 0;
    flex: none;
    margin: 0;
    accent-color: var(--color-main);
}

/* Tax report filter bar (account multi-select + date range within the year).
   Checkbox sizing/labels inside .form-group are already handled above. */
.filter-bar { display: flex; align-items: flex-end; gap: 0.75rem 1rem; flex-wrap: wrap; }
.filter-bar .form-group { flex: 0 0 auto; }
.filter-bar select { width: auto; min-width: 7rem; }
.filter-bar .date-field { width: 7.5rem; }
.filter-dropdown { position: relative; }
.filter-dropdown summary {
    position: relative;
    list-style: none;
    cursor: pointer;
    padding: 0.55rem 2rem 0.55rem 0.65rem;
    border: 1px solid rgba(11, 58, 66, 0.3);
    border-radius: 4px;
    background: var(--color-white);
    white-space: nowrap;
}
.filter-dropdown summary::-webkit-details-marker { display: none; }
.filter-dropdown summary::after {
    content: '▾';
    position: absolute;
    right: 0.65rem;
    color: var(--color-muted);
}
.filter-dropdown .checkbox-grid {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    z-index: 30;
    display: grid;
    gap: 0.45rem 1rem;
    min-width: 22rem;
    max-height: 16rem;
    overflow-y: auto;
    padding: 0.6rem 0.75rem;
    background: var(--color-white);
    border: 1px solid rgba(11, 58, 66, 0.25);
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(11, 58, 66, 0.2);
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    padding: 0.55rem 1.1rem;
    border: none;
    border-radius: 4px;
    font: inherit;
    font-size: 0.95rem;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
}
.btn:disabled { opacity: 0.6; cursor: default; }

.btn-primary { background: var(--color-main); color: var(--color-white); }
.btn-primary:hover:not(:disabled) { background: var(--color-accent); }

.btn-secondary { background: var(--color-highlight); color: var(--color-white); }
.btn-secondary:hover:not(:disabled) { background: var(--color-accent); }

.btn-row { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
.card form .btn-row { margin-top: 1rem; }

.btn-small { padding: 0.3rem 0.7rem; font-size: 0.85rem; background: var(--color-accent); color: var(--color-white); }
.btn-small:hover:not(:disabled) { background: var(--color-main); }
.btn-small.btn-secondary { background: var(--color-highlight); color: var(--color-white); }
.btn-small.btn-secondary:hover:not(:disabled) { background: var(--color-accent); }
.btn-danger { background: var(--color-danger); color: var(--color-white); }
.btn-danger:hover:not(:disabled) { background: var(--color-dark); }

.btn-link { background: none; color: var(--color-main); padding: 0; text-decoration: underline; }

/* ---------- Badges & flash ---------- */
.badge { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.8rem; }
.badge-active { background: var(--color-main); color: var(--color-white); }
.badge-inactive { background: var(--color-muted); color: var(--color-white); }
.badge-pending { background: var(--color-highlight); color: var(--color-white); }
.badge-danger { background: var(--color-danger); color: var(--color-white); }
.badge-long { background: var(--color-accent); color: var(--color-white); }

.badge-sm { padding: 0.05rem 0.4rem; font-size: 0.7rem; }
/* Badges used as links (e.g. the Position History shortcut) */
a.badge { text-decoration: none; }
a.badge:hover { opacity: 0.85; }
.badge-source-main { background: var(--color-main); color: var(--color-white); }
.badge-source-dark { background: var(--color-dark); color: var(--color-white); }
.badge-source-accent { background: var(--color-accent); color: var(--color-white); }
.badge-source-highlight { background: var(--color-highlight); color: var(--color-white); }
.badge-source-teal-light { background: var(--color-source-teal-light); color: var(--color-white); }
.badge-source-blue-light { background: var(--color-source-blue-light); color: var(--color-white); }
.badge-source-sand { background: var(--color-source-sand); color: var(--color-dark); }
.badge-source-muted { background: var(--color-muted); color: var(--color-white); }
.badge-source-green { background: var(--color-source-green); color: var(--color-white); }
.badge-source-plum { background: var(--color-source-plum); color: var(--color-white); }

/* Extended-hours (pre/post market) prices: shown by default when available,
   with a Pre/Post badge; the table toggle adds .rth-only to show RTH prices. */
.badge-ext { background: var(--color-highlight); color: var(--color-white); }
.price-rth { display: none; }
.rth-only .price-ext { display: none; }
.rth-only .price-rth { display: revert; }

/* Swatch-card picker: clickable colour/source cards with a radio dot inside */
.swatch-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.swatch { position: relative; }
.swatch input { position: absolute; opacity: 0; pointer-events: none; }
.swatch-card {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.45rem 0.85rem; border-radius: 6px; font-size: 0.8rem;
    cursor: pointer; border: 2px solid transparent;
}
.swatch-card-plain { background: var(--color-white); color: var(--color-text); border-color: var(--color-source-sand); }
.swatch-dot {
    width: 0.7rem; height: 0.7rem; border-radius: 50%;
    border: 2px solid currentColor; flex-shrink: 0;
}
.swatch input:checked + .swatch-card {
    border-color: var(--color-white);
    box-shadow: 0 0 0 2px var(--color-dark);
}
.swatch input:checked + .swatch-card-plain { border-color: var(--color-dark); box-shadow: none; }
.swatch input:checked + .swatch-card .swatch-dot { background: currentColor; }
.swatch input:focus-visible + .swatch-card { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Pill-style radio groups (e.g. taxable / access pickers on savings forms) */
.radio-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.radio-pill { position: relative; }
.radio-pill input { position: absolute; opacity: 0; pointer-events: none; }
.radio-pill span {
    display: inline-block; padding: 0.45rem 0.95rem; border-radius: 999px;
    font-size: 0.85rem; font-weight: 600; cursor: pointer;
    background: var(--color-white); color: var(--color-text);
    border: 1px solid var(--color-source-sand);
}
.radio-pill input:checked + span {
    background: var(--color-main); color: var(--color-white);
    border-color: var(--color-main);
}
.radio-pill input:focus-visible + span { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Modal dialogs (native <dialog>) */
dialog.modal {
    border: none; border-radius: 8px; padding: 1.25rem 1.5rem;
    width: calc(100% - 2rem); max-width: 430px;
    background: var(--color-white); color: var(--color-text);
    box-shadow: 0 8px 30px rgba(11, 58, 66, 0.3);
}
dialog.modal::backdrop { background: rgba(11, 58, 66, 0.45); }
dialog.modal h3 { margin-bottom: 1rem; }
dialog.modal .btn-row { margin-top: 1rem; }

/* Wider variant for richer modals (e.g. bullion document linking) */
dialog.modal.modal-wide { max-width: 640px; }

/* Tax-returns allowances help modal: dividing line between sections */
#allowances-help-modal h4 {
    border-top: 1px solid rgba(11, 58, 66, 0.15);
    padding-top: 0.9rem;
    margin-top: 1.1rem;
}
#allowances-help-modal h4:first-of-type { border-top: none; padding-top: 0; }

/* Bullion docs modal: sectioned layout */
.docs-section { padding: 0.9rem 0; border-top: 1px solid rgba(11, 58, 66, 0.15); }
.docs-section:first-of-type { border-top: none; padding-top: 0; }
.docs-section-title {
    margin: 0 0 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
}
.docs-linked-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid rgba(11, 58, 66, 0.2);
    border-radius: 6px;
    margin-bottom: 0.4rem;
}
.docs-linked-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.docs-inline { display: flex; gap: 0.5rem; align-items: center; }
.docs-inline select { flex: 1; min-width: 0; }

/* Note box (informational footers, e.g. savings page) */
.note-box {
    background: color-mix(in srgb, var(--color-highlight) 15%, var(--color-white));
    border-left: 4px solid var(--color-highlight);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 4px rgba(11, 58, 66, 0.12);
    color: var(--color-muted);
    font-size: 0.9rem;
}
.note-box strong { color: var(--color-dark); }

/* Urgent variant: warnings the user must not miss (e.g. the non-GBP
   withdrawal notice) */
.note-box-urgent {
    background: rgba(163, 58, 42, 0.08);
    border-left-color: var(--color-danger);
    color: var(--color-text);
}
.note-box-urgent strong { color: var(--color-danger); }

/* Info variant: notes that should stand out more than the plain white box
   (e.g. the Tax Info Export checklist) */
.note-box-info {
    background: rgba(0, 95, 102, 0.08);
    border-left-color: var(--color-main);
    color: var(--color-text);
}
.note-box-info strong { color: var(--color-main); }
.note-box-info li::marker { color: var(--color-main); }

/* Pagination controls beneath tables (e.g. account transactions) */
.pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.75rem;
    font-size: 0.9rem;
}

/* Clickable table rows navigating to a record (e.g. savings accounts) */
.row-link { cursor: pointer; }
.row-link-name { font-weight: 600; color: var(--color-dark); }

/* Savings bank cards: fixed column widths so every bank table lines up */
.savings-bank-table { table-layout: fixed; }
.savings-bank-table th:nth-child(1) { width: 36%; }
.savings-bank-table th:nth-child(2) { width: 10%; }
.savings-bank-table th:nth-child(3) { width: 14%; }
.savings-bank-table th:nth-child(4) { width: 18%; }
.savings-bank-table th:nth-child(5) { width: 22%; }
.savings-bank-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.savings-bank-table td.table-actions { white-space: nowrap; }

/* Portfolios broker cards: fixed column widths so every broker table lines up */
.portfolios-broker-table { table-layout: fixed; }
.portfolios-broker-table th:nth-child(1) { width: 28%; }
.portfolios-broker-table th:nth-child(2) { width: 9%; }
.portfolios-broker-table th:nth-child(3) { width: 13%; }
.portfolios-broker-table th:nth-child(4) { width: 13%; }
.portfolios-broker-table th:nth-child(5) { width: 15%; }
.portfolios-broker-table th:nth-child(6) { width: 10%; }
.portfolios-broker-table th:nth-child(7) { width: 12%; }
.portfolios-broker-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portfolios-broker-table td.table-actions { white-space: nowrap; }

/* SB accounts broker cards: fixed column widths (8 columns) */
.sb-broker-table { table-layout: fixed; }
.sb-broker-table th:nth-child(1) { width: 24%; }
.sb-broker-table th:nth-child(2) { width: 8%; }
.sb-broker-table th:nth-child(3) { width: 12%; }
.sb-broker-table th:nth-child(4) { width: 12%; }
.sb-broker-table th:nth-child(5) { width: 12%; }
.sb-broker-table th:nth-child(6) { width: 13%; }
.sb-broker-table th:nth-child(7) { width: 8%; }
.sb-broker-table th:nth-child(8) { width: 11%; }
.sb-broker-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-broker-table td.table-actions { white-space: nowrap; }

.flash { padding: 0.75rem 1rem; border-radius: 4px; margin-bottom: 1rem; word-break: break-word; }
.flash-success { background: var(--color-main); color: var(--color-white); }
.flash-error { background: var(--color-danger); color: var(--color-white); }
.flash-info { background: var(--color-accent); color: var(--color-white); }
.flash-warning { background: var(--color-highlight); color: var(--color-white); }
.flash a { color: inherit; text-decoration: underline; }

.muted { color: var(--color-muted); }
.inline-form { display: inline; }
h2 { color: var(--color-dark); margin-top: 0; }
h3 { color: var(--color-accent); margin-top: 0; }

.page-subtitle {
    margin: -0.4rem 0 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-accent);
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    /* Bottom spacing lives on the header (not the subtitle) so wrapped button
       rows keep the same gap to the content below; the subtitle's own bottom
       margin is removed inside headers to avoid doubling up. */
    margin-bottom: 1.25rem;
}

.page-header .page-subtitle { margin-bottom: 0; }

.btn-quick.active {
    background: var(--color-main);
    outline: 2px solid var(--color-dark);
}

/* ---------- Dropdown menus ---------- */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    min-width: 210px;
    flex-direction: column;
    background: var(--color-white);
    border: 1px solid rgba(11, 58, 66, 0.25);
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(11, 58, 66, 0.2);
    z-index: 30;
    overflow: hidden;
}
.dropdown.open .dropdown-menu { display: flex; }
.dropdown-menu a {
    padding: 0.55rem 0.9rem;
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.9rem;
}
.dropdown-menu a:hover { background: var(--color-main); color: var(--color-white); }

code {
    background: rgba(11, 58, 66, 0.08);
    border-radius: 3px;
    padding: 0.1rem 0.35rem;
    font-size: 0.85em;
}

/* PWA install card is mobile-only */
@media (min-width: 769px) {
    #pwa-install-card { display: none; }
}

/* ---------- Invite / QR blocks ---------- */
.invite-block { margin-top: 0.5rem; font-size: 0.8rem; word-break: break-all; }
.invite-block a { color: var(--color-accent); }
.qr { display: block; margin-top: 0.5rem; background: var(--color-white); }

.rename-form { display: flex; gap: 0.5rem; align-items: center; }
.rename-form[hidden] { display: none; }
.rename-form input {
    padding: 0.3rem 0.5rem;
    border: 1px solid rgba(11, 58, 66, 0.3);
    border-radius: 4px;
    font-size: 0.9rem;
    max-width: 220px;
}

.truncate {
    display: block;
    max-width: 280px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tax Returns index: Finalised column pinned to the right edge, centred
   (namespaced class — bare .col-* names collide with the 1500px rules below) */
.tax-years-table { table-layout: fixed; }
.tax-years-table .col-finalised { width: 7rem; text-align: center; }

/* Tax Returns documents card: ~25 more characters of the name than .truncate */
.truncate-doc-name { max-width: 455px; }

/* Tax Returns document tables: fixed trailing columns so the Tax Return
   Documents and Tax Information tables share the same column alignment */
.tax-docs-table { table-layout: fixed; }
.tax-docs-table .col-size { width: 6rem; }
.tax-docs-table .col-uploaded { width: 8rem; }
.tax-docs-table .col-actions { width: 15rem; }
.tax-docs-table td.table-actions { white-space: nowrap; }
.tax-docs-table .truncate-doc-name { max-width: 100%; }

/* Tax Payment History card: Date/Amount/Actions keep fixed widths and the
   Type column absorbs the remaining width so the table always fills the
   card. Classes are namespaced (col-pay-*) — bare .col-* names collide with
   the global column-dropping rules in the 1500px block below. */
.tax-payments-table { table-layout: fixed; }
.tax-payments-table .col-pay-date { width: 6.5rem; }
.tax-payments-table .col-pay-amount { width: 8rem; }
.tax-payments-table .col-pay-actions { width: 11rem; }
.tax-payments-table th:nth-child(3), .tax-payments-table td:nth-child(3) { text-align: right; }
.tax-payments-table tfoot td:nth-child(2) { text-align: right; }
.tax-payments-table td.table-actions { white-space: nowrap; }
.tax-payments-table tfoot td { border-bottom: none; border-top: 2px solid rgba(11, 58, 66, 0.25); }

/* Estimated Tax card: Stream absorbs the remaining width; the money columns
   are fixed-width and right-aligned like the Tax Payment History card, with
   the report-link column flush right */
.estimate-table { table-layout: fixed; }
.estimate-table .col-est-money { width: 9rem; }
.estimate-table .col-est-actions { width: 7.5rem; }
/* Right-align the three money columns; the tfoot total also lands on
   nth-child(2) so it picks this up too */
.estimate-table th:nth-child(2), .estimate-table td:nth-child(2),
.estimate-table th:nth-child(3), .estimate-table td:nth-child(3),
.estimate-table th:nth-child(4), .estimate-table td:nth-child(4) { text-align: right; }
.estimate-table td.table-actions { white-space: nowrap; }

/* Estimated Tax card: the expandable per-stream working — flat list, hairline
   separators, the closing "… tax: £X" step emphasised */
.estimate-working { list-style: none; margin: 0; padding: 0 0.75rem 0.25rem; font-size: 0.85rem; color: var(--color-muted); }
.estimate-working li { padding: 0.2rem 0; }
.estimate-working li + li { border-top: 1px solid rgba(11, 58, 66, 0.08); }
.estimate-working li:hover { background: rgba(0, 95, 102, 0.06); }
.estimate-working li.working-total { color: var(--color-dark); font-weight: 600; }

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(11, 58, 66, 0.45);
    z-index: 15;
}

/* ---------- Bullion tables (fixed layout so the per-metal tables align) ---------- */
.bullion-table, .bullion-sold-table { table-layout: fixed; }
.bullion-table th:nth-child(1) { width: 16%; }
.bullion-table th:nth-child(2) { width: 4%; }
.bullion-table th:nth-child(3) { width: 5.5%; }
.bullion-table th:nth-child(4) { width: 5%; }
.bullion-table th:nth-child(5) { width: 8%; }
.bullion-table th:nth-child(6) { width: 10.5%; }
.bullion-table th:nth-child(7) { width: 11.5%; }
.bullion-table th:nth-child(8) { width: 8%; }
.bullion-table th:nth-child(9) { width: 8%; }
.bullion-table th:nth-child(10) { width: 8.5%; }
.bullion-table th:nth-child(11) { width: 15%; }

.bullion-sold-table th:nth-child(1) { width: 5.5%; }
.bullion-sold-table th:nth-child(2) { width: 13.5%; }
.bullion-sold-table th:nth-child(3) { width: 4%; }
.bullion-sold-table th:nth-child(4) { width: 5%; }
.bullion-sold-table th:nth-child(5) { width: 4.5%; }
.bullion-sold-table th:nth-child(6) { width: 6.5%; }
.bullion-sold-table th:nth-child(7) { width: 8.5%; }
.bullion-sold-table th:nth-child(8) { width: 9%; }
.bullion-sold-table th:nth-child(9) { width: 7%; }
.bullion-sold-table th:nth-child(10) { width: 7%; }
.bullion-sold-table th:nth-child(11) { width: 7%; }
.bullion-sold-table th:nth-child(12) { width: 7.5%; }
.bullion-sold-table th:nth-child(13) { width: 15%; }

/* Long notes: one line with ellipsis; the full note is the tooltip (title) */
.bullion-note {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

/* Action buttons: a tidy 2×2 grid with gaps (instead of a ragged wrap that
   overflows the card). The grid lives on an inner wrapper — flex directly on
   a td would break the cell's vertical alignment in taller rows. */
.bullion-table td.table-actions,
.bullion-sold-table td.table-actions { white-space: normal; vertical-align: top; }
.actions-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    justify-content: flex-end;
}
.actions-grid > * { flex: 0 0 calc(50% - 0.15rem); }
.actions-grid .btn { width: 100%; }

/* ---------- Responsive ---------- */
@media (max-width: 1500px) {
    /* Holdings table: drop the Type column first as space tightens */
    .col-type { display: none; }
    /* CGT report: drop the Entry (Auto/Manual) column first */
    .col-entry { display: none; }
    /* Dividend report: drop the Portfolio column first */
    .col-portfolio { display: none; }
    /* Portfolios summary: drop the Transactions column first */
    .col-tx-count { display: none; }
    /* SB tables: drop the Exposure column first */
    .col-exposure { display: none; }
    /* Option tables: drop the least important columns first (Strategy stays —
       it groups multi-leg positions) */
    .col-multiplier { display: none; }
    .col-fees { display: none; }
    .col-broker { display: none; }
    /* Bullion tables: drop the least important columns first */
    .col-supplier { display: none; }
    .col-year { display: none; }
    .col-purchased { display: none; }
    /* Re-normalise the fixed widths without the Transactions column */
    .portfolios-broker-table th:nth-child(1) { width: 31%; }
    .portfolios-broker-table th:nth-child(2) { width: 10%; }
    .portfolios-broker-table th:nth-child(3) { width: 14.5%; }
    .portfolios-broker-table th:nth-child(4) { width: 14.5%; }
    .portfolios-broker-table th:nth-child(5) { width: 17%; }
    .portfolios-broker-table th:nth-child(7) { width: 13%; }
    /* Re-normalise the SB widths without the Exposure and Transactions columns */
    .sb-broker-table th:nth-child(1) { width: 33%; }
    .sb-broker-table th:nth-child(2) { width: 9%; }
    .sb-broker-table th:nth-child(3) { width: 15%; }
    .sb-broker-table th:nth-child(5) { width: 15%; }
    .sb-broker-table th:nth-child(6) { width: 16%; }
    .sb-broker-table th:nth-child(8) { width: 12%; }
}

@media (max-width: 768px) {
    .shell { flex-direction: column; }
    .stat-cards { grid-template-columns: 1fr; }
    .stat-cards-2 { grid-template-columns: 1fr; }
    .stat-cards-4 { grid-template-columns: 1fr; }
    .hide-mobile { display: none; }
    .stat-cards-5 { grid-template-columns: 1fr; }
    .sidebar {
        position: fixed;
        z-index: 20;
        height: 100vh;
        height: 100dvh;
        left: -240px;
        transition: left 0.2s ease;
    }
    .sidebar.open { left: 0; }
    .topbar { display: flex; }
    .nav-toggle { display: block; }
    .content { padding: 1rem; }

    /* Tables: keep their layout and scroll horizontally inside the card */
    .card { overflow-x: auto; }
    .table { min-width: 560px; }
    .truncate { max-width: 150px; }
    .truncate-doc-name { max-width: 325px; }

    /* Headers: buttons stay top-right next to the title when they fit;
       otherwise they wrap, right-aligned, on a row below it */
    .page-header { align-items: center; row-gap: 0.5rem; margin-bottom: 1.25rem; }
    .page-header .page-subtitle { margin-bottom: 0; }
    .page-header > .btn,
    .page-header > .btn-row,
    .card-header > .card-header-actions { margin-left: auto; }
}