/* ── Viewport height ── */
/* No CSS `zoom` on html: MudBlazor positions popovers (select/menu dropdowns) with
   viewport coordinates, and zoom shifts them away from the clicked element. */
:root {
    --mole-vh100: 100vh;
    /* OrdiBee brand tokens (theme-independent). Theme-dependent colors come from --mud-palette-*. */
    --ob-gold: #C9A227;
    --ob-gold-hover: #D9B23A;
    --ob-gold-soft: rgba(201, 162, 39, 0.14);
    --ob-blue: #4A86C5;
    --ob-ink: #13161C;
    --ob-cream: #ECE8DD;
    --ob-hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='104'%3E%3Cpath d='M30 0 L60 17 L60 52 L30 69 L0 52 L0 17 Z M30 69 L30 104' fill='none' stroke='%23C9A227' stroke-width='1.2'/%3E%3C/svg%3E");
    --ob-hex-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M30 10 L48 20 L48 41 L30 51 L12 41 L12 20 Z' fill='%23C9A227' fill-opacity='.18'/%3E%3Cpath d='M70 10 L88 20 L88 41 L70 51 L52 41 L52 20 Z' fill='%234A86C5' fill-opacity='.18'/%3E%3Cpath d='M50 45 L68 55 L68 76 L50 86 L32 76 L32 55 Z' fill='none' stroke='%23ECE8DD' stroke-opacity='.18' stroke-width='3'/%3E%3C/svg%3E");
}

/* ── Base & Reset ── */
html, body {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    min-height: var(--mole-vh100);
    background: var(--mud-palette-background);
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    color: var(--mud-palette-text-primary);
    font-size: 0.875rem;
    line-height: 1.55;
    overscroll-behavior-y: contain;
    overflow-x: hidden;
}

#app {
    min-height: var(--mole-vh100);
    overflow-x: clip;
}

h1:focus {
    outline: none;
}

a {
    text-decoration: none;
}

/* ── Brand selection & highlight ── */
::selection {
    background: rgba(var(--mud-palette-primary-rgb), 0.18);
    color: inherit;
}

/* ── Reusable utilities ── */
.fill-height {
    height: 100%;
}

.cursor-pointer {
    cursor: pointer;
}

/* ── Card hover-lift for interactive cards ── */
.card-lift {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.card-lift:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(var(--mud-palette-primary-rgb), 0.13);
}

.card-lift:active {
    transform: translateY(0);
    box-shadow: none;
}

/* ── Touch-friendly tap targets ── */
.touch-target {
    min-width: 36px;
    min-height: 36px;
}

/* ── Validation styling ── */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #ef4444;
}

.validation-message {
    color: #ef4444;
}

/* ── Focus outlines for accessibility ── */
:focus-visible {
    outline: 2px solid var(--mud-palette-primary, var(--mud-palette-primary));
    outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--mud-palette-primary, var(--mud-palette-primary));
    outline-offset: 2px;
}

/* ── Blazor error UI ── */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ── Scrollbar styling ── */
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(var(--mud-palette-primary-rgb), 0.22);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--mud-palette-primary-rgb), 0.38);
}

/* ── MudBlazor global compact overrides ── */
.mud-nav-link {
    min-height: 36px !important;
}

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

.mole-app-bar {
    border-bottom: 1px solid rgba(201, 162, 39, 0.18);
    backdrop-filter: blur(10px);
    z-index: calc(var(--mud-zindex-appbar) + 1);
}

.mole-mobile-title {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    pointer-events: none;
    z-index: 0;
}

.mole-mobile-title-text {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Right side holds the notification bell (~56px) + overflow menu (~48px): keep the title clear of both. */
    padding: 0 108px 0 56px;
}

/* ── DataGrid row touch-friendly height ── */
.mud-table-body .mud-table-row td {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}

/* ── Compact density (Phase 1) ── */
/* Main content clears the fixed app bar using the theme height (LayoutProperties.AppbarHeight). */
.mole-main-content {
    padding-top: var(--mud-appbar-height) !important;
}

.mud-nav-link {
    padding-top: 6px;
    padding-bottom: 6px;
}

/* ── Compact dropdowns (MudSelect only — text fields and the login form keep default size) ── */
/* The select input takes its font from the subtitle1 typo (600 weight); make it lighter and smaller. */
.mud-select .mud-input.mud-typography-subtitle1 {
    font-size: 0.8125rem;
    font-weight: 500;
}

/* Compact ONLY dropdowns that have no label (inline grid-row editors). Anything with a label
   (form fields, detail panels, dialogs) keeps the default padding so the label never crowds the text.
   Same specificity family as MudBlazor's dense outlined padding; loaded later so it wins. */
.mud-table-cell .mud-select:not(:has(.mud-input-label)) .mud-input > input.mud-input-root-outlined.mud-input-root-margin-dense,
.mud-table-cell .mud-select:not(:has(.mud-input-label)) div.mud-input-slot.mud-input-root-outlined.mud-input-root-margin-dense {
    padding-top: 3px;
    padding-bottom: 3px;
}
.mud-table-cell .mud-select:not(:has(.mud-input-label)) .mud-input-adornment .mud-icon-root {
    font-size: 1.15rem;
}

/* ── Dialogs: a bit more breathing room than page content ── */
.mud-dialog .mud-dialog-content {
    padding-top: 8px;
}
.mud-dialog .mud-stack-column {
    row-gap: 16px;
}
.mud-dialog .mud-input > input.mud-input-root-outlined.mud-input-root-margin-dense,
.mud-dialog div.mud-input-slot.mud-input-root-outlined.mud-input-root-margin-dense {
    padding-top: 13px;
    padding-bottom: 13px;
}

/* ── Grid cell content stays narrow: text and chips wrap instead of widening the column ── */
/* Applies to every MudDataGrid/MudTable in both clients; no per-page classes needed. */
.mud-table-body .mud-table-cell .mud-typography {
    max-width: 260px;
    /* break-word, not anywhere: "anywhere" lets the table squeeze a column to one letter per line */
    overflow-wrap: break-word;
}
/* Opt-in narrower cap for a specific text cell (e.g. supplier names). */
.cell-wrap {
    max-width: 120px !important;
    white-space: normal;
}
/* Chips are single-line by default; let long text wrap and grow in height instead. */
.mud-table-cell .mud-chip {
    height: auto;
    min-height: 24px;
    max-width: 200px;
}
.mud-table-cell .mud-chip .mud-chip-content {
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.25;
    padding-top: 2px;
    padding-bottom: 2px;
}

/* ── Smooth page-rise animation on navigation ──
   Replayed by MainLayout AFTER the new page has rendered (never before: the old content would sit
   invisible while the new page builds, which read as a blank/white flash on slower phones).
   It starts from a visible state on purpose, so the page never looks empty or washed out. */
@keyframes page-rise {
    from {
        opacity: 0.6;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.page-rise {
    animation: page-rise 0.18s ease-out backwards;
}

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

/* ── A list row that was just handled fades/slides out before it is removed
      (Pending Orders), so the rows below do not jump under the finger. ── */
@keyframes ob-row-leave {
    to {
        opacity: 0;
        transform: translateX(24px);
    }
}

.ob-row-leaving {
    animation: ob-row-leave 0.22s ease-in forwards;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .ob-row-leaving {
        animation-duration: 0.01s;
    }
}

/* ── Placeholder cards while a list loads its first data (ListSkeleton) ── */
.ob-list-skeleton {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Page header consistent styling ── */
.page-header {
    margin-bottom: 0.25rem;
}

.orders-detail-tabs .mud-tab {
    text-transform: none;
}

/* ── Responsive adjustments ── */
/* (The old <960px rule that raised cell padding to 0.65rem was removed: compact views,
   see "Responsive & Compact" at the end of this file.) */

@media (max-width: 599.98px) {
    .mud-dialog {
        margin: 8px !important;
    }

    .mud-dialog .mud-dialog-content {
        padding: 12px !important;
    }
}

/* ── Tablet-optimized touch (portrait) ── */
@media (min-width: 600px) and (max-width: 1279.98px) {
    .mud-input .mud-input-slot,
    .mud-select .mud-input-slot {
        min-height: 32px;
    }
}

/* ── Dashboard Stat Cards ── */
.stat-card {
    border-left: 4px solid var(--mud-palette-primary);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(19, 22, 28, 0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--mud-palette-primary-rgb), 0.13);
}

.stat-card-primary { border-left-color: var(--mud-palette-primary); }
.stat-card-success { border-left-color: var(--mud-palette-success); }
.stat-card-info    { border-left-color: var(--mud-palette-secondary); }
.stat-card-warning { border-left-color: var(--mud-palette-warning); }
.stat-card-error   { border-left-color: var(--mud-palette-error); }
.stat-card-dark    { border-left-color: var(--mud-palette-text-primary); }

/* ── KPI Typography ── */
.kpi-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--mud-palette-text-primary);
}

