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

:root {
    --eggsf-emerald: #10b981;
    --eggsf-emerald-dark: #059669;
    --eggsf-emerald-light: #34d399;
    --eggsf-amber: #f59e0b;
    --eggsf-amber-dark: #d97706;
    --eggsf-amber-light: #fbbf24;
    --eggsf-slate-900: #0f172a;
    --eggsf-slate-800: #1e293b;
    --eggsf-slate-700: #334155;
    --eggsf-slate-500: #64748b;
    --eggsf-slate-300: #cbd5e1;
    --eggsf-slate-100: #f1f5f9;
    --eggsf-slate-50:  #f8fafc;

    /* ── Theme-aware tokens (light defaults). The .mud-theme-dark block
       at the bottom of this file overrides these to dark values when the
       user toggles dark mode in the AppBar. Every component CSS rule
       below should consume these tokens (not the raw colour palette)
       so dark mode "just works" without a per-rule override. ── */
    --eggsf-bg:           #f3f6fa;
    --eggsf-bg-elevated:  #ffffff;     /* nav/drawer + raised cards */
    --eggsf-surface:      #ffffff;     /* MudPaper inner surface */
    --eggsf-surface-soft: #f8fafc;     /* numpad display, pickcard idle */
    --eggsf-border:       #e2e8f0;
    --eggsf-border-soft:  rgba(15, 23, 42, 0.06);
    --eggsf-text:         #0f172a;
    --eggsf-text-strong:  #0b1220;
    --eggsf-muted:        #64748b;
    --eggsf-link:         #0ea5e9;
    --eggsf-success:      #10b981;
    --eggsf-warning:      #f59e0b;
    --eggsf-error:        #e11d48;
    --eggsf-shadow-card:  0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.04);
    --eggsf-shadow-cta:   0 6px 16px rgba(16, 185, 129, 0.28);
    --eggsf-bg-shell:
        radial-gradient(1200px 360px at 80% -10%, rgba(16, 185, 129, 0.06), transparent 60%),
        radial-gradient(900px 280px at 0% 110%, rgba(245, 158, 11, 0.05), transparent 60%),
        var(--eggsf-bg);
    --eggsf-row-hover:    rgba(16, 185, 129, 0.05);
}

html,
body {
    min-height: 100%;
    background: var(--eggsf-bg);
    color: var(--eggsf-text);
    color-scheme: light;
}

body {
    font-family: "Pretendard", "Noto Sans KR", "Noto Sans Mongolian", system-ui, sans-serif;
}

body::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body::-webkit-scrollbar-track {
    background: var(--eggsf-bg-elevated);
}

body::-webkit-scrollbar-thumb {
    background: var(--eggsf-border);
    border-radius: 999px;
}

body::-webkit-scrollbar-thumb:hover {
    background: var(--eggsf-muted);
}

.eggsf-layout-shell,
.mud-layout.eggsf-layout-shell {
    min-height: 100vh;
    background: var(--eggsf-bg-shell) !important;
    color: var(--eggsf-text);
}

.eggsf-appbar {
    background: var(--eggsf-slate-900) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(8px);
}

.eggsf-brand-title {
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* ─── System brand (logo + product title in the AppBar) ───────────────── */
/*
 * The brand is wrapped in <a> so the user can click it to go home.
 * Reset the link styling so it doesn't pick up MudBlazor's default
 * underline/colour on hover. Keep the logo + text on a single baseline
 * with `align-items: center` instead of `vertical-align` so that the
 * MudText element (which renders as a div) doesn't shift the icon.
 */
.eggsf-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none !important;
    color: inherit !important;
    line-height: 1;
}
.eggsf-brand:hover .eggsf-brand-title { opacity: .85; }

.eggsf-brand-logo {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
    object-fit: contain;
    flex: 0 0 auto;
}
.eggsf-brand-logo--lg {
    width: 36px;
    height: 36px;
    border-radius: 8px;
}

/* On printed report pages the brand sits on a white surface — the white
   ring would disappear, so we swap it for a subtle grey outline instead. */
.eggsf-doc-logo,
.eggsf-report-brand-logo {
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .08);
}

/* ─── Reports / dashboard header brand block ──────────────────────────── */
.eggsf-report-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.eggsf-report-brand-logo {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: contain;
}
.eggsf-report-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.eggsf-report-brand-text small {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .55;
}

