/*
 * Review Table (/resort)
 *
 * A spreadsheet-shaped view of an uploaded PnP workbook. The page container
 * is widened well past the usual 50rem because the whole point is to read a
 * transaction table without squinting; the table itself scrolls sideways
 * inside its own wrapper so the page body never does.
 *
 * Colours run through custom properties scoped to .review-section, so the
 * light/dark switch is one attribute swap rather than a parallel set of
 * rules. Dark is the default and is the deep navy the rest of the site uses;
 * light exists because reading a long transaction list on white is easier on
 * the eyes, and it is what prints.
 */

/* ===== Palettes ========================================================== */

.review-section {
    /* Dark - deep navy, deliberately darker than the page behind it so white
       text sits on solid colour instead of a washed-out translucent panel. */
    --rv-surface: #071a30;
    --rv-surface-alt: #0b2340;
    --rv-header-bg: #04101d;
    --rv-text: #ffffff;
    --rv-text-dim: rgba(255, 255, 255, 0.62);
    --rv-border: rgba(206, 186, 76, 0.24);
    --rv-grid: rgba(255, 255, 255, 0.07);
    --rv-accent: #CEBA4C;
    /* The brand gold itself, for anything that is filled rather than read.
       Kept apart from --rv-accent because on white the brand gold manages
       1.95:1 against the page - fine behind navy text, unreadable as text. */
    --rv-accent-fill: #CEBA4C;
    --rv-on-accent: #0D2849;
    --rv-group-bg: #12314f;
    --rv-group-hover: #1a4269;
    --rv-zebra: rgba(255, 255, 255, 0.03);
    --rv-row-hover: rgba(206, 186, 76, 0.12);
    --rv-flag: #FF8A6B;
    --rv-flag-bg: #3b1a14;
    --rv-flag-hover: #4d221a;
    --rv-tab-bg: #0b2340;
    --rv-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.35);
}

.review-section[data-review-theme="light"] {
    --rv-surface: #ffffff;
    --rv-surface-alt: #f3f6fa;
    --rv-header-bg: #0D2849;
    --rv-text: #10243d;
    --rv-text-dim: rgba(16, 36, 61, 0.62);
    --rv-border: rgba(13, 40, 73, 0.2);
    --rv-grid: rgba(13, 40, 73, 0.1);
    /* Gold deep enough to read on white - 5.07:1, where the brand gold is
       1.95:1. The olive it replaces was correct for contrast and did not
       look like the brand. */
    --rv-accent: #8A6A00;
    --rv-accent-fill: #CEBA4C;
    --rv-on-accent: #0D2849;
    --rv-group-bg: #e9eef5;
    --rv-group-hover: #dde5ef;
    --rv-zebra: rgba(13, 40, 73, 0.028);
    --rv-row-hover: rgba(206, 186, 76, 0.2);
    --rv-flag: #A62F16;
    --rv-flag-bg: #fdeae4;
    --rv-flag-hover: #fadbd1;
    --rv-tab-bg: #eef2f7;
    --rv-shadow: 0 0.5rem 1.5rem rgba(13, 40, 73, 0.12);
}

/* ===== Page shell ======================================================== */
/* Scoped to the Review Table page on purpose. This stylesheet is shared with
   the Smart Labeler, which mounts the same table - unscoped, these two caps
   travelled with it and pinned that page's card at 50rem no matter how wide
   its container was told to go. Everything below this block is component
   styling and is meant to travel. */

/* The upload card stays readable; the table below gets the full width. */
body.page-review-table .main-container {
    max-width: min(100%, 118rem);
}

body.page-review-table .upload-section {
    width: 100%;
    max-width: 50rem;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.review-section {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    width: 100%;
    margin-top: 1.75rem;
    color: var(--rv-text);
}

.review-note {
    font-size: 0.78rem;
    color: var(--rv-text-dim);
    text-align: center;
    font-style: italic;
}

/* ===== Toolbar =========================================================== */

.review-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    /* Which sheet you are on is a different question from how it is sorted,
       so the two rows are separated rather than run together. */
    padding-bottom: 0.85rem;
    margin-bottom: 0.15rem;
    border-bottom: 1px solid var(--rv-grid);
}

