:root {
    /* Structural colors - dark palette (default look) */
    --bg-page: #0f172a;
    --bg-card: #1e293b;
    --bg-input: #0f172a;
    --bg-hover: #334155;
    --border: #334155;
    --border-subtle: #1e293b;
    --border-muted: #475569;
    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-tertiary: #cbd5e1;
    --text-muted: #64748b;
    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.3);
    --shadow-modal: 0 10px 30px rgba(0, 0, 0, 0.4);
    --overlay-backdrop: rgba(0, 0, 0, 0.6);

    /* The budget grid/paycheck table's alternating row color - "Subtle"
       (the default, matches a user's zebra_style of the same name) is
       its own dedicated shade rather than reusing --bg-input, which in
       this dark palette happens to equal --bg-page - the darkest color
       in the whole theme - and read as a near-black stripe rather than
       a gentle one. body.zebra-bold/zebra-off below override just this
       one value, not the rules that use it, so those rules never need
       to change to support a new choice. */
    --zebra-stripe: #243244;

    /* Accent colors - same in both themes except where noted below */
    --accent-blue: #3b82f6;
    --accent-blue-hover: #2563eb;
    --link-blue: #60a5fa;
    --link-sky: #38bdf8;
    --accent-green: #4ade80;
    --accent-red: #f87171;
    --accent-amber: #fbbf24;
    --accent-violet: #a78bfa;

    --error-bg: #7f1d1d;
    --error-text: #fecaca;
    --success-bg: #14532d;
    --success-text: #bbf7d0;
    --warning-bg: #78350f;
}

/* Light palette override, applied when the logged-in user's saved theme is 'Light' */
body.theme-light {
    --bg-page: #f1f5f9;
    --bg-card: #ffffff;
    --bg-input: #f8fafc;
    --bg-hover: #e2e8f0;
    --border: #cbd5e1;
    --border-subtle: #e2e8f0;
    --border-muted: #94a3b8;
    --text-primary: #0f172a;
    --text-secondary: #64748b;
    --text-tertiary: #334155;
    --text-muted: #94a3b8;
    --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.1);
    --shadow-modal: 0 10px 30px rgba(15, 23, 42, 0.15);
    --overlay-backdrop: rgba(15, 23, 42, 0.5);

    /* The light-theme counterpart to :root's dedicated "Subtle" stripe
       shade above - see its comment for why this isn't just --bg-input. */
    --zebra-stripe: #eef2f7;

    --link-blue: #2563eb;
    --link-sky: #0284c7;
    --accent-green: #16a34a;
    --accent-red: #dc2626;
    --accent-amber: #b45309;
    --accent-violet: #7c3aed;

    --error-bg: #fee2e2;
    --error-text: #b91c1c;
    --success-bg: #dcfce7;
    --success-text: #15803d;
    --warning-bg: #fef3c7;
}

/* The other two zebra_style choices - works the same under either
   theme above, since --border-muted/--bg-card themselves already
   resolve correctly per-theme. */
body.zebra-bold {
    --zebra-stripe: var(--border-muted);
}
body.zebra-off {
    --zebra-stripe: var(--bg-card);
}

/* Color scheme choices, Light theme only (see Auth::bodyClasses()) - each
   retints the same three things: the zebra stripe, the primary accent
   (buttons, focus borders, the active tab underline) and the link color.
   'Blue' needs no class here since it's just the Light palette's
   original, unmodified look above. */
body.scheme-green {
    --zebra-stripe: #effbf1;
    --accent-blue: #22c55e;
    --accent-blue-hover: #16a34a;
    --link-blue: #15803d;
}
body.scheme-pink {
    --zebra-stripe: #fef1f8;
    --accent-blue: #ec4899;
    --accent-blue-hover: #db2777;
    --link-blue: #be185d;
}
body.scheme-yellow {
    --zebra-stripe: #fefbea;
    --accent-blue: #d97706;
    --accent-blue-hover: #b45309;
    --link-blue: #92400e;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--bg-page);
    color: var(--text-primary);
    min-height: 100vh;
    padding: 24px;
}

body.center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 40px;
    width: 100%;
    max-width: 380px;
    box-shadow: var(--shadow-card);
    margin: 0 auto;
}