/* ─── CompanySwitcher (header pill + searchable popup) ─────────────────── */

/* Trigger pill — sits beside the brand title in the AppBar. The outlined
   button gets a slate background so it reads as a chip, not as just another
   icon button. */
.eggsf-company-switcher-trigger {
    border-color: rgba(255, 255, 255, 0.18) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    text-transform: none !important;
    font-weight: 500 !important;
    border-radius: 999px !important;
    padding: 4px 12px !important;
    min-height: 36px !important;
    max-width: 320px;
}

.eggsf-company-switcher-trigger:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(255, 255, 255, 0.30) !important;
}

.eggsf-company-switcher-label {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: 4px;
}

/* Popup — fixed width so it doesn't jitter while typing in the search box. */
.eggsf-company-switcher-popup {
    width: 360px;
    max-width: 92vw;
    display: flex;
    flex-direction: column;
}

.eggsf-company-switcher-header {
    padding: 12px 12px 8px 12px;
    background: var(--eggsf-surface-soft);
}

.eggsf-company-switcher-stats {
    margin-top: 6px;
    padding: 0 4px;
}

.eggsf-company-switcher-list {
    max-height: 50vh;
    overflow-y: auto;
}

.eggsf-company-switcher-empty {
    padding: 24px 12px;
    text-align: center;
    color: var(--eggsf-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.eggsf-company-switcher-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
}

.eggsf-company-switcher-row-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.eggsf-company-switcher-code {
    font-weight: 600;
    line-height: 1.2;
}

/* Subtle highlight for the currently-active company so it's findable even
   when the list is long. The mud-list focus ring still works on top. */
.eggsf-company-switcher-item-active {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.08), transparent) !important;
}

.eggsf-drawer,
.mud-drawer.eggsf-drawer {
    border-right: 1px solid var(--eggsf-border);
    background: var(--eggsf-bg-elevated) !important;
    color: var(--eggsf-text);
}

.eggsf-drawer .mud-drawer-content {
    min-height: 100%;
    background: var(--eggsf-bg-elevated) !important;
    color: var(--eggsf-text);
}

.eggsf-main-content,
.mud-main-content.eggsf-main-content {
    min-height: calc(100vh - 64px);
    background: transparent !important;
    color: var(--eggsf-text);
}

.mud-main-content {
    background: transparent !important;
}

.eggsf-main-content > .mud-container {
    background: transparent !important;
    color: inherit;
}

.mud-paper {
    border: 1px solid var(--eggsf-border);
    box-shadow: var(--eggsf-shadow-card) !important;
    background-color: var(--eggsf-surface) !important;
    color: var(--eggsf-text);
}

.eggsf-nav .mud-nav-link.active-item,
.eggsf-nav .mud-nav-link.mud-nav-link-active,
.eggsf-nav .active {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0.04)) !important;
    color: var(--eggsf-emerald-dark) !important;
    font-weight: 700;
}

.eggsf-nav .mud-nav-link:hover {
    background: var(--eggsf-row-hover) !important;
}

.mud-table {
    background: transparent;
}

.mud-table-head .mud-table-cell {
    color: var(--eggsf-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mud-table-body .mud-table-cell {
    font-size: 0.92rem;
}

.mud-table-row:hover {
    background: var(--eggsf-row-hover) !important;
}

.mud-button-root.mud-button-filled.mud-button-filled-primary {
    background: linear-gradient(180deg, var(--eggsf-emerald) 0%, var(--eggsf-emerald-dark) 100%);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.28);
}

.mud-button-root.mud-button-filled.mud-button-filled-primary:hover {
    filter: brightness(1.04);
}

.mud-button-root.mud-button-filled.mud-button-filled-secondary {
    background: linear-gradient(180deg, var(--eggsf-amber) 0%, var(--eggsf-amber-dark) 100%);
    color: #1e293b !important;
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.25);
}

.mud-chip {
    font-weight: 700;
}

.mud-input > input.mud-input-root,
div.mud-input-slot.mud-input-root,
.mud-input-control > .mud-input-control-input-container {
    font-size: 0.95rem;
}

.mud-input-outlined-border {
    border-color: var(--eggsf-border) !important;
}

.mud-input-control.mud-input-required .mud-input-label::after {
    color: var(--eggsf-amber-dark);
}

