/* egpmes.web — app-wide styles on top of MudBlazor. Colours come from the Mud palette variables
   (EgpTheme.cs) so light and dark both work; the status palette is inline (StatusColors.cs). */

html, body {
    font-family: Inter, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* ---- Shell ---------------------------------------------------------------------------------- */

.egp-appbar__logo {
    width: 26px;
    height: 26px;
    margin-left: 4px;
    border-radius: 6px;
    background: #fff;
    padding: 2px;
}

.egp-appbar__title {
    margin-left: 10px;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .egp-appbar__title { display: none; }
}

/* The order finder sits on the green bar: a light field, like the desktop's nav-pane box. */
.egp-finder { width: 240px; margin-right: 12px; }
.egp-finder .mud-input-control { margin: 0; }
.egp-finder .mud-input.mud-input-outlined {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 6px;
    color: #1F2937;
}
.egp-finder .mud-input-adornment .mud-icon-root { color: #4B5563; }
@media (max-width: 700px) { .egp-finder { width: 150px; } }

.egp-main {
    padding-top: 20px;
    padding-bottom: 32px;
}

.egp-nav__soon {
    margin-left: 6px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.7;
}

.egp-usermenu__who {
    padding: 8px 16px 10px;
    min-width: 200px;
}

/* Live-updates indicator in the app bar. */
.egp-live {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 0 10px;
    border: 2px solid rgba(255, 255, 255, 0.85);
}
.egp-live--on { background: #8BE38F; }
.egp-live--connecting { background: #F5C451; }
.egp-live--off { background: transparent; }

/* ---- Page header / footer ------------------------------------------------------------------- */

.egp-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 24px;
    margin-bottom: 20px;
}

.egp-page-header__title {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.25;
    outline: none;
}

.egp-page-header__subtitle {
    margin-top: 4px;
}

.egp-page-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.egp-page-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin-top: 28px;
    padding-top: 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

.egp-section-label {
    margin: 4px 2px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

/* ---- KPI tiles (Dashboard) ------------------------------------------------------------------ */

.egp-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.egp-tile {
    min-width: 150px;
    padding: 14px 18px;
    border-radius: 8px;
}

.egp-tile--hero {
    min-width: 240px;
}

.egp-tile--action {
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.egp-tile--action:hover {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
}

.egp-tile__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.egp-tile__label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.egp-tile__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--mud-palette-primary);
    background: rgba(47, 125, 50, 0.14);
}

.egp-tile__value {
    margin-top: 4px;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.egp-tile--hero .egp-tile__value { font-size: 2.2rem; }
.egp-tile__value--brand { color: var(--mud-palette-primary); }

.egp-tile__hint {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
}

.egp-tile__status {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--mud-palette-text-secondary);
}

.egp-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* ---- List pages: toolbar, status chip, summary bar ------------------------------------------ */

.egp-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 12px;
}
.egp-toolbar__date { width: 175px; flex: 0 0 auto; }
.egp-toolbar__heading { font-weight: 600; margin-left: 4px; }

.egp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 1px 10px 1px 8px;
    border-radius: 999px;
    border: 1px solid var(--mud-palette-lines-default);
    font-size: 0.8rem;
    white-space: nowrap;
}

.egp-grid-num { font-variant-numeric: tabular-nums; }
/* Many narrow columns (the H P A R D K S L buckets): Mud's default cell padding would push the
   last ones off a laptop screen. */
.egp-grid-compact.mud-table-dense * .mud-table-row .mud-table-cell {
    padding-inline: 10px;
    white-space: nowrap;
}
/* A long header may wrap onto two lines in a compact grid (Remakes' "Detail Item ID"). */
.egp-grid-compact.mud-table-dense * .mud-table-row .mud-table-cell.egp-th-wrap,
.egp-th-wrap .column-header,
.egp-th-wrap .sortable-column-header { white-space: normal; }
/* A scrolling table gives each column its full width, so a width is what makes the header wrap. */
.egp-grid-compact.mud-table-dense * .mud-table-row .mud-table-cell.egp-th-wrap { width: 76px; }
/* Long text cut to a column's width; the whole of it in the tooltip. */
.egp-clip {
    display: inline-block;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}
.egp-clip--wide { max-width: 240px; }
/* Text read whole (a line's glass description): never cut. Past ~60 characters it takes a second
   line, so the columns after it (Schedule, HP3 #) stay in reach. */
.egp-wrap {
    display: block;
    white-space: normal;
}
/* Columns the user resizes (ColumnWidths): a width they set is --egp-col-<key> on the grid's
   wrapper; unset, each column keeps its own (descriptions wrap past 480 px, a title shows whole,
   a customer or note is cut at 240 / 160 px with the whole of it in the tooltip). */
.egp-cols { display: contents; }
.egp-col--description { width: var(--egp-col-description, auto); max-width: var(--egp-col-description, 480px); }
.egp-col--title {
    display: block;
    width: var(--egp-col-title, auto);
    overflow: hidden;
    text-overflow: ellipsis;
}
.egp-col--customer { width: var(--egp-col-customer, auto); max-width: var(--egp-col-customer, 240px); }
.egp-col--note { width: var(--egp-col-note, auto); max-width: var(--egp-col-note, 160px); }
/* The grip: a resizable header's right edge (the header is sticky, so it holds the grip). */
.egp-cols th.egp-col-head::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 0;
    bottom: 6px;
    width: 8px;
    border-right: 2px solid var(--mud-palette-lines-default);
    cursor: col-resize;
}
.egp-cols th.egp-col-head:hover::after,
.egp-cols--dragging th.egp-col-head::after { border-right-color: var(--mud-palette-primary); }
.egp-cols--dragging, .egp-cols--dragging * { cursor: col-resize !important; user-select: none; }
/* Several columns frozen on the left (StickyLeft): Mud puts each at left 0, so they would pile up on
   one another once the grid scrolls sideways. In an egp-frozen grid each takes a set width (--egp-f1…,
   set per grid) and sits after the ones before it. */
