/* ════════════════════════════════════════════════════════════════════
   UI LAYER — app-wide refresh in the dashboard's design language
   (Color Admin "Material" reference).

   Loaded AFTER material3.css / sale-cart.css, so it:
     1. re-points the M3 system tokens (everything — MudBlazor included —
        is bridged to them, so one change recolours the whole app),
     2. restyles the shared ds-* / qm-* building blocks,
     3. adds touch / tablet / phone adaptations.

   Principles
   • Grey canvas, white 16px cards, no borders in light mode — content
     groups read as tiles, not as boxed lines.
   • One accent (Material blue). Semantic colours only for status.
   • 8-pt spacing; 44px minimum touch targets on coarse pointers.
   • Data tables turn into labelled cards under 700px
     (labels are filled in by js/tableLabels.js from the <th> row).
════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ─────────────────────────────────────────────────────── */
:root, html[data-theme='light'] {
    --md-sys-color-primary:                   #1976D2;
    --md-sys-color-on-primary:                #FFFFFF;
    --md-sys-color-primary-container:         #DCEBFB;
    --md-sys-color-on-primary-container:      #0B3A6B;

    --md-sys-color-background:                #EEF1F4;
    --md-sys-color-on-background:             #212529;
    --md-sys-color-surface:                   #FFFFFF;
    --md-sys-color-on-surface:                #212529;
    --md-sys-color-on-surface-variant:        #5F6B76;

    --md-sys-color-surface-container-lowest:  #FFFFFF;
    --md-sys-color-surface-container-low:     #FFFFFF;
    --md-sys-color-surface-container:         #F4F6F8;
    --md-sys-color-surface-container-high:    #ECEFF2;
    --md-sys-color-surface-container-highest: #E3E7EB;

    --md-sys-color-outline:                   #B7C0C8;
    --md-sys-color-outline-variant:           #E3E7EB;

    --ui-radius:      16px;
    --ui-radius-md:   12px;
    --ui-radius-sm:   10px;
    --ui-field-h:     44px;
    --ui-card-pad:    20px;
    --ui-head-bg:     #F7F9FA;
    --ui-row-hover:   #F7FAFD;
    --ui-card-border: transparent;
    --ui-focus:       0 0 0 3px rgba(25, 118, 210, 0.16);

    --dash-page-bg:   var(--md-sys-color-background);
}

html[data-theme='dark'] {
    --md-sys-color-primary:                   #64B5F6;
    --md-sys-color-on-primary:                #002F55;
    --md-sys-color-primary-container:         #123E66;
    --md-sys-color-on-primary-container:      #D6E9FB;

    --md-sys-color-background:                #121417;
    --md-sys-color-on-background:             #E6E8EB;
    --md-sys-color-surface:                   #1A1D21;
    --md-sys-color-on-surface:                #E6E8EB;
    --md-sys-color-on-surface-variant:        #A0A8B0;

    --md-sys-color-surface-container-lowest:  #15181B;
    --md-sys-color-surface-container-low:     #1B1E22;
    --md-sys-color-surface-container:         #22262B;
    --md-sys-color-surface-container-high:    #2A2F35;
    --md-sys-color-surface-container-highest: #333940;

    --md-sys-color-outline:                   #59626B;
    --md-sys-color-outline-variant:           #2E343A;

    --ui-head-bg:     rgba(255, 255, 255, 0.03);
    --ui-row-hover:   rgba(255, 255, 255, 0.03);
    --ui-card-border: rgba(255, 255, 255, 0.05);
    --ui-focus:       0 0 0 3px rgba(100, 181, 246, 0.22);
}

@media (pointer: coarse) {
    :root { --ui-field-h: 48px; }
}

/* ── 2. PAGE FRAME ─────────────────────────────────────────────────── */
.mud-main-content { background: var(--md-sys-color-background); min-height: 100vh; }

@media (max-width: 599px) {
    .mud-main-content > .mud-container { padding-inline: 12px !important; padding-top: 16px !important; }
}