.mud-alert {
    border-radius: 12px;
}

.badge-outline-success,
.badge-outline-danger,
.badge-outline-warning,
.badge-outline-primary {
    background: transparent;
    border-width: 1px;
    border-style: solid;
    border-radius: 999px;
    font-weight: 700;
    padding: 0.25rem 0.65rem;
}

.badge-outline-success {
    border-color: var(--eggsf-success);
    color: var(--eggsf-success);
}

.badge-outline-danger {
    border-color: var(--eggsf-error);
    color: var(--eggsf-error);
}

.badge-outline-warning {
    border-color: var(--eggsf-warning);
    color: var(--eggsf-warning);
}

.badge-outline-primary {
    border-color: var(--eggsf-emerald);
    color: var(--eggsf-emerald-dark);
}

#blazor-error-ui {
    background: #fff7d6;
    border-top: 3px solid var(--eggsf-amber);
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.12);
}

/* ────────────────────────────────────────────────────────────────────────
   Print documents (/print/*) — Korean trade-document layout used for
   주문서 / 거래명세서 / 발주서 / 출고증 etc. Visual structure mirrors
   BusinessDocumentPdfRenderer so screen and PDF look the same.
   ──────────────────────────────────────────────────────────────────────── */

.eggsf-print-shell {
    background: #fff;
    color: #111;
    padding: 24px 32px;
    font-family: "Malgun Gothic", "Noto Sans CJK KR", "NanumGothic", Calibri, Arial, sans-serif;
    font-size: 12px;
    min-height: 100vh;
}

.eggsf-print-toolbar {
    text-align: right;
    margin-bottom: 16px;
}

.eggsf-print-toolbar button {
    background: #1976d2;
    color: #fff;
    border: 0;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
}

.eggsf-doc h1 {
    font-size: 28px;
    text-align: center;
    margin: 0 0 4px 0;
    letter-spacing: 2px;
}

.eggsf-doc-subtitle {
    text-align: center;
    color: #666;
    margin-bottom: 12px;
    font-size: 11px;
}

.eggsf-doc-title {
    border-bottom: 1px solid #bbb;
    padding-bottom: 8px;
    margin-bottom: 14px;
    display: grid;
    grid-template-columns: 120px 1fr 120px;
    align-items: center;
    gap: 8px;
}

.eggsf-doc-title-text {
    grid-column: 2;
}

.eggsf-doc-logo {
    grid-column: 1;
    max-height: 56px;
    max-width: 120px;
    object-fit: contain;
    justify-self: start;
}

