/* fainance - small additions on top of Tabler. Prefer Tabler utility classes in views;
   put something here only when no utility covers it. */

/* Brand: highlight the "ai" in fainance */
.brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    color: inherit;
    text-decoration: none;
}

.brand-logo:hover {
    text-decoration: none;
}

.brand-ai {
    color: var(--tblr-primary);
}

/* Dashboard hero number */
.display-amount {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 575.98px) {
    .display-amount {
        font-size: 2rem;
    }
}

/* Tabler buttons are flex containers, so the space between an icon and its label collapses */
.btn:not(.btn-icon) > .ti:first-child {
    margin-inline-end: 0.375rem;
}

/* Money out / money in toggle: make the selected side unmistakable */
#direction-out:checked + label {
    background: var(--tblr-danger-lt);
    border-color: var(--tblr-danger);
    color: var(--tblr-danger);
}

#direction-in:checked + label {
    background: var(--tblr-success-lt);
    border-color: var(--tblr-success);
    color: var(--tblr-success);
}

/* Money lines up in columns */
.money,
.calc-breakdown dd {
    font-variant-numeric: tabular-nums;
}

/* Floating "add transaction" button on phones, clear of the iOS home indicator */
.quick-add-button {
    position: fixed;
    right: 1.25rem;
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    font-size: 1.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
    z-index: 1030;
}

/* Leave room so the floating button never covers the last row */
@media (max-width: 991.98px) {
    .page-body {
        padding-bottom: 5rem;
    }
}

/* Notes under a description in the transaction table */
.notes-cell {
    max-width: 22rem;
}

/* Calendar-style due date on the bills list */
.bill-date {
    width: 2.75rem;
    text-align: center;
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    overflow: hidden;
    line-height: 1.1;
}

.bill-date-month {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--tblr-bg-surface-secondary);
    color: var(--tblr-secondary);
    padding: 0.125rem 0;
}

.bill-date-day {
    font-weight: 700;
    font-size: 1rem;
    padding: 0.125rem 0 0.25rem;
}

.bill-date-overdue {
    border-color: var(--tblr-danger);
}

.bill-date-overdue .bill-date-month {
    background: var(--tblr-danger);
    color: #fff;
}

/* Import: paste box, error rows and skipped duplicates */
.import-paste {
    min-height: 12rem;
    font-size: 0.8125rem;
    white-space: pre;
}

.import-raw-row {
    max-width: 32rem;
}

.import-skipped td {
    text-decoration: line-through;
}

.import-category-select {
    min-width: 12rem;
}

/* Paid and skipped bills fade back so what's left to pay stands out */
.bill-settled {
    opacity: 0.6;
}

/* Disabled "coming soon" sidebar items stay readable */
.navbar-vertical .nav-link.disabled {
    opacity: 0.55;
}

/* ---- Sign-in pages (ASP.NET Core Identity default UI inside the centered card) ---- */

/* Identity's pages lay forms out in grid columns meant for a full-width page; in the card
   every column should use the full width */
.auth-body .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    margin-left: 0;
}

/* Hide the "use another service to log in" column - no external providers are configured */
.auth-body .col-md-offset-2,
.auth-body .col-lg-offset-2 {
    display: none;
}

.auth-body h1 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    text-align: center;
}

.auth-body h2 {
    font-size: 1rem;
    color: var(--tblr-secondary);
    text-align: center;
    font-weight: 400;
}

.auth-body hr {
    display: none;
}

.auth-body .btn-primary.w-100,
.auth-body .btn-lg {
    margin-top: 0.5rem;
}

/* QR code for authenticator app enrollment */
#qrCode {
    display: inline-block;
    padding: 0.75rem;
    background: #fff;
    border-radius: var(--tblr-border-radius);
    margin: 0.5rem 0 1rem;
}

/* Budget: progress bar with a marker for how far through the month we are */
.budget-progress {
    position: relative;
}

