/*
 * LedgerSuite theme — "Private Ledger"
 * Look & feel: private banking / family office. Warm paper surfaces, deep
 * evergreen brand, brass/gold accents, serif display type.
 *
 * Type stack (Google Fonts, loaded in index.html):
 *   Source Serif 4 — headings / wordmark (editorial, financial-press voice)
 *   IBM Plex Sans  — UI and body text (excellent figures for accounting)
 *   IBM Plex Mono  — account numbers, ISINs, code-like identifiers
 *
 * Fluent UI v5 applies its design tokens through constructed stylesheets
 * (document.adoptedStyleSheets), which outrank ordinary author stylesheets at
 * equal specificity — token overrides below therefore carry `!important`.
 * Brand-color tokens are NOT overridden here; the brand ramp is generated at
 * runtime via Blazor.theme.setBrandThemeFromSettings (see MainLayout.razor).
 */

:root {
    /* LedgerSuite palette anchors (referenced by utility classes below) */
    --ls-evergreen: #0e5641;
    --ls-evergreen-deep: #0b3f30;
    --ls-sidebar-bg: #0f231c;
    --ls-sidebar-bg-raised: #16332a;
    --ls-gold: #a8873c;
    --ls-gold-soft: #c2a566;
    --ls-paper: #f4f1e9;
    --ls-card: #fdfcf9;
    --ls-ink: #20261f;
    --ls-negative: #a6392a;
    --ls-positive: #1e6b4c;
    --ls-hairline: #ddd7c8;
}

/* ---------------------------------------------------------------------------
 * Design-token overrides — light (default)
 * ------------------------------------------------------------------------- */
body {
    /* Typography */
    --fontFamilyBase: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif !important;
    --fontFamilyMonospace: 'IBM Plex Mono', 'Cascadia Code', Consolas, monospace !important;
    --fontFamilyNumeric: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif !important;

    /* Warm paper neutrals */
    --colorNeutralBackground1: #fdfcf9 !important;
    --colorNeutralBackground1Hover: #f5f2ea !important;
    --colorNeutralBackground1Pressed: #ece8dc !important;
    --colorNeutralBackground2: #f4f1e9 !important;
    --colorNeutralBackground2Hover: #ece8dc !important;
    --colorNeutralBackground2Pressed: #e2ddce !important;
    --colorNeutralBackground3: #ece8dc !important;
    --colorNeutralBackground4: #e6e1d2 !important;
    --colorNeutralBackground5: #dfd9c9 !important;
    --colorNeutralBackground6: #ece8dc !important;
    --colorSubtleBackgroundHover: rgba(32, 38, 31, 0.05) !important;
    --colorSubtleBackgroundPressed: rgba(32, 38, 31, 0.09) !important;
    --colorSubtleBackgroundSelected: rgba(14, 86, 65, 0.08) !important;

    /* Warm ink foregrounds */
    --colorNeutralForeground1: #20261f !important;
    --colorNeutralForeground1Hover: #20261f !important;
    --colorNeutralForeground2: #49523f !important;
    --colorNeutralForeground2Hover: #20261f !important;
    --colorNeutralForeground3: #6d7561 !important;
    --colorNeutralForeground4: #8b917e !important;

    /* Hairline strokes */
    --colorNeutralStroke1: #d4cebd !important;
    --colorNeutralStroke1Hover: #c2bba7 !important;
    --colorNeutralStroke2: #ddd7c8 !important;
    --colorNeutralStroke3: #e8e3d5 !important;
    --colorNeutralStrokeSubtle: #e8e3d5 !important;

    /* Softer, paper-like shadows */
    --shadow2: 0 1px 2px rgba(46, 41, 28, 0.10) !important;
    --shadow4: 0 2px 6px rgba(46, 41, 28, 0.10) !important;
    --shadow8: 0 4px 12px rgba(46, 41, 28, 0.12) !important;
    --shadow16: 0 8px 24px rgba(46, 41, 28, 0.14) !important;
}

/* ---------------------------------------------------------------------------
 * Design-token overrides — dark ("after hours": green-black, parchment ink)
 * ------------------------------------------------------------------------- */