/* One consistent width for every page reached from the tab-nav, so
   switching tabs never changes the card's width underneath you - that
   used to jump between a 900px cap on most pages and a full-bleed "wide"
   variant on a few (the budget grid, Investments, Leave, Paycheck Calc,
   Getting Started), which is exactly the jumpiness this fixes. 95% of
   the viewport on anything wider than a tablet; a generous but capped
   max-width keeps lines from stretching absurdly on an ultra-wide
   monitor. Below the tablet breakpoint it goes back to 100% (see the
   mobile media query) since there's no spare width to spend on a margin. */
.page-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 32px;
    width: 100%;
    max-width: 1700px;
    box-shadow: var(--shadow-card);
    margin: 0 auto;
}

@media (min-width: 701px) {
    .page-card {
        width: 95%;
    }
}

h1 {
    margin: 0 0 4px;
    font-size: 22px;
}

p.subtitle {
    margin: 0 0 28px;
    color: var(--text-secondary);
    font-size: 14px;
}

.field {
    margin-bottom: 18px;
}

.field label {
    display: block;
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--text-tertiary);
    line-height: 1.3;
}

.field input,
.field select {
    width: 100%;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 14px;
}

.field input:focus,
.field select:focus {
    outline: none;
    border-color: var(--accent-blue);
}

.field textarea {
    width: 100%;
    min-height: 140px;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
}

.field textarea:focus {
    outline: none;
    border-color: var(--accent-blue);
}

.field-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

/* .field-row's own display:flex above would otherwise win over the
   browser's default [hidden] styling (an author rule always beats the
   browser's built-in one, regardless of specificity) - so a hidden
   field-row needs to say so explicitly to actually disappear. */
.field-row[hidden] {
    display: none;
}

.field-row .field {
    flex: 1;
    min-width: 160px;
}

button.primary {
    padding: 11px 16px;
    border: none;
    border-radius: 6px;
    background: var(--accent-blue);
    color: white;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

button.primary:hover {
    background: var(--accent-blue-hover);
}

button.primary:disabled {
    background: var(--border-muted);
    cursor: not-allowed;
}

button.secondary,
a.button.secondary {
    padding: 11px 16px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

button.secondary:hover,
a.button.secondary:hover {
    background: var(--bg-hover);
}

.form-actions {
    display: flex;
    gap: 12px;
}

.form-actions button.primary,
.form-actions button.secondary {
    flex: 1;
}

.error-message,
.success-message {
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 18px;
    display: none;
}

.error-message {
    background: var(--error-bg);
    color: var(--error-text);
}

.success-message {
    background: var(--success-bg);
    color: var(--success-text);
}

.tab-nav {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

.tab {
    padding: 8px 4px;
    margin-right: 24px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 2px solid transparent;
}

.tab:hover {
    color: var(--text-tertiary);
}

.tab.active {
    color: var(--text-primary);
    border-bottom-color: var(--accent-blue);
}

/* A second, smaller row of tabs for switching between individual credit
   cards on one page - visually the same language as .tab-nav/.tab above,
   but <button>s (a client-side switch, not a link to a different page)
   and its own class so it can't be confused with the site-wide nav. */
.card-tab-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.card-tab {
    padding: 8px 4px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

.card-tab:hover {
    color: var(--text-tertiary);
}

.card-tab.active {
    color: var(--text-primary);
    border-bottom-color: var(--accent-blue);
}

/* Only the active card's own section is visible at a time - see the
   card-tab click handler in credit-cards.php. */
.cc-card-panel {
    display: none;
}

.cc-card-panel.active {
    display: block;
}

/* Same show-one-at-a-time idea as .cc-card-panel above, reused for the
   Social Security page's per-person tabs - see the card-tab click
   handler in social-security.php. */
.ss-profile-panel {
    display: none;
}

.ss-profile-panel.active {
    display: block;
}

.switch-link {
    margin-top: 20px;
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary);
}

.switch-link a {
    color: var(--link-blue);
    text-decoration: none;
}

.switch-link a:hover {
    text-decoration: underline;
}

/* The Account page's show/hide-and-reorder list for the top tab-nav. */
.nav-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 6px;
    background: var(--bg-input);
}

.nav-settings-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
}

.nav-settings-checkbox input:disabled {
    cursor: not-allowed;
}

.nav-settings-move {
    display: flex;
    gap: 4px;
}

.nav-settings-move button {
    padding: 2px 8px;
    font-size: 13px;
    line-height: 1.4;
}

/* Dashboard summary cards */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 18px;
}