.ds-page-header {
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
    margin-bottom: 20px;
}
.ds-page-header__lead { flex-wrap: wrap; row-gap: 8px; }
.ds-page-title {
    font-size: clamp(1.35rem, 2vw, 1.7rem);
    font-weight: 700;
    line-height: 1.35;
}
.ds-page-subtitle { font-size: 0.92rem; }
.ds-page-actions { flex-wrap: wrap; }
@media (max-width: 599px) {
    .ds-page-actions { width: 100%; }
    .ds-page-actions > .ds-btn { flex: 1 1 auto; }
}

/* ── 3. SURFACES ───────────────────────────────────────────────────── */
.ds-card,
.ds-table-wrap {
    background: var(--md-sys-color-surface-container-low);
    border: 1px solid var(--ui-card-border);
    border-radius: var(--ui-radius);
    box-shadow: none;
}
.ds-card { padding: var(--ui-card-pad); }
.ds-card__title { font-size: 1.05rem; font-weight: 600; }

.mud-paper:not(.mud-popover):not(.mud-appbar):not(.mud-drawer) { border-radius: var(--ui-radius); }

/* ── 4. BUTTONS ────────────────────────────────────────────────────── */
.ds-btn { font-weight: 600 !important; }
.ds-btn--md { --btn-h: 40px; --btn-px: 20px; }
.ds-btn--lg { --btn-h: 48px; --btn-px: 28px; --btn-fs: 1rem; }
.ds-btn--outline {
    color: var(--md-sys-color-on-surface) !important;
    border-color: var(--md-sys-color-outline-variant) !important;
    background: var(--md-sys-color-surface-container-low) !important;
}
.ds-btn--outline:hover { background: var(--md-sys-color-surface-container) !important; }
.ds-btn--secondary {
    background: var(--md-sys-color-surface-container-high) !important;
    color: var(--md-sys-color-on-surface) !important;
}
@media (pointer: coarse) {
    .ds-btn--sm { --btn-h: 40px; }
    .ds-btn--md { --btn-h: 44px; }
    .ds-icon-btn { width: 44px !important; height: 44px !important; min-width: 44px !important; }
}

/* ── 5. FORM FIELDS (MudBlazor outlined + native) ──────────────────── */
.mud-input.mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--ui-radius-sm);
    border-color: var(--md-sys-color-outline-variant);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mud-input.mud-input-outlined:hover:not(.mud-disabled) .mud-input-outlined-border {
    border-color: var(--md-sys-color-outline);
}
.mud-input.mud-input-outlined.mud-input-adorned-start,
.mud-input.mud-input-outlined { background: var(--md-sys-color-surface-container-low); border-radius: var(--ui-radius-sm); }
.mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: var(--md-sys-color-primary) !important;
    box-shadow: var(--ui-focus);
}
.mud-input-control.mud-input-control-margin-dense .mud-input.mud-input-outlined input.mud-input-root {
    min-height: calc(var(--ui-field-h) - 2px);
    box-sizing: border-box;
}
/* Phones: 16px text stops iOS from zooming into focused fields. */
@media (max-width: 599px) {
    .mud-input input, .mud-input textarea,
    .qm-line-input, .qm-pay-input, .qm-meta-input { font-size: 16px !important; }
}