.review-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.review-tab {
    padding: 0.45rem 0.9rem;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--rv-text-dim);
    background: var(--rv-tab-bg);
    border: 1px solid var(--rv-border);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.review-tab:hover {
    color: var(--rv-text);
    border-color: var(--rv-accent);
}

.review-tab.is-active {
    color: var(--rv-on-accent);
    background: var(--rv-accent-fill);
    border-color: var(--rv-accent-fill);
    font-weight: 600;
}

.review-tab-count {
    opacity: 0.75;
    margin-left: 0.35rem;
    font-size: 0.78em;
}

.review-toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.review-search {
    min-width: 14rem;
    padding: 0.45rem 0.75rem;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--rv-text);
    background: var(--rv-surface-alt);
    border: 1px solid var(--rv-border);
    border-radius: 6px;
}

.review-search::placeholder { color: var(--rv-text-dim); }
.review-search:focus-visible {
    outline: 2px solid var(--rv-accent);
    outline-offset: 1px;
}

.review-btn {
    padding: 0.45rem 0.8rem;
    font-family: inherit;
    font-size: 0.82rem;
    color: var(--rv-text);
    background: var(--rv-surface-alt);
    border: 1px solid var(--rv-border);
    border-radius: 6px;
    cursor: pointer;
}

.review-btn:hover {
    color: var(--rv-accent);
    border-color: var(--rv-accent);
}

.review-btn:focus-visible {
    outline: 2px solid var(--rv-accent);
    outline-offset: 1px;
}

/* ===== Sort / grouping controls ========================================= */

.review-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    padding-top: 0.15rem;
}

/* The one text field in a row of buttons. Extra room on its right keeps it
   from reading as another toggle. */
.review-controls .review-search {
    margin-right: 0.75rem;
}

.review-controls-label {
    margin-right: 0.2rem;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rv-text-dim);
}

.review-controls-sep {
    width: 1px;
    height: 1.4rem;
    margin: 0 0.35rem;
    background: var(--rv-border);
}

/* A toggle that has nothing to do in the current mode. */
.review-btn.is-muted,
.review-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.review-btn:disabled:hover {
    color: var(--rv-text);
    border-color: var(--rv-border);
}

/* An active toggle reads as filled, not just focused. */
.review-btn.is-on {
    color: var(--rv-on-accent);
    background: var(--rv-accent-fill);
    border-color: var(--rv-accent-fill);
    font-weight: 600;
}

.review-btn.is-on:hover {
    color: #0D2849;
    background: #dbc95f;
    border-color: #dbc95f;
}

/* ===== Stat strip ======================================================== */

.review-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem;
    padding: 0.75rem 1rem;
    background: var(--rv-surface-alt);
    border: 1px solid var(--rv-border);
    border-radius: 8px;
}

.review-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.review-stat-label {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rv-text-dim);
}

.review-stat-value {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--rv-text);
    font-variant-numeric: tabular-nums;
}

.review-stat-value.is-flagged { color: var(--rv-flag); }

/* ===== Table ============================================================= */

.review-table-wrap {
    max-height: 75vh;
    overflow: auto;
    background: var(--rv-surface);
    border: 1px solid var(--rv-border);
    border-radius: 8px;
    box-shadow: var(--rv-shadow);
}

.review-table-wrap:focus-visible {
    outline: 2px solid var(--rv-accent);
    outline-offset: 2px;
}

.review-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.84rem;
    color: var(--rv-text);
}

.review-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 0.6rem 0.75rem;
    text-align: left;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    /* The one place the brand gold stays literal: the header bar is navy in
       both themes, so gold reads on it either way. */
    color: #CEBA4C;
    background: var(--rv-header-bg);
    border-bottom: 1px solid var(--rv-border);
    white-space: nowrap;
}

