/* sc-chrome.css — the St. Clair page chrome in Don's design grammar.
   Loaded on pages OUTSIDE the Income page (which carries its own copy of
   these rules inside income-design.css — keep the two in step; the source
   of truth for values is window.IncomeTheme / income-theme.js).
   v1 · 2026-08-31 */

:root {
    /* Don's green scheme (8/25 call: "we should update them the way I have
       them… that's purposeful") — values mirror APP_C in his 8/22 file. */
    --sc-paper: #EBEDE6;        /* page field — his sage paper */
    --sc-card: #F6F7F2;         /* canvas card — his card */
    --sc-panel: #FCFCFA;        /* detail/input card — his rail */
    --sc-line: #FFFFFF;         /* line-item chip inside cards */
    --sc-ink: #22281F;
    --sc-ink-soft: #5E665C;
    --sc-ink-faint: #9AA094;
    --sc-hair: #D2D6CA;         /* his hair — greener than the old #E2E2E2 */
    --sc-gold: #B07C2A;         /* his accent (was #B07C2A) */
    --sc-gold-deep: #8A5E1E;    /* his accentDeep */
    --sc-green: #2E6B57;
    --sc-red: #B23A2E;
    --sc-serif: 'Fraunces', Georgia, serif;
    --sc-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --sc-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
    --sc-shadow: 0 1px 2px rgba(34, 40, 31, .05), 0 4px 16px rgba(34, 40, 31, .04);
}

body { background: var(--sc-paper); }

/* ═════════ PAGE CHROME (8/31): one paper field, no patchwork ═════════
   Clint: the page read as four design eras stacked — white Bootstrap
   header, saturated #B97A2B band, floating white strip, then Don's world.
   This pass pulls the chrome into the same grammar the cards already
   speak: paper everywhere, one card tone, Fraunces for identity, accent
   gold only as punctuation. Scoped here because this sheet loads only on
   the Income page; roll the same tokens to Paychecks/DebtToolz when
   those pages are modernized. */

/* — 1 · Top utility bar: card tone over paper, hairline seam — */
body .custom-navbar {
    background: var(--sc-card);
    border-bottom: 1px solid var(--sc-hair);
}
body .custom-navbar.navbar-light .navbar-nav .nav-link {
    font-family: var(--sc-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--sc-ink-soft);
    letter-spacing: .01em;
}
body .custom-navbar.navbar-light .navbar-nav .nav-link:hover,
body .custom-navbar.navbar-light .navbar-nav .nav-link.active {
    color: var(--sc-ink);
}
body .custom-navbar .search-client,
body .custom-navbar input[type="search"] {
    background: #FFFFFF;
    border: 1px solid var(--sc-hair);
    border-radius: 8px;
    box-shadow: none;
    font-family: var(--sc-sans);
    font-size: 13px;
    color: var(--sc-ink);
}
body .custom-navbar .search-client:focus {
    border-color: var(--sc-gold);
    box-shadow: 0 0 0 3px rgba(176, 124, 42, 0.16);
}
/* ADD NEW CLIENT: the one accent in the utility bar, on the theme gold */
body .custom-navbar .btn-secondary {
    background-color: var(--sc-gold);
    border-color: var(--sc-gold);
    letter-spacing: .06em;
}
body .custom-navbar .btn-secondary:hover {
    background-color: var(--sc-gold-deep, #8A5E1E);
    border-color: var(--sc-gold-deep, #8A5E1E);
}

/* — 2 · The gold band dissolves into the paper — */
body .bgright-heading {
    background-color: var(--sc-paper);
    padding-top: 18px;
    padding-bottom: 0;
}
/* Section tabs: quiet uppercase labels; active carries the gold underline */
body .bgright-heading .custom-nav a {
    font-family: var(--sc-sans);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--sc-ink-soft) !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    padding: 6px 2px 10px;
    margin-right: 26px;
}
body .bgright-heading .custom-nav a:hover { color: var(--sc-ink) !important; }
body .bgright-heading .custom-nav a.active {
    color: var(--sc-ink) !important;
    border-bottom-color: var(--sc-gold) !important;
}
/* Household identity: Fraunces ink on paper — Don's serif-for-people rule */
body .bgright-heading .text2,
body .bgright-heading .text2 a {
    font-family: var(--sc-serif);
    font-size: 23px;
    font-weight: 600;
    color: var(--sc-ink) !important;
    text-decoration: none;
}
/* The baked-white PNGs are gone (8/31): the id-card trigger is an inline
   SVG and REDTAIL a real pill — crisp glyphs, real type, themeable. */
body .bgright-heading .sc-idcard { color: var(--sc-ink-faint); }
body .bgright-heading a:hover .sc-idcard { color: var(--sc-ink); opacity: 1; }
body .bgright-heading .redtail-pill {
    border: 1px solid var(--sc-hair);
    color: var(--sc-ink-soft);
    background: #FFFFFF;
    font-family: var(--sc-sans);
    font-weight: 600;
}
body .bgright-heading a:hover .redtail-pill {
    border-color: var(--sc-ink-soft);
    color: var(--sc-ink);
}

/* — 3 · Controls strip sits ON the paper, not on a white slab — */
#income .whitebg { padding: 10px 26px 2px; }
#income .whitebg .form-check-label,
#income .whitebg .controlS,
#income .whitebg .line-section {
    font-family: var(--sc-sans);
    font-size: 13px;
    color: var(--sc-ink-soft);
}
#income .whitebg .form-check-input:checked {
    background-color: var(--sc-gold);
    border-color: var(--sc-gold);
}