.kpi-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07rem;
    color: var(--dash-text-2);
    text-transform: none;
}

/* ── Dashboard Welcome Banner ── */
.dashboard-banner {
    background: linear-gradient(135deg, var(--mud-palette-primary) 0%, var(--mud-palette-tertiary) 100%);
    border-radius: 12px;
    padding: 1.5rem 2rem;
    color: white;
    position: relative;
    overflow: hidden;
}

.dashboard-banner::after {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 180px;
    height: 180px;
    background: rgba(255,255,255,0.07);
    border-radius: 50%;
    pointer-events: none;
}

.dashboard-banner .banner-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: white;
    margin: 0;
}

.dashboard-banner .banner-sub {
    font-size: 0.88rem;
    color: #9AA1AF;
    margin: 0;
}

/* ── Section Label ── */
.section-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.1rem;
    color: var(--dash-text-2);
}

/* ── Progress Bar for Stats ── */
.stat-progress-track {
    height: 5px;
    background: rgba(var(--mud-palette-primary-rgb), 0.12);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 0.5rem;
}

.stat-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
    background: var(--mud-palette-primary);
}

.stat-progress-fill-success { background: var(--mud-palette-success); }
.stat-progress-fill-info    { background: var(--mud-palette-secondary); }
.stat-progress-fill-warning { background: var(--mud-palette-warning); }
.stat-progress-fill-error   { background: var(--mud-palette-error); }

/* ── Card Top Color Band ── */
.card-top-band {
    border-top: 3px solid;
}

.card-top-band-primary { border-top-color: var(--mud-palette-primary); }
.card-top-band-success { border-top-color: var(--mud-palette-success); }
.card-top-band-info    { border-top-color: var(--mud-palette-secondary); }
.card-top-band-warning { border-top-color: var(--mud-palette-warning); }
.card-top-band-error   { border-top-color: var(--mud-palette-error); }
.card-top-band-dark    { border-top-color: var(--mud-palette-text-primary); }

/* ── Filter Section Header Label ── */
.filter-section-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.06rem;
    color: var(--dash-text-2);
    margin-bottom: 0.5rem;
    display: block;
}

/* ── Avatar Initials (small colored circle in table) ── */
/* Foreground follows the palette's text colour rather than the brand blue: Primary is
   var(--mud-palette-primary) in *both* light and dark palettes, so a blue-on-blue avatar would be unreadable
   on the dark surface. Tinting off the text colour keeps it legible either way. */
.avatar-initials {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--mud-palette-text-primary, var(--mud-palette-text-primary)) 12%, transparent);
    color: var(--mud-palette-text-primary, var(--mud-palette-text-primary));
    font-size: 0.72rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
}

/* ── Colored Nav Icon Pill ── */
.nav-icon-pill {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
}

/* ── Nav card with icon block ── */
.nav-quick-card {
    border-radius: 10px;
    border: 1.5px solid rgba(var(--mud-palette-primary-rgb), 0.10);
    background: #fff;
    transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
    cursor: pointer;
}

.nav-quick-card:hover {
    border-color: rgba(var(--mud-palette-primary-rgb), 0.35);
    box-shadow: 0 4px 18px rgba(var(--mud-palette-primary-rgb), 0.10);
    transform: translateY(-2px);
}

/* ── Responsive adjustments for new components ── */
@media (max-width: 599.98px) {
    .dashboard-banner {
        padding: 1rem 1.25rem;
    }

    .dashboard-banner .banner-title {
        font-size: 1.15rem;
    }

    .kpi-value {
        font-size: 1.6rem;
    }
}

/* ── Accessibility: screen-reader only ── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ── KPI trend delta badges ── */
.kpi-delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.74rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 999px;
    margin-top: 4px;
}

.kpi-delta-up {
    background: rgba(var(--mud-palette-success-rgb), 0.12);
    color: var(--mud-palette-success);
}

.kpi-delta-down {
    background: rgba(var(--mud-palette-error-rgb), 0.12);
    color: var(--mud-palette-error);
}

.kpi-delta-neutral {
    background: rgba(108, 115, 131, 0.12);
    color: var(--dash-text-2);
}

/* ── Chart section header ── */
.chart-section-header {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08rem;
    color: var(--dash-text-2);
    margin-bottom: 0.25rem;
}

/* ── Empty state container ── */
.empty-state-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    gap: 0.5rem;
    text-align: center;
}

/* ── Stagger animation for stat cards ── */
.stat-card:nth-child(1) { animation-delay: 0s; }
.stat-card:nth-child(2) { animation-delay: 0.05s; }
.stat-card:nth-child(3) { animation-delay: 0.10s; }
.stat-card:nth-child(4) { animation-delay: 0.15s; }

