:root {
    --color-primary: #C8462A;
    --color-primary-hover: #B03B22;
    --color-primary-light: #FBEAE4;
    --color-primary-surface: #FFF5F1;
    --color-primary-glow: rgba(200, 70, 42, 0.12);
    --color-primary-shadow: rgba(200, 70, 42, 0.2);
    --color-danger: #DC2626;
    --color-success: #16A34A;
    --color-text: #2D1B14;
    --color-text-muted: #7A5E54;
    --color-bg: #FDF8F6;
    --color-bg-gradient: linear-gradient(165deg, #FDF8F6 0%, #FAEAE4 100%);
    --color-surface: #FFFFFF;
    --color-border: #EFE2DC;
    --color-border-strong: #E3D2CA;
    --color-surface-sunken: #F6EEEA;
    --color-link: #B03B22;
    --color-header: rgba(255, 255, 255, 0.82);
    --color-scrim: rgba(45, 27, 20, 0.4);
    --color-ink: #2D1B14;
    --color-on-ink: #FFFFFF;
    /* Status pairs: a soft fill with readable text on it. */
    --status-pending-bg: #FEF3C7;
    --status-pending-fg: #78350F;
    --status-approved-bg: #DCFCE7;
    --status-approved-fg: #14532D;
    --status-rejected-bg: #FEE2E2;
    --status-rejected-fg: #7F1D1D;
    --status-over-bg: #DBEAFE;
    --status-over-fg: #1E3A8A;
    --shadow-sheet: 0 -12px 32px rgba(45, 27, 20, 0.18);
    --shadow-bar: 0 -6px 16px rgba(45, 27, 20, 0.06);
    --shadow-float: 0 8px 24px rgba(45, 27, 20, 0.14);
    --color-input-bg: #FFFFFF;
    --radius: 1rem;
    --radius-sm: 0.5rem;
    --radius-otp: 0.75rem;
    --font-family: 'Vazirmatn', 'Tahoma', sans-serif;
    --shadow-card: 0 2px 8px rgba(232, 87, 58, 0.05), 0 8px 24px rgba(232, 87, 58, 0.03);
    --shadow-btn: 0 2px 6px rgba(232, 87, 58, 0.2);
    /* Motion tokens from the project's animate skill: strong ease-out for UI,
       the iOS drawer curve for sheets and the side drawer. */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
    color-scheme: light;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --color-primary: #E8573A;
    --color-primary-hover: #F06A50;
    --color-primary-light: #3D2018;
    --color-primary-surface: #2A1610;
    --color-primary-glow: rgba(232, 87, 58, 0.2);
    --color-primary-shadow: rgba(232, 87, 58, 0.35);
    --color-danger: #F87171;
    --color-success: #4ADE80;
    --color-text: #F5EBE6;
    --color-text-muted: #A68E84;
    --color-bg: #1A100C;
    --color-bg-gradient: linear-gradient(165deg, #1A100C 0%, #261812 100%);
    --color-surface: #231714;
    --color-border: #3D2A22;
    --color-border-strong: #4A342B;
    --color-surface-sunken: #2C1D18;
    --color-link: #F08A6E;
    --color-header: rgba(35, 23, 20, 0.85);
    --color-scrim: rgba(0, 0, 0, 0.55);
    --color-ink: #F5EBE6;
    --color-on-ink: #1A100C;
    --status-pending-bg: #3A2A0B;
    --status-pending-fg: #FCD34D;
    --status-approved-bg: #0F2A18;
    --status-approved-fg: #86EFAC;
    --status-rejected-bg: #3B1515;
    --status-rejected-fg: #FCA5A5;
    --status-over-bg: #172554;
    --status-over-fg: #93C5FD;
    --shadow-sheet: 0 -12px 32px rgba(0, 0, 0, 0.5);
    --shadow-bar: 0 -6px 16px rgba(0, 0, 0, 0.3);
    --shadow-float: 0 8px 24px rgba(0, 0, 0, 0.4);
    --color-input-bg: #1A100C;
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.2);
    --shadow-btn: 0 2px 8px rgba(232, 87, 58, 0.35);
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    /* The browser's grey tap flash fights the :active press states below. */
    -webkit-tap-highlight-color: transparent;
}

/* iOS zooms the page into any input under 16px and never zooms back out. This
   is what the old maximum-scale=1 viewport was hiding; fixing the size lets
   pinch-zoom come back. Only on touch, so desktop keeps the compact inputs. */
@media (pointer: coarse) {
    input, select, textarea {
        font-size: 16px !important;
    }
}

/* Controls: no double-tap-zoom delay, and a long press doesn't select the label. */
button, a, [role="button"], .tappable {
    touch-action: manipulation;
}

button, [role="button"] {
    -webkit-user-select: none;
    user-select: none;
}

/* Press feedback, so a tap answers the moment the finger lands instead of on
   release. Colour changes ride along at the same speed; the scale stays under
   the 300ms the skills set for UI motion. */
.stepper-btn, .pm-icnbtn, .category-tab, .load-more-btn, .amount-sign,
.pm-btn-primary, .pm-segtab, .pmd-day, .oc-link-btn, .pm-fab, .btn-ghost,
.btn, .filter-chip, .segmented-btn, .choice-btn, .option-row, .format-option,
.header-icon-btn, .day-chip, .list-card, .quick-action, .task-link, .icon-btn,
.text-btn, .drawer-link, .drawer-logout, .drawer-close, .toast-dismiss {
    transition-property: transform, background-color, border-color, color, box-shadow, opacity;
    transition-duration: 120ms;
    transition-timing-function: var(--ease-out);
}

.stepper-btn:active, .pm-icnbtn:active, .category-tab:active, .load-more-btn:active,
.amount-sign:active, .pm-btn-primary:active:not(:disabled), .pm-segtab:active,
.pmd-day:active:not(:disabled), .oc-link-btn:active, .pm-fab:active,
.btn-ghost:active:not(:disabled), .btn:active:not(:disabled), .filter-chip:active,
.segmented-btn:active, .choice-btn:active, .option-row:active, .format-option:active,
.header-icon-btn:active:not(:disabled), .day-chip:active:not(:disabled), .list-card:active,
.quick-action:active, .task-link:active, .icon-btn:active, .text-btn:active,
.drawer-link:active, .drawer-logout:active, .drawer-close:active, .toast-dismiss:active {
    transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }
}

body {
    font-family: var(--font-family);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.7;
    min-height: 100dvh;
    overflow-x: hidden;
}

/* Keyboard users get a visible focus ring on every control; mouse and touch
   users don't, since :focus-visible only matches keyboard-driven focus. */
:where(a, button, select, input, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* FocusOnNavigate programmatically focuses the page's h1 for accessibility;
   suppress the resulting visible focus ring while keeping the behavior. */
h1:focus {
    outline: none;
}

/* ========== Auth pages ========== */
.auth-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: 1.5rem;
    background: var(--color-bg-gradient);
}

.auth-card {
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 2.25rem 2rem;
    width: 100%;
    max-width: 400px;
    border: 1px solid var(--color-border);
}

.auth-card h1 {
    font-size: 1.375rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.25rem;
    color: var(--color-text);
}

.auth-card .subtitle {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    margin-bottom: 1.75rem;
}

/* ========== Logo ========== */
.logo {
    text-align: center;
    margin-bottom: 1.25rem;
}

.logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 0.5rem;
    overflow: hidden;
}

.logo-mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.logo-text {
    display: block;
    font-size: 1.625rem;
    font-weight: 800;
    color: var(--color-primary);
}

/* ========== Form elements ========== */
.form-group {
    margin-bottom: 1.125rem;
}

.form-group label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 0.375rem;
    color: var(--color-text);
}

.form-input {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.6875rem 0.875rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 0.625rem;
    font-family: var(--font-family);
    font-size: 0.9375rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: var(--color-input-bg);
    color: var(--color-text);
    direction: ltr;
    text-align: right;
}

.form-input::placeholder {
    color: var(--color-text-muted);
    opacity: 0.6;
}

.form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-glow);
}

/* A value shown in place of an input the user may not change. Keeps the field's
   shape so the form still reads as a form, without inviting a click. */
.form-input-readonly {
    direction: rtl;
    background: var(--color-primary-surface);
    color: var(--color-text-muted);
    cursor: default;
}

