/* ===========================================================================
   Design direction C -- "Ledger": editorial, warm, typographic.

   Scoped under html[data-design="ledger"], so inert until selected.

   The personality here is the type pairing, not the palette: Fraunces (a
   high-contrast serif) on page titles and the big figures, a grotesque
   everywhere else. Warm paper neutrals instead of cool grey, a deep forest
   accent with brass for highlights, and hairline rules doing the structural
   work that cards and shadows do in the other two directions.
   =========================================================================== */

html[data-design="ledger"] {
    /* Warm paper, not cool grey. No pure white and no pure black anywhere. */
    --surface-lowest: #fffdf8;
    --surface-low: #f7f2e8;
    --surface: #f1ebdd;
    --surface-high: #eae2d1;
    --surface-highest: #e0d6c2;
    --surface-bg: #faf6ee;
    /* bg-body-tertiary paints from the -rgb form, so the page ground needs
       this as well as --surface-bg. */
    --bs-tertiary-bg-rgb: 250, 246, 238;
    --on-surface: #241f1a;
    --on-surface-variant: #5c5349;
    --outline: #8a7f72;
    --outline-variant: #ddd3c2;

    --inverse-surface: #2b241d;
    --inverse-surface-deep: #211b15;
    --inverse-on-surface: #f3ece0;

    /* app.css hardcodes the rail's palette instead of deriving it, so each
       direction has to restate it or the sidebar stays baseline navy. */
    --app-sidebar-bg: #2b241d;
    --app-sidebar-header-bg: #211b15;
    --app-sidebar-fg: #b7a893;

    --accent-700: #113a28;
    --accent-600: #1b5e3f;
    --accent-500: #277852;
    --accent-400: #3a9268;
    --accent-200: #a8d4bd;
    --accent-100: #d6ebe0;
    --accent-50: #eaf5ef;

    /* Brass: eyebrow labels, the active nav item. Never a primary action --
       that stays forest green. */
    --ledger-brass: #9a6f1f;
    --ledger-brass-soft: #c89a3c;
    --ledger-rule: rgba(36, 31, 26, .14);

    --status-success: #1b5e3f;
    --status-success-bg: #e2f0e8;
    --status-success-border: #a8d4bd;
    --status-danger: #99321f;
    --status-danger-bg: #f8e4df;
    --status-danger-border: #e0b3a7;
    --status-warning: #8a5f12;
    --status-warning-bg: #f7eccf;
    --status-warning-border: #ddc387;

    --bs-primary: #1b5e3f;
    --bs-primary-rgb: 27, 94, 63;
    --bs-link-color-rgb: 27, 94, 63;
    --bs-link-hover-color-rgb: 17, 58, 40;
    --bs-success-rgb: 27, 94, 63;
    --bs-danger-rgb: 153, 50, 31;
    --bs-warning-rgb: 138, 95, 18;
    --bs-emphasis-color: #140f0b;

    --bs-font-sans-serif: 'Open Sans', Inter, system-ui, sans-serif;
    --ledger-display: 'Fraunces', Georgia, 'Times New Roman', serif;

    /* Small and sharp, like print. */
    --bs-border-radius: 4px;
    --bs-border-radius-sm: 3px;
    --bs-border-radius-lg: 4px;
    --bs-border-radius-xl: 6px;
    --bs-card-border-radius: 4px;
    --elev-1: 0 1px 0 rgba(36, 31, 26, .05);
    --elev-2: 2px 3px 0 rgba(36, 31, 26, .10);
    --bs-card-box-shadow: var(--elev-1);
}

html[data-design="ledger"][data-bs-theme="dark"] {
    --surface-lowest: #241f1a;
    --surface-low: #2b2520;
    --surface: #322b24;
    --surface-high: #3b332b;
    --surface-highest: #473d33;
    --surface-bg: #1b1713;
    /* bg-body-tertiary paints from the -rgb form, so the page ground needs
       this as well as --surface-bg. */
    --bs-tertiary-bg-rgb: 27, 23, 19;
    --on-surface: #f3ece0;
    --on-surface-variant: #c3b7a6;
    --outline: #9b8e7e;
    --outline-variant: #453b31;

    --inverse-surface: #1b1713;
    --inverse-surface-deep: #141110;
    --inverse-on-surface: #f3ece0;

    --accent-700: #d6ebe0;
    --accent-600: #86c7a5;
    --accent-500: #6bb38f;
    --accent-400: #4e9a76;
    --accent-200: #2a5742;
    --accent-100: #214334;
    --accent-50: #1b3529;

    --ledger-brass: #d7a94c;
    --ledger-brass-soft: #e0bc70;
    --ledger-rule: rgba(243, 236, 224, .14);

    --status-success: #86c7a5;
    --status-success-bg: #16281f;
    --status-success-border: #2a5742;
    --status-danger: #e8a08c;
    --status-danger-bg: #2e1711;
    --status-danger-border: #6b3022;
    --status-warning: #e3bd6b;
    --status-warning-bg: #2c2210;
    --status-warning-border: #6b5520;

    --bs-primary-rgb: 134, 199, 165;
    --bs-link-color-rgb: 134, 199, 165;
    --bs-link-hover-color-rgb: 214, 235, 224;
    --bs-success-rgb: 134, 199, 165;
    --bs-danger-rgb: 232, 160, 140;
    --bs-warning-rgb: 227, 189, 107;
    --bs-emphasis-color: #fffdf8;
    --elev-1: none;
    --elev-2: 2px 3px 0 rgba(0, 0, 0, .4);
}