/* ── Mobile Responsiveness (phones < 600px) ── */
@media (max-width: 599.98px) {

    /* Prevent horizontal scroll globally */
    body {
        overflow-x: hidden;
    }
    .mud-main-content,
    .mud-container {
        max-width: 100%;
        overflow-x: hidden;
    }
    /* Cards and table containers must NOT clip: simple tables scroll sideways instead
       (they used to be cut off silently). */
    .mud-table-container {
        overflow-x: auto;
    }

    /* Typography: never larger than desktop on the smallest screen (theme h4 is 1.1rem). */
    .mud-typography-h4 {
        font-size: 1.05rem !important;
    }

    /* ── Home page nav cards: fix icon+text row overflow ── */
    .nav-quick-card .mud-card-content {
        padding: 10px !important;
    }
    /* Shrink avatar so text has room */
    .nav-quick-card .mud-avatar {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        flex-shrink: 0;
    }
    .nav-quick-card .mud-avatar .mud-icon-root {
        font-size: 0.95rem !important;
    }
    /* Text wraps instead of overflowing */
    .nav-quick-card .mud-typography-subtitle1 {
        font-size: 0.78rem !important;
        line-height: 1.2;
        word-break: break-word;
        overflow-wrap: break-word;
        min-width: 0;
        flex: 1;
    }
    .nav-quick-card .mud-typography-caption {
        font-size: 0.68rem !important;
        line-height: 1.2;
    }

    /* DataGrid inline selects — remove min-width constraints */
    .mud-table .mud-select,
    .mud-table .mud-input-control {
        min-width: unset !important;
        width: 100%;
    }
    .mud-table td[style*="min-width"] {
        min-width: unset !important;
    }
    /* DataGrid card mode — no horizontal scroll */
    .mud-table-card,
    .mud-table-card .mud-table-container {
        overflow-x: hidden !important;
    }
    /* Remove white-space:nowrap in card mode cells */
    .mud-table .mud-table-cell .mud-text {
        white-space: normal !important;
    }

    /* Page headers: one compact row (title + icon actions), wraps if needed */
    .page-header-row {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 6px !important;
    }
    .page-header-row .mud-typography-caption {
        display: none;
    }
    .page-header-row .mud-avatar {
        width: 32px !important;
        height: 32px !important;
        font-size: 1rem;
    }

    /* Tab headers — compact for long Greek text */
    .mud-tabs .mud-tab {
        font-size: 0.75rem !important;
        padding: 8px 10px !important;
        min-width: unset !important;
    }

    /* Filter rows — full-width stacking */
    .filter-bar-row {
        flex-direction: column !important;
        gap: 8px !important;
    }

    /* Button groups — full-width on mobile */
    .mud-button-group-root {
        width: 100%;
    }
    .mud-button-group-root .mud-button-root {
        flex: 1;
    }

    /* DataGrid action columns — compact spacing */
    .mud-table-cell .mud-stack[class*="d-flex"] {
        gap: 2px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Home Dashboard
   Surfaces and text bind to the --dash-* tokens at the bottom of this block, which
   alias MudBlazor's own --mud-palette-* variables. That is what makes dark mode work
   here without a `.mud-theme-dark` class — MudBlazor 8 has no such class; it rewrites
   the custom properties when IsDarkMode flips.
   ═══════════════════════════════════════════════════════════════════════════ */

.dash-grid {
    display: grid;
    gap: 16px;
}

.dash-grid-kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dash-grid-2-1 { grid-template-columns: 2fr 1fr; }
.dash-grid-links { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* Responsive (plan §6.1): KPI stays 4-up down to 600px and 2×2 on phones; chart + donut stay
   side by side (2fr/1fr) down to 720px; quick links stay 6-up as compact tiles, 3-up on phones.
   Off desktop the gaps tighten so 1280×720 tablets get the dashboard on one screen. */
@media (max-width: 719.98px) {
    .dash-grid-2-1 { grid-template-columns: 1fr; }
}

@media (max-width: 599.98px) {
    .dash-grid { gap: 8px; }
    .dash-grid-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-grid-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ob-compact .dash-grid { gap: 10px; }
.ob-phone .dash-grid { gap: 8px; }

/* ── Welcome banner ── */
.dash-banner {
    background: var(--ob-ink) var(--ob-hex-pattern) right -40px top -30px / 120px auto no-repeat;
    border: 1px solid rgba(201, 162, 39, 0.35);
    border-radius: 12px;
    padding: 1.5rem 2rem;
    color: var(--ob-cream);
    position: relative;
    overflow: hidden;
}

.dash-banner::after {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(201, 162, 39, 0.10) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.dash-banner .dash-banner-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ob-cream);
    margin: 0;
}

.dash-banner .dash-banner-sub {
    font-size: 0.88rem;
    color: #9AA1AF;
    margin: 0;
}

.dash-banner-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.dash-banner-text { min-width: 0; flex: 1 1 auto; }

.dash-banner-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

/* Tablets: a slimmer banner. Short screens (1280×720): greeting and date on one line. */
.ob-compact .dash-banner { padding: 0.8rem 1.1rem; }
.ob-compact .dash-banner .dash-banner-title { font-size: 1.15rem; }
.ob-short .dash-banner { padding: 0.5rem 1rem; }
.ob-short .dash-banner-text {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 0.45rem;
}
.ob-short .dash-banner .dash-banner-title { font-size: 1.05rem; }
.ob-short .dash-banner .dash-banner-sub { font-size: 0.8rem; }
.ob-short .dash-banner .dash-banner-sub::before { content: "· "; }

/* Phones: one line — greeting/short date on the left, the store icon menu on the right. */
@media (max-width: 599.98px) {
    .dash-banner { padding: 0.6rem 0.75rem; border-radius: 10px; }
    .dash-banner-row { flex-wrap: nowrap; gap: 8px; }
    .dash-banner .dash-banner-title,
    .dash-banner .dash-banner-sub {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .dash-banner .dash-banner-title { font-size: 1rem; }
    .dash-banner .dash-banner-sub { font-size: 0.72rem; }
    .dash-banner-actions { flex-wrap: nowrap; flex-shrink: 0; }
}

/* Phone store filter: icon + chevron button opening a menu (same choices as the select). */
.dash-store-btn {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 2px 0 8px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.08);
    color: var(--ob-cream);
    cursor: pointer;
    font-family: inherit;
}

.dash-store-btn.is-active {
    border-color: var(--ob-gold);
    color: var(--ob-gold);
}

/* Store scope filter, sitting on the banner gradient. MudBlazor's outlined default is a
   grey border and dark text, which disappears against the blue — restate it as a
   translucent white outline instead of fighting it with inline styles.
   No hard min-width: it may shrink inside the wrapping action row. */
.dash-store-select {
    width: 230px;
    max-width: 100%;
    min-width: 0;
    color: #fff;
    font-size: 0.82rem;
}

.ob-compact .dash-store-select { width: 200px; }

.dash-store-select .mud-input-control {
    border-radius: 8px;
}

.dash-store-select .mud-input-slot {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.45);
}

.dash-store-select .mud-input {
    color: #fff;
}

.dash-store-select .mud-input::placeholder,
.dash-store-select .mud-input-text,
.dash-store-select .mud-input-slot > .mud-input-adornment {
    color: #fff;
    opacity: 1;
}

.dash-store-select .mud-input-line {
    display: none;
}

.dash-store-select .mud-input:focus-within .mud-input-slot {
    border-color: #fff;
}

/* ── KPI card ── */
.dash-kpi {
    border-left: 4px solid var(--dash-accent, var(--mud-palette-primary));
    border-radius: 8px;
    background: var(--dash-surface);
    box-shadow: var(--dash-shadow);
    padding: 1rem 1.1rem 0.85rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.dash-kpi:hover {
    transform: translateY(-2px);
    box-shadow: var(--dash-shadow-hi);
}

.dash-kpi-primary { --dash-accent: var(--mud-palette-primary); }
.dash-kpi-warning { --dash-accent: var(--mud-palette-warning); }
.dash-kpi-success { --dash-accent: var(--mud-palette-success); }
.dash-kpi-error   { --dash-accent: var(--mud-palette-error); }

.dash-kpi .kpi-value { color: var(--dash-text); }

.dash-kpi-track {
    height: 5px;
    background: var(--dash-track);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 0.5rem;
}

.dash-kpi-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--dash-accent);
    transition: width 0.6s ease;
}

/* Compact KPI tiles: 4-up on tablets, 2×2 on phones. The caption line (delta / sub-text)
   goes on short screens and phones — the figure and the bar carry the message. */
.ob-compact .dash-kpi { padding: 0.7rem 0.85rem 0.6rem; }
.ob-compact .dash-kpi .kpi-label { font-size: 0.64rem; letter-spacing: 0.04rem; }
.ob-compact .dash-kpi .kpi-value { font-size: 1.6rem; }
.ob-short .dash-kpi .kpi-value { font-size: 1.45rem; }
.ob-short .dash-kpi .kpi-delta { display: none; }
.ob-short .dash-kpi-track { margin-top: 0.4rem; }

@media (max-width: 599.98px) {
    .dash-kpi { padding: 0.55rem 0.65rem 0.5rem; }
    .dash-kpi .kpi-label { font-size: 0.6rem; letter-spacing: 0.03rem; line-height: 1.25; }
    .dash-kpi .kpi-value { font-size: 1.35rem; }
    .dash-kpi .kpi-delta { display: none; }
    .dash-kpi > .d-flex > .mud-icon-root { font-size: 1.15rem; width: 1.15rem; height: 1.15rem; }
    .dash-kpi-track { height: 4px; margin-top: 0.4rem; }
    .dash-skeleton-value { height: 1.3rem; }
}

/* ── Section label above a group of cards ── */
.dash-section-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1rem;
    color: var(--dash-text-2);
}

/* ── Chart panel ── */
.dash-panel {
    border-radius: 10px;
    border: 1.5px solid var(--dash-border);
    background: var(--dash-surface);
    padding: 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
}

.dash-panel-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--dash-text);
    margin: 0;
}

.dash-panel-sub {
    font-size: 0.75rem;
    color: var(--dash-text-2);
    margin: 0;
}

.dash-panel-heading { min-width: 0; }

.ob-compact .dash-panel { padding: 0.8rem 0.95rem; }
.ob-short .dash-panel { padding: 0.6rem 0.85rem; }

@media (max-width: 599.98px) {
    .dash-panel { padding: 0.7rem 0.75rem; }
    .dash-panel-title { font-size: 0.9rem; }
}

/* ── Range tabs (7 / 14 / 30 days) ── */
.dash-tabs {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border-radius: 999px;
    background: var(--dash-track);
}

.dash-tab {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 11px;
    border-radius: 999px;
    color: var(--dash-text-2);
    cursor: pointer;
    border: none;
    background: transparent;
    font-family: inherit;
    transition: background 0.18s ease, color 0.18s ease;
}

.dash-tab:hover { color: var(--dash-text); }

.dash-tab-on {
    background: var(--dash-surface);
    color: var(--mud-palette-primary);
    box-shadow: 0 1px 3px rgba(19, 22, 28, 0.12);
}

/* Phones show just the numbers (7 / 14 / 30); keep a comfortable tap target. */
@media (max-width: 599.98px) {
    .dash-tab { padding: 4px 10px; min-width: 32px; }
}

/* ── Bar chart skeleton ── The real chart is now MudChart (ChartType.Bar); these two
   classes survive only to lay out the loading-state placeholder bars (.dash-skeleton-bar
   is self-contained and does not depend on anything below). */