/* ========== OTP ========== */
.otp-container {
    display: flex;
    gap: 0.75rem;
    direction: ltr;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.otp-digit {
    width: 3.25rem;
    height: 3.75rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-otp);
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    font-family: var(--font-family);
    color: var(--color-text);
    background: var(--color-input-bg);
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
    caret-color: var(--color-primary);
}

.otp-digit:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-primary-surface);
    box-shadow: 0 0 0 3px var(--color-primary-glow);
}

/* ========== Buttons ========== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 3rem;
    padding: 0.75rem 1.25rem;
    border: none;
    border-radius: 0.75rem;
    font-family: var(--font-family);
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 150ms ease, box-shadow 150ms ease, transform 120ms var(--ease-out);
}

.btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn-primary {
    background-color: var(--color-primary);
    color: #fff;
    box-shadow: var(--shadow-btn);
}

@media (hover: hover) and (pointer: fine) {
    .btn-primary:hover:not(:disabled) {
        background-color: var(--color-primary-hover);
        box-shadow: 0 4px 12px var(--color-primary-shadow);
    }
}

.btn-primary:active:not(:disabled) {
    transform: scale(0.98);
}

.btn-ghost {
    background: transparent;
    color: var(--color-primary);
}

@media (hover: hover) and (pointer: fine) {
    .btn-ghost:hover:not(:disabled) {
        background: var(--color-primary-light);
    }
}

/* ========== Form extras ========== */
.link-row {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 1.25rem;
}

.text-link {
    font-size: 0.8125rem;
    color: var(--color-primary);
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    font-family: var(--font-family);
    font-weight: 500;
    transition: opacity 0.15s;
}

@media (hover: hover) and (pointer: fine) {
    .text-link:hover {
        opacity: 0.8;
        text-decoration: underline;
    }
}

/* ========== Alerts ========== */
.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    margin-bottom: 1rem;
    font-weight: 500;
}

.alert-error {
    background: #FEF2F2;
    color: var(--color-danger);
    border: 1px solid #FECACA;
}

.alert-success {
    background: #F0FDF4;
    color: var(--color-success);
    border: 1px solid #BBF7D0;
}

html[data-theme="dark"] .alert-error {
    background: #3B1515;
    border-color: #5C2020;
}
html[data-theme="dark"] .alert-success {
    background: #0F2A18;
    border-color: #1A4028;
}

/* ========== Timer ========== */
.timer {
    text-align: center;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-top: 0.875rem;
}

/* ========== Authenticated shell ==========
   The header, toolbar band and bottom bar themselves are styled in
   PageShell.razor.css; these are the page-level pieces around them. */
.app-content {
    flex: 1;
    padding: 1rem;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
}

/* ========== Branch list ========== */
.branch-list {
    list-style: none;
}

.branch-item {
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 1rem 1.25rem;
    margin-bottom: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.branch-item span:first-child {
    font-weight: 600;
}

/* ========== Section title ========== */
.section-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--color-text);
}

/* ========== Loading ========== */
.spinner {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border: 2.5px solid var(--color-primary-light);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

.btn .spinner {
    width: 1.125rem;
    height: 1.125rem;
    border-color: rgba(255,255,255,0.3);
    border-top-color: #fff;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3rem;
    color: var(--color-text-muted);
}

/* ========== Blazor overrides ========== */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--color-success);
}

.invalid {
    outline: 1px solid var(--color-danger);
}

.validation-message {
    color: var(--color-danger);
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* ========== Order form ========== */
.order-form {
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem;
}

.order-date-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-primary-surface);
    border: 1px solid var(--color-primary-light);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
}

.order-date-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.order-date-value {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-primary);
}

.form-input select,
select.form-input {
    appearance: none;
    direction: rtl;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238C6D62' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 0.875rem center;
    padding-left: 2.5rem;
}

/* The open list is drawn by the browser and does not inherit the select's font on its own. */
.form-input option,
select.form-input option {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

/* ========== Persian Multi-Date Picker ========== */
.pmd {
    position: relative;
}

.pmd-input {
    width: 100%;
    padding: 0.6875rem 0.875rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-input-bg);
    color: var(--color-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: var(--font-family);
    font-size: 0.9375rem;
}

@media (hover: hover) and (pointer: fine) {
    .pmd-input:hover {
        border-color: var(--color-primary);
    }
}

.pmd-placeholder {
    color: var(--color-text-muted);
    opacity: 0.6;
}

.pmd-summary {
    font-weight: 500;
}

.pmd-chevron {
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.pmd-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

.pmd-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: var(--color-primary-surface);
    border: 1px solid var(--color-primary-light);
    border-radius: 2rem;
    padding: 0.25rem 0.5rem 0.25rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-primary);
    font-family: var(--font-family);
    direction: ltr;
}

.pmd-chip-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border: none;
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.625rem;
    padding: 0;
    font-family: var(--font-family);
    transition: background-color 0.15s;
}

@media (hover: hover) and (pointer: fine) {
    .pmd-chip-remove:hover {
        background: var(--color-primary);
        color: #fff;
    }
}

.pmd-overlay {
    position: fixed;
    inset: 0;
    z-index: 49;
}

.pmd-dropdown {
    position: absolute;
    top: calc(100% + 0.375rem);
    right: 0;
    z-index: 50;
    width: 18.5rem;
    max-width: 90vw;
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 1rem;
    animation: pmd-fade-in 0.15s ease;
}

@keyframes pmd-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.pmd-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.pmd-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-text);
}

.pmd-nav {
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-input-bg);
    color: var(--color-text);
    font-size: 1.125rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s, border-color 0.15s;
    font-family: var(--font-family);
}

@media (hover: hover) and (pointer: fine) {
    .pmd-nav:hover {
        border-color: var(--color-primary);
        background: var(--color-primary-surface);
        color: var(--color-primary);
    }
}

.pmd-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: 0.25rem;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid var(--color-border);
}

.pmd-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.25rem;
}

.pmd-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    background: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--color-text);
    font-family: var(--font-family);
    transition: background-color 0.12s, color 0.12s;
}

@media (hover: hover) and (pointer: fine) {
    .pmd-day:hover:not(:disabled):not(.selected) {
        background: var(--color-primary-light);
    }
}

.pmd-day.today:not(.selected) {
    border: 1.5px solid var(--color-primary);
    color: var(--color-primary);
    font-weight: 700;
}

.pmd-day.selected {
    background: var(--color-primary);
    color: #fff;
    font-weight: 700;
}

.pmd-day.past {
    color: var(--color-text-muted);
    opacity: 0.4;
    cursor: not-allowed;
}

/* Date already has a submitted order for the selected branch */
.pmd-day.unavailable {
    color: var(--color-danger);
    background: #FEF2F2;
    opacity: 0.75;
    cursor: not-allowed;
    text-decoration: line-through;
}

html[data-theme="dark"] .pmd-day.unavailable {
    background: rgba(220, 38, 38, 0.12);
}

.pmd-day.pmd-blank {
    cursor: default;
}

.pmd-input.pmd-disabled {
    cursor: not-allowed;
    opacity: 0.6;
    background: var(--color-bg);
}

@media (hover: hover) and (pointer: fine) {
    .pmd-input.pmd-disabled:hover {
        border-color: var(--color-border);
    }
}

.pmd-placeholder .spinner {
    margin-inline-end: 0.375rem;
    vertical-align: -0.125rem;
}

.pmd-clear-btn {
    display: block;
    width: 100%;
    padding: 0.5rem;
    border: none;
    border-top: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-danger, #e53935);
    font-size: 0.75rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
    .pmd-clear-btn:hover {
        background: var(--color-surface);
    }
}

/* ========== Order progress ========== */
.order-progress {
    position: sticky;
    top: 0;
    z-index: 6;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 0.625rem;
    padding: 0.625rem 0.875rem;
    margin-bottom: 0.75rem;
}

.order-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.375rem;
}

.order-progress-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text);
}

.order-progress-count {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-primary);
}

.order-progress-track {
    height: 0.5rem;
    background: var(--color-surface);
    border-radius: 0.25rem;
    overflow: hidden;
}

.order-progress-fill {
    height: 100%;
    background: var(--color-success);
    border-radius: 0.25rem;
    min-width: 4px;
    transition: width 0.3s ease;
}

.order-progress-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 0.25rem;
    font-size: 0.6875rem;
    color: var(--color-text-muted);
}

/* ========== Product search ========== */
.product-search {
    position: relative;
    margin-bottom: 0.75rem;
}

.product-search-icon {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.875rem;
    color: var(--color-text-muted);
    pointer-events: none;
}