.egp-frozen .mud-table-cell.sticky-left { box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; }
.egp-frozen .mud-table-cell.sticky-left:nth-child(1) { left: 0; width: var(--egp-f1); min-width: var(--egp-f1); }
.egp-frozen .mud-table-cell.sticky-left:nth-child(2) { left: var(--egp-f1); width: var(--egp-f2); min-width: var(--egp-f2); }
.egp-frozen .mud-table-cell.sticky-left:nth-child(3) { left: calc(var(--egp-f1) + var(--egp-f2)); width: var(--egp-f3); min-width: var(--egp-f3); }
.egp-frozen .mud-table-cell.sticky-left:nth-child(4) { left: calc(var(--egp-f1) + var(--egp-f2) + var(--egp-f3)); width: var(--egp-f4); min-width: var(--egp-f4); }
.egp-frozen .mud-table-cell.sticky-left:nth-child(5) { left: calc(var(--egp-f1) + var(--egp-f2) + var(--egp-f3) + var(--egp-f4)); width: var(--egp-f5); min-width: var(--egp-f5); }
/* Widths: a PO (free text, ~6 characters, 12 holds nearly all) 120 px; an SO 76; a line number
   (mostly 6-9 characters) 100. Calendar: PO, SO; Shipping's items: SO, PO, L/N; Remakes: tick, Id. */
.egp-calendar__grid { --egp-f1: 120px; --egp-f2: 76px; }
.egp-shipping__items { --egp-f1: 76px; --egp-f2: 120px; --egp-f3: 100px; }
.egp-remakes__grid { --egp-f1: 44px; --egp-f2: 80px; }
/* Frozen cells are opaque (the scrolled ones pass under them), so a selected row tints them itself. */
.egp-frozen .egp-row--selected > .mud-table-cell.sticky-left { background: color-mix(in srgb, rgb(47, 125, 50) 12%, var(--mud-palette-surface)); }
/* The last frozen column's edge, so the scrolled columns read as passing under it. */
.egp-frozen .mud-table-cell.sticky-left.egp-frozen__last { box-shadow: inset -1px 0 0 var(--mud-palette-lines-default); }
/* A MudSelect in a toolbar takes its own width, not the row's (its root grows by default). */
.egp-toolbar > .mud-select { flex: 0 0 auto; }
.egp-row--action { cursor: pointer; }
.egp-num { text-align: right; font-variant-numeric: tabular-nums; }
th.egp-num .column-header { justify-content: flex-end; }