.review-table td {
    padding: 0.42rem 0.75rem;
    /* Nesting depth is set per cell by the renderer; unset cells read as 0. */
    padding-left: calc(0.75rem + var(--rv-indent, 0) * 1.6rem);
    border-bottom: 1px solid var(--rv-grid);
    vertical-align: top;
}

/* Bullet marking a nested heading - a month sitting under its category. */
.review-bullet {
    display: inline-block;
    margin-right: 0.4rem;
    color: var(--rv-accent);
    opacity: 0.75;
}

/* Amounts and dates read as numbers, so keep the digits aligned. */
.review-amount,
.review-table th.review-amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.review-date { white-space: nowrap; color: var(--rv-text-dim); }

/* --- group header rows --- */

.review-group > td {
    /* Longhand on purpose: the padding shorthand would reset the padding-left
       that carries the nesting indent. */
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    background: var(--rv-group-bg);
    border-top: 1px solid var(--rv-border);
    border-bottom: 1px solid var(--rv-border);
    font-weight: 600;
    cursor: pointer;
}

.review-group:hover > td { background: var(--rv-group-hover); }

.review-group.is-flagged > td {
    background: var(--rv-flag-bg);
    border-color: var(--rv-flag);
    color: var(--rv-flag);
}

.review-group.is-flagged:hover > td { background: var(--rv-flag-hover); }
.review-group.is-flagged .review-caret { color: var(--rv-flag); }

/* A nested bucket - year, month, payee - reads lighter than its category. */
.review-group.review-subgroup > td {
    background: var(--rv-surface-alt);
    font-weight: 500;
}

.review-group.review-subgroup:hover > td { background: var(--rv-group-bg); }

.review-caret {
    display: inline-block;
    width: 1rem;
    margin-right: 0.35rem;
    color: var(--rv-accent);
    transition: transform 0.15s ease;
}

.is-open > td .review-caret { transform: rotate(90deg); }

.review-group-count {
    margin-left: 0.5rem;
    font-size: 0.78em;
    font-weight: 400;
    color: var(--rv-text-dim);
}

/* --- detail rows --- */

.review-row:nth-child(even) > td { background: var(--rv-zebra); }
.review-row:hover > td { background: var(--rv-row-hover); }

.review-row.is-flagged td:first-child {
    box-shadow: inset 0.2rem 0 0 var(--rv-flag);
}

/* --- subtotal + grand total ---
   The sorted tab in Excel closes every block with a total and ends with a
   grand total; the table does the same so the two read alike. */

.review-subtotal > td {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-weight: 600;
    background: var(--rv-surface-alt);
    border-top: 1px solid var(--rv-border);
    border-bottom: 1px solid var(--rv-border);
}

.review-grand > td {
    position: sticky;
    bottom: 0;
    z-index: 1;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: var(--rv-group-bg);
    border-top: 2px solid var(--rv-accent-fill);
    box-shadow: inset 0 -3px 0 -1px var(--rv-accent-fill);
}

.review-empty {
    padding: 2rem;
    text-align: center;
    color: var(--rv-text-dim);
}

/* ===== Editing =========================================================== */

.review-editable {
    cursor: pointer;
    /* A dotted underline says "this one is yours to change" without shouting. */
    text-decoration: underline dotted var(--rv-border);
    text-underline-offset: 0.25rem;
}

.review-editable:hover {
    color: var(--rv-accent);
    text-decoration-color: var(--rv-accent);
}

.review-editable:focus-visible {
    outline: 2px solid var(--rv-accent);
    outline-offset: -2px;
}

.review-table td.is-editing { padding: 0.2rem 0.4rem; overflow: visible; }

.review-editor { position: relative; }

.review-editor-input {
    width: 100%;
    min-width: 11rem;
    padding: 0.3rem 0.5rem;
    font-family: inherit;
    font-size: 0.84rem;
    color: var(--rv-text);
    background: var(--rv-surface);
    border: 1px solid var(--rv-accent-fill);
    border-radius: 4px;
}

.review-editor-input:focus { outline: none; }