.eggsf-doc-signatures .signature-canvas {
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.eggsf-doc-seal {
    max-height: 36px;
    max-width: 72px;
    object-fit: contain;
    opacity: 0.85;
}

.eggsf-doc-footer {
    margin-top: 18px;
    padding-top: 6px;
    border-top: 1px dashed #ccc;
    text-align: center;
    font-size: 10px;
}

.eggsf-doc--watermarked {
    position: relative;
    overflow: hidden;
}

.eggsf-doc-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    font-size: 96pt;
    font-weight: 700;
    color: rgba(244, 67, 54, 0.16);
    pointer-events: none;
    user-select: none;
    z-index: 0;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.eggsf-doc--watermarked > *:not(.eggsf-doc-watermark) {
    position: relative;
    z-index: 1;
}

@media print {
    .eggsf-doc-watermark {
        color: rgba(244, 67, 54, 0.20);
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

.eggsf-doc-meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 14px;
}

.eggsf-doc-meta > div {
    border: 1px solid #ddd;
    padding: 6px 8px;
}

.eggsf-doc-meta label,
.eggsf-doc-totals label,
.eggsf-doc-note label,
.eggsf-doc-signatures label,
.eggsf-doc-parties .label {
    display: block;
    font-size: 10px;
    color: #777;
    margin-bottom: 2px;
}

.eggsf-doc-meta span {
    font-weight: 700;
    font-size: 13px;
}

.eggsf-doc-parties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
}

.eggsf-doc-parties .party {
    border: 1px solid #ddd;
    padding: 10px;
}

.eggsf-doc-parties .party-body .name {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
}

.eggsf-doc-parties .party-body div {
    font-size: 11px;
    line-height: 1.4;
}

.eggsf-doc-parties .party-body label {
    display: inline;
    color: #777;
    font-size: 10px;
}

.eggsf-doc-lines {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
}

.eggsf-doc-lines th {
    background: #f3f3f3;
    border: 1px solid #ccc;
    padding: 6px;
    font-size: 11px;
    text-align: left;
}

.eggsf-doc-lines th.num,
.eggsf-doc-lines td.num {
    text-align: right;
}

.eggsf-doc-lines th.center,
.eggsf-doc-lines td.center {
    text-align: center;
}

.eggsf-doc-lines td {
    border: 1px solid #ddd;
    padding: 5px 6px;
    font-size: 11px;
    vertical-align: top;
}

.eggsf-doc-lines td .muted {
    font-size: 10px;
    color: #777;
}

.eggsf-doc-totals {
    margin-left: auto;
    width: 320px;
    margin-bottom: 18px;
}

.eggsf-doc-totals > div {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 12px;
}

.eggsf-doc-totals > div.grand {
    border-top: 1px solid #999;
    padding-top: 6px;
    font-weight: 700;
    font-size: 13px;
}

.eggsf-doc-note {
    background: #fafafa;
    border: 1px solid #eee;
    padding: 10px;
    margin-bottom: 18px;
    font-size: 11px;
}

.eggsf-doc-signatures {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-top: 32px;
}

.eggsf-doc-signatures .line {
    height: 36px;
    border-bottom: 1px solid #999;
}

.eggsf-doc-signatures .muted {
    color: #777;
    font-size: 10px;
    text-align: center;
    display: block;
    margin-top: 4px;
}

/* Print-only adjustments — hide the toolbar, drop chrome, force A4 portrait */
@media print {
    .eggsf-print-toolbar { display: none; }
    .eggsf-print-shell { padding: 0; min-height: auto; }
    @page { size: A4 portrait; margin: 12mm; }
}

/* ────────────────────────────────────────────────────────────────────────
   Tablet UI (/tablet/*) — operator-facing factory layout

   Baseline target: 10" tablet, 1280×800 (Chrome / Edge), touch-primary.
   Senior-friendly per AGENTS.md §5: ≥56 px hit targets, ≥1.4 rem body,
   max-3-step wizards, no dense data tables.

   These utility classes are consumed by Components/Tablet/* building
   blocks (BigButton, NumPadInput, PickCard, StepWizard) and the
   /tablet/* page set. Inline styles inside individual razor files
   should migrate to these classes as we audit each page.
   ──────────────────────────────────────────────────────────────────────── */

:root {
    /* Component-tier sizes — pick from these instead of hard-coding pixels */
    --eggsf-tablet-touch-min: 56px;          /* WCAG-style minimum hit target */
    --eggsf-tablet-button-height: 80px;      /* Standard primary action */
    --eggsf-tablet-button-height-xl: 96px;   /* Grade picker, finish actions */
    --eggsf-tablet-radius: 16px;
    --eggsf-tablet-gap: 16px;
    --eggsf-tablet-pad: 20px;
    --eggsf-tablet-font-body: 1.15rem;       /* base body text */
    --eggsf-tablet-font-button: 1.4rem;      /* primary buttons */
    --eggsf-tablet-font-button-xl: 1.8rem;   /* grade letters */
    --eggsf-tablet-font-h1: 2rem;
    --eggsf-tablet-font-h2: 1.5rem;
}

/* ─── Layout shell ─── */

.eggsf-tablet-shell {
    /* Drawer-less full-bleed layout. Top breadcrumb, optional bottom
       action bar, large body padding so finger taps don't hit chrome.
       Dark mode swaps the gradient + bg via the .mud-theme-dark block. */
    background:
        radial-gradient(1400px 480px at 60% -10%, rgba(16, 185, 129, 0.05), transparent 60%),
        var(--eggsf-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-size: var(--eggsf-tablet-font-body);
    color: var(--eggsf-text);
}

.eggsf-tablet-shell .mud-input > input.mud-input-root,
.eggsf-tablet-shell div.mud-input-slot.mud-input-root {
    /* Bigger fields so on-screen keyboards don't crowd the layout */
    font-size: 1.25rem;
}

.eggsf-tablet-appbar {
    background: var(--eggsf-slate-900) !important;
    color: #fff;
    height: 64px;
}

.eggsf-tablet-appbar .mud-icon-button {
    color: #fff;
}

.eggsf-tablet-body {
    flex: 1 1 auto;
    padding: var(--eggsf-tablet-pad);
    max-width: 1100px;        /* Optimised for 1280-px tablet width */
    width: 100%;
    margin: 0 auto;
}

.eggsf-tablet-actionbar {
    /* Optional sticky footer — primary CTA(s) live here so the operator
       can find "Save / Confirm" by reaching, not scrolling. */
    background: var(--eggsf-bg-elevated);
    border-top: 1px solid var(--eggsf-border);
    padding: 12px 20px;
    display: flex;
    gap: var(--eggsf-tablet-gap);
    justify-content: flex-end;
    position: sticky;
    bottom: 0;
    z-index: 5;
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.06);
}

/* ─── BigButton ─── */

.eggsf-big-button {
    min-height: var(--eggsf-tablet-button-height) !important;
    font-size: var(--eggsf-tablet-font-button) !important;
    border-radius: var(--eggsf-tablet-radius) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    padding: 12px 24px !important;
    font-weight: 600;
}

.eggsf-big-button.eggsf-big-button--xl {
    min-height: var(--eggsf-tablet-button-height-xl) !important;
    font-size: var(--eggsf-tablet-font-button-xl) !important;
}

.eggsf-big-button.eggsf-big-button--block {
    width: 100%;
}

/* ─── NumPadInput ─── */

.eggsf-numpad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-width: 360px;
}

