@import '_content/Blazored.Toast/Blazored.Toast.bundle.scp.css';
@import '_content/ServiceManagement.BlazorUI.Admin/ServiceManagement.BlazorUI.Admin.wmbxqdhxni.bundle.scp.css';
@import '_content/ServiceManagement.BlazorUI.Core/ServiceManagement.BlazorUI.Core.8vnch9wffl.bundle.scp.css';

/* /Pages/AssetScan.razor.rz.scp.css */
.asset-scan-page[b-c6uex2hltl] {
    max-width: 800px;
}

.asset-scan-language-bar[b-c6uex2hltl] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.75rem;
}

.asset-scan-not-found-icon[b-c6uex2hltl] {
    font-size: 3rem;
}

/* Offline copy banner — sits above the hero card at the same width */
.asset-scan-offline-banner[b-c6uex2hltl] {
    margin-bottom: 1rem;
}

/* Hero card */
.asset-scan-hero-card[b-c6uex2hltl] {
    border-top: 4px solid #0d6efd;
}

.asset-scan-hero-image[b-c6uex2hltl] {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border: 1px solid #dee2e6;
}

.asset-scan-hero-placeholder[b-c6uex2hltl] {
    width: 180px;
    height: 180px;
    border: 1px dashed #dee2e6;
}

.asset-scan-hero-placeholder i[b-c6uex2hltl] {
    font-size: 4rem;
}

.asset-scan-hero-name[b-c6uex2hltl] {
    font-weight: 600;
}

.asset-scan-hero-brand[b-c6uex2hltl] {
    font-size: 0.95rem;
}

/* Info grid */
.asset-scan-info-value[b-c6uex2hltl] {
    word-break: break-word;
}

/* Custodian */
.asset-scan-custodian-avatar[b-c6uex2hltl] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f3f5;
    border-radius: 50%;
    color: #6c757d;
    flex-shrink: 0;
}

.asset-scan-custodian-avatar i[b-c6uex2hltl] {
    font-size: 2rem;
    line-height: 1;
}

.asset-scan-custodian-name[b-c6uex2hltl] {
    font-size: 1.05rem;
}

/* Quick action buttons (kept) */
.asset-scan-action-btn[b-c6uex2hltl] {
    border: 1px solid #dee2e6;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.25;
}

.asset-scan-action-icon[b-c6uex2hltl] {
    display: block;
    width: 32px;
    height: 32px;
    object-fit: contain;
    margin: 0 auto 0.25rem auto;
}

.asset-scan-action-placeholder[b-c6uex2hltl] {
    font-size: 1.5rem;
}

/* Service history stat cards */
.asset-scan-stat-card[b-c6uex2hltl] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    background: #ffffff;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    text-align: left;
    width: 100%;
}

.asset-scan-stat-card:hover[b-c6uex2hltl] {
    transform: translateY(-2px);
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.08);
}

.asset-scan-stat-icon[b-c6uex2hltl] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.asset-scan-stat-content[b-c6uex2hltl] {
    flex-grow: 1;
    min-width: 0;
}

.asset-scan-stat-value[b-c6uex2hltl] {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
}