.product-search-input {
    width: 100%;
    padding: 0.625rem 2.25rem 0.625rem 2.25rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-family: var(--font-family);
    background: var(--color-input-bg);
    color: var(--color-text);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.product-search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-glow);
}

.product-search-input::placeholder {
    color: var(--color-text-muted);
    opacity: 0.6;
}

.product-search-clear {
    position: absolute;
    left: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: var(--color-text-muted);
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0.25rem;
    font-family: var(--font-family);
}

.search-result-count {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin: 0 0 0.75rem;
}

.search-category-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
}

.search-category-accent {
    width: 3px;
    height: 0.875rem;
    background: var(--color-primary);
    border-radius: 2px;
}

.search-category-label span:last-child {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-primary);
}

/* ========== Category accordion ========== */
.category-tabs {
    display: flex;
    gap: 0.375rem;
    overflow-x: auto;
    padding: 0.5rem 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    position: sticky;
    top: 4.75rem;
    z-index: 5;
    background: var(--color-surface);
    margin-inline: -0.25rem;
    padding-inline: 0.25rem;
}

.category-tabs::-webkit-scrollbar {
    display: none;
}

.category-tab {
    flex-shrink: 0;
    padding: 0.375rem 0.875rem;
    border-radius: 1.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: inherit;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

@media (hover: hover) and (pointer: fine) {
    .category-tab:hover {
        background: var(--color-primary-light);
        border-color: var(--color-primary);
        color: var(--color-primary);
    }
}

.category-tab.active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.category-section {
    border: 1.5px solid var(--color-border);
    border-radius: 0.625rem;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.category-section-header {
    background: var(--color-surface);
    padding: 0.625rem 0.875rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--color-border);
}

.category-section-accent {
    width: 3px;
    height: 1rem;
    background: var(--color-primary);
    border-radius: 2px;
}

.category-section-title {
    font-size: 0.875rem;
    font-weight: 700;
}

.category-section-badge {
    font-size: 0.6875rem;
    padding: 0.125rem 0.625rem;
    border-radius: 0.75rem;
    background: var(--color-primary-light);
    color: var(--color-text-muted);
    font-weight: 600;
}

/* ========== Product row ========== */
.category-products {
    background: var(--color-surface);
}

.product-row {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

.product-row:last-child {
    border-bottom: none;
}

.product-info {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.product-thumb {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 0.625rem;
    background: var(--color-primary-light);
    color: var(--color-primary);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.product-thumb.has-image {
    cursor: pointer;
}

.product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-thumb-placeholder {
    font-size: 1.5rem;
    opacity: 0.5;
}

.product-details {
    flex: 1;
    min-width: 0;
}

.product-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

.product-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.125rem 0.5rem;
    margin-top: 0.1875rem;
    font-size: 0.6875rem;
    color: var(--color-text-muted);
}

.meta-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--color-border);
}

/* ========== Steppers ========== */
.product-steppers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.stepper-group {
    min-width: 0;
}

.stepper-label {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    display: block;
    margin-bottom: 0.25rem;
}

.stepper-label.order-label {
    color: var(--color-primary);
    font-weight: 600;
}

.stepper-unit {
    font-size: 0.625rem;
    font-weight: 400;
    opacity: 0.8;
}

.stepper {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border-strong);
    border-radius: 0.625rem;
    overflow: hidden;
    height: 2.5rem;
    background: var(--color-surface);
    transition: background-color 150ms ease, border-color 150ms ease;
}

.order-stepper.has-value {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}

.stepper-btn {
    flex: none;
    width: 2.5rem;
    height: 100%;
    border: none;
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 1.125rem;
    cursor: pointer;
    font-family: var(--font-family);
    padding: 0;
    transition: background-color 0.12s;
}

@media (hover: hover) and (pointer: fine) {
    .stepper-btn:hover {
        background: var(--color-primary-light);
        color: var(--color-primary);
    }
}

.order-stepper .stepper-btn {
    background: transparent;
    color: var(--color-primary);
}

.stepper-value {
    flex: 1;
    border: none;
    text-align: center;
    min-width: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-text);
    font-family: var(--font-family);
    background: transparent;
    width: 100%;
    outline: none;
    -moz-appearance: textfield;
    appearance: textfield;
}

.stepper-value::-webkit-inner-spin-button,
.stepper-value::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.order-stepper.has-value .stepper-value {
    color: var(--color-primary);
    font-weight: 800;
}

/* ========== Confirm bottom sheet ========== */
.confirm-backdrop {
    position: fixed;
    inset: 0;
    background: var(--color-scrim);
    z-index: 100;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    animation: confirm-fade 200ms var(--ease-out);
}

@keyframes confirm-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.confirm-sheet {
    background: var(--color-surface);
    border-radius: 1.25rem 1.25rem 0 0;
    box-shadow: var(--shadow-sheet);
    max-height: 85vh;
    max-height: 85dvh;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    animation: confirm-slide 300ms var(--ease-drawer);
}

@keyframes confirm-slide {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.confirm-handle {
    display: flex;
    justify-content: center;
    padding: 0.625rem 0 0.25rem;
}

.confirm-handle span {
    width: 2.25rem;
    height: 0.3125rem;
    border-radius: 999px;
    background: var(--color-border-strong);
    border-radius: 0.125rem;
}

.confirm-header {
    padding: 0.25rem 1.25rem 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: none;
}

.confirm-title {
    font-size: 1.125rem;
    font-weight: 800;
}

.confirm-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.confirm-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.25rem 1rem 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    flex: 1;
    min-height: 0;
}

/* Children keep their natural height so the body scrolls; otherwise an
   overflow:hidden child (the item list) shrinks and clips its own rows. */
.confirm-body > * {
    flex-shrink: 0;
}

.confirm-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    font-size: 0.8125rem;
}

.confirm-row-label {
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.confirm-row-value {
    font-weight: 500;
}

.confirm-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    justify-content: flex-end;
}

.confirm-date-chip {
    font-size: 0.6875rem;
    background: var(--color-surface);
    padding: 0.1875rem 0.5rem;
    border-radius: var(--radius-sm);
}

.confirm-divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 0 0 0.875rem;
}

.confirm-products-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.625rem;
}

.confirm-products-title {
    font-size: 0.8125rem;
    font-weight: 500;
}

.confirm-products-count {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-primary);
}

.confirm-product {
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    padding: 0.625rem 0.75rem;
    margin-bottom: 0.5rem;
}

.confirm-product-name {
    font-size: 0.8125rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.confirm-product-amounts {
    display: flex;
    gap: 1rem;
    font-size: 0.6875rem;
    color: var(--color-text-muted);
}

.confirm-product-amounts strong {
    font-weight: 500;
    color: var(--color-text);
}

.confirm-product-amounts .order-val {
    color: var(--color-primary);
}

.confirm-footer {
    padding: 0.75rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--color-border);
    display: flex;
    gap: 0.75rem;
}

.confirm-btn-back {
    flex: 1;
    min-height: 3rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--color-border-strong);
    background: var(--color-surface);
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--color-text);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.confirm-btn-back:active {
    background: var(--color-border);
}

.confirm-btn-submit {
    flex: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: none;
    background: var(--color-primary);
    font-size: 0.9375rem;
    font-weight: 700;
    font-family: inherit;
    color: #fff;
    cursor: pointer;
    box-shadow: var(--shadow-btn);
    transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
}

@media (hover: hover) and (pointer: fine) {
    .confirm-btn-submit:hover:not(:disabled) {
        background: var(--color-primary-hover);
        box-shadow: 0 4px 12px var(--color-primary-shadow);
    }
}

.confirm-btn-submit:active:not(:disabled) {
    transform: scale(0.98);
}

.confirm-btn-submit:disabled {
    opacity: 0.6;
    cursor: default;
}

/* A heading inside a confirmation sheet, for a group of rows such as the
   per-organization sales lines. */
.confirm-section-label {
    padding: 0 1.25rem;
    margin: 0.25rem 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.eod-empty-note {
    padding: 0.75rem 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.confirm-btn-danger {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--color-danger);
    background: transparent;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--color-danger);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, transform 0.1s;
}

@media (hover: hover) and (pointer: fine) {
    .confirm-btn-danger:hover:not(:disabled) {
        background: var(--color-danger);
        color: #fff;
    }
}

.confirm-btn-danger:active:not(:disabled) {
    transform: scale(0.98);
}

.confirm-btn-danger:disabled {
    opacity: 0.6;
    cursor: default;
}