body[data-theme="dark"] {
    --ls-paper: #111612;
    --ls-card: #191f1a;
    --ls-ink: #e8e4d7;
    --ls-gold: #c2a566;
    --ls-negative: #dd8a76;
    --ls-positive: #85c3a2;
    --ls-hairline: #2e362f;

    --colorNeutralBackground1: #191f1a !important;
    --colorNeutralBackground1Hover: #212823 !important;
    --colorNeutralBackground1Pressed: #29312b !important;
    --colorNeutralBackground2: #111612 !important;
    --colorNeutralBackground2Hover: #191f1a !important;
    --colorNeutralBackground2Pressed: #212823 !important;
    --colorNeutralBackground3: #212823 !important;
    --colorNeutralBackground4: #262e28 !important;
    --colorNeutralBackground5: #2b332d !important;
    --colorNeutralBackground6: #212823 !important;
    --colorSubtleBackgroundHover: rgba(232, 228, 215, 0.06) !important;
    --colorSubtleBackgroundPressed: rgba(232, 228, 215, 0.10) !important;
    --colorSubtleBackgroundSelected: rgba(194, 165, 102, 0.12) !important;

    --colorNeutralForeground1: #e8e4d7 !important;
    --colorNeutralForeground1Hover: #f2efe4 !important;
    --colorNeutralForeground2: #b7bcab !important;
    --colorNeutralForeground2Hover: #e8e4d7 !important;
    --colorNeutralForeground3: #8f957f !important;
    --colorNeutralForeground4: #6f7562 !important;

    --colorNeutralStroke1: #39423a !important;
    --colorNeutralStroke1Hover: #4a544b !important;
    --colorNeutralStroke2: #2e362f !important;
    --colorNeutralStroke3: #262e28 !important;
    --colorNeutralStrokeSubtle: #262e28 !important;

    --shadow2: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    --shadow4: 0 2px 6px rgba(0, 0, 0, 0.5) !important;
    --shadow8: 0 4px 12px rgba(0, 0, 0, 0.55) !important;
    --shadow16: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
}

/* Page canvas sits one layer below cards. */
body {
    background-color: var(--colorNeutralBackground2) !important;
}

/* ---------------------------------------------------------------------------
 * Typography
 * ------------------------------------------------------------------------- */
h1, h2, .ls-serif {
    font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Small-caps section label (gold eyebrow above headings, group titles). */
.eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ls-gold);
}

/* Secondary explanatory line under an .eyebrow label — a caption, not a warning (#434). */
.ls-note {
    margin: 2px 0 8px;
    font-size: 12px;
    color: var(--colorNeutralForeground3);
}

/* Computed-line badge (#492): a statement row the ledger does not carry - the CTA reserve, the OCI
   movement, the FX effect on cash, a valuation adjustment - marked so a reader never mistakes it
   for a posted figure. */
.ls-computed {
    color: var(--colorBrandForeground1);
    font-weight: 600;
    cursor: help;
}

/* Code-like identifiers: account numbers, ISINs, symbols, GUIDs. */
.mono {
    font-family: var(--fontFamilyMonospace);
    font-size: 0.93em;
}

/* ---------------------------------------------------------------------------
 * Financial figures
 * ------------------------------------------------------------------------- */
.num {
    font-variant-numeric: tabular-nums lining-nums;
    text-align: right;
    white-space: nowrap;
}

.neg { color: var(--ls-negative); }
.pos { color: var(--ls-positive); }

/* Row-level warning badges (stale price, missing FX, ...) — adjacent badges need a gap and must
 * wrap as whole badges rather than mid-word (#429). */