.asset-scan-stat-label[b-c6uex2hltl] {
    font-size: 0.85rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.asset-scan-stat-chevron[b-c6uex2hltl] {
    color: #adb5bd;
    flex-shrink: 0;
}

/* Stat colour variants */
.asset-scan-stat-total[b-c6uex2hltl] {
    border-color: #0d6efd;
    background: linear-gradient(135deg, #e7f1ff 0%, #ffffff 100%);
}

.asset-scan-stat-total .asset-scan-stat-icon[b-c6uex2hltl] {
    background: #0d6efd;
    color: #ffffff;
}

.asset-scan-stat-total .asset-scan-stat-value[b-c6uex2hltl] {
    color: #0d6efd;
}

.asset-scan-stat-maintenance .asset-scan-stat-icon[b-c6uex2hltl] {
    background: #fff3cd;
    color: #b58900;
}

.asset-scan-stat-maintenance .asset-scan-stat-value[b-c6uex2hltl] {
    color: #b58900;
}

.asset-scan-stat-inspections .asset-scan-stat-icon[b-c6uex2hltl] {
    background: #cfe2ff;
    color: #0d6efd;
}

.asset-scan-stat-inspections .asset-scan-stat-value[b-c6uex2hltl] {
    color: #0d6efd;
}

.asset-scan-stat-damage .asset-scan-stat-icon[b-c6uex2hltl] {
    background: #f8d7da;
    color: #dc3545;
}

.asset-scan-stat-damage .asset-scan-stat-value[b-c6uex2hltl] {
    color: #dc3545;
}

.asset-scan-stat-movement .asset-scan-stat-icon[b-c6uex2hltl] {
    background: #d1ecf1;
    color: #0c8599;
}

.asset-scan-stat-movement .asset-scan-stat-value[b-c6uex2hltl] {
    color: #0c8599;
}

.asset-scan-stat-other .asset-scan-stat-icon[b-c6uex2hltl] {
    background: #e9ecef;
    color: #495057;
}

.asset-scan-stat-other .asset-scan-stat-value[b-c6uex2hltl] {
    color: #495057;
}

/* History modal */
.asset-scan-history-modal[b-c6uex2hltl] {
    background-color: rgba(0, 0, 0, 0.5);
}

.asset-scan-history-scroll[b-c6uex2hltl] {
    overflow-y: hidden;
}

.asset-scan-history-table[b-c6uex2hltl] {
    min-width: 760px;
}

.asset-scan-history-date[b-c6uex2hltl] {
    white-space: nowrap;
}

.asset-scan-history-desc[b-c6uex2hltl] {
    min-width: 180px;
    max-width: 280px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.asset-scan-empty-icon[b-c6uex2hltl] {
    font-size: 3rem;
    color: #adb5bd;
}

/* Password modal (kept) */
.asset-scan-password-modal[b-c6uex2hltl] {
    background-color: rgba(0, 0, 0, 0.5);
}

/* QR install confirmation modal */
.asset-scan-qr-confirm-modal[b-c6uex2hltl] {
    background-color: rgba(0, 0, 0, 0.5);
}

.asset-scan-qr-confirm-thumb[b-c6uex2hltl] {
    width: 64px;
    height: 64px;
    object-fit: cover;
    flex-shrink: 0;
}

.asset-scan-qr-confirm-thumb i[b-c6uex2hltl] {
    font-size: 1.75rem;
}

/* ===== Dark Mode =====
   Image thumbnails keep light backgrounds so any uploaded asset photo
   stays visible, matching the Asset QR Code popup approach. Chrome and
   colored stat cards switch to dark-tinted equivalents. */
@media (prefers-color-scheme: dark) {
    .asset-scan-hero-image[b-c6uex2hltl] {
        border-color: #334155 !important;
    }

    .asset-scan-hero-placeholder[b-c6uex2hltl] {
        background-color: #1e1e2e !important;
        border-color: #475569 !important;
        color: #64748b !important;
    }

    .asset-scan-custodian-avatar[b-c6uex2hltl] {
        background: #334155 !important;
        color: #cbd5e1 !important;
    }

    .asset-scan-action-btn[b-c6uex2hltl] {
        border-color: #334155 !important;
    }

    .asset-scan-stat-card[b-c6uex2hltl] {
        background: #1e1e2e !important;
        border-color: #334155 !important;
    }

    .asset-scan-stat-card:hover[b-c6uex2hltl] {
        box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.4) !important;
    }

    .asset-scan-stat-label[b-c6uex2hltl] {
        color: #94a3b8 !important;
    }

    .asset-scan-stat-chevron[b-c6uex2hltl] {
        color: #64748b !important;
    }

    /* Stat colour variants — keep accent colour, tint the surface */
    .asset-scan-stat-total[b-c6uex2hltl] {
        border-color: #3b82f6 !important;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.18) 0%, #1e1e2e 100%) !important;
    }

    .asset-scan-stat-total .asset-scan-stat-icon[b-c6uex2hltl] {
        background: #3b82f6 !important;
        color: #ffffff !important;
    }

    .asset-scan-stat-total .asset-scan-stat-value[b-c6uex2hltl] {
        color: #60a5fa !important;
    }

    .asset-scan-stat-maintenance .asset-scan-stat-icon[b-c6uex2hltl] {
        background: rgba(245, 158, 11, 0.2) !important;
        color: #fbbf24 !important;
    }

    .asset-scan-stat-maintenance .asset-scan-stat-value[b-c6uex2hltl] {
        color: #fbbf24 !important;
    }

    .asset-scan-stat-inspections .asset-scan-stat-icon[b-c6uex2hltl] {
        background: rgba(59, 130, 246, 0.2) !important;
        color: #60a5fa !important;
    }

    .asset-scan-stat-inspections .asset-scan-stat-value[b-c6uex2hltl] {
        color: #60a5fa !important;
    }

    .asset-scan-stat-damage .asset-scan-stat-icon[b-c6uex2hltl] {
        background: rgba(220, 53, 69, 0.2) !important;
        color: #f87171 !important;
    }

    .asset-scan-stat-damage .asset-scan-stat-value[b-c6uex2hltl] {
        color: #f87171 !important;
    }

    .asset-scan-stat-movement .asset-scan-stat-icon[b-c6uex2hltl] {
        background: rgba(12, 133, 153, 0.2) !important;
        color: #22d3ee !important;
    }

    .asset-scan-stat-movement .asset-scan-stat-value[b-c6uex2hltl] {
        color: #22d3ee !important;
    }

    .asset-scan-stat-other .asset-scan-stat-icon[b-c6uex2hltl] {
        background: rgba(148, 163, 184, 0.18) !important;
        color: #cbd5e1 !important;
    }

    .asset-scan-stat-other .asset-scan-stat-value[b-c6uex2hltl] {
        color: #cbd5e1 !important;
    }

    .asset-scan-empty-icon[b-c6uex2hltl] {
        color: #475569 !important;
    }
}
/* /Pages/Assets/LiveAssetMap.razor.rz.scp.css */
/* Page chrome for the Live Asset Map. Marker, accuracy-circle and trail styling
   lives in wwwroot/css/app.css instead — Leaflet creates that DOM from JavaScript,
   so it never receives the scoped-CSS attribute these rules depend on. */

.tracking-tile-icon[b-5vs88uclrf] {
    font-size: 1.75rem;
}

.tracking-map[b-5vs88uclrf] {
    width: 100%;
    height: 620px;
    border-radius: 0.375rem;
}

.tracking-list-card[b-5vs88uclrf] {
    height: 100%;
    max-height: 700px;
}

.tracking-list[b-5vs88uclrf] {
    overflow-y: auto;
    max-height: 640px;
}

.tracking-list-item[b-5vs88uclrf] {
    cursor: pointer;
    text-align: start;
    border-inline-start: 3px solid transparent;
}

.tracking-list-item:hover[b-5vs88uclrf] {
    border-inline-start-color: var(--primary-color);
}

.tracking-list-main[b-5vs88uclrf] {
    min-width: 0;
}

.tracking-list-meta[b-5vs88uclrf] {
    white-space: nowrap;
}

.tracking-area[b-5vs88uclrf] {
    color: var(--text-secondary);
}

@media (max-width: 991.98px) {
    .tracking-map[b-5vs88uclrf] {
        height: 380px;
    }

    .tracking-list-card[b-5vs88uclrf] {
        max-height: none;
    }

    .tracking-list[b-5vs88uclrf] {
        max-height: 320px;
    }
}
/* /Pages/Dashboards/AssetDashboard.razor.rz.scp.css */
.kpi-icon[b-qxjm4eij7q] {
    font-size: 1.5rem;
}

.drill-card[b-qxjm4eij7q] {
    cursor: pointer;
}

.drill-icon[b-qxjm4eij7q] {
    font-size: 1.5rem;
}
/* /Pages/Dashboards/AssetIntelligenceDashboard.razor.rz.scp.css */
/* ---------- Page header ---------- */

.aid-toolbar[b-mt0yuo5r78] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.aid-edit-hint[b-mt0yuo5r78] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 10px;
}

.aid-filter-bar[b-mt0yuo5r78] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.aid-filter-icon[b-mt0yuo5r78] {
    color: var(--text-secondary, #64748b);
}

/* ---------- Widget grid ---------- */

.aid-grid[b-mt0yuo5r78] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
}

.aid-span-3[b-mt0yuo5r78] {
    grid-column: span 3;
}

.aid-span-4[b-mt0yuo5r78] {
    grid-column: span 4;
}

.aid-span-6[b-mt0yuo5r78] {
    grid-column: span 6;
}

.aid-span-8[b-mt0yuo5r78] {
    grid-column: span 8;
}

.aid-span-12[b-mt0yuo5r78] {
    grid-column: span 12;
}

@media (max-width: 1199.98px) {
    .aid-span-3[b-mt0yuo5r78],
    .aid-span-4[b-mt0yuo5r78] {
        grid-column: span 6;
    }

    .aid-span-8[b-mt0yuo5r78] {
        grid-column: span 12;
    }
}

@media (max-width: 767.98px) {
    .aid-span-3[b-mt0yuo5r78],
    .aid-span-4[b-mt0yuo5r78],
    .aid-span-6[b-mt0yuo5r78],
    .aid-span-8[b-mt0yuo5r78] {
        grid-column: span 12;
    }
}

/* ---------- Widget shell ---------- */

.aid-widget[b-mt0yuo5r78] {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--bs-border-color, #e2e8f0);
    border-radius: 12px;
    padding: 1.1rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.aid-widget-editing[b-mt0yuo5r78] {
    outline: 2px dashed rgba(37, 99, 235, 0.45);
    outline-offset: 2px;
    cursor: grab;
}

.aid-drop-target[b-mt0yuo5r78] {
    outline: 2px solid var(--primary-color, #2563eb);
    outline-offset: 2px;
}

.aid-widget-head[b-mt0yuo5r78] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
}

.aid-widget-title[b-mt0yuo5r78] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
}

.aid-widget-title-icon[b-mt0yuo5r78] {
    color: var(--primary-color, #2563eb);
}

.aid-grip[b-mt0yuo5r78] {
    color: var(--text-secondary, #64748b);
    cursor: grab;
}

.aid-widget-body[b-mt0yuo5r78] {
    flex: 1;
    min-width: 0;
}

/* ---------- Edit-mode tools ---------- */

.aid-widget-tools[b-mt0yuo5r78] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.aid-size-group[b-mt0yuo5r78] {
    display: inline-flex;
    border: 1px solid var(--bs-border-color, #e2e8f0);
    border-radius: 8px;
    overflow: hidden;
}

.aid-size-btn[b-mt0yuo5r78] {
    background: transparent;
    border: none;
    padding: 0.25rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.aid-size-btn + .aid-size-btn[b-mt0yuo5r78] {
    border-inline-start: 1px solid var(--bs-border-color, #e2e8f0);
}

.aid-size-btn:hover[b-mt0yuo5r78] {
    color: var(--primary-color, #2563eb);
}

.aid-size-btn.active[b-mt0yuo5r78] {
    background: var(--primary-color, #2563eb);
    color: #ffffff;
}

.aid-tool-btn[b-mt0yuo5r78] {
    background: transparent;
    border: 1px solid var(--bs-border-color, #e2e8f0);
    border-radius: 8px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary, #64748b);
    font-size: 0.8rem;
    cursor: pointer;
    transition: border-color 0.12s, color 0.12s;
}

.aid-tool-btn:hover:not(:disabled)[b-mt0yuo5r78] {
    border-color: var(--primary-color, #2563eb);
    color: var(--primary-color, #2563eb);
}

.aid-tool-btn:disabled[b-mt0yuo5r78] {
    opacity: 0.35;
    cursor: not-allowed;
}

.aid-tool-btn-danger:hover:not(:disabled)[b-mt0yuo5r78] {
    border-color: var(--danger-color, #ef4444);
    color: var(--danger-color, #ef4444);
}

/* ---------- KPI cards ---------- */

.aid-kpi-grid[b-mt0yuo5r78] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
}

.aid-kpi-card[b-mt0yuo5r78] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    background: var(--bs-body-bg, #ffffff);
    border: 1px solid var(--bs-border-color, #e2e8f0);
    border-radius: 10px;
    padding: 0.9rem 1rem;
    min-width: 0;
}

.aid-kpi-label[b-mt0yuo5r78] {
    font-size: 0.8rem;
    color: var(--text-secondary, #64748b);
    margin-bottom: 0.35rem;
}

.aid-kpi-value[b-mt0yuo5r78] {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-primary, #1e293b);
    white-space: nowrap;
}

.aid-kpi-icon[b-mt0yuo5r78] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.aid-tint-blue[b-mt0yuo5r78] {
    background: rgba(37, 99, 235, 0.12);
    color: #2563eb;
}

.aid-tint-teal[b-mt0yuo5r78] {
    background: rgba(32, 201, 151, 0.14);
    color: #149570;
}

.aid-tint-green[b-mt0yuo5r78] {
    background: rgba(16, 185, 129, 0.12);
    color: #0e9f6e;
}

.aid-tint-orange[b-mt0yuo5r78] {
    background: rgba(253, 126, 20, 0.12);
    color: #fd7e14;
}

.aid-tint-red[b-mt0yuo5r78] {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.aid-tint-amber[b-mt0yuo5r78] {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
}

.aid-tint-cyan[b-mt0yuo5r78] {
    background: rgba(6, 182, 212, 0.12);
    color: #0891b2;
}

/* ---------- Vertical bar charts ---------- */

.aid-chart-legend[b-mt0yuo5r78] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-bottom: 0.6rem;
    font-size: 0.78rem;
    color: var(--text-secondary, #64748b);
    flex-wrap: wrap;
}

.aid-chart-legend span[b-mt0yuo5r78] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.aid-swatch[b-mt0yuo5r78] {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
    flex-shrink: 0;
}

.aid-bar-chart[b-mt0yuo5r78] {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    height: 230px;
    background-image: repeating-linear-gradient(0deg, var(--bs-border-color, #e2e8f0) 0, var(--bs-border-color, #e2e8f0) 1px, transparent 1px, transparent 25%);
    background-position: top;
}

.aid-bar-col[b-mt0yuo5r78] {
    flex: 1;
    display: flex;
    align-items: flex-end;
    min-width: 0;
}

.aid-bar-pair[b-mt0yuo5r78] {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    width: 100%;
    height: 100%;
}

.aid-bar[b-mt0yuo5r78] {
    width: 18px;
    border-radius: 4px 4px 2px 2px;
    transition: opacity 0.15s;
}

.aid-bar-col:hover .aid-bar[b-mt0yuo5r78] {
    opacity: 0.8;
}

.aid-bar-wide[b-mt0yuo5r78] {
    width: 55%;
}

.aid-bar-labels[b-mt0yuo5r78] {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.aid-bar-label[b-mt0yuo5r78] {
    flex: 1;
    text-align: center;
    font-size: 0.7rem;
    color: var(--text-secondary, #64748b);
    line-height: 1.25;
    word-break: break-word;
    min-width: 0;
}

.aid-stack-col[b-mt0yuo5r78] {
    width: 55%;
    margin: 0 auto;
    align-self: flex-end;
    display: flex;
    flex-direction: column-reverse;
    border-radius: 4px 4px 2px 2px;
    overflow: hidden;
}

.aid-stack-seg[b-mt0yuo5r78] {
    width: 100%;
}

/* ---------- Donuts ---------- */

.aid-donut-wrap[b-mt0yuo5r78] {
    display: flex;
    justify-content: center;
    padding: 0.5rem 0;
}

.aid-donut[b-mt0yuo5r78] {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    position: relative;
}

.aid-donut-hole[b-mt0yuo5r78] {
    position: absolute;
    inset: 20%;
    background: var(--card-bg, #ffffff);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px var(--bs-border-color, #e2e8f0);
}

.aid-donut-value[b-mt0yuo5r78] {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
}

.aid-donut-caption[b-mt0yuo5r78] {
    font-size: 0.68rem;
    color: var(--text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.2rem;
}

.aid-legend[b-mt0yuo5r78] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-top: 0.75rem;
}

.aid-legend-row[b-mt0yuo5r78] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.82rem;
    padding: 0.25rem 0.4rem;
    border-radius: 6px;
}

.aid-legend-row:hover[b-mt0yuo5r78] {
    background: var(--bs-gray-100, #f1f5f9);
}

.aid-legend-name[b-mt0yuo5r78] {
    flex: 1;
    color: var(--text-secondary, #64748b);
    font-weight: 500;
}

.aid-legend-count[b-mt0yuo5r78] {
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    font-variant-numeric: tabular-nums;
}

.aid-legend-pct[b-mt0yuo5r78] {
    color: var(--text-secondary, #64748b);
    font-size: 0.75rem;
    width: 40px;
    text-align: end;
    font-variant-numeric: tabular-nums;
}

/* ---------- Horizontal bars ---------- */

.aid-hbar-list[b-mt0yuo5r78] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-top: 0.25rem;
}

.aid-hbar-top[b-mt0yuo5r78] {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.82rem;
    margin-bottom: 0.35rem;
}

.aid-hbar-name[b-mt0yuo5r78] {
    color: var(--text-primary, #1e293b);
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aid-hbar-count[b-mt0yuo5r78] {
    color: var(--text-secondary, #64748b);
    font-weight: 600;
    font-size: 0.78rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.aid-hbar-track[b-mt0yuo5r78] {
    height: 9px;
    background: var(--bs-gray-200, #e2e8f0);
    border-radius: 5px;
    overflow: hidden;
}

.aid-hbar-fill[b-mt0yuo5r78] {
    height: 100%;
    border-radius: 5px;
    transition: width 0.3s;
}

/* ---------- Category table ---------- */

.aid-table thead th[b-mt0yuo5r78] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary, #64748b);
    font-weight: 600;
    white-space: nowrap;
    user-select: none;
    background: var(--bs-gray-100, #f8fafc);
}

.aid-table thead th[role="button"]:hover[b-mt0yuo5r78] {
    color: var(--primary-color, #2563eb);
}

.aid-table tbody td[b-mt0yuo5r78] {
    vertical-align: middle;
}

.aid-sort-icon[b-mt0yuo5r78] {
    font-size: 0.6rem;
    color: var(--primary-color, #2563eb);
}

.aid-cat-name[b-mt0yuo5r78] {
    font-weight: 600;
}

.aid-num[b-mt0yuo5r78] {
    font-variant-numeric: tabular-nums;
}

.aid-text-green[b-mt0yuo5r78] {
    color: #0e9f6e;
}

.aid-text-orange[b-mt0yuo5r78] {
    color: #fd7e14;
}

.aid-text-red[b-mt0yuo5r78] {
    color: #ef4444;
}

.aid-share-cell[b-mt0yuo5r78] {
    white-space: nowrap;
}

.aid-mini-track[b-mt0yuo5r78] {
    width: 64px;
    height: 5px;
    background: var(--bs-gray-200, #e2e8f0);
    border-radius: 3px;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    margin-inline-start: 8px;
}

.aid-mini-fill[b-mt0yuo5r78] {
    height: 100%;
    background: var(--primary-color, #2563eb);
    border-radius: 3px;
    display: block;
}

/* ---------- Repeat-damage stubs ---------- */

.aid-stub-head[b-mt0yuo5r78] {
    display: grid;
    grid-template-columns: 44px 1fr 90px 110px;
    gap: 0.85rem;
    padding: 0 1rem;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary, #64748b);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.aid-stub-list[b-mt0yuo5r78] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.aid-stub[b-mt0yuo5r78] {
    display: grid;
    grid-template-columns: 44px 1fr 90px 110px;
    align-items: center;
    gap: 0.85rem;
    background: var(--bs-gray-100, #f8fafc);
    border: 1px solid var(--bs-border-color, #e9eef4);
    border-radius: 8px;
    padding: 0.7rem 1rem;
    font-size: 0.82rem;
    position: relative;
}

.aid-stub[b-mt0yuo5r78]::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 2px;
    background: var(--danger-color, #ef4444);
}

.aid-stub-rank[b-mt0yuo5r78] {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-secondary, #94a3b8);
    font-variant-numeric: tabular-nums;
}

.aid-stub-name[b-mt0yuo5r78] {
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    display: block;
}

.aid-stub-id[b-mt0yuo5r78] {
    display: block;
    font-size: 0.7rem;
    color: var(--text-secondary, #94a3b8);
    margin-top: 2px;
}

.aid-stub-count[b-mt0yuo5r78] {
    font-weight: 700;
    color: var(--danger-color, #ef4444);
    background: rgba(239, 68, 68, 0.1);
    border-radius: 6px;
    padding: 0.3rem 0;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.aid-stub-date[b-mt0yuo5r78] {
    color: var(--text-secondary, #94a3b8);
    font-size: 0.75rem;
    text-align: end;
}

@media (max-width: 767.98px) {
    .aid-stub-head[b-mt0yuo5r78],
    .aid-stub[b-mt0yuo5r78] {
        grid-template-columns: 30px 1fr 70px;
    }

    .aid-stub-date[b-mt0yuo5r78],
    .aid-stub-head span:last-child[b-mt0yuo5r78] {
        display: none;
    }
}

/* ---------- Empty state ---------- */

.aid-empty[b-mt0yuo5r78] {
    color: var(--text-secondary, #94a3b8);
    font-size: 0.85rem;
    text-align: center;
    padding: 1.5rem 0;
    margin: 0;
}

/* ---------- Add-widget modal ---------- */

.aid-modal-backdrop[b-mt0yuo5r78] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 1rem;
}

.aid-modal[b-mt0yuo5r78] {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--bs-border-color, #e2e8f0);
    border-radius: 14px;
    width: min(560px, 100%);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
}

.aid-modal-head[b-mt0yuo5r78] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--bs-border-color, #e2e8f0);
}

.aid-modal-body[b-mt0yuo5r78] {
    padding: 0.75rem 1.25rem 1.25rem;
    overflow-y: auto;
}

.aid-add-row[b-mt0yuo5r78] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--bs-border-color, #eef2f7);
}

.aid-add-row:last-child[b-mt0yuo5r78] {
    border-bottom: none;
}

.aid-add-icon[b-mt0yuo5r78] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(37, 99, 235, 0.1);
    color: var(--primary-color, #2563eb);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.aid-add-text[b-mt0yuo5r78] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.aid-add-title[b-mt0yuo5r78] {
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    font-size: 0.88rem;
}

.aid-add-desc[b-mt0yuo5r78] {
    color: var(--text-secondary, #64748b);
    font-size: 0.76rem;
}

/* ---------- Toast ---------- */

.aid-toast[b-mt0yuo5r78] {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--primary-color, #2563eb);
    color: var(--text-primary, #1e293b);
    padding: 0.6rem 1.1rem;
    border-radius: 8px;
    font-size: 0.82rem;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
    opacity: 0;
    pointer-events: none;
    transition: all 0.25s;
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.aid-toast.show[b-mt0yuo5r78] {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.aid-toast-dot[b-mt0yuo5r78] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary-color, #2563eb);
    flex-shrink: 0;
}

/* ---------- Drill-down affordances ---------- */

.aid-clickable[b-mt0yuo5r78] {
    cursor: pointer;
}

.aid-kpi-card.aid-clickable[b-mt0yuo5r78] {
    transition: border-color 0.12s, box-shadow 0.12s;
}

.aid-kpi-card.aid-clickable:hover[b-mt0yuo5r78] {
    border-color: var(--primary-color, #2563eb);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.12);
}

.aid-hbar-row.aid-clickable:hover .aid-hbar-fill[b-mt0yuo5r78] {
    filter: brightness(1.08);
}

tr.aid-clickable:hover td[b-mt0yuo5r78] {
    background: var(--bs-gray-100, #f1f5f9);
}

.aid-stub.aid-clickable[b-mt0yuo5r78] {
    transition: border-color 0.12s, transform 0.12s;
}

.aid-stub.aid-clickable:hover[b-mt0yuo5r78] {
    border-color: var(--primary-color, #2563eb);
    transform: translateY(-1px);
}

/* ---------- Location explorer ---------- */

.aid-location-card[b-mt0yuo5r78] {
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.12s;
}

.aid-location-card:hover[b-mt0yuo5r78] {
    transform: translateY(-2px);
}

.aid-location-icon[b-mt0yuo5r78] {
    font-size: 1.5rem;
}

.aid-site-search[b-mt0yuo5r78] {
    max-width: 420px;
}

/* ---------- Dark mode ---------- */

@media (prefers-color-scheme: dark) {
    .aid-widget[b-mt0yuo5r78],
    .aid-kpi-card[b-mt0yuo5r78],
    .aid-modal[b-mt0yuo5r78] {
        background: #1e293b;
        border-color: rgba(255, 255, 255, 0.12);
    }

    .aid-widget-title[b-mt0yuo5r78],
    .aid-kpi-value[b-mt0yuo5r78],
    .aid-donut-value[b-mt0yuo5r78],
    .aid-legend-count[b-mt0yuo5r78],
    .aid-hbar-name[b-mt0yuo5r78],
    .aid-cat-name[b-mt0yuo5r78],
    .aid-stub-name[b-mt0yuo5r78],
    .aid-add-title[b-mt0yuo5r78] {
        color: #e2e8f0;
    }

    .aid-kpi-label[b-mt0yuo5r78],
    .aid-legend-name[b-mt0yuo5r78],
    .aid-bar-label[b-mt0yuo5r78],
    .aid-donut-caption[b-mt0yuo5r78] {
        color: #94a3b8;
    }

    .aid-donut-hole[b-mt0yuo5r78] {
        background: #1e293b;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    }

    .aid-legend-row:hover[b-mt0yuo5r78] {
        background: rgba(255, 255, 255, 0.06);
    }

    .aid-table thead th[b-mt0yuo5r78] {
        background: rgba(255, 255, 255, 0.05);
        color: #cbd5e1;
    }

    .aid-stub[b-mt0yuo5r78] {
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 255, 255, 0.1);
    }

    .aid-hbar-track[b-mt0yuo5r78],
    .aid-mini-track[b-mt0yuo5r78] {
        background: rgba(255, 255, 255, 0.12);
    }

    .aid-toast[b-mt0yuo5r78] {
        background: #1e293b;
        color: #e2e8f0;
    }

    tr.aid-clickable:hover td[b-mt0yuo5r78] {
        background: rgba(255, 255, 255, 0.06);
    }

    .aid-location-card[b-mt0yuo5r78] {
        background: #1e293b;
    }
}
/* /Pages/Dashboards/CleaningDashboard.razor.rz.scp.css */
.cleaning-page-header[b-3kf4xtlx33] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}

.cleaning-report-btn[b-3kf4xtlx33] {
    font-weight: 600;
}

.cleaning-live[b-3kf4xtlx33] {
    color: var(--bs-success);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.cleaning-live-dot[b-3kf4xtlx33] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bs-success);
    box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.4);
    animation: cleaningLivePulse-b-3kf4xtlx33 1.6s ease-out infinite;
}

@keyframes cleaningLivePulse-b-3kf4xtlx33 {
    0% {
        box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.4);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(25, 135, 84, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(25, 135, 84, 0);
    }
}

.cleaning-card[b-3kf4xtlx33] {
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
}

.cleaning-collapse-toggle[b-3kf4xtlx33] {
    color: var(--bs-secondary);
    line-height: 1;
    text-decoration: none;
}

.cleaning-collapse-toggle:hover[b-3kf4xtlx33],
.cleaning-collapse-toggle:focus[b-3kf4xtlx33] {
    color: var(--bs-primary);
    text-decoration: none;
}

.cleaning-collapse-toggle i[b-3kf4xtlx33] {
    font-size: 1.05rem;
}

.cleaning-section-header-clickable[b-3kf4xtlx33] {
    cursor: pointer;
}

.cleaning-status-table thead th[b-3kf4xtlx33] {
    font-weight: 600;
    background: var(--bs-gray-100);
    color: var(--bs-gray-700);
    border-bottom: 1px solid var(--bs-border-color);
    text-transform: none;
}

.cleaning-status-table tbody td[b-3kf4xtlx33] {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

.cleaning-badge[b-3kf4xtlx33] {
    font-weight: 500;
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
}

/* Solid status colors with !important so the app's global
   "@media (prefers-color-scheme: dark) .badge { color: #fff !important }"
   can't override the dark-text-on-amber Partial pill. */
.cleaning-badge.cleaning-status-cleaned[b-3kf4xtlx33] {
    background-color: #198754 !important;
    color: #fff !important;
    border: none;
}

.cleaning-badge.cleaning-status-overdue[b-3kf4xtlx33] {
    background-color: #dc3545 !important;
    color: #fff !important;
    border: none;
}

.cleaning-badge.cleaning-status-partial[b-3kf4xtlx33] {
    background-color: #fd7e14 !important;
    color: #fff !important;
    border: none;
}

.cleaning-badge.cleaning-status-notyet[b-3kf4xtlx33] {
    background-color: #6c757d !important;
    color: #fff !important;
    border: none;
}

.cleaning-next-due[b-3kf4xtlx33] {
    display: inline-flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: flex-start;
}

.cleaning-next-due-time[b-3kf4xtlx33] {
    font-weight: 600;
    color: var(--bs-body-color);
}

.cleaning-next-due-badge[b-3kf4xtlx33] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-weight: 500;
    font-size: 0.78rem;
    white-space: nowrap;
}

.cleaning-next-due-overdue[b-3kf4xtlx33] {
    background-color: rgba(220, 53, 69, 0.12);
    color: #dc3545;
}

.cleaning-next-due-soon[b-3kf4xtlx33] {
    background-color: rgba(253, 126, 20, 0.12);
    color: #fd7e14;
}

.cleaning-next-due-upcoming[b-3kf4xtlx33] {
    background-color: rgba(13, 110, 253, 0.12);
    color: #0d6efd;
}

.cleaning-history-link[b-3kf4xtlx33] {
    text-decoration: none;
    color: var(--bs-secondary);
    font-weight: 500;
}

.cleaning-history-link:hover[b-3kf4xtlx33] {
    color: var(--bs-primary);
    text-decoration: underline;
}

/* Rendered as a <button> that opens the proof photo gallery — reset the
   native button chrome so it reads like the other table links. */
.cleaning-proof-link[b-3kf4xtlx33] {
    text-decoration: none;
    color: var(--bs-secondary);
    font-weight: 500;
    background: none;
    border: 0;
    padding: 0;
}

.cleaning-proof-link:hover[b-3kf4xtlx33] {
    color: var(--bs-primary);
    text-decoration: underline;
}

.cleaning-proof-count[b-3kf4xtlx33] {
    display: inline-block;
    min-width: 18px;
    padding: 0 5px;
    margin-left: 4px;
    border-radius: 999px;
    background: var(--bs-primary);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
}

.cleaning-overall-percent[b-3kf4xtlx33] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--bs-primary);
}

.cleaning-compliance-row[b-3kf4xtlx33] {
    padding: 0.25rem 0;
}

.cleaning-progress[b-3kf4xtlx33] {
    height: 6px;
    border-radius: 999px;
    background: var(--bs-gray-200);
}

.cleaning-progress .progress-bar[b-3kf4xtlx33] {
    background: var(--bs-success);
    border-radius: 999px;
}

.heatmap-table[b-3kf4xtlx33] {
    border-collapse: separate;
    border-spacing: 6px;
}

.heatmap-table thead th[b-3kf4xtlx33] {
    border: none;
    font-weight: 500;
    color: var(--bs-gray-700);
}

.heatmap-area-col[b-3kf4xtlx33] {
    text-align: start;
    min-width: 140px;
}

.heatmap-day-col[b-3kf4xtlx33] {
    min-width: 48px;
}

.heatmap-day-label[b-3kf4xtlx33] {
    font-size: 0.75rem;
    color: var(--bs-body-color);
}

.heatmap-day-date[b-3kf4xtlx33] {
    font-size: 0.75rem;
    color: var(--bs-body-color);
}

.heatmap-area-cell[b-3kf4xtlx33] {
    font-weight: 500;
    padding-right: 1rem;
}

.heatmap-cell-wrap[b-3kf4xtlx33] {
    padding: 2px;
}

.heatmap-cell[b-3kf4xtlx33] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    background: var(--bs-gray-200);
}

.heatmap-cell.heat-0[b-3kf4xtlx33] {
    background: var(--bs-gray-200);
}

.heatmap-cell.heat-1[b-3kf4xtlx33] {
    background: #b7e4c7;
    color: #1f6e3a;
}

.heatmap-cell.heat-2[b-3kf4xtlx33] {
    background: #74c69d;
    color: #fff;
}

.heatmap-cell.heat-3[b-3kf4xtlx33] {
    background: #2d8659;
    color: #fff;
}

.heatmap-cell.heat-4[b-3kf4xtlx33] {
    background: #15633e;
    color: #fff;
}

.heatmap-legend .heatmap-cell[b-3kf4xtlx33] {
    width: 24px;
    height: 24px;
    font-size: 0.7rem;
}

.cleaning-heatmap-body[b-3kf4xtlx33] {
    position: relative;
}

.cleaning-heatmap-content[b-3kf4xtlx33] {
    transition: opacity 0.15s ease-in-out;
}

.cleaning-heatmap-content-loading[b-3kf4xtlx33] {
    opacity: 0.55;
    pointer-events: none;
}

.cleaning-card-elevated[b-3kf4xtlx33] {
    position: relative;
    z-index: 1060;
}

.cleaning-area-filter[b-3kf4xtlx33] {
    position: relative;
}

.cleaning-area-filter-toggle[b-3kf4xtlx33] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cleaning-area-filter-backdrop[b-3kf4xtlx33] {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 1040;
}

.cleaning-area-filter-panel[b-3kf4xtlx33] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    z-index: 1050;
    padding: 0.5rem;
    max-height: 320px;
    display: flex;
    flex-direction: column;
}

.cleaning-area-filter-search[b-3kf4xtlx33] {
    margin-bottom: 0.4rem;
}

.cleaning-area-filter-actions[b-3kf4xtlx33] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.25rem 0.4rem;
    border-bottom: 1px solid var(--bs-border-color);
    margin-bottom: 0.35rem;
    font-size: 0.82rem;
}

.cleaning-area-filter-list[b-3kf4xtlx33] {
    overflow-y: auto;
    flex: 1 1 auto;
}

.cleaning-area-filter-item[b-3kf4xtlx33] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.5rem;
    border-radius: 0.35rem;
    cursor: pointer;
    user-select: none;
    font-size: 0.9rem;
    margin: 0;
    color: var(--bs-body-color);
}

.cleaning-area-filter-item:hover[b-3kf4xtlx33] {
    background-color: rgba(127, 127, 127, 0.18);
}

.cleaning-area-filter-empty[b-3kf4xtlx33] {
    padding: 0.6rem 0.5rem;
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.85rem;
    text-align: center;
}

.cleaning-kpi-card .card-body[b-3kf4xtlx33] {
    padding: 1.25rem 1.5rem;
}

.cleaning-kpi-label[b-3kf4xtlx33] {
    font-size: 0.875rem;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: 0.5rem;
}

.cleaning-kpi-value[b-3kf4xtlx33] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
}

.cleaning-kpi-value-danger[b-3kf4xtlx33] {
    color: #dc3545;
}

.cleaning-kpi-value-of[b-3kf4xtlx33] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
}

.cleaning-kpi-sub[b-3kf4xtlx33] {
    font-size: 0.75rem;
    color: var(--bs-secondary-color, #6c757d);
    margin-top: 0.4rem;
}

.cleaning-kpi-icon[b-3kf4xtlx33] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.cleaning-kpi-icon-info[b-3kf4xtlx33] {
    background-color: rgba(13, 110, 253, 0.12);
    color: #0d6efd;
}

.cleaning-kpi-icon-success[b-3kf4xtlx33] {
    background-color: rgba(25, 135, 84, 0.12);
    color: #198754;
}

.cleaning-kpi-icon-danger[b-3kf4xtlx33] {
    background-color: rgba(220, 53, 69, 0.12);
    color: #dc3545;
}

.cleaning-trends-tabs .btn[b-3kf4xtlx33] {
    padding: 0.25rem 0.85rem;
    font-weight: 500;
}

.cleaning-trends-dot[b-3kf4xtlx33] {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

/* The SVG chart is generated as a string by BuildCategoryChartSvg and rendered
   via MarkupString. Its elements don't receive Blazor's scoped attribute, so
   selectors must use ::deep to reach them. */
[b-3kf4xtlx33] .cleaning-trends-svg {
    width: 100%;
    height: 160px;
    display: block;
}

.cleaning-trends-list-view[b-3kf4xtlx33]  .cleaning-trends-svg {
    height: 220px;
}

[b-3kf4xtlx33] .cleaning-trends-grid {
    stroke: #6c757d;
    stroke-width: 0.5;
    stroke-dasharray: 2 3;
}

[b-3kf4xtlx33] .cleaning-trends-axis-text {
    fill: #495057;
    font-size: 11px;
    font-family: inherit;
}

[b-3kf4xtlx33] .cleaning-trends-line {
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    fill: none;
}

[b-3kf4xtlx33] .cleaning-trends-area-line {
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    fill: none;
}

.cleaning-trends-category-card .card-body[b-3kf4xtlx33] {
    padding: 0.85rem 1rem;
}

.cleaning-trends-category-header[b-3kf4xtlx33] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.5rem;
}

.cleaning-trends-category-name[b-3kf4xtlx33] {
    font-size: 0.9rem;
    font-weight: 600;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cleaning-trends-category-percent[b-3kf4xtlx33] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
}

.cleaning-trends-area-legend[b-3kf4xtlx33] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.4rem;
    margin-top: 0.65rem;
}

.cleaning-trends-area-chip[b-3kf4xtlx33] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.45rem;
    margin: 0;
    background: transparent;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--bs-secondary-color, #6c757d);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cleaning-trends-area-chip:hover[b-3kf4xtlx33] {
    background-color: rgba(108, 117, 125, 0.12);
}

.cleaning-trends-area-chip-active[b-3kf4xtlx33] {
    font-weight: 600;
}

.cleaning-trends-area-dot[b-3kf4xtlx33] {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Dashboard tab bar ─────────────────────────────────────────────────── */
.cleaning-tabs[b-3kf4xtlx33] {
    border-bottom: 1px solid var(--bs-border-color);
}

.cleaning-tabs .nav-link[b-3kf4xtlx33] {
    background: transparent;
    border: 1px solid transparent;
    border-bottom: 0;
    color: var(--bs-secondary-color, #6c757d);
    font-weight: 600;
    padding: 0.6rem 1rem;
}

.cleaning-tabs .nav-link:hover[b-3kf4xtlx33] {
    color: var(--bs-primary);
    border-color: transparent;
}

.cleaning-tabs .nav-link.active[b-3kf4xtlx33] {
    color: var(--bs-primary);
    background: transparent;
    border-color: var(--bs-border-color);
    border-bottom-color: transparent;
}

.cleaning-tab-count[b-3kf4xtlx33] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background-color: #dc3545;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.1;
}

/* ── Missed Rounds Log ─────────────────────────────────────────────────── */
.cleaning-missed-count[b-3kf4xtlx33] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background-color: rgba(220, 53, 69, 0.12);
    color: #dc3545;
    font-weight: 700;
    font-size: 1rem;
}

.cleaning-missed-area-list[b-3kf4xtlx33] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cleaning-missed-area-group[b-3kf4xtlx33] {
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    background-color: var(--bs-body-bg);
}

.cleaning-missed-area-header[b-3kf4xtlx33] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
    margin-bottom: 0.85rem;
    border-bottom: 1px dashed var(--bs-border-color);
}

.cleaning-missed-area-info[b-3kf4xtlx33] {
    display: inline-flex;
    align-items: center;
    font-size: 1rem;
    color: var(--bs-body-color);
}

.cleaning-missed-area-count[b-3kf4xtlx33] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: 0.6rem;
    min-width: 1.75rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background-color: rgba(220, 53, 69, 0.12);
    color: #dc3545;
    font-weight: 700;
    font-size: 0.8rem;
}

.cleaning-missed-date-group[b-3kf4xtlx33] {
    margin-bottom: 0.9rem;
}

.cleaning-missed-date-group:last-child[b-3kf4xtlx33] {
    margin-bottom: 0;
}

.cleaning-missed-date-header[b-3kf4xtlx33] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.55rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--bs-gray-700);
}

.cleaning-missed-date-count[b-3kf4xtlx33] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: 0.5rem;
    min-width: 1.4rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background-color: var(--bs-gray-200);
    color: var(--bs-gray-700);
    font-weight: 700;
    font-size: 0.75rem;
}

.cleaning-missed-slot-grid[b-3kf4xtlx33] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.6rem;
}

.cleaning-missed-slot-card[b-3kf4xtlx33] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    background-color: rgba(220, 53, 69, 0.04);
}

.cleaning-missed-slot-time[b-3kf4xtlx33] {
    display: inline-flex;
    align-items: center;
    font-weight: 500;
    color: var(--bs-body-color);
}

/* ── Area Insights tab ─────────────────────────────────────────────────── */
.cleaning-insights-area-list[b-3kf4xtlx33] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cleaning-insights-area-group[b-3kf4xtlx33] {
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    background-color: var(--bs-body-bg);
}

.cleaning-insights-area-header[b-3kf4xtlx33] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
    margin-bottom: 0.85rem;
    border-bottom: 1px dashed var(--bs-border-color);
}

.cleaning-insights-area-info[b-3kf4xtlx33] {
    display: inline-flex;
    align-items: center;
    font-size: 1rem;
    color: var(--bs-body-color);
}

.cleaning-insights-area-count[b-3kf4xtlx33] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: 0.6rem;
    min-width: 1.75rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background-color: rgba(13, 110, 253, 0.12);
    color: #0d6efd;
    font-weight: 700;
    font-size: 0.8rem;
}

.cleaning-insights-area-types[b-3kf4xtlx33] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-inline-start: 0.6rem;
}

.cleaning-insights-type-chip[b-3kf4xtlx33] {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background-color: rgba(108, 117, 125, 0.14);
    color: var(--bs-secondary-color, #495057);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.cleaning-insights-table thead th[b-3kf4xtlx33] {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color);
    font-weight: 600;
}

.cleaning-insights-ticket-number[b-3kf4xtlx33] {
    font-family: 'Consolas', 'Monaco', monospace;
    font-weight: 600;
    color: var(--bs-primary);
}

.cleaning-insights-col-actions[b-3kf4xtlx33] {
    width: 1%;
    white-space: nowrap;
    text-align: end;
}

/* ── Monthly Compliance Report modal ───────────────────────────────────── */
.cleaning-report-modal-backdrop[b-3kf4xtlx33] {
    background: rgba(0, 0, 0, 0.5);
}

.cleaning-report-summary[b-3kf4xtlx33] {
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    padding: 0.9rem 1rem;
    background-color: var(--bs-tertiary-bg, rgba(13, 110, 253, 0.04));
    margin-bottom: 1rem;
}

.cleaning-report-summary-loading[b-3kf4xtlx33] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
}

.cleaning-report-summary-header[b-3kf4xtlx33] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cleaning-report-summary-percent[b-3kf4xtlx33] {
    color: var(--bs-primary);
    font-weight: 700;
    font-size: 1.05rem;
}

.cleaning-report-stat[b-3kf4xtlx33] {
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    background-color: var(--bs-body-bg);
}

.cleaning-report-stat-label[b-3kf4xtlx33] {
    font-size: 0.75rem;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: 0.2rem;
}

.cleaning-report-stat-value[b-3kf4xtlx33] {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
}

.cleaning-report-stat-value-success[b-3kf4xtlx33] {
    color: #198754;
}

.cleaning-report-stat-value-danger[b-3kf4xtlx33] {
    color: #dc3545;
}

.cleaning-report-stat-value-of[b-3kf4xtlx33] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
}

.cleaning-report-download-btn[b-3kf4xtlx33] {
    font-weight: 600;
}

/* ── Printable monthly compliance report ───────────────────────────────── */
.cleaning-print-area[b-3kf4xtlx33] {
    display: none;
}

@media print {
    /* The hosting layout (sidebar, header, modal backdrop) is hidden via a
       global print rule on body > * — this section then surfaces only the
       print container and styles it cleanly for paper output. */
    @page {
        margin: 14mm 12mm 18mm 12mm;

        @bottom-right {
            content: counter(page) " / " counter(pages);
            font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
            font-size: 9pt;
            font-weight: 600;
            color: #6b7280;
        }
    }

    .cleaning-print-area[b-3kf4xtlx33] {
        display: block;
        padding: 0;
        color: #1f2937;
        background: #fff;
        font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
        font-size: 12.5px;
        line-height: 1.45;
    }

    /* ── Top banner: logo tile | title | branded blue tile ───────────── */
    /* The logo tile uses an inline SVG with a rounded polygon path, and the
       meta tile uses a mask-image SVG with a rounded polygon path, so the
       banner's outer border-radius can stay rounded without leaving seams
       at the corners where each tile meets the banner edge. */
    .cleaning-print-banner[b-3kf4xtlx33] {
        display: grid;
        grid-template-columns: 130px 1fr 220px;
        border-radius: 7px;
        border: 1px solid #dbe3ee;
        overflow: hidden;
        margin-bottom: 0.85rem;
        background: #fff;
        page-break-inside: avoid;
        box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
    }

    .cleaning-print-banner-no-logo[b-3kf4xtlx33] {
        grid-template-columns: 1fr 220px;
    }

    /* Slanted logo tile: inline SVG renders the rounded polygon outline so the
       top-left and bottom-left corners curve to match the banner's rounded edge.
       The slant vertices (top-right and bottom-right of the wedge) stay sharp. */
    .cleaning-print-banner-logo[b-3kf4xtlx33] {
        position: relative;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .cleaning-print-banner-logo-frame[b-3kf4xtlx33] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 0;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .cleaning-print-banner-logo img[b-3kf4xtlx33] {
        position: relative;
        z-index: 1;
        max-height: 66px;
        max-width: 68%;
        margin-inline-end: 14%;
        height: auto;
        width: auto;
        object-fit: contain;
    }

    .cleaning-print-banner-main[b-3kf4xtlx33] {
        padding: 14px 18px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: #fff;
        min-width: 0;
    }

    .cleaning-print-eyebrow[b-3kf4xtlx33] {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.18em;
        color: #1d4ed8;
        font-weight: 700;
        margin-bottom: 0.4rem;
    }

    .cleaning-print-eyebrow-rule[b-3kf4xtlx33] {
        display: inline-block;
        width: 30px;
        height: 2px;
        background: #3b82f6;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .cleaning-print-title[b-3kf4xtlx33] {
        font-size: 1.5rem;
        font-weight: 800;
        color: #1e3a8a;
        margin: 0 0 0.4rem 0;
        letter-spacing: -0.3px;
        line-height: 1.15;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cleaning-print-subtitle[b-3kf4xtlx33] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 0.92rem;
        font-weight: 600;
        color: #1e40af;
    }

    .cleaning-print-subtitle-icon[b-3kf4xtlx33] {
        color: #3b82f6;
        font-size: 0.95rem;
    }

    /* Slanted meta tile: left edge angles from ~14% at the top down to 0% at the bottom.
       The shape is applied via a mask-image SVG so the top-right and bottom-right
       corners can be rounded to match the banner's outer border-radius. */
    .cleaning-print-banner-meta[b-3kf4xtlx33] {
        position: relative;
        background:
            radial-gradient(circle at 18% 28%, rgba(255, 255, 255, 0.10) 0 6px, transparent 7px),
            radial-gradient(circle at 38% 18%, rgba(255, 255, 255, 0.08) 0 5px, transparent 6px),
            radial-gradient(circle at 65% 38%, rgba(255, 255, 255, 0.08) 0 5px, transparent 6px),
            radial-gradient(circle at 85% 22%, rgba(255, 255, 255, 0.10) 0 4px, transparent 5px),
            radial-gradient(circle at 28% 72%, rgba(255, 255, 255, 0.08) 0 5px, transparent 6px),
            radial-gradient(circle at 72% 78%, rgba(255, 255, 255, 0.10) 0 6px, transparent 7px),
            linear-gradient(135deg, #2563eb 0%, #1e3a8a 100%);
        color: #fff;
        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M 14 0 L 94 0 Q 100 0 100 6 L 100 94 Q 100 100 94 100 L 0 100 Z' fill='black'/></svg>");
        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M 14 0 L 94 0 Q 100 0 100 6 L 100 94 Q 100 100 94 100 L 0 100 Z' fill='black'/></svg>");
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        padding: 14px 16px 14px 36px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 10px;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .cleaning-print-banner-generated[b-3kf4xtlx33] {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    .cleaning-print-banner-generated-icon[b-3kf4xtlx33] {
        flex: 0 0 auto;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.16);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.7rem;
        color: #fff;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .cleaning-print-banner-generated-text[b-3kf4xtlx33] {
        display: flex;
        flex-direction: column;
        line-height: 1.15;
        min-width: 0;
    }

    .cleaning-print-banner-generated-label[b-3kf4xtlx33] {
        text-transform: uppercase;
        letter-spacing: 0.12em;
        font-weight: 700;
        font-size: 0.62rem;
        opacity: 0.88;
    }

    .cleaning-print-banner-generated-value[b-3kf4xtlx33] {
        font-weight: 700;
        font-size: 0.78rem;
        white-space: nowrap;
    }

    /* Shown only when a specific project filter is active; mirrors the generated
       row's structure so the column stacks cleanly above the timestamp. */
    .cleaning-print-banner-project[b-3kf4xtlx33] {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    .cleaning-print-banner-project-icon[b-3kf4xtlx33] {
        flex: 0 0 auto;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.16);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.7rem;
        color: #fff;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .cleaning-print-banner-project-text[b-3kf4xtlx33] {
        display: flex;
        flex-direction: column;
        line-height: 1.15;
        min-width: 0;
    }

    .cleaning-print-banner-project-label[b-3kf4xtlx33] {
        text-transform: uppercase;
        letter-spacing: 0.12em;
        font-weight: 700;
        font-size: 0.62rem;
        opacity: 0.88;
    }

    .cleaning-print-banner-project-value[b-3kf4xtlx33] {
        font-weight: 700;
        font-size: 0.78rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ── Thin divider between banner and hero ────────────────────────── */
    .cleaning-print-rule[b-3kf4xtlx33] {
        height: 1px;
        background: #e5e7eb;
        margin: 0 0 0.95rem;
    }

    /* ── Hero KPI: compliance + 2×2 icon stats ───────────────────────── */
    .cleaning-print-hero[b-3kf4xtlx33] {
        display: grid;
        grid-template-columns: 280px 1fr;
        gap: 0;
        border-radius: 12px;
        overflow: hidden;
        margin-bottom: 1.1rem;
        page-break-inside: avoid;
        border: 1px solid #dbe3ee;
        background: #fff;
        box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
    }

    .cleaning-print-hero-percent[b-3kf4xtlx33] {
        position: relative;
        background:
            radial-gradient(circle at 28% 38%, rgba(255, 255, 255, 0.20) 0 100px, transparent 122px),
            linear-gradient(135deg, #2563eb 0%, #1e3a8a 100%);
        color: #fff;
        text-align: center;
        padding: 32px 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .cleaning-print-hero-percent[b-3kf4xtlx33]::before {
        content: '';
        position: absolute;
        width: 200px;
        height: 200px;
        border: 2px solid rgba(255, 255, 255, 0.22);
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        pointer-events: none;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .cleaning-print-hero-percent-value[b-3kf4xtlx33] {
        position: relative;
        font-size: 4.4rem;
        font-weight: 800;
        line-height: 1;
        letter-spacing: -2px;
    }

    .cleaning-print-hero-percent-symbol[b-3kf4xtlx33] {
        font-size: 2.6rem;
        font-weight: 700;
        margin-inline-start: 2px;
        opacity: 0.95;
    }

    .cleaning-print-hero-percent-label[b-3kf4xtlx33] {
        position: relative;
        text-transform: uppercase;
        letter-spacing: 0.2em;
        font-size: 0.82rem;
        font-weight: 700;
        margin-top: 0.85rem;
        opacity: 0.96;
    }

    .cleaning-print-hero-stats[b-3kf4xtlx33] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        background: #fff;
    }

    .cleaning-print-stat[b-3kf4xtlx33] {
        padding: 14px 18px;
        display: flex;
        align-items: center;
        gap: 12px;
        border-bottom: 1px solid #eef0f4;
        border-inline-start: 1px solid #eef0f4;
    }

    .cleaning-print-stat:nth-child(odd)[b-3kf4xtlx33] {
        border-inline-start: none;
    }

    .cleaning-print-stat:nth-last-child(-n+2)[b-3kf4xtlx33] {
        border-bottom: none;
    }

    /* An odd number of hero stats leaves the final tile alone on its row: stretch it
       across both columns so it doesn't sit in a half-width box. */
    .cleaning-print-stat:last-child:nth-child(odd)[b-3kf4xtlx33] {
        grid-column: 1 / -1;
    }

    /* ...and the tile before it is then the end of a full row, not part of the last
       one, so it keeps the divider the rule above took away. */
    .cleaning-print-stat:nth-last-child(2):nth-child(even)[b-3kf4xtlx33] {
        border-bottom: 1px solid #eef0f4;
    }

    .cleaning-print-stat-icon[b-3kf4xtlx33] {
        flex: 0 0 auto;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #eaf1ff;
        color: #2563eb;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .cleaning-print-stat-icon-danger[b-3kf4xtlx33] {
        background: #fee2e2;
        color: #b91c1c;
    }

    .cleaning-print-stat-body[b-3kf4xtlx33] {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .cleaning-print-stat-label[b-3kf4xtlx33] {
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #6b7280;
        font-weight: 600;
        margin-bottom: 0.2rem;
    }

    .cleaning-print-stat-value[b-3kf4xtlx33] {
        font-size: 1.5rem;
        font-weight: 800;
        color: #111827;
        line-height: 1.1;
    }

    .cleaning-print-stat-value-danger[b-3kf4xtlx33] {
        color: #dc3545;
    }

    .cleaning-print-stat-value-of[b-3kf4xtlx33] {
        font-size: 0.95rem;
        font-weight: 600;
        color: #6b7280;
    }

    /* ── Secondary summary cards (issues triple) ─────────────────────── */
    .cleaning-print-summary[b-3kf4xtlx33] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
        margin-bottom: 1.5rem;
    }

    .cleaning-print-summary-card[b-3kf4xtlx33] {
        border: 1px solid #d0d5dd;
        border-radius: 8px;
        padding: 0.7rem 0.85rem;
        display: flex;
        align-items: center;
        gap: 0.7rem;
        background: #fff;
        page-break-inside: avoid;
    }

    .cleaning-print-summary-icon[b-3kf4xtlx33] {
        flex: 0 0 auto;
        width: 34px;
        height: 34px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.05rem;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .cleaning-print-summary-icon-warning[b-3kf4xtlx33] {
        background: #fef3c7;
        color: #92400e;
    }

    .cleaning-print-summary-icon-success[b-3kf4xtlx33] {
        background: #d1fae5;
        color: #065f46;
    }

    .cleaning-print-summary-icon-danger[b-3kf4xtlx33] {
        background: #fee2e2;
        color: #991b1b;
    }

    .cleaning-print-summary-body[b-3kf4xtlx33] {
        flex: 1 1 auto;
        min-width: 0;
    }

    .cleaning-print-summary-label[b-3kf4xtlx33] {
        font-size: 0.7rem;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-bottom: 0.15rem;
        font-weight: 600;
    }

    .cleaning-print-summary-value[b-3kf4xtlx33] {
        font-size: 1.45rem;
        font-weight: 700;
        color: #1f2937;
        line-height: 1.1;
    }

    .cleaning-print-summary-value-success[b-3kf4xtlx33] {
        color: #198754;
    }

    .cleaning-print-summary-value-danger[b-3kf4xtlx33] {
        color: #dc3545;
    }

    /* ── Section titles ──────────────────────────────────────────────── */
    .cleaning-print-section-title[b-3kf4xtlx33] {
        font-size: 0.95rem;
        font-weight: 700;
        margin: 0.5rem 0 0.6rem 0;
        color: #0a58ca;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        padding-inline-start: 0.55rem;
        border-inline-start: 3px solid #0d6efd;
        line-height: 1.3;
    }

    .cleaning-print-section-title-spaced[b-3kf4xtlx33] {
        margin-top: 1.35rem;
        padding-top: 0.85rem;
        border-top: 1px solid #e5e7eb;
        padding-inline-start: 0.55rem;
    }

    /* ── Tables ──────────────────────────────────────────────────────── */
    .cleaning-print-table[b-3kf4xtlx33] {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.82rem;
        page-break-inside: auto;
    }

    .cleaning-print-table th[b-3kf4xtlx33],
    .cleaning-print-table td[b-3kf4xtlx33] {
        border: 1px solid #e5e7eb;
        padding: 0.45rem 0.6rem;
        text-align: left;
        vertical-align: top;
    }

    .cleaning-print-table thead th[b-3kf4xtlx33] {
        background-color: #eef4ff;
        color: #0a58ca;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-size: 0.72rem;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .cleaning-print-table tbody tr[b-3kf4xtlx33] {
        page-break-inside: avoid;
    }

    .cleaning-print-table tbody tr:nth-child(even) td[b-3kf4xtlx33] {
        background: #fafbfc;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .cleaning-print-table .text-end[b-3kf4xtlx33] {
        text-align: end;
    }

    .cleaning-print-submission-table[b-3kf4xtlx33] {
        font-size: 0.75rem;
    }

    .cleaning-print-submission-table th[b-3kf4xtlx33],
    .cleaning-print-submission-table td[b-3kf4xtlx33] {
        padding: 0.35rem 0.5rem;
    }

    .cleaning-print-checkmark[b-3kf4xtlx33] {
        color: #198754;
        font-weight: 700;
    }

    /* ── Status badges ───────────────────────────────────────────────── */
    .cleaning-print-status-badge[b-3kf4xtlx33] {
        display: inline-block;
        padding: 0.2rem 0.6rem;
        border-radius: 999px;
        font-size: 0.68rem;
        font-weight: 700;
        line-height: 1.3;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .cleaning-print-status-open[b-3kf4xtlx33] {
        background-color: #fee2e2;
        color: #b91c1c;
    }

    .cleaning-print-status-inprogress[b-3kf4xtlx33] {
        background-color: #cfe2ff;
        color: #084298;
    }

    .cleaning-print-status-closed[b-3kf4xtlx33] {
        background-color: #d1fae5;
        color: #065f46;
    }

    /* ── Empty state ─────────────────────────────────────────────────── */
    .cleaning-print-empty[b-3kf4xtlx33] {
        padding: 1rem;
        border: 1px dashed #d0d5dd;
        border-radius: 6px;
        text-align: center;
        color: #6b7280;
        background: #fafbfc;
    }

}

/* ===== Dark Mode ===== */
@media (prefers-color-scheme: dark) {
    /* SVG rules must also use ::deep — see comment on the base rules above. */
    [b-3kf4xtlx33] .cleaning-trends-axis-text {
        fill: #e2e8f0;
    }

    [b-3kf4xtlx33] .cleaning-trends-grid {
        stroke: rgba(226, 232, 240, 0.25);
    }

    .cleaning-trends-category-percent[b-3kf4xtlx33] {
        color: #cbd5e1;
    }

    .cleaning-trends-area-chip[b-3kf4xtlx33] {
        border-color: rgba(255, 255, 255, 0.18);
        color: #e2e8f0;
    }

    .cleaning-trends-area-chip:hover[b-3kf4xtlx33] {
        background-color: rgba(255, 255, 255, 0.08);
    }

    .cleaning-missed-count[b-3kf4xtlx33] {
        background-color: rgba(248, 113, 113, 0.2);
        color: #f87171;
    }

    .cleaning-missed-area-group[b-3kf4xtlx33] {
        border-color: rgba(255, 255, 255, 0.12);
        background-color: transparent;
    }

    .cleaning-missed-area-header[b-3kf4xtlx33] {
        border-bottom-color: rgba(255, 255, 255, 0.12);
    }

    .cleaning-missed-area-count[b-3kf4xtlx33] {
        background-color: rgba(248, 113, 113, 0.2);
        color: #f87171;
    }

    .cleaning-insights-area-group[b-3kf4xtlx33] {
        border-color: rgba(255, 255, 255, 0.12);
        background-color: transparent;
    }

    .cleaning-insights-area-header[b-3kf4xtlx33] {
        border-bottom-color: rgba(255, 255, 255, 0.12);
    }

    .cleaning-insights-area-count[b-3kf4xtlx33] {
        background-color: rgba(96, 165, 250, 0.2);
        color: #60a5fa;
    }

    .cleaning-insights-type-chip[b-3kf4xtlx33] {
        background-color: rgba(255, 255, 255, 0.08);
        color: #cbd5e1;
    }

    .cleaning-insights-ticket-number[b-3kf4xtlx33] {
        color: #60a5fa;
    }

    .cleaning-missed-date-header[b-3kf4xtlx33] {
        color: #cbd5e1;
    }

    .cleaning-missed-date-count[b-3kf4xtlx33] {
        background-color: rgba(255, 255, 255, 0.08);
        color: #cbd5e1;
    }

    .cleaning-missed-slot-card[b-3kf4xtlx33] {
        border-color: rgba(255, 255, 255, 0.12);
        background-color: rgba(248, 113, 113, 0.06);
    }

    .cleaning-next-due-overdue[b-3kf4xtlx33] {
        background-color: rgba(248, 113, 113, 0.2);
        color: #f87171;
    }

    .cleaning-next-due-soon[b-3kf4xtlx33] {
        background-color: rgba(251, 146, 60, 0.2);
        color: #fb923c;
    }

    .cleaning-next-due-upcoming[b-3kf4xtlx33] {
        background-color: rgba(96, 165, 250, 0.2);
        color: #60a5fa;
    }

    .cleaning-kpi-label[b-3kf4xtlx33] {
        color: #cbd5e1;
    }

    .cleaning-kpi-icon-info[b-3kf4xtlx33] {
        background-color: rgba(59, 130, 246, 0.2);
        color: #60a5fa;
    }

    .cleaning-kpi-icon-success[b-3kf4xtlx33] {
        background-color: rgba(34, 197, 94, 0.2);
        color: #4ade80;
    }

    .cleaning-kpi-icon-danger[b-3kf4xtlx33] {
        background-color: rgba(248, 113, 113, 0.2);
        color: #f87171;
    }

    .cleaning-tabs[b-3kf4xtlx33] {
        border-bottom-color: rgba(255, 255, 255, 0.12);
    }

    .cleaning-tabs .nav-link[b-3kf4xtlx33] {
        color: #cbd5e1;
    }

    .cleaning-tabs .nav-link:hover[b-3kf4xtlx33] {
        color: #60a5fa;
        background-color: rgba(255, 255, 255, 0.04);
    }

    .cleaning-tabs .nav-link.active[b-3kf4xtlx33] {
        color: #60a5fa;
        background: transparent;
        border-color: rgba(255, 255, 255, 0.12);
        border-bottom-color: transparent;
    }

    .cleaning-tab-count[b-3kf4xtlx33] {
        background-color: #f87171;
        color: #0f172a;
    }

    .cleaning-report-summary[b-3kf4xtlx33] {
        background-color: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 255, 255, 0.12);
    }

    .cleaning-report-summary-percent[b-3kf4xtlx33] {
        color: #60a5fa;
    }

    .cleaning-report-stat[b-3kf4xtlx33] {
        background-color: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 255, 255, 0.12);
    }

    .cleaning-report-stat-label[b-3kf4xtlx33] {
        color: #cbd5e1;
    }

    .cleaning-report-stat-value[b-3kf4xtlx33] {
        color: #f1f5f9;
    }

    .cleaning-report-stat-value-success[b-3kf4xtlx33] {
        color: #4ade80;
    }

    .cleaning-report-stat-value-danger[b-3kf4xtlx33] {
        color: #f87171;
    }
}
/* /Pages/Dashboards/CleaningIssuesLog.razor.rz.scp.css */
.cleaning-issues-page-header[b-yvv7snd2h6] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 0.75rem;
}

.cleaning-issues-card[b-yvv7snd2h6] {
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
}

.cleaning-issues-section-header-clickable[b-yvv7snd2h6] {
    cursor: pointer;
}

.cleaning-issues-table thead th[b-yvv7snd2h6] {
    font-weight: 600;
    background: var(--bs-gray-100);
    color: var(--bs-gray-700);
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--bs-border-color);
}

.cleaning-issues-table tbody td[b-yvv7snd2h6] {
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
    vertical-align: top;
}

.cleaning-issues-col-nowrap[b-yvv7snd2h6] {
    white-space: nowrap;
}

.cleaning-issues-tabs[b-yvv7snd2h6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0.25rem;
    background: var(--bs-gray-100);
    border-radius: 999px;
}

.cleaning-issues-tab[b-yvv7snd2h6] {
    border: none;
    background: transparent;
    color: var(--bs-gray-700);
    font-weight: 500;
    font-size: 0.92rem;
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.cleaning-issues-tab:hover[b-yvv7snd2h6] {
    background: var(--bs-gray-200);
}

.cleaning-issues-tab.active[b-yvv7snd2h6] {
    background: var(--bs-dark);
    color: #fff;
}

.cleaning-issues-tab-count[b-yvv7snd2h6] {
    font-weight: 700;
}

.cleaning-issues-badge[b-yvv7snd2h6] {
    display: inline-block;
    font-weight: 600;
    font-size: 0.82rem;
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    text-transform: none;
}

.cleaning-issues-badge-open[b-yvv7snd2h6] {
    background: rgba(220, 53, 69, 0.12);
    color: #dc3545;
}

.cleaning-issues-badge-inprogress[b-yvv7snd2h6] {
    background: rgba(13, 110, 253, 0.14);
    color: #0d6efd;
}

.cleaning-issues-badge-closed[b-yvv7snd2h6] {
    background: rgba(25, 135, 84, 0.16);
    color: #198754;
}

.cleaning-issues-live[b-yvv7snd2h6] {
    color: var(--bs-success);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.cleaning-issues-live-dot[b-yvv7snd2h6] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bs-success);
    box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.4);
    animation: cleaningIssuesPulse-b-yvv7snd2h6 1.6s ease-out infinite;
}

@keyframes cleaningIssuesPulse-b-yvv7snd2h6 {
    0% {
        box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.4);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(25, 135, 84, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(25, 135, 84, 0);
    }
}

.cleaning-issues-card-elevated[b-yvv7snd2h6] {
    position: relative;
    z-index: 1060;
}

.cleaning-issues-area-filter[b-yvv7snd2h6] {
    position: relative;
}

.cleaning-issues-area-filter-toggle[b-yvv7snd2h6] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cleaning-issues-area-filter-backdrop[b-yvv7snd2h6] {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 1040;
}

.cleaning-issues-area-filter-panel[b-yvv7snd2h6] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    z-index: 1050;
    padding: 0.5rem;
    max-height: 320px;
    display: flex;
    flex-direction: column;
}

.cleaning-issues-area-filter-search[b-yvv7snd2h6] {
    margin-bottom: 0.4rem;
}

.cleaning-issues-area-filter-actions[b-yvv7snd2h6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.25rem 0.4rem;
    border-bottom: 1px solid var(--bs-border-color);
    margin-bottom: 0.35rem;
    font-size: 0.82rem;
}

.cleaning-issues-area-filter-list[b-yvv7snd2h6] {
    overflow-y: auto;
    flex: 1 1 auto;
}

.cleaning-issues-area-filter-item[b-yvv7snd2h6] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.5rem;
    border-radius: 0.35rem;
    cursor: pointer;
    user-select: none;
    font-size: 0.9rem;
    margin: 0;
    color: var(--bs-body-color);
}

.cleaning-issues-area-filter-item:hover[b-yvv7snd2h6] {
    background-color: rgba(127, 127, 127, 0.18);
}

.cleaning-issues-area-filter-empty[b-yvv7snd2h6] {
    padding: 0.6rem 0.5rem;
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.85rem;
    text-align: center;
}
/* /Pages/Dashboards/CourierDashboard.razor.rz.scp.css */
.kpi-icon[b-3fkyywr4sr] {
    font-size: 1.5rem;
}
/* /Pages/Dashboards/DriverLogDashboard.razor.rz.scp.css */
.kpi-icon[b-tvlqu1d2ag] {
    font-size: 1.5rem;
}

.utilization-progress[b-tvlqu1d2ag] {
    max-width: 120px;
    height: 8px;
}
/* /Pages/Dashboards/InventoryDashboard.razor.rz.scp.css */
.kpi-icon[b-ak5kv9ql6h] {
    font-size: 1.5rem;
}

.bar-container[b-ak5kv9ql6h] {
    width: 100px;
    height: 16px;
    background-color: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
}

.bar[b-ak5kv9ql6h] {
    height: 100%;
    border-radius: 4px;
    min-width: 2px;
    transition: width 0.3s ease;
}

.bar-stock-in[b-ak5kv9ql6h] {
    background-color: #198754;
}

.bar-stock-out[b-ak5kv9ql6h] {
    background-color: #dc3545;
}

.search-input-group[b-ak5kv9ql6h] {
    max-width: 300px;
}

.transaction-table-container[b-ak5kv9ql6h] {
    max-height: 50vh;
    overflow-y: auto;
}
/* /Pages/Dashboards/StaffProductivityReport.razor.rz.scp.css */
.report-content-area[b-amqk71c2h9] {
    min-height: 220px;
}

.rank-col[b-amqk71c2h9] {
    width: 60px;
}

.staffprod-submissions-link[b-amqk71c2h9] {
    line-height: 1;
}

.staffprod-submissions-link:hover .badge[b-amqk71c2h9] {
    filter: brightness(1.1);
}

.staffprod-section-header-clickable[b-amqk71c2h9] {
    cursor: pointer;
}

/* Lift the whole filter card (and its dropdown panel) above the cards below while open. */
.projfilter-card-elevated[b-amqk71c2h9] {
    position: relative;
    z-index: 1060;
}

.projfilter[b-amqk71c2h9] {
    position: relative;
}

.projfilter-toggle[b-amqk71c2h9] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.projfilter-panel[b-amqk71c2h9] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    z-index: 1050;
    padding: 0.5rem;
    max-height: 320px;
    display: flex;
    flex-direction: column;
}

.projfilter-search[b-amqk71c2h9] {
    margin-bottom: 0.4rem;
}

.projfilter-actions[b-amqk71c2h9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.25rem 0.4rem;
    border-bottom: 1px solid var(--bs-border-color);
    margin-bottom: 0.35rem;
    font-size: 0.82rem;
}

.projfilter-list[b-amqk71c2h9] {
    overflow-y: auto;
    flex: 1 1 auto;
}

.projfilter-item[b-amqk71c2h9] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.5rem;
    border-radius: 0.35rem;
    cursor: pointer;
    user-select: none;
    font-size: 0.9rem;
    margin: 0;
    color: var(--bs-body-color);
}

.projfilter-item:hover[b-amqk71c2h9] {
    background-color: rgba(127, 127, 127, 0.18);
}

.projfilter-empty[b-amqk71c2h9] {
    padding: 0.6rem 0.5rem;
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.85rem;
    text-align: center;
}
/* /Pages/Dashboards/TicketDashboard.razor.rz.scp.css */
.kpi-icon[b-m4iyqqlj42] {
    font-size: 1.5rem;
}
/* /Pages/Feedback/ProvideFeedback.razor.rz.scp.css */
.star-rating[b-cp4sjl1mb8] {
    display: flex;
    gap: 5px;
    margin-top: 10px;
}

    .star-rating i:hover[b-cp4sjl1mb8] {
        transform: scale(1.2);
        transition: transform 0.2s;
    }

.star-rating-icon[b-cp4sjl1mb8] {
    cursor: pointer;
    font-size: 2rem;
}

.spinner-large[b-cp4sjl1mb8] {
    width: 3rem;
    height: 3rem;
}

.card[b-cp4sjl1mb8] {
    border: none;
    border-radius: 15px;
}

.card-header[b-cp4sjl1mb8] {
    border-radius: 15px 15px 0 0 !important;
}
/* /Pages/Feedback/ViewFeedback.razor.rz.scp.css */
/* ===== Bottom Metric Cards Styling ===== */
.metric-card[b-yzwa73q89w] {
    border-radius: 14px;
    overflow: hidden;
    border: 2px solid transparent;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

.metric-header[b-yzwa73q89w] {
    padding: 14px 18px;
    font-weight: 600;
    border-bottom: none;
}

/* ✅ Service Quality - PURPLE */
.quality-card[b-yzwa73q89w] {
    border-color: #7c3aed;
}

.quality-header[b-yzwa73q89w] {
    background: linear-gradient(90deg, #6d28d9, #a855f7);
    color: white;
}

/* ✅ Timeliness - RED / PINK */
.time-card[b-yzwa73q89w] {
    border-color: #e11d48;
}

.time-header[b-yzwa73q89w] {
    background: linear-gradient(90deg, #be123c, #fb7185);
    color: white;
}

/* ✅ Rating Distribution - DARK GRAY */
.rating-card[b-yzwa73q89w] {
    border-color: #334155;
}

.rating-header[b-yzwa73q89w] {
    background: linear-gradient(90deg, #0f172a, #475569);
    color: white;
}

/* Progress bar height */
.progress[b-yzwa73q89w] {
    height: 10px;
}

.progress-container[b-yzwa73q89w] {
    max-height: 200px;
    overflow-y: auto;
}


/* ===== Statistics Cards (Top Row) - Same Height ===== */
.card[b-yzwa73q89w] {
    height: 100%;
}

.feedback-search-input[b-yzwa73q89w] {
    max-width: 400px;
}
/* /Pages/ForgotPassword.razor.rz.scp.css */
.login-header[b-6wcc0unz9h] {
    text-align: center;
}

.logo-wrap[b-6wcc0unz9h] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto 12px auto;
}

.iwaa-logo[b-6wcc0unz9h] {
    display: block;
    height: auto;
    width: clamp(140px, 22vw, 180px);
    max-width: 100%;
    object-fit: contain;
}

@media (max-width: 360px) {
    .iwaa-logo[b-6wcc0unz9h] {
        width: 120px;
    }
}
/* /Pages/Index.razor.rz.scp.css */
/* ===== Requests ===== */
.requests-list[b-x7apsip3xq] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ===== Standard Hero Section (inside home-container, non-whitelabel) ===== */
.hero-section[b-x7apsip3xq] {
    text-align: center;
    padding: 3rem 1rem;
    background: white;
    border-radius: 16px;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-lg);
}

    .hero-section h1[b-x7apsip3xq] {
        font-size: 3rem;
        color: #1e40af;
        margin-bottom: 1rem;
        font-weight: 700;
    }

@media (prefers-color-scheme: dark) {
    .hero-section[b-x7apsip3xq] {
        background: #1e1e2e;
    }

        .hero-section h1[b-x7apsip3xq] {
            color: #93c5fd;
        }
}

@media (min-width: 1441px) {
    .hero-section h1[b-x7apsip3xq] {
        font-size: 3.5rem;
    }
}

@media (min-width: 1920px) {
    .hero-section h1[b-x7apsip3xq] {
        font-size: 4rem;
    }
}

/* Apply gradient only to text, not emojis */
.hero-section h1 .gradient-text[b-x7apsip3xq] {
    background: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Hero section responsive overrides */
.hero-section[b-x7apsip3xq] {
    padding: 2rem 1rem;
}

    .hero-section h1[b-x7apsip3xq] {
        font-size: 1.75rem;
    }

    .hero-section .lead[b-x7apsip3xq] {
        font-size: 1rem;
    }

    .hero-section h1[b-x7apsip3xq] {
        font-size: 2.25rem;
    }

/* ===== IWAA Logo Responsive Styles ===== */

/* Hero Header Container - Flexbox layout for logo and title */
.hero-header[b-x7apsip3xq] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

/* IWAA Logo Base Styles */
.iwaa-logo[b-x7apsip3xq] {
    width: 95px;
    height: auto;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

/* Hero Section h1 - Remove default margins for better alignment */
.hero-section .hero-header h1[b-x7apsip3xq] {
    margin: 0;
    font-size: 3rem;
    color: #1e40af;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

/* ===== Responsive Breakpoints ===== */

/* Large Desktop (1200px and above) */
@media (min-width: 1200px) {
    .iwaa-logo[b-x7apsip3xq] {
        width: 110px;
    }

    .hero-header[b-x7apsip3xq] {
        gap: 2rem;
    }

    .hero-section .hero-header h1[b-x7apsip3xq] {
        font-size: 3.5rem;
    }
}

/* Desktop (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .iwaa-logo[b-x7apsip3xq] {
        width: 95px;
    }

    .hero-header[b-x7apsip3xq] {
        gap: 1.5rem;
    }

    .hero-section .hero-header h1[b-x7apsip3xq] {
        font-size: 3rem;
    }
}

/* Tablet Landscape (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .iwaa-logo[b-x7apsip3xq] {
        width: 85px;
    }

    .hero-header[b-x7apsip3xq] {
        gap: 1.25rem;
    }

    .hero-section .hero-header h1[b-x7apsip3xq] {
        font-size: 2.5rem;
    }
}

/* Tablet Portrait (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
    .iwaa-logo[b-x7apsip3xq] {
        width: 75px;
    }

    .hero-header[b-x7apsip3xq] {
        gap: 1rem;
    }

    .hero-section .hero-header h1[b-x7apsip3xq] {
        font-size: 2rem;
    }
}

/* Mobile Landscape (481px - 575px) */
@media (min-width: 481px) and (max-width: 575px) {
    .hero-header[b-x7apsip3xq] {
        flex-direction: column;
        gap: 1rem;
    }

    .iwaa-logo[b-x7apsip3xq] {
        width: 80px;
    }

    .hero-section .hero-header h1[b-x7apsip3xq] {
        font-size: 1.75rem;
        text-align: center;
    }
}

/* Mobile Portrait (320px - 480px) */
@media (max-width: 480px) {
    .hero-header[b-x7apsip3xq] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .iwaa-logo[b-x7apsip3xq] {
        width: 70px;
    }

    .hero-section .hero-header h1[b-x7apsip3xq] {
        font-size: 1.5rem;
        text-align: center;
        word-break: break-word;
    }

    .hero-section[b-x7apsip3xq] {
        padding: 2rem 1rem;
    }
}

/* Extra Small Mobile (below 375px) */
@media (max-width: 374px) {
    .iwaa-logo[b-x7apsip3xq] {
        width: 60px;
    }

    .hero-section .hero-header h1[b-x7apsip3xq] {
        font-size: 1.25rem;
    }

    .hero-header[b-x7apsip3xq] {
        gap: 0.5rem;
    }
}

/* ===== Accessibility & Print Styles ===== */

/* High DPI Screens - Ensure crisp logo rendering */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .iwaa-logo[b-x7apsip3xq] {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Print Styles */
@media print {
    .iwaa-logo[b-x7apsip3xq] {
        width: 80px !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .hero-header[b-x7apsip3xq] {
        flex-direction: row;
        gap: 1rem;
    }
}

/* ===== Additional Enhancements ===== */

/* Logo hover effect on desktop */
@media (min-width: 992px) {
    .iwaa-logo:hover[b-x7apsip3xq] {
        transform: scale(1.05);
        filter: brightness(1.1);
    }
}

/* Ensure proper vertical alignment in all scenarios */
.hero-header > *[b-x7apsip3xq] {
    vertical-align: middle;
}

/* ===== Dark Mode ===== */
@media (prefers-color-scheme: dark) {
    /* White logo is loaded via <picture> + <source media> in the Razor markup */

    .hero-section[b-x7apsip3xq] {
        background: var(--card-bg) !important;
    }

    .hero-section h1[b-x7apsip3xq],
    .hero-section .hero-header h1[b-x7apsip3xq] {
        color: #93c5fd !important;
    }

    .hero-section .lead[b-x7apsip3xq] {
        color: var(--text-secondary) !important;
    }

    .feature-card[b-x7apsip3xq] {
        background: var(--card-bg) !important;
        color: var(--text-primary) !important;
    }

    .feature-card h3[b-x7apsip3xq] {
        color: var(--text-primary) !important;
    }

    .feature-card p[b-x7apsip3xq] {
        color: var(--text-secondary) !important;
    }
}

/* Reduced motion support for accessibility */
@media (prefers-reduced-motion: reduce) {
    .iwaa-logo[b-x7apsip3xq] {
        transition: none;
    }

        .iwaa-logo:hover[b-x7apsip3xq] {
            transform: none;
        }
}

/* Orientation change handling */
@media (orientation: landscape) and (max-height: 500px) {
    .hero-section[b-x7apsip3xq] {
        padding: 1.5rem 1rem;
    }

    .iwaa-logo[b-x7apsip3xq] {
        width: 60px;
    }

    .hero-section .hero-header h1[b-x7apsip3xq] {
        font-size: 1.5rem;
    }
}

/* ===== Fallback for very old browsers ===== */
.no-flexbox .hero-header[b-x7apsip3xq] {
    text-align: center;
}

.no-flexbox .iwaa-logo[b-x7apsip3xq] {
    display: inline-block;
    margin-right: 1rem;
}

.no-flexbox .hero-section .hero-header h1[b-x7apsip3xq] {
    display: inline-block;
}

.feature-icon[b-x7apsip3xq] {
    font-size: 2rem;
}

/* =============================================================================
   WHITELABEL STYLES
   All classes below only activate when the tenant has IsWhiteLabeled = true.
   They sit inside .wl-brand-wrapper.wl-active so they never affect standard
   (non-whitelabel) tenants.
   ============================================================================= */

/* ── Outer branding wrapper ─────────────────────────────────────────────────── */
.wl-brand-wrapper[b-x7apsip3xq] {
    flex-direction: column;
    width: 100%;
}

/* ── Hero section — OUTSIDE the home-container ──────────────────────────────── */
/*
 * This is the hero's NEW position when whitelabeled.
 * It renders BEFORE the .home-container in the DOM hierarchy.
 * The background uses the tenant's primary/accent CSS variables (set via inline
 * style on .wl-brand-wrapper), falling back to the default blue gradient.
 */
.wl-hero-section[b-x7apsip3xq] {
    text-align: center;
    padding: 2.5rem 1.5rem;
    background: linear-gradient(
        135deg,
        var(--primary-color, #2563eb) 0%,
        var(--accent-color,  #0ea5e9) 100%
    );
    color: white;
    margin-bottom: 0; /* flush against the home-container below */
    width: 100%;
}

.wl-hero-section .hero-header[b-x7apsip3xq] {
    margin-bottom: 0.75rem;
}

.wl-hero-section h1[b-x7apsip3xq] {
    margin: 0;
    font-size: 2.5rem;
    color: white;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.wl-hero-section .lead[b-x7apsip3xq] {
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.1rem;
    margin-top: 0.5rem;
    margin-bottom: 0;
}

/* ── Whitelabel logo ────────────────────────────────────────────────────────── */
.wl-logo[b-x7apsip3xq] {
    width: 90px;
    height: auto;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

/* ── Old hero slot — INSIDE home-container at the ORIGINAL hero position ─────
 * The background image (WhiteLabelHeroBackgroundImageUrl) is applied here via
 * an inline style on the element. The branch image sits at bottom-right.
 */
.wl-hero-slot[b-x7apsip3xq] {
    position: relative;
    margin-bottom: 2rem;
    height: 200px;          /* fixed height — slot never grows with content */
    /* Fallback colour if no background image URL is configured */
    background-color: #e2e8f0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

/* ── Branch image (inside the old hero slot) ────────────────────────────────── */
.wl-branch-image[b-x7apsip3xq] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.28));
}

/* =============================================================================
   WHITELABEL RESPONSIVE BREAKPOINTS
   ============================================================================= */

/* ── wl-hero-section ── */

@media (min-width: 1441px) {
    .wl-hero-section[b-x7apsip3xq] {
        padding: 3.5rem 2rem;
    }

    .wl-hero-section h1[b-x7apsip3xq] {
        font-size: 3.5rem;
    }

    .wl-logo[b-x7apsip3xq] {
        width: 110px;
    }
}

@media (min-width: 1200px) and (max-width: 1440px) {
    .wl-hero-section[b-x7apsip3xq] {
        padding: 3rem 2rem;
    }

    .wl-hero-section h1[b-x7apsip3xq] {
        font-size: 3rem;
    }

    .wl-logo[b-x7apsip3xq] {
        width: 100px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .wl-hero-section h1[b-x7apsip3xq] {
        font-size: 2.75rem;
    }

    .wl-logo[b-x7apsip3xq] {
        width: 95px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .wl-hero-section h1[b-x7apsip3xq] {
        font-size: 2.25rem;
    }

    .wl-logo[b-x7apsip3xq] {
        width: 80px;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .wl-hero-section h1[b-x7apsip3xq] {
        font-size: 1.9rem;
    }

    .wl-logo[b-x7apsip3xq] {
        width: 72px;
    }
}

@media (max-width: 575px) {
    .wl-hero-section[b-x7apsip3xq] {
        padding: 1.75rem 1rem;
    }

    .wl-hero-section .hero-header[b-x7apsip3xq] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .wl-hero-section h1[b-x7apsip3xq] {
        font-size: 1.5rem;
        text-align: center;
        word-break: break-word;
    }

    .wl-hero-section .lead[b-x7apsip3xq] {
        font-size: 0.95rem;
    }

    .wl-logo[b-x7apsip3xq] {
        width: 68px;
    }
}

@media (max-width: 374px) {
    .wl-hero-section h1[b-x7apsip3xq] {
        font-size: 1.25rem;
    }

    .wl-logo[b-x7apsip3xq] {
        width: 55px;
    }
}

/* ── wl-hero-slot ── */

@media (min-width: 1441px) {
    .wl-hero-slot[b-x7apsip3xq] {
        height: 280px;      /* fixed — margin stays 1rem so base calc(100% - 2rem) adapts automatically */
    }
}

@media (min-width: 1200px) and (max-width: 1440px) {
    .wl-hero-slot[b-x7apsip3xq] {
        height: 240px;      /* fixed — margin stays 1rem, base calc adapts */
    }
}

@media (max-width: 575px) {
    .wl-hero-slot[b-x7apsip3xq] {
        height: 180px;
        margin-bottom: 1.5rem;
    }
}

@media (max-width: 374px) {
    .wl-hero-slot[b-x7apsip3xq] {
        height: 140px;
    }
}

/* ── Landscape small screens ── */
@media (orientation: landscape) and (max-height: 500px) {
    .wl-hero-section[b-x7apsip3xq] {
        padding: 1rem 1.5rem;
    }

    .wl-hero-section h1[b-x7apsip3xq] {
        font-size: 1.25rem;
    }

    .wl-logo[b-x7apsip3xq] {
        width: 50px;
    }

    .wl-hero-slot[b-x7apsip3xq] {
        height: 110px;
        border-radius: 12px;
    }
}

/* ── Accessibility ── */
@media (prefers-reduced-motion: reduce) {
    .wl-logo[b-x7apsip3xq] {
        transition: none;
    }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .wl-logo[b-x7apsip3xq] {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}
/* /Pages/Login.razor.rz.scp.css */
.login-header[b-146x6mkoaf] {
    text-align: center;
}

.logo-wrap[b-146x6mkoaf] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto 12px auto;
}

/* The key part */
.iwaa-logo[b-146x6mkoaf] {
    display: block;
    height: auto;
    width: clamp(140px, 22vw, 180px); /* scales with screen */
    max-width: 100%;
    object-fit: contain;
}

/* Extra safety for very small screens */
@media (max-width: 360px) {
    .iwaa-logo[b-146x6mkoaf] {
        width: 120px;
    }
}

/* "or" divider between password sign-in and the passkey button */
.passkey-divider[b-146x6mkoaf] {
    display: flex;
    align-items: center;
    text-align: center;
    color: #94a3b8;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 1rem 0;
}

    .passkey-divider[b-146x6mkoaf]::before,
    .passkey-divider[b-146x6mkoaf]::after {
        content: "";
        flex: 1;
        border-bottom: 1px solid #e2e8f0;
    }

    .passkey-divider span[b-146x6mkoaf] {
        padding: 0 0.75rem;
    }

.passkey-btn[b-146x6mkoaf] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
}

    .passkey-btn .bi-fingerprint[b-146x6mkoaf] {
        font-size: 1.15rem;
    }

.passkey-hint[b-146x6mkoaf] {
    margin-top: 0.5rem;
    font-size: 0.78rem;
    line-height: 1.3;
}

/* Offline unlock — offered only when the server could not be reached. Deliberately
   quieter than the password button: it is a way to carry on working, not a sign-in. */
.offline-unlock[b-146x6mkoaf] {
    margin-top: 0.25rem;
}

    .offline-unlock .passkey-btn .bi-wifi-off[b-146x6mkoaf] {
        font-size: 1.05rem;
    }

/* Post-login "set up biometric?" prompt */
.passkey-setup-backdrop[b-146x6mkoaf] {
    background: rgba(0, 0, 0, 0.5);
}

.passkey-setup-card[b-146x6mkoaf] {
    border: none;
    border-radius: 14px;
}

.passkey-setup-icon[b-146x6mkoaf] {
    width: 64px;
    height: 64px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(30, 64, 175, 0.1);
    color: #1e40af;
}

    .passkey-setup-icon .bi-fingerprint[b-146x6mkoaf] {
        font-size: 2rem;
    }

/* Build number under the sign-in box, rendered in the installed PWA only (see
   Login.razor). Quiet enough to read only when looked for, since it is there for
   support calls. */
.login-version[b-146x6mkoaf] {
    margin: 0.75rem 0 0 0;
    text-align: center;
    color: #94a3b8;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
}
/* /Pages/MeetingRoomPanel.razor.rz.scp.css */
/* Meeting-room service panel — full-screen tablet layout (nav is hidden via body.kiosk-active).
   Logical properties (inline-start/end) throughout so the Arabic RTL layout mirrors correctly. */

.mrp[b-hxrh55qe96] {
    --mrp-gap: 1rem;
    --mrp-radius: 1rem;
    --mrp-cart-width: 22rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f1f5f9;
    color: #0f172a;
}

/* ── Header ── */
.mrp-header[b-hxrh55qe96] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mrp-gap);
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #1e40af 0%, #0891b2 100%);
    color: #fff;
}

.mrp-room[b-hxrh55qe96] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-width: 0;
}

.mrp-room-icon[b-hxrh55qe96] {
    font-size: 2.25rem;
    line-height: 1;
}

.mrp-room-text[b-hxrh55qe96] {
    min-width: 0;
}

.mrp-room-name[b-hxrh55qe96] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Room names are data (often English in an Arabic UI): keep their own direction so the
       ellipsis cuts the end of the name, not the start. */
    unicode-bidi: plaintext;
}

.mrp-room-location[b-hxrh55qe96] {
    font-size: 0.95rem;
    opacity: 0.85;
}

.mrp-header-tools[b-hxrh55qe96] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.mrp-header-tools[b-hxrh55qe96]  .mrp-clock {
    font-size: 1.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ── Body: catalog + cart ── */
.mrp-body[b-hxrh55qe96] {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--mrp-cart-width);
    min-height: 0;
}

.mrp-catalog[b-hxrh55qe96] {
    padding: 1.5rem;
    overflow-y: auto;
}

.mrp-section-head[b-hxrh55qe96] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.mrp-section-title[b-hxrh55qe96] {
    margin: 0 0 1.25rem;
    font-size: 1.5rem;
    font-weight: 700;
}

.mrp-section-head .mrp-section-title[b-hxrh55qe96] {
    margin: 0;
}

.mrp-back[b-hxrh55qe96] {
    min-height: 3rem;
    border-radius: 0.75rem;
}

.mrp-grid[b-hxrh55qe96] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: var(--mrp-gap);
}

/* ── Tiles ── */
.mrp-tile[b-hxrh55qe96] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    min-height: 11rem;
    padding: 1rem;
    border: 2px solid transparent;
    border-radius: var(--mrp-radius);
    background: #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    text-align: center;
    color: inherit;
    transition: transform 0.1s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    touch-action: manipulation;
}

/* Item tiles sit in a wrapper so the quick "−" button can be a sibling of the tile button. */
.mrp-tile-wrap[b-hxrh55qe96] {
    position: relative;
    display: flex;
}

    .mrp-tile-wrap > .mrp-tile[b-hxrh55qe96] {
        flex: 1;
    }

.mrp-tile-decrease[b-hxrh55qe96] {
    /* Mirrors .mrp-tile-badge (same size, offset by the tile's 2px border because this button
       is positioned against the wrapper, not the tile) so the two sit on one line. */
    position: absolute;
    top: calc(0.5rem + 2px);
    inset-inline-start: calc(0.5rem + 2px);
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 2px solid #16a34a;
    border-radius: 50%;
    background: #fff;
    color: #16a34a;
    touch-action: manipulation;
}

    /* Keeps a finger-sized hit area around the small visible circle. */
    .mrp-tile-decrease[b-hxrh55qe96]::before {
        content: "";
        position: absolute;
        inset: -0.5rem;
    }

    .mrp-tile-decrease svg[b-hxrh55qe96] {
        display: block;
        width: 1rem;
        height: 1rem;
        fill: currentColor;
    }

    .mrp-tile-decrease:active[b-hxrh55qe96] {
        transform: scale(0.92);
        background: #f0fdf4;
    }

    .mrp-tile-decrease:focus-visible[b-hxrh55qe96] {
        outline: 3px solid #2563eb;
        outline-offset: 2px;
    }

.mrp-tile:active[b-hxrh55qe96] {
    transform: scale(0.97);
}

.mrp-tile:focus-visible[b-hxrh55qe96] {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
}

.mrp-item-tile.selected[b-hxrh55qe96] {
    border-color: #16a34a;
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.25);
}

.mrp-tile-image[b-hxrh55qe96] {
    width: 5.5rem;
    height: 5.5rem;
    object-fit: cover;
    border-radius: 0.75rem;
}

.mrp-tile-icon[b-hxrh55qe96] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 0.75rem;
    background: #e0f2fe;
    color: #0369a1;
    font-size: 2.5rem;
}

.mrp-tile-name[b-hxrh55qe96] {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.25;
}

.mrp-tile-description[b-hxrh55qe96] {
    font-size: 0.85rem;
    color: #64748b;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mrp-tile-meta[b-hxrh55qe96] {
    font-size: 0.9rem;
    color: #475569;
    margin-top: auto;
}

.mrp-tile-badge[b-hxrh55qe96] {
    position: absolute;
    top: 0.5rem;
    inset-inline-end: 0.5rem;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    background: #16a34a;
    color: #fff;
    font-weight: 700;
}

/* ── Cart ── */
.mrp-cart[b-hxrh55qe96] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
    background: #fff;
    border-inline-start: 1px solid #e2e8f0;
    overflow-y: auto;
}

.mrp-cart-head[b-hxrh55qe96] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mrp-cart-title[b-hxrh55qe96] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.mrp-cart-close[b-hxrh55qe96] {
    display: none;
}

.mrp-cart-empty[b-hxrh55qe96] {
    color: #64748b;
    margin: 1rem 0;
}

.mrp-cart-lines[b-hxrh55qe96] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mrp-cart-line[b-hxrh55qe96] {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f1f5f9;
}

.mrp-cart-line-main[b-hxrh55qe96] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.mrp-cart-line-text[b-hxrh55qe96] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mrp-cart-line-name[b-hxrh55qe96] {
    font-weight: 600;
}

.mrp-cart-line-category[b-hxrh55qe96] {
    font-size: 0.8rem;
    color: #64748b;
}

.mrp-cart-line-info[b-hxrh55qe96] {
    margin-top: 0.5rem;
}

.mrp-stepper[b-hxrh55qe96] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.mrp-stepper .btn[b-hxrh55qe96] {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border-radius: 50%;
}

.mrp-stepper-value[b-hxrh55qe96] {
    min-width: 2rem;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.mrp-notes-label[b-hxrh55qe96] {
    margin: 0.25rem 0 0;
    font-weight: 600;
}

.mrp-seat-row[b-hxrh55qe96] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.mrp-seat[b-hxrh55qe96] {
    flex: 1;
    min-width: 0;
    min-height: 2.75rem;
    font-size: 1.05rem;
}

.mrp-seat-add[b-hxrh55qe96] {
    margin-top: 0.25rem;
    padding: 0.5rem 0;
    min-height: 2.75rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.mrp-icon-btn[b-hxrh55qe96] {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mrp-seat-hint[b-hxrh55qe96] {
    margin: 0;
    font-size: 0.9rem;
    color: #64748b;
}

.mrp-cart-error[b-hxrh55qe96] {
    margin: 0;
}

.mrp-submit[b-hxrh55qe96] {
    margin-top: auto;
    min-height: 3.75rem;
    border-radius: 0.875rem;
    font-size: 1.2rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.mrp-cart-bar[b-hxrh55qe96] {
    display: none;
}

/* ── Full-screen states (loading, unavailable, empty, success) ── */
.mrp-state[b-hxrh55qe96] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem 1rem;
    text-align: center;
}

.mrp-state-icon[b-hxrh55qe96] {
    font-size: 4.5rem;
    color: #94a3b8;
}

.mrp-state-title[b-hxrh55qe96] {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
}

.mrp-state-text[b-hxrh55qe96] {
    margin: 0;
    max-width: 32rem;
    font-size: 1.1rem;
    color: #475569;
}

.mrp-success-icon[b-hxrh55qe96] {
    font-size: 6rem;
    color: #16a34a;
}

.mrp-success-number[b-hxrh55qe96] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #1e40af;
}

.mrp-countdown[b-hxrh55qe96] {
    margin: 0;
    color: #94a3b8;
}

/* Arrow/send glyphs point the reading direction. */
[dir="rtl"] .mrp-flip-rtl[b-hxrh55qe96] {
    display: inline-block;
    transform: scaleX(-1);
}

/* ── Portrait tablets / phones: cart becomes a slide-up sheet ── */
@media (max-width: 991.98px) {
    .mrp-header[b-hxrh55qe96] {
        padding: 0.75rem 1rem;
    }

    .mrp-room-name[b-hxrh55qe96] {
        font-size: 1.35rem;
        white-space: normal;
    }

    .mrp-header-tools[b-hxrh55qe96]  .mrp-clock {
        font-size: 1.25rem;
    }

    .mrp-body[b-hxrh55qe96] {
        grid-template-columns: minmax(0, 1fr);
    }

    .mrp-catalog[b-hxrh55qe96] {
        padding: 1rem 1rem 6rem;
    }

    .mrp-grid[b-hxrh55qe96] {
        grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    }

    .mrp-cart[b-hxrh55qe96] {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 1040;
        max-height: 80vh;
        border-inline-start: none;
        border-radius: 1.25rem 1.25rem 0 0;
        box-shadow: 0 -8px 30px rgba(15, 23, 42, 0.25);
        transform: translateY(105%);
        transition: transform 0.2s ease;
    }

    .mrp-cart.open[b-hxrh55qe96] {
        transform: translateY(0);
    }

    .mrp-cart-close[b-hxrh55qe96] {
        display: inline-block;
    }

    .mrp-cart-bar[b-hxrh55qe96] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        position: fixed;
        inset-inline: 1rem;
        bottom: 1rem;
        z-index: 1030;
        min-height: 3.5rem;
        border-radius: 0.875rem;
        box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
    }
}
/* /Pages/OfflineQueuePage.razor.rz.scp.css */
.queue-error[b-fmje9bz24e] {
    color: var(--bs-danger, #dc3545);
    word-break: break-word;
    max-width: 22rem;
}
/* /Pages/Orders/AllServiceRequests.razor.rz.scp.css */
.border-indigo[b-qu4v6jgf45] {
    border-color: #6610f2 !important;
}

.border-orange[b-qu4v6jgf45] {
    border-color: #fd7e14 !important;
}

.border-teal[b-qu4v6jgf45] {
    border-color: #20c997 !important;
}

.border-purple[b-qu4v6jgf45] {
    border-color: #6f42c1 !important;
}

.border-dark[b-qu4v6jgf45] {
    border-color: #212529 !important;
}

.filter-content-area[b-qu4v6jgf45] {
    min-height: 220px;
}

/* /Pages/Orders/MyServiceRequests.razor.rz.scp.css */
.request-card[b-si6kc20jqn] {
    transition: transform 0.2s, box-shadow 0.2s;
}

    .request-card:hover[b-si6kc20jqn] {
        transform: translateY(-5px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }

    .request-card.border-success[b-si6kc20jqn] {
        border-left: 4px solid #28a745;
    }

    .request-card.border-danger[b-si6kc20jqn] {
        border-left: 4px solid #dc3545;
    }

    .request-card.border-warning[b-si6kc20jqn] {
        border-left: 4px solid #ffc107;
    }

    .request-card.border-primary[b-si6kc20jqn] {
        border-left: 4px solid #007bff;
    }

/* Rejected/replaced items in the card's item list — dim the line and
   strike through the name so the requester can see what was changed. */
.my-item-inactive[b-si6kc20jqn] {
    opacity: 0.65;
}

.my-item-inactive .my-item-name[b-si6kc20jqn] {
    text-decoration: line-through;
}

@media (prefers-color-scheme: dark) {
    .my-item-inactive[b-si6kc20jqn] {
        opacity: 0.75;
    }
}
/* /Pages/Orders/NewServiceRequest.razor.rz.scp.css */
.item-card > .d-flex[b-qchda6jcqp] {
    flex-direction: row !important;
}

.item-header-row[b-qchda6jcqp] {
    justify-content: space-between !important;
    flex-direction: row !important;
    width: 100%;
}

    .item-header-row .btn-danger[b-qchda6jcqp] {
        width: 36px;
        height: 36px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }

.item-card[b-qchda6jcqp] {
    background: #fff;
}

.closeBtn[b-qchda6jcqp] {
    color: #fff;
    font-size: 1.5em;
}

/* Menu Item Grid with Images */
.menu-item-grid[b-qchda6jcqp] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-top: 8px;
    align-items: stretch;
}

.menu-item-option[b-qchda6jcqp] {
    display: grid;
    grid-template-rows: 88px 1fr 36px;
    row-gap: 0.5rem;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    position: relative;
    background: white;
    box-sizing: border-box;
    min-height: 200px;
}

    .menu-item-option:hover[b-qchda6jcqp] {
        border-color: #2563eb;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
    }

    .menu-item-option.selected[b-qchda6jcqp] {
        border-color: #10b981;
        background: #f0fdf4;
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
    }

.menu-item-image-container[b-qchda6jcqp] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
    background: #f8fafc;
}

.menu-item-image[b-qchda6jcqp] {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.menu-item-name[b-qchda6jcqp] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #1e293b;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-item-check[b-qchda6jcqp] {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 1.25rem;
}

.menu-item-action[b-qchda6jcqp] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-item-qty[b-qchda6jcqp] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

    .menu-item-qty .btn[b-qchda6jcqp] {
        width: 28px;
        height: 28px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }

    .menu-item-qty .badge[b-qchda6jcqp] {
        min-width: 28px;
        padding: 0.35rem 0.55rem;
        font-size: 0.85rem;
    }

/* ── View-mode toggle ── */
.view-mode-toggle .btn[b-qchda6jcqp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.55rem;
    line-height: 1;
}

    .view-mode-toggle .btn i[b-qchda6jcqp] {
        font-size: 0.95rem;
    }

/* ── Compact view: smaller tiles, more per row ── */
.menu-item-grid.view-compact[b-qchda6jcqp] {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
}

    .menu-item-grid.view-compact .menu-item-option[b-qchda6jcqp] {
        grid-template-rows: 64px 1fr 34px;
        min-height: 150px;
        padding: 8px;
        border-radius: 10px;
        overflow: hidden;
    }

    .menu-item-grid.view-compact .menu-item-name[b-qchda6jcqp] {
        font-size: 0.75rem;
        line-height: 1.15;
    }

    .menu-item-grid.view-compact .menu-item-check[b-qchda6jcqp] {
        top: 4px;
        right: 4px;
        font-size: 1rem;
    }

    .menu-item-grid.view-compact .menu-item-action[b-qchda6jcqp] {
        overflow: hidden;
    }

    .menu-item-grid.view-compact .menu-item-qty[b-qchda6jcqp] {
        max-width: 100%;
        background: #f1f5f9;
        border-radius: 999px;
        padding: 2px 4px;
        gap: 0.2rem;
    }

        .menu-item-grid.view-compact .menu-item-qty .btn[b-qchda6jcqp] {
            width: 22px;
            height: 22px;
            border-width: 1px;
        }

        .menu-item-grid.view-compact .menu-item-qty .badge[b-qchda6jcqp] {
            min-width: 18px;
            padding: 0.2rem 0.35rem;
            font-size: 0.7rem;
        }

/* ── List view: one-line rows, maximum density ── */
.menu-item-grid.view-list[b-qchda6jcqp] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .menu-item-grid.view-list .menu-item-option[b-qchda6jcqp] {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.65rem;
        text-align: left;
        padding: 6px 10px;
        min-height: 56px;
        border-radius: 10px;
        overflow: hidden;
    }

    .menu-item-grid.view-list .menu-item-image-container[b-qchda6jcqp] {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        border-radius: 6px;
    }

    .menu-item-grid.view-list .menu-item-name[b-qchda6jcqp] {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 0.9rem;
        justify-content: flex-start;
        text-align: left;
        line-height: 1.25;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .menu-item-grid.view-list .menu-item-check[b-qchda6jcqp] {
        position: static;
        flex: 0 0 auto;
        font-size: 1.2rem;
        margin: 0;
    }

    .menu-item-grid.view-list .menu-item-action[b-qchda6jcqp] {
        flex: 0 0 auto;
        justify-content: flex-end;
    }

        .menu-item-grid.view-list .menu-item-action:empty[b-qchda6jcqp] {
            display: none;
        }

    .menu-item-grid.view-list .menu-item-qty[b-qchda6jcqp] {
        background: #f1f5f9;
        border-radius: 999px;
        padding: 2px 4px;
        gap: 0.2rem;
    }

        .menu-item-grid.view-list .menu-item-qty .btn[b-qchda6jcqp] {
            width: 24px;
            height: 24px;
            border-width: 1px;
        }

        .menu-item-grid.view-list .menu-item-qty .badge[b-qchda6jcqp] {
            min-width: 20px;
            padding: 0.2rem 0.4rem;
            font-size: 0.75rem;
        }

/* ── Validation states ── */

.form-control.is-invalid[b-qchda6jcqp],
.form-select.is-invalid[b-qchda6jcqp] {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.15);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control[b-qchda6jcqp],
.form-select[b-qchda6jcqp] {
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.menu-item-grid-invalid[b-qchda6jcqp] {
    border: 2px solid #dc3545;
    border-radius: 12px;
    padding: 8px;
    animation: shake 0.3s ease-in-out;
}

@@keyframes shake {
    0%[b-qchda6jcqp], 100%[b-qchda6jcqp] { transform: translateX(0); }
    25%[b-qchda6jcqp]       { transform: translateX(-4px); }
    75%[b-qchda6jcqp]       { transform: translateX(4px); }
}

/* ── Collapsed item summary ── */
.collapsed-item[b-qchda6jcqp] {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #10b981;
    border-radius: .75rem;
    padding: .6rem .75rem;
    margin-bottom: .75rem;
    cursor: pointer;
    transition: all .2s ease;
}

    .collapsed-item:hover[b-qchda6jcqp] {
        border-color: #93c5fd;
        border-left-color: #2563eb;
        box-shadow: 0 2px 10px rgba(37, 99, 235, .1);
    }

.collapsed-item-img[b-qchda6jcqp] {
    width: 48px;
    height: 48px;
    border-radius: .6rem;
    overflow: hidden;
    flex-shrink: 0;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .collapsed-item-img img[b-qchda6jcqp] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .collapsed-item-img i[b-qchda6jcqp] {
        font-size: 1.3rem;
        color: #2563eb;
    }

.collapsed-item-info[b-qchda6jcqp] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.collapsed-item-name[b-qchda6jcqp] {
    font-weight: 700;
    font-size: .88rem;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.collapsed-item-cat[b-qchda6jcqp] {
    font-size: .72rem;
    color: #6b7280;
    font-weight: 500;
    line-height: 1.3;
}

.collapsed-item-pref[b-qchda6jcqp] {
    font-size: .7rem;
    color: #9ca3af;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

    .collapsed-item-pref i[b-qchda6jcqp] {
        font-size: .6rem;
        margin-right: 2px;
    }

.collapsed-item-qty[b-qchda6jcqp] {
    display: flex;
    align-items: center;
    border: 1.5px solid #e5e7eb;
    border-radius: 1.5rem;
    overflow: hidden;
    flex-shrink: 0;
    background: #f9fafb;
}

.collapsed-item-qty-btn[b-qchda6jcqp] {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: #374151;
    font-size: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .15s;
}

    .collapsed-item-qty-btn:hover[b-qchda6jcqp] {
        background: #2563eb;
        color: #fff;
    }

.collapsed-item-qty-val[b-qchda6jcqp] {
    min-width: 24px;
    text-align: center;
    font-size: .88rem;
    font-weight: 700;
    color: #1f2937;
}

.collapsed-item-remove[b-qchda6jcqp] {
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

.collapsed-item-edit[b-qchda6jcqp] {
    color: #9ca3af;
    font-size: .9rem;
    transition: color .2s;
    flex-shrink: 0;
}

.collapsed-item:hover .collapsed-item-edit[b-qchda6jcqp] {
    color: #2563eb;
}

/* Responsive adjustments */
@@media (max-width: 768px) {
    .menu-item-grid[b-qchda6jcqp] {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 8px;
    }

    .menu-item-option[b-qchda6jcqp] {
        grid-template-rows: 70px 1fr 32px;
        min-height: 170px;
    }

    .menu-item-name[b-qchda6jcqp] {
        font-size: 0.75rem;
    }

    .menu-item-grid.view-compact[b-qchda6jcqp] {
        grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
        gap: 6px;
    }

        .menu-item-grid.view-compact .menu-item-option[b-qchda6jcqp] {
            grid-template-rows: 56px 1fr 32px;
            min-height: 130px;
            padding: 6px;
        }

        .menu-item-grid.view-compact .menu-item-name[b-qchda6jcqp] {
            font-size: 0.7rem;
        }

    .menu-item-grid.view-list .menu-item-option[b-qchda6jcqp] {
        gap: 0.5rem;
        padding: 5px 8px;
        min-height: 50px;
    }

    .menu-item-grid.view-list .menu-item-image-container[b-qchda6jcqp] {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
    }

    .menu-item-grid.view-list .menu-item-name[b-qchda6jcqp] {
        font-size: 0.82rem;
    }

    .collapsed-item-img[b-qchda6jcqp] {
        width: 40px;
        height: 40px;
    }

    .collapsed-item-name[b-qchda6jcqp] {
        font-size: .8rem;
    }
}

/* ===== Dark Mode ===== */
@media (prefers-color-scheme: dark) {
    .item-card[b-qchda6jcqp] {
        background: var(--card-bg) !important;
    }

    .menu-item-option[b-qchda6jcqp] {
        background: #2a2a3d !important;
        border-color: var(--border-color) !important;
    }

    .menu-item-option:hover[b-qchda6jcqp] {
        border-color: #60a5fa !important;
        box-shadow: 0 4px 12px rgba(96, 165, 250, 0.2) !important;
    }

    .menu-item-option.selected[b-qchda6jcqp] {
        border-color: #10b981 !important;
        background: rgba(16, 185, 129, 0.1) !important;
    }

    .menu-item-image-container[b-qchda6jcqp] {
        background: #1e1e2e !important;
    }

    .menu-item-name[b-qchda6jcqp] {
        color: var(--text-primary) !important;
    }

    .collapsed-item[b-qchda6jcqp] {
        background: var(--card-bg) !important;
        border-color: var(--border-color) !important;
    }

    .collapsed-item:hover[b-qchda6jcqp] {
        border-color: #60a5fa !important;
        box-shadow: 0 2px 10px rgba(96, 165, 250, 0.15) !important;
    }

    .collapsed-item-img[b-qchda6jcqp] {
        background: #2a2a3d !important;
    }

    .collapsed-item-img i[b-qchda6jcqp] {
        color: #60a5fa !important;
    }

    .collapsed-item-name[b-qchda6jcqp] {
        color: var(--text-primary) !important;
    }

    .collapsed-item-cat[b-qchda6jcqp] {
        color: var(--text-secondary) !important;
    }

    .collapsed-item-pref[b-qchda6jcqp] {
        color: #64748b !important;
    }

    .collapsed-item-qty[b-qchda6jcqp] {
        border-color: var(--border-color) !important;
        background: #2a2a3d !important;
    }

    .collapsed-item-qty-btn[b-qchda6jcqp] {
        color: var(--text-primary) !important;
    }

    .collapsed-item-qty-btn:hover[b-qchda6jcqp] {
        background: #3b82f6 !important;
        color: #fff !important;
    }

    .collapsed-item-qty-val[b-qchda6jcqp] {
        color: var(--text-primary) !important;
    }

    .collapsed-item-edit[b-qchda6jcqp] {
        color: #64748b !important;
    }

    .collapsed-item:hover .collapsed-item-edit[b-qchda6jcqp] {
        color: #60a5fa !important;
    }

    .menu-item-grid.view-compact .menu-item-qty[b-qchda6jcqp],
    .menu-item-grid.view-list .menu-item-qty[b-qchda6jcqp] {
        background: rgba(255, 255, 255, 0.08) !important;
    }
}

.restaurant-menu-picker[b-qchda6jcqp] {
    background: #fafbfc;
}

.menu-picker-items[b-qchda6jcqp] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
}

.menu-picker-item-card[b-qchda6jcqp] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.5rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.menu-picker-item-card.selected[b-qchda6jcqp] {
    border-color: #0d6efd;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.15);
}

.menu-picker-item-name[b-qchda6jcqp] {
    font-weight: 600;
    font-size: 0.95rem;
}

.menu-picker-item-desc[b-qchda6jcqp] {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.3;
}

.menu-picker-item-price[b-qchda6jcqp] {
    font-weight: 700;
    color: #0d6efd;
    margin-top: 0.25rem;
}

.menu-picker-item-qty[b-qchda6jcqp] {
    display: flex;
    justify-content: flex-end;
}

/* /Pages/Orders/NewServiceRequestKiosk.razor.rz.scp.css */
/* ── Validation states ── */
.spinner-large[b-dwwlksya2k] {
    width: 3rem;
    height: 3rem;
}

.kiosk-extras-mt[b-dwwlksya2k] {
    margin-top: 0.75rem;
}

.form-control.is-invalid[b-dwwlksya2k],
.form-select.is-invalid[b-dwwlksya2k] {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.15);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control[b-dwwlksya2k],
.form-select[b-dwwlksya2k] {
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.menu-item-grid-invalid[b-dwwlksya2k] {
    border: 2px solid #dc3545;
    border-radius: 12px;
    padding: 8px;
    animation: shake 0.3s ease-in-out;
}

@@keyframes shake {
    0%[b-dwwlksya2k], 100%[b-dwwlksya2k] { transform: translateX(0); }
    25%[b-dwwlksya2k]       { transform: translateX(-4px); }
    75%[b-dwwlksya2k]       { transform: translateX(4px); }
}

/* =========================================================
   KIOSK MODE — New Service Request attractive layout
   ========================================================= */

.kiosk-new-wrapper[b-dwwlksya2k] {
    max-width: 800px;
    margin: 0 auto;
    padding-bottom: 2rem;
}

.kiosk-new-topbar[b-dwwlksya2k] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 0.75rem;
}

/* ── Hero banner ── */
.kiosk-new-hero[b-dwwlksya2k] {
    text-align: center;
    border-radius: 1.5rem;
    margin-bottom: 1.75rem;
    color: #fff;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1e40af 100%);
    box-shadow: 0 12px 32px rgba(30, 64, 175, 0.18);
}

    .kiosk-new-hero[b-dwwlksya2k]::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .18) 0%, transparent 60%);
        pointer-events: none;
        z-index: 0;
    }

.kiosk-new-hero-body[b-dwwlksya2k] {
    position: relative;
    z-index: 1;
    padding: 2rem 1.5rem 1.75rem;
}

/* When a branch banner is present, body sits below it on a solid panel */
.kiosk-new-hero--has-banner .kiosk-new-hero-body[b-dwwlksya2k] {
    background: linear-gradient(180deg, rgba(30, 64, 175, 0.92) 0%, #1e40af 35%, #1e3a8a 100%);
    padding-top: 1.5rem;
}

/* ── Branch image banner ── */
.kiosk-new-hero-banner[b-dwwlksya2k] {
    position: relative;
    width: 100%;
    height: 160px;
    overflow: hidden;
    z-index: 0;
}

    .kiosk-new-hero-banner img[b-dwwlksya2k] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        animation: kiosk-new-banner-zoom 14s ease-in-out infinite alternate;
    }

.kiosk-new-hero-banner-fade[b-dwwlksya2k] {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(30, 64, 175, 0) 0%, rgba(30, 64, 175, 0.15) 55%, rgba(30, 64, 175, 0.85) 100%);
}

@@keyframes kiosk-new-banner-zoom {
    0%[b-dwwlksya2k]   { transform: scale(1); }
    100%[b-dwwlksya2k] { transform: scale(1.06); }
}

/* ── Hero icon (fallback when no logo and no banner) ── */
.kiosk-new-hero-icon[b-dwwlksya2k] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    backdrop-filter: blur(4px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: .75rem;
    animation: kiosk-new-pulse 2s ease-in-out infinite;
}

/* ── Hero logo — clean centered design (no overlap, no positioning bug) ── */
.kiosk-new-hero-logo[b-dwwlksya2k] {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .7rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 0 0 4px rgba(255, 255, 255, 0.45);
    transition: transform .3s ease;
}

    .kiosk-new-hero-logo:hover[b-dwwlksya2k] {
        transform: translateY(-2px) scale(1.02);
    }

    .kiosk-new-hero-logo img[b-dwwlksya2k] {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
    }

/* When the banner is present, lift the logo up so it crowns the body section */
.kiosk-new-hero--has-banner .kiosk-new-hero-logo[b-dwwlksya2k] {
    margin-top: -3.25rem;
    margin-bottom: .85rem;
}

@@keyframes kiosk-new-pulse {
    0%[b-dwwlksya2k], 100%[b-dwwlksya2k] { box-shadow: 0 0 0 0 rgba(255, 255, 255, .3); }
    50%[b-dwwlksya2k]      { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); }
}

/* ── Brand name (white-label) ── */
.kiosk-new-hero-brand[b-dwwlksya2k] {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: .03em;
    color: #ffffff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    margin-top: .25rem;
    margin-bottom: .15rem;
    line-height: 1.2;
}

.kiosk-new-hero-title[b-dwwlksya2k] {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: .03em;
}

.kiosk-new-hero-brand + .kiosk-new-hero-title[b-dwwlksya2k] {
    font-size: .95rem;
    font-weight: 600;
    opacity: .8;
    text-transform: uppercase;
    letter-spacing: .14em;
    margin-top: .15rem;
}

.kiosk-new-hero-sub[b-dwwlksya2k] {
    font-size: .95rem;
    opacity: .85;
    margin-top: .35rem;
}

.kiosk-new-hero-badges[b-dwwlksya2k] {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-top: 1rem;
}

.kiosk-new-schedule-badge[b-dwwlksya2k] {
    background: rgba(255,255,255,.2);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,.3);
    padding: .4rem 1rem;
    border-radius: 2rem;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
}

    .kiosk-new-schedule-badge:hover[b-dwwlksya2k] {
        background: rgba(255,255,255,.3);
    }

.kiosk-new-schedule-picker[b-dwwlksya2k] {
    max-width: 280px;
    margin: 0 auto;
}

    .kiosk-new-schedule-picker .form-control[b-dwwlksya2k] {
        background: rgba(255,255,255,.15);
        border: 1px solid rgba(255,255,255,.3);
        color: #fff;
        border-radius: .75rem;
    }

        .kiosk-new-schedule-picker .form-control:focus[b-dwwlksya2k] {
            background: rgba(255,255,255,.25);
            border-color: rgba(255,255,255,.5);
            box-shadow: 0 0 0 3px rgba(255,255,255,.15);
        }

/* ── Step indicator ── */
.kiosk-new-steps[b-dwwlksya2k] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    margin-bottom: 1.75rem;
    padding: .5rem 0;
}

.kiosk-new-step[b-dwwlksya2k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 72px;
}

.kiosk-new-step-num[b-dwwlksya2k] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    background: #e5e7eb;
    color: #9ca3af;
    border: 3px solid #e5e7eb;
    transition: all .3s ease;
}

.kiosk-new-step--active .kiosk-new-step-num[b-dwwlksya2k] {
    background: rgba(var(--bs-primary-rgb));
    border-color: rgba(var(--bs-primary-rgb));
    color: #fff;
    box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), .2);
    animation: kiosk-new-step-glow 1.5s ease-in-out infinite;
}

@@keyframes kiosk-new-step-glow {
    0%[b-dwwlksya2k], 100%[b-dwwlksya2k] { box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), .2); }
    50%[b-dwwlksya2k]      { box-shadow: 0 0 0 8px rgba(var(--bs-primary-rgb), .1); }
}

.kiosk-new-step-label[b-dwwlksya2k] {
    font-size: .72rem;
    font-weight: 600;
    color: #9ca3af;
    margin-top: 6px;
    text-align: center;
}

.kiosk-new-step--active .kiosk-new-step-label[b-dwwlksya2k] {
    color: rgba(var(--bs-primary-rgb));
    font-weight: 700;
}

.kiosk-new-step-line[b-dwwlksya2k] {
    flex: 1;
    height: 3px;
    background: #e5e7eb;
    margin-top: 19px;
    min-width: 32px;
    border-radius: 2px;
    transition: background .3s ease;
}

.kiosk-new-step-line--done[b-dwwlksya2k] {
    background: rgba(var(--bs-primary-rgb));
}

/* ── Section title ── */
.kiosk-new-section-title[b-dwwlksya2k] {
    font-weight: 700;
    font-size: 1.1rem;
    color: #1f2937;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

/* ── Category tiles ── */
.kiosk-new-category-grid[b-dwwlksya2k] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 1.5rem;
}

.kiosk-new-category-tile[b-dwwlksya2k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 1.2rem 1rem 1rem;
    border-radius: 1rem;
    border: 2px solid #e5e7eb;
    background: #fff;
    cursor: pointer;
    transition: all .25s ease;
    text-align: center;
    min-height: 180px;
}

    .kiosk-new-category-tile:hover[b-dwwlksya2k] {
        border-color: #60a5fa;
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(37, 99, 235, .15);
    }

    .kiosk-new-category-tile:active[b-dwwlksya2k] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(37, 99, 235, .2);
    }

.kiosk-new-category-icon[b-dwwlksya2k] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #2563eb;
    margin-bottom: .6rem;
    transition: all .25s ease;
}

.kiosk-new-category-tile:hover .kiosk-new-category-icon[b-dwwlksya2k] {
    background: linear-gradient(135deg, #2563eb, #1e40af);
    color: #fff;
}

.kiosk-new-category-img[b-dwwlksya2k] {
    width: 150px;
    height: 150px;
    border-radius: 12px;
    object-fit: cover;
    margin-bottom: .6rem;
    transition: all .25s ease;
    border: 2px solid #e5e7eb;
    flex-shrink: 0;
}

.kiosk-new-category-tile:hover .kiosk-new-category-img[b-dwwlksya2k] {
    border-color: #2563eb;
    transform: scale(1.05);
}

.kiosk-new-category-name[b-dwwlksya2k] {
    font-weight: 600;
    font-size: .9rem;
    color: #374151;
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.4em;
}

/* ── Collapsed item summary ── */
.kiosk-collapsed-item[b-dwwlksya2k] {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #10b981;
    border-radius: .75rem;
    padding: .6rem .75rem;
    margin-bottom: .75rem;
    cursor: pointer;
    transition: all .2s ease;
}

    .kiosk-collapsed-item:hover[b-dwwlksya2k] {
        border-color: #93c5fd;
        border-left-color: #2563eb;
        box-shadow: 0 2px 10px rgba(37, 99, 235, .1);
    }

.kiosk-collapsed-img[b-dwwlksya2k] {
    width: 48px;
    height: 48px;
    border-radius: .6rem;
    overflow: hidden;
    flex-shrink: 0;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .kiosk-collapsed-img img[b-dwwlksya2k] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .kiosk-collapsed-img i[b-dwwlksya2k] {
        font-size: 1.3rem;
        color: #2563eb;
    }

.kiosk-collapsed-info[b-dwwlksya2k] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.kiosk-collapsed-name[b-dwwlksya2k] {
    font-weight: 700;
    font-size: .88rem;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.kiosk-collapsed-cat[b-dwwlksya2k] {
    font-size: .72rem;
    color: #6b7280;
    font-weight: 500;
    line-height: 1.3;
}

.kiosk-collapsed-pref[b-dwwlksya2k] {
    font-size: .7rem;
    color: #9ca3af;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

    .kiosk-collapsed-pref i[b-dwwlksya2k] {
        font-size: .6rem;
        margin-right: 2px;
    }

.kiosk-collapsed-price[b-dwwlksya2k] {
    font-size: .72rem;
    color: #2563eb;
    font-weight: 600;
    line-height: 1.3;
}

.kiosk-collapsed-qty[b-dwwlksya2k] {
    display: flex;
    align-items: center;
    border: 1.5px solid #e5e7eb;
    border-radius: 1.5rem;
    overflow: hidden;
    flex-shrink: 0;
    background: #f9fafb;
}

.kiosk-collapsed-qty-btn[b-dwwlksya2k] {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: #374151;
    font-size: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .15s;
}

    .kiosk-collapsed-qty-btn:hover[b-dwwlksya2k] {
        background: #2563eb;
        color: #fff;
    }

.kiosk-collapsed-qty-val[b-dwwlksya2k] {
    min-width: 24px;
    text-align: center;
    font-size: .88rem;
    font-weight: 700;
    color: #1f2937;
}

.kiosk-collapsed-edit[b-dwwlksya2k] {
    color: #9ca3af;
    font-size: .9rem;
    transition: color .2s;
    flex-shrink: 0;
}

.kiosk-collapsed-item:hover .kiosk-collapsed-edit[b-dwwlksya2k] {
    color: #2563eb;
}

/* ── Item section (per item) ── */
.kiosk-new-item-section[b-dwwlksya2k] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

.kiosk-new-item-header[b-dwwlksya2k] {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
}

.kiosk-new-item-badge[b-dwwlksya2k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .25rem .75rem;
    border-radius: 2rem;
    background: rgba(var(--bs-primary-rgb));
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.kiosk-new-item-cat-label[b-dwwlksya2k] {
    font-weight: 600;
    color: #2563eb;
    font-size: .95rem;
}

.kiosk-new-remove-btn[b-dwwlksya2k] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #fee2e2;
    color: #ef4444;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s;
    font-size: .85rem;
}

    .kiosk-new-remove-btn:hover[b-dwwlksya2k] {
        background: #ef4444;
        color: #fff;
    }

/* ── Category quick-switch chips ── */
.kiosk-new-cat-switch[b-dwwlksya2k] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}

.kiosk-new-cat-chip[b-dwwlksya2k] {
    padding: .4rem 1rem;
    border-radius: 2rem;
    border: 2px solid #e5e7eb;
    background: #fff;
    color: #6b7280;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
}

    .kiosk-new-cat-chip:hover[b-dwwlksya2k] {
        border-color: #60a5fa;
        color: #2563eb;
    }

.kiosk-new-cat-chip--active[b-dwwlksya2k] {
    background: rgba(var(--bs-primary-rgb));
    border-color: #2563eb;
    color: #fff;
}

    .kiosk-new-cat-chip--active:hover[b-dwwlksya2k] {
        border-color: #1e40af;
        color: #fff;
    }

/* ── Menu items grid ── */
.kiosk-new-items-grid[b-dwwlksya2k] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 1rem;
}

.kiosk-new-menu-card[b-dwwlksya2k] {
    border: 2px solid #e5e7eb;
    border-radius: 1rem;
    padding: 12px;
    cursor: pointer;
    transition: all .25s ease;
    text-align: center;
    position: relative;
    background: #fafafa;
}

    .kiosk-new-menu-card:hover[b-dwwlksya2k] {
        border-color: #60a5fa;
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(37, 99, 235, .12);
    }

.kiosk-new-menu-card--selected[b-dwwlksya2k] {
    border-color: #10b981;
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    box-shadow: 0 4px 16px rgba(16, 185, 129, .15);
}

    .kiosk-new-menu-card--selected:hover[b-dwwlksya2k] {
        border-color: #059669;
    }

.kiosk-new-menu-img[b-dwwlksya2k] {
    width: 100%;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    overflow: hidden;
    border-radius: .75rem;
    background: #f1f5f9;
}

    .kiosk-new-menu-img img[b-dwwlksya2k] {
        max-width: 100%;
        max-height: 100%;
        object-fit: cover;
        border-radius: .75rem;
    }

.kiosk-new-menu-name[b-dwwlksya2k] {
    font-size: .85rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.3;
}

.kiosk-new-menu-check[b-dwwlksya2k] {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 1.25rem;
    color: #10b981;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.1));
}

/* ── Other input ── */
.kiosk-new-other-input[b-dwwlksya2k] {
    margin-bottom: 1rem;
}

    .kiosk-new-other-input .form-control[b-dwwlksya2k] {
        border-radius: .75rem;
        border: 2px solid #e5e7eb;
    }

        .kiosk-new-other-input .form-control:focus[b-dwwlksya2k] {
            border-color: #60a5fa;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
        }

/* ── Quantity row ── */
.kiosk-new-qty-row[b-dwwlksya2k] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: .75rem;
    flex-wrap: wrap;
}

.kiosk-new-qty-control[b-dwwlksya2k] {
    display: flex;
    align-items: center;
    gap: 0;
    border: 2px solid #e5e7eb;
    border-radius: 2rem;
    overflow: hidden;
    flex-shrink: 0;
}

.kiosk-new-qty-btn[b-dwwlksya2k] {
    width: 44px;
    height: 44px;
    border: none;
    background: #f9fafb;
    color: #374151;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .15s;
}

    .kiosk-new-qty-btn:hover[b-dwwlksya2k] {
        background: #2563eb;
        color: #fff;
    }

    .kiosk-new-qty-btn:active[b-dwwlksya2k] {
        background: #1e40af;
        color: #fff;
    }

.kiosk-new-qty-value[b-dwwlksya2k] {
    min-width: 48px;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 800;
    color: #1f2937;
    background: #fff;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kiosk-new-pref-input[b-dwwlksya2k] {
    flex: 1;
    min-width: 160px;
}

    .kiosk-new-pref-input .form-control[b-dwwlksya2k] {
        border-radius: .75rem;
        border: 2px solid #e5e7eb;
    }

        .kiosk-new-pref-input .form-control:focus[b-dwwlksya2k] {
            border-color: #60a5fa;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
        }

/* ── Extras (special instructions) ── */
.kiosk-new-extras[b-dwwlksya2k] {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    overflow: hidden;
}

.kiosk-new-extras-toggle[b-dwwlksya2k] {
    width: 100%;
    padding: .75rem 1rem;
    background: #f9fafb;
    border: none;
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: .9rem;
    color: #6b7280;
    cursor: pointer;
    transition: background .2s;
}

    .kiosk-new-extras-toggle:hover[b-dwwlksya2k] {
        background: #f3f4f6;
    }

.kiosk-new-extras-body[b-dwwlksya2k] {
    padding: 1rem;
    border-top: 1px solid #e5e7eb;
}

    .kiosk-new-extras-body .form-control[b-dwwlksya2k] {
        border-radius: .75rem;
        border: 2px solid #e5e7eb;
    }

        .kiosk-new-extras-body .form-control:focus[b-dwwlksya2k] {
            border-color: #60a5fa;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
        }

/* ── Action buttons ── */
.kiosk-new-actions[b-dwwlksya2k] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-top: 1.5rem;
}

.kiosk-new-add-btn[b-dwwlksya2k] {
    width: 100%;
    padding: .85rem;
    border-radius: .75rem;
    border: 2px dashed #93c5fd;
    background: #eff6ff;
    color: #2563eb;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
}

    .kiosk-new-add-btn:hover[b-dwwlksya2k] {
        border-color: #60a5fa;
        background: #dbeafe;
    }

.kiosk-new-submit-btn[b-dwwlksya2k] {
    width: 100%;
    padding: 1rem;
    border-radius: .75rem;
    border: none;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .03em;
    cursor: pointer;
    transition: all .25s;
    box-shadow: 0 4px 14px rgba(16, 185, 129, .3);
    position: relative;
    overflow: hidden;
}

/* ── Restaurant menu picker (kiosk mode) ─────────────────────────────── */
.kiosk-menu-picker[b-dwwlksya2k] {
    margin-top: 1.25rem;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
}

.kiosk-menu-picker-header[b-dwwlksya2k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}

.kiosk-menu-search[b-dwwlksya2k] {
    position: relative;
    margin-bottom: 0.75rem;
}

.kiosk-menu-search i[b-dwwlksya2k] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
}

.kiosk-menu-search .form-control[b-dwwlksya2k] {
    padding-left: 40px;
}

.kiosk-menu-cat-switch[b-dwwlksya2k] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.kiosk-menu-items-grid[b-dwwlksya2k] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.75rem;
}

.kiosk-menu-card[b-dwwlksya2k] {
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: border-color .15s, box-shadow .15s;
}

.kiosk-menu-card--selected[b-dwwlksya2k] {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

.kiosk-menu-card-img[b-dwwlksya2k] {
    width: 100%;
    height: 140px;
    border-radius: 8px;
    overflow: hidden;
    background: #f1f5f9;
    flex-shrink: 0;
}

    .kiosk-menu-card-img img[b-dwwlksya2k] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.kiosk-menu-card-body[b-dwwlksya2k] {
    flex: 1;
}

.kiosk-menu-card-name[b-dwwlksya2k] {
    font-weight: 600;
    font-size: 1.05rem;
}

.kiosk-menu-card-desc[b-dwwlksya2k] {
    font-size: 0.85rem;
    color: #64748b;
    margin-top: 0.25rem;
    line-height: 1.3;
}

.kiosk-menu-card-price[b-dwwlksya2k] {
    font-weight: 700;
    color: #2563eb;
    margin-top: 0.5rem;
    font-size: 1.1rem;
}

.kiosk-menu-card-qty[b-dwwlksya2k] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.kiosk-menu-card-qty-val[b-dwwlksya2k] {
    font-size: 1.25rem;
    font-weight: 700;
    min-width: 2ch;
    text-align: center;
}

.kiosk-menu-total[b-dwwlksya2k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 2px solid #e2e8f0;
    font-weight: 600;
    font-size: 1.15rem;
}

.kiosk-menu-total-value[b-dwwlksya2k] {
    font-size: 1.5rem;
    font-weight: 800;
    color: #2563eb;
}

    .kiosk-new-submit-btn[b-dwwlksya2k]::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.15) 0%, transparent 60%);
        pointer-events: none;
    }

    .kiosk-new-submit-btn:hover:not(:disabled)[b-dwwlksya2k] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(16, 185, 129, .4);
    }

    .kiosk-new-submit-btn:active:not(:disabled)[b-dwwlksya2k] {
        transform: translateY(0);
    }

    .kiosk-new-submit-btn:disabled[b-dwwlksya2k] {
        opacity: .7;
        cursor: not-allowed;
    }

/* ── Mobile adjustments ── */
@@media (max-width: 576px) {
    .kiosk-new-hero[b-dwwlksya2k] {
        border-radius: 1.25rem;
    }

    .kiosk-new-hero-body[b-dwwlksya2k] {
        padding: 1.5rem 1rem 1.25rem;
    }

    .kiosk-new-hero--has-banner .kiosk-new-hero-body[b-dwwlksya2k] {
        padding-top: 1.25rem;
    }

    .kiosk-new-hero-banner[b-dwwlksya2k] {
        height: 130px;
    }

    .kiosk-new-hero-icon[b-dwwlksya2k] {
        width: 56px;
        height: 56px;
        font-size: 1.5rem;
    }

    .kiosk-new-hero-logo[b-dwwlksya2k] {
        width: 78px;
        height: 78px;
        padding: .55rem;
    }

    .kiosk-new-hero--has-banner .kiosk-new-hero-logo[b-dwwlksya2k] {
        margin-top: -2.75rem;
    }

    .kiosk-new-hero-brand[b-dwwlksya2k] {
        font-size: 1.2rem;
    }

    .kiosk-new-hero-title[b-dwwlksya2k] {
        font-size: 1.35rem;
    }

    .kiosk-new-hero-brand + .kiosk-new-hero-title[b-dwwlksya2k] {
        font-size: .85rem;
    }

    .kiosk-new-category-grid[b-dwwlksya2k] {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 10px;
    }

    .kiosk-new-category-tile[b-dwwlksya2k] {
        padding: 1rem .75rem .75rem;
        min-height: 140px;
    }

    .kiosk-new-category-icon[b-dwwlksya2k] {
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
    }

    .kiosk-new-category-img[b-dwwlksya2k] {
        width: 70px;
        height: 70px;
    }

    .kiosk-new-items-grid[b-dwwlksya2k] {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 8px;
    }

    .kiosk-new-menu-img[b-dwwlksya2k] {
        height: 70px;
    }

    .kiosk-new-menu-name[b-dwwlksya2k] {
        font-size: .78rem;
    }

    .kiosk-new-step[b-dwwlksya2k] {
        min-width: 56px;
    }

    .kiosk-new-step-num[b-dwwlksya2k] {
        width: 32px;
        height: 32px;
        font-size: .85rem;
    }

    .kiosk-new-step-line[b-dwwlksya2k] {
        margin-top: 15px;
        min-width: 20px;
    }

    .kiosk-new-step-label[b-dwwlksya2k] {
        font-size: .6rem;
    }

    .kiosk-new-qty-row[b-dwwlksya2k] {
        flex-direction: column;
        align-items: stretch;
    }

    .kiosk-new-qty-control[b-dwwlksya2k] {
        align-self: center;
    }

    .kiosk-collapsed-img[b-dwwlksya2k] {
        width: 40px;
        height: 40px;
    }

    .kiosk-collapsed-name[b-dwwlksya2k] {
        font-size: .8rem;
    }
}

/* ===== Dark Mode ===== */
@media (prefers-color-scheme: dark) {
    /* Section titles */
    .kiosk-new-section-title[b-dwwlksya2k] {
        color: var(--text-primary) !important;
    }

    /* Category tiles */
    .kiosk-new-category-tile[b-dwwlksya2k] {
        background: var(--card-bg) !important;
        border-color: var(--border-color) !important;
    }

    .kiosk-new-category-tile:hover[b-dwwlksya2k] {
        border-color: #60a5fa !important;
        box-shadow: 0 8px 24px rgba(96, 165, 250, 0.15) !important;
    }

    .kiosk-new-category-icon[b-dwwlksya2k] {
        background: linear-gradient(135deg, #1e3a5f, #2a2a3d) !important;
        color: #60a5fa !important;
    }

    .kiosk-new-category-tile:hover .kiosk-new-category-icon[b-dwwlksya2k] {
        background: linear-gradient(135deg, #2563eb, #1e40af) !important;
        color: #fff !important;
    }

    .kiosk-new-category-name[b-dwwlksya2k] {
        color: var(--text-primary) !important;
    }

    .kiosk-new-category-img[b-dwwlksya2k] {
        border-color: var(--border-color) !important;
    }

    .kiosk-new-category-tile:hover .kiosk-new-category-img[b-dwwlksya2k] {
        border-color: #60a5fa !important;
    }

    /* Collapsed items */
    .kiosk-collapsed-item[b-dwwlksya2k] {
        background: var(--card-bg) !important;
        border-color: var(--border-color) !important;
    }

    .kiosk-collapsed-item:hover[b-dwwlksya2k] {
        border-color: #60a5fa !important;
        box-shadow: 0 2px 10px rgba(96, 165, 250, 0.15) !important;
    }

    .kiosk-collapsed-img[b-dwwlksya2k] {
        background: #2a2a3d !important;
    }

    .kiosk-collapsed-img i[b-dwwlksya2k] {
        color: #60a5fa !important;
    }

    .kiosk-collapsed-name[b-dwwlksya2k] {
        color: var(--text-primary) !important;
    }

    .kiosk-collapsed-cat[b-dwwlksya2k] {
        color: var(--text-secondary) !important;
    }

    .kiosk-collapsed-pref[b-dwwlksya2k] {
        color: #64748b !important;
    }

    .kiosk-collapsed-qty[b-dwwlksya2k] {
        border-color: var(--border-color) !important;
        background: #2a2a3d !important;
    }

    .kiosk-collapsed-qty-btn[b-dwwlksya2k] {
        color: var(--text-primary) !important;
    }

    .kiosk-collapsed-qty-btn:hover[b-dwwlksya2k] {
        background: #3b82f6 !important;
        color: #fff !important;
    }

    .kiosk-collapsed-qty-val[b-dwwlksya2k] {
        color: var(--text-primary) !important;
    }

    .kiosk-collapsed-edit[b-dwwlksya2k] {
        color: #64748b !important;
    }

    .kiosk-collapsed-item:hover .kiosk-collapsed-edit[b-dwwlksya2k] {
        color: #60a5fa !important;
    }

    /* Item section */
    .kiosk-new-item-section[b-dwwlksya2k] {
        background: var(--card-bg) !important;
        border-color: var(--border-color) !important;
    }

    .kiosk-new-item-cat-label[b-dwwlksya2k] {
        color: #60a5fa !important;
    }

    .kiosk-new-remove-btn[b-dwwlksya2k] {
        background: rgba(239, 68, 68, 0.15) !important;
    }

    .kiosk-new-remove-btn:hover[b-dwwlksya2k] {
        background: #ef4444 !important;
        color: #fff !important;
    }

    /* Category chips */
    .kiosk-new-cat-chip[b-dwwlksya2k] {
        background: var(--card-bg) !important;
        border-color: var(--border-color) !important;
        color: var(--text-secondary) !important;
    }

    .kiosk-new-cat-chip:hover[b-dwwlksya2k] {
        border-color: #60a5fa !important;
        color: #60a5fa !important;
    }

    .kiosk-new-cat-chip--active:hover[b-dwwlksya2k] {
        color: #fff !important;
    }

    /* Menu cards */
    .kiosk-new-menu-card[b-dwwlksya2k] {
        background: #2a2a3d !important;
        border-color: var(--border-color) !important;
    }

    .kiosk-new-menu-card:hover[b-dwwlksya2k] {
        border-color: #60a5fa !important;
        box-shadow: 0 6px 20px rgba(96, 165, 250, 0.12) !important;
    }

    .kiosk-new-menu-card--selected[b-dwwlksya2k] {
        border-color: #10b981 !important;
        background: rgba(16, 185, 129, 0.1) !important;
    }

    .kiosk-new-menu-card--selected:hover[b-dwwlksya2k] {
        border-color: #059669 !important;
    }

    .kiosk-new-menu-img[b-dwwlksya2k] {
        background: #1e1e2e !important;
    }

    .kiosk-new-menu-name[b-dwwlksya2k] {
        color: var(--text-primary) !important;
    }

    /* Step indicator */
    .kiosk-new-step-num[b-dwwlksya2k] {
        background: #334155 !important;
        border-color: #334155 !important;
        color: #64748b !important;
    }

    .kiosk-new-step-label[b-dwwlksya2k] {
        color: #64748b !important;
    }

    .kiosk-new-step--active .kiosk-new-step-label[b-dwwlksya2k] {
        color: rgba(var(--bs-primary-rgb)) !important;
    }

    .kiosk-new-step-line[b-dwwlksya2k] {
        background: #334155 !important;
    }

    /* Quantity controls */
    .kiosk-new-qty-control[b-dwwlksya2k] {
        border-color: var(--border-color) !important;
    }

    .kiosk-new-qty-btn[b-dwwlksya2k] {
        background: #2a2a3d !important;
        color: var(--text-primary) !important;
    }

    .kiosk-new-qty-btn:hover[b-dwwlksya2k] {
        background: #3b82f6 !important;
        color: #fff !important;
    }

    .kiosk-new-qty-value[b-dwwlksya2k] {
        color: var(--text-primary) !important;
        background: var(--card-bg) !important;
    }

    /* Extras / special instructions */
    .kiosk-new-extras[b-dwwlksya2k] {
        border-color: var(--border-color) !important;
    }

    .kiosk-new-extras-toggle[b-dwwlksya2k] {
        background: #2a2a3d !important;
        color: var(--text-secondary) !important;
    }

    .kiosk-new-extras-toggle:hover[b-dwwlksya2k] {
        background: #334155 !important;
    }

    .kiosk-new-extras-body[b-dwwlksya2k] {
        border-top-color: var(--border-color) !important;
    }

    .kiosk-new-extras-body .form-control[b-dwwlksya2k] {
        border-color: var(--border-color) !important;
    }

    /* Other input */
    .kiosk-new-other-input .form-control[b-dwwlksya2k] {
        border-color: var(--border-color) !important;
    }

    .kiosk-new-pref-input .form-control[b-dwwlksya2k] {
        border-color: var(--border-color) !important;
    }

    /* Add button */
    .kiosk-new-add-btn[b-dwwlksya2k] {
        background: rgba(37, 99, 235, 0.1) !important;
        border-color: #60a5fa !important;
        color: #60a5fa !important;
    }

    .kiosk-new-add-btn:hover[b-dwwlksya2k] {
        background: rgba(37, 99, 235, 0.2) !important;
        border-color: #3b82f6 !important;
    }

    /* White-label hero — keep premium look in dark mode */
    .kiosk-new-hero-logo[b-dwwlksya2k] {
        background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%) !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), 0 0 0 4px rgba(96, 165, 250, 0.35) !important;
    }

    .kiosk-new-hero-banner-fade[b-dwwlksya2k] {
        background: linear-gradient(180deg, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.25) 55%, rgba(15, 23, 42, 0.85) 100%) !important;
    }

    .kiosk-new-hero--has-banner .kiosk-new-hero-body[b-dwwlksya2k] {
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.92) 0%, #1e293b 35%, #0f172a 100%) !important;
    }

    .kiosk-new-hero-brand[b-dwwlksya2k] {
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55) !important;
    }
}
/* /Pages/Orders/PendingServiceRequests.razor.rz.scp.css */
.pending-request-card[b-mrwdd06i66] {
    transition: transform 0.2s, box-shadow 0.2s;
    border-left: 4px solid #ffc107;
    border-right: 2px solid #ffc107;
    border-bottom: 2px solid #ffc107;
}

.copy-cursor[b-mrwdd06i66] {
    cursor: pointer;
}

    .pending-request-card:hover[b-mrwdd06i66] {
        transform: translateY(-5px);
        box-shadow: 0 6px 20px rgba(255, 193, 7, 0.3);
    }

.rework-request-card[b-mrwdd06i66] {
    transition: transform 0.2s, box-shadow 0.2s;
    border-left: 4px solid rgba(var(--bs-danger-rgb)) !important;
    border-right: 2px solid rgba(var(--bs-danger-rgb)) !important;
    border-bottom: 2px solid rgba(var(--bs-danger-rgb)) !important;
}

    .rework-request-card:hover[b-mrwdd06i66] {
        transform: translateY(-5px);
        box-shadow: 0 6px 20px rgba(255, 193, 7, 0.3);
    }

.bg-rework[b-mrwdd06i66] {
    background: rgba(var(--bs-danger-rgb))
}

.accept-form[b-mrwdd06i66] {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

/* Rejected/replaced items in the card's item list — dim the line and
   strike through the name so the audit is visible at a glance. */
.pending-item-inactive[b-mrwdd06i66] {
    opacity: 0.65;
}

.pending-item-inactive > strong[b-mrwdd06i66] {
    text-decoration: line-through;
}

/* ===== Dark Mode ===== */
@media (prefers-color-scheme: dark) {
    .accept-form[b-mrwdd06i66] {
        background-color: #2a2a3d !important;
        border-color: var(--border-color) !important;
    }

    .pending-item-inactive[b-mrwdd06i66] {
        opacity: 0.75;
    }
}
/* /Pages/Orders/Rework.razor.rz.scp.css */
.rework-loader[b-6jw7xxpnjn] {
    width: 3rem;
    height: 3rem;
}

.rework-qty-col[b-6jw7xxpnjn] {
    width: 90px;
}
/* /Pages/Orders/ServiceRequestDetails.razor.rz.scp.css */
.copy-cursor[b-edzc4eryiu] {
    cursor: pointer;
}

.qty-col[b-edzc4eryiu] {
    width: 80px;
}

.seat-col[b-edzc4eryiu] {
    width: 80px;
    text-align: center;
}

.timeline[b-edzc4eryiu] {
    position: relative;
    padding-left: 30px;
}

.timeline-item[b-edzc4eryiu] {
    position: relative;
    padding-bottom: 20px;
    padding-left: 20px;
}

    .timeline-item[b-edzc4eryiu]::before {
        content: '';
        position: absolute;
        left: -20px;
        top: 0;
        bottom: 0;
        width: 2px;
        background-color: #dee2e6;
    }

    .timeline-item:last-child[b-edzc4eryiu]::before {
        display: none;
    }

    .timeline-item i[b-edzc4eryiu] {
        position: absolute;
        left: -28px;
        top: 0;
        font-size: 1.2rem;
        color: #28a745;
        background-color: #fff;
        z-index: 1;
    }

    .timeline-item.cancelled i[b-edzc4eryiu] {
        color: #dc3545;
    }

    .timeline-item.completed[b-edzc4eryiu] {
        color: #28a745;
    }

.request-header[b-edzc4eryiu] {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    border-bottom: 0;
}

.request-header-rework[b-edzc4eryiu] {
    background: linear-gradient(135deg, #dc2626 0%, #7f1d1d 100%);
    border-bottom: 0;
}

.request-header-row[b-edzc4eryiu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.request-left[b-edzc4eryiu] {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0; /* allows ellipsis */
}

.request-title[b-edzc4eryiu] {
    font-weight: 700;
    white-space: nowrap;
    margin: 0;
}

.request-id-pill[b-edzc4eryiu] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    min-width: 0;
}

.request-id-text[b-edzc4eryiu] {
    color: #fff;
    margin: 0;
    font-size: .95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 360px;
}

.request-copy-btn[b-edzc4eryiu] {
    border-radius: 999px;
    padding: .25rem .5rem;
    line-height: 1;
}

    .request-copy-btn:hover[b-edzc4eryiu] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0,0,0,.18);
    }

.request-copied[b-edzc4eryiu] {
    font-size: .8rem;
    opacity: .95;
}

/* Responsive: stack neatly on small screens */
@media (max-width: 576px) {
    .request-header-row[b-edzc4eryiu] {
        flex-direction: column;
        align-items: flex-start;
    }

    .request-right[b-edzc4eryiu] {
        align-self: flex-start;
    }

    .request-id-text[b-edzc4eryiu] {
        max-width: 220px;
    }
}

/* =========================================================
   HISTORY-BASED TIMELINE  (.request-timeline + .tl-*)
   Mirrors TrackRequest.razor.css for consistent look
   ========================================================= */

.request-timeline[b-edzc4eryiu] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 6px 0;
}

    /* Continuous background line */
    .request-timeline[b-edzc4eryiu]::before {
        content: "";
        position: absolute;
        left: 17px;
        top: 22px;
        bottom: 22px;
        width: 2px;
        background: rgba(108,117,125,.35);
        z-index: 0;
    }

    /* Each row */
    .request-timeline .tl-item[b-edzc4eryiu] {
        display: flex;
        gap: 12px;
        align-items: flex-start;
    }

    /* Marker column */
    .request-timeline .tl-marker[b-edzc4eryiu] {
        width: 34px;
        flex: 0 0 34px;
        display: flex;
        justify-content: center;
        position: relative;
        z-index: 1;
    }

    /* Bubble */
    .request-timeline .tl-dot[b-edzc4eryiu] {
        width: 32px;
        height: 32px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        border: 1px solid rgba(0,0,0,.15);
        box-shadow: 0 0 0 4px #fff;
    }

    /* Done (completed step) */
    .request-timeline .tl-item.tl-done .tl-dot[b-edzc4eryiu] {
        background: rgba(var(--bs-primary-rgb));
        border-color: rgba(25,135,84,.35);
        color: #fff;
    }

    .request-timeline .tl-item.tl-done .tl-title[b-edzc4eryiu] {
        color: rgba(var(--bs-primary-rgb), 1);
    }

    /* Pending (future step) */
    .request-timeline .tl-item.tl-pending .tl-dot[b-edzc4eryiu] {
        background: #f1f3f5;
        border-color: rgba(108,117,125,.35);
        color: #6c757d;
    }

    .request-timeline .tl-item.tl-pending .tl-title[b-edzc4eryiu] {
        color: #6c757d;
    }

    /* Cancelled / Rejected */
    .request-timeline .tl-item.tl-cancelled .tl-dot[b-edzc4eryiu] {
        background: rgba(220,53,69,.10);
        border-color: rgba(220,53,69,.35);
        color: #dc3545;
    }

    /* Rework requested — amber */
    .request-timeline .tl-item.tl-rework .tl-dot[b-edzc4eryiu] {
        background: #f59e0b;
        border-color: #d97706;
        color: #fff;
    }

    .request-timeline .tl-item.tl-rework .tl-title[b-edzc4eryiu] {
        color: #d97706;
    }

    /* Rework completed — green */
    .request-timeline .tl-item.tl-rework-done .tl-dot[b-edzc4eryiu] {
        background: #10b981;
        border-color: #059669;
        color: #fff;
    }

    .request-timeline .tl-item.tl-rework-done .tl-title[b-edzc4eryiu] {
        color: #059669;
    }

    /* Cycle separator label */
    .request-timeline .tl-cycle-label[b-edzc4eryiu] {
        font-size: .75rem;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: #94a3b8;
        padding: 4px 0 2px 46px;
    }

    /* Text */
    .request-timeline .tl-body[b-edzc4eryiu] {
        padding-top: 2px;
        min-width: 0;
    }

    .request-timeline .tl-title[b-edzc4eryiu] {
        font-weight: 700;
    }

    .request-timeline .tl-meta[b-edzc4eryiu], .request-timeline .tl-sub[b-edzc4eryiu] {
        font-size: .85rem;
        color: #6c757d;
    }

/* ===== Dark Mode ===== */
@media (prefers-color-scheme: dark) {
    /* Old timeline */
    .timeline-item[b-edzc4eryiu]::before {
        background-color: #334155 !important;
    }

    .timeline-item i[b-edzc4eryiu] {
        background-color: var(--card-bg) !important;
    }

    /* History-based timeline */
    .request-timeline[b-edzc4eryiu]::before {
        background: rgba(148, 163, 184, .3) !important;
    }

    .request-timeline .tl-dot[b-edzc4eryiu] {
        background: var(--card-bg) !important;
        border-color: #334155 !important;
        box-shadow: 0 0 0 4px var(--card-bg) !important;
    }

    .request-timeline .tl-item.tl-pending .tl-dot[b-edzc4eryiu] {
        background: #2a2a3d !important;
        border-color: #475569 !important;
        color: #64748b !important;
    }

    .request-timeline .tl-item.tl-pending .tl-title[b-edzc4eryiu] {
        color: #94a3b8 !important;
    }

    .request-timeline .tl-title[b-edzc4eryiu] {
        color: var(--text-primary) !important;
    }

    .request-timeline .tl-item.tl-done .tl-title[b-edzc4eryiu] {
        color: #60a5fa !important;
    }

    .request-timeline .tl-meta[b-edzc4eryiu],
    .request-timeline .tl-sub[b-edzc4eryiu] {
        color: #94a3b8 !important;
    }

    .request-timeline .tl-cycle-label[b-edzc4eryiu] {
        color: #64748b !important;
    }
}

.request-item-cell[b-edzc4eryiu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.request-item-thumb[b-edzc4eryiu] {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #dee2e6;
    flex-shrink: 0;
}

.request-item-text[b-edzc4eryiu] {
    min-width: 0;
    word-break: break-word;
}

.request-item-photos[b-edzc4eryiu] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.request-item-photo[b-edzc4eryiu] {
    cursor: zoom-in;
}

/* Item-level reject / replace */

.item-actions-col[b-edzc4eryiu] {
    width: 110px;
}

.item-actions-cell[b-edzc4eryiu] {
    vertical-align: middle;
    white-space: nowrap;
}

.item-row-inactive td[b-edzc4eryiu] {
    background-color: #fbfbfc;
    color: #6c757d;
}

.item-row-inactive .request-item-text > strong[b-edzc4eryiu],
.item-row-inactive .request-item-text > span:not(.badge)[b-edzc4eryiu] {
    text-decoration: line-through;
}

.item-status-note[b-edzc4eryiu] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

/* Item-action modals reuse the shared .admin-modal styling.
   Only the backdrop tint is added here (Bootstrap's <div class="modal">
   is the fullscreen wrapper — colouring it directly avoids needing a
   separate backdrop element or Bootstrap's JS). */

.item-action-modal-bg[b-edzc4eryiu] {
    background: rgba(0, 0, 0, 0.5);
}

/* Replacement picker */

.replacement-options[b-edzc4eryiu] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 320px;
    overflow-y: auto;
    padding-right: 4px;
}

.replacement-option[b-edzc4eryiu] {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    background: var(--card-bg, #fff);
    color: var(--text-primary, #1e293b);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.replacement-option:hover[b-edzc4eryiu] {
    background-color: #f8f9fa;
    border-color: #adb5bd;
}

.replacement-option.selected[b-edzc4eryiu] {
    background-color: #e7f1ff;
    border-color: #0d6efd;
}

@media (prefers-color-scheme: dark) {
    .item-row-inactive td[b-edzc4eryiu] {
        background-color: rgba(255, 255, 255, 0.03);
        color: var(--text-secondary, #94a3b8);
    }

    .modal-dialog-custom[b-edzc4eryiu] {
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    }

    .modal-dialog-custom .form-control[b-edzc4eryiu] {
        background-color: #2a2a3d;
        color: var(--text-primary, #e2e8f0);
        border-color: var(--border-color, #334155);
    }

    .modal-dialog-custom .form-control[b-edzc4eryiu]::placeholder {
        color: #64748b;
    }

    .modal-dialog-custom .form-label[b-edzc4eryiu] {
        color: var(--text-primary, #e2e8f0);
    }

    .replacement-option[b-edzc4eryiu] {
        background-color: #2a2a3d;
    }

    .replacement-option:hover[b-edzc4eryiu] {
        background-color: #333349;
        border-color: #60a5fa;
    }

    .replacement-option.selected[b-edzc4eryiu] {
        background-color: rgba(96, 165, 250, 0.15);
        border-color: #60a5fa;
    }

    .replacement-option .text-muted[b-edzc4eryiu] {
        color: var(--text-secondary, #94a3b8) !important;
    }

    .replacement-option .badge.bg-success-subtle[b-edzc4eryiu] {
        background-color: rgba(16, 185, 129, 0.18) !important;
        color: #34d399 !important;
    }

    .replacement-option .badge.bg-light[b-edzc4eryiu] {
        background-color: #333349 !important;
        color: var(--text-secondary, #94a3b8) !important;
    }
}

/* ===== Accept / reject request forms (mirrors the pending-requests cards) ===== */
.accept-form[b-edzc4eryiu],
.reject-form[b-edzc4eryiu] {
    padding: 1rem;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
}

.reject-form[b-edzc4eryiu] {
    border-color: rgba(var(--bs-danger-rgb), 1);
}

@media (prefers-color-scheme: dark) {
    .accept-form[b-edzc4eryiu],
    .reject-form[b-edzc4eryiu] {
        background-color: #2a2a3d !important;
        border-color: var(--border-color, #334155) !important;
    }

    .reject-form[b-edzc4eryiu] {
        border-color: rgba(var(--bs-danger-rgb), 0.6) !important;
    }

    .accept-form .form-control[b-edzc4eryiu],
    .reject-form .form-control[b-edzc4eryiu] {
        background-color: #1f1f2e;
        color: var(--text-primary, #e2e8f0);
        border-color: var(--border-color, #334155);
    }

    .accept-form .form-control[b-edzc4eryiu]::placeholder,
    .reject-form .form-control[b-edzc4eryiu]::placeholder {
        color: #64748b;
    }

    .accept-form .form-label[b-edzc4eryiu],
    .reject-form .form-label[b-edzc4eryiu] {
        color: var(--text-primary, #e2e8f0);
    }

    .accept-form .text-muted[b-edzc4eryiu],
    .reject-form .text-muted[b-edzc4eryiu] {
        color: var(--text-secondary, #94a3b8) !important;
    }
}
/* /Pages/QrCodeScan.razor.rz.scp.css */
.qr-scan-page[b-lla1acchnk] {
    max-width: 720px;
}

.qr-scan-viewfinder-card[b-lla1acchnk] {
    overflow: hidden;
}

.qr-scan-viewfinder[b-lla1acchnk] {
    width: 100%;
    min-height: 320px;
    background-color: #111;
    position: relative;
}

.qr-scan-viewfinder video[b-lla1acchnk] {
    width: 100% !important;
    height: auto !important;
    display: block;
}

.qr-scan-overlay[b-lla1acchnk] {
    position: absolute;
    inset: 0;
    background-color: rgba(17, 17, 17, 0.85);
    color: #f8f9fa;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
    pointer-events: none;
}

.qr-scan-overlay-icon[b-lla1acchnk] {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    opacity: 0.85;
}

.qr-scan-result-card[b-lla1acchnk] {
    border-left: 4px solid #198754;
}

.qr-scan-result-text[b-lla1acchnk] {
    word-break: break-all;
    white-space: pre-wrap;
    background-color: #f8f9fa;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid #dee2e6;
}

.qr-scan-tips[b-lla1acchnk] {
    padding-left: 1.25rem;
}

.qr-scan-tips li[b-lla1acchnk] {
    margin-bottom: 0.25rem;
}
/* /Pages/Register.razor.rz.scp.css */
.register-container[b-13y7j71c6r] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1e40af 0%, #06b6d4 100%);
    padding: 1rem;
}

.register-card[b-13y7j71c6r] {
    background: white;
    padding: 3rem;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(30, 64, 175, 0.3);
    width: 100%;
    max-width: 450px;
}

.register-header[b-13y7j71c6r] {
    text-align: center;
    margin-bottom: 24px;
}

.register-header .logo[b-13y7j71c6r] {
    display: block;
    height: auto;
    width: clamp(140px, 22vw, 180px);
    max-width: 100%;
    object-fit: contain;
    margin: 0 auto 12px auto;
}

.register-header h2[b-13y7j71c6r] {
    color: #2563eb;
    margin-bottom: 5px;
}

/* Responsive sizing */
@media (min-width: 769px) and (max-width: 1024px) {
    .register-card[b-13y7j71c6r] {
        max-width: 500px;
    }
}

@media (min-width: 1025px) and (max-width: 1440px) {
    .register-card[b-13y7j71c6r] {
        max-width: 550px;
        padding: 3.5rem;
    }
}

@media (max-width: 360px) {
    .register-header .logo[b-13y7j71c6r] {
        width: 120px;
    }
}

/* ===== Dark Mode ===== */
@media (prefers-color-scheme: dark) {
    .register-container[b-13y7j71c6r] {
        background: linear-gradient(135deg, #0f172a 0%, #1e1e2e 100%) !important;
    }

    .register-card[b-13y7j71c6r] {
        background: var(--card-bg) !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
    }

    .register-header h2[b-13y7j71c6r] {
        color: #93c5fd !important;
    }
}
/* /Pages/RegistrationSuccess.razor.rz.scp.css */
.success-container[b-77nclxi1hu] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 20px;
}

.success-card[b-77nclxi1hu] {
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    padding: 60px 40px;
    max-width: 500px;
    width: 100%;
    text-align: center;
}

.success-icon[b-77nclxi1hu] {
    font-size: 100px;
    color: #10b981;
    margin-bottom: 20px;
    animation: scaleIn 0.5s ease-out;
}

@@keyframes scaleIn {
    from[b-77nclxi1hu] {
        transform: scale(0);
        opacity: 0;
    }

    to[b-77nclxi1hu] {
        transform: scale(1);
        opacity: 1;
    }
}

.success-card h1[b-77nclxi1hu] {
    color: #1e293b;
    margin-bottom: 15px;
    font-weight: 700;
}

.success-card .lead[b-77nclxi1hu] {
    color: #64748b;
    font-size: 1.1rem;
    margin-bottom: 30px;
}

.success-details[b-77nclxi1hu] {
    background: #f8fafc;
    border-radius: 10px;
    padding: 20px;
    margin: 30px 0;
    text-align: left;
}

    .success-details p[b-77nclxi1hu] {
        margin-bottom: 10px;
        color: #475569;
    }

        .success-details p:last-child[b-77nclxi1hu] {
            margin-bottom: 0;
        }

.success-actions[b-77nclxi1hu] {
    margin-top: 30px;
}

/* ===== Dark Mode ===== */
@media (prefers-color-scheme: dark) {
    .success-container[b-77nclxi1hu] {
        background: linear-gradient(135deg, #0f172a 0%, #1e1e2e 100%) !important;
    }

    .success-card[b-77nclxi1hu] {
        background: var(--card-bg) !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
    }

    .success-card h1[b-77nclxi1hu] {
        color: var(--text-primary) !important;
    }

    .success-card .lead[b-77nclxi1hu] {
        color: var(--text-secondary) !important;
    }

    .success-details[b-77nclxi1hu] {
        background: #2a2a3d !important;
    }

    .success-details p[b-77nclxi1hu] {
        color: var(--text-secondary) !important;
    }
}
/* /Pages/Tickets/CreateTicket.razor.rz.scp.css */
.create-ticket-container[b-2fzg1snipv] {
    max-width: 900px;
}

.create-ticket-language-bar[b-2fzg1snipv] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.75rem;
}

.area-name-banner[b-2fzg1snipv] {
    padding: 0.75rem 1rem;
    background-color: #f8f9fa;
    border-left: 4px solid #0d6efd;
    border-radius: 4px;
    font-size: 1rem;
    color: #0d6efd;
}

    .area-name-banner i[b-2fzg1snipv] {
        margin-right: 0.35rem;
    }

.ticket-thumb-img[b-2fzg1snipv] {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.ticket-thumb-remove[b-2fzg1snipv] {
    width: 20px;
    height: 20px;
    line-height: 1;
    font-size: 10px;
}

.ticket-preview-img[b-2fzg1snipv] {
    max-width: 200px;
    max-height: 200px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

[b-2fzg1snipv] .card {
    position: relative;
}

[b-2fzg1snipv] .card:hover {
    transform: none;
    top: -2px;
}

.asset-search-item-code[b-2fzg1snipv] {
    font-weight: 600;
    color: #0d6efd;
    font-size: 0.9rem;
}

.asset-search-item-sep[b-2fzg1snipv] {
    color: #6c757d;
    font-size: 0.9rem;
}

.asset-search-item-name[b-2fzg1snipv] {
    font-size: 0.9rem;
    color: #212529;
}

.asset-search-more[b-2fzg1snipv] {
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    color: #6c757d;
    text-align: center;
    background-color: #f8f9fa;
    border-top: 1px solid #e9ecef;
}
/* /Pages/Tickets/TicketDetails.razor.rz.scp.css */
.ticket-thumb-clickable[b-kxxlsj9mek] {
    width: 100px;
    height: 100px;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.15s ease-in-out;
}

.ticket-thumb-clickable:hover[b-kxxlsj9mek] {
    transform: scale(1.05);
}

.ticket-large-img[b-kxxlsj9mek] {
    max-width: 100%;
    max-height: 300px;
    object-fit: contain;
    cursor: pointer;
}

.ticket-placeholder-icon[b-kxxlsj9mek] {
    font-size: 2.5rem;
}

.approval-step-circle[b-kxxlsj9mek] {
    width: 36px;
    height: 36px;
}

.approval-step[b-kxxlsj9mek] {
    max-width: 140px;
}

.approval-step-approvers[b-kxxlsj9mek] {
    color: #6c757d;
    font-size: 0.7rem;
    line-height: 1.1;
    word-break: break-word;
    margin-top: 2px;
}

.approval-step-connector[b-kxxlsj9mek] {
    width: 30px;
    margin-top: -12px;
}

.approval-step-connector-completed[b-kxxlsj9mek] {
    border-top: 2px solid green;
}

.approval-step-connector-pending[b-kxxlsj9mek] {
    border-top: 2px dashed #ccc;
}

.ticket-timeline-dot-created[b-kxxlsj9mek] {
    background: #0d6efd;
}

.ticket-timeline-dot-status[b-kxxlsj9mek] {
    background: #0dcaf0;
}

.ticket-timeline-dot-cost[b-kxxlsj9mek] {
    background: #ffc107;
}

.ticket-timeline-dot-note[b-kxxlsj9mek] {
    background: #6c757d;
}

.ticket-timeline-dot-sla[b-kxxlsj9mek] {
    background: #dc3545;
}

.ticket-timeline-dot-default[b-kxxlsj9mek] {
    background: #adb5bd;
}

.ticket-assign-select[b-kxxlsj9mek] {
    min-width: 240px;
}

.ticket-header-title[b-kxxlsj9mek] {
    white-space: nowrap;
}

.ticket-accept-banner[b-kxxlsj9mek] {
    border-left: 4px solid #0d6efd;
}

.ticket-accept-banner .btn[b-kxxlsj9mek] {
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .ticket-header-title[b-kxxlsj9mek] {
        font-size: 1.4rem;
    }

    .ticket-header-export[b-kxxlsj9mek] {
        align-self: stretch;
    }
}
/* /Pages/Tickets/TicketManagement.razor.rz.scp.css */
.ticket-table-scroll[b-9rxdu7jw9d] {
    overflow-y: visible;
}

.ticket-table-head[b-9rxdu7jw9d] {
    background: white;
}

.ticket-actions-col[b-9rxdu7jw9d] {
    width: 200px;
}

.ticket-desc-cell[b-9rxdu7jw9d] {
    max-width: 250px;
    white-space: normal;
    word-break: break-word;
}

.ticket-cell-nowrap[b-9rxdu7jw9d] {
    white-space: nowrap;
}

/* Clickable summary tiles (quick filters). Built on .card so they share the
   existing card look; this class adds the affordance, hover lift and active
   highlight. */
.ticket-summary-tile[b-9rxdu7jw9d] {
    cursor: pointer;
    appearance: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.ticket-summary-tile:hover[b-9rxdu7jw9d] {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08) !important;
}

.ticket-summary-tile:focus[b-9rxdu7jw9d] {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
}

.ticket-summary-tile-active[b-9rxdu7jw9d] {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.2) !important;
}

/* ===== Dark Mode ===== */
@media (prefers-color-scheme: dark) {
    .ticket-table-head[b-9rxdu7jw9d] {
        background: transparent !important;
    }

    .ticket-summary-tile:hover[b-9rxdu7jw9d] {
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.45) !important;
    }
}
/* /Pages/TrackRequest.razor.rz.scp.css */
/* Force dark text in the entire card body so no text inherits white on iOS */
[b-uvyisqhvqz] .card-body {
    color: #212529;
}

/* Track header layout helpers */
.track-left[b-uvyisqhvqz] {
    min-width: 0;
    color: #212529;
}

/* =========================================================
   DARK MODE OVERRIDES
   ========================================================= */
@media (prefers-color-scheme: dark) {
    [b-uvyisqhvqz] .card-body {
        color: #e2e8f0 !important;
    }

    .track-left[b-uvyisqhvqz] {
        color: #e2e8f0 !important;
    }

    .track-detail-field[b-uvyisqhvqz] {
        color: #e2e8f0 !important;
    }

    .track-detail-body[b-uvyisqhvqz] {
        color: #e2e8f0 !important;
    }

    /* Timeline dot backgrounds */
    .request-timeline .tl-dot[b-uvyisqhvqz] {
        background: #1e1e2e !important;
        border-color: #334155 !important;
        box-shadow: 0 0 0 4px #1e1e2e !important;
    }

    .request-timeline .tl-item.tl-pending .tl-dot[b-uvyisqhvqz] {
        background: #2a2a3d !important;
        border-color: #475569 !important;
    }

    .request-timeline .tl-item.tl-pending .tl-title[b-uvyisqhvqz] {
        color: #94a3b8 !important;
    }

    .request-timeline .tl-meta[b-uvyisqhvqz],
    .request-timeline .tl-sub[b-uvyisqhvqz] {
        color: #94a3b8 !important;
    }

    .request-timeline .tl-title[b-uvyisqhvqz] {
        color: #e2e8f0 !important;
    }

    .request-timeline .tl-item.tl-done .tl-title[b-uvyisqhvqz] {
        color: #60a5fa !important;
    }

    .request-timeline[b-uvyisqhvqz]::before {
        background: rgba(148, 163, 184, .3) !important;
    }

    .request-timeline .tl-cycle-label[b-uvyisqhvqz] {
        color: #64748b !important;
    }

    /* Kiosk live strip */
    .kiosk-live-strip[b-uvyisqhvqz] {
        background: #2a2a3d !important;
        color: #94a3b8 !important;
    }

    .kiosk-live-time[b-uvyisqhvqz] {
        color: #64748b !important;
    }

    /* Kiosk section title */
    .kiosk-section-title[b-uvyisqhvqz] {
        color: #e2e8f0 !important;
    }

    /* Kiosk item cards */
    .kiosk-item-card[b-uvyisqhvqz] {
        background: #2a2a3d !important;
        border-color: #334155 !important;
    }

    .kiosk-item-card:hover[b-uvyisqhvqz] {
        border-color: rgba(96, 165, 250, .35) !important;
        box-shadow: 0 2px 8px rgba(96, 165, 250, .1) !important;
    }

    .kiosk-item-name[b-uvyisqhvqz] {
        color: #e2e8f0 !important;
    }

    .kiosk-item-cat[b-uvyisqhvqz] {
        color: #64748b !important;
    }

    .kiosk-item-note[b-uvyisqhvqz] {
        color: #94a3b8 !important;
    }

    /* Kiosk special instructions */
    .kiosk-instructions[b-uvyisqhvqz] {
        background: linear-gradient(135deg, rgba(245, 158, 11, .15) 0%, rgba(253, 230, 138, .1) 100%) !important;
        border-color: rgba(251, 191, 36, .3) !important;
        color: #fbbf24 !important;
    }

    /* Kiosk collapsible timeline */
    .kiosk-timeline-details[b-uvyisqhvqz] {
        border-color: #334155 !important;
    }

    .kiosk-timeline-summary[b-uvyisqhvqz] {
        background: #2a2a3d !important;
        color: #94a3b8 !important;
    }

    .kiosk-timeline-summary:hover[b-uvyisqhvqz] {
        background: #334155 !important;
    }

    .kiosk-timeline-details[open] > .kiosk-timeline-summary[b-uvyisqhvqz] {
        border-bottom-color: #334155 !important;
    }

    /* Kiosk stepper — pending dots */
    .kiosk-step-dot[b-uvyisqhvqz] {
        background: #334155 !important;
        border-color: #334155 !important;
        color: #64748b !important;
    }

    .kiosk-step-label[b-uvyisqhvqz] {
        color: #64748b !important;
    }

    .kiosk-step-line[b-uvyisqhvqz] {
        background: #334155 !important;
    }

    /* Override btn-outline-dark for dark mode */
    [b-uvyisqhvqz] .btn-outline-dark {
        color: #e2e8f0 !important;
        border-color: #475569 !important;
    }

    [b-uvyisqhvqz] .btn-outline-dark:hover {
        background-color: #334155 !important;
    }
}

/* Truncate ONLY the order id text */
.track-id[b-uvyisqhvqz] {
    display: inline-block;
    max-width: 520px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* Keep action buttons tidy */
.track-actions .btn[b-uvyisqhvqz] {
    white-space: nowrap;
}

.d-flex-fix[b-uvyisqhvqz] {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

/* =========================================================
   SINGLE TIMELINE SYSTEM (use .request-timeline + .tl-*)
   ========================================================= */

/* Timeline wrapper */
.request-timeline[b-uvyisqhvqz] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 6px 0;
}

    /* ONE continuous background line (behind dots) */
    .request-timeline[b-uvyisqhvqz]::before {
        content: "";
        position: absolute;
        left: 17px; /* center of 34px marker column */
        top: 22px;
        bottom: 22px;
        width: 2px;
        background: rgba(108,117,125,.45);
        z-index: 0;
    }

    /* Each row */
    .request-timeline .tl-item[b-uvyisqhvqz] {
        display: flex;
        gap: 12px;
        align-items: flex-start;
    }

    /* Marker column */
    .request-timeline .tl-marker[b-uvyisqhvqz] {
        width: 34px;
        flex: 0 0 34px;
        display: flex;
        justify-content: center;
        position: relative;
        z-index: 1; /* above line */
    }

    /* Bubble */
    .request-timeline .tl-dot[b-uvyisqhvqz] {
        width: 32px;
        height: 32px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        border: 1px solid rgba(0,0,0,.15);
        /* masks the line so it never looks like it goes through the icon */
        box-shadow: 0 0 0 4px #fff;
    }

    /* States */
    .request-timeline .tl-item.tl-done .tl-dot[b-uvyisqhvqz] {
        background: rgba(var(--bs-primary-rgb));
        border-color: rgba(25,135,84,.35);
        color: #fff;
    }

    .request-timeline .tl-item.tl-done .tl-title[b-uvyisqhvqz] {
        color: rgba(var(--bs-primary-rgb), 1);
    }

    .request-timeline .tl-item.tl-pending .tl-dot[b-uvyisqhvqz] {
        background: #f1f3f5;
        border-color: rgba(108,117,125,.35);
        color: #6c757d;
    }

    .request-timeline .tl-item.tl-pending .tl-title[b-uvyisqhvqz] {
        color: #6c757d;
    }

    .request-timeline .tl-item.tl-cancelled .tl-dot[b-uvyisqhvqz] {
        background: rgba(220,53,69,.10);
        border-color: rgba(220,53,69,.35);
        color: #dc3545;
    }

    /* Rework-requested step — amber/warning tone */
    .request-timeline .tl-item.tl-rework .tl-dot[b-uvyisqhvqz] {
        background: #f59e0b;
        border-color: #d97706;
        color: #fff;
    }

    .request-timeline .tl-item.tl-rework .tl-title[b-uvyisqhvqz] {
        color: #d97706;
    }

    /* Rework-completed step — green, same as tl-done but distinct label colour */
    .request-timeline .tl-item.tl-rework-done .tl-dot[b-uvyisqhvqz] {
        background: #10b981;
        border-color: #059669;
        color: #fff;
    }

    .request-timeline .tl-item.tl-rework-done .tl-title[b-uvyisqhvqz] {
        color: #059669;
    }

    /* Cycle separator label */
    .request-timeline .tl-cycle-label[b-uvyisqhvqz] {
        font-size: .75rem;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: #94a3b8;
        padding: 4px 0 2px 46px;
    }

    /* Text */
    .request-timeline .tl-body[b-uvyisqhvqz] {
        padding-top: 2px;
        min-width: 0;
    }

    .request-timeline .tl-title[b-uvyisqhvqz] {
        font-weight: 700;
    }

    .request-timeline .tl-meta[b-uvyisqhvqz], .request-timeline .tl-sub[b-uvyisqhvqz] {
        font-size: .85rem;
        color: #6c757d;
    }

/* =========================================================
   KIOSK MODE — redesigned attractive layout
   ========================================================= */

/* ── White-label brand strip (above status hero) ── */
.kiosk-brand-strip[b-uvyisqhvqz] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: .75rem 1rem;
    margin-bottom: .75rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

.kiosk-brand-strip--top[b-uvyisqhvqz] {
    gap: .85rem;
    padding: .9rem 1.25rem;
    margin-bottom: 1rem;
    border-radius: 1rem;
    box-shadow: 0 6px 20px rgba(15, 23, 42, .08);
}

/* Vertical layout when a branch image banner is present */
.kiosk-brand-strip--with-banner[b-uvyisqhvqz] {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
}

.kiosk-brand-strip-banner[b-uvyisqhvqz] {
    width: 100%;
    height: 140px;
    overflow: hidden;
    background: #f1f5f9;
}

    .kiosk-brand-strip-banner img[b-uvyisqhvqz] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.kiosk-brand-strip-row[b-uvyisqhvqz] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .85rem;
    padding: .9rem 1.25rem;
}

.kiosk-brand-strip-logo[b-uvyisqhvqz] {
    max-height: 40px;
    max-width: 120px;
    object-fit: contain;
    display: block;
}

.kiosk-brand-strip-name[b-uvyisqhvqz] {
    font-weight: 700;
    font-size: 1rem;
    color: #1f2937;
    letter-spacing: .02em;
}

/* ── Hero card ── */
.kiosk-hero[b-uvyisqhvqz] {
    text-align: center;
    border-radius: 1rem;
    padding: 2rem 1.5rem 1.5rem;
    margin-bottom: 1.5rem;
    color: #fff;
    position: relative;
    overflow: visible;          /* allow icon pulse shadow to render outside */
}

    .kiosk-hero[b-uvyisqhvqz]::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;  /* clip the gradient overlay to the card shape */
        background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.15) 0%, transparent 60%);
        pointer-events: none;
    }

/* Hero colour variants */
.kiosk-hero--warning[b-uvyisqhvqz]  { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.kiosk-hero--info[b-uvyisqhvqz]     { background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); }
.kiosk-hero--primary[b-uvyisqhvqz]  { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
.kiosk-hero--purple[b-uvyisqhvqz]   { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); }
.kiosk-hero--success[b-uvyisqhvqz]  { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.kiosk-hero--secondary[b-uvyisqhvqz] { background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%); }
.kiosk-hero--danger[b-uvyisqhvqz]   { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }

.kiosk-hero-icon[b-uvyisqhvqz] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: .75rem;
    animation: kiosk-pulse-b-uvyisqhvqz 2s ease-in-out infinite;
}

@keyframes kiosk-pulse-b-uvyisqhvqz {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.3); }
    50%      { box-shadow: 0 0 0 12px rgba(255,255,255,0); }
}

.kiosk-hero-label[b-uvyisqhvqz] {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.kiosk-hero-service-id[b-uvyisqhvqz] {
    font-size: 1.1rem;
    font-weight: 600;
    opacity: .9;
    margin-top: .25rem;
    letter-spacing: .04em;
}

.kiosk-hero-service-id:hover[b-uvyisqhvqz] {
    opacity: 1;
    text-decoration: underline;
}

.kiosk-hero-sub[b-uvyisqhvqz] {
    font-size: .9rem;
    opacity: .85;
    margin-top: .35rem;
}

.kiosk-hero-dot[b-uvyisqhvqz] {
    margin: 0 .4rem;
}

.kiosk-hero-badges[b-uvyisqhvqz] {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
}

.kiosk-time-badge[b-uvyisqhvqz] {
    background: rgba(255,255,255,.2);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,.25);
    padding: .3rem .75rem;
    border-radius: 2rem;
    font-size: .8rem;
    font-weight: 600;
}

/* ── Horizontal stepper ── */
.kiosk-stepper[b-uvyisqhvqz] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    margin-bottom: 1.5rem;
    padding: .5rem 0;
    overflow-x: auto;
}

.kiosk-step[b-uvyisqhvqz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 70px;
    position: relative;
}

.kiosk-step-dot[b-uvyisqhvqz] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: #e5e7eb;
    color: #9ca3af;
    border: 3px solid #e5e7eb;
    transition: all .3s ease;
    z-index: 1;
}

.kiosk-step--done .kiosk-step-dot[b-uvyisqhvqz] {
    background: rgba(var(--bs-primary-rgb));
    border-color: rgba(var(--bs-primary-rgb));
    color: #fff;
}

.kiosk-step--active .kiosk-step-dot[b-uvyisqhvqz] {
    border-color: rgba(var(--bs-primary-rgb));
    box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), .2);
    animation: kiosk-step-glow-b-uvyisqhvqz 1.5s ease-in-out infinite;
}

@keyframes kiosk-step-glow-b-uvyisqhvqz {
    0%, 100% { box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), .2); }
    50%      { box-shadow: 0 0 0 8px rgba(var(--bs-primary-rgb), .1); }
}

.kiosk-step-label[b-uvyisqhvqz] {
    font-size: .7rem;
    font-weight: 600;
    color: #9ca3af;
    margin-top: 6px;
    text-align: center;
    line-height: 1.2;
}

.kiosk-step--done .kiosk-step-label[b-uvyisqhvqz] {
    color: rgba(var(--bs-primary-rgb));
}

.kiosk-step--active .kiosk-step-label[b-uvyisqhvqz] {
    color: rgba(var(--bs-primary-rgb));
    font-weight: 700;
}

.kiosk-step-line[b-uvyisqhvqz] {
    flex: 1;
    height: 3px;
    background: #e5e7eb;
    margin-top: 19px; /* vertically center with dot */
    min-width: 24px;
    border-radius: 2px;
    transition: background .3s ease;
}

.kiosk-step-line--done[b-uvyisqhvqz] {
    background: rgba(var(--bs-primary-rgb));
}

/* ── Live update strip ── */
.kiosk-live-strip[b-uvyisqhvqz] {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    color: #6b7280;
    padding: .5rem 1rem;
    background: #f9fafb;
    border-radius: .5rem;
    margin-bottom: 1.25rem;
}

.kiosk-live-dot[b-uvyisqhvqz] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    animation: kiosk-blink-b-uvyisqhvqz 1.5s ease-in-out infinite;
}

