/* 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;
}