.ls-flags {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.ls-flags > span {
    white-space: nowrap;
}

/* Live-plane labels (#454, epic #445 WP10): the tier a value was served at, its age, and a stale
 * marker - rendered beside every live number so a delayed figure can never read as the market. The
 * tier chip is coloured by how far the value is from real time, not by whether it is good news. */
.ls-live-label {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.ls-tier {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 10px;
    border: 1px solid var(--colorNeutralStroke2);
    color: var(--colorNeutralForeground2);
}

.ls-tier-live {
    color: var(--ls-positive);
    border-color: var(--ls-positive);
}

.ls-tier-delayed,
.ls-tier-delayed_frozen,
.ls-tier-frozen {
    color: var(--ls-gold);
    border-color: var(--ls-gold);
}

.ls-tier-unknown,
.ls-tier-none {
    color: var(--colorNeutralForeground3);
    border-style: dashed;
}

.ls-live-label .ls-age {
    font-size: 12px;
    color: var(--colorNeutralForeground3);
}

.ls-live-label .ls-stale {
    font-size: 12px;
    color: var(--ls-negative);
}

/* Operator-surface outcome chips (#461, epic #445 WP11): a task's status, an obligation's alert, a
 * source's health, a held bar's deviation - the tier chip's shape, coloured by how much attention
 * the row needs rather than by what it is. */
.ls-status {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 10px;
    border: 1px solid var(--colorNeutralStroke2);
    color: var(--colorNeutralForeground2);
    white-space: nowrap;
}

.ls-status-ok {
    color: var(--ls-positive);
    border-color: var(--ls-positive);
}

.ls-status-warn {
    color: var(--ls-gold);
    border-color: var(--ls-gold);
}

.ls-status-bad {
    color: var(--ls-negative);
    border-color: var(--ls-negative);
}

.ls-status-muted {
    color: var(--colorNeutralForeground3);
    border-style: dashed;
}

/* The quarantine decision panel sits inside the review card, set off rather than nested flat. */
.ls-decision {
    margin-top: 12px;
    border-left: 3px solid var(--ls-gold);
}

/* Right-align numeric grid columns (apply to the column via Class="col-num"). */
fluent-data-grid-cell.col-num,
.col-num {
    text-align: right;
    font-variant-numeric: tabular-nums lining-nums;
}

/* ---------------------------------------------------------------------------
 * App shell
 * ------------------------------------------------------------------------- */
.ls-content {
    background-color: var(--colorNeutralBackground2);
    overflow-y: auto;
    height: 100dvh;
}

.ls-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 28px 36px 64px 36px;
}

/* ---------------------------------------------------------------------------
 * Sidebar — always dark evergreen, both modes. Fluent components inside
 * inherit these token values (custom properties pierce shadow DOM).
 * ------------------------------------------------------------------------- */
.ls-sidebar,
.ls-sidebar * {
    scrollbar-color: #2c4237 var(--ls-sidebar-bg);
}

.ls-sidebar {
    background-color: var(--ls-sidebar-bg) !important;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow-y: auto;

    --colorNeutralBackground1: var(--ls-sidebar-bg) !important;
    --colorNeutralBackground1Hover: var(--ls-sidebar-bg-raised) !important;
    --colorNeutralBackground1Pressed: var(--ls-sidebar-bg-raised) !important;
    --colorNeutralBackground2: var(--ls-sidebar-bg) !important;
    --colorNeutralBackground2Hover: var(--ls-sidebar-bg-raised) !important;
    --colorNeutralBackground2Pressed: var(--ls-sidebar-bg-raised) !important;
    --colorNeutralBackground3: var(--ls-sidebar-bg) !important;
    --colorNeutralBackground4: var(--ls-sidebar-bg-raised) !important;
    --colorNeutralBackground5: var(--ls-sidebar-bg-raised) !important;
    --colorNeutralBackground6: var(--ls-sidebar-bg-raised) !important;
    --colorTransparentBackground: transparent !important;
    --colorSubtleBackgroundHover: rgba(255, 255, 255, 0.06) !important;
    --colorSubtleBackgroundPressed: rgba(255, 255, 255, 0.10) !important;
    --colorSubtleBackgroundSelected: rgba(194, 165, 102, 0.14) !important;
    --colorNeutralForeground1: #ede9db !important;
    --colorNeutralForeground1Hover: #ffffff !important;
    --colorNeutralForeground2: #c3c9b8 !important;
    --colorNeutralForeground2Hover: #ede9db !important;
    --colorNeutralForeground3: #98a08c !important;
    --colorNeutralForeground4: #7d8471 !important;
    --colorNeutralStroke1: #2c4237 !important;
    --colorNeutralStroke2: #24382e !important;
    --colorNeutralStrokeSubtle: #24382e !important;
    /* Selected/active nav accents lean gold rather than brand green. */
    --colorNeutralForeground2BrandSelected: var(--ls-gold-soft) !important;
    --colorCompoundBrandForeground1: var(--ls-gold-soft) !important;
    --colorCompoundBrandStroke: var(--ls-gold-soft) !important;
    --colorBrandForeground1: var(--ls-gold-soft) !important;
    --colorBrandForegroundLink: var(--ls-gold-soft) !important;
    --colorBrandForegroundLinkHover: #d8c28d !important;
    --colorBrandStroke1: var(--ls-gold-soft) !important;
}

.ls-sidebar-brand {
    padding: 22px 20px 16px 20px;
}

.ls-sidebar-brand .wordmark {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #f3efe2;
    text-decoration: none;
    display: block;
}

.ls-sidebar-brand .wordmark-sub {
    margin-top: 3px;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ls-gold-soft);
}