@keyframes kiosk-blink-b-uvyisqhvqz {
    0%, 100% { opacity: 1; }
    50%      { opacity: .3; }
}

.kiosk-live-time[b-uvyisqhvqz] {
    margin-left: auto;
    color: #9ca3af;
}

/* ── Items section ── */
.kiosk-items-section[b-uvyisqhvqz] {
    margin-bottom: 1.25rem;
}

.kiosk-section-title[b-uvyisqhvqz] {
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: .95rem;
    color: #374151;
    margin-bottom: .75rem;
}

.kiosk-item-count[b-uvyisqhvqz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(var(--bs-primary-rgb));
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    margin-left: .5rem;
    padding: 0 6px;
}

.kiosk-items-grid[b-uvyisqhvqz] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.kiosk-item-card[b-uvyisqhvqz] {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    background: #f9fafb;
    border: 1px solid #f3f4f6;
    border-radius: .75rem;
    padding: .75rem 1rem;
    transition: border-color .2s, box-shadow .2s;
}

    .kiosk-item-card:hover[b-uvyisqhvqz] {
        border-color: rgba(var(--bs-primary-rgb), .25);
        box-shadow: 0 2px 8px rgba(var(--bs-primary-rgb), .08);
    }

.kiosk-item-qty[b-uvyisqhvqz] {
    min-width: 36px;
    height: 36px;
    border-radius: .5rem;
    background: rgba(var(--bs-primary-rgb));
    color: #fff;
    font-weight: 800;
    font-size: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kiosk-item-img[b-uvyisqhvqz] {
    width: 48px;
    height: 48px;
    border-radius: .5rem;
    overflow: hidden;
    background: #f1f5f9;
    flex-shrink: 0;
}

    .kiosk-item-img img[b-uvyisqhvqz] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.kiosk-item-details[b-uvyisqhvqz] {
    min-width: 0;
    flex: 1;
}

.kiosk-item-name[b-uvyisqhvqz] {
    font-weight: 600;
    color: #1f2937;
    line-height: 1.3;
}

.kiosk-item-cat[b-uvyisqhvqz] {
    font-size: .78rem;
    color: #9ca3af;
}

.kiosk-item-note[b-uvyisqhvqz] {
    font-size: .78rem;
    color: #6b7280;
    margin-top: 2px;
}

/* ── Special instructions ── */
.kiosk-instructions[b-uvyisqhvqz] {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #fbbf24;
    border-radius: .75rem;
    padding: 1rem;
    margin-bottom: 1.25rem;
    color: #92400e;
    font-size: .9rem;
}

    .kiosk-instructions i[b-uvyisqhvqz] {
        font-size: 1.1rem;
        margin-top: 2px;
    }

/* ── Collapsible timeline ── */
.kiosk-timeline-details[b-uvyisqhvqz] {
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
}

.kiosk-timeline-summary[b-uvyisqhvqz] {
    padding: .75rem 1rem;
    font-weight: 600;
    font-size: .9rem;
    color: #6b7280;
    cursor: pointer;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    background: #f9fafb;
    border-bottom: 1px solid transparent;
    transition: background .2s;
}

    .kiosk-timeline-summary:hover[b-uvyisqhvqz] {
        background: #f3f4f6;
    }

    .kiosk-timeline-summary[b-uvyisqhvqz]::before {
        content: "\25B6"; /* right-pointing triangle */
        font-size: .65rem;
        margin-right: .5rem;
        transition: transform .2s;
    }

    .kiosk-timeline-details[open] > .kiosk-timeline-summary[b-uvyisqhvqz]::before {
        transform: rotate(90deg);
    }

    /* Remove default marker */
    .kiosk-timeline-summary[b-uvyisqhvqz]::-webkit-details-marker {
        display: none;
    }

.kiosk-timeline-details[open] > .kiosk-timeline-summary[b-uvyisqhvqz] {
    border-bottom-color: #e5e7eb;
}

.kiosk-timeline-details .request-timeline[b-uvyisqhvqz] {
    padding: .75rem 1rem 1rem .5rem;
}

/* =========================================================
   STANDARD LAYOUT — detail fields grid
   ========================================================= */

/* Two-column grid on wider screens, single column on mobile */
.track-detail-grid[b-uvyisqhvqz] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem 1.5rem;
}

