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-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; }
.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; }

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