/* ── 6. SEARCH + TABLE TOOLBAR ─────────────────────────────────────── */
.ds-table-toolbar {
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 20px;
    background: transparent;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.ds-search { max-width: 420px; flex: 1 1 260px; }
.ds-search .mud-input.mud-input-outlined { background: var(--md-sys-color-surface-container); }
.ds-search .mud-input.mud-input-outlined .mud-input-outlined-border { border-color: transparent; border-radius: 999px; }
.ds-search .mud-input.mud-input-outlined { border-radius: 999px; }
@media (max-width: 699px) {
    .ds-table-toolbar { padding: 12px; }
    .ds-search { max-width: none; flex-basis: 100%; }
    .ds-table-toolbar__spacer { display: none; }
}

/* Segmented filter → text buttons with a filled active chip */
.ds-segment {
    gap: 4px;
    padding: 4px;
    border: 0;
    border-radius: 12px;
    background: var(--md-sys-color-surface-container);
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}
.ds-segment::-webkit-scrollbar { display: none; }
.ds-segment__option {
    min-height: 34px;
    padding: 0 14px;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    font-weight: 500;
    white-space: nowrap;
}
.ds-segment__option:hover { color: var(--md-sys-color-on-surface); }
.ds-segment__option--active {
    background: var(--md-sys-color-surface-container-low) !important;
    color: var(--md-sys-color-primary) !important;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
@media (pointer: coarse) { .ds-segment__option { min-height: 40px; } }

/* ── 7. DATA TABLE ─────────────────────────────────────────────────── */
.ds-table-wrap { overflow-x: auto; }
.ds-table { min-width: 100%; }
.ds-table thead th {
    background: var(--ui-head-bg);
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 12px 16px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    white-space: nowrap;
}
.ds-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    vertical-align: middle;
}
.ds-table tbody tr { transition: background 0.12s ease; }
.ds-table tbody tr:hover { background: var(--ui-row-hover); }

/* Phones: each row becomes a labelled card. */
@media (max-width: 699px) {
    .ds-table-wrap { overflow: visible; background: transparent; border: 0; }
    .ds-table-wrap > .ds-table-toolbar {
        background: var(--md-sys-color-surface-container-low);
        border-radius: var(--ui-radius);
        border: 0;
        margin-bottom: 12px;
    }
    .ds-table, .ds-table tbody { display: block; width: 100%; }
    .ds-table thead { display: none; }
    .ds-table tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        margin-bottom: 12px;
        padding: 6px 16px;
        border-radius: var(--ui-radius);
        background: var(--md-sys-color-surface-container-low);
        border: 1px solid var(--ui-card-border);
    }
    .ds-table tbody td {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 4px 10px;
        min-height: 44px;
        padding: 8px 0;
        border-bottom: 1px dashed var(--md-sys-color-outline-variant);
        text-align: start;
    }
    .ds-table tbody td:last-child { border-bottom: 0; }
    .ds-table tbody td[data-label]::before {
        content: attr(data-label);
        flex-shrink: 0;
        margin-inline-end: auto;   /* label right, value(s) grouped on the left */
        font-size: 0.78rem;
        font-weight: 500;
        color: var(--md-sys-color-on-surface-variant);
    }
    .ds-table tbody td[data-label=""]::before { content: none; }
    .ds-table--idfirst tbody td:first-child { display: none; }
    .ds-table--idfirst tbody td:nth-child(2) { font-weight: 600; font-size: 0.98rem; }
    .ds-table--idfirst tbody td:nth-child(2)::before,
    .ds-table:not(.ds-table--idfirst) tbody td:first-child::before { content: none; }
    /* First cell = card title */
    .ds-table tbody td:first-child { font-weight: 600; font-size: 0.98rem; }
    /* Row actions sit at the card's foot, full width. */
    .ds-table tbody td.ds-table__cell-actions,
    .ds-table tbody td:has(> .ds-table__row-actions) { justify-content: flex-end; }
    .ds-table tbody td.ds-table__cell-actions::before { content: none; }
    .ds-table__row-actions { opacity: 1 !important; }
    .ds-table tbody tr:hover { background: var(--md-sys-color-surface-container-low); }
}

/* ── 8. PILLS / BADGES ─────────────────────────────────────────────── */
.ds-pill, .ds-badge {
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
}

/* ── 9. DIALOGS — centred on desktop, bottom sheet on phones ───────── */
.mud-dialog { border-radius: 20px !important; }
@media (max-width: 599px) {
    .mud-dialog-container { align-items: flex-end !important; }
    .mud-dialog {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        max-height: 92vh;
        border-radius: 20px 20px 0 0 !important;
    }
    .mud-dialog .mud-dialog-content { max-height: calc(92vh - 140px); overflow-y: auto; }
    .ds-dialog-actions { width: 100%; flex-wrap: wrap; }
    .ds-dialog-actions > .ds-btn { flex: 1 1 auto; }
}