.dash-bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 180px;
    margin-top: 0.9rem;
}

.dash-bar-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    position: relative;
}

/* MudBlazor's Bar chart hardcodes its SVG stroke-width (8 user units) as a private const
   with no ChartOptions equivalent — an author-stylesheet rule on the stroke-width CSS
   property beats that presentation attribute, so this is the only lever available. Scoped
   to this one chart's wrapper so it never reaches another MudChart elsewhere in the app.
   DailyOrdersChart sets --dash-bar-stroke per device and range (20 on desktop; thinner on
   narrow panels with many days so neighbouring bars never touch). */
.dash-bar-chart-wrap .mud-chart-bar {
    stroke-width: var(--dash-bar-stroke, 20);
}

.dash-chart-foot {
    font-size: 0.75rem;
    color: var(--dash-text-2);
    margin-top: 0.6rem;
}

.dash-chart-foot b { color: var(--dash-text); }

/* Chart height itself comes from DailyOrdersChart (MudChart Height). The totals line is
   dropped where vertical room is scarce. */
.ob-compact .dash-bars { margin-top: 0.5rem; }
.ob-short .dash-chart-foot { display: none; }
@media (max-width: 599.98px) {
    .dash-chart-foot { display: none; }
    .dash-bars { gap: 3px; margin-top: 0.5rem; }
}

/* ── Donut chart (MudChart ChartType.Donut — same component Reports.razor already uses) ──
   Earlier attempts drew the ring by hand: first a CSS conic-gradient masked with a
   radial-gradient, then an SVG stroke-dasharray ring. Both were solving a problem MudBlazor
   already solves, and the conic-gradient version rendered as a blank circle on some real
   Chrome/GPU combinations even with every cache cleared. MudChart's own SVG rendering is a
   path already exercised elsewhere in this app, so the chart itself needs no bespoke CSS —
   only the centre total/caption overlay, which MudChart's Donut type does not draw itself. */
.dash-donut-wrap {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    margin-top: 0.9rem;
}

.dash-donut {
    position: relative;
    width: 148px;
    height: 148px;
    flex-shrink: 0;
}

.dash-donut-center {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
}

/* The caption is lifted out of flow so the figure itself — not the two-line block — lands on
   the circle's centre line. Centring the block instead pushed the number up by half the
   caption's height, which is precisely the "the number is off-centre" this replaces. */
.dash-donut-center > .dash-donut-caption {
    position: absolute;
    top: calc(50% + 1.15rem);
    left: 0;
    right: 0;
    text-align: center;
}

.dash-donut-total {
    font-size: 1.5rem;
    font-weight: 700;
    /* Inherited body leading would otherwise add slack inside the figure's own line box. */
    line-height: 1;
    color: var(--dash-text);
    font-variant-numeric: tabular-nums;
}

.dash-donut-caption {
    font-size: 0.62rem;
    color: var(--dash-text-2);
    text-align: center;
    line-height: 1.2;
}

.dash-legend {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.dash-legend-row {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.76rem;
    color: var(--dash-text);
}

.dash-legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    flex-shrink: 0;
}

.dash-legend-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-legend-count {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--dash-text);
}

.dash-legend-pct {
    font-size: 0.7rem;
    color: var(--dash-text-2);
    font-variant-numeric: tabular-nums;
    min-width: 30px;
    text-align: right;
}

/* Ring size comes from StatusDonutChart (inline width/height, matching the MudChart size).
   Ring and legend stay side by side — phones included — and stack only when the panel
   itself is narrow (the 1fr column on tablet portrait / with an open drawer). The panel is
   a size container so this follows the panel, not the viewport. */
.dash-panel-donut { container: dash-donut / inline-size; }

@container dash-donut (max-width: 260px) {
    .dash-donut-wrap { flex-direction: column; align-items: stretch; gap: 0.7rem; }
    .dash-donut { margin: 0 auto; }
}

.ob-compact .dash-donut-wrap { gap: 1rem; margin-top: 0.5rem; }
.ob-compact .dash-donut-total { font-size: 1.3rem; }
.ob-compact .dash-legend { gap: 0.25rem; }
.ob-short .dash-donut-center > .dash-donut-caption { top: calc(50% + 0.95rem); }

@media (max-width: 599.98px) {
    .dash-donut-wrap { gap: 0.85rem; margin-top: 0.5rem; }
    .dash-donut-total { font-size: 1.1rem; }
    .dash-donut-center > .dash-donut-caption { display: none; }
    .dash-legend { gap: 0.2rem; }
    .dash-legend-row { font-size: 0.72rem; gap: 6px; }
}

/* ── Recent orders table ── */
.dash-table-wrap { overflow-x: auto; margin-top: 0.5rem; }

.dash-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.dash-table th {
    text-align: left;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06rem;
    color: var(--dash-text-2);
    padding: 0 0.6rem 0.5rem;
    white-space: nowrap;
    border-bottom: 1px solid var(--dash-border);
}

.dash-table td {
    padding: 0.55rem 0.6rem;
    color: var(--dash-text);
    border-bottom: 1px solid var(--dash-track);
    white-space: nowrap;
}

.dash-table tbody tr { transition: background 0.15s ease; }
.dash-table tbody tr:hover { background: var(--dash-row-hover); }

.dash-table .dash-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.dash-table .dash-muted { color: var(--dash-text-2); }

.dash-cust {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.dash-cust .avatar-initials { width: 28px; height: 28px; font-size: 0.66rem; }

/* ── Status pill ── */
.dash-pill {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.dash-pill-blue   { background: rgba(var(--mud-palette-primary-rgb), 0.12); color: var(--mud-palette-primary); }
.dash-pill-amber  { background: rgba(var(--mud-palette-warning-rgb), 0.16); color: var(--mud-palette-warning-darken); }
.dash-pill-green  { background: rgba(var(--mud-palette-success-rgb), 0.14); color: var(--mud-palette-success-darken); }
.dash-pill-cyan   { background: rgba(var(--mud-palette-secondary-rgb), 0.16); color: var(--mud-palette-secondary); }
.dash-pill-red    { background: rgba(var(--mud-palette-error-rgb), 0.13);  color: var(--dash-error); }
.dash-pill-grey   { background: rgba(108, 115, 131, 0.12); color: var(--dash-text-2); }

.dash-row-link {
    cursor: pointer;
}

/* Compact table: tighter cells off desktop, tighter still on short screens so ~6 rows fit
   under the charts at 1280×720. The store cell never pushes the table wide. */
.ob-compact .dash-table td { padding: 0.4rem 0.5rem; }
.ob-compact .dash-table th { padding: 0 0.5rem 0.4rem; }
.ob-short .dash-table td { padding: 0.28rem 0.5rem; }
.ob-short .dash-cust .avatar-initials { width: 24px; height: 24px; font-size: 0.6rem; }
.ob-compact .dash-table-wrap { margin-top: 0.35rem; }

.dash-table .dash-cell-store {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tablet portrait status cluster: read-only icon chips (StatusChipMenu look, no menu). */
.ob-sc.dash-sc-static { cursor: default; }
.ob-sc.dash-sc-static:hover { filter: none; }

/* ── Recent orders, phone: two-line list instead of the table ── */
.dash-mlist {
    display: flex;
    flex-direction: column;
    margin-top: 0.3rem;
}

.dash-mrow {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    padding: 0.5rem 0.15rem;
    border-bottom: 1px solid var(--dash-track);
}

.dash-mrow:last-child { border-bottom: 0; }
.dash-mrow.dash-row-link:active { background: var(--dash-row-hover); }
.dash-mrow .avatar-initials { width: 28px; height: 28px; font-size: 0.66rem; }
.dash-mrow > .dash-pill { flex-shrink: 0; }

.dash-mrow-main { flex: 1 1 auto; min-width: 0; }

.dash-mrow-name,
.dash-mrow-sub {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-mrow-name {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--dash-text);
}

.dash-mrow-sub {
    font-size: 0.72rem;
    color: var(--dash-text-2);
    margin-top: 1px;
}

/* ── Quick link tile ── */
.dash-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 0.9rem;
    border-radius: 10px;
    border: 1.5px solid var(--dash-border);
    background: var(--dash-surface);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.dash-link:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--mud-palette-primary-rgb), 0.35);
    box-shadow: var(--dash-shadow-hi);
}