.stat-card .stat-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.stat-card .stat-value {
    font-size: 24px;
    font-weight: 700;
}

/* Generic data table */
table.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

table.data-table th,
table.data-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-subtle);
}

table.data-table th {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
}

table.data-table tr:hover td {
    background: var(--bg-hover);
}

/* Keeps a table's first column in place while its other columns scroll
   horizontally (used by the budget grid, which can run to 12+ columns) */
.sticky-col {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--bg-card);
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.15);
}

.scroll-nav {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

/* Hides a month column on narrow screens, keeping only prior/current/next
   in view instead of requiring horizontal scroll for a 12-column grid */
.mobile-col-hidden {
    display: none;
}

/* Each month cell packs an amount input and a "..." button on one line
   - without this, some browsers wrap the button onto its own line
   rather than growing the table past the scroll container's width. A
   little extra side padding gives them room to breathe; the table is
   allowed to grow wider (it already scrolls horizontally) rather than
   cramming these back together. */
#budget-table td[data-col-month] {
    white-space: nowrap;
    padding-left: 14px;
    padding-right: 14px;
}

/* Alternating row color, scoped to the budget grid specifically rather
   than every .data-table sitewide. The hover rule below is repeated
   with matching specificity (table+tbody+tr+td, one pseudo-class) and
   declared after this one, so it still wins the cascade on an even row
   instead of the stripe color staying stuck through a hover.
   --zebra-stripe (see the user's Account page setting, just below the
   theme toggle) changes the VALUE used here rather than the selector,
   so this never has to fight the hover rule on specificity no matter
   which of Subtle/Bold/Off is picked. */
#budget-table tbody tr:nth-child(even) td {
    background: var(--zebra-stripe);
}
#budget-table tbody tr:hover td {
    background: var(--bg-hover);
}

/* A heavier divider than the table's normal row borders, bracketing the
   budget items above/below the summary and grand-total rows. */
#budget-table tr.row-divider-below td {
    border-bottom: 2px solid var(--border-muted);
}
#budget-table tr.row-divider-above td {
    border-top: 2px solid var(--border-muted);
}

/* Alternating row color for the Paycheck Calculator's per-person table
   (one of these per profile on the page) - same approach as the budget
   grid above: the hover rule is repeated with matching specificity and
   declared after the stripe rule, so hovering still wins the cascade on
   an even row instead of the stripe color sticking through it. */
.paycheck-table tbody tr:nth-child(even) td {
    background: var(--zebra-stripe);
}
.paycheck-table tbody tr:hover td {
    background: var(--bg-hover);
}

.amount-negative {
    color: var(--accent-red);
}

.amount-positive {
    color: var(--accent-green);
}

.category-select {
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 13px;
}

/* Removes the native up/down spinner on number inputs - these show up in
   every dense grid this input class is used in (Budget, Savings, Credit
   Scores, Paycheck Calc), eating space that matters more than the
   spinner does when typing values directly is easier anyway. */
input[type="number"].category-select {
    -moz-appearance: textfield;
}

input[type="number"].category-select::-webkit-inner-spin-button,
input[type="number"].category-select::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Budget grid cell coloring - a planned/placeholder item's cells (see
   Budget Item "Planned" checkbox) always read as a budgeted estimate,
   taking priority over the plain positive-amount coloring below. */
input.cell-planned {
    background: var(--warning-bg);
}

/* Higher specificity than .category-select's own color rule, so
   positive/negative amounts actually show colored text inside an
   editable input, not just on a plain <td>/<span> (where
   .amount-positive/.amount-negative alone already work). */
input.amount-positive {
    color: var(--accent-green);
    font-weight: 600;
}

input.amount-negative {
    color: var(--accent-red);
}

/* A bill/paycheck marked paid/received fades slightly, so what's still
   outstanding for a month stands out against what's already settled. */
input.amount-input.is-paid {
    opacity: 0.55;
}

/* The budget grid's per-cell "..." popup menu (apply to future months,
   notes, mark paid) - positioned next to whichever button opened it via
   JS, so only top/left are set here. */