.confirm-delete-note {
    padding: 0.875rem 1.25rem 0;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--color-danger);
}

/* ========== Order result sheet ========== */
.result-sheet {
    text-align: center;
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
}

.result-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.75rem auto 1rem;
}

.result-icon-success {
    background: #e8f5e9;
}

.result-icon-error {
    background: #ffeaea;
}

[data-theme="dark"] .result-icon-success {
    background: rgba(46,125,50,0.2);
}

[data-theme="dark"] .result-icon-error {
    background: rgba(198,40,40,0.2);
}

.result-icon-check,
.result-icon-x {
    display: block;
    width: 1.75rem;
    height: 1.75rem;
    position: relative;
}

.result-icon-check::before,
.result-icon-check::after {
    content: "";
    position: absolute;
    background: #2e7d32;
    border-radius: 1.5px;
}

.result-icon-check::before {
    width: 0.625rem;
    height: 3px;
    bottom: 0.4rem;
    left: 0.15rem;
    transform: rotate(45deg);
}

.result-icon-check::after {
    width: 1.125rem;
    height: 3px;
    bottom: 0.55rem;
    left: 0.45rem;
    transform: rotate(-45deg);
}

[data-theme="dark"] .result-icon-check::before,
[data-theme="dark"] .result-icon-check::after {
    background: #66bb6a;
}

.result-icon-x::before,
.result-icon-x::after {
    content: "";
    position: absolute;
    width: 1.25rem;
    height: 3px;
    background: #c62828;
    border-radius: 1.5px;
    top: 50%;
    left: 50%;
}

.result-icon-x::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.result-icon-x::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

[data-theme="dark"] .result-icon-x::before,
[data-theme="dark"] .result-icon-x::after {
    background: #ef5350;
}

.result-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.375rem;
}

.result-title-error {
    color: #c62828;
}

[data-theme="dark"] .result-title-error {
    color: #ef5350;
}

.result-subtitle {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin: 0 0 1.5rem;
    padding: 0 1.25rem;
    line-height: 1.5;
}

.result-actions {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0 1.25rem;
}

.result-btn-export {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    border: none;
    background: var(--color-primary);
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    color: #fff;
    cursor: pointer;
    box-shadow: var(--shadow-btn);
    transition: background 0.15s, transform 0.1s;
}

@media (hover: hover) and (pointer: fine) {
    .result-btn-export:hover:not(:disabled) {
        background: var(--color-primary-hover);
    }
}

.result-btn-export:active:not(:disabled) {
    transform: scale(0.98);
}

.result-btn-export:disabled {
    opacity: 0.6;
    cursor: default;
}

.result-btn-new {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    border: none;
    background: #e8f5e9;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    color: #2e7d32;
    cursor: pointer;
    transition: background 0.15s;
}

.result-btn-new:active {
    background: #c8e6c9;
}

[data-theme="dark"] .result-btn-new {
    background: rgba(46,125,50,0.2);
    color: #66bb6a;
}

[data-theme="dark"] .result-btn-new:active {
    background: rgba(46,125,50,0.3);
}

.result-btn-retry {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    border: none;
    background: #ffeaea;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    color: #c62828;
    cursor: pointer;
    transition: background 0.15s;
}

.result-btn-retry:active {
    background: #ffcdd2;
}

[data-theme="dark"] .result-btn-retry {
    background: rgba(198,40,40,0.2);
    color: #ef5350;
}

[data-theme="dark"] .result-btn-retry:active {
    background: rgba(198,40,40,0.3);
}

.result-btn-close {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background 0.15s;
}

.result-btn-close:active {
    background: var(--color-border);
}

/* ========== Image lightbox ========== */
.lightbox-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.8);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    animation: lightbox-in 0.2s ease;
}

@keyframes lightbox-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lightbox-close {
    position: absolute;
    top: -0.5rem;
    left: -0.5rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: none;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.875rem;
    cursor: pointer;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.lightbox-image {
    max-width: 100%;
    max-height: 70vh;
    border-radius: var(--radius);
    object-fit: contain;
}

.lightbox-title {
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    margin-top: 0.75rem;
    text-align: center;
}

#blazor-error-ui {
    display: none;
    background: var(--color-primary-hover);
    color: #fff;
    padding: 0.75rem 1.25rem;
    position: fixed;
    bottom: 0;
    inset-inline: 0;
    z-index: 1000;
    text-align: center;
}

/* ========== Order Requests List ========== */
.orders-page {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.summary-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.summary-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    padding: 0.75rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
}

.summary-card.skeleton {
    height: 5rem;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.summary-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9375rem;
    margin-bottom: 0.125rem;
}

.summary-icon.approved {
    background: #DCFCE7;
    color: #16A34A;
}

.summary-icon.pending {
    background: #FEF3C7;
    color: #D97706;
}

.summary-icon.rejected {
    background: #FEE2E2;
    color: #DC2626;
}

.summary-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.2;
}

.summary-label {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

.orders-filter-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    padding: 0.625rem 0.75rem;
    margin-bottom: 0.625rem;
}

.filter-row {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

.filter-row + .filter-row {
    margin-top: 0.5rem;
}

.filter-field {
    flex: 1;
    min-width: 7rem;
}

.filter-label {
    display: block;
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.filter-select {
    width: 100%;
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
    font-family: inherit;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    background: var(--color-bg);
    color: var(--color-text);
    direction: rtl;
    appearance: auto;
}

.filter-select:focus {
    outline: none;
    border-color: var(--color-primary);
}

.orders-filter-panel .pmd-input {
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
    border-width: 1px;
}

.orders-filter-panel .pmd-chevron {
    font-size: 0.625rem;
}

.filter-row .filter-field + .filter-field .pmd-dropdown {
    right: auto;
    left: 0;
}

.filter-icon-btn {
    flex-shrink: 0;
    align-self: flex-end;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    border: none;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.875rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (hover: hover) and (pointer: fine) {
    .filter-icon-btn:hover {
        opacity: 0.9;
    }
}

.orders-filter-tabs {
    display: flex;
    gap: 0.375rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.orders-filter-tabs::-webkit-scrollbar {
    display: none;
}

.filter-tab {
    flex-shrink: 0;
    padding: 0.375rem 0.875rem;
    border-radius: 1.25rem;
    font-size: 0.78125rem;
    font-weight: 600;
    font-family: inherit;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

@media (hover: hover) and (pointer: fine) {
    .filter-tab:hover {
        border-color: var(--color-primary);
        color: var(--color-primary);
    }
}

.filter-tab.active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.orders-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: var(--color-text-muted);
    text-align: center;
}

.orders-empty-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

.orders-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.order-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    padding: 0.875rem;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

@media (hover: hover) and (pointer: fine) {
    .order-card:hover {
        border-color: var(--color-primary);
        box-shadow: 0 2px 8px var(--color-primary-glow);
    }
}

.order-card:active {
    transform: scale(0.99);
}

.order-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.order-card-id {
    font-size: 0.9375rem;
    font-weight: 700;
    direction: ltr;
}

.order-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.625rem;
    border-radius: 1rem;
    font-size: 0.6875rem;
    font-weight: 600;
}

.order-status-badge .status-dot {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
}

.status-approved {
    background: #DCFCE7;
    color: #166534;
}

.status-approved .status-dot {
    background: #16A34A;
}

.status-pending {
    background: #FEF3C7;
    color: #92400E;
}

.status-pending .status-dot {
    background: #D97706;
}

.status-rejected {
    background: #FEE2E2;
    color: #991B1B;
}

.status-rejected .status-dot {
    background: #DC2626;
}

.order-card-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.order-card-row {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--color-text);
}

.order-card-icon {
    font-size: 0.9375rem;
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
}

.order-card-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.order-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.375rem;
    border-top: 1px solid var(--color-border);
}

.order-card-items {
    font-size: 0.75rem;
    color: var(--color-primary);
    font-weight: 600;
}

.order-card-submitter {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
}

.order-card-balance {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.order-card-amount {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-primary);
}

.order-card-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
}

.order-card-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.load-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: 0.625rem;
    background: var(--color-surface);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-primary);
    cursor: pointer;
    transition: background 0.15s;
}

@media (hover: hover) and (pointer: fine) {
    .load-more-btn:hover {
        background: var(--color-primary-light);
    }
}

.load-more-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ========== Order Detail ========== */
.back-button {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 0.625rem;
    width: 2.125rem;
    height: 2.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}

@media (hover: hover) and (pointer: fine) {
    .back-button:hover {
        background: rgba(255, 255, 255, 0.35);
    }
}

