/*
 * LedgerFinch's own overrides. theme.css, navbar.css, landing.css and
 * layout.css are verbatim copies from treeviewbms - keep local changes here so
 * those can be re-synced without losing anything.
 */

/* landing.css colours every link on .vcfo-content/.vcfo-auth pages brass,
   including links styled as buttons - brass text on a blue primary button. */
.vcfo-content a.btn-primary,
.vcfo-auth a.btn-primary,
.vcfo-content a.btn-primary:hover,
.vcfo-auth a.btn-primary:hover {
    color: #fff;
}
.vcfo-content a.btn-outline-secondary,
.vcfo-auth a.btn-outline-secondary {
    color: var(--slate);
    border-color: var(--rule);
}
.vcfo-content a.btn-outline-secondary:hover,
.vcfo-auth a.btn-outline-secondary:hover {
    background: var(--paper-raised);
    color: var(--ink);
}

/* Bootstrap's table colours are fixed light-theme values; follow the theme tokens. */
.ledger-table {
    --bs-table-color: var(--ink);
    --bs-table-bg: transparent;
    --bs-border-color: var(--rule);
}

/* Statement upload: the dropzone is the file input's label (see dropzone.js).
   Scoped under .vcfo-content to beat landing.css's small grey form-label style. */
.vcfo-content .statement-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    width: 100%;
    padding: 2.5rem 1rem;
    text-align: center;
    font-size: 1rem;
    font-weight: 400;
    color: var(--ink);
    background: var(--paper-raised);
    border: 2px dashed var(--rule);
    border-radius: .75rem;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.statement-dropzone:hover,
.statement-dropzone.is-dragover {
    border-color: var(--brass);
    background: color-mix(in srgb, var(--brass) 8%, var(--paper-raised));
}
.statement-dropzone:focus-within {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}
.statement-dropzone.has-file {
    border-style: solid;
    border-color: var(--ok);
    background: var(--ok-bg);
}
.statement-dropzone.is-invalid {
    border-style: solid;
    border-color: var(--warn);
    background: var(--warn-bg);
}
.statement-dropzone-icon {
    font-size: 2.25rem;
    line-height: 1;
    color: var(--brass-strong);
}
.statement-dropzone-title {
    font-weight: 600;
    overflow-wrap: anywhere;
}
.vcfo-content .statement-dropzone-hint {
    color: var(--slate);
    font-size: .9rem;
}
.statement-dropzone-browse {
    color: var(--brass-strong);
    text-decoration: underline;
}

/* Export formats: list of standard/custom exports and the column editor. */
.export-list {
    list-style: none;
    padding: 0;
    margin-top: 0;
    margin-bottom: 1rem;
    border-top: 1px solid var(--rule);
}
.export-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    padding: .75rem 0;
    border-bottom: 1px solid var(--rule);
}
.export-item-main { min-width: 0; }
.export-item-meta {
    color: var(--slate);
    font-size: .875rem;
    overflow-wrap: anywhere;
}
.export-item-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.export-badge {
    margin-left: .35rem;
    font-weight: 600;
    color: var(--caution);
    background: var(--caution-bg);
}
.export-badge-default {
    color: var(--ok);
    background: var(--ok-bg);
}
/* Column rows: letter (A, B, C... as in the exported file) | inputs | buttons.
   The heading row above shares the same grid so its labels sit over the inputs. */
.column-list {
    list-style: none;
    padding: 0;
    margin-bottom: .75rem;
    counter-reset: export-column;
}
.column-grid {
    --column-actions-width: 7rem;
    display: grid;
    /* Narrow screens: buttons wrap onto a second line under the inputs. */
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: .5rem .75rem;
    align-items: start;
}
.column-row {
    padding: .5rem 0;
    border-bottom: 1px solid var(--rule);
    counter-increment: export-column;
}
.column-letter::before {
    content: counter(export-column, upper-alpha);
    display: block;
    padding-top: .45rem;
    font-weight: 600;
    color: var(--slate);
    text-align: center;
}
.column-row-inputs {
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
}
.column-row-actions {
    grid-column: 2;
    display: flex;
    gap: .35rem;
    padding-top: .15rem;
}
.column-headings { display: none; }
.vcfo-content .column-input-label { margin-bottom: .2rem; }

/* Side by side from here up: one heading row labels every input, so the
   per-input labels are only kept for screen readers. */