.ls-sidebar-brand .wordmark-rule {
    margin-top: 14px;
    height: 1px;
    background: linear-gradient(to right, var(--ls-gold) 0%, rgba(168, 135, 60, 0) 90%);
}

.ls-sidebar-nav {
    flex: 1 1 auto;
    padding: 0 8px;
}

/* #635: who is signed in, above the footer rule. Same muted register as the footer - it is a
   standing fact, not a control, and the one control in it is the sign-out button. */
.ls-sidebar-user {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px 8px 16px;
    color: #98a08c;
    font-size: 12px;
}

.ls-sidebar-user-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* #635: the frame RedirectToLogin renders while the MSAL redirect is under way, and the one
   AuthorizeRouteView's Authorizing fragment shows while the state is still resolving. */
.ls-signing-in {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 32px 0;
    color: var(--ls-muted, #6b7280);
}

.ls-sidebar-footer {
    flex-shrink: 0;
    padding: 12px 16px 16px 16px;
    border-top: 1px solid #24382e;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #98a08c;
    font-size: 11px;
}

/* ---------------------------------------------------------------------------
 * Page header
 * ------------------------------------------------------------------------- */
.ls-page-header {
    width: 100%;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ls-hairline);
    margin-bottom: 6px;
}

.ls-page-header h1 {
    font-size: 28px;
    line-height: 1.2;
    margin: 0;
    color: var(--colorNeutralForeground1);
}

.ls-page-header .subtitle {
    margin-top: 4px;
    max-width: 70ch;
    color: var(--colorNeutralForeground3);
    font-size: 13.5px;
}

/* Section-header variant used inside pages (PageHeader Compact="true"). */
.ls-page-header.compact {
    padding-bottom: 8px;
    margin-bottom: 2px;
    margin-top: 10px;
}

.ls-page-header.compact h2 {
    font-size: 19px;
    line-height: 1.25;
    margin: 0;
    color: var(--colorNeutralForeground1);
}

.ls-page-header.compact .subtitle {
    font-size: 12.5px;
}

/* ---------------------------------------------------------------------------
 * Cards & module tiles
 * ------------------------------------------------------------------------- */
fluent-card,
.ls-card {
    border: 1px solid var(--ls-hairline);
    box-shadow: var(--shadow2);
}

.ls-module-card {
    display: block;
    text-decoration: none;
    border: 1px solid var(--ls-hairline);
    border-radius: var(--borderRadiusLarge);
    background: var(--colorNeutralBackground1);
    padding: 16px 18px;
    height: 100%;
    transition: border-color var(--durationFast) var(--curveEasyEase),
                box-shadow var(--durationFast) var(--curveEasyEase),
                transform var(--durationFast) var(--curveEasyEase);
}

.ls-module-card:hover {
    border-color: var(--ls-gold);
    box-shadow: var(--shadow8);
    transform: translateY(-1px);
}

.ls-module-card .module-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 14.5px;
    color: var(--colorNeutralForeground1);
}

.ls-module-card .module-title svg { fill: var(--ls-evergreen); }
body[data-theme="dark"] .ls-module-card .module-title svg { fill: var(--ls-gold-soft); }

.ls-module-card .module-desc {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--colorNeutralForeground3);
}

/* Section block on dispatch pages: gold eyebrow + hairline + card grid. */
.ls-section {
    width: 100%;
    margin-top: 10px;
}

.ls-section .section-rule {
    height: 1px;
    background: var(--ls-hairline);
    margin: 6px 0 14px 0;
}

/* ---------------------------------------------------------------------------
 * Data grids — ledger table styling
 * ------------------------------------------------------------------------- */
fluent-data-grid {
    width: 100%;
    font-size: 13px;
}

/* Column headers: understated small caps, hairline underneath. */
fluent-data-grid th,
fluent-data-grid [role="columnheader"] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--colorNeutralForeground3);
}

fluent-data-grid [role="row"]:hover [role="gridcell"] {
    background-color: var(--colorSubtleBackgroundHover);
}