.header-export-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.625rem;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: none;
    font-size: 0.8125rem;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

@media (hover: hover) and (pointer: fine) {
    .header-export-btn:hover {
        background: rgba(255, 255, 255, 0.35);
    }
}

.header-export-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.order-detail-page {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.detail-info-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.875rem;
    padding: 0.875rem 1rem;
}

.detail-info-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.detail-order-num {
    font-size: 1.125rem;
    font-weight: 700;
    direction: ltr;
}

.detail-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
}

.detail-info-item {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.detail-info-item.detail-full-width {
    grid-column: 1 / -1;
}

.detail-info-icon {
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 0.0625rem;
}

.detail-info-label {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    display: block;
}

.detail-info-val {
    font-size: 0.84375rem;
    font-weight: 600;
    color: var(--color-text);
    display: block;
    line-height: 1.4;
}

.detail-products-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.875rem;
    padding: 0.875rem 1rem;
}

.detail-products-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.detail-products-title {
    font-size: 0.875rem;
    font-weight: 700;
}

.detail-products-count {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    background: var(--color-primary-light);
    padding: 0.125rem 0.5rem;
    border-radius: 0.75rem;
    font-weight: 600;
}

.detail-category-section {
    border: 1.5px solid var(--color-border);
    border-radius: 0.625rem;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.detail-category-section .edit-product-card,
.detail-category-section .detail-product-row {
    padding-inline: 0.875rem;
}

.detail-product-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--color-border);
}

.detail-product-row:last-child {
    border-bottom: none;
}

.detail-product-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.detail-thumb {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.detail-thumb.has-image {
    cursor: pointer;
}

.detail-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detail-product-name {
    font-size: 0.84375rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detail-product-amounts {
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
    flex-shrink: 0;
}

.detail-amount {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.6875rem;
}

.detail-amount.stock-amount {
    background: var(--color-bg);
}

.detail-amount.order-amount {
    background: #DCFCE7;
}

html[data-theme="dark"] .detail-amount.order-amount {
    background: rgba(22, 163, 74, 0.15);
}

.detail-amount-label {
    color: var(--color-text-muted);
    font-weight: 500;
}

.detail-amount.order-amount .detail-amount-label {
    color: #166534;
}

html[data-theme="dark"] .detail-amount.order-amount .detail-amount-label {
    color: #4ADE80;
}

.detail-amount-val {
    font-weight: 700;
    color: var(--color-text);
}

.detail-amount.order-amount .detail-amount-val {
    color: #166534;
}

html[data-theme="dark"] .detail-amount.order-amount .detail-amount-val {
    color: #4ADE80;
}

/* dark mode overrides for order status badges */
html[data-theme="dark"] .status-approved {
    background: rgba(22, 163, 74, 0.15);
    color: #4ADE80;
}

html[data-theme="dark"] .status-approved .status-dot {
    background: #4ADE80;
}

html[data-theme="dark"] .status-pending {
    background: rgba(217, 119, 6, 0.15);
    color: #FBBF24;
}

html[data-theme="dark"] .status-pending .status-dot {
    background: #FBBF24;
}

html[data-theme="dark"] .status-rejected {
    background: rgba(220, 38, 38, 0.15);
    color: #F87171;
}

html[data-theme="dark"] .status-rejected .status-dot {
    background: #F87171;
}

html[data-theme="dark"] .summary-icon.approved {
    background: rgba(22, 163, 74, 0.15);
    color: #4ADE80;
}

html[data-theme="dark"] .summary-icon.pending {
    background: rgba(217, 119, 6, 0.15);
    color: #FBBF24;
}

html[data-theme="dark"] .summary-icon.rejected {
    background: rgba(220, 38, 38, 0.15);
    color: #F87171;
}

/* approve/reject actions */
.detail-actions-card {
    background: var(--card-bg, #fff);
    border-radius: 1rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.approval-note-input {
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 0.625rem;
    padding: 0.625rem 0.75rem;
    font-family: var(--font-family);
    font-size: 0.8125rem;
    resize: none;
    direction: rtl;
    background: var(--card-bg, #fff);
    color: var(--text-primary, #1e293b);
}

html[data-theme="dark"] .approval-note-input {
    border-color: #374151;
    background: #1f2937;
    color: #f1f5f9;
}

.detail-actions-row {
    display: flex;
    gap: 0.625rem;
}

.action-btn {
    flex: 1;
    padding: 0.625rem 1rem;
    border: none;
    border-radius: 0.625rem;
    font-family: var(--font-family);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    transition: opacity 0.15s;
}

.action-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.approve-btn {
    background: #16a34a;
    color: #fff;
}

.reject-btn {
    background: #dc2626;
    color: #fff;
}

.cancel-btn {
    background: #e5e7eb;
    color: #374151;
}

html[data-theme="dark"] .cancel-btn {
    background: #374151;
    color: #e5e7eb;
}

/* reject confirm modal */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal-dialog {
    background: var(--card-bg, #fff);
    border-radius: 1rem;
    padding: 1.5rem;
    max-width: 20rem;
    width: 100%;
    text-align: center;
    direction: rtl;
}

html[data-theme="dark"] .modal-dialog {
    background: #1f2937;
}

.modal-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
    margin-bottom: 0.5rem;
}

html[data-theme="dark"] .modal-title {
    color: #f1f5f9;
}

.modal-desc {
    font-size: 0.8125rem;
    color: var(--text-secondary, #64748b);
    margin-bottom: 1rem;
}

.modal-actions {
    display: flex;
    gap: 0.625rem;
}

.modal-field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.375rem;
    margin-bottom: 1rem;
    text-align: right;
}

.confirm-print-btn {
    background: var(--color-primary);
    color: #fff;
}

/* editable order items */
.edit-product-card {
    border-bottom: 1px solid var(--color-border);
    padding: 0.75rem 0;
}

.edit-product-card:last-child {
    border-bottom: none;
}

.edit-product-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.edit-product-fields {
    display: flex;
    gap: 0.625rem;
}

.edit-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.edit-field-label {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

.edit-amount-input {
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.4375rem 0.625rem;
    font-family: var(--font-family);
    font-size: 0.8125rem;
    text-align: center;
    background: var(--color-bg);
    color: var(--color-text);
    -moz-appearance: textfield;
}

.edit-amount-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb, 239, 118, 98), 0.15);
}

.edit-amount-input.order {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.edit-amount-input.order:focus {
    border-color: #16a34a;
    box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.15);
}

html[data-theme="dark"] .edit-amount-input {
    border-color: #374151;
    background: #1f2937;
    color: #f1f5f9;
}

html[data-theme="dark"] .edit-amount-input.order {
    border-color: rgba(22, 163, 74, 0.3);
    background: rgba(22, 163, 74, 0.1);
}

.edit-amount-input::-webkit-inner-spin-button,
.edit-amount-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.remove-item-btn {
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 0.375rem;
    background: rgba(220, 38, 38, 0.08);
    color: #dc2626;
    font-size: 0.875rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: flex-end;
    transition: background 0.15s;
}

@media (hover: hover) and (pointer: fine) {
    .remove-item-btn:hover {
        background: rgba(220, 38, 38, 0.18);
    }
}

html[data-theme="dark"] .remove-item-btn {
    background: rgba(248, 113, 113, 0.12);
    color: #F87171;
}

/* ========== Product & Category Management ========== */
.pm-content.app-content {
    max-width: 1180px;
}

.pm-page {
    position: relative;
}

.pm-segtabs {
    display: none;
    gap: 0.375rem;
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: 999px;
    padding: 0.25rem;
    margin-bottom: 0.875rem;
}

.pm-segtab {
    flex: 1;
    text-align: center;
    padding: 0.5rem 0;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

.pm-segtab.active {
    background: var(--color-primary);
    color: #fff;
}

.pm-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.875rem;
}

.pm-panel {
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.875rem;
}

.pm-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.625rem;
}

.pm-panel-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-text);
}

.pm-count-pill {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-primary);
    background: var(--color-primary-surface);
    padding: 0.1875rem 0.5625rem;
    border-radius: 999px;
}

.pm-panel-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.625rem;
}

.pm-panel-actions .product-search {
    flex: 1;
    margin-bottom: 0;
}

.pm-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.5rem 0.8125rem;
    border-radius: var(--radius-sm);
    border: none;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s;
}

.pm-btn-primary {
    background: var(--color-primary);
    color: #fff;
}