.eggsf-numpad-display {
    grid-column: 1 / -1;
    background: var(--eggsf-surface-soft);
    border: 1px solid var(--eggsf-border);
    border-radius: var(--eggsf-tablet-radius);
    padding: 12px 16px;
    font-size: 2rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: var(--eggsf-text);
}

.eggsf-numpad-display--invalid {
    border-color: var(--eggsf-error);
    color: var(--eggsf-error);
}

.eggsf-numpad-key {
    min-height: var(--eggsf-tablet-touch-min) !important;
    height: 64px !important;
    font-size: 1.6rem !important;
    border-radius: 12px !important;
    background: var(--eggsf-surface) !important;
    border: 1px solid var(--eggsf-border) !important;
    color: var(--eggsf-text) !important;
    font-weight: 600 !important;
    text-transform: none !important;
}

.eggsf-numpad-key:hover {
    background: var(--eggsf-surface-soft) !important;
}

.eggsf-numpad-key.eggsf-numpad-key--accent {
    background: var(--eggsf-amber) !important;
    color: var(--eggsf-slate-900) !important;
    border-color: var(--eggsf-amber-dark) !important;
}

.eggsf-numpad-key.eggsf-numpad-key--danger {
    background: var(--eggsf-surface) !important;
    color: var(--eggsf-error) !important;
    border-color: var(--eggsf-error) !important;
}

/* ─── PickCard / PickList ─── */

.eggsf-picklist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--eggsf-tablet-gap);
}

.eggsf-pickcard {
    background: var(--eggsf-surface);
    border: 2px solid var(--eggsf-border);
    border-radius: var(--eggsf-tablet-radius);
    padding: 16px 18px;
    min-height: 96px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    text-align: left;
    transition: transform 80ms ease, border-color 120ms ease, box-shadow 120ms ease;
    width: 100%;
    font-family: inherit;
    color: var(--eggsf-text);
}

.eggsf-pickcard:hover {
    border-color: var(--eggsf-emerald);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.10);
}

.eggsf-pickcard:active {
    transform: scale(0.98);
}

.eggsf-pickcard--selected {
    border-color: var(--eggsf-emerald-dark);
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.07), rgba(16, 185, 129, 0.02));
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.15);
}

.eggsf-pickcard__title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
}

.eggsf-pickcard__subtitle {
    font-size: 0.95rem;
    color: var(--eggsf-muted);
}

.eggsf-pickcard__badge {
    align-self: flex-start;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--eggsf-surface-soft);
    color: var(--eggsf-text);
    border: 1px solid var(--eggsf-border);
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 4px;
}

/* ─── StepWizard ─── */

.eggsf-stepwizard {
    background: var(--eggsf-surface);
    border: 1px solid var(--eggsf-border);
    border-radius: var(--eggsf-tablet-radius);
    padding: 24px;
    box-shadow: var(--eggsf-shadow-card);
    color: var(--eggsf-text);
}

