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