@media (hover: hover) and (pointer: fine) {
    .pm-btn-primary:hover:not(:disabled) {
        background: var(--color-primary-hover);
    }
}

.pm-btn-primary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.pm-empty {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    padding: 1.5rem 0.5rem;
}

.pm-cat-list, .pm-prod-list {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.pm-cat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: var(--color-bg);
    transition: border-color 0.15s, background-color 0.15s;
}

.pm-cat-row.active {
    border-color: var(--color-primary);
    background: var(--color-primary-surface);
}

.pm-cat-main {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pm-cat-side {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.pm-count {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--color-text-muted);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    padding: 0.125rem 0.4375rem;
    border-radius: 999px;
}

.pm-icnbtn {
    width: 2.125rem;
    height: 2.125rem;
    border: none;
    border-radius: 0.375rem;
    background: transparent;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.15s, color 0.15s;
}

.pm-icnbtn svg {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
}

@media (hover: hover) and (pointer: fine) {
    .pm-icnbtn:hover {
        background: var(--color-primary-light);
        color: var(--color-primary);
    }
}

@media (hover: hover) and (pointer: fine) {
    .pm-icnbtn.danger:hover {
        background: #FEE2E2;
        color: var(--color-danger);
    }
}

.pm-prod-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
}

.pm-prod-info {
    flex: 1;
    min-width: 0;
}

.pm-prod-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 0.1875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pm-prod-meta {
    display: flex;
    align-items: center;
    gap: 0.3125rem;
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    margin-bottom: 0.25rem;
}

.pm-badges {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.pm-badge {
    font-size: 0.625rem;
    font-weight: 700;
    padding: 0.125rem 0.4375rem;
    border-radius: 999px;
}

.pm-badge.on {
    background: #DCFCE7;
    color: #166534;
}

.pm-badge.off {
    background: var(--color-border);
    color: var(--color-text-muted);
}

html[data-theme="dark"] .pm-badge.on {
    background: rgba(22, 163, 74, 0.15);
    color: #4ADE80;
}

.pm-prod-actions {
    display: flex;
    gap: 0.125rem;
    flex-shrink: 0;
}

.pm-fab {
    display: none;
    position: fixed;
    bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    left: 1.25rem;
    z-index: 90;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: none;
    background: var(--color-primary);
    color: #fff;
    font-size: 1.375rem;
    box-shadow: var(--shadow-btn), 0 4px 16px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

.pm-imgbox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3125rem;
    border: 1.5px dashed var(--color-border);
    border-radius: var(--radius-sm);
    padding: 1.125rem;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    margin-bottom: 0.875rem;
    background: var(--color-bg);
    cursor: pointer;
    overflow: hidden;
}

.pm-imgbox img {
    max-width: 100%;
    max-height: 8rem;
    border-radius: var(--radius-sm);
    object-fit: cover;
}

.pm-image-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.pm-switchrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0;
    border-top: 1px solid var(--color-border);
}

.pm-switchrow:first-of-type {
    border-top: none;
}

.pm-switchrow span {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text);
}

.pm-switch {
    position: relative;
    width: 2.375rem;
    height: 1.375rem;
    flex-shrink: 0;
}

.pm-switch input {
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.pm-track {
    position: absolute;
    inset: 0;
    background: var(--color-border);
    border-radius: 999px;
    pointer-events: none;
    transition: background-color 0.15s;
}

.pm-thumb {
    position: absolute;
    top: 0.125rem;
    right: 0.125rem;
    width: 1.125rem;
    height: 1.125rem;
    background: #fff;
    border-radius: 50%;
    pointer-events: none;
    transition: transform 0.15s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.pm-switch input:checked ~ .pm-track {
    background: var(--color-success);
}

.pm-switch input:checked ~ .pm-thumb {
    transform: translateX(-1rem);
}

@media (max-width: 700px) {
    .pm-segtabs {
        display: flex;
    }

    .pm-body {
        display: block;
    }

    .pm-cat-panel, .pm-prod-panel {
        display: none;
    }

    .pm-cat-panel.pm-hide-mobile, .pm-prod-panel.pm-hide-mobile {
        display: none;
    }

    .pm-cat-panel:not(.pm-hide-mobile), .pm-prod-panel:not(.pm-hide-mobile) {
        display: block;
    }

    .pm-panel-head .pm-btn-primary {
        display: none;
    }

    .pm-fab {
        display: flex;
    }
}

@media (min-width: 701px) {
    .pm-body {
        display: grid;
        grid-template-columns: 280px 1fr;
        gap: 1.25rem;
        align-items: start;
    }

    .pm-panel {
        padding: 1.125rem;
    }

    .pm-cat-panel {
        position: sticky;
        top: 1.25rem;
        max-height: calc(100dvh - 2.5rem);
        overflow-y: auto;
    }

    .pm-cat-list {
        gap: 0.5rem;
    }

    .pm-prod-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
        gap: 0.625rem;
    }

    .pm-prod-row {
        align-items: flex-start;
    }
}

/* ========== Scroll FAB ========== */
.scroll-fab {
    position: fixed;
    /* Sits above the fixed bottom bar of the order form. */
    bottom: calc(9.5rem + env(safe-area-inset-bottom, 0px));
    left: 1rem;
    z-index: 40;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: none;
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 2px 10px var(--color-primary-shadow), 0 4px 16px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.6);
    pointer-events: none;
    transition: opacity 0.25s, transform 0.25s, background-color 0.2s;
}

.scroll-fab.visible {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

@media (hover: hover) and (pointer: fine) {
    .scroll-fab:hover {
        background: var(--color-primary-hover);
        box-shadow: 0 4px 14px var(--color-primary-shadow), 0 6px 20px rgba(0, 0, 0, 0.12);
    }
}

.scroll-fab:active {
    transform: scale(0.92);
}

.scroll-fab-icon {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 0.3s ease;
}

.scroll-fab.at-bottom .scroll-fab-icon {
    transform: rotate(180deg);
}

/* ========== EOD settlement ========== */
.eod-list-toolbar {
    display: flex;
    justify-content: flex-end;
}

.eod-list-toolbar .pm-btn {
    text-decoration: none;
}

.eod-divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 0.25rem 0 0.875rem;
}

.eod-section-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: 0.75rem;
}

.amount-optional {
    font-weight: 400;
    color: var(--color-text-muted);
    margin-right: 0.25rem;
}

.amount-field {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-input-bg);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.amount-field:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-glow);
}

.amount-field.has-value {
    background: var(--color-primary-surface);
}

.amount-sign {
    flex: none;
    width: 2.25rem;
    align-self: stretch;
    border: none;
    border-left: 1.5px solid var(--color-border);
    background: transparent;
    border-radius: 0;
    font-family: var(--font-family);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s;
}

@media (hover: hover) and (pointer: fine) {
    .amount-sign:hover {
        background: var(--color-primary-glow);
    }
}

.amount-sign.is-negative {
    color: var(--color-danger);
}


.amount-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 0.6875rem 0.875rem;
    font-family: var(--font-family);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
    text-align: right;
}

.amount-input:focus {
    outline: none;
}

.amount-input::placeholder {
    color: var(--color-text-muted);
    opacity: 0.6;
    font-weight: 400;
}

.amount-suffix {
    padding: 0 0.875rem;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.eod-summary {
    background: var(--color-primary-surface);
    border: 1px solid var(--color-primary-light);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    margin-bottom: 1.125rem;
}

.eod-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    padding: 0.1875rem 0;
}

.eod-summary-value {
    color: var(--color-text);
    font-weight: 600;
}

.eod-summary-negative {
    color: var(--color-danger);
    font-weight: 600;
}

.eod-summary-divider {
    border: none;
    border-top: 1px solid var(--color-primary-light);
    margin: 0.375rem 0;
}

.eod-summary-total {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-text);
}

.eod-summary-total span:last-child {
    color: var(--color-primary);
}

/* ========== Organizational customers ========== */
/* The segmented control the product page uses is a mobile-only affordance there;
   here it is the status filter itself, so it stays on screen at every width. */
.pm-segtabs.oc-segtabs {
    display: flex;
}

.oc-avatar {
    font-size: 0.9375rem;
    flex-shrink: 0;
}

.oc-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.oc-hint {
    font-size: 0.75rem;
    line-height: 1.7;
    color: var(--color-text-muted);
    margin: 0.5rem 0 1.125rem;
}

.oc-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.875rem;
}