.track-detail-field[b-uvyisqhvqz] {
    padding: .25rem 0;
    min-width: 0;        /* allow text to shrink / wrap */
    word-break: break-word;
    color: #212529;      /* force dark text — prevents white-on-white on iOS */
}

/* Reduce inner card padding on small screens */
.track-detail-body[b-uvyisqhvqz] {
    padding: 1rem;
    color: #212529;
}

/* ── Mobile adjustments ── */
@media (max-width: 576px) {

    /* Standard layout — stack fields vertically */
    .track-detail-grid[b-uvyisqhvqz] {
        grid-template-columns: 1fr;
        gap: .25rem;
    }

    .track-detail-body[b-uvyisqhvqz] {
        padding: .75rem;
    }

    /* Kiosk layout */
    .kiosk-hero[b-uvyisqhvqz] {
        padding: 1.25rem .75rem 1rem;
        border-radius: .75rem;
        margin-left: -.25rem;   /* let card breathe within container padding */
        margin-right: -.25rem;
    }

    .kiosk-hero-icon[b-uvyisqhvqz] {
        width: 52px;
        height: 52px;
        font-size: 1.35rem;
        margin-bottom: .5rem;
    }

    .kiosk-hero-label[b-uvyisqhvqz] {
        font-size: 1.15rem;
        letter-spacing: .01em;
        word-break: break-word;  /* prevent long status text from clipping */
    }

    .kiosk-hero-service-id[b-uvyisqhvqz] {
        font-size: .95rem;
    }

    .kiosk-hero-sub[b-uvyisqhvqz] {
        font-size: .75rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    .kiosk-hero-badges[b-uvyisqhvqz] {
        flex-wrap: wrap;
        gap: .35rem;
    }

    .kiosk-time-badge[b-uvyisqhvqz] {
        font-size: .7rem;
        padding: .2rem .5rem;
    }

    .kiosk-stepper[b-uvyisqhvqz] {
        gap: 0;
        padding: .25rem 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .kiosk-step[b-uvyisqhvqz] {
        min-width: 48px;
        flex-shrink: 0;
    }

    .kiosk-step-dot[b-uvyisqhvqz] {
        width: 30px;
        height: 30px;
        font-size: .8rem;
    }

    .kiosk-step-line[b-uvyisqhvqz] {
        margin-top: 14px;
        min-width: 12px;
    }

    .kiosk-step-label[b-uvyisqhvqz] {
        font-size: .55rem;
    }
}

/* Rejected/replaced items on the track page — strike-through the item name
   and dim the whole row so the requester can see what changed. */
.track-item-inactive[b-uvyisqhvqz] {
    opacity: 0.65;
}

.track-item-inactive .track-item-name[b-uvyisqhvqz] {
    text-decoration: line-through;
}

@media (prefers-color-scheme: dark) {
    .track-item-inactive[b-uvyisqhvqz] {
        opacity: 0.75;
    }
}

/* Requester photos attached to an item line — small clickable thumbs
   that open the full-screen gallery viewer. */
.track-item-photos[b-uvyisqhvqz] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.track-item-photo[b-uvyisqhvqz] {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #dee2e6;
    cursor: zoom-in;
}
/* /Pages/VerifyEmail.razor.rz.scp.css */
.verify-email-icon[b-avwyt0rw8g]
{
    font-size: 4rem;
}