/* Filters beside results (Reports): the desktop's 320 px card and a splitter. */
.egp-split {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
.egp-split__main { min-width: 0; }

/* MudDataGrid's HorizontalScrollbar (MudBlazor 9.1) makes the rows' box as wide as its columns and
   clips it at the grid's Height, so rows below could not be scrolled to (and virtualized rows never
   loaded past the first screen). That box scrolls both ways instead, at the grid's width; the
   table keeps its columns' widths. */
.mud-data-grid > .mud-table-container[style*="max-content"] {
    width: auto !important;
    overflow: auto !important;
}
.mud-data-grid > .mud-table-container[style*="max-content"] .mud-table-root {
    width: max-content;
    min-width: 100%;
}
@media (max-width: 960px) {
    .egp-split { grid-template-columns: minmax(0, 1fr); }
}

/* SplitPanes: two panels and a divider the user drags (the desktop's GridSplitter). The left width
   comes from the component (kept per user); the right always keeps --egp-panes-right-min. */
.egp-panes {
    display: grid;
    grid-template-columns: min(var(--egp-panes-left), calc(100% - var(--egp-panes-right-min) - 16px)) 16px minmax(0, 1fr);
    align-items: start;
}
.egp-panes__left,
.egp-panes__right { min-width: 0; }
.egp-panes__divider {
    align-self: stretch;
    position: relative;
    cursor: col-resize;
    touch-action: none;
}
.egp-panes__divider::after {
    content: "";
    position: absolute;
    inset: 0 7px;
    border-radius: 1px;
    background: var(--mud-palette-lines-default);
    transition: background-color 0.15s, inset 0.15s;
}
.egp-panes__divider:hover::after,
.egp-panes__divider:focus-visible::after,
.egp-panes--dragging .egp-panes__divider::after { inset: 0 6px; background: var(--mud-palette-primary); }
.egp-panes__divider:focus-visible { outline: none; }
.egp-panes--dragging { cursor: col-resize; user-select: none; }
@media (max-width: 960px) {
    .egp-panes { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .egp-panes__divider { display: none; }
}

.egp-row--selected,
.egp-row--selected:hover { background: rgba(47, 125, 50, 0.12) !important; }

.egp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 64px 24px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}
.egp-empty__title { font-weight: 600; color: var(--mud-palette-text-primary); }

/* Shipping: the rack list card. */
.egp-rack-head { display: flex; align-items: baseline; gap: 10px; margin: 2px 2px 8px; }
.egp-rack-head__count { font-size: 0.8rem; }
.egp-rack-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.egp-deliver-to { width: 220px; flex: 0 0 auto; }

/* Reference-data editors (RefDataEditor): only the selected row edits; a changed row is marked
   on its left edge until it is saved, a new row in the brand colour. */
.egp-ref__show { width: 140px; flex: 0 0 auto; }
.egp-ref__grid .mud-table-cell.egp-ref__edit { padding-block: 2px; }
.egp-ref__edit .mud-input-control { margin: 0; min-width: 72px; }
.egp-ref__edit .mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text { margin-top: 0; }
.egp-ref__edit .mud-checkbox { margin: 0; }
.egp-ref__edit.egp-num .mud-input-control { max-width: 120px; margin-left: auto; }
.egp-ref__edit.egp-num input { text-align: right; }
.egp-row--dirty > td:first-child { box-shadow: inset 3px 0 0 var(--mud-palette-warning); }
.egp-row--new > td:first-child { box-shadow: inset 3px 0 0 var(--mud-palette-primary); }
.egp-ref__unsaved { margin-left: 10px; font-weight: 600; color: var(--mud-palette-warning-darken); }
.egp-ref__check { color: var(--mud-palette-text-disabled); }
.egp-ref__check--on { color: var(--mud-palette-primary); }
.egp-layers__head { display: flex; align-items: baseline; gap: 8px; }

/* A card's title row with a count or an action (Users & Roles). */
.egp-panel-head { display: flex; align-items: center; gap: 10px; margin: 2px 2px 8px; }
.egp-panel-head__count { font-size: 0.8rem; }
.egp-newuser {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--mud-palette-lines-default);
}
.egp-user-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.egp-user-head__you { border-color: var(--mud-palette-primary); color: var(--mud-palette-primary); }
.egp-user-head__inactive { color: var(--mud-palette-text-secondary); }
.egp-roles { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.egp-roles__item { min-width: 190px; max-width: 260px; }
.egp-roles__note { margin: -6px 0 4px 42px; font-size: 0.75rem; }
.egp-reset-password { width: 240px; flex: 0 0 auto; }

/* Settings: one card per setting, the switch on the right (the desktop's CardControl). */
.egp-settings { max-width: 760px; }
.egp-setting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    margin-bottom: 20px;
}
.egp-setting__title { font-weight: 600; }
.egp-setting__hint { font-size: 0.8rem; }
.egp-settings__note { margin-bottom: 16px; }