/* Dense grids (#433): Fluent's 18px of cell padding either side is 36px per column, which a
 * nine-column list (imports) or a thirteen-column one (statement rows) cannot afford — a two-digit
 * row number came out as "1…". Halve it, and let the row's action buttons size to their labels
 * instead of Fluent's 96px minimum, so the last button is not cut off at the right edge. */
/* Specificity has to clear Fluent's own `.fluent-data-grid td:not([col-select=true])`. */
table.fluent-data-grid.ls-grid-dense td,
table.fluent-data-grid.ls-grid-dense th {
    padding-inline: 9px;
}

.ls-grid-actions fluent-button,
.ls-grid-actions fluent-anchor-button {
    min-width: auto;
}

/* #455: why a batch is still sitting at Uploaded — the dispatcher's attempt count and last failure,
   under the status it would otherwise be indistinguishable from. Clipped to two lines; the full text
   is the cell's title. */
.ls-dispatch-note {
    color: var(--colorNeutralForeground3);
    font-size: var(--fontSizeBase200);
    line-height: 1.3;
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------------------------------------------------------------------------
 * Chart of accounts — account-category tree
 * ------------------------------------------------------------------------- */
.ls-coa-tree {
    width: 100%;
    font-size: 13px;
}

.ls-coa-row {
    display: grid;
    grid-template-columns: minmax(220px, 2.4fr) 1.3fr 1.2fr 1fr 1.2fr auto;
    align-items: center;
    gap: 12px;
    padding: 7px 4px;
    border-bottom: 1px solid var(--ls-hairline);
}

.ls-coa-row:hover:not(.ls-coa-head) {
    background-color: var(--colorSubtleBackgroundHover);
}

.ls-coa-head {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--colorNeutralForeground3);
}

.ls-coa-name {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.ls-coa-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Elbow marking a child row's relationship to the row above it. */
.ls-coa-guide {
    color: var(--colorNeutralForeground4);
    font-size: 12px;
    line-height: 1;
}

.ls-coa-system {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ls-gold);
    border: 1px solid var(--ls-gold);
    border-radius: var(--borderRadiusSmall);
    padding: 1px 5px;
}

.ls-coa-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

/* Inline create / rename / move panel, rendered under the row it acts on. */
.ls-coa-form {
    width: 100%;
    padding: 12px;
    margin: 4px 0 10px 0;
    border: 1px solid var(--ls-hairline);
    border-radius: var(--borderRadiusMedium);
    background: var(--colorNeutralBackground2);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ---------------------------------------------------------------------------
 * Misc
 * ------------------------------------------------------------------------- */
.ls-toolbar {
    display: flex;
    align-items: end;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
}

.ls-toolbar .spacer { flex: 1 1 auto; }

/* ---------------------------------------------------------------------------
 * Financial statements (#493): a printed-statement layout - section headers, lines, the IFRS 18
 * subtotals drawn under the section they close, the two closing totals ruled off.
 * ------------------------------------------------------------------------- */
.ls-basis-note {
    font-size: 12px;
    color: var(--colorNeutralForeground3);
    margin: 4px 0 8px;
}

.ls-statement {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ls-statement th {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--colorNeutralForeground3);
    text-align: left;
    padding: 6px 9px;
    border-bottom: 1px solid var(--ls-hairline);
}

.ls-statement td {
    padding: 5px 9px;
    border-bottom: 1px solid var(--ls-hairline);
    vertical-align: middle;
}

.ls-statement td .num { display: block; }

.ls-statement-section td {
    padding-top: 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--colorBrandForeground1);
    border-bottom: none;
}

.ls-statement-line { padding-left: 24px !important; }
.ls-statement-category { color: var(--colorNeutralForeground3); }

/* #494: the explanatory line under a form control (the portfolio's net-settlement flag). */
.ls-field-hint {
    margin-top: 4px;
    font-size: var(--fontSizeBase200);
    color: var(--colorNeutralForeground3);
}

.ls-statement-subtotal td {
    font-weight: 600;
    border-top: 1px solid var(--colorNeutralStroke1);
    background-color: var(--colorSubtleBackgroundHover);
}

.ls-statement-total td {
    font-weight: 700;
    border-top: 2px solid var(--colorNeutralStroke1);
    border-bottom: 3px double var(--colorNeutralStroke1);
}