.oc-link-btn {
    border: none;
    background: transparent;
    padding: 0.375rem 0;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-primary);
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
    .oc-link-btn:hover {
        text-decoration: underline;
    }
}

.oc-link-danger {
    color: var(--color-danger);
}

/* ========== UI pass 2: shared building blocks ==========
   Pieces the redesigned pages are put together from. Anything that belongs to a
   single shared component lives in that component's .razor.css instead. */

.muted { color: var(--color-text-muted); }
.muted-note { font-size: 0.8125rem; color: var(--color-text-muted); }
.truncate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.no-shrink { flex: none; }
.is-negative { color: var(--color-danger) !important; }
.is-over { color: var(--status-over-fg) !important; }
.icon { flex: none; }

/* Buttons beyond the primary one */
.btn-secondary {
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border-strong);
}

.btn-success { background: #15803D; color: #fff; }
.btn-danger { background: #B91C1C; color: #fff; }

.btn-danger-outline {
    background: var(--color-surface);
    color: #B91C1C;
    border: 1.5px solid #B91C1C;
}

html[data-theme="dark"] .btn-danger-outline { color: #FCA5A5; border-color: #F87171; }

.btn-compact {
    width: auto;
    min-height: 2.75rem;
    padding: 0 0.875rem;
    font-size: 0.8125rem;
    gap: 0.375rem;
    box-shadow: none;
}

.button-pair {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0.5rem;
}

.button-pair-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.text-btn {
    min-height: 2rem;
    padding: 0 0.5rem;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-link);
    cursor: pointer;
}

.icon-btn {
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0.75rem;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
}

.icon-btn-danger { color: var(--color-danger); }

/* Cards */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.875rem;
}

.card-title, .section-heading {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-text);
}

.section-heading { margin-bottom: 0.625rem; }
.card-list { overflow: hidden; }

/* Fields */
.field { display: flex; flex-direction: column; gap: 0.25rem; }

.field-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.field-hint { font-size: 0.75rem; color: var(--color-text-muted); margin-top: 0.25rem; }

.search-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0 0.75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: 0.75rem;
    color: var(--color-text-muted);
}

.search-field:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-glow);
}

.search-field input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--color-text);
}

.search-field input::-webkit-search-cancel-button { display: none; }

.search-clear {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--color-surface-sunken);
    color: var(--color-text-muted);
    cursor: pointer;
}

/* Chips: a horizontal row of filters or tags */
.chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.chip-scroll {
    display: flex;
    gap: 0.375rem;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: -1rem;
    padding-inline: 1rem;
    overscroll-behavior-x: contain;
}

.chip-scroll::-webkit-scrollbar { display: none; }

.chip {
    padding: 0.5rem 0.875rem;
    border-radius: 999px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    font-size: 0.8125rem;
    font-weight: 600;
}

.filter-chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 2.25rem;
    padding: 0 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--color-border-strong);
    background: var(--color-surface);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    cursor: pointer;
}

.filter-chip.active {
    background: var(--color-ink);
    border-color: var(--color-ink);
    color: var(--color-on-ink);
}

.tag-row { display: flex; flex-wrap: wrap; gap: 0.375rem; }

.tag {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 0.375rem;
    background: var(--color-surface-sunken);
}

.tag-strong { font-size: 0.8125rem; font-weight: 700; padding: 0.125rem 0.625rem; }

/* Status badges */
.badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.1875rem 0.625rem;
    border-radius: 999px;
    white-space: nowrap;
}

.badge-sm { font-size: 0.625rem; padding: 0.0625rem 0.5rem; }
.badge-pending { background: var(--status-pending-bg); color: var(--status-pending-fg); }
.badge-approved { background: var(--status-approved-bg); color: var(--status-approved-fg); }
.badge-rejected { background: var(--status-rejected-bg); color: var(--status-rejected-fg); }
.badge-over { background: var(--status-over-bg); color: var(--status-over-fg); }
.badge-custom { background: var(--color-primary-light); color: var(--color-primary); }

/* Segmented control: tabs that share one track */
.segmented {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 0.75rem;
    background: var(--color-surface-sunken);
}

.segmented-btn {
    min-height: 2.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    border: none;
    border-radius: 0.5625rem;
    background: transparent;
    font-family: inherit;
    line-height: 1.3;
    color: var(--color-text-muted);
    cursor: pointer;
}

.segmented-btn.active {
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: 0 1px 3px rgba(45, 27, 20, 0.12);
}

.segmented-label { font-size: 0.75rem; font-weight: 700; }
.segmented-count { font-size: 0.6875rem; }

.segmented-compact { padding: 3px; border-radius: 0.625rem; }

.segmented-compact .segmented-btn {
    min-height: 2.125rem;
    flex-direction: row;
    gap: 0.25rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Choices inside sheets */
.choice-btn {
    min-height: 2.75rem;
    border-radius: 0.75rem;
    border: 1.5px solid var(--color-border-strong);
    background: var(--color-surface);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
}

.choice-btn.active {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary-hover);
}

.option-list { display: flex; flex-direction: column; gap: 0.5rem; }

.option-row, .format-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3rem;
    padding: 0.625rem 0.75rem;
    border: 1.5px solid var(--color-border);
    border-radius: 0.875rem;
    background: var(--color-surface);
    font-family: inherit;
    font-size: 0.9375rem;
    color: var(--color-text);
    text-align: right;
    cursor: pointer;
}

.option-row { justify-content: space-between; }
.format-option { min-height: 4rem; }

.option-row.active, .format-option.active {
    background: var(--color-primary-surface);
    border-color: var(--color-primary);
}

.radio-dot {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    border: 2px solid var(--color-border-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 150ms ease;
}

.radio-dot::after {
    content: "";
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: var(--color-primary);
    opacity: 0;
    transition: opacity 150ms ease;
}

.active > .radio-dot { border-color: var(--color-primary); }
.active > .radio-dot::after { opacity: 1; }

.format-tag {
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.625rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.format-tag-xls { background: var(--status-approved-bg); color: var(--status-approved-fg); }
.format-tag-pdf { background: var(--status-rejected-bg); color: var(--status-rejected-fg); }

.format-text { flex: 1; display: flex; flex-direction: column; gap: 0.125rem; }
.format-text strong { font-size: 0.9375rem; }
.format-text span { font-size: 0.75rem; color: var(--color-text-muted); }

.range-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.range-fields { display: flex; flex-direction: column; gap: 0.75rem; }
.range-field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }

.range-value {
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 0.75rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

/* Small labelled figures, two to a row */
.tile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }

.tile {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.625rem 0.75rem;
    border-radius: 0.75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.ui-sheet .tile { background: var(--color-bg); border-color: transparent; }
.tile-wide { grid-column: 1 / -1; }
.tile-label { font-size: 0.6875rem; color: var(--color-text-muted); }
.tile-value { font-size: 0.875rem; font-weight: 700; }
/* Files attached to an order, opened in a new tab */
.order-attachments { display: flex; flex-direction: column; gap: 0.375rem; margin-top: 0.125rem; }
.order-attachment {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
    padding: 0.5rem 0.625rem;
    border-radius: 0.625rem;
    background: var(--color-surface-sunken);
    color: inherit;
    text-decoration: none;
}
a.order-attachment > :last-child { flex: none; color: var(--color-text-muted); }
.order-attachment.is-unavailable { opacity: 0.6; }
.order-attachment-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    background: var(--color-surface);
    color: var(--color-text-muted);
}
.order-attachment-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.order-attachment-name { font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-attachment-meta { font-size: 0.6875rem; color: var(--color-text-muted); }
@media (hover: hover) { a.order-attachment:hover { background: var(--color-border); } }
.tile-text { font-size: 0.8125rem; line-height: 1.7; white-space: pre-line; overflow-wrap: anywhere; }

.note-box {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.75rem;
    background: #FFF8EB;
    border: 1px solid #F5E1B8;
    font-size: 0.8125rem;
    color: #78350F;
    flex-direction: row;
}

html[data-theme="dark"] .note-box { background: #2A2010; border-color: #4A3A18; color: #FCD34D; }

.summary-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.875rem;
}

.summary-line:last-child { border-bottom: none; }
.summary-line-values { display: flex; align-items: baseline; gap: 0.75rem; font-size: 0.8125rem; }
.summary-line-total { background: var(--color-primary-surface); font-weight: 700; }
.summary-line-total strong { color: var(--color-primary); }

/* Shared skeleton block; SkeletonList builds whole placeholder cards from it. */
.skel {
    display: block;
    border-radius: 0.375rem;
    background: linear-gradient(90deg, var(--color-surface-sunken) 0%, var(--color-border) 50%, var(--color-surface-sunken) 100%);
    background-size: 200% 100%;
    animation: skel-shimmer 1.4s ease-in-out infinite;
}

.skel-pill { border-radius: 999px; }

@keyframes skel-shimmer {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .skel { animation: none; }
}

/* ========== Lists ========== */
.list-page { display: flex; flex-direction: column; gap: 0.625rem; }

.result-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 2rem;
}

.result-head h2 { font-size: 0.8125rem; font-weight: 700; color: var(--color-text-muted); }
.result-line { font-size: 0.75rem; color: var(--color-text-muted); }

.list-card {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.875rem;
    color: var(--color-text);
    text-decoration: none;
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
    .list-card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-card); }
}