/* Customers: the list beside the form, as the desktop's 2:3 columns. */
.egp-split--list { grid-template-columns: minmax(320px, 2fr) minmax(0, 3fr); }
.egp-customers__find { flex: 1 1 160px; min-width: 160px; }

/* Forms (Customers, Create Customer, Create Remake): two columns of fields, long ones across. */
.egp-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    align-items: start;
}
.egp-form--single { grid-template-columns: minmax(0, 1fr); }
.egp-form__wide { grid-column: 1 / -1; }
.egp-form .mud-input-control { margin: 0; }
.egp-form__pair { display: flex; align-items: center; gap: 8px; }
.egp-form__times { color: var(--mud-palette-text-secondary); }
.egp-form__actions { margin: 16px 0 0; }
.egp-form__save { display: flex; align-items: center; gap: 12px; margin-left: auto; }
/* Typed in capitals, as the desktop's CharacterCasing="Upper" (the value is upper-cased too). */
.egp-upper input { text-transform: uppercase; }
@media (max-width: 720px) {
    .egp-form { grid-template-columns: minmax(0, 1fr); }
}

/* A dialog's message under its content: info, done (green), refused (red). */
.egp-note {
    padding: 8px 12px;
    border-radius: 6px;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-info);
    font-weight: 600;
    font-size: 0.85rem;
}
.egp-note--ok { color: var(--mud-palette-success); }
.egp-note--error { color: var(--mud-palette-error); }

/* Buyeg Account and Order API Keys dialogs. */
.egp-buyeg__status { font-weight: 600; }
.egp-buyeg__password { width: 260px; flex: 0 0 auto; }
.egp-keys__name { flex: 1 1 260px; }
.egp-keys__reveal {
    margin: 0 0 12px;
    padding: 12px;
    border-radius: 8px;
    background: rgba(47, 125, 50, 0.10);
}
.egp-keys__reveal-title { font-weight: 600; margin-bottom: 6px; }
.egp-keys__key {
    flex: 1 1 360px;
    padding: 6px 8px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-family: ui-monospace, Consolas, monospace;
}
.egp-mono { font-family: ui-monospace, Consolas, monospace; }