.review-picker {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    z-index: 5;
    min-width: 100%;
    max-width: 20rem;
    max-height: 15rem;
    overflow-y: auto;
    background: var(--rv-surface);
    border: 1px solid var(--rv-border);
    border-radius: 6px;
    box-shadow: var(--rv-shadow);
}

.review-picker-option {
    display: block;
    width: 100%;
    padding: 0.35rem 0.6rem;
    font-family: inherit;
    font-size: 0.82rem;
    text-align: left;
    color: var(--rv-text);
    background: transparent;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
}

.review-picker-option:hover,
.review-picker-option.is-active {
    color: var(--rv-on-accent);
    background: var(--rv-accent-fill);
}

.review-picker-empty {
    padding: 0.45rem 0.6rem;
    font-size: 0.78rem;
    font-style: italic;
    color: var(--rv-text-dim);
}

/* A row you have retyped stays marked until you undo it. */
.review-row.is-edited td:first-child {
    box-shadow: inset 0.2rem 0 0 var(--rv-accent-fill);
}

.review-row.is-edited > td { background: rgba(206, 186, 76, 0.09); }

.review-picker-group {
    padding: 0.35rem 0.6rem 0.2rem;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rv-text-dim);
    border-top: 1px solid var(--rv-grid);
}

.review-picker-group:first-child { border-top: 0; }

/* ===== Selection ========================================================= */

.review-select {
    width: 2.25rem;
    padding-left: 0.6rem !important;
    padding-right: 0.25rem;
}

.review-select input {
    width: 0.95rem;
    height: 0.95rem;
    accent-color: var(--rv-accent-fill);
    cursor: pointer;
}

.review-row.is-selected > td { background: rgba(206, 186, 76, 0.16); }

.review-bulk-picker { position: relative; display: inline-block; min-width: 12rem; }

/* ===== Change + bulk bars ================================================ */

.review-bulk,
.review-changes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    background: var(--rv-surface-alt);
    border: 1px solid var(--rv-accent-fill);
    border-radius: 8px;
}

.review-changes-count {
    font-weight: 700;
    color: var(--rv-accent);
}

.review-changes-detail {
    font-size: 0.82rem;
    color: var(--rv-text-dim);
}

.review-changes-note {
    margin-left: auto;
    font-size: 0.76rem;
    font-style: italic;
    color: var(--rv-text-dim);
}

/* ===== Gold theme ======================================================== */