.cell-menu {
    position: absolute;
    z-index: 50;
    min-width: 230px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-card);
    padding: 4px;
}

.cell-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    font-size: 13px;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer;
}

.cell-menu-item:hover {
    background: var(--bg-hover);
}

.cell-menu-item[hidden] {
    display: none;
}

/* Hidden by default - reordering/removing items is rare, so the up/down
   arrows and Remove link only show once the "Edit Budget Items"
   checkbox is turned on. */
.reorder-arrows,
.remove-item {
    display: none;
}

.card-link {
    display: block;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 18px;
    text-decoration: none;
    color: var(--text-primary);
}

.card-link:hover {
    border-color: var(--link-blue);
}

.card-link .card-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.card-link .card-desc {
    font-size: 13px;
    color: var(--text-secondary);
}

.result-box {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 18px;
    margin-top: 20px;
}

.result-box .result-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 14px;
}

.result-box .result-row .value {
    font-weight: 600;
}

/* One child's cost inputs on the Cost of Raising a Child calculator -
   each child gets their own card since costs vary a lot by age/stage. */
.child-card {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 16px;
}

@media (max-width: 480px) {
    body {
        padding: 16px;
    }

    .auth-card,
    .page-card {
        padding: 20px;
    }

    /* The Alternating Row Color field's fixed max-width (set so its label
       fits on one line next to Theme/Color Scheme on a regular screen)
       would otherwise force that same long label to overflow instead of
       wrapping, now that it's nowrap - not an issue once it's alone on
       its own full-width row, which is already how .field-row stacks on
       a screen this narrow. */
    #zebra-style-field {
        max-width: none;
    }
}

/* A native <dialog> (e.g. the credit card transaction Notes popup) - the
   variables here were already defined above for this, just unused until
   now. ::backdrop is the dimmed area behind the dialog that the browser
   renders automatically once it's opened with .showModal(). */
dialog {
    background: var(--bg-card);
    color: var(--text-primary);
    border: none;
    border-radius: 12px;
    padding: 24px;
    box-shadow: var(--shadow-modal);
    width: 100%;
    max-width: 480px;
}

dialog::backdrop {
    background: var(--overlay-backdrop);
}

dialog textarea {
    width: 100%;
    min-height: 120px;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
}

/* The floating quick-calculator (assets/js/calculator.js) - fixed to the
   viewport, not the page-card, so it stays in the same top-right spot
   regardless of scroll position or which page's content is underneath it. */
#calc-fab {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 900;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--accent-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-card);
}

#calc-fab:hover {
    background: var(--accent-blue-hover);
}

#calc-popup {
    position: fixed;
    top: 64px;
    right: 16px;
    z-index: 900;
    width: 230px;
    background: var(--bg-card);
    color: var(--text-primary);
    border-radius: 12px;
    box-shadow: var(--shadow-modal);
    padding: 14px;
}

#calc-popup[hidden] {
    display: none;
}

/* Focused programmatically on open so keyboard input works right away
   (see calculator.js) - no need for the browser's default focus ring
   around the whole box. */
#calc-popup:focus {
    outline: none;
}

.calc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.calc-header #calc-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}

.calc-display-row {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}

#calc-display {
    flex: 1;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    text-align: right;
    font-size: 22px;
    font-weight: 600;
    overflow-x: auto;
    white-space: nowrap;
}

#calc-copy {
    flex-shrink: 0;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
}

#calc-copy:hover {
    background: var(--bg-hover);
}

.calc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.calc-grid button {
    padding: 10px 0;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 15px;
    cursor: pointer;
}

.calc-grid button:hover {
    background: var(--bg-hover);
}

.calc-grid .calc-op {
    color: var(--accent-blue);
    font-weight: 600;
}

.calc-grid .calc-equals {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    color: #fff;
    font-weight: 600;
}

.calc-grid .calc-equals:hover {
    background: var(--accent-blue-hover);
}

.calc-grid .calc-wide {
    grid-column: span 2;
}

@media (max-width: 480px) {
    #calc-fab {
        top: 10px;
        right: 10px;
    }

    #calc-popup {
        top: 56px;
        right: 10px;
        width: 200px;
    }
}