/* — 4 · One card, one interior tone: kill the card-in-card echo — */
/* The milestone strip and the right panel become RAIL wells inside the
   big canvas card, separated by hairlines — not more white sheets. */
#income .ms-strip {
    background: var(--sc-panel) !important;
    border: 1px solid var(--sc-hair) !important;
}
[id$="-side-content"] {
    background: var(--sc-panel) !important;
    border-left: 1px solid var(--sc-hair);
    border-radius: 0 12px 12px 0;
    padding: 12px 16px 16px !important;
}
/* The old band's active-tab pointer (tringle-img.png at top:48px) now
   floats disconnected under the label — the gold underline replaced it. */
body .bgright-heading ul.custom-nav li a.active::after { display: none; }

/* Panel tab row: keep the ⇥ collapse control on the SAME line, right-
   aligned — it was wrapping onto its own empty row. The mount div's
   child UL is the real row. */
[id$="-react-tabs"] > ul {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: baseline;
    border-bottom: 1px solid var(--sc-hair) !important;
    margin-bottom: 10px;
}
[id$="-react-tabs"] .im-collapse-item { margin-left: auto; }
[id$="-react-tabs"] .im-collapse-btn {
    border: 0;
    background: transparent;
    color: var(--sc-ink-faint, #9AA094);
    font-size: 14px;
    cursor: pointer;
}
[id$="-react-tabs"] .im-collapse-btn:hover { color: var(--sc-ink); }



/* ————— /home (Clients) ————————————————————————————————— */
.bggray-heading { background: var(--sc-paper) !important; padding-top: 18px; }
.bggray-heading h2 {
    font-family: var(--sc-serif);
    font-size: 26px;
    font-weight: 600;
    color: var(--sc-ink);
    margin: 0;
}
/* The client table becomes a canvas card with quiet rows */
.table-responsive {
    background: var(--sc-card);
    border: 1px solid var(--sc-hair);
    border-radius: 14px;
    padding: 6px 18px 10px;
    box-shadow: var(--sc-shadow);
}
table.custom-table { --bs-table-striped-bg: transparent; margin-bottom: 4px; }
table.custom-table thead th {
    font-family: var(--sc-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sc-ink-soft);
    background: transparent;
    border-bottom: 1px solid var(--sc-hair);
    padding: 14px 10px 10px;
}
table.custom-table tbody td {
    font-family: var(--sc-sans);
    font-size: 13px;
    color: var(--sc-ink);
    background: transparent;
    border-bottom: 1px solid var(--sc-hair);
    padding: 11px 10px;
    vertical-align: middle;
}
table.custom-table tbody tr:last-child td { border-bottom: none; }
table.custom-table tbody tr:hover td { background: #FFFFFF; }
table.custom-table a.client, table.custom-table .client {
    font-size: 13px;
    color: var(--sc-ink);
    text-decoration: none;
    margin: 0;
}
table.custom-table a.client:hover { color: var(--sc-gold-deep); }

/* Action links in the table: theme, not Bootstrap blue */
table.custom-table a:not(.client) {
    color: var(--sc-gold-deep);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}
table.custom-table a:not(.client):hover { color: var(--sc-ink); }

/* ═════════ Settings + Admin pages (9/01) ═════════
   Same tokens as the Income page, applied to the legacy Bootstrap
   vocabulary these pages share: .bggray-heading bands, .custom-nav-tabs
   sub-navigation, .whitebg blocks, tables, forms and buttons. Loaded from
   the layout head, so any page-specific sheet (income-design.css, which
   loads in the body) still wins. */

/* — page heading band: was a #919da0 gray slab — */
.bggray-heading {
    background: var(--sc-paper) !important;
    padding-top: 20px !important;
    padding-bottom: 6px !important;
}
.bggray-heading h2 {
    font-family: var(--sc-serif);
    font-size: 26px;
    font-weight: 600;
    color: var(--sc-ink);
    margin: 0;
}

/* — settings / sub-page tab bar — */
.custom-nav-tabs { border-bottom: 1px solid var(--sc-hair); gap: 4px; }
.custom-nav-tabs .nav-link {
    font-family: var(--sc-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sc-ink-soft);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 8px 2px 10px;
    margin-right: 24px;
}
.custom-nav-tabs .nav-link:hover { color: var(--sc-ink); }
.custom-nav-tabs .nav-link.active {
    color: var(--sc-ink) !important;
    background: transparent !important;
    border-bottom-color: var(--sc-gold) !important;
}

/* — content blocks become canvas cards on the paper — */
.whitebg,
.whitebg-card-block {
    background: var(--sc-card) !important;
    border: 1px solid var(--sc-hair);
    border-radius: 14px;
    box-shadow: var(--sc-shadow);
    margin-left: 0;
    margin-right: 0;
}
.whitebg h4, .whitebg h5, .whitebg-card-block h4,
.settingtext h4, .settingtext h3 {
    font-family: var(--sc-serif);
    font-weight: 600;
    color: var(--sc-gold-deep);
}

/* — tables: quiet labels, hairline rows (category colors stay: they carry
     meaning, and they arrive as inline styles anyway) — */
table thead th {
    font-family: var(--sc-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--sc-ink-soft);
    border-bottom: 1px solid var(--sc-hair);
}
table tbody td {
    font-family: var(--sc-sans);
    font-size: 13px;
    color: var(--sc-ink);
    border-color: var(--sc-hair);
    vertical-align: middle;
}

/* — forms read as fields — */
.form-control, .form-select,
input[type="text"], input[type="number"], input[type="email"],
input[type="password"], select, textarea {
    font-family: var(--sc-sans);
    font-size: 13px;
    color: var(--sc-ink);
    background-color: #FFFFFF;
    border: 1px solid var(--sc-hair);
    border-radius: 8px;
    box-shadow: none;
}
.form-control:focus, .form-select:focus,
input:focus, select:focus, textarea:focus {
    border-color: var(--sc-gold);
    box-shadow: 0 0 0 3px rgba(176, 124, 42, .16);
    outline: none;
}
label, .form-label {
    font-family: var(--sc-sans);
    font-size: 12.5px;
    color: var(--sc-ink-soft);
}
.form-check-input:checked {
    background-color: var(--sc-gold);
    border-color: var(--sc-gold);
}

/* — buttons: charcoal primary, gold secondary. Bootstrap blue is retired
     from these pages (it was #3A71C4). — */
.btn-primary {
    background-color: var(--sc-ink) !important;
    border-color: var(--sc-ink) !important;
    color: #FFFFFF !important;
    border-radius: 999px;
    font-family: var(--sc-sans);
    font-weight: 600;
    letter-spacing: .06em;
}
.btn-primary:hover { background-color: #3A4136 !important; border-color: #3A4136 !important; }
.btn-secondary {
    background-color: var(--sc-gold) !important;
    border-color: var(--sc-gold) !important;
    color: #FFFFFF !important;
    border-radius: 999px;
    font-family: var(--sc-sans);
    font-weight: 600;
    letter-spacing: .06em;
}
.btn-secondary:hover { background-color: var(--sc-gold-deep) !important; border-color: var(--sc-gold-deep) !important; }
.btn-outline-secondary, .btn-light {
    border-radius: 999px;
    font-family: var(--sc-sans);
    font-weight: 600;
}

/* — links off Bootstrap blue — */
.whitebg a:not(.btn):not(.nav-link),
.bggray-heading a:not(.btn),
main a:not(.btn):not(.nav-link):not(.dropdown-item) {
    color: var(--sc-gold-deep);
    text-decoration: none;
}
.whitebg a:not(.btn):not(.nav-link):hover,
main a:not(.btn):not(.nav-link):not(.dropdown-item):hover { color: var(--sc-ink); }

/* Checkboxes/radios off Bootstrap blue — these are bare inputs, not
   .form-check-input, so accent-color is the reliable lever. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--sc-gold); }

/* The settings tables paint rows with the CATEGORY's stored colour inline
   (legacy saturated hexes). The hue still carries meaning, so rather than
   overriding it, lay a translucent paper wash over the cell — an inset
   shadow tints the background and leaves the text alone. */
.whitebg table td[style*="background-color"],
.whitebg table td[style*="background:"] {
    box-shadow: inset 0 0 0 999px rgba(246, 247, 242, .5);
}

/* Outline buttons: Bootstrap blue → the theme's gold outline. */
.btn-outline-primary {
    color: var(--sc-gold-deep) !important;
    border-color: var(--sc-hair) !important;
    background: #FFFFFF !important;
    border-radius: 999px;
    font-family: var(--sc-sans);
    font-weight: 600;
}
.btn-outline-primary:hover {
    color: #FFFFFF !important;
    background: var(--sc-gold) !important;
    border-color: var(--sc-gold) !important;
}