/* ── 10. POPOVERS (autocomplete lists) ─────────────────────────────── */
.mud-popover.mud-popover-open { border-radius: var(--ui-radius-md) !important; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14) !important; }
@media (pointer: coarse) {
    .mud-popover .mud-list-item { min-height: 52px; }
}

/* ── 11. NAVIGATION DRAWER ─────────────────────────────────────────── */
.app-drawer { background: var(--md-sys-color-surface-container-low); border-inline-start: 1px solid var(--md-sys-color-outline-variant); }
.app-drawer .mud-nav-link {
    border-radius: 999px !important;
    margin: 2px 8px;
    min-height: 44px;
    padding-inline: 16px !important;
}
.app-drawer .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background: var(--md-sys-color-primary-container) !important;
    color: var(--md-sys-color-on-primary-container) !important;
    font-weight: 600 !important;
}
.app-drawer .mud-nav-link.active .mud-nav-link-icon { color: var(--md-sys-color-on-primary-container) !important; }

/* ── 12. EMPTY STATE / SKELETON ────────────────────────────────────── */
.ds-empty { border: 0 !important; }
.ds-skel { background: var(--md-sys-color-surface-container-high); }

/* ── 13. QUICK-SALE DIALOG CART (qm-*) — refreshed + touch sizes ───── */
.qm-cart {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--ui-radius-md);
    background: var(--md-sys-color-surface-container-low);
}
.qm-cart-head { background: var(--ui-head-bg); }
.qm-line { padding: 10px 14px; }
.qm-line-input, .qm-meta-input {
    height: 38px;
    border-radius: 8px;
    border-color: var(--md-sys-color-outline-variant);
}
.qm-line-input:focus, .qm-meta-input:focus, .qm-pay-input:focus {
    border-color: var(--md-sys-color-primary) !important;
    box-shadow: var(--ui-focus) !important;
}
.qm-pay-input { height: 44px; border-radius: var(--ui-radius-sm); border-color: var(--md-sys-color-outline-variant); }
.qm-totals { border-radius: var(--ui-radius-md); background: var(--md-sys-color-surface-container); }
.qm-total-cell--grand { border-radius: var(--ui-radius-sm); }
.qm-chip { min-height: 36px; border-radius: var(--ui-radius-sm); font-size: 0.82rem; }
.qm-cust { border-radius: var(--ui-radius-md); }

@media (pointer: coarse) {
    .qm-line-input, .qm-meta-input { height: 44px; }
    .qm-pay-input { height: 48px; }
    .qm-chip { min-height: 44px; }
    .qm-line-del { width: 40px; height: 40px; }
    .qm-fab { width: 44px; height: 44px; }
}
@media (max-width: 699px) {
    /* Each cart row reads as its own card inside the dialog. */
    .qm-cart { border: 0; background: transparent; max-height: none !important; display: flex; flex-direction: column; gap: 8px; }
    .qm-line {
        border: 1px solid var(--md-sys-color-outline-variant) !important;
        border-radius: 12px;
        background: var(--md-sys-color-surface-container-low);
        padding: 12px;
    }
    .qm-line-fa { white-space: normal; font-weight: 600; }
    .qm-line-total { font-size: 1rem; }
}

/* ── 14. SORTABLE TABLE HEADERS ────────────────────────────────────── */
.ds-sort {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    margin: -4px -6px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    white-space: nowrap;
}
.ds-sort:hover { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); }
.ds-sort.is-active { color: var(--md-sys-color-primary); }
.ds-sort-icon { font-size: 0.95rem !important; opacity: 0.45; }
.ds-sort.is-active .ds-sort-icon { opacity: 1; }

