/* Styles for the synthetic intake report page (Recent Report / Last Window
   Scan / Last Freezer Scan tabs). Rendered by finance/intake_report_page.py,
   which links this file instead of inlining CSS. */

@import url("./manual-entry.css?v=20260903");
@import url("./mazda-mode.css?v=20260903");

/* Left padding cut to 10px (from the vendor-default-ish 24px kept on the
   other 3 sides) -- this iframe sits right against .content's left edge, so
   its own left padding is the last layer standing between the dialog and the
   nav column; trimming it is what gets that gap down to ~1/3in total. */
body { margin:0; padding:24px 24px 24px 10px; background:#008080; }
/* Matches .content's max-width in dashboard.css -- this page renders inside
   that div's iframe, so its own cap has to grow in lockstep or the dialog
   would stay narrow even though its container widened. */
section.card { padding:0; margin:0 auto; max-width:1214px; }
/* height, not max-height/auto -- with max-height the box only got as tall as
   its content needed, so the .plan-frame growth in dashboard.css (the "20%
   taller" ask) had nothing to visibly push against. A set height makes the
   dialog always fill the space its iframe now has, scrolling internally
   past that instead of shrinking to fit. */
section.card > .window-body { height:calc(100vh - 100px); overflow:auto; }
h1 { font-size:1.15rem; margin:0 0 4px; } h2 { font-size:1rem; margin:18px 0 8px; }
table { width:100%; font-size:0.85rem; }
th.number, td.number { text-align:right; }
/* 98.css declares font-family directly on <table>, which beats a
   .dialog-panel ancestor's inherited font-family regardless of specificity
   — override it here so the Verified Transactions table actually matches
   the rest of the dialog's Courier New instead of the vendor's pixel font. */
.dialog-panel table { font-family:"Courier New",Courier,monospace; }
.muted { color:#6b7280; }
/* 98.css gives table cells only padding:0 6px and height:14px — fine for a
   dense one-line data row, but the empty-table explanation (e.g.
   "MAZDA_DECISION_MODE=human_only — ...") is a full sentence that reads as
   cramped against the cell edges without room to breathe. */
td.muted { padding:10px 12px; height:auto; }
.duplicate-row td { box-shadow:inset 0 2px #b91c1c,inset 0 -2px #b91c1c; }
.duplicate-badge { display:inline-block; margin-left:8px; padding:2px 7px; background:#b91c1c; color:#fff; font-size:.72rem; letter-spacing:.04em; }
.mazda-working { margin:16px 0; padding:12px; background:#000; color:#ffe761; }
.mazda-working h2 { color:#fff; }
.mazda-progress-shell { height:10px; overflow:hidden; background:rgba(10,16,24,.8); }
.mazda-progress-bar { height:100%; background:#f4b400; }
.mazda-working ul { margin:8px 0 0; padding-left:20px; }
.mazda-step-done { color:#4ade80; } .mazda-step-active { color:#ffe761; font-weight:700; }
.mazda-step-skipped, .mazda-step-pending { color:#9aa5b1; }
.doc-meta { margin:12px 0; display:grid; gap:2px; font-size:0.85rem; }
.doc-meta-row { overflow-wrap:anywhere; }
.status-banner { margin:14px 0 0; padding:8px 10px; border:2px inset #808080; background:#c0c0c0; }
.status-bad { background:#ff8080; color:#7f1d1d; font-weight:600; }
.status-ok { background:#a0ffa0; }
.status-working { background:#fffbeb; }
.status-attention { background:#ffdca0; color:#78350f; font-weight:600; }

/* ---------------------------------------------------------------------------
   Verified Transactions rows: taller, with per-row actions.

   The table is the operator's working surface, not a printout -- each row now
   carries Edit / Delete / Add 6%, and 98.css's 14px data row has no space for
   a button (its own min-height is 23px). Everything below derives from that
   one vendor number so the relationship stays legible: --vt-row-height is the
   "400% taller" ask expressed as a multiple of the row height it replaces.
   --------------------------------------------------------------------------- */
#verified-transactions {
    /* 14px is 98.css's `table>tbody>tr>*` height -- the height these rows
       actually had before. Change the multiplier, not the base. */
    --vt-row-base: 14px;
    --vt-row-height: calc(var(--vt-row-base) * 4);
    /* "About 2 characters" narrower, in real characters: `ch` is the advance
       width of this monospace face, so 2ch is exactly two columns of text. */
    --vt-column-trim: 2ch;
}
#verified-transactions > tbody > tr > * {
    height: var(--vt-row-height);
    vertical-align: middle;
}
/* Amount and Date hold fixed-shape values ("-28.73", "2025-06-12"). Unlike
   Description they gain nothing from the slack a 100%-wide table hands them,
   so they are sized at their own content less two characters, half of which
   comes off the vendor's 6px side padding. Nothing clips: under
   table-layout:auto a declared width is floored at the column's min-content,
   and 98.css keeps table text nowrap. */
#verified-transactions th.number,
#verified-transactions td.number {
    width: calc(10ch - var(--vt-column-trim));
    padding-left: 2px;
    padding-right: 2px;
}
#verified-transactions th.vt-date,
#verified-transactions td.vt-date {
    width: calc(13ch - var(--vt-column-trim));
    padding-left: 2px;
    padding-right: 2px;
}
/* The actions cell sizes to its buttons and nothing more -- the width freed
   from Amount and Date is what pays for it. */
#verified-transactions th.vt-actions,
#verified-transactions td.vt-actions {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}
/* The row itself opens the category picker (its inline onclick). A button
   inside it is a different verb, so the cell must not read as part of the
   row's own click target. */
#verified-transactions td.vt-actions {
    cursor: default;
}
/* The buttons live in their own flex box rather than the cell itself: a <td>
   set to display:flex stops being a table-cell, and the column it belongs to
   stops lining up with its header. */
.vt-action-group {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
}
/* min-width:0 drops 98.css's 75px button floor: three buttons at that floor
   would take 240px of a table whose Description column needs every pixel, and
   these labels are short enough to size themselves. */
.vt-action {
    min-width: 0;
    padding: 0 10px;
}

/* The Delete confirmation. A real dialog rather than window.confirm(), whose
   buttons say OK/Cancel and cannot be made to say Yes/Cancel, and which would
   look nothing like the rest of this page. */
.vt-confirm-backdrop {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
}
.vt-confirm-backdrop .window {
    min-width: 320px;
    max-width: min(90vw, 520px);
}
.vt-confirm-message {
    margin: 0 0 14px;
    font-family: "Courier New", Courier, monospace;
    overflow-wrap: anywhere;
}
.vt-confirm-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}