@media (min-width: 576px) {
    .column-grid { grid-template-columns: 1.5rem minmax(0, 1fr) var(--column-actions-width); }
    .column-row-actions { grid-column: auto; justify-content: flex-end; }
    .column-row-inputs { grid-template-columns: 1fr 1fr; }
    .column-headings {
        display: grid;
        padding-bottom: .25rem;
        border-bottom: 1px solid var(--rule);
    }
    .column-headings .form-label { margin: 0; }
    .column-input-label {
        position: absolute !important;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}
.export-preview th,
.export-preview td { white-space: nowrap; }

/* Pricing and Buy pages. Everything takes its colours from the theme tokens:
   Bootstrap's cards and tables are fixed light-theme values, which is why the
   old pack table was unreadable in dark mode. */
.vcfo-content .balance-promise h2,
.vcfo-content .pricing-packs-header h2 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--ink);
}
.vcfo-content .pricing-lead { font-size: 1.05rem; }
.vcfo-content .pricing-lead strong { color: var(--ink); }

/* The reconciliation check, set out like a ledger sum: the page's one big idea. */
.balance-promise {
    margin-top: 2.5rem;
    padding: 1.5rem 1.5rem 1.25rem;
    background: var(--paper-raised);
    border-left: 3px solid var(--brass);
    border-radius: 0 .5rem .5rem 0;
}
.balance-check {
    width: 100%;
    max-width: 22rem;
    margin: 1.25rem 0;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.balance-check th { font-weight: 400; color: var(--slate); padding: .2rem 0; }
.balance-check td { text-align: right; padding: .2rem 0; }
.balance-check-total th,
.balance-check-total td {
    font-weight: 600;
    color: var(--ink);
    padding-top: .45rem;
    /* An accountant's total: a single rule above, a double rule below. */
    border-top: 1px solid var(--ink);
    border-bottom: 3px double var(--ink);
}
.vcfo-content .balance-outcomes {
    list-style: none;
    padding: 0;
    margin: 0;
    color: var(--ink);
}
.balance-outcomes li { display: flex; gap: .6rem; align-items: baseline; }
.balance-outcomes li + li { margin-top: .4rem; }
.balance-outcome-ok i { color: var(--ok); }
.balance-outcome-free i { color: var(--slate); }

.pricing-packs-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-top: 3rem;
}
.pricing-packs-header h2 { margin: 0; }
.currency-switch { display: flex; gap: .25rem; }
.vcfo-content .currency-switch a {
    padding: .2rem .65rem;
    font-size: .875rem;
    color: var(--slate);
    text-decoration: none;
    border: 1px solid var(--rule);
    border-radius: 999px;
}
.vcfo-content .currency-switch a:hover { color: var(--ink); border-color: var(--slate); }
.vcfo-content .currency-switch a[aria-current] {
    color: var(--paper);
    background: var(--ink);
    border-color: var(--ink);
}

/* Pack cards: same grid in both groups, so the columns line up. */
.pack-group { margin-top: 1.75rem; }
.vcfo-content .pack-group-title {
    font-family: var(--font-body);
    font-size: .95rem;
    font-weight: 600;
    color: var(--slate);
    margin-bottom: .75rem;
}
.pack-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
    gap: .75rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.pack-card {
    display: flex;
    flex-direction: column;
    padding: 1.1rem 1.1rem 1.2rem;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: .5rem;
    color: var(--ink);
}
.vcfo-content .pack-card p { margin: 0; }
.pack-name {
    font-family: var(--font-body);
    font-size: .95rem;
    font-weight: 600;
    color: var(--brass-strong);
    margin: 0 0 .35rem;
}
.vcfo-content .pack-pages { color: var(--slate); }
.pack-pages-number {
    font-family: var(--font-display);
    font-size: 2.1rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--ink);
    font-variant-numeric: lining-nums;
}
.vcfo-content .pack-card .pack-price {
    margin-top: .6rem;
    font-size: 1.35rem;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.vcfo-content .pack-rate { font-size: .875rem; color: var(--slate); }
.vcfo-content .pack-card .pack-description {
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--rule);
    font-size: .875rem;
    color: var(--slate);
}
.pack-buy { margin-top: auto; padding-top: 1rem; }

.vcfo-content .pricing-notes { padding-left: 1.1rem; }
.vcfo-content .pricing-notes li + li { margin-top: .3rem; }