.budget-pace-marker {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    margin-left: -1px;
    background: var(--tblr-body-color);
    opacity: 0.45;
    border-radius: 1px;
}

/* Long (often imported) category names wrap instead of squeezing the amount box */
.budget-category-column {
    max-width: 14rem;
    overflow-wrap: anywhere;
}

.budget-input-column {
    width: 9rem;
    min-width: 8rem;
}

/* Keep "Save budgets" reachable while scrolling a long category list */
.budget-save-bar {
    position: sticky;
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    z-index: 10;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
}

/* Multi-line notes keep their line breaks */
.notes-block {
    white-space: pre-line;
}

/* Statement review grid */
.statement-grid td {
    vertical-align: top;
}

.statement-description {
    min-width: 14rem;
}

.statement-category {
    min-width: 11rem;
}

.statement-bill {
    min-width: 9rem;
}

.statement-existing {
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Skipped rows fade back so what will be added stands out */
.statement-row-skipped td {
    opacity: 0.5;
}

.statement-row-skipped td:first-child {
    opacity: 1;
}

/* Keep Save / Import reachable while scrolling a long statement */
.statement-action-bar {
    position: sticky;
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    z-index: 10;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
}

/* ---- Report charts (drawn by charts.js) ---- */

/* Categorical colors in fixed order (validated for color-vision deficiency as adjacent pairs); chart ink
   uses text tokens, never the series colors */
.viz-root {
    --viz-series-1: #2a78d6;
    --viz-series-2: #eb6834;
    --viz-series-3: #1baf7a;
    --viz-series-4: #eda100;
    --viz-series-5: #e87ba4;
    --viz-series-6: #008300;
    --viz-series-7: #4a3aa7;
    --viz-series-8: #e34948;
    --viz-surface: var(--tblr-bg-surface, #ffffff);
    --viz-text-primary: var(--tblr-body-color, #182433);
    --viz-text-secondary: var(--tblr-secondary, #667382);
    --viz-text-muted: var(--tblr-secondary, #667382);
    --viz-gridline: var(--tblr-border-color-translucent, #e6e7e9);
    --viz-baseline: var(--tblr-border-color, #dce1e7);
}

.viz-chart {
    position: relative;
    min-height: 280px;
}

.viz-svg {
    display: block;
    outline: none;
}

.viz-svg:focus-visible {
    box-shadow: 0 0 0 2px var(--tblr-primary);
    border-radius: 4px;
}

.viz-gridline {
    stroke: var(--viz-gridline);
    stroke-width: 1;
}

.viz-baseline {
    stroke: var(--viz-baseline);
    stroke-width: 1;
}

.viz-axis-label {
    fill: var(--viz-text-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.viz-line {
    fill: none;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.viz-area {
    opacity: 0.1;
}

/* End and hover dots carry a ring in the surface color so they stay legible over lines */
.viz-dot {
    stroke: var(--viz-surface);
    stroke-width: 2;
}

.viz-crosshair {
    stroke: var(--viz-baseline);
    stroke-width: 1;
}

.viz-hover-band {
    fill: var(--viz-text-primary);
    opacity: 0.04;
}

.viz-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin-bottom: 0.5rem;
    font-size: 0.8125rem;
    color: var(--viz-text-secondary);
}

.viz-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.viz-legend-key {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.viz-legend-key-line {
    width: 14px;
    height: 2px;
    border-radius: 1px;
}

.viz-tooltip {
    position: absolute;
    z-index: 5;
    min-width: 10rem;
    padding: 0.5rem 0.625rem;
    pointer-events: none;
    background: var(--viz-surface);
    border: 1px solid rgba(11, 11, 11, 0.1);
    border-radius: var(--tblr-border-radius, 4px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);
    font-size: 0.8125rem;
}

.viz-tooltip-title {
    color: var(--viz-text-secondary);
    margin-bottom: 0.25rem;
}

.viz-tooltip-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.viz-tooltip-key {
    display: inline-block;
    width: 12px;
    height: 2px;
    border-radius: 1px;
}

.viz-tooltip-name {
    color: var(--viz-text-secondary);
}

/* Category picker scrolls rather than pushing the chart down */
.report-category-picker {
    max-height: 22rem;
    overflow-y: auto;
}

/* Envelopes: keep the explainer beside the totals short */
.envelope-explainer {
    max-width: 28rem;
}

/* ---- Public pages (home and help for visitors who aren't signed in) ---- */

.public-page {
    background: var(--tblr-bg-surface);
}

.public-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--tblr-bg-surface);
    border-bottom: 1px solid var(--tblr-border-color);
}

.public-hero {
    padding: 4rem 0 5rem;
    background: radial-gradient(ellipse at top right, var(--tblr-primary-lt), transparent 60%);
}

.public-hero-title {
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 1.25rem;
}

.public-lead {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--tblr-secondary);
    max-width: 38rem;
}

.public-section {
    padding: 4.5rem 0;
}

.public-section-alt {
    background: var(--tblr-bg-surface-secondary);
}

.public-section-dark {
    background: #1d273b;
    color: #fff;
}

.public-section-title {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.public-footer {
    padding: 2.5rem 0;
    border-top: 1px solid var(--tblr-border-color);
}

/* Square tinted icon used on feature cards and the help diagram */
.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--tblr-border-radius-lg, 8px);
    font-size: 1.375rem;
}

.feature-card {
    height: 100%;
    padding: 1.5rem;
    background: var(--tblr-bg-surface);
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius-lg, 8px);
}

.feature-card h3 {
    margin: 1rem 0 0.5rem;
}

.feature-card p {
    color: var(--tblr-secondary);
    margin-bottom: 0;
}

.step-card {
    height: 100%;
    padding: 1.5rem;
    border-left: 3px solid var(--tblr-primary);
}

.step-number {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--tblr-primary);
    margin-bottom: 0.75rem;
}

/* Browser-window frame around illustrative screens (sample data, not real screenshots) */
.mock-window {
    background: var(--tblr-bg-surface);
    border: 1px solid var(--tblr-border-color);
    border-radius: 0.75rem;
    box-shadow: 0 1.5rem 3rem rgba(29, 39, 59, 0.12);
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}

.mock-window-bar {
    display: flex;
    gap: 0.375rem;
    padding: 0.625rem 0.875rem;
    background: var(--tblr-bg-surface-secondary);
    border-bottom: 1px solid var(--tblr-border-color);
}

.mock-window-bar span {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: var(--tblr-border-color);
}

.mock-window-body {
    padding: 1rem;
    background: var(--tblr-body-bg);
}

/* ---- Help page ---- */

.help-intro {
    max-width: 44rem;
}

.help-toc {
    position: sticky;
    top: 5rem;
}

/* Section anchors land below the sticky public navbar */
.help-content section {
    scroll-margin-top: 5rem;
}

.help-content h2 {
    font-size: 1.375rem;
    margin-bottom: 1rem;
}

.help-content h3 {
    font-size: 1rem;
    margin-top: 1.25rem;
}

.help-steps li {
    margin-bottom: 0.5rem;
}

/* Available-balance formula: boxes joined by operators, stacking vertically on phones */
.help-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.5rem;
}

.help-flow-item {
    flex: 1 1 8rem;
    padding: 1rem;
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius-lg, 8px);
    text-align: center;
}

.help-flow-item .feature-icon {
    margin-bottom: 0.5rem;
}

.help-flow-result {
    border-color: var(--tblr-primary);
    background: var(--tblr-primary-lt);
}

.help-flow-operator {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--tblr-secondary);
    flex: 0 0 auto;
}

@media (max-width: 767.98px) {
    .help-flow {
        flex-direction: column;
    }

    .help-flow-item {
        flex-basis: auto;
    }
}