body.theme-gold .review-section { --rv-header-bg: #17110a; }
body.theme-gold .review-tab.is-active { color: #17110a; }

/* ===== Narrow screens ==================================================== */

@media (max-width: 900px) {
    .review-toolbar { flex-direction: column; align-items: stretch; }
    .review-toolbar-right { flex-wrap: wrap; }
    .review-search { min-width: 0; flex: 1; }
    .review-stats { gap: 1.1rem; }
    .review-table-wrap { max-height: 65vh; }
}

/* ===== Export ============================================================ */
/* Sits under the table because it is the end of the job, not a control for
   it. Wraps rather than scrolls: on a phone the note belongs under the
   buttons, not off the side of them. */
.review-export {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1rem;
    padding: 0.9rem 1rem;
    background: var(--rv-surface-alt);
    border: 1px solid var(--rv-border);
    border-radius: 8px;
}

.review-btn-primary {
    font-weight: 700;
    color: var(--rv-on-accent);
    background: var(--rv-accent-fill);
    border-color: var(--rv-accent-fill);
}

.review-btn-primary:hover {
    color: #0D2849;
    filter: brightness(1.08);
}

.review-export-note {
    flex: 1 1 18rem;
    font-size: 0.78rem;
    color: var(--rv-text-dim);
}

.review-export-note.is-error {
    color: #E06C6C;
    font-style: normal;
}

/* ===== Wallet gate ======================================================= */
/* Not a paywall, so it does not borrow the payment overlay's styling - this
   asks for a signature, not a payment, and looking like a checkout would
   misrepresent what it wants. */
.wallet-gate {
    padding: 1.6rem 1.4rem;
    margin-bottom: 1rem;
    text-align: center;
    background: var(--rv-surface-alt);
    border: 1px solid var(--rv-border);
    border-radius: 10px;
}

.wallet-gate h3 {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    color: var(--rv-text);
}

.wallet-gate p {
    max-width: 34rem;
    margin: 0 auto 1rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--rv-text-dim);
}

.wallet-gate-status:empty {
    display: none;
}

.wallet-gate-status {
    margin: 0.8rem auto 0;
    font-size: 0.82rem;
    color: #E06C6C;
}

/* Locked rather than hidden: the user can see what they are about to get. */
form.is-locked {
    opacity: 0.35;
    pointer-events: none;
    filter: grayscale(0.6);
}


/* ===== Shared table, hosted inside a flex column ========================= */
/* Fills the host and scrolls inside itself rather than stretching whatever
   holds it. The base rule above already sets overflow and a max-height cap;
   this only makes it a well-behaved flex child. Applies wherever the table
   is mounted - the Review Table page and the Smart Labeler's panel both give
   it a flex column to sit in. */
.review-table-wrap {
    flex: 1 1 auto;
    min-height: 0;
}

/* ===== Confidence ======================================================== */
/* Same four bands the workbook uses, so a row reads the same on screen as it
   does in Excel. The workbook's fills are pastels chosen for white paper; on
   the dark table they become a tint plus coloured text, which carries the
   same signal without glowing. Light mode uses the workbook's own hues. */
.review-confidence {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.review-confidence.is-green  { color: #7BD88F; background: rgba(144, 238, 144, 0.10); }
.review-confidence.is-yellow { color: #E8D66B; background: rgba(255, 255, 153, 0.10); }
.review-confidence.is-orange { color: #F0B060; background: rgba(255, 204, 128, 0.12); }
.review-confidence.is-red    { color: #F08080; background: rgba(255, 153, 153, 0.14); }

/* On white, the workbook's exact fills. */
[data-review-theme="light"] .review-confidence.is-green  { color: #1F5B2A; background: #90EE90; }
[data-review-theme="light"] .review-confidence.is-yellow { color: #5C5000; background: #FFFF99; }
[data-review-theme="light"] .review-confidence.is-orange { color: #6B3E00; background: #FFCC80; }
[data-review-theme="light"] .review-confidence.is-red    { color: #6B0000; background: #FF9999; }

/* ===== "Looks like these too" =========================================== */
/* Offered, never applied on its own: a payee can legitimately be split
   across categories, and sweeping a whole vendor into one bucket silently is
   the sort of thing that only surfaces at the return. */
.review-suggest {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.7rem;
    padding: 0.7rem 0.9rem;
    background: rgba(206, 186, 76, 0.08);
    border: 1px solid rgba(206, 186, 76, 0.35);
    border-radius: 8px;
}

.review-suggest-head {
    font-weight: 700;
    color: var(--rv-accent);
}

.review-suggest-detail {
    font-size: 0.85rem;
    color: var(--rv-text-dim);
}

/* Scrolls once the list is long: a vendor with forty rows should not push
   the table itself off the screen. */
.review-suggest-list {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    max-height: 11rem;
    overflow-y: auto;
    padding: 0.4rem 0.1rem;
}

.review-suggest-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--rv-text);
    cursor: pointer;
}

.review-suggest-item input {
    flex: none;
    cursor: pointer;
}

/* A quick action carries the category the page is actually about, so it
   is weighted more than the generic picker beside it. Red where it takes
   money out of a total someone is about to file. */
.review-btn-quick {
    font-weight: 700;
    padding: 0.5rem 1rem;
}

.review-btn-danger {
    color: #fff;
    background: #b4342b;
    border-color: #b4342b;
}

.review-btn-danger:hover {
    color: #fff;
    background: #cf4238;
    border-color: #cf4238;
}

.review-btn-danger:focus-visible {
    outline: 2px solid #ff9c8f;
    outline-offset: 2px;
}