/* Prose reference table used by settings help text (#489's reporting-currency impact table). */
.ls-help-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ls-help-table th,
.ls-help-table td {
    text-align: left;
    vertical-align: top;
    padding: 8px 12px;
    border-bottom: 1px solid var(--colorNeutralStroke2);
}

.ls-help-table th { color: var(--colorNeutralForeground3); font-weight: 600; }
.ls-help-table td:first-child { width: 32%; color: var(--colorNeutralForeground2); }

/* Definition rows on details pages. */
.ls-kv-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--colorNeutralForeground3);
}

/* ---------------------------------------------------------------------------
 * Statement pages (#499, epic #488 WP10): the shared chrome, the tie-out rail,
 * the ledger↔FV bridge and the per-line data-quality chips.
 * ------------------------------------------------------------------------- */
.ls-statements-chrome .ls-toolbar { margin-bottom: 10px; }

.ls-statements-layout {
    display: grid;
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    gap: 16px;
    width: 100%;
    align-items: start;
}

.ls-statements-rail {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 12px;
}

.ls-statements-body { min-width: 0; }

/* The statement table scrolls inside its card on narrow screens; the page never scrolls sideways. */
.ls-statement-scroll { width: 100%; overflow-x: auto; }

@media (max-width: 1100px) {
    .ls-statements-layout { grid-template-columns: 1fr; }
    .ls-statements-rail { position: static; order: 2; }
    .ls-statements-body { order: 1; }
}

/* #555: the page names no period of its own, so this is what it opens on. */
.ls-statements-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    padding: 32px 24px;
}

.ls-statements-empty h3 { margin: 0; }

.ls-statements-empty p {
    margin: 0;
    max-width: 62ch;
    color: var(--colorNeutralForeground3);
}

.ls-quickpicks { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }

.ls-statement-switch { display: flex; gap: 4px; align-items: end; flex-wrap: wrap; }

.ls-segmented { display: flex; gap: 4px; align-items: end; }

.ls-segmented-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--colorNeutralForeground3);
    align-self: center;
    margin-right: 2px;
}

.ls-period-nav { display: flex; gap: 6px; align-items: center; }

.ls-period-label {
    min-width: 84px;
    text-align: center;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ls-currency-chip { white-space: nowrap; }

.ls-lock-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--ls-gold);
    color: var(--ls-gold);
    background: color-mix(in srgb, var(--ls-gold) 10%, transparent);
    white-space: nowrap;
}

/* Per-line data-quality chips (missing rate, stale price, unclassified, suspense). */
.ls-line-chip {
    display: inline-block;
    margin-left: 6px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    vertical-align: middle;
}

.ls-line-chip.warn {
    color: var(--ls-gold);
    border: 1px solid color-mix(in srgb, var(--ls-gold) 55%, transparent);
    background: color-mix(in srgb, var(--ls-gold) 10%, transparent);
}

.ls-line-chip.err {
    color: var(--ls-negative);
    border: 1px solid color-mix(in srgb, var(--ls-negative) 55%, transparent);
    background: color-mix(in srgb, var(--ls-negative) 10%, transparent);
}

/* #536: a pooled cession's acquisition dates - as many chips as the match consumed lots, wrapped
   rather than truncated, because dropping one would drop a duration a return is computed on. */
.ls-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 3px 0;
    align-items: center;
}

.ls-chips .ls-line-chip:first-child {
    margin-left: 0;
}

/* #498: the row's IFRS↔GAAP divergence note. */
.ls-framework-note {
    display: inline-block;
    margin-left: 6px;
    padding: 0 7px;
    border-radius: 3px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--colorBrandForeground1);
    border: 1px dashed var(--colorBrandForeground1);
    white-space: nowrap;
    vertical-align: middle;
    cursor: help;
}

/* #499: a Suspense balance is a red line on the statement it pollutes. */
.ls-suspense-row td {
    background: color-mix(in srgb, var(--ls-negative) 8%, transparent);
}

.ls-suspense-row td:first-child {
    box-shadow: inset 3px 0 0 var(--ls-negative);
}

/* Tie-out rail: the reconciliation to-do list. */
.ls-tieout-rail { display: flex; flex-direction: column; gap: 4px; }

.ls-tieout-rail-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--colorNeutralForeground3);
    margin-bottom: 2px;
}

.ls-tieout-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 5px 8px;
    border: 1px solid transparent;
    border-radius: var(--borderRadiusMedium);
    background: transparent;
    font: inherit;
    font-size: 12.5px;
    color: var(--colorNeutralForeground1);
    text-align: left;
    cursor: pointer;
}