.dash-link-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dash-link-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--dash-text);
    line-height: 1.25;
}

.dash-link-sub {
    font-size: 0.72rem;
    color: var(--dash-text-2);
}

/* Compact tiles off desktop: icon over title, no caption (6-up on tablets, 3-up on phones). */
.ob-compact .dash-link {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 0.35rem;
    padding: 0.55rem 0.4rem;
}
.ob-compact .dash-link-sub { display: none; }
.ob-compact .dash-link-icon { width: 30px; height: 30px; border-radius: 8px; }
.ob-compact .dash-link-title { font-size: 0.74rem; }

@media (max-width: 599.98px) {
    .dash-link {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 0.3rem;
        padding: 0.5rem 0.3rem;
    }
    .dash-link-sub { display: none; }
    .dash-link-title { font-size: 0.72rem; overflow-wrap: anywhere; }
}

/* ── Empty / error state ── */
.dash-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 2.5rem 1rem;
    text-align: center;
    font-size: 0.82rem;
    color: var(--dash-text-2);
}

/* ── Loading placeholders ──
   Each widget loads on its own, so a slow region must not blank the whole dashboard — the
   other panels stay interactive while their siblings show a placeholder of the same shape. */
.dash-kpi-skeleton {
    pointer-events: none;
}

.dash-skeleton-line {
    border-radius: 5px;
    background: linear-gradient(
        90deg,
        var(--dash-skeleton-a) 0%,
        var(--dash-skeleton-b) 50%,
        var(--dash-skeleton-a) 100%);
    background-size: 200% 100%;
    animation: dash-shimmer 1.4s ease-in-out infinite;
}

.dash-skeleton-label { height: 0.6rem; width: 55%; margin-bottom: 0.55rem; }

.dash-skeleton-value { height: 1.7rem; width: 38%; }

.dash-skeleton-bar {
    width: 100%;
    min-height: 6px;
    border-radius: 5px;
    background: linear-gradient(
        90deg,
        var(--dash-skeleton-a) 0%,
        var(--dash-skeleton-b) 50%,
        var(--dash-skeleton-a) 100%);
    background-size: 200% 100%;
    animation: dash-shimmer 1.4s ease-in-out infinite;
}

.dash-skeleton-donut {
    width: 148px;
    height: 148px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--dash-skeleton-a);
    animation: dash-pulse 1.4s ease-in-out infinite;
}

@keyframes dash-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

@keyframes dash-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

/* Lets a single widget's alert stretch across its own grid row instead of sitting in one
   column, which is what the KPI grid needs when its four cards are replaced by an error. */
.dash-span-all {
    grid-column: 1 / -1;
}

@media (prefers-reduced-motion: reduce) {
    .dash-skeleton-line,
    .dash-skeleton-bar,
    .dash-skeleton-donut {
        animation: none;
    }
}

/* ═══ Theme tokens ═══
   MudBlazor has no `.mud-theme-dark` class to hang overrides off — it rewrites these
   `--mud-palette-*` custom properties in a <style> block when IsDarkMode flips. So the
   dashboard binds straight to them and inherits light/dark with no second source of
   truth and no duplicated palette. (The pre-existing .stat-card / .nav-quick-card rules
   above hardcode #fff, which is why they get the neutral-surface patch at the end.) */
:root {
    --dash-surface: var(--mud-palette-surface, #ffffff);
    --dash-text: var(--mud-palette-text-primary, var(--mud-palette-text-primary));
    --dash-text-2: var(--mud-palette-text-secondary, var(--mud-palette-text-secondary));
    --dash-border: var(--mud-palette-lines-default, rgba(var(--mud-palette-primary-rgb), 0.18));
    --dash-track: color-mix(in srgb, var(--mud-palette-primary, var(--mud-palette-primary)) 12%, transparent);
    --dash-row-hover: color-mix(in srgb, var(--mud-palette-primary, var(--mud-palette-primary)) 5%, transparent);
    --dash-shadow: 0 1px 4px rgba(19, 22, 28, 0.06);
    --dash-shadow-hi: 0 6px 20px rgba(var(--mud-palette-primary-rgb), 0.13);
    --dash-error: var(--mud-palette-error, var(--mud-palette-error));
    --dash-skeleton-a: color-mix(in srgb, var(--dash-text) 8%, transparent);
    --dash-skeleton-b: color-mix(in srgb, var(--dash-text) 15%, transparent);
}

/* Repoint the pre-existing hardcoded-white dashboard cards at the active surface so they
   don't render as white slabs on the dark theme. */
.stat-card,
.nav-quick-card {
    background: var(--dash-surface);
}

.kpi-value { color: var(--dash-text); }
.kpi-label,
.section-label,
.chart-section-header,
.filter-section-label { color: var(--dash-text-2); }
.stat-progress-track { background: var(--dash-track); }
.dash-table td,
.dash-legend-row,
.dash-link-title { color: var(--dash-text); }


/* ── OrdiBee: active navigation item (gold soft background + 3px inset gold bar) ── */
.mud-nav-link.active:not(.mud-nav-link-disabled) {
    background-color: var(--ob-gold-soft) !important;
    box-shadow: inset 3px 0 0 var(--ob-gold);
    color: var(--mud-palette-primary) !important;
    font-weight: 600;
}

.mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon {
    color: var(--mud-palette-primary) !important;
}

/* ── OrdiBee logo component ── */
.ob-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    line-height: 1;
    vertical-align: middle;
}

.ob-logo-mark {
    flex-shrink: 0;
    display: block;
}