/* Remakes. */
.egp-remakes__status { width: 170px; flex: 0 0 auto; }
.egp-remakes__schedule { width: 360px; flex: 0 1 auto; }
.egp-remakes__hint { font-size: 0.8rem; }
.egp-skd { display: inline-flex; gap: 10px; }
.egp-skd__id { min-width: 48px; }
.egp-skd__hp3 { min-width: 40px; font-weight: 700; }
/* An editable cell in a read-only grid (a remake's schedule, a feedback file's HP3 SKD). */
.egp-cell-input {
    width: 76px;
    padding: 2px 6px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: center;
}
.egp-cell-input:focus { outline: 2px solid var(--mud-palette-primary); outline-offset: -1px; }
/* A detail-item status letter on its status colour (StatusColors). */
.egp-status {
    display: inline-block;
    min-width: 22px;
    padding: 0 6px;
    border-radius: 4px;
    color: #fff;
    font-weight: 700;
    text-align: center;
}
.egp-remake__item { width: 170px; flex: 0 0 auto; }
.egp-facts {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 4px 16px;
    margin: 8px 0 0;
    font-size: 0.875rem;
}
.egp-facts dt { color: var(--mud-palette-text-secondary); }
.egp-facts dd { margin: 0; }
.egp-feedback__summary { font-size: 0.85rem; }
.egp-verdict { color: var(--mud-palette-text-secondary); font-weight: 600; }
.egp-verdict--missing { color: #4682B4; }
.egp-verdict--repair { color: #E0701A; }
.egp-verdict--bad { color: #CD5C5C; }

/* Schedules and Orders: the list beside the open record, as on the desktop (SplitPanes). Their grids
   are wider than either panel, so they scroll sideways; the user drags the divider to give the list
   or the record the room. Grids take their heights from --egp-list-h / --egp-detail-h. */
/* Sized, like Orders', so a 1080 px screen shows the list and the schedule without scrolling. */
.egp-schedules__panes {
    --egp-list-h: calc(100vh - 365px);
    --egp-detail-h: max(320px, calc(100vh - 675px));
}
@media (max-width: 960px) {
    .egp-schedules__panes { --egp-list-h: clamp(240px, 30vh, 420px); }
}
/* Frozen columns: tick + Skd; tick, PO, SO, Id, Line; PO, SO, Id, Line, Detail Item. */
.egp-schedules__list { --egp-f1: 44px; --egp-f2: 88px; }
.egp-schedules__orders { --egp-f1: 44px; --egp-f2: 80px; --egp-f3: 76px; --egp-f4: 88px; --egp-f5: 100px; }
.egp-schedules__items { --egp-f1: 120px; --egp-f2: 76px; --egp-f3: 88px; --egp-f4: 100px; --egp-f5: 96px; }
.egp-schedules__status { width: 210px; flex: 0 0 auto; }
.egp-schedules__search { flex: 1 1 150px; min-width: 150px; }
.egp-schedules__hp3 { width: 90px; flex: 0 0 auto; }
.egp-schedules__slots { width: 96px; flex: 0 0 auto; }
.egp-skd-status { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.egp-skd-status__dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
/* A status letter's unit count on its colour; the column stays narrow. */
.egp-grid-compact.mud-table-dense * .mud-table-row .mud-table-cell.egp-bucket-cell { width: 36px; min-width: 36px; padding-inline: 2px; text-align: center; }
.egp-bucket-cell .column-header { justify-content: center; }
.egp-bucket {
    display: inline-block;
    min-width: 28px;
    padding: 0 3px;
    border-radius: 4px;
    color: #fff;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.egp-skd-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 12px; }
.egp-skd-head__label { color: var(--mud-palette-text-secondary); }
.egp-skd-head__value { min-width: 48px; font-weight: 700; font-variant-numeric: tabular-nums; margin-right: 6px; }
.egp-cell-input--product { width: 220px; text-align: left; }
.egp-cell-input--status { width: 34px; border-color: transparent; color: #fff; font-weight: 700; text-transform: uppercase; }

/* Orders: the list's filters, the open order's header, the lines' makeup panel. */
/* Sized so a 1080 px screen shows the list and the open order's lines without scrolling. */
.egp-orders__panes {
    --egp-list-h: calc(100vh - 365px);
    --egp-detail-h: max(320px, calc(100vh - 640px));
}
@media (max-width: 960px) {
    .egp-orders__panes { --egp-list-h: clamp(240px, 30vh, 420px); }
}
.egp-orders__status { width: 170px; flex: 0 0 auto; }
.egp-orders__customer { width: 280px; flex: 0 1 auto; }
.egp-orders__search { flex: 1 1 180px; min-width: 160px; }
.egp-orders__filter { width: 180px; flex: 0 0 auto; }
.egp-orders__setstatus { width: 110px; flex: 0 0 auto; }
/* Frozen columns: SO, PO; tick, Id, Line; tick, Id, Line, Detail Item. */
.egp-orders__list { --egp-f1: 76px; --egp-f2: 120px; }
.egp-orders__lines { --egp-f1: 44px; --egp-f2: 88px; --egp-f3: 100px; }
.egp-orders__units { --egp-f1: 44px; --egp-f2: 88px; --egp-f3: 100px; --egp-f4: 96px; }
/* An order or line with units (line details), as the desktop's green. */
.egp-has-units { color: #22A745; font-weight: 600; }
.egp-order-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-bottom: 12px; }
.egp-order-head__value { font-size: 1.15rem; font-weight: 700; margin-right: 10px; font-variant-numeric: tabular-nums; }
.egp-order-head__customer { font-weight: 600; }
.egp-order-head__status { margin-left: auto; border: none; color: #fff; }
.egp-order-fields { gap: 10px 18px; }
.egp-order-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 24px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--mud-palette-lines-default);
    font-size: 0.875rem;
}
.egp-order-facts .mud-icon-root { vertical-align: middle; color: var(--mud-palette-text-secondary); }
/* An unscheduled line or unit: red, as on the desktop. A line with units is scheduled per unit. */
.egp-cell-input--unscheduled { background: #D13438; border-color: #D13438; color: #fff; }
.egp-cell-input[readonly] { border-style: dashed; cursor: not-allowed; }
.egp-makeup {
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    background: var(--mud-palette-background-gray);
    font-size: 0.85rem;
}
.egp-makeup__head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.egp-makeup__title { font-weight: 600; margin-right: auto; }
.egp-makeup__layers { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 18px; }
.egp-makeup__unknown { color: var(--mud-palette-error); font-weight: 600; }

/* Price breakdown, Edit dimensions and Edit makeup dialogs. */
.egp-price { font-size: 0.9rem; }
.egp-price__header { font-weight: 700; }
.egp-price__note { font-size: 0.8rem; margin-bottom: 10px; }
.egp-price__row { display: grid; grid-template-columns: minmax(0, 1fr) 110px 110px; gap: 0 12px; padding: 1px 0; }
.egp-price__row > span:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.egp-price__cols { font-size: 0.75rem; color: var(--mud-palette-text-secondary); }
.egp-price__row--bold { font-weight: 600; }
.egp-price__indent { padding-left: 16px; color: var(--mud-palette-text-secondary); }
.egp-price__asplaced { color: var(--mud-palette-text-secondary); }
.egp-price__changed { color: var(--mud-palette-info); font-weight: 600; }
.egp-price__section { margin: 10px 0 2px; font-weight: 600; color: var(--mud-palette-text-secondary); }
.egp-price__total { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--mud-palette-lines-default); font-weight: 700; font-size: 1rem; }
.egp-price__total > span:last-child { color: var(--mud-palette-info); font-size: 1.15rem; }
.egp-price__delta { text-align: right; font-size: 0.8rem; color: var(--mud-palette-text-secondary); }
.egp-dims { display: grid; grid-template-columns: 110px 110px minmax(0, 1fr) 90px; align-items: center; gap: 6px 10px; }
.egp-dims--makeup { grid-template-columns: 100px 130px minmax(0, 1fr); }
.egp-dims .mud-input-control { margin: 0; }
.egp-dims__head { font-size: 0.75rem; color: var(--mud-palette-text-secondary); }
.egp-dims__hint { font-size: 0.8rem; }

/* D365 SO Detail. */
.egp-d365__so { width: 150px; flex: 0 0 auto; }
.egp-cell-input--barcode { width: 190px; text-align: left; }

.egp-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 24px;
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    background: var(--mud-palette-background-gray);
    font-size: 0.8rem;
}
.egp-summary__count { font-weight: 600; }
.egp-summary__message { font-weight: 600; color: var(--mud-palette-info); margin-left: 12px; }
.egp-summary__totals { color: var(--mud-palette-text-secondary); word-spacing: 0.3em; }
.egp-summary__total { font-weight: 600; margin-left: 16px; }

/* ---- Account pages (static SSR: plain markup, no Mud components) ---------------------------- */

.egp-account {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: #F2F5F1;
    color: #1F2937;
}

.egp-account__card {
    width: 100%;
    max-width: 380px;
    padding: 28px 28px 22px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}

.egp-account__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}

.egp-account__name {
    font-weight: 700;
    color: #2F7D32;
}

.egp-account__tag {
    font-size: 0.8rem;
    color: #6B7280;
}

.egp-account__title {
    margin: 0 0 14px;
    font-size: 1.3rem;
    font-weight: 600;
}

.egp-account__form {
    display: flex;
    flex-direction: column;
}

.egp-account__form label {
    margin: 10px 0 4px;
    font-size: 0.85rem;
    font-weight: 500;
}

.egp-account__form input {
    padding: 9px 11px;
    border: 1px solid #CBD5E1;
    border-radius: 6px;
    font: inherit;
}
.egp-account__form input:focus {
    outline: 2px solid rgba(47, 125, 50, 0.35);
    border-color: #2F7D32;
}

.egp-account__invalid {
    margin-top: 4px;
    font-size: 0.8rem;
    color: #DC2626;
}

.egp-account__submit {
    margin-top: 20px;
    padding: 10px;
    border: 0;
    border-radius: 6px;
    background: #2F7D32;
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.egp-account__submit:hover { background: #1B5E20; }

.egp-account__error,
.egp-account__note {
    margin-bottom: 8px;
    padding: 9px 12px;
    border-radius: 6px;
    font-size: 0.9rem;
}
.egp-account__error { background: #FEE2E2; color: #991B1B; }
.egp-account__note { background: #FEF3C7; color: #92400E; }

.egp-account__hint {
    margin: 16px 0 0;
    font-size: 0.8rem;
    color: #6B7280;
}

.egp-account a { color: #2F7D32; }

/* Shown by blazor.web.js when a circuit dies of an unhandled exception (last resort; pages are
   wrapped in LoggingErrorBoundary first). */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 2000;
    padding: 10px 16px;
    background: #FEF3C7;
    color: #92400E;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.15);
}
#blazor-error-ui .reload { margin-left: 8px; }
#blazor-error-ui .dismiss { float: right; cursor: pointer; }

/* Email Settings and Outbox (Admin; docs/email.md). */
.egp-email__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.egp-email__changed { font-size: 0.78rem; margin-left: 6px; }
.egp-email__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; }
.egp-email__form .mud-input-control { margin-top: 10px; }
.egp-email__note { font-size: 0.75rem; color: var(--mud-palette-text-secondary); margin-top: 2px; }
.egp-email__numbers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.egp-email__test { max-width: 320px; flex: 0 0 auto; }
.egp-email__filter { max-width: 200px; flex: 0 0 auto; }
.egp-email__search { max-width: 260px; flex: 0 0 auto; }
.egp-email__error { color: var(--mud-palette-error); }
.egp-email__table td, .egp-email__table th { font-size: 0.8rem; }
.egp-email__detail { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; }
.egp-email__body {
    margin: 4px 0 0;
    max-height: 32vh;
    overflow: auto;
    padding: 10px;
    border-radius: 6px;
    background: var(--mud-palette-background-gray);
    font-size: 0.75rem;
    white-space: pre-wrap;
    word-break: break-word;
}
.egp-email__key { word-break: break-all; user-select: all; }
@media (max-width: 960px) {
    .egp-email__form, .egp-email__detail { grid-template-columns: minmax(0, 1fr); }
}
.egp-email__order { display: flex; flex-wrap: wrap; gap: 4px 24px; font-size: 0.85rem; }
.egp-email__order .mud-icon-root { vertical-align: middle; }
.egp-email__previous { font-size: 0.8rem; margin-top: 4px; }
/* The order email's From: the shared mailbox, or a choice of it and the user's own. */
.egp-email__from { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: 0.85rem; }
.egp-email__from .mud-radio-group { display: flex; flex-wrap: wrap; gap: 0 16px; }