h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* ---- NCloud Web ---- */
/* sign-in (static page, no MudBlazor) */
.bare { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #eef2f7; font-family: Roboto, Arial, sans-serif; }
.login-card { background: #fff; padding: 32px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,.08); width: 340px; }
.login-card h1 { font-size: 20px; margin: 0 0 20px; color: #1e3a5f; }
.login-card label { display: block; font-size: 13px; color: #444; margin: 12px 0 4px; }
.login-card input { width: 100%; box-sizing: border-box; padding: 9px 10px; border: 1px solid #c8d0da; border-radius: 4px; font-size: 14px; }
.login-card button { margin-top: 20px; width: 100%; padding: 10px; background: #1e5aa8; color: #fff; border: 0; border-radius: 4px; font-size: 15px; cursor: pointer; }
.login-error { background: #fdecea; color: #b3261e; padding: 8px 10px; border-radius: 4px; font-size: 13px; }
.login-note { background: #eef3fb; color: #1e3a5f; padding: 8px 10px; border-radius: 4px; font-size: 13px; }

.login-card .remember { display: flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 13px; }
.login-card .company-fixed { display: flex; align-items: center; justify-content: space-between; padding: 9px 10px; border: 1px solid #e1e6ee; border-radius: 4px; background: #f6f8fb; font-size: 14px; font-weight: 500; }
.login-card .company-fixed a { font-size: 12px; font-weight: 400; color: #1e5aa8; }
.login-card .remember input { width: auto; }
/* "Choose a new password" (Components/Account/ChangePassword.razor): the sign-in card's look */
.password-card .password-who { font-size: 13px; color: #5a6475; margin: -12px 0 14px; }
.password-card .password-rule { font-size: 12px; color: #5a6475; margin-top: 10px; line-height: 1.4; }
.password-card .password-logout button { margin-top: 10px; background: transparent; color: #1e5aa8; font-size: 13px; padding: 6px; }
.legacy-mark { font-size: 11px; color: #8a94a6; margin-left: 2px; }

.login-card .version { margin-top: 16px; font-size: 11px; color: #8a94a6; text-align: center; }

/* Numbers in simple tables */
.tr { text-align: right; }

/* Order items toolbar: buttons in one row, the Disc % box right next to its button */
.line-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.line-tools .disc-group { display: inline-flex; align-items: center; gap: 6px; }
.line-tools .disc-input { flex: 0 0 110px; width: 110px; margin: 0; }

/* Order items: item finder, qty and Add stay together */
.add-group { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.add-group .add-item { width: 340px; max-width: 100%; }
.add-group .add-qty { flex: 0 0 80px; width: 80px; margin: 0; }
/* The item search's Price box (role 20 and up): the struck list price stays beside it */
.add-group.price-edit { justify-content: flex-end; flex-wrap: nowrap; }
.add-group .add-price { flex: 0 0 96px; width: 96px; margin: 0; }
.add-group .add-price input { text-align: right; font-weight: 600; }

/* Line discount as in OrderPad's cart: struck-through amount before discount, the discount in green */
.gross { text-decoration: line-through; opacity: .6; font-size: .8em; }
.line-disc { color: var(--mud-palette-success); font-size: .85em; }

/* Order lines: the item number with its small marks, the name on one line (cut, whole on hover) */
.line-item { white-space: nowrap; }
.line-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: clamp(160px, 22vw, 360px); }
.line-mark { display: inline-block; margin-left: 4px; padding: 0 5px; border: 1px solid var(--mud-palette-lines-default); border-radius: 9px;
             background: none; font: inherit; font-size: 11px; line-height: 16px; vertical-align: middle; }
.line-mark.tier { color: var(--mud-palette-info-darken); border-color: var(--mud-palette-info); }
.line-mark.free { color: var(--mud-palette-success-darken); border-color: var(--mud-palette-success); }
.line-mark.bo { color: var(--mud-palette-warning-text); background: var(--mud-palette-warning); border-color: var(--mud-palette-warning); }
.line-mark.manual { color: var(--mud-palette-warning-darken); border-color: var(--mud-palette-warning); }
.line-mark.charge { color: var(--mud-palette-secondary-darken); border-color: var(--mud-palette-secondary); }
.line-mark.not-invoiced { color: var(--mud-palette-warning-darken); border-color: var(--mud-palette-warning); }
.line-mark.renamed { color: var(--mud-palette-primary); border-color: var(--mud-palette-primary); }
.line-name-edit { min-width: clamp(160px, 22vw, 360px); }
/* The invoice screen: a waiting charge / deduction line of the order, its Correct / Remove buttons and the row being corrected. */
.invoice-charge-lines td.charge-actions { white-space: nowrap; text-align: right; }
.invoice-charge-lines tr.charge-editing td { vertical-align: middle; background: var(--mud-palette-background-gray); }
/* The line under a margin report's total: the goods alone, without charge / deduction lines (Docs/sales/non-stock-lines.md 11). */
tr.goods-only td { font-size: .92em; opacity: .8; border-top: 0; }
button.line-mark { color: var(--mud-palette-primary); border-color: var(--mud-palette-primary); cursor: pointer; }
button.line-mark:disabled { opacity: .5; cursor: default; }

/* Order item search */
.small-note { font-size: .78em; opacity: .7; }
.ai-usage-auto-note { padding-left: 18px; }
.ai-usage-auto-now { font-weight: 600; }   /* AI usage: the side of the automatic top-up in force */
/* A row's print button that is easy to hit (picking list, invoice list — 2026-10-16: the small icon was hard to click). */
.print-big { min-height: 40px; min-width: 88px; }
.print-count { margin-left: 6px; font-weight: 600; }
/* A link word shown in its place while there is nothing to open yet (dashboard "UPS" before a tracking #) */
.link-off { color: var(--mud-palette-text-disabled); cursor: default; }
.item-search td { vertical-align: top; }
.item-detail td { background: var(--mud-palette-background-gray); }
.detail-grid { display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: .9em; }
.detail-grid .small-note { margin-right: 6px; }
.item-search .add-group { flex-wrap: nowrap; }
.item-search td:last-child { white-space: nowrap; width: 190px; }
.bo-group td { background: var(--mud-palette-background-gray); }

/* Customer Ledger: one payment or credit line — its parts spaced by the box, since Blazor trims the whitespace between them
   (they read "CK1,048.10" and "73 days·" before, 2026-10-15). A bounced check's line is red. */
.ledger-entry { display: flex; flex-wrap: wrap; align-items: center; column-gap: .35em; }
.ledger-entry.bounced { color: var(--mud-palette-error); }
.ledger-entry .mud-chip { margin: 0; }

/* Customer notes and purchase history */
.note-row { padding: 6px 0; border-bottom: 1px solid var(--mud-palette-lines-default); }
.note-row:last-of-type { border-bottom: none; }
.note-text { white-space: pre-wrap; font-size: .92em; margin: 2px 0 0 2px; }
.history-table td { vertical-align: middle; }
.history-table td:last-child { width: 100px; }

/* Language picker on the sign-in page */
.login-card .lang-links { display: flex; gap: 12px; justify-content: center; margin-top: 16px; font-size: 13px; }
.login-card .lang-links a { color: #1e5aa8; }

/* ==== Look (Docs/ui-design.md, user 2026-09-28 "기능이 아니라 디자인만") ====
   Grey page, white cards, bold navy titles, quiet tables, one accent. Colours of the MudBlazor side are in WebTheme.cs. */
:root {
    --nc-bg: #f4f6f9;
    --nc-surface: #ffffff;
    --nc-line: #e2e6ec;
    --nc-title: #1e3a5f;
    --nc-muted: #6b7584;
    --nc-head-bg: #f6f7f9;
    --nc-head-text: #5f6b7a;
    --nc-radius: 8px;
}

/* Page titles: every h5 in the content is a page title today — navy and bold (weight in WebTheme) even before a page is converted. */
.mud-main-content .mud-typography-h5 { color: var(--nc-title); }

/* Flat cards: a hairline instead of a shadow, so white blocks read on the grey page. */
.mud-main-content .mud-paper.mud-elevation-1,
.mud-main-content .mud-table.mud-elevation-1 { box-shadow: none; border: 1px solid var(--nc-line); border-radius: var(--nc-radius); }
.mud-main-content .mud-table.mud-elevation-1 { overflow: hidden; }   /* the grey header row stays inside the round corners */
.mud-main-content .mud-paper-outlined { border-color: var(--nc-line); }

/* Tables: small grey header on a light grey row, hairline rows, tabular figures so columns of numbers line up. */
.mud-main-content .mud-table-root { font-variant-numeric: tabular-nums; }
.mud-main-content .mud-table-root .mud-table-head .mud-table-cell,
.mud-main-content .mud-simple-table table thead th {
    font-size: .75rem; font-weight: 500; color: var(--nc-head-text); background: var(--nc-head-bg);
    letter-spacing: .01em; line-height: 1.3; white-space: nowrap;
}
.mud-main-content .mud-table-head .mud-table-sort-label { color: inherit; }
.mud-main-content .mud-table-dense .mud-table-row .mud-table-cell { padding-top: 7px; padding-bottom: 7px; }
.mud-main-content .mud-simple-table.mud-table-dense table td { padding-top: 6px; padding-bottom: 6px; }
.mud-main-content .mud-table-pagination { border-top: 1px solid var(--nc-line); }
.tr { font-variant-numeric: tabular-nums; }

/* Striped lists start with a WHITE row, so the grey header row and the first line do not run together (user 2026-09-28:
   "줄은 흰색줄이 먼저 나오게"). MudBlazor greys the odd rows; grey the even ones instead, keep the hover colour. */
.mud-table-striped .mud-table-container .mud-table-root .mud-table-body:not(.mud-table-body-virtualized) .mud-table-row:nth-of-type(odd),
.mud-simple-table.mud-table-striped .mud-table-container table tbody tr:nth-of-type(odd) { background-color: transparent; }
.mud-table-striped .mud-table-container .mud-table-root .mud-table-body:not(.mud-table-body-virtualized) .mud-table-row:nth-of-type(even),
.mud-simple-table.mud-table-striped .mud-table-container table tbody tr:nth-of-type(even) { background-color: var(--mud-palette-table-striped); }
@media (hover: hover) and (pointer: fine) {
    .mud-table-hover.mud-table-striped .mud-table-container .mud-table-root .mud-table-body:not(.mud-table-body-virtualized) .mud-table-row:hover,
    .mud-simple-table.mud-table-hover.mud-table-striped .mud-table-container table tbody tr:hover { background-color: var(--mud-palette-table-hover); }
}

/* ---- PageHeader ---- */
.nc-page-header { margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--nc-line); }
.nc-page-loc { font-size: .72rem; font-weight: 500; letter-spacing: .04em; color: var(--nc-muted); margin: 0 0 2px; }
.nc-page-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.nc-page-titlebox { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; flex: 1 1 auto; }
.nc-page-back { margin-left: -6px; }
.nc-page-title { margin: 0; font-size: 1.375rem; font-weight: 600; line-height: 1.3; color: var(--nc-title); overflow-wrap: anywhere; }
.nc-page-chips { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nc-page-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; }
.nc-page-sub { margin-top: 4px; font-size: .8125rem; color: var(--nc-muted); }
@media (max-width: 600px) {
    .nc-page-actions { margin-left: 0; justify-content: flex-start; width: 100%; }
    .nc-page-title { font-size: 1.2rem; }
}

/* ---- Cards (FilterCard, TableCard, detail cards with CardHead) ---- */
.nc-card { background: var(--nc-surface); border: 1px solid var(--nc-line); border-radius: var(--nc-radius); box-shadow: none; }
.mud-main-content .nc-card.mud-paper { box-shadow: none; }
.nc-filter { padding: 12px 16px; margin-bottom: 16px; }
.nc-table-card { margin-bottom: 16px; overflow: hidden; }
.nc-table-card > .mud-table,
.nc-table-card > .mud-table.mud-elevation-1 { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.nc-table-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 12px; border-bottom: 1px solid var(--nc-line); }
.nc-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 10px; }
.nc-card-title { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.4; color: var(--nc-title); }
.nc-card-after { margin-left: 6px; font-weight: 400; color: var(--nc-muted); font-size: .875rem; }
.nc-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }

/* ---- StatusChip: grey draft/waiting, blue open, amber packing/picking, green done, red lock/void ---- */
.nc-status {
    display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px; border-radius: 11px;
    font-size: .75rem; font-weight: 500; line-height: 1; white-space: nowrap; vertical-align: middle; border: 1px solid transparent;
}
.nc-status-grey  { background: #eef0f3; color: #4a5361; border-color: #e1e4e9; }
.nc-status-blue  { background: #e8f0fb; color: #1e5aa8; border-color: #d3e2f6; }
.nc-status-amber { background: #fdf3e1; color: #8a5a00; border-color: #f6e2bb; }
.nc-status-green { background: #e7f5ec; color: #1f7a45; border-color: #cdebd8; }
.nc-status-red   { background: #fdecec; color: #b3261e; border-color: #f7d4d2; }

/* ---- WriteGuardNotice: one small chip ---- */
.nc-guard { cursor: help; }
.nc-guard .nc-guard-icon { font-size: 14px; width: 14px; height: 14px; }
.nc-guard-row { display: flex; justify-content: flex-end; margin: -6px 0 6px; }

/* The grey page is for the screen only; a printed page stays white. The settlement statement preview is a sheet of paper
   on the grey page. */
.mud-main-content .stmt { background: #fff; padding: 24px; border: 1px solid var(--nc-line); border-radius: var(--nc-radius); }
@media print {
    body, .mud-layout, .mud-main-content { background: #fff !important; }
    .mud-main-content .stmt { border: 0; padding: 0; }
}

/* Date pickers: the calendar is wider than a narrow field (Style="width:160px"), and the popover took the field's width,
   which cut the calendar off (user 2026-09-28). Let the popover grow to its content. */
.mud-picker-popover-paper,
.mud-popover:has(> .mud-picker-popover-paper) { min-width: max-content; }

/* Narrow fields (user 2026-10-03, iPad: "날자부분이 다 잘리는거 같아" — "다 그런거 같아"). The grid's columns follow the window, not
   the room the side menu leaves, so on an iPad or a laptop with the menu open a md=2 column was about 100px and a date showed as
   "1" beside its clear and calendar buttons; a Style="width:160px" date with a clear button lost its first digits too.
   - A date box is never narrower than its date and both buttons: MM/dd/yyyy at the input's 16px is 86px; an outlined box adds
     14px padding, the clear button 26px and the calendar button 36px (171px) — 11.5rem leaves room for another font. A text-variant
     box (in table rows) has no padding: 10rem. min-width wins over a page's Style width, so those pages need no change.
   - A select in a filter grid is never narrower than a short choice ("Posted", "Everyone"): 10rem for its column — a fixed width,
     not the text's, so a long value cannot push the row off the page.
   A grid column holding one grows to it and the row wraps. Wide screens are unchanged (their columns are wider already). */
.mud-picker.mud-picker-inline { min-width: 10rem; }
.mud-picker.mud-picker-inline:has(.mud-input-outlined) { min-width: 11.5rem; }
.mud-grid-item:has(> .mud-picker.mud-picker-inline) { min-width: min-content; }
.mud-grid-item:has(> .mud-select) { min-width: 10rem; }
/* The same minimum on the BOX itself (user 2026-10-06, the new accounting pages: a From / To of Style="width:150px" cut after
   "01/01/202" — "여기도 다 수정됐는데 날자 잘리게 나오네?"). MudBlazor puts a picker's Style on its inner .mud-input — the box with the
   border — not on the .mud-picker root, so the root's min-width above left such a box as narrow as its page said: 85 date boxes
   of the site had a width below the minimum, on old pages and new. min-width wins over an inline width and over max-width, so
   no page changes, and it does not depend on the window: desktop, a laptop with the menu open and an iPad alike. */
.mud-picker.mud-picker-inline .mud-input { min-width: 10rem; }
.mud-picker.mud-picker-inline .mud-input.mud-input-outlined { min-width: 11.5rem; }

/* Customer List: the address is one cell of two lines (street lines; city, state zip), and its header carries the two sorts the
   city and state columns had (owner 2026-10-06). */
.cust-addr { min-width: 14rem; line-height: 1.3; }
.cust-addr > div:empty { display: none; }
.cust-addr-head .cust-addr-sorts { display: flex; gap: 0.75rem; font-size: 0.75rem; font-weight: 400; }

/* While check boxes are dragged over (js/check-range.js), the drag selects no text. */
html.nc-check-painting, html.nc-check-painting * { -webkit-user-select: none !important; user-select: none !important; }

/* The menu's ☆ (2026-10-18): a page on the member's first screen — shown on hover, always when on. */
.nc-menu-row { position: relative; }
.nc-menu-row .nc-fav { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: #9aa3b2;
                       font-size: 14px; line-height: 1; padding: 2px 4px; cursor: pointer; opacity: 0; }
.nc-menu-row:hover .nc-fav, .nc-menu-row .nc-fav:focus-visible, .nc-menu-row .nc-fav.on { opacity: 1; }
.nc-menu-row .nc-fav.on { color: #f5a623; }


/* Invoice Packed (2026-10-19): days a packing has waited for its invoice; past InvoicingRules.LateDays in red */
.account-packed-list .packed-waiting { white-space: nowrap; }
.account-packed-list .packed-late { color: #b3261e; font-weight: 600; }
/* Picking List (2026-10-19): days since the packing was made; past PickingRules.LateDays in red */
.picking-list .picking-waiting { white-space: nowrap; }
.picking-list .picking-late { color: #b3261e; font-weight: 600; }

/* The right pane (Layout/RightPane.razor — Help › "This screen" or the AI assistant's chat, 2026-11-01): it moves the page over as wide
   as it is; while its grip is dragged nothing is selected and the page follows at once. Below 900 px wide it lies over the page
   (no room to share), at most the screen's width. */
body.right-pane-resizing, body.right-pane-resizing * { -webkit-user-select: none !important; user-select: none !important; cursor: col-resize !important; }
body.right-pane-resizing .mud-main-content, body.right-pane-resizing .mud-drawer.right-pane { transition: none !important; }
.mud-drawer.right-pane > .mud-drawer-content { position: relative; }
@media (max-width: 899.98px) {
    body .mud-layout.mud-drawer-open-persistent-right .mud-main-content { margin-right: 0; }
    .mud-drawer.right-pane { max-width: 100vw; }
}

/* Company documents (Docs/approvals/documents.md): the file boxes, expense lines stacked to a phone's width, the form cards. */
.doc-file-list { display: flex; flex-wrap: wrap; gap: 8px; }
.doc-file { position: relative; max-width: 140px; }
.doc-file img { width: 120px; height: 90px; object-fit: cover; border: 1px solid var(--nc-line); border-radius: 4px; display: block; }
.doc-file-name { display: inline-flex; align-items: center; gap: 4px; font-size: .85rem; word-break: break-all; }
.doc-file-remove { position: absolute !important; top: -6px; right: -6px; background: var(--nc-surface) !important; }
.doc-file-pick { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; position: relative; }
.doc-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.doc-line { padding: 10px 12px; margin-bottom: 10px; }
.doc-line-head { margin-bottom: 4px; }
.doc-totals .doc-total-line { font-size: .9rem; }
.doc-total-sum { margin-left: auto; text-align: right; }
.doc-form-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.doc-form-card { display: block; padding: 14px; text-decoration: none; color: inherit; }
.doc-form-card:hover { border-color: var(--mud-palette-primary); }
.doc-form-card-name { font-weight: 600; margin-bottom: 4px; }
.doc-section-title { font-size: 1rem; font-weight: 600; margin: 8px 0; }
.doc-field { margin-bottom: 10px; }
.doc-field-label { font-size: .85rem; color: var(--mud-palette-text-secondary); margin-bottom: 2px; }
.doc-table-wrap { overflow-x: auto; }
.doc-table { border-collapse: collapse; width: 100%; }
.doc-table th { text-align: left; font-size: .8rem; font-weight: 600; padding: 2px 4px; }
.doc-table td { padding: 2px 4px; vertical-align: top; min-width: 90px; }
.pre-wrap { white-space: pre-wrap; }
@media (max-width: 599.98px) {
    .doc-total-sum { margin-left: 0; text-align: left; }
    .doc-rows th:nth-child(n+6), .doc-rows td:nth-child(n+6) { display: none; }
}

/* The top bar on a phone or a tablet held upright (2026-11-11, seen on Demo at 370px: the version "v2026.11.11.832+… · shared"
   pushed the AI assistant and Help buttons off the screen; at 768px — an iPad upright — Logout was off it. Approvals, Calendar,
   My Info and Logout are only up here, the left menu does not have them). Below 900px the version is hidden (it is on /healthz
   and on a wider screen), the buttons keep their size and the bar scrolls sideways, so every button can still be reached; below
   600px the "company · name" line goes too, so the menu, the name, Language, AI and Help fit a phone's width. */
@media (max-width: 899.98px) {
    .mud-appbar .appbar-version { display: none; }
    .mud-appbar .mud-toolbar { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .mud-appbar .mud-toolbar::-webkit-scrollbar { display: none; }
    .mud-appbar .mud-toolbar > * { flex-shrink: 0; }
}
@media (max-width: 599.98px) {
    .mud-appbar .appbar-who { display: none; }
}

/* ---- CustomerMoneyBand: the customer's money at the top of the customer page and the order screen (Docs/sales/customer-parity.md 8) ---- */
.nc-money { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.nc-money-cell {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; margin: 0; padding: 10px 12px;
    border: 1px solid var(--nc-line); border-radius: var(--nc-radius); background: var(--nc-surface);
    color: inherit; font: inherit; text-align: left; text-decoration: none;
}
button.nc-money-cell, a.nc-money-cell { cursor: pointer; }
button.nc-money-cell:hover, a.nc-money-cell:hover { filter: brightness(.97); }
.nc-money-cell .lbl { display: inline-flex; align-items: center; gap: 2px; font-size: .75rem; font-weight: 500; color: var(--nc-muted); }
.nc-money-cell .val { font-size: 1.25rem; font-weight: 600; line-height: 1.3; color: var(--nc-title); font-variant-numeric: tabular-nums; }
.nc-money-cell .val.muted { font-size: 1rem; font-weight: 500; color: var(--nc-muted); }
.nc-money-cell .sub { font-size: .75rem; color: var(--nc-muted); overflow-wrap: anywhere; }
.nc-money-cell.tone-blue  { background: #e8f0fb; border-color: #d3e2f6; }
.nc-money-cell.tone-blue .val  { color: #1e5aa8; }
.nc-money-cell.tone-amber { background: #fdf3e1; border-color: #f6e2bb; }
.nc-money-cell.tone-amber .val { color: #8a5a00; }
.nc-money-cell.tone-green { background: #e7f5ec; border-color: #cdebd8; }
.nc-money-cell.tone-green .val { color: #1f7a45; }
.nc-money-cell.tone-red   { background: #fdecec; border-color: #f7d4d2; }
.nc-money-cell.tone-red .val   { color: #b3261e; }
.nc-money.compact { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px; }
.nc-money.compact .nc-money-cell { padding: 6px 10px; }
.nc-money.compact .val { font-size: 1.05rem; }
@media (max-width: 600px) { .nc-money { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Recent invoices: a waiting post-dated check under the balance; paid by such checks = greyed. */
td.covered { color: var(--nc-muted); }
.waiting-check { display: inline-flex; align-items: center; gap: 2px; font-size: .72rem; color: #1e5aa8; white-space: nowrap; }
.waiting-check .mud-icon-root { font-size: 14px; width: 14px; height: 14px; }