/* --- the type pairing, which is the whole personality -------------------- */

html[data-design="ledger"] h1,
html[data-design="ledger"] .h1,
html[data-design="ledger"] h1.h3,
html[data-design="ledger"] .kpi-value {
    font-family: var(--ledger-display);
    font-weight: 600;
    letter-spacing: -.015em;
}

html[data-design="ledger"] h1,
html[data-design="ledger"] .h1,
html[data-design="ledger"] h1.h3 {
    font-size: 2rem;
}

html[data-design="ledger"] .kpi-value {
    font-size: 1.9rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums lining-nums;
}

/* A rule under the page heading: the structural move this direction uses
   instead of wrapping the header in a card. */
html[data-design="ledger"] .app-main > .d-flex:first-child,
html[data-design="ledger"] .page-head {
    border-bottom: 1px solid var(--ledger-rule);
    padding-bottom: .75rem;
}

/* --- hairlines instead of cards ------------------------------------------ */

html[data-design="ledger"] .card,
html[data-design="ledger"] .filter-bar {
    border: 1px solid var(--ledger-rule);
    box-shadow: var(--elev-1);
    background: var(--surface-lowest);
}

/* The KPI strip: figures divided by vertical rules, no boxes at all. */
html[data-design="ledger"] .kpi-row {
    gap: 0;
    background: transparent;
    border-top: 1px solid var(--ledger-rule);
    border-bottom: 1px solid var(--ledger-rule);
}

html[data-design="ledger"] .kpi-card {
    background: transparent;
    border: 0;
    border-left: 1px solid var(--ledger-rule);
    border-radius: 0;
    box-shadow: none;
}

html[data-design="ledger"] .kpi-row > [class*="col"]:first-child .kpi-card {
    border-left: 0;
}

html[data-design="ledger"] .kpi-card .card-body {
    padding: 1rem 1.15rem !important;
}

/* Labels are brass small-caps eyebrows, not grey chrome. */
html[data-design="ledger"] .kpi-card .kpi-label {
    color: var(--ledger-brass);
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .14em;
}

html[data-design="ledger"] .kpi-card .kpi-label i {
    color: var(--ledger-brass);
}

/* The dashboard's five tiles are .stat-card, a separate component from the
   reports' .kpi-card -- it needs the serif numeral treatment too, or the first
   screen anybody opens misses the whole personality. */
html[data-design="ledger"] .stat-card {
    background: transparent;
    border: 0 !important;
    border-left: 1px solid var(--ledger-rule) !important;
    border-radius: 0;
    box-shadow: none;
}

html[data-design="ledger"] .row > [class*="col"]:first-child .stat-card {
    border-left: 0 !important;
}

html[data-design="ledger"] .stat-value {
    font-family: var(--ledger-display);
    font-size: 2.3rem;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums lining-nums;
}

html[data-design="ledger"] .stat-card .small {
    font-variant: small-caps;
    letter-spacing: .1em;
    color: var(--ledger-brass) !important;
    font-weight: 600;
}

html[data-design="ledger"] .stat-card .bi {
    color: var(--outline) !important;
    opacity: .5 !important;
}

/* --- chrome -------------------------------------------------------------- */

html[data-design="ledger"] .sidebar-link.active {
    background: rgba(215, 169, 76, .16);
    color: var(--ledger-brass-soft);
    border-left: 2px solid var(--ledger-brass-soft);
    border-radius: 0 4px 4px 0;
}

html[data-design="ledger"] .sidebar-link.active i {
    color: var(--ledger-brass-soft);
}

html[data-design="ledger"] .sidebar-heading {
    font-variant: small-caps;
    text-transform: none;
    letter-spacing: .1em;
    color: var(--ledger-brass-soft);
    opacity: .85;
}

/* Understated bordered tags rather than filled pills -- the print equivalent
   of a status chip. */
html[data-design="ledger"] .badge {
    border-radius: 3px;
    background: transparent !important;
    border: 1px solid currentColor;
    font-weight: 600;
    letter-spacing: .04em;
}

html[data-design="ledger"] .badge.text-bg-success { color: var(--status-success) !important; }
html[data-design="ledger"] .badge.text-bg-danger { color: var(--status-danger) !important; }
html[data-design="ledger"] .badge.text-bg-warning { color: var(--status-warning) !important; }
html[data-design="ledger"] .badge.text-bg-secondary { color: var(--on-surface-variant) !important; }

html[data-design="ledger"] .btn {
    border-radius: 4px;
    font-weight: 600;
    letter-spacing: .01em;
}

html[data-design="ledger"] .btn-primary {
    border: 1px solid var(--accent-700);
}

html[data-design="ledger"] .table > thead th {
    font-variant: small-caps;
    text-transform: none;
    letter-spacing: .08em;
    font-size: .75rem;
    color: var(--on-surface-variant);
    border-bottom: 1px solid var(--ledger-rule);
}

html[data-design="ledger"] .table > tbody > tr > td {
    border-bottom-color: var(--ledger-rule);
}

html[data-design="ledger"] .app-topbar {
    background: var(--surface-bg);
    border-bottom: 1px solid var(--ledger-rule);
}