.list-card-top { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.list-card-title { font-size: 0.9375rem; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-card-id { font-size: 0.75rem; color: var(--color-text-muted); flex: 1; white-space: nowrap; }
.list-card-days { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; font-size: 0.75rem; }

.list-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* Settlement rows: day, branch and the balance with its direction */
.settlement-card { flex-direction: row; align-items: center; gap: 0.75rem; padding: 0.75rem; }

.settlement-day {
    flex: none;
    width: 3.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-inline-end: 1px solid var(--color-border);
}

.settlement-day strong { font-size: 1.25rem; line-height: 1.1; }
.settlement-day span { font-size: 0.6875rem; color: var(--color-text-muted); }
.settlement-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; font-size: 0.75rem; }
.settlement-title { display: flex; align-items: center; gap: 0.375rem; min-width: 0; font-size: 0.875rem; }
.settlement-balance { flex: none; display: flex; flex-direction: column; align-items: flex-end; font-size: 0.6875rem; }
.settlement-balance strong { font-size: 0.875rem; }
.settlement-card .icon-btn { margin-inline-start: -0.25rem; }

/* ========== Home ========== */
.home-content { display: flex; flex-direction: column; gap: 1.25rem; }
.home-greeting h1 { font-size: 1.375rem; font-weight: 800; }
.home-greeting p { font-size: 0.8125rem; color: var(--color-text-muted); margin-top: 0.125rem; }
.home-tasks { padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }

.task-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.75rem;
    padding: 0.75rem;
    border-radius: 0.75rem;
    background: var(--color-primary-light);
    color: var(--color-text);
    text-decoration: none;
}

.task-link-icon {
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    background: var(--color-surface);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.task-link-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.task-link-text strong { font-size: 0.875rem; }
.task-link-text span { font-size: 0.75rem; color: var(--color-text-muted); }

.quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; }

.quick-action {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-height: 6rem;
    padding: 0.875rem;
    border-radius: 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    text-decoration: none;
}

.quick-action .icon { color: var(--color-primary); }
.quick-action-label { font-size: 0.9375rem; }
.quick-action-hint { font-size: 0.75rem; color: var(--color-text-muted); }
.quick-action-primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.quick-action-primary .icon, .quick-action-primary .quick-action-hint { color: #fff; }
.quick-action-primary .quick-action-hint { opacity: 0.9; }

@media (hover: hover) and (pointer: fine) {
    .quick-action:not(.quick-action-primary):hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-card); }
}

@media (min-width: 701px) {
    .quick-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ========== New order ========== */
.toolbar-stack { display: flex; flex-direction: column; gap: 0.625rem; }
.order-form { display: flex; flex-direction: column; gap: 0.75rem; }
.product-group { display: flex; flex-direction: column; gap: 0.5rem; }

.group-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.group-heading h2 { font-size: 0.8125rem; font-weight: 700; color: var(--color-text-muted); }
.group-heading span { font-size: 0.6875rem; color: var(--color-text-muted); }

.progress-meta {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.progress-track {
    height: 6px;
    border-radius: 999px;
    background: var(--color-surface-sunken);
    overflow: hidden;
}

/* Grows with transform rather than width, so it skips layout on slow phones. */
.progress-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--color-primary);
    transform-origin: right;
    transition: transform 200ms var(--ease-out);
}

/* ========== Order detail ========== */
.detail-page { display: flex; flex-direction: column; gap: 0.75rem; }
.items-table { overflow: hidden; }

.items-table-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
}

.items-table-head h2 { font-size: 0.9375rem; font-weight: 700; }
.items-table-head span { font-size: 0.75rem; color: var(--color-text-muted); }

.items-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 4rem 4rem;
    align-items: center;
    gap: 0.25rem;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.875rem;
}

.items-table.is-editable .items-row { grid-template-columns: minmax(0, 1fr) 4rem 4rem 2.5rem; }
.items-row:last-child { border-bottom: none; }

.items-row-labels {
    padding-block: 0.375rem;
    background: var(--color-surface-sunken);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--color-text-muted);
}

.items-row > :not(:first-child) { text-align: center; }

.items-category {
    padding: 0.625rem 0.75rem 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-link);
}

.items-name {
    border: none;
    background: none;
    padding: 0;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    text-align: right;
    min-width: 0;
}

.items-product { display: flex; align-items: center; gap: 0.625rem; min-width: 0; }
.items-product .detail-thumb { padding: 0; color: var(--color-text-muted); }
.items-product .detail-thumb.has-image { cursor: zoom-in; }
.items-product .detail-thumb:disabled { cursor: default; }
.items-stock { color: var(--color-text-muted); }
.items-order { font-size: 0.9375rem; font-weight: 800; }

.items-input {
    width: 100%;
    min-height: 2.5rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 0.5rem;
    background: var(--color-input-bg);
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--color-text);
    text-align: center;
}

.items-input-order { border-color: var(--color-primary); font-weight: 700; }

.items-remove {
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--color-danger);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* ========== Settlement form ========== */
.eod-summary-card {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.875rem;
    margin-bottom: 0.75rem;
    border-radius: 1rem;
    background: #2D1B14;
    color: #fff;
}

html[data-theme="dark"] .eod-summary-card { background: #3A261E; }

.eod-summary-top { display: flex; justify-content: space-between; align-items: center; }
.eod-summary-caption { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; opacity: 0.8; }
.eod-summary-amount { font-size: 1.625rem; font-weight: 800; letter-spacing: -0.5px; }
.eod-summary-amount small { font-size: 0.8125rem; font-weight: 500; opacity: 0.8; }

.eod-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    padding-top: 0.625rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 0.6875rem;
}

.eod-summary-grid span { display: block; opacity: 0.7; }
.eod-summary-grid strong { font-size: 0.8125rem; display: inline-block; }
.eod-summary-grid .is-negative { color: #FCA5A5 !important; }
.eod-summary-note { font-size: 0.6875rem; opacity: 0.65; }

.form-section {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}

.form-section-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.form-section-head h2 { font-size: 0.875rem; font-weight: 700; }
.form-section-head span { font-size: 0.6875rem; color: var(--color-text-muted); font-weight: 700; }
.form-section-head span.is-complete { color: var(--status-approved-fg); }
.form-section-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }

.amount-row { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.amount-row-inline { flex-direction: row; align-items: center; gap: 0.625rem; }
.amount-row-inline > .field-label { flex: none; width: 5.75rem; font-size: 0.8125rem; font-weight: 500; color: var(--color-text); }
.amount-row-inline > .amount-field { flex: 1; min-width: 0; }
.amount-row-inline .amount-suffix { display: none; }
.amount-field { min-height: 2.75rem; border-width: 1px; border-color: var(--color-border-strong); border-radius: 0.625rem; }
.amount-sign { border-left-width: 1px; border-left-color: var(--color-border-strong); width: 2.5rem; }
.amount-input { text-align: left; font-weight: 700; }

.total-bar { display: flex; align-items: center; gap: 0.75rem; }
.total-bar .btn { flex: 1; }
.total-bar-figure { flex: none; display: flex; flex-direction: column; }
.total-bar-figure span { font-size: 0.6875rem; color: var(--color-text-muted); }
.total-bar-figure strong { font-size: 1rem; }
.total-bar-figure small { font-size: 0.6875rem; font-weight: 500; color: var(--color-text-muted); }

/* Inside a bottom sheet the body scrolls and would clip a floating calendar,
   so the calendar opens inline, below its input. */
.ui-sheet-body .pmd-dropdown {
    position: static;
    width: 100%;
    max-width: none;
    margin-top: 0.375rem;
}

.ui-sheet-body .pmd-overlay {
    display: none;
}