.ls-tieout-chip:hover { background: var(--colorSubtleBackgroundHover); }
.ls-tieout-chip.selected { border-color: var(--colorNeutralStroke1); background: var(--colorSubtleBackgroundSelected); }

.ls-tieout-chip .ls-tieout-dot { width: 14px; text-align: center; }
.ls-tieout-chip.pass .ls-tieout-dot { color: var(--ls-positive); }
.ls-tieout-chip.warn .ls-tieout-dot { color: var(--ls-gold); }
.ls-tieout-chip.fail .ls-tieout-dot { color: var(--ls-negative); }
.ls-tieout-chip.na { color: var(--colorNeutralForeground4); }

.ls-tieout-id {
    font-family: var(--fontFamilyMonospace);
    font-weight: 700;
    min-width: 30px;
}

.ls-tieout-chip .ls-tieout-title {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--colorNeutralForeground2);
}

.ls-tieout-status { font-size: 11px; font-weight: 700; }
.ls-tieout-chip.pass .ls-tieout-status { color: var(--ls-positive); }
.ls-tieout-chip.warn .ls-tieout-status { color: var(--ls-gold); }
.ls-tieout-chip.fail .ls-tieout-status { color: var(--ls-negative); }

/* #626: the period's summary of unadjusted differences under the chips - the external family's
   verdict on the net, with the thresholds that produced it. Same vocabulary as a chip, not a button. */
.ls-tieout-sud {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 6px;
    padding: 5px 8px;
    border-top: 1px solid var(--colorNeutralStroke2);
    font-size: 12px;
    color: var(--colorNeutralForeground1);
}
.ls-tieout-sud .ls-tieout-dot { width: 14px; text-align: center; }
.ls-tieout-sud .ls-tieout-status { font-weight: 400; flex-basis: 100%; }
.ls-tieout-sud.pass .ls-tieout-dot { color: var(--ls-positive); }
.ls-tieout-sud.warn .ls-tieout-dot { color: var(--ls-gold); }
.ls-tieout-sud.fail .ls-tieout-dot { color: var(--ls-negative); }
.ls-tieout-sud.fail .ls-tieout-status { color: var(--ls-negative); font-weight: 700; }
.ls-tieout-sud.na { color: var(--colorNeutralForeground4); }

.ls-tieout-detail {
    margin-top: 6px;
    padding: 10px;
    border: 1px solid var(--ls-hairline);
    border-radius: var(--borderRadiusMedium);
    background: var(--colorNeutralBackground2);
    font-size: 12.5px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ls-tieout-detail-title { font-weight: 700; }
.ls-tieout-assertion { color: var(--colorNeutralForeground2); }
.ls-tieout-message { color: var(--colorNeutralForeground3); }

.ls-tieout-deltas { width: 100%; border-collapse: collapse; font-size: 12px; }

.ls-tieout-deltas th {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--colorNeutralForeground3);
    text-align: left;
    padding: 2px 6px;
    border-bottom: 1px solid var(--ls-hairline);
}

.ls-tieout-deltas td { padding: 2px 6px; border-bottom: 1px solid var(--ls-hairline); }
.ls-tieout-deltas th.num, .ls-tieout-deltas td .num { text-align: right; display: block; font-variant-numeric: tabular-nums; }

.ls-tieout-item { padding: 2px 0; }
.ls-tieout-item.fail { color: var(--ls-negative); }
.ls-tieout-item.warn { color: var(--ls-gold); }

/* Ledger↔FV bridge. */
.ls-bridge { display: flex; flex-direction: column; gap: 6px; }

.ls-bridge-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }

.ls-bridge-table td { padding: 4px 6px; border-bottom: 1px solid var(--ls-hairline); }
.ls-bridge-table td:last-child { text-align: right; }
.ls-bridge-table td .num { font-variant-numeric: tabular-nums; }

.ls-bridge-total td {
    font-weight: 700;
    border-top: 1px solid var(--colorNeutralStroke1);
    background: var(--colorSubtleBackgroundHover);
}

.ls-data-quality { align-self: center; }

/* ---------------------------------------------------------------------------------------------
   #500 (epic #488 WP11): the evidence panel — the right drawer every statement figure, tie-out
   chip and warning chip opens into — plus the clickable number cells that open it.
   --------------------------------------------------------------------------------------------- */