/* Phones hide the header row, so sorting moves into the toolbar. */
.ds-sort-mobile { display: none; }
@media (max-width: 699px) {
    .ds-sort-mobile {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        font-size: 0.82rem;
        color: var(--md-sys-color-on-surface-variant);
    }
    .ds-sort-mobile select {
        flex: 1;
        height: 44px;
        padding: 0 12px;
        border: 1px solid var(--md-sys-color-outline-variant);
        border-radius: var(--ui-radius-sm);
        background: var(--md-sys-color-surface-container-low);
        color: var(--md-sys-color-on-surface);
        font: inherit;
        font-size: 16px;
    }
}

/* ════════════════════════════════════════════════════════════════════
   15. LIST PAGES — Color Admin "Products" pattern
   header (title + primary action) · action links row ·
   card { underline tabs · filter row · table · footer "نمایش x تا y از n" }
════════════════════════════════════════════════════════════════════ */
.ds-action-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
    margin: -8px 0 16px;
}
.ds-action-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border: 0;
    background: none;
    color: var(--md-sys-color-on-surface);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.ds-action-link .mud-icon-root { font-size: 1.3rem; opacity: 0.55; }
.ds-action-link:hover { color: var(--md-sys-color-primary); }
.ds-action-link:hover .mud-icon-root { opacity: 1; }
.ds-action-link:disabled { opacity: 0.45; cursor: not-allowed; }

