/* ---------------------------------------------------------------------------
 * SINGLE INVOICE PAGE (viewing mode)
 * Scoped under body.invoice so nothing here touches the invoice editor, the
 * estimate page, or any list. Same steel + brass family as the rest.
 * ------------------------------------------------------------------------- */

body.invoice {
    --ivw-surface:   #ffffff;
    --ivw-surface-2: #e9edef;
    --ivw-sunk:      #e3e8ea;
    --ivw-line:      #d5dce0;
    --ivw-hairline:  #e7ecee;
    --ivw-text:      #121a20;
    --ivw-text-2:    #5c6b78;
    --ivw-text-3:    #8697a3;
    --ivw-brass:     #9a6a1f;
    --ivw-brass-ink: #ffffff;

    --ivw-paid: #2563eb;

    /* ordinal ramp for how late, matching the list and the dashboard */
    --ivw-age-1: #e5a077;
    --ivw-age-2: #d4813f;
    --ivw-age-3: #c2410c;
    --ivw-age-4: #8a2c08;
    --ivw-age-ink-light: #3d1c08;
    --ivw-age-ink-dark:  #ffffff;

    --ivw-critical:    #a3261a;
    --ivw-critical-bg: #f9e3e0;
    --ivw-warning:     #8a5a08;
    --ivw-warning-bg:  #f8ecd6;
    --ivw-good:        #17604a;
    --ivw-good-bg:     #dff0e8;

    --ivw-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ivw-mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;
    --ivw-figure: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
    --ivw-r: 3px;
}

body.invoice.theme-dark,
html.dark body.invoice,
body.dark-theme.invoice {
    --ivw-surface: #151d23; --ivw-surface-2: #1c262d; --ivw-sunk: #111920;
    --ivw-line: #2a353d; --ivw-hairline: #202b32;
    --ivw-text: #e7edf1; --ivw-text-2: #93a3af; --ivw-text-3: #6d7f8c;
    --ivw-brass: #cf9f4f; --ivw-brass-ink: #14100a;
    --ivw-paid: #3b82f6;
    --ivw-age-1: #8a4a22; --ivw-age-2: #b45f2c; --ivw-age-3: #e2703a; --ivw-age-4: #f2a173;
    --ivw-age-ink-light: #ffffff; --ivw-age-ink-dark: #2a1408;
    --ivw-critical: #f08a7c; --ivw-critical-bg: #3a1d18;
    --ivw-warning: #d9a441; --ivw-warning-bg: #332811;
    --ivw-good: #52c49b; --ivw-good-bg: #12332a;
}

body.invoice .ivw { display: flex; flex-direction: column; gap: 16px; }
body.invoice .ivw :focus-visible { outline: 2px solid var(--ivw-brass); outline-offset: 2px; }
body.invoice .ivw-mono { font-family: var(--ivw-mono); font-variant-numeric: tabular-nums; }

body.invoice .ivw-card {
    background: var(--ivw-surface); border: 1px solid var(--ivw-line); border-radius: var(--ivw-r);
}
body.invoice .ivw-card-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 13px 18px; border-bottom: 1px solid var(--ivw-line);
}
body.invoice .ivw-card-head h2 { font-size: 16.5px; font-weight: 620; margin: 0; color: var(--ivw-text); }
body.invoice .ivw-card-head .meta { font-size: 14.5px; color: var(--ivw-text-3); }

/* ---------- masthead ---------- */
body.invoice .ivw-crumb { font-size: 13.5px; color: var(--ivw-text-3); }
body.invoice .ivw-crumb a { text-decoration: none; color: var(--ivw-text-3); }
body.invoice .ivw-crumb a:hover { color: var(--ivw-brass); }

body.invoice .ivw-masthead {
    display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px;
}
body.invoice .ivw-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
body.invoice .ivw-masthead h1 {
    font-size: 27px; font-weight: 620; letter-spacing: -.017em; margin: 0; color: var(--ivw-text);
}
body.invoice .ivw-who { font-size: 16px; color: var(--ivw-text-2); margin-top: 2px; }
body.invoice .ivw-who a { color: var(--ivw-text); text-decoration: none; font-weight: 550; }
body.invoice .ivw-who a:hover { color: var(--ivw-brass); }