/* Every number clickable (P5): the cell renders as a button when it has evidence to open. */
.ls-cell-btn {
    border: none;
    background: transparent;
    font: inherit;
    padding: 0;
    cursor: pointer;
    color: inherit;
    border-bottom: 1px dotted var(--colorNeutralStroke1);
}

.ls-cell-btn:hover { border-bottom-color: var(--colorBrandForeground1); background: var(--colorSubtleBackgroundHover); }
.ls-cell-btn .num { display: inline; }

.ls-chip-btn { cursor: pointer; font: inherit; border: none; }

.ls-evidence-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(680px, 94vw);
    z-index: 60;
    display: flex;
    flex-direction: column;
    background: var(--colorNeutralBackground1);
    border-left: 1px solid var(--ls-hairline);
    box-shadow: var(--shadow16);
}

.ls-evidence-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--ls-hairline);
}

.ls-evidence-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--colorNeutralForeground3);
}

.ls-evidence-title { font-weight: 700; font-size: 15px; }

.ls-evidence-body {
    padding: 12px 16px 20px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 13px;
}

.ls-evidence-total { font-weight: 600; }

.ls-evidence-lines { width: 100%; border-collapse: collapse; font-size: 12.5px; }

/* A dense evidence table scrolls inside the drawer; the drawer never scrolls sideways. */
.ls-evidence-body .ls-evidence-lines { display: block; overflow-x: auto; }

.ls-evidence-lines th {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--colorNeutralForeground3);
    text-align: left;
    padding: 3px 6px;
    border-bottom: 1px solid var(--ls-hairline);
}

.ls-evidence-lines td { padding: 3px 6px; border-bottom: 1px solid var(--ls-hairline); vertical-align: top; }
.ls-evidence-lines th.num, .ls-evidence-lines td .num { text-align: right; font-variant-numeric: tabular-nums; }
.ls-evidence-lines td .num { display: block; }

.ls-evidence-rates td { padding-top: 0; }

.ls-rate-chip {
    display: inline-block;
    margin: 1px 4px 1px 0;
    padding: 1px 6px;
    border: 1px solid var(--ls-hairline);
    border-radius: var(--borderRadiusMedium);
    background: var(--colorNeutralBackground2);
    font-family: var(--fontFamilyMonospace);
    font-size: 11px;
    color: var(--colorNeutralForeground2);
}

.ls-evidence-item {
    padding: 8px 10px;
    border: 1px solid var(--ls-hairline);
    border-radius: var(--borderRadiusMedium);
    background: var(--colorNeutralBackground2);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ls-evidence-item.fail { border-color: var(--ls-negative); }
.ls-evidence-item.warn { border-color: var(--ls-gold); }

.ls-evidence-item-head { display: flex; gap: 6px; font-weight: 600; align-items: baseline; }
.ls-evidence-item.fail .ls-tieout-dot { color: var(--ls-negative); }
.ls-evidence-item.warn .ls-tieout-dot { color: var(--ls-gold); }

.ls-evidence-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* #537 (epic #530 D7): the tax pack's stamp — the inputs a filed pack reproduces from, as a
   definition list rather than a table, because they are facts about the document and not figures in
   it. Wide values wrap; nothing here is numeric enough to want tabular alignment except the amounts,
   which carry .num themselves. */
.ls-stamp {
    display: grid;
    grid-template-columns: minmax(160px, auto) 1fr;
    gap: 4px 16px;
    margin: 8px 0 0;
}

.ls-stamp dt {
    font-weight: 600;
    color: var(--colorNeutralForeground2);
}

.ls-stamp dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* #544 (epic #541 F3): FX by currency. A memo column is a broker convention reproduced for statement
   parity, not an accounting figure, so it is set apart visually as well as in words - and an absent
   figure is an em dash carrying the rule that withheld it, never a zero somebody could add up. */
.ls-memo { color: var(--ls-text-secondary, #616161); font-variant-numeric: tabular-nums; }
.ls-absent { color: var(--ls-text-secondary, #616161); cursor: help; }
.ls-row-tag {
    margin-inline-start: 6px;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 11px;
    letter-spacing: 0.02em;
    background: var(--ls-surface-sunken, #ecebe4);
    color: var(--ls-text-secondary, #616161);
    cursor: help;
}