.ds-btn--dark {
    background: #263238 !important;
    color: #FFFFFF !important;
    border-color: transparent !important;
}
html[data-theme='dark'] .ds-btn--dark { background: #ECEFF1 !important; color: #1B1E22 !important; }
.ds-btn--dark:hover { filter: brightness(1.15); }

.ds-list-card {
    background: var(--md-sys-color-surface-container-low);
    border: 1px solid var(--ui-card-border);
    border-radius: 12px;
    direction: rtl;
}

/* Underline tabs (nav-tabs-v2) */
.ds-tabs {
    display: flex;
    gap: 20px;
    margin: 0 16px;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    list-style: none;
}
.ds-tabs::-webkit-scrollbar { display: none; }
.ds-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 6px 14px;
    border: 0;
    background: none;
    color: var(--md-sys-color-on-surface-variant);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.ds-tab:hover { color: var(--md-sys-color-on-surface); }
.ds-tab.is-active { color: var(--md-sys-color-on-surface); }
.ds-tab.is-active::after {
    content: '';
    position: absolute;
    right: 0;
    left: 0;
    bottom: -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--md-sys-color-primary);
}
.ds-tab-count {
    min-width: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.72rem;
    line-height: 20px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.ds-tab.is-active .ds-tab-count { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }

/* Filter row */
.ds-filterbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 16px;
}
.ds-filter-search {
    position: relative;
    flex: 1 1 260px;
    min-width: 0;
}
.ds-filter-search .mud-icon-root.ds-filter-search-icon {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    font-size: 1.15rem;
    color: var(--md-sys-color-on-surface-variant);
    pointer-events: none;
}
.ds-filter-input, .ds-filter-select {
    width: 100%;
    height: 40px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 8px;
    background: var(--md-sys-color-surface-container-low);
    color: var(--md-sys-color-on-surface);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ds-filter-input { padding: 0 40px 0 36px; }
.ds-filter-input:focus, .ds-filter-select:focus { border-color: var(--md-sys-color-primary); box-shadow: var(--ui-focus); }
.ds-filter-clear {
    position: absolute;
    top: 50%;
    left: 6px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--md-sys-color-on-surface-variant);
    cursor: pointer;
    opacity: 0.6;
}
.ds-filter-clear:hover { opacity: 1; background: var(--md-sys-color-surface-container); }
.ds-filter-clear .mud-icon-root { font-size: 1.05rem; }
.ds-filter-select {
    flex: 0 1 180px;
    width: auto;
    min-width: 140px;
    padding: 0 12px;
    cursor: pointer;
}
.ds-filter-sort {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 8px;
    background: var(--md-sys-color-surface-container-low);
    color: var(--md-sys-color-on-surface);
    font-size: 0.88rem;
    font-weight: 500;
}
.ds-filter-sort .mud-icon-root { font-size: 1.15rem; opacity: 0.55; }
.ds-filter-sort select { border: 0; outline: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
@media (pointer: coarse) { .ds-filter-input, .ds-filter-select, .ds-filter-sort { height: 44px; } }
@media (max-width: 699px) {
    .ds-filterbar { padding: 12px; }
    .ds-filter-search { flex-basis: 100%; }
    .ds-filter-select, .ds-filter-sort { flex: 1 1 calc(50% - 8px); }
    .ds-filter-input, .ds-filter-select, .ds-filter-sort select { font-size: 16px; }
}

/* Table inside a list card — "table-card", 8px rows, nowrap, hover */
.ds-list-card .ds-table-scroll { overflow-x: auto; padding: 0 16px; }
.ds-list-card .ds-table thead th {
    padding: 0 12px 10px;
    background: transparent;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.8rem;
    font-weight: 700;
}
.ds-list-card .ds-table tbody td { padding: 10px 12px; white-space: nowrap; }
.ds-list-card .ds-table tbody tr:last-child td { border-bottom: 0; }

/* Thumbnail + name cell */
.ds-thumb-cell { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ds-thumb {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    border-radius: 12px;
    object-fit: cover;
    background: color-mix(in srgb, var(--thumb, #1E88E5) 14%, transparent);
    color: var(--thumb, #1E88E5);
    font-size: 1.15rem;
    font-weight: 700;
}
.ds-thumb .mud-icon-root { font-size: 1.4rem; }
.ds-thumb-text { display: flex; flex-direction: column; min-width: 0; }
.ds-thumb-title { font-weight: 700; color: var(--md-sys-color-on-surface); overflow: hidden; text-overflow: ellipsis; }
.ds-thumb-sub { font-size: 0.78rem; color: var(--md-sys-color-on-surface-variant); overflow: hidden; text-overflow: ellipsis; }

/* Status badge (Color Admin solid soft badges) */
.ds-badge-soft {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 0.76rem;
    font-weight: 700;
}
.ds-badge-soft--success { background: color-mix(in srgb, #00897B 14%, transparent); color: #00796B; }
.ds-badge-soft--danger  { background: color-mix(in srgb, #F44336 14%, transparent); color: #C62828; }
.ds-badge-soft--warning { background: color-mix(in srgb, #FF9800 16%, transparent); color: #E65100; }
.ds-badge-soft--muted   { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface-variant); }
html[data-theme='dark'] .ds-badge-soft--success { color: #4DB6AC; }
html[data-theme='dark'] .ds-badge-soft--danger  { color: #EF9A9A; }
html[data-theme='dark'] .ds-badge-soft--warning { color: #FFB74D; }

/* Footer */
.ds-list-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 16px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}
.ds-list-footer-info { font-size: 0.85rem; color: var(--md-sys-color-on-surface-variant); font-variant-numeric: tabular-nums; }
.ds-list-footer .mud-pagination .mud-pagination-item .mud-button-root { border-radius: 8px !important; min-width: 36px; height: 36px; }
@media (max-width: 699px) { .ds-list-footer { justify-content: center; } }

/* Phones: list-card tables use the labelled-card layout from section 7. */
@media (max-width: 699px) {
    .ds-list-card { background: transparent; border: 0; }
    .ds-list-card .ds-tabs { margin: 0 0 12px; }
    .ds-list-card .ds-filterbar { background: var(--md-sys-color-surface-container-low); border-radius: 12px; margin-bottom: 12px; }
    .ds-list-card .ds-table-scroll { padding: 0; overflow: visible; }
    .ds-list-card .ds-table tbody td { white-space: normal; }
    .ds-list-card .ds-list-footer { border: 0; }
}

/* Older list pages (ds-table-wrap) get the same card / header / row treatment. */
.ds-table-wrap { border-radius: 12px; }
.ds-table-wrap > .ds-table-toolbar { padding: 16px; border-bottom: 0; }
.ds-table-wrap > .ds-table { margin: 0 16px; min-width: calc(100% - 32px); }
.ds-table-wrap .ds-table thead th {
    background: transparent;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0 12px 10px;
}
.ds-table-wrap .ds-table tbody td { padding: 10px 12px; }
.ds-table-wrap .ds-table tbody tr:last-child td { border-bottom: 0; }
.ds-table-wrap .ds-search .mud-input.mud-input-outlined { border-radius: 8px; background: var(--md-sys-color-surface-container-low); }
.ds-table-wrap .ds-search .mud-input.mud-input-outlined .mud-input-outlined-border { border-color: var(--md-sys-color-outline-variant); border-radius: 8px; }
@media (max-width: 699px) {
    .ds-table-wrap > .ds-table { margin: 0; min-width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════
   16. FORMS & DIALOGS — mobile-first refresh for every add/edit form
   • Desktop: centred card, scrolling body, title + actions always visible
   • Tablet : 92vw wide
   • Phone  : full-screen form (confirm dialogs stay bottom sheets),
              sticky title bar, full-width thumb-reach actions
   • Radio groups render as tappable chips; toggles as tidy rows
════════════════════════════════════════════════════════════════════ */
.mud-dialog-container .mud-dialog {
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 48px);
    background: var(--md-sys-color-surface-container-low) !important;
    border: 1px solid var(--ui-card-border);
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.22) !important;
}
.mud-dialog-container .mud-dialog .mud-dialog-title {
    flex-shrink: 0;
    padding: 18px 24px 14px !important;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.mud-dialog-container .mud-dialog .mud-dialog-content {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 18px 24px 22px !important;
    overscroll-behavior: contain;
}
.mud-dialog-container .mud-dialog .mud-dialog-actions {
    flex-shrink: 0;
    padding: 14px 24px !important;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface-container-low);
}
/* Confirm dialogs (icon + text) don't need the divider chrome. */
.mud-dialog:has(.ds-confirm) .mud-dialog-title { border-bottom: 0; padding-bottom: 0 !important; }
.mud-dialog:has(.ds-confirm) .mud-dialog-actions { border-top: 0; }

.ds-dialog-title { font-size: 1.15rem !important; font-weight: 700 !important; }
.ds-dialog-body { gap: 18px; padding-top: 0; }
.ds-dialog-body .ds-field-row { gap: 16px; }
.ds-dialog-hint { font-size: 0.86rem; line-height: 1.7; }

/* Sections inside long forms (e.g. product) */
.form-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px;
    border-radius: 14px;
    border: 1px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface-container-low);
}
.form-section__head { display: flex; align-items: center; gap: 12px; }
.form-section__step {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    font-weight: 700;
}
.form-section__step--soft { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.form-section__title { margin: 0; font-size: 1rem; font-weight: 700; }
.form-section__hint { margin: 2px 0 0; font-size: 0.8rem; color: var(--md-sys-color-on-surface-variant); }
.more-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    border-radius: 12px !important;
    border: 1.5px dashed var(--md-sys-color-outline-variant) !important;
    background: transparent !important;
    color: var(--md-sys-color-primary) !important;
    font-weight: 600 !important;
}
.more-toggle:hover { border-color: var(--md-sys-color-primary) !important; background: color-mix(in srgb, var(--md-sys-color-primary) 5%, transparent) !important; }

/* Labels above custom groups */
.ds-dialog-body .ds-label { font-size: 0.86rem; font-weight: 600; color: var(--md-sys-color-on-surface); }

/* Radio groups → chips */
.ds-dialog-body .mud-radio-group,
.form-section .mud-radio-group { display: flex !important; flex-wrap: wrap; gap: 8px !important; }
.ds-dialog-body .mud-radio-group > div[style*="grid"] { display: flex !important; flex-wrap: wrap; gap: 8px !important; }
.ds-dialog-body .mud-radio {
    margin: 0 !important;
    padding: 2px 14px 2px 6px;
    min-height: 40px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 999px;
    background: var(--md-sys-color-surface-container-low);
    transition: background 0.12s ease, border-color 0.12s ease;
}
.ds-dialog-body .mud-radio:hover { border-color: var(--md-sys-color-primary); }
.ds-dialog-body .mud-radio:has(input:checked) {
    border-color: var(--md-sys-color-primary);
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    font-weight: 600;
}
.ds-dialog-body .mud-radio .mud-button-root { padding: 6px !important; }
.ds-dialog-body .mud-radio .mud-icon-root { font-size: 1.15rem; }

/* Toggle rows */
.ds-toggle-row {
    min-height: 60px;
    border-radius: 12px;
    background: var(--md-sys-color-surface-container);
    border-color: transparent;
}
.ds-toggle-row__title { font-size: 0.95rem; font-weight: 600; }

/* Actions: primary first (right), cancel next to it */
.ds-dialog-actions { gap: 10px; flex-wrap: wrap; }
.ds-dialog-actions > .ds-btn { min-width: 120px; }

@media (min-width: 600px) and (max-width: 899px) {
    .mud-dialog-container .mud-dialog { width: 92vw !important; max-width: 92vw !important; }
}

@media (max-width: 599px) {
    /* Full-screen forms; the earlier bottom-sheet rule still applies to confirm dialogs. */
    .mud-dialog-container:has(.ds-dialog-body) { align-items: stretch !important; }
    .mud-dialog:has(.ds-dialog-body) {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh;
        max-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border: 0;
    }
    .mud-dialog:has(.ds-dialog-body) .mud-dialog-content { max-height: none !important; padding: 16px !important; }
    .mud-dialog-container .mud-dialog .mud-dialog-title { padding: 14px 16px !important; }
    .mud-dialog-container .mud-dialog .mud-dialog-actions { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important; box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.08); }
    .ds-dialog-actions > .ds-btn { flex: 1 1 0; min-width: 0; height: 48px; }
    .form-section { padding: 14px; }
}

/* Native <select> dropdown lists (sort / filter): explicit colours so the open list is always
   readable — a transparent select otherwise lets the browser draw light text on a light list
   (or dark on dark), depending on theme. */
.ds-filter-select option,
.ds-filter-sort select option,
.ds-filterbar select option,
select.ds-filter-select optgroup {
    background-color: #FFFFFF;
    color: #1B2430;
    font-weight: 500;
}
.ds-filter-select option:checked,
.ds-filter-sort select option:checked { background-color: #E3F2FD; color: #0D47A1; font-weight: 700; }
html[data-theme='dark'] .ds-filter-select option,
html[data-theme='dark'] .ds-filter-sort select option,
html[data-theme='dark'] .ds-filterbar select option { background-color: #262B31; color: #ECEFF3; }
html[data-theme='dark'] .ds-filter-select option:checked,
html[data-theme='dark'] .ds-filter-sort select option:checked { background-color: #0D47A1; color: #FFFFFF; }
.ds-filter-sort select { color: var(--md-sys-color-on-surface); font-weight: 600; }
.ds-filter-sort .mud-icon-root { opacity: 0.8; color: var(--md-sys-color-primary); }

/* Newly added line highlight (touch: shown instead of focusing the quantity box) */
@keyframes dfh-flash { 0% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-sys-color-primary) 55%, transparent); } 100% { box-shadow: 0 0 0 3px transparent; } }
.dfh-flash { animation: dfh-flash 1.3s ease-out; border-radius: 14px; }

/* ── Navigation drawer: vertically centre every item's label + icon ── */
.app-drawer .mud-nav-link {
    display: flex !important;
    align-items: center !important;
    padding-block: 0 !important;
    line-height: 1.5 !important;
}
.app-drawer .mud-nav-link .mud-nav-link-text {
    display: flex;
    align-items: center;
    align-self: stretch;
    margin-block: 0 !important;
    padding-block: 0 !important;
    line-height: 1.5 !important;
}
.app-drawer .mud-nav-link .mud-nav-link-icon,
.app-drawer .mud-nav-link .mud-nav-link-expand-icon { margin-block: 0 !important; align-self: center; flex-shrink: 0; }