.eggsf-stepwizard__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 16px;
}

.eggsf-stepwizard__title {
    font-size: var(--eggsf-tablet-font-h2);
    font-weight: 700;
    color: var(--eggsf-text);
}

.eggsf-stepwizard__dots {
    display: flex;
    gap: 8px;
    align-items: center;
}

.eggsf-stepwizard__dot {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: var(--eggsf-slate-300);
    transition: background 120ms ease, transform 120ms ease;
}

.eggsf-stepwizard__dot--active {
    background: var(--eggsf-emerald);
    transform: scale(1.25);
}

.eggsf-stepwizard__dot--complete {
    background: var(--eggsf-emerald-dark);
}

.eggsf-stepwizard__body {
    min-height: 240px;
}

.eggsf-stepwizard__footer {
    margin-top: 24px;
    display: flex;
    gap: var(--eggsf-tablet-gap);
    justify-content: space-between;
}

/* ─── Tablet "no-go" hint when used on a desktop monitor ─── */

@media (min-width: 1500px) {
    .eggsf-tablet-shell::after {
        content: "";   /* placeholder hook in case we want a notice */
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   Dark theme overrides
   ─────────────────────────────────────────────────────────────────────────
   MudBlazor 8 sets `mud-theme-dark` on <body> when IsDarkMode = true. We
   re-bind every theme-aware token from :root so each component CSS rule
   above (which already consumes these tokens) flips automatically.

   Design intent for dark:
     * Deep navy (slate-950) base + slate-800 surfaces — calm, not pure
       black, so eye fatigue is lower than tonal-grey alternatives.
     * Emerald primary stays the same hue but is bumped one shade lighter
       (#34d399) for AA contrast against slate-800.
     * Borders use rgba(255,255,255,0.08) instead of slate-200 so they
       hint at edges without "lifting" the surface visually.
     * Scrollbars + table hover get a green tint for continuity with the
       primary.

   Print routes (`/print/*`) stay forced-light via PrintLayout.razor so
   the screen view always matches the QuestPDF-rendered PDF.
   ───────────────────────────────────────────────────────────────────────── */
.mud-theme-dark,
body.mud-theme-dark,
.eggsf-dark {
    color-scheme: dark;

    --eggsf-bg:           #0f140f;
    --eggsf-bg-elevated:  #111812;
    --eggsf-surface:      #1a211b;
    --eggsf-surface-soft: #222b23;
    --eggsf-border:       rgba(230, 236, 223, 0.12);
    --eggsf-border-soft:  rgba(230, 236, 223, 0.07);
    --eggsf-text:         #e6ecdf;
    --eggsf-text-strong:  #f5f8ef;
    --eggsf-muted:        #a8b3a2;
    --eggsf-link:         #58c7e6;
    --eggsf-success:      #66d88f;
    --eggsf-warning:      #f4b84a;
    --eggsf-error:        #ff7b86;
    --eggsf-shadow-card:  0 1px 2px rgba(0, 0, 0, 0.34), 0 12px 28px rgba(0, 0, 0, 0.34);
    --eggsf-shadow-cta:   0 8px 18px rgba(102, 216, 143, 0.28);
    --eggsf-bg-shell:
        linear-gradient(135deg, rgba(102, 216, 143, 0.08), transparent 32%),
        linear-gradient(315deg, rgba(244, 184, 74, 0.07), transparent 36%),
        var(--eggsf-bg);
    --eggsf-row-hover:    rgba(102, 216, 143, 0.12);
}

body.mud-theme-dark {
    background: var(--eggsf-bg) !important;
    color: var(--eggsf-text);
}

.eggsf-layout-shell.eggsf-dark,
.mud-layout.eggsf-layout-shell.eggsf-dark {
    background: var(--eggsf-bg-shell) !important;
    color: var(--eggsf-text);
}

body.mud-theme-dark .eggsf-layout-shell,
body.mud-theme-dark .mud-layout.eggsf-layout-shell,
.mud-theme-dark .eggsf-layout-shell,
.mud-theme-dark.mud-layout.eggsf-layout-shell,
.eggsf-dark .eggsf-layout-shell,
.eggsf-dark.mud-layout.eggsf-layout-shell {
    background: var(--eggsf-bg-shell) !important;
    color: var(--eggsf-text);
}

body.mud-theme-dark .eggsf-main-content,
body.mud-theme-dark .mud-main-content,
.mud-theme-dark .eggsf-main-content,
.mud-theme-dark .mud-main-content,
.eggsf-dark .eggsf-main-content,
.eggsf-dark .mud-main-content {
    background: transparent !important;
    color: var(--eggsf-text);
}

body.mud-theme-dark .eggsf-main-content > .mud-container,
.mud-theme-dark .eggsf-main-content > .mud-container,
.eggsf-dark .eggsf-main-content > .mud-container {
    background: transparent !important;
}

/* Appbar — pure slate-950 reads as a separate "chrome" plane in both
   modes; the dark version pairs nicely with the deep navy body. */
.mud-theme-dark .eggsf-appbar,
.eggsf-dark .eggsf-appbar {
    background: #0a0f0b !important;
    border-bottom: 1px solid rgba(230, 236, 223, 0.10);
}

/* Tablet appbar uses the same chrome treatment as desktop. */
.mud-theme-dark .eggsf-tablet-appbar,
.eggsf-dark .eggsf-tablet-appbar {
    background: #0a0f0b !important;
}

/* Drawer — keep the slight elevation against the body so the nav is
   always identifiable, but on a dark surface that means "lighter than
   the background", not "darker". */
.mud-theme-dark .eggsf-drawer,
body.mud-theme-dark .eggsf-drawer,
.mud-theme-dark .mud-drawer.eggsf-drawer,
body.mud-theme-dark .mud-drawer.eggsf-drawer,
.eggsf-dark .eggsf-drawer,
.eggsf-dark .mud-drawer.eggsf-drawer {
    background: var(--eggsf-bg-elevated) !important;
    border-right: 1px solid var(--eggsf-border);
    color: var(--eggsf-text);
}

.mud-theme-dark .eggsf-drawer .mud-drawer-content,
body.mud-theme-dark .eggsf-drawer .mud-drawer-content,
.eggsf-dark .eggsf-drawer .mud-drawer-content {
    background: var(--eggsf-bg-elevated) !important;
    color: var(--eggsf-text);
}

.mud-theme-dark .eggsf-nav .mud-nav-link,
body.mud-theme-dark .eggsf-nav .mud-nav-link,
.eggsf-dark .eggsf-nav .mud-nav-link {
    color: var(--eggsf-text) !important;
}

/* Active nav-link — keep emerald accent visible on the dark drawer. */
.mud-theme-dark .eggsf-nav .mud-nav-link.active-item,
.mud-theme-dark .eggsf-nav .mud-nav-link.mud-nav-link-active,
.mud-theme-dark .eggsf-nav .active,
.eggsf-dark .eggsf-nav .mud-nav-link.active-item,
.eggsf-dark .eggsf-nav .mud-nav-link.mud-nav-link-active,
.eggsf-dark .eggsf-nav .active {
    background: linear-gradient(90deg, rgba(102, 216, 143, 0.22), rgba(244, 184, 74, 0.07)) !important;
    color: #9cebb4 !important;
}

/* MudPaper text colour follows the surface, not the body — without
   this, custom paper backgrounds keep the body's light text on a
   dark slab and we get "invisible" content for a frame. */
.mud-theme-dark .mud-paper,
body.mud-theme-dark .mud-paper,
.eggsf-dark .mud-paper {
    background-color: var(--eggsf-surface) !important;
    color: var(--eggsf-text);
}

.eggsf-dark .mud-table,
.eggsf-dark .mud-table-container,
.eggsf-dark .mud-table-root,
.eggsf-dark .mud-table-head,
.eggsf-dark .mud-table-body,
.eggsf-dark .mud-table-foot {
    background: var(--eggsf-surface) !important;
    color: var(--eggsf-text) !important;
}

.eggsf-dark .mud-table-row,
.eggsf-dark .mud-table-cell {
    background: transparent !important;
    color: var(--eggsf-text) !important;
    border-color: var(--eggsf-border-soft) !important;
}

.eggsf-dark .mud-table-striped .mud-table-body .mud-table-row:nth-child(odd),
.eggsf-dark .mud-table-striped .mud-table-row:nth-child(odd) {
    background: rgba(230, 236, 223, 0.025) !important;
}

.eggsf-dark .mud-table-hover .mud-table-body .mud-table-row:hover,
.eggsf-dark .mud-table-row:hover {
    background: var(--eggsf-row-hover) !important;
}

/* Table head was using uppercase muted text with a fixed colour — point
   it at the token so dark mode picks up #94a3b8 automatically. */
.mud-theme-dark .mud-table-head .mud-table-cell,
.eggsf-dark .mud-table-head .mud-table-cell {
    color: var(--eggsf-muted);
}

.eggsf-dark .mud-input.mud-input-outlined {
    background: var(--eggsf-surface-soft) !important;
    border-radius: 12px;
    color: var(--eggsf-text);
}

.eggsf-dark .mud-input > input.mud-input-root,
.eggsf-dark div.mud-input-slot.mud-input-root,
.eggsf-dark .mud-input-control > .mud-input-control-input-container {
    color: var(--eggsf-text) !important;
}

.eggsf-dark .mud-input-label,
.eggsf-dark .mud-input-adornment,
.eggsf-dark .mud-select-input {
    color: var(--eggsf-muted) !important;
}

.eggsf-dark .mud-button-root.mud-button-outlined {
    background: rgba(230, 236, 223, 0.03) !important;
    border-color: var(--eggsf-border) !important;
    color: var(--eggsf-text) !important;
}

.eggsf-dark .mud-button-root.mud-button-outlined:disabled,
.eggsf-dark .mud-button-root.mud-disabled {
    background: rgba(230, 236, 223, 0.025) !important;
    border-color: var(--eggsf-border-soft) !important;
    color: rgba(230, 236, 223, 0.38) !important;
}

/* Tabs / chips / outline-buttons — pull a couple of stubborn light
   colours into the dark token system. MudBlazor handles most of this
   already via PaletteDark, but a few of our custom Mud overrides
   above use literal slate values that need help in dark. */
.mud-theme-dark .badge-outline-success { color: var(--eggsf-success); border-color: var(--eggsf-success); }
.mud-theme-dark .badge-outline-warning { color: var(--eggsf-warning); border-color: var(--eggsf-warning); }
.mud-theme-dark .badge-outline-danger  { color: var(--eggsf-error);   border-color: var(--eggsf-error); }
.mud-theme-dark .badge-outline-primary { color: #9cebb4;              border-color: var(--eggsf-success); }

/* Header-area chips on the AppBar share the slate-950 chrome, so the
   "white-on-slate" overrides we applied for the company switcher pill
   stay correct. The pill itself uses rgba/white so no change needed. */

/* Error banner — the pale yellow bar made for the light theme is
   readable but visually loud on a dark UI; switch to a low-key
   semi-transparent amber. */
.mud-theme-dark #blazor-error-ui {
    background: rgba(245, 158, 11, 0.16);
    color: var(--eggsf-text);
    border-top: 3px solid var(--eggsf-warning);
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.40);
}

/* Buttons — primary CTA uses a brighter emerald gradient on dark so the
   contrast against the deep navy is high enough for AA. */
.mud-theme-dark .mud-button-root.mud-button-filled.mud-button-filled-primary {
    background: linear-gradient(180deg, #9cebb4 0%, #66d88f 52%, #2fa866 100%);
    color: #07100b !important;
    box-shadow: var(--eggsf-shadow-cta);
}

/* Input outlines — blend with the dark surface instead of the bright
   slate-200 border that bled through. */
.mud-theme-dark .mud-input-outlined-border {
    border-color: var(--eggsf-border) !important;
}

/* Scrollbar tweaks — match the surface tones in dark mode. */
body.mud-theme-dark::-webkit-scrollbar-track,
body.mud-theme-dark *::-webkit-scrollbar-track { background: var(--eggsf-bg-elevated); }
body.mud-theme-dark::-webkit-scrollbar-thumb,
body.mud-theme-dark *::-webkit-scrollbar-thumb { background: rgba(230, 236, 223, 0.16); }
body.mud-theme-dark::-webkit-scrollbar-thumb:hover,
body.mud-theme-dark *::-webkit-scrollbar-thumb:hover { background: rgba(230, 236, 223, 0.26); }

/* Print layout always renders white-on-black ink regardless of toggle. */
.eggsf-print-shell { color-scheme: light; }