/* status: colour plus a word, never colour alone */
body.invoice .ivw-pill {
    display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650;
    letter-spacing: .05em; text-transform: uppercase; padding: 4px 10px; border-radius: 2px; white-space: nowrap;
}
body.invoice .ivw-pill.overdue { background: var(--ivw-critical-bg); color: var(--ivw-critical); }
body.invoice .ivw-pill.due     { background: var(--ivw-warning-bg);  color: var(--ivw-warning); }
body.invoice .ivw-pill.paid    { background: var(--ivw-good-bg);     color: var(--ivw-good); }
body.invoice .ivw-pill.draft   { background: var(--ivw-surface-2);   color: var(--ivw-text-3); }

body.invoice .ivw-age {
    font-family: var(--ivw-mono); font-size: 13px; padding: 3px 8px; border-radius: 2px; white-space: nowrap;
}
body.invoice .ivw-age.a1 { background: var(--ivw-age-1); color: var(--ivw-age-ink-light); }
body.invoice .ivw-age.a2 { background: var(--ivw-age-2); color: var(--ivw-age-ink-light); }
body.invoice .ivw-age.a3 { background: var(--ivw-age-3); color: var(--ivw-age-ink-dark); }
body.invoice .ivw-age.a4 { background: var(--ivw-age-4); color: var(--ivw-age-ink-dark); }
body.invoice .ivw-age.none { background: var(--ivw-surface-2); color: var(--ivw-text-3); }

/* ---------- actions ---------- */
body.invoice .ivw-actions { display: flex; flex-wrap: wrap; gap: 7px; }
body.invoice .ivw-btn {
    font-family: var(--ivw-sans); font-size: 14.5px; font-weight: 550; padding: 8px 14px;
    border-radius: var(--ivw-r); cursor: pointer; border: 1px solid var(--ivw-line);
    background: var(--ivw-surface); color: var(--ivw-text);
    display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
}
body.invoice .ivw-btn:hover {
    background: var(--ivw-surface-2); border-color: var(--ivw-text-3);
    color: var(--ivw-text); text-decoration: none;
}
body.invoice .ivw-btn-primary { background: var(--ivw-brass); border-color: var(--ivw-brass); color: var(--ivw-brass-ink); }
body.invoice .ivw-btn-primary:hover {
    background: var(--ivw-brass); border-color: var(--ivw-brass); color: var(--ivw-brass-ink); filter: brightness(1.07);
}
body.invoice .ivw-btn .g { font-family: var(--ivw-mono); font-size: 15px; line-height: 1; }

/* ---------- money strip ---------- */
body.invoice .ivw-strip { display: grid; grid-template-columns: 1.15fr 1fr 1fr; }
@media (max-width: 720px) { body.invoice .ivw-strip { grid-template-columns: 1fr; } }
body.invoice .ivw-strip > div { padding: 18px 20px; border-right: 1px solid var(--ivw-hairline); }
body.invoice .ivw-strip > div:last-child { border-right: 0; }
@media (max-width: 720px) {
    body.invoice .ivw-strip > div { border-right: 0; border-bottom: 1px solid var(--ivw-hairline); }
    body.invoice .ivw-strip > div:last-child { border-bottom: 0; }
}
body.invoice .ivw-strip .lbl { font-size: 13.5px; color: var(--ivw-text-2); }
body.invoice .ivw-strip .fig {
    font-family: var(--ivw-figure); font-size: 34px; letter-spacing: -.028em;
    font-variant-numeric: tabular-nums; line-height: 1.1; margin-top: 4px; color: var(--ivw-text);
}
body.invoice .ivw-strip .fig.owing { color: var(--ivw-critical); }
body.invoice .ivw-strip .fig.settled { color: var(--ivw-good); }
body.invoice .ivw-strip .sub { font-size: 13.5px; color: var(--ivw-text-3); margin-top: 3px; }

