/* ─────────────────────────────────────────────────────────────────────────────
   SETTINGS
   Settings and profile.

   Part 6 of 11, cut from the 5,142-line app.css. THE ORDER OF THESE
   FILES IS LOAD-BEARING — they are one cascade, split for navigation only, and
   index.php links them in this sequence. Moving one changes which rule wins.
   ───────────────────────────────────────────────────────────────────────────── */
/* ============================================================
   SETTINGS REDESIGN — Profile + Preferences in the Swiss / iOS-flat
   Overview language (tracked-caps headers, hairline rows, figure-units,
   recessed fields, house-blue focus accent).
   ============================================================ */
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-sm .material-icons { font-size: 14px; }

/* report-card icon tints (moved off inline styles) + danger card */
.settings-card-inline { display: flex; gap: 8px; align-items: center; }
.settings-card-inline .text-sm-caps { white-space: nowrap; }
.settings-card--danger { border: 1px solid color-mix(in srgb, var(--danger-red) 22%, transparent); }
.modal-input--danger { border-color: color-mix(in srgb, var(--danger-red) 30%, transparent); color: var(--danger-red); background: color-mix(in srgb, var(--danger-red) 6%, var(--bg-main)); text-align: center; }
.settings-card-icon.tint-amber  { background: rgba(245,158,11,0.12); color: var(--warning-yellow); }
.settings-card-icon.tint-green  { background: rgba(16,185,129,0.12); color: var(--success-green); }
.settings-card-icon.tint-teal   { background: rgba(20,184,166,0.12); color: #14B8A6; }
.settings-card-icon.tint-violet { background: rgba(139,92,246,0.12); color: #8B5CF6; }
.settings-card-icon.tint-blue   { background: rgba(59,130,246,0.12); color: #3B82F6; }
.settings-card-icon.tint-sky    { background: rgba(14,165,233,0.12); color: #0EA5E9; }
.settings-card-icon.tint-red    { background: rgba(225,29,72,0.12); color: var(--danger-red); }

/* ---- Financial Reports & Tools — one grouped card, iOS list rows ---- */
.report-list { padding: 0; }
.report-row { display: flex; align-items: center; gap: var(--space-4); padding: 15px var(--space-6); border-bottom: 1px solid var(--divider); }
.report-row:last-child { border-bottom: none; }
.report-row .settings-card-icon { width: 40px; height: 40px; border-radius: var(--radius-md); margin: 0; }
.report-row .settings-card-icon .material-icons { font-size: 20px; }
.report-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.report-row-title { margin: 0; font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--text-main); }
.report-row-desc { font-size: var(--text-sm); color: var(--text-muted); }
.report-row-ctrl { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.report-row-ctrl .text-sm-caps { white-space: nowrap; }
.report-input { width: auto; min-width: 132px; padding: 9px 12px; margin: 0; text-align: center; }
.report-input--year { width: 86px; min-width: 0; }
.report-btn { flex: 0 0 auto; white-space: nowrap; padding: 9px 16px; min-width: 132px; }
.report-row--danger .report-input { color: var(--danger-red); }

/* Project Types / Accounts tables sit flush inside their grouped card */
.settings-table-body { padding: 0; }
.settings-table-body .ledger-table-wrapper { margin-bottom: 0; }

/* Rounded inputs + action buttons across the Settings page. These were the app's
   original "single-line field = pill" rule, and they are the clearest place the
   capped 18px earns its keep: the Settings fields are ~56px tall, where a 999px
   capsule swells to a 28px lozenge that matches nothing else on the page. */
#view-settings .btn { border-radius: var(--radius-sm); }
#view-settings .prof-input,
#view-settings .modal-input { border-radius: var(--radius-sm); }
#view-settings .prof-input:not(.prof-select) { padding-left: 16px; padding-right: 16px; }
@media (max-width: 760px) {
    .report-row { flex-wrap: wrap; row-gap: 12px; }
    .report-row-text { flex: 1 1 calc(100% - 56px); }
    .report-row-ctrl { flex: 1 1 auto; }
    .report-input { flex: 1; }
    .report-btn { flex: 1 1 100%; justify-content: center; }
}

/* ---- PROFILE board ---- */
.prof-body { display: flex; flex-direction: column; gap: var(--space-6); padding-top: var(--space-4); }
.prof-role {
    font-size: 10px; font-weight: var(--fw-bold); letter-spacing: var(--tracking-caps);
    text-transform: uppercase; color: var(--text-muted);
    border: 1px solid var(--divider-strong); border-radius: var(--radius-pill); padding: 4px 10px;
}
.prof-identity { display: flex; align-items: center; gap: var(--space-4); }
.prof-avatar {
    width: 52px; height: 52px; flex: 0 0 auto; border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
    background: var(--text-main); box-shadow: var(--shadow-2);
}
.prof-avatar span { font-size: 22px; font-weight: var(--fw-bold); color: var(--bg-card); line-height: 1; }
.prof-id-text { min-width: 0; flex: 1; }
.prof-id-name { font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--text-main); line-height: 1.2; }
.prof-id-email { font-size: var(--text-sm); color: var(--text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prof-type-chip {
    flex: 0 0 auto; font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.02em;
    color: var(--text-main); background: var(--bg-main);
    border: 1px solid var(--divider); border-radius: var(--radius-pill); padding: 6px 12px;
}

.prof-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-5);
    border-top: 1px solid var(--divider); padding-top: var(--space-6);
}
.prof-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.prof-label { font-size: 10.5px; letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: var(--fw-medium); color: var(--text-muted); }
.prof-input {
    width: 100%; padding: 11px 14px; font-family: inherit; font-size: var(--text-base); font-weight: 500;
    color: var(--text-main); background: var(--bg-main);
    border: 1px solid var(--divider); border-radius: var(--radius-md);
    transition: border-color 0.16s ease, box-shadow 0.16s ease; appearance: none;
}
.prof-input::placeholder { color: var(--text-muted); opacity: 0.6; }
/* 1px ring, no offset — same geometry as every other field. Hue left alone: the
   colour treatment is deliberately NOT part of this adaptation. */
.prof-input:focus { outline: none; border-color: #00A2FF; box-shadow: 0 0 0 1px #00A2FF; }
.prof-select {
    cursor: pointer; padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A1A1AA' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
}
.prof-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.prof-meta { font-size: var(--text-sm); color: var(--text-muted); }
.prof-foot-actions { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }
.prof-foot-actions .btn, .prof-foot-actions .btn:hover { text-decoration: none; }
.prof-status { font-size: var(--text-sm); font-weight: var(--fw-medium); opacity: 0; transition: opacity 0.2s ease; }
.prof-status.show { opacity: 1; }
.prof-status.ok  { color: var(--success-green); }
.prof-status.err { color: var(--danger-red); }
.prof-security { border-top: 1px solid var(--divider); padding-top: var(--space-5); display: flex; flex-direction: column; gap: 10px; }
.prof-sec-grid { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--space-3); align-items: center; }

/* ---- PREFERENCES list (iOS settings rows) ---- */
.set-list { padding: 0; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 16px var(--space-6); border-bottom: 1px solid var(--divider); }
.set-row:last-child { border-bottom: none; }
.set-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.set-row-title { font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--text-main); }
.set-row-sub { font-size: var(--text-sm); color: var(--text-muted); }
.set-toggle { flex: 0 0 auto; padding: 2px; align-items: center; }
.set-toggle .toggle-btn { padding: 6px 10px; font-family: inherit; }
.set-toggle .toggle-btn .material-icons { font-size: 16px; }
.set-tint { gap: 8px; }
.set-tint-input { width: 34px; height: 28px; padding: 2px; border: 1px solid var(--divider-strong); border-radius: var(--radius-sm); background: transparent; cursor: pointer; }

@media (max-width: 720px) {
    .prof-grid { grid-template-columns: 1fr; }
    .prof-sec-grid { grid-template-columns: 1fr; }
    .prof-identity { flex-wrap: wrap; }
    .set-row { flex-direction: column; align-items: flex-start; gap: 10px; }
    .set-toggle { align-self: stretch; justify-content: flex-start; }
}

/* Overview QUICK ADD — the WHOLE card is a holographic AI drop field. A selector
   toggles Receipts / Statement, the centre is an informative CTA, and the other
   quick-adds are pills at the bottom. Drop a file anywhere on the card. */
.quick-add-panel {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.quick-add-panel.drag { transform: scale(1.008); box-shadow: var(--shadow-3); }

/* Holographic SILVER fluid covering the entire card — pale chrome base + two
   iridescent rainbow sheets drifting in OPPOSITE directions (their interference
   reads as flowing holographic chrome). Always bright; brightens on drag. */
.qa-fluid {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(115deg,
            rgba(255, 150, 205, 0.6), rgba(165, 215, 255, 0.6) 24%, rgba(190, 255, 225, 0.54) 45%,
            rgba(255, 236, 170, 0.6) 66%, rgba(208, 180, 255, 0.6) 85%, rgba(255, 150, 205, 0.6)),
        linear-gradient(245deg,
            rgba(180, 255, 240, 0.4), rgba(255, 200, 235, 0.4) 38%, rgba(200, 210, 255, 0.4) 72%, rgba(255, 240, 200, 0.4)),
        linear-gradient(135deg, #e9edf5 0%, #f8f9fd 45%, #e2e7f1 100%);
    background-size: 320% 320%, 280% 280%, 100% 100%;
    background-blend-mode: normal, overlay, normal;
    filter: saturate(1.28) brightness(1.08);
    opacity: 0.96;
    animation: qaFluid 17s ease-in-out infinite;
    transition: opacity 0.25s ease, filter 0.25s ease;
}
.quick-add-panel:hover .qa-fluid,
.quick-add-panel.drag .qa-fluid { opacity: 1; filter: saturate(1.45) brightness(1.16); }
@keyframes qaFluid {
    0%   { background-position: 0% 50%, 100% 50%, 0 0; }
    50%  { background-position: 100% 50%, 0% 50%, 0 0; }
    100% { background-position: 0% 50%, 100% 50%, 0 0; }
}
@media (prefers-reduced-motion: reduce) { .qa-fluid { animation: none; } }

/* The .sq-card document cards are skinned by a WebGL screen (card-fluid.js → FRAG_HALFTONE):
   the DOCUMENT view is a BRIGHT CMYK ink fluid, the SMART view is the 3D silver gradient —
   BOTH are LIGHT, so the DEFAULT dark-ink content reads on them (no scrim / fog). .qa-fluid
   is the pale fallback if WebGL fails. */
.sq-card .qa-fluid { background: radial-gradient(120% 120% at 30% 25%, #fbf8f1 0%, #f3eee2 70%, #ece5d6 100%); }
.sq-card[data-view="smart"] .qa-fluid { background: radial-gradient(120% 120% at 30% 25%, #eef0f6 0%, #e2e6f0 70%, #d8dce8 100%); }
.qa-scrim { display: none; }   /* the dark fog veil is gone */

/* HEADER — a changing TITLE on the left ("Quick Add" / "AI ⚡") + the view toggle on the
   RIGHT (Document ⇄ Smart Quoting), like the overview AI card. */
.sq-card .qa-header { justify-content: space-between; gap: 10px; }
.sq-title { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; flex-shrink: 0; }
.sq-title-bolt { font-size: 17px; }
.qa-view-mode[data-view="smart"] .qa-mode-glider { transform: translateX(100%); }
.sq-card .qa-pane { flex: 1; display: flex; flex-direction: column; }
.sq-card .qa-pane.hidden { display: none; }

/* both fields are bright → DARK ink content (the default); the active toggle label darkens */
.qa-view-mode[data-view="document"] .qa-mode-btn[data-view="document"],
.qa-view-mode[data-view="smart"] .qa-mode-btn[data-view="smart"] { color: #1b1b22; }
/* a soft light halo keeps the dark title / CTA legible over the most saturated ink swirls */
.sq-card[data-view="document"] .sq-title-text,
.sq-card[data-view="document"] .qa-cta-title,
.sq-card[data-view="document"] .qa-cta-text { text-shadow: 0 1px 7px rgba(255, 255, 255, 0.55); }

/* Header matches the Financial Overview card header (.board-header / .board-title
   treatment) — same padding + tracked-caps title — but the title is FIXED dark
   because it sits on the bright holographic field. The selector sits on the right
   (like the chart card's toggle). */
.quick-add-panel .board-header { position: relative; z-index: 1; flex-shrink: 0; gap: 10px; }
.quick-add-panel .board-title { color: #1b1b22; }
/* Thunder bolt following the "AI" title — a small inline accent glyph. */
.qa-ai-bolt {
    font-size: 16px;
    line-height: 1;
    vertical-align: -3px;
    margin-left: 1px;
    color: #1b1b22;
}

/* All card text is FIXED dark — the field is always a bright silver hologram in
   both themes, so dark ink reads cleanly (no theme-dependent colours). */
.qa-card-inner {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 22px 22px;
    color: #1b1b22;
}
/* Receipts / Statement selector — frosted segmented control on the bright field.
   EQUAL-WIDTH segments (grid 1fr/1fr, both sized to the WIDER label) so the sliding
   glider — a pure-CSS `calc(50% - 3px)` pill — sits dead-on the active segment in
   EVERY state. (Was display:flex with content-width segments, so "Document"/"Receipts"
   were narrower than 50% and the resting glider overhung them — the default-state shape
   bug. Equal segments removes the need for any JS width-measuring.) */
.qa-mode {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    padding: 3px;
    border-radius: var(--radius-pill);
    background: rgba(20, 22, 35, 0.10);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
/* SLIDING pill — follows the header glider idiom: a white pill that glides
   between the two equal-width options (50% each) with the same swift settle. */
.qa-mode-glider {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(50% - 3px);
    box-sizing: border-box;
    border-radius: var(--radius-pill);
    /* Apple liquid glass — frosted translucent, refracts the holographic field behind */
    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(12px) saturate(170%);
    backdrop-filter: blur(12px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow:
        inset 0 1px 1px 0 rgba(255, 255, 255, 0.6),
        0 1px 3px rgba(17, 19, 28, 0.16),
        0 6px 16px -4px rgba(17, 19, 28, 0.18);
    overflow: hidden;
    transform: translateX(0);
    transition: transform 0.46s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 0;
}
.qa-mode-glider::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.05) 46%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}
.qa-mode[data-mode="bank"] .qa-mode-glider { transform: translateX(100%); }
@media (prefers-reduced-motion: reduce) { .qa-mode-glider { transition: none; } }
.qa-mode-btn {
    position: relative;
    z-index: 1;
    border: none;
    background: transparent;
    padding: 5px 13px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.01em;
    white-space: nowrap;
    text-align: center;       /* segments are now equal-width (wider than the label) → centre it */
    color: rgba(27, 27, 34, 0.55);
    cursor: pointer;
    transition: color 0.25s ease;
}
.qa-mode-btn.active { color: #1b1b22; }

/* Centre CTA — reads like a spoken statement: the title with its icon inline,
   then the small text after a break, all LEFT-aligned (not a button look). The
   whole card is still the drop target; this is the explicit click-to-browse. */
.qa-cta {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
    text-align: left;
    width: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 6px 2px;
    color: inherit;
}
.qa-cta-line { display: block; }
.qa-cta-title { font-size: var(--text-xl); font-weight: var(--fw-bold); color: #1b1b22; letter-spacing: 0; line-height: 1.08; }   /* HERO */
.qa-cta-icon { font-size: 31px; color: #1b1b22; vertical-align: -5px; margin-left: 9px; }   /* inline, follows the title text */
.qa-cta-text { font-size: 13px; font-weight: var(--fw-medium); color: rgba(27, 27, 34, 0.68); line-height: 1.55; max-width: 320px; }
/* QUICK-ADD document card — the headline block is now a STATIC caption (not a button) */
.qa-cta--static { cursor: default; }
/* Two stamped "press" buttons — New Quote (dark ink) + New Invoice (paper) — that raise
   the document straight away. The pair reads as ink-on-paper, matching the field. */
.qa-doc-actions { display: flex; flex-direction: column; gap: 10px; }
.qa-doc-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 16px; border-radius: var(--radius-sm);
    font-size: 14px; font-weight: var(--fw-semibold); letter-spacing: 0.01em;
    cursor: pointer; border: 1.5px solid transparent;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.qa-doc-btn .material-icons { font-size: 18px; }
.qa-doc-btn--quote { background: #1b1b22; color: #fff; box-shadow: 0 5px 16px rgba(0, 0, 0, 0.24); }
.qa-doc-btn--invoice { background: rgba(255, 255, 255, 0.82); color: #1b1b22; border-color: rgba(27, 27, 34, 0.18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10); }
.qa-doc-btn--quote:hover { background: #000; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3); }
.qa-doc-btn--invoice:hover { background: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16); }

/* RETRO "data readout" swap — when the Receipts/Statement mode flips, the copy
   dims out, glitch-flickers, then resolves back in (JS swaps the text at the dim
   point). Sophisticated retro fade, not a plain crossfade. */
@keyframes qaRetroSwap {
    0%   { opacity: 1;    filter: blur(0);    transform: translateY(0); }
    28%  { opacity: 0;    filter: blur(2.5px); transform: translateY(-4px); }
    44%  { opacity: 0;    transform: translateY(2px); }
    54%  { opacity: 0.6;  filter: blur(1px);  transform: translateY(0); }   /* flicker on */
    62%  { opacity: 0.1; }
    72%  { opacity: 0.85; filter: blur(0.3px); }
    82%  { opacity: 0.35; }
    100% { opacity: 1;    filter: blur(0);    transform: translateY(0); }
}
.qa-cta.qa-retro .qa-cta-line,
.qa-cta.qa-retro .qa-cta-text { animation: qaRetroSwap 0.52s cubic-bezier(0.4, 0, 0.2, 1) both; }
.qa-cta.qa-retro .qa-cta-text { animation-delay: 0.05s; }   /* text trails the title a touch */
@media (prefers-reduced-motion: reduce) {
    .qa-cta.qa-retro .qa-cta-line,
    .qa-cta.qa-retro .qa-cta-text { animation: none; }
}
/* SAME retro readout on the project Quick-Add card when it flips Document ⇄ Smart
   Quoting — the whole body + title dim, flicker, then resolve (setSqView swaps the
   pane + title at the dim point), so it reads identically to the overview AI card. */
.sq-card.qa-retro .qa-card-inner,
.sq-card.qa-retro .sq-title-text { animation: qaRetroSwap 0.52s cubic-bezier(0.4, 0, 0.2, 1) both; }
.sq-card.qa-retro .sq-title-text { animation-delay: 0.05s; }
@media (prefers-reduced-motion: reduce) {
    .sq-card.qa-retro .qa-card-inner,
    .sq-card.qa-retro .sq-title-text { animation: none; }
}

/* Bottom pills — the other quick-adds as compact tags. */
.qa-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.qa-pill-label {
    font-size: 10px;
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: rgba(27, 27, 34, 0.5);
    margin-right: 2px;
}
.qa-pill {
    border: none;
    padding: 7px 14px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.58);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #1b1b22;
    font-size: 12px;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(17, 19, 28, 0.08);
    transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
.qa-pill:hover { background: #ffffff; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(17, 19, 28, 0.14); }
.qa-pill:active { transform: translateY(0) scale(0.97); }

/* Inline "go" button — a small round arrow that follows a figure / a pill group
   and links onward. Understated at rest, inverts to ink on hover (header idiom). */
.go-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;          /* centre against a big figure on a baseline row */
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1.5px solid var(--divider-strong);   /* LINE style — outline, no fill */
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.go-btn .material-icons { font-size: 16px; }
.go-btn:hover { background: var(--text-main); border-color: var(--text-main); color: var(--bg-main); transform: translateX(2px); }
.go-btn:active { transform: translateX(0) scale(0.92); }
/* On the holographic AI card: frosted-white at rest (matches the pills), inks on hover. */
.go-btn--ink {
    border: none;
    background: rgba(255, 255, 255, 0.58);
    color: #1b1b22;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 1px 2px rgba(17, 19, 28, 0.08);
}
.go-btn--ink:hover { background: #1b1b22; color: #ffffff; }

/* Merged overview chart card — the toggle swaps which pane shows (trend / pie).
   FIXED height on both panes so switching trend↔pie never changes the card's
   height (and the AI card spanning 2 rows never jumps). */
.chart-pane { display: flex; height: 300px; flex: none; }
.chart-pane.hidden { display: none !important; }
/* Compact toggle in a board header (chart view switch) — smaller than the page
   period selector but same neumorphic-glider language. */
.chart-view-toggle .toggle-btn { padding: 6px 13px; font-size: 12px; }

/* Account Distribution — HORIZONTAL: pie left, ledger legend right. */
.dist-pane {
    align-items: center;
    justify-content: center;
    gap: 44px;
    padding: 6px 8px;
}
/* Pie maximised to the pane height; the legend list narrowed so the pie can grow. */
.dist-pie { flex-shrink: 0; width: 284px; max-width: 50%; }
/* `max-height:100%` lets the legend use the FULL pane height (300px) instead of
   the global 190px cap — with the compact Title-Case rows, more rows fit before
   any scroll/edge-fade, so the list rarely overflows in this panel. */
.dist-legend { flex: 0 1 340px; max-height: 100%; }
@media (max-width: 900px) {
    .dist-pane { flex-direction: column; gap: 16px; padding: 4px; }
    .dist-pie { width: 180px; max-width: 60%; }
    .dist-legend { flex: 1 1 auto; width: 100%; }
}

/* ── ACTIVITY RECORD (Audit_Log) ──────────────────────────────────────────────
   A list, not a table: the question is "what happened, and who", which reads top to
   bottom in time order. Destructive rows carry a warm left edge so scanning a year for
   "what did we delete" does not mean reading every line.

   EVERY CLASS HERE IS audit-*, NOT activity-*, AND THAT IS NOT COSMETIC.
   These rules were written as .activity-row / .activity-main / .activity-title, which
   overview.css had already claimed for the dashboard's feed — and index.php loads
   overview.css AFTER this file, so the dashboard's rules won every one of the ties.
   The audit rows were laid out by a grid meant for a different list entirely
   (104px · 34px · 1fr · 132px): the text column became 104px wide and wrapped one word
   at a time, and the name and timestamp were crushed into a 34px column on top of each
   other. Nothing errored. It just looked broken.

   Raising specificity or reaching for !important would have won this collision and left
   the next one to be discovered the same way — by looking at it. A prefix that belongs
   to one view cannot collide at all. */
.audit-row {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
    padding: 11px 0 11px 12px; border-bottom: 1px solid var(--divider);
    border-left: 2px solid transparent;
}
.audit-row:last-child { border-bottom: 0; }
.audit-row.audit-severe { border-left-color: var(--danger-red); }
.audit-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.audit-title { font-size: 13.5px; font-weight: var(--fw-semibold); color: var(--text-main); }
.audit-meta {
    font-size: 11px; letter-spacing: var(--tracking-caps); text-transform: uppercase;
    color: var(--text-muted);
}
/* The detail is whatever the action recorded — often a JSON blob from the seeder. One
   line, truncated, with the whole thing on the element's title: it is context for a row
   you are already reading, and it must never be allowed to push the row's real content
   (what happened, and who) off the screen. */
.audit-detail {
    font-size: 12.5px; color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
    font-variant-numeric: tabular-nums;
}
.audit-side {
    display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
    flex: 0 0 auto; text-align: right;
}
.audit-who  { font-size: 12.5px; color: var(--text-main); white-space: nowrap; }
.audit-when { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
@media (max-width: 680px) {
    .audit-row { flex-direction: column; gap: 6px; }
    .audit-side { align-items: flex-start; text-align: left; }
}