.ob-logo-wordmark {
    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════
   OrdiBee honeycomb watermark: extends the .dash-banner mark across the UI.
   Pure decoration: pseudo-elements, pointer-events none, under the content.
   ══════════════════════════════════════════════════════════════ */
:root {
    --ob-hex-outline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='90'%3E%3Cpath d='M26 0 L52 15 L52 45 L26 60 L0 45 L0 15 Z M26 60 L26 90' fill='none' stroke='%23C9A227' stroke-opacity='.10' stroke-width='1'/%3E%3C/svg%3E");
}

/* 1. Page headers (Orders, Pending, Customers, Products, Suppliers) */
.page-header-row {
    position: relative;
    isolation: isolate;
    padding: 0.85rem 1.1rem;
    border-radius: 12px;
    border: 1px solid rgba(201, 162, 39, 0.22);
    background: linear-gradient(90deg, var(--mud-palette-surface) 55%, rgba(201, 162, 39, 0.06));
    overflow: hidden;
}
.page-header-row::before {
    content: '';
    position: absolute;
    z-index: -1;
    right: -28px;
    top: 50%;
    width: 150px;
    height: 150px;
    transform: translateY(-50%);
    background: var(--ob-hex-pattern) center / contain no-repeat;
    pointer-events: none;
}
.page-header-row::after {
    content: '';
    position: absolute;
    z-index: -1;
    right: 0;
    top: 0;
    bottom: 0;
    width: 38%;
    background: var(--ob-hex-outline) right top / 26px 45px repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000);
    mask-image: linear-gradient(90deg, transparent, #000);
    pointer-events: none;
}
/* Header avatar becomes a honeycomb cell */
.page-header-row .mud-avatar {
    border-radius: 0 !important;
    clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
    background: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
}

/* 2. KPI cards: small mark in the corner */
.dash-kpi { position: relative; overflow: hidden; isolation: isolate; }
.dash-kpi::after {
    content: '';
    position: absolute;
    z-index: -1;
    right: -18px;
    bottom: -22px;
    width: 86px;
    height: 86px;
    background: var(--ob-hex-pattern) center / contain no-repeat;
    opacity: 0.75;
    pointer-events: none;
}

/* 3. Chart / content panels: faint outline comb in the top-right */
.dash-panel { position: relative; overflow: hidden; isolation: isolate; }
.dash-panel::before {
    content: '';
    position: absolute;
    z-index: -1;
    right: 0;
    top: 0;
    width: 160px;
    height: 120px;
    background: var(--ob-hex-outline) right top / 26px 45px repeat;
    -webkit-mask-image: radial-gradient(circle at top right, #000, transparent 70%);
    mask-image: radial-gradient(circle at top right, #000, transparent 70%);
    pointer-events: none;
}

/* 4. App bar: honeycomb fading in on the right */
.mud-appbar { isolation: isolate; }
.mud-appbar::before {
    content: '';
    position: absolute;
    z-index: -1;
    right: 0;
    top: 0;
    bottom: 0;
    width: 420px;
    max-width: 50%;
    background: var(--ob-hex-outline) right center / 26px 45px repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000);
    mask-image: linear-gradient(90deg, transparent, #000);
    pointer-events: none;
}

/* 5. Drawer: mark resting at the bottom */
.mud-drawer .mud-drawer-content { position: relative; isolation: isolate; }
.mud-drawer .mud-drawer-content::after {
    content: '';
    position: absolute;
    z-index: -1;
    left: 50%;
    bottom: 18px;
    width: 120px;
    height: 120px;
    transform: translateX(-50%);
    background: var(--ob-hex-pattern) center / contain no-repeat;
    opacity: 0.55;
    pointer-events: none;
}
.mud-drawer-mini.mud-drawer--closed .mud-drawer-content::after { display: none; }
/* Decorations (watermark, bee) must never give the drawer a horizontal scrollbar */
.mud-drawer:not(.ob-filter-sheet) .mud-drawer-content { overflow-x: hidden; }

/* 5b. OrdiBee buddy (js/ordibee-buddy.js): a bee living on the drawer watermark.
   The layer sits exactly over the ::after mark above; keep BOX/BOTTOM in the script in sync. */
.obb-layer {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
    pointer-events: none;
    overflow: visible;
}
.obb-bee { position: absolute; left: 0; top: 0; will-change: transform; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.obb-bee svg { width: 100%; height: 100%; display: block; overflow: visible; }
.obb-bee .obb-flip { transform-origin: 40px 40px; transition: transform .18s; }
.obb-bee .obb-bob { animation: obb-bob 1.1s ease-in-out infinite; }
.obb-bee .obb-wing { transform-box: fill-box; transform-origin: bottom center; animation: obb-flap .07s linear infinite alternate; }
.obb-bee .obb-leg { transform-box: fill-box; transform-origin: top center; animation: obb-dangle 1.1s ease-in-out infinite alternate; }
.obb-bee .obb-eye { transform-box: fill-box; transform-origin: center; animation: obb-blink 4s infinite; }
.obb-bee .obb-ant { transform-box: fill-box; transform-origin: 50% 100%; animation: obb-ant 2.4s ease-in-out infinite; }
.obb-bee.rest .obb-wing { animation: obb-flap 1.6s ease-in-out infinite alternate; }
.obb-bee.rest .obb-bob { animation: none; }
.obb-bee.rest .obb-leg { animation: obb-step .5s ease-in-out infinite alternate; }
.obb-bee.rest .obb-l1, .obb-bee.rest .obb-l4, .obb-bee.rest .obb-l5 { animation-delay: -.25s; }
.obb-bee.obb-scared .obb-eye { animation: none; transform: scale(1.25); }
.obb-bee.obb-scared .obb-mouth { transform-box: fill-box; transform-origin: center; transform: scaleY(-1); }
.obb-bee.obb-happy .obb-mouth { transform-box: fill-box; transform-origin: center top; transform: scale(1.3, 1.5); }
@keyframes obb-flap { from { transform: scaleY(1); } to { transform: scaleY(.25); } }
@keyframes obb-bob { 50% { transform: translateY(-3px); } }
@keyframes obb-dangle { from { transform: rotate(14deg); } to { transform: rotate(22deg); } }
@keyframes obb-step { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
@keyframes obb-blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes obb-ant { 0%, 80%, 100% { transform: rotate(0); } 88% { transform: rotate(-12deg); } }
.mud-drawer-mini.mud-drawer--closed .obb-layer,
.mud-drawer.ob-filter-sheet .obb-layer { display: none; }
@media (prefers-reduced-motion: reduce) { .obb-bee * { animation: none !important; } }
@media print { .obb-layer, .obd-layer { display: none !important; } }

/* Dashboard bee: faint, watermark-like, drifts between the cards of .dash-page. Never clickable. */
.dash-page { position: relative; }
.obd-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.obd-bee { opacity: .32; filter: saturate(.7); transition: opacity .4s; }
.ob-light .obd-bee { opacity: .4; }
.obd-bee.rest { opacity: .26; }

/* 6. Empty states: large mark behind the message */
.empty-state-container, .dash-empty { position: relative; isolation: isolate; }
.empty-state-container::before, .dash-empty::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    width: 180px;
    height: 180px;
    transform: translate(-50%, -50%);
    background: var(--ob-hex-pattern) center / contain no-repeat;
    opacity: 0.6;
    pointer-events: none;
}

/* 7. Dialog titles: gold hairline + small comb */
.mud-dialog .mud-dialog-title {
    position: relative;
    isolation: isolate;
    border-bottom: 1px solid rgba(201, 162, 39, 0.22);
    overflow: hidden;
}
.mud-dialog .mud-dialog-title::after {
    content: '';
    position: absolute;
    z-index: -1;
    right: -14px;
    top: 50%;
    width: 72px;
    height: 72px;
    transform: translateY(-50%);
    background: var(--ob-hex-pattern) center / contain no-repeat;
    pointer-events: none;
}

@media (max-width: 599.98px) {
    .page-header-row { padding: 0.7rem 0.8rem; }
    .page-header-row::before { width: 110px; height: 110px; right: -30px; }
    .page-header-row::after, .mud-appbar::before { display: none; }
}

@media print {
    .page-header-row::before, .page-header-row::after, .dash-kpi::after, .dash-panel::before,
    .mud-appbar::before, .mud-drawer .mud-drawer-content::after,
    .empty-state-container::before, .dash-empty::before, .mud-dialog .mud-dialog-title::after { display: none !important; }
}

/* Light mode watermark: the dark-mode mark (18% fills, cream outline) disappears on white.
   MainLayout puts .ob-light / .ob-dark on MudLayout so we can swap the art per mode. */
.ob-light {
    --ob-hex-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M30 10 L48 20 L48 41 L30 51 L12 41 L12 20 Z' fill='%23C9A227' fill-opacity='.30'/%3E%3Cpath d='M70 10 L88 20 L88 41 L70 51 L52 41 L52 20 Z' fill='%234A86C5' fill-opacity='.26'/%3E%3Cpath d='M50 45 L68 55 L68 76 L50 86 L32 76 L32 55 Z' fill='none' stroke='%2313161C' stroke-opacity='.22' stroke-width='3'/%3E%3C/svg%3E");
    --ob-hex-outline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='90'%3E%3Cpath d='M26 0 L52 15 L52 45 L26 60 L0 45 L0 15 Z M26 60 L26 90' fill='none' stroke='%23A8861A' stroke-opacity='.22' stroke-width='1'/%3E%3C/svg%3E");
}
.ob-light .dash-kpi::after { opacity: 1; }
.ob-light .mud-drawer .mud-drawer-content::after { opacity: 0.8; }
.ob-light .empty-state-container::before, .ob-light .dash-empty::before { opacity: 0.85; }
/* App bar and welcome banner stay dark in light mode, so they keep the dark-mode art */
.ob-light .mud-appbar,
.ob-light .dash-banner {
    --ob-hex-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M30 10 L48 20 L48 41 L30 51 L12 41 L12 20 Z' fill='%23C9A227' fill-opacity='.18'/%3E%3Cpath d='M70 10 L88 20 L88 41 L70 51 L52 41 L52 20 Z' fill='%234A86C5' fill-opacity='.18'/%3E%3Cpath d='M50 45 L68 55 L68 76 L50 86 L32 76 L32 55 Z' fill='none' stroke='%23ECE8DD' stroke-opacity='.18' stroke-width='3'/%3E%3C/svg%3E");
    --ob-hex-outline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='90'%3E%3Cpath d='M26 0 L52 15 L52 45 L26 60 L0 45 L0 15 Z M26 60 L26 90' fill='none' stroke='%23C9A227' stroke-opacity='.10' stroke-width='1'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════════════════════════════════
   Responsive & Compact (plan: MoleDocumentation/Development/11-Responsive-Compact-Plan.md)
   Device classes come from ViewportService and sit on MudLayout:
     .ob-phone (<600) · .ob-tablet-p (600–959) · .ob-tablet-l (960–1279 or short) · .ob-desktop
     .ob-compact = anything but desktop · .ob-short = height ≤ 820 (1280×720 Android tablets)
   Media queries are used where the rule must also work before the first measurement.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Column priority: HeaderClass/CellClass="col-p2" | "col-p3" on grid columns.
      Driven by the GRID's own width (container queries), not the window: it adapts to the drawer
      being open, small desktops (1024–1366) and tablets alike. P1 = always,
      P2 = grid ≥ 760px, P3 = grid ≥ 1100px. Hidden cells also leave the phone card layout. ── */
/* (only data grids: they are always block-level, so size containment is safe) */
.mud-data-grid { container-type: inline-size; }
@container (max-width: 759.98px) {
    .col-p2, .col-p3 { display: none !important; }
}
@container (max-width: 1099.98px) {
    .col-p3 { display: none !important; }
}
/* Plain tables (MudSimpleTable, no container): keep the viewport fallback */
@media (max-width: 959.98px) {
    .mud-simple-table .col-p2, .mud-simple-table .col-p3 { display: none !important; }
}
@media (max-width: 1279.98px) {
    .mud-simple-table .col-p3 { display: none !important; }
}
/* Headers never wrap letter by letter on narrow grids */
@container (max-width: 1099.98px) {
    .mud-table-head .mud-table-cell { white-space: nowrap; }
}
/* Sticky actions column (StickyRight="true"): opaque, with a soft edge over scrolled content */
.mud-data-grid .mud-table-cell.sticky-right {
    background-color: var(--mud-palette-surface);
    box-shadow: -6px 0 8px -6px rgba(0, 0, 0, 0.18);
}
.mud-data-grid .mud-table-head .mud-table-cell.sticky-right { z-index: 2; }
/* Generic helpers */
.ob-phone .ob-hide-phone,
.ob-compact .ob-hide-compact { display: none !important; }

/* ── HorizontalScrollbar="true" makes MudBlazor set width:max-content on the container: grids with
      little content shrank to half the card, and nothing could wrap (chip lists ran to 400px+).
      Keep the container card-wide; the outer .mud-table still scrolls sideways if cells can't fit. ── */
.mud-table-container[style*="max-content"] { width: 100% !important; }

/* ── Compact tables (≥600px; phones use card layouts) ── */
@media (min-width: 600px) and (max-width: 1279.98px) {
    .mud-table-root .mud-table-head .mud-table-cell {
        padding: 6px 8px;
        font-size: 0.7rem;
    }
    .mud-table-root .mud-table-body .mud-table-cell {
        padding: 4px 8px;
        font-size: 0.78rem;
    }
    .mud-table-pagination-toolbar {
        min-height: 40px;
    }
}
.ob-short .mud-table-root .mud-table-body .mud-table-cell { padding-top: 3px; padding-bottom: 3px; }

/* ── Footer: no room on phones and short screens ── */
.ob-phone .ob-footer,
.ob-short .ob-footer { display: none !important; }
@media (max-width: 599.98px) {
    .ob-footer { display: none !important; }
}

/* ── Admin: tenant selector strip under the app bar (<960px) ── */
.ob-tenant-strip {
    padding: 8px 12px 0;
}
.ob-tenant-strip .mud-input-control { margin: 0; }

/* ── Inputs wrapped in a MudTooltip (inline root) shrank to their text width inside grid items
      ("Πληρ…", "Παράδ…"): let the tooltip root and the field fill the item. ── */
.mud-grid-item > .mud-tooltip-root {
    display: block;
    width: 100%;
}
.mud-grid-item > .mud-tooltip-root > .mud-select,
.mud-grid-item > .mud-tooltip-root > .mud-input-control,
.mud-grid-item > .mud-tooltip-root > .mud-picker {
    width: 100%;
}

/* ── Full-screen dialogs (DialogPresets on phones): sticky title + actions ── */
.mud-dialog.mud-dialog-fullscreen {
    margin: 0 !important;
    border-radius: 0 !important;
}
/* The honeycomb mark in the dialog title sits where the close button is on phones */
.mud-dialog.mud-dialog-fullscreen .mud-dialog-title::after { display: none; }
.mud-dialog.mud-dialog-fullscreen {
    display: flex;
    flex-direction: column;
}
.mud-dialog.mud-dialog-fullscreen .mud-dialog-content {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px !important;
}
.mud-dialog.mud-dialog-fullscreen .mud-dialog-actions {
    position: sticky;
    bottom: 0;
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
    flex-wrap: wrap;
    gap: 8px;
}
.mud-dialog.mud-dialog-fullscreen .mud-dialog-actions > .mud-button-root {
    flex: 1 1 auto;
    min-height: 42px;
}
@media (max-width: 599.98px) {
    .mud-dialog .mud-dialog-actions { flex-wrap: wrap; gap: 6px; }
    .mud-dialog .mud-tabs .mud-tab { min-width: 0 !important; }
}

/* ── Phone FAB (MobileFab) ── */
.ob-fab.mud-fab {
    position: fixed !important;
    right: 16px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    z-index: 1150;
    border-radius: 16px !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
}
/* Leave room so the FAB never covers the last row / pager */
.ob-phone #page-content { padding-bottom: 76px; }

/* ── FilterSheet ── */
.ob-filter-quick {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.ob-filter-quick-main { flex: 1 1 auto; min-width: 0; }
/* keep room for the floating label of outlined fields */
.ob-filter-quick-main .mud-input-control { margin-top: 6px !important; margin-bottom: 0 !important; }
.ob-filter-btn { width: 40px; height: 40px; }
.mud-drawer.ob-filter-sheet {
    border-radius: 18px 18px 0 0 !important;
    max-height: 88vh;
    max-height: 88dvh;
    display: flex;
    flex-direction: column;
}
/* MudBlazor hides a closed bottom drawer with bottom: calc(-1 * height); with an auto height that
   is invalid and the sheet stayed visible in the page. Slide it with a transform instead. */
.mud-drawer.ob-filter-sheet,
.mud-drawer.ob-filter-sheet.mud-drawer--open,
.mud-drawer.ob-filter-sheet.mud-drawer--closed {
    top: auto !important;
    bottom: 0 !important;
    animation: none !important;
    transition: transform 0.22s cubic-bezier(0, 0, 0.2, 1), visibility 0s linear 0.22s;
}
.mud-drawer.ob-filter-sheet.mud-drawer--closed {
    transform: translateY(105%);
    visibility: hidden;
}
.mud-drawer.ob-filter-sheet.mud-drawer--open {
    transform: none;
    visibility: visible;
    transition: transform 0.22s cubic-bezier(0, 0, 0.2, 1), visibility 0s;
}
.mud-drawer.ob-filter-sheet .mud-drawer-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* The nav drawer's honeycomb watermark must not show inside the filter sheet */
.mud-drawer.ob-filter-sheet .mud-drawer-content::after,
.mud-drawer.ob-filter-sheet .mud-drawer-content::before { display: none !important; }
.ob-filter-sheet-handle {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--mud-palette-lines-default);
    margin: 8px auto 4px;
    flex: 0 0 auto;
}
.ob-filter-sheet-head {
    display: flex;
    align-items: center;
    padding: 4px 16px 8px;
    flex: 0 0 auto;
}
.ob-filter-sheet-body {
    padding: 0 16px 8px;
    overflow-y: auto;
    flex: 1 1 auto;
}
/* Filter cards placed inside the sheet lose their card chrome */
.ob-filter-sheet-body > .mud-card,
.ob-filter-sheet-body > .mud-paper {
    box-shadow: none !important;
    border: 0 !important;
    background: transparent !important;
}
.ob-filter-sheet-body .mud-card-content { padding: 0 !important; }
.ob-filter-sheet-actions {
    padding: 10px 16px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--mud-palette-lines-default);
    flex: 0 0 auto;
}

/* ── StatusChipMenu chips ── */
.ob-sc {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 24px;
    padding: 0 7px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    line-height: 1;
    transition: filter 0.15s;
}
.ob-sc:hover { filter: brightness(1.12); }
.ob-sc .mud-icon-root { font-size: 14px; }
.ob-sc .ob-sc-chev { font-size: 13px !important; opacity: 0.7; margin-right: -3px; }
.ob-sc-io { width: 26px; padding: 0; justify-content: center; }
.ob-sc-disabled { cursor: default; opacity: 0.75; }
.ob-sc-g { background: color-mix(in srgb, var(--mud-palette-success) 16%, transparent); color: var(--mud-palette-success); }
.ob-sc-y { background: color-mix(in srgb, var(--mud-palette-warning) 18%, transparent); color: var(--mud-palette-warning-darken); }
.ob-sc-b { background: color-mix(in srgb, var(--mud-palette-secondary) 16%, transparent); color: var(--mud-palette-secondary); }
.ob-sc-r { background: color-mix(in srgb, var(--mud-palette-error) 16%, transparent); color: var(--mud-palette-error); }
.ob-sc-n { background: var(--mud-palette-background-gray); color: var(--mud-palette-text-secondary); box-shadow: inset 0 0 0 1px var(--mud-palette-lines-default); }
.ob-dark .ob-sc-y { color: var(--mud-palette-warning); }
.ob-sc-cluster { display: inline-flex; gap: 3px; align-items: center; flex-wrap: nowrap; }
.ob-sc-menu-head {
    font-size: 0.66rem;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
    padding: 6px 16px 4px;
}
/* Legend line for icon-only status clusters */
.ob-sc-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    align-items: center;
}
.ob-sc-legend > span { display: inline-flex; align-items: center; gap: 4px; }
.ob-sc-legend .mud-icon-root { font-size: 14px; }

/* ── Phone compact cards (Orders / Pending / any list) ── */
.ob-mlist { display: flex; flex-direction: column; gap: 7px; }
.ob-mcard {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 3px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    padding: 8px 10px;
    min-width: 0;
}
.ob-mcard.is-selected { box-shadow: inset 0 0 0 1px var(--mud-palette-primary); }
.ob-mcard-l1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ob-mcard-title {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    font-size: 0.86rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ob-mcard-meta { font-size: 0.7rem; color: var(--mud-palette-text-secondary); white-space: nowrap; }
.ob-mcard-l2 {
    font-size: 0.76rem;
    color: var(--mud-palette-text-secondary);
    margin: 3px 0 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ob-mcard-l3 { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ob-mcard-l3 > .ob-spacer { flex: 1 1 auto; }
/* Phone cards: chips + ⋮ stay on one line (the chevron is implied, tapping opens the menu) */
.ob-mcard-l2.ob-mcard-flex { display: flex; align-items: center; gap: 4px; }
.ob-mcard-l2.ob-mcard-flex > .ob-mcard-ellipsis { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-mcard-l2.ob-mcard-flex > :not(.ob-mcard-ellipsis) { flex: 0 0 auto; }
.ob-mcard-l3 { flex-wrap: nowrap; }
.ob-mcard-l3 > .mud-menu { margin-left: auto; }
.ob-phone .ob-mcard .ob-sc-chev { display: none; }
.ob-phone .ob-mcard .ob-sc { padding: 0 6px; }
.ob-mcard.tone-y { border-left-color: var(--mud-palette-primary); }
.ob-mcard.tone-b { border-left-color: var(--mud-palette-secondary); }
.ob-mcard.tone-g { border-left-color: var(--mud-palette-success); }
.ob-mcard.tone-r { border-left-color: var(--mud-palette-error); }
.ob-mcard-indent { margin-left: 34px; }
.ob-mpager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    padding: 4px 0;
}

/* ── Phone spacing / density ── */
@media (max-width: 599.98px) {
    /* MudDataGrid phone card mode: ~30px per label/value line instead of ~40px */
    .mud-xs-table .mud-table-body .mud-table-cell {
        padding: 3px 12px !important;
        min-height: 30px;
        font-size: 0.8rem;
    }
    .mud-xs-table .mud-table-body .mud-table-row {
        padding: 4px 0;
    }
    .mud-xs-table .mud-table-body .mud-table-cell .mud-icon-button { padding: 4px; }
    .mud-card-content { padding: 10px 12px; }
    .mud-card-header { padding: 10px 12px; }
    .mud-tabs-panels { padding: 8px 0 0 !important; }
    .mud-expand-panel .mud-expand-panel-content { padding: 0 12px 12px; }
    .mud-grid-spacing-xs-3 > .mud-grid-item,
    .mud-grid-spacing-xs-4 > .mud-grid-item { padding: 6px; }
}

/* ── Short screens (1280×720 tablets): keep the data above the fold ── */
.ob-short .page-header-row { padding-top: 0.55rem; padding-bottom: 0.55rem; }
.ob-short .page-header-row .mud-typography-caption { display: none; }
.ob-short .page-header-row .mud-avatar { width: 32px; height: 32px; }

/* ── Watermark scale on small cards (phones / compact KPI tiles) ── */
.ob-compact .dash-kpi::after {
    width: 52px;
    height: 52px;
    right: -10px;
    bottom: -12px;
}
.ob-phone .dash-kpi::after {
    width: 40px;
    height: 40px;
    right: -8px;
    bottom: -10px;
    opacity: 0.45;
}
.ob-light.ob-phone .dash-kpi::after { opacity: 0.6; }
.ob-phone .empty-state-container::before,
.ob-phone .dash-empty::before {
    width: 96px;
    height: 96px;
}

/* ── Compact phone cards for list grids: <MudDataGrid Class="ob-cards" ...>.
      Below 600px MudBlazor renders one "label: value" line per column; this drops the labels and
      flows the cells (title, meta, chips) into 1–2 lines with the actions pushed to the right. ── */
@media (max-width: 599.98px) {
    .ob-cards.mud-xs-table .mud-table-body .mud-table-row {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 2px 10px;
        padding: 8px 12px !important;
        border-bottom: 1px solid var(--mud-palette-table-lines);
    }
    .ob-cards.mud-xs-table .mud-table-body .mud-table-cell:not(.col-p2):not(.col-p3):not(.d-none) {
        display: inline-flex !important;
        align-items: center;
        width: auto;
        min-height: 0;
        padding: 0 !important;
        border: 0 !important;
        justify-content: flex-start;
        font-size: 0.8rem;
        max-width: 100%;
    }
    .ob-cards.mud-xs-table .mud-table-body .mud-table-cell::before {
        display: none;
    }
    .ob-cards.mud-xs-table .mud-table-body .mud-table-cell:last-child {
        margin-left: auto;
    }
    /* Card rows must be exactly as wide as the card (HorizontalScrollbar sizes to max-content) */
    .ob-cards.mud-xs-table .mud-table-container {
        width: 100% !important;
        overflow-x: hidden !important;
    }
    .ob-cards.mud-xs-table .mud-table-root,
    .ob-cards.mud-xs-table .mud-table-body {
        display: block;
        width: 100%;
    }
}

/* ── Data grid headers: the column-options button (⋮) floats over the header on hover instead of
      reserving ~56px in every column; tighter header padding. Columns are sized by their content. ── */
.mud-data-grid .mud-table-head .mud-table-cell {
    position: relative;
    padding: 6px 10px 6px 8px;
}
.mud-data-grid .mud-table-head .mud-table-cell .column-options {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    opacity: 0;
    background: var(--mud-palette-surface);
    border-radius: 6px;
    transition: opacity 0.15s;
}
.mud-data-grid .mud-table-head .mud-table-cell:hover .column-options,
.mud-data-grid .mud-table-head .mud-table-cell:focus-within .column-options {
    opacity: 1;
}
/* Touch screens have no hover: keep the options reachable */
@media (hover: none) {
    .mud-data-grid .mud-table-head .mud-table-cell .column-options { opacity: 0.6; }
}
/* Compact body rows at every width (dense grids stay ~34px per row) */
.mud-data-grid.mud-table-dense .mud-table-body .mud-table-cell {
    padding-top: 4px;
    padding-bottom: 4px;
}

/* ── Orders header (compact layouts): title + quick filters + actions on ONE row.
      The quick filters shrink together instead of wrapping onto a second line. ── */
.ob-filter-quick-main > .orders-filter-row { flex-wrap: nowrap; }
.ob-filter-quick-main > .orders-filter-row > .orders-f-search { flex: 1 1 150px; min-width: 96px; }
.ob-filter-quick-main > .orders-filter-row > .orders-f-date { flex: 0 0 200px; min-width: 200px; }
.ob-filter-quick-main > .orders-filter-row > .orders-f-select { flex: 0 1 170px; min-width: 116px; }
.orders-head-filters { flex: 1 1 380px; min-width: 0; }
.orders-head-filters .ob-filter-quick { margin-bottom: 0; }
.page-header-row:has(.orders-head-filters) { flex-wrap: nowrap !important; }

/* MudBlazor hard-codes uppercase on tab headers and the theme does not reach them: keep Greek text as typed. */
.mud-tab {
    text-transform: none;
}