body.invoice .ivw-track { height: 6px; background: var(--ivw-surface-2); border-radius: 4px; overflow: hidden; margin-top: 10px; }
body.invoice .ivw-fill { height: 100%; background: var(--ivw-paid); border-radius: 4px; }

/* ---------- document ---------- */
body.invoice .ivw-doc-meta {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px;
    padding: 16px 18px; border-bottom: 1px solid var(--ivw-hairline);
}
body.invoice .ivw-doc-meta .k {
    font-size: 12.5px; font-weight: 650; letter-spacing: .11em;
    text-transform: uppercase; color: var(--ivw-text-3);
}
body.invoice .ivw-doc-meta .v { font-size: 15px; margin-top: 2px; color: var(--ivw-text); }
body.invoice .ivw-doc-meta .v.late { color: var(--ivw-critical); }
body.invoice .ivw-doc-meta .v.none { color: var(--ivw-text-3); }

body.invoice .ivw-scroll { overflow-x: auto; }
body.invoice table.ivw-items { width: 100%; border-collapse: collapse; min-width: 620px; margin: 0; }
body.invoice table.ivw-items thead th {
    text-align: left; font-size: 12.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ivw-text-3); padding: 10px 18px; background: var(--ivw-surface-2);
    border-bottom: 1px solid var(--ivw-line); white-space: nowrap;
}
body.invoice table.ivw-items th.num, body.invoice table.ivw-items td.num { text-align: right; }
body.invoice table.ivw-items tbody td {
    padding: 14px 18px; border-bottom: 1px solid var(--ivw-hairline); border-top: 0;
    vertical-align: top; color: var(--ivw-text);
}
body.invoice table.ivw-items tbody tr:last-child td { border-bottom: 0; }
body.invoice .ivw-item-desc { font-size: 15px; line-height: 1.45; }
body.invoice .ivw-item-unit { display: block; font-size: 13px; color: var(--ivw-text-3); margin-top: 2px; }

body.invoice .ivw-totals {
    display: flex; justify-content: flex-end; padding: 14px 18px;
    border-top: 1px solid var(--ivw-line); background: var(--ivw-sunk);
}
body.invoice .ivw-totals table { border-collapse: collapse; min-width: 300px; margin: 0; }
body.invoice .ivw-totals td { padding: 4px 0 4px 24px; font-size: 14.5px; border: 0; }
body.invoice .ivw-totals td.k { color: var(--ivw-text-2); }
body.invoice .ivw-totals td.v {
    text-align: right; font-family: var(--ivw-mono); font-variant-numeric: tabular-nums; color: var(--ivw-text);
}
body.invoice .ivw-totals tr.grand td { border-top: 1px solid var(--ivw-line); padding-top: 9px; font-size: 17px; font-weight: 650; }
body.invoice .ivw-totals tr.bal td { font-weight: 650; }
body.invoice .ivw-totals tr.bal td.v.owing { color: var(--ivw-critical); }
body.invoice .ivw-totals tr.bal td.v.settled { color: var(--ivw-good); }

/* ---------- terms / notes ---------- */
body.invoice .ivw-split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
@media (max-width: 820px) { body.invoice .ivw-split { grid-template-columns: 1fr; } }
body.invoice .ivw-prose { padding: 16px 18px; font-size: 14.5px; color: var(--ivw-text-2); line-height: 1.6; }
body.invoice .ivw-prose strong, body.invoice .ivw-prose b { color: var(--ivw-text); }
body.invoice .ivw-prose p { margin: 0 0 6px; }
body.invoice .ivw-prose p:last-child { margin-bottom: 0; }
body.invoice .ivw-internal {
    font-size: 12.5px; color: var(--ivw-text-3); letter-spacing: .06em;
    text-transform: uppercase; font-weight: 650;
}
body.invoice .ivw-empty { color: var(--ivw-text-3); }

/* the payments panel sits inside this page, so give it the same top margin as a card */
body.invoice .ivp { margin-top: 0; }