/* Small-screen (phone and tablet, below 960px) rules, moved out of app-ui.css unchanged.
   App.razor links this file with media="screen and (max-width: 959.95px)", so a desktop browser never
   applies any of it: desktop stays exactly as it is whatever changes here. Desktop rules stay in app-ui.css.
   The card-grid block at max-width: 960px stays in app-ui.css on purpose; it follows MudBlazor's own
   inclusive 960px card breakpoint, which a 959.95px link would cut off at exactly 960px.
   Same cascade layers as app-ui.css (order: App.razor <head>); this file loads after it. */
@layer app {

@media screen and (max-width: 959.95px) {
    /* The one place the bar height changes (UX-372); .uni-layout's --mud-appbar-height follows it. */
    :root {
        --uni-appbar-height: 54px;
    }

    html {
        scroll-padding-top: calc(var(--uni-appbar-height) + env(safe-area-inset-top));
    }

    body:has(.uni-layout.mobile-drawer-open) {
        overflow: hidden;
    }

    .uni-appbar {
        height: calc(var(--uni-appbar-height) + env(safe-area-inset-top)) !important;
        min-height: calc(var(--uni-appbar-height) + env(safe-area-inset-top)) !important;
        padding: env(safe-area-inset-top) 12px 0 !important;
    }

    .uni-appbar .mud-toolbar {
        height: var(--uni-appbar-height) !important;
        min-height: var(--uni-appbar-height) !important;
        gap: 8px !important;
    }

    .uni-mobile-leading,
    .uni-mobile-actions {
        display: flex;
        align-items: center;
    }

    .uni-mobile-leading {
        flex: 1;
        min-width: 0;
        gap: 8px;
    }

    .uni-mobile-title {
        overflow: hidden;
        color: var(--ds-text);
        font-size: 15px;
        font-weight: var(--ds-fw-bold);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* کدِ شرکتِ فعال کنار عنوان، چون بلوک شرکت در این عرض پنهان است (UX-002). */
    .uni-mobile-company {
        flex: none;
        padding: 2px 8px;
        border-radius: 999px;
        background: var(--ds-primary-soft);
        color: var(--ds-primary-strong);
        font-size: 11px;
        font-weight: var(--ds-fw-medium);
        direction: ltr;
        unicode-bidi: isolate;
    }

    .uni-mobile-action {
        width: 40px !important;
        height: 40px !important;
        border-radius: 10px !important;
        color: var(--ds-text-2) !important;
    }

    .uni-mobile-actions {
        flex: 0 0 auto;
        gap: 1px;
    }

    /* MobileTopBar renders before the desktop MudSpacer: the actions go last by order, and the spacer
       (only for the desktop blocks, all hidden here) steps aside so the title gets the free width. */
    .uni-mobile-actions {
        order: 1;
    }

    .uni-appbar .mud-toolbar > .mud-spacer,
    .uni-appbar .mud-toolbar > .flex-grow-1 {
        display: none;
    }

    /* Profile button on the top-level pages (home, inbox, all): the user's photo or the person icon. */
    .uni-mobile-avatar {
        width: 40px;
        height: 40px;
        padding: 0;
        overflow: hidden;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 50%;
        background: var(--ds-primary-soft);
        color: var(--ds-primary-strong);
        cursor: pointer;
    }

    .uni-mobile-avatar .uni-user-photo {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .uni-notification-panel {
        top: calc(var(--uni-appbar-height) + env(safe-area-inset-top));
    }

    html[dir="ltr"] .uni-notification-panel {
        right: 12px;
    }

    html[dir="rtl"] .uni-notification-panel {
        left: 12px;
    }

    .uni-main-content {
        margin-inline-start: 0 !important;
        padding-top: calc(var(--uni-appbar-height) + env(safe-area-inset-top)) !important;
        padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important;
    }

    .uni-drawer {
        top: 0 !important;
        inset-inline-start: 0 !important;
        z-index: 1702 !important;
        width: min(86vw, 340px) !important;
        height: 100dvh !important;
        border-inline-end: 1px solid var(--ds-border) !important;
        box-shadow: var(--ds-shadow-lg) !important;
    }

    [dir="rtl"] .uni-drawer.is-mini {
        transform: translateX(105%) !important;
        visibility: hidden !important;
    }

    [dir="ltr"] .uni-drawer.is-mini {
        transform: translateX(-105%) !important;
        visibility: hidden !important;
    }

    .uni-drawer.is-open {
        transform: none !important;
        visibility: visible !important;
    }

    .uni-drawer .uni-nav {
        padding: 4px 10px 12px !important;
        background: transparent;
    }

    .uni-mobile-drawer-scrim {
        position: fixed;
        inset: 0;
        z-index: 1701;
        display: block;
        width: 100%;
        height: 100%;
        border: 0;
        background: var(--ds-overlay);
        backdrop-filter: blur(2px);
    }

    .uni-mobile-drawer-header {
        min-height: calc(56px + env(safe-area-inset-top));
        padding: env(safe-area-inset-top) 14px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid var(--ds-border-soft);
    }

    .uni-mobile-drawer-brand {
        display: flex;
        align-items: center;
        gap: 9px;
        color: var(--ds-primary-strong);
        direction: ltr;
        font-size: 14px;
        font-weight: var(--ds-fw-bold);
        letter-spacing: .12em;
    }

    .uni-mobile-drawer-brand img {
        width: 26px;
        height: 26px;
    }

    .uni-mobile-drawer-close,
    .uni-mobile-drawer-theme {
        width: 40px !important;
        height: 40px !important;
        border-radius: 10px !important;
        color: var(--ds-text-2) !important;
    }

    .uni-mobile-drawer-profile {
        min-height: 68px;
        margin: 10px;
        padding: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        border: 1px solid var(--ds-primary-soft);
        border-radius: 12px;
        background: var(--ds-primary-softer);
    }

    .uni-mobile-drawer-avatar {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: var(--ds-primary-soft);
        color: var(--ds-primary-strong);
        font-size: 12px;
        font-weight: var(--ds-fw-bold);
    }

    .uni-mobile-drawer-avatar .mud-icon-root {
        width: 22px;
        height: 22px;
        font-size: 22px;
        color: var(--ds-primary-strong);
    }

    .uni-mobile-drawer-user {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        line-height: 1.5;
    }

    .uni-mobile-drawer-user strong {
        overflow: hidden;
        color: var(--ds-text);
        font-size: 12.5px;
        font-weight: var(--ds-fw-medium);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .uni-mobile-drawer-user span {
        color: var(--ds-muted);
        font-size: 10px;
    }

    /* شرکت، پروفایل، خروج — زیر نوار پروفایل منوی موبایل (UX-001, UX-002). */
    .uni-mobile-drawer-actions {
        margin: 0 10px 10px;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .uni-mobile-drawer-action {
        width: 100%;
        min-height: 44px;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        border: 1px solid var(--ds-border);
        border-radius: 10px;
        background: var(--ds-surface);
        color: var(--ds-text);
        font-family: inherit;
        font-size: 12.5px;
        font-weight: var(--ds-fw-medium);
        text-align: start;
        cursor: pointer;
    }

    .uni-mobile-drawer-action:disabled {
        opacity: .6;
        cursor: default;
    }

    .uni-mobile-drawer-action .mud-icon-root {
        flex: none;
        color: var(--ds-primary-strong);
    }

    .uni-mobile-drawer-company.is-static {
        cursor: default;
    }

    .uni-mobile-drawer-action-copy {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        line-height: 1.4;
    }

    .uni-mobile-drawer-action-copy strong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12.5px;
        font-weight: var(--ds-fw-medium);
    }

    .uni-mobile-drawer-action-label {
        color: var(--ds-muted);
        font-size: 11px;
        font-weight: var(--ds-fw-medium);
    }

    .uni-mobile-drawer-company-menu {
        width: 100%;
    }

    .uni-mobile-drawer-company-menu .mud-menu-activator {
        width: 100%;
        display: block;
    }

    .uni-mobile-drawer-logout {
        color: var(--ds-error);
        border-color: color-mix(in srgb, var(--ds-error) 30%, transparent);
    }

    .uni-mobile-drawer-logout .mud-icon-root {
        color: inherit;
    }

    .uni-mobile-bottom-nav {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1500;
        height: calc(64px + env(safe-area-inset-bottom));
        padding: 0 6px env(safe-area-inset-bottom);
        display: flex;
        align-items: center;
        justify-content: space-around;
        border-top: 1px solid var(--ds-border);
        background: color-mix(in srgb, var(--ds-surface) 96%, transparent);
        backdrop-filter: blur(12px);
    }

    .uni-mobile-bottom-nav a,
    .uni-mobile-bottom-nav button {
        min-width: 52px;
        min-height: 52px;
        padding: 5px 7px;
        border: 0;
        background: transparent;
        color: var(--ds-faint);
        font-family: inherit;
        text-decoration: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        cursor: pointer;
    }

    .uni-mobile-bottom-nav .mud-icon-root {
        font-size: 23px;
    }

    .uni-mobile-bottom-nav span {
        font-size: 9.5px;
        font-weight: var(--ds-fw-medium);
    }

    .uni-mobile-bottom-nav a.active,
    .uni-mobile-bottom-nav button.active {
        color: var(--ds-primary);
    }

    .uni-mobile-bottom-nav a.active span,
    .uni-mobile-bottom-nav button.active span {
        color: var(--ds-primary-strong);
        font-weight: var(--ds-fw-medium);
    }

    /* Bottom bar (MobileBottomNav): five equal slots - home, inbox, search, notifications, all - and a
       count badge on the icon. Inbox counts are work, not alarms, so they use the primary colour; the
       notification badge keeps the bell's red. */
    .uni-mobile-bottom-nav > a,
    .uni-mobile-bottom-nav > button {
        flex: 1 1 0;
    }

    .uni-mobile-bottom-nav .uni-mobile-nav-icon {
        position: relative;
        display: inline-flex;
    }

    .uni-mobile-bottom-nav .uni-mobile-nav-badge {
        position: absolute;
        top: -5px;
        inset-inline-end: -9px;
        min-width: 15px;
        height: 15px;
        padding: 0 4px;
        border: 2px solid var(--ds-surface);
        border-radius: 999px;
        box-sizing: content-box;
        background: var(--ds-primary);
        color: var(--ds-primary-contrast);
        font-size: 9.5px;
        font-weight: var(--ds-fw-bold);
        line-height: 15px;
        text-align: center;
    }

    .uni-mobile-bottom-nav button[aria-controls="unigate-notification-panel"] .uni-mobile-nav-badge {
        background: #dc2626;
        color: #fff;
    }

    /* A page's own action bar (MobileActionBar) in place of the bottom bar: same place and safe area.
       The first child is the main action and takes the free width; the others keep their size. */
    .uni-mobile-action-bar {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1500;
        min-height: calc(64px + env(safe-area-inset-bottom));
        padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
        box-sizing: border-box;
        display: flex;
        align-items: center;
        gap: 10px;
        border-top: 1px solid var(--ds-border);
        background: var(--ds-surface);
        margin: 0;
        box-shadow: 0 -6px 18px rgba(14, 23, 43, .08);
    }

    .uni-mobile-action-bar > * {
        min-height: 48px;
    }

    .uni-mobile-action-bar > :first-child {
        flex: 1 1 auto;
    }

    .uni-palette {
        top: 0 !important;
        width: 100vw !important;
        max-height: 70dvh !important;
        border-width: 0 0 1px !important;
        border-radius: 0 0 16px 16px !important;
        animation: none !important;
    }

    body .core-page.core-page {
        max-width: 100%;
        padding: 14px 12px 18px !important;
    }

    body .dashboard-page {
        padding-top: 14px !important;
    }

    /* !important چون کارتِ سربرگ در CSSِ ایزولهٔ صفحه زمینهٔ سفید و قاب دارد و آن انتخابگر (کلاس + ویژگیِ scope)
       از «body .x» قوی‌تر است؛ بدونِ این، نوشته‌های سفیدِ موبایل روی زمینهٔ سفید گم می‌شدند. */
    body .dashboard-greeting {
        position: relative;
        display: block;
        overflow: hidden;
        margin-bottom: 14px;
        padding: 18px !important;
        border: 0 !important;
        border-radius: 18px !important;
        background: linear-gradient(135deg, var(--ds-primary), var(--ds-primary-strong)) !important;
        box-shadow: none !important;
        /* UX-367: the ink that goes with --ds-primary (white in light, dark ink on the lighter dark-theme blue). */
        color: var(--ds-primary-contrast);
    }

    body .dashboard-greeting::after {
        content: "";
        position: absolute;
        top: -30px;
        inset-inline-end: -20px;
        width: 130px;
        height: 130px;
        border-radius: 50%;
        background: color-mix(in srgb, var(--ds-primary-contrast) 10%, transparent);
    }

    body .dashboard-breadcrumb,
    body .dashboard-primary-button {
        display: none !important;
    }

    body .dashboard-greeting-title,
    body .dashboard-greeting-sub {
        position: relative;
        z-index: 1;
        color: var(--ds-primary-contrast) !important;
    }

    body .dashboard-greeting-title {
        font-size: 19px !important;
    }

    body .dashboard-greeting-sub {
        margin-top: 4px !important;
        font-size: 12px !important;
        opacity: .85;
    }

    /* سربرگِ تازه روی کارتِ آبیِ موبایل: دایره و برچسبِ تاریخ هم سفید می‌شوند. */
    body .dashboard-avatar,
    body .dashboard-chip {
        position: relative;
        z-index: 1;
        color: var(--ds-primary-contrast) !important;
    }

    body .dashboard-avatar {
        background: color-mix(in srgb, var(--ds-primary-contrast) 18%, transparent) !important;
    }

    body .dashboard-chip {
        background: color-mix(in srgb, var(--ds-primary-contrast) 14%, transparent) !important;
        border-color: color-mix(in srgb, var(--ds-primary-contrast) 25%, transparent) !important;
    }

    body .dashboard-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    body .dashboard-kpi-card {
        min-height: 126px;
        padding: 14px !important;
        border-radius: 14px !important;
    }

    body .dashboard-kpi-row {
        align-items: flex-start;
        flex-direction: column-reverse;
    }

    body .dashboard-kpi-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    body .dashboard-kpi-value {
        font-size: 20px;
    }

    body .dashboard-split {
        display: block;
    }

    body .dashboard-chart-card,
    body .dashboard-docs-card {
        display: none;
    }

    body .dashboard-activity-card {
        padding: 16px !important;
    }

    body .dashboard-mobile-quick {
        display: block;
    }

    body .dashboard-mobile-section-title {
        margin-bottom: 9px !important;
        color: var(--ds-text) !important;
        font-size: 14px !important;
        font-weight: var(--ds-fw-bold) !important;
    }

    body .dashboard-mobile-quick-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }

    body .dashboard-mobile-quick-item {
        min-width: 0;
        min-height: 86px;
        padding: 10px 4px;
        border: 1px solid var(--ds-border);
        border-radius: 12px;
        background: var(--ds-surface);
        color: var(--ds-text-2);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 7px;
        text-align: center;
    }

    body .dashboard-mobile-quick-item > span {
        width: 38px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: var(--ds-primary-soft);
        color: var(--ds-primary);
    }

    body .dashboard-mobile-quick-item > span.is-success {
        background: var(--ds-success-soft);
        color: var(--ds-success);
    }

    body .dashboard-mobile-quick-item > span.is-info {
        background: var(--ds-info-soft);
        color: var(--ds-info);
    }

    body .dashboard-mobile-quick-item > span.is-secondary {
        background: var(--ds-secondary-soft);
        color: var(--ds-secondary);
    }

    body .dashboard-mobile-quick-item strong {
        overflow: hidden;
        max-width: 100%;
        font-size: 10px;
        font-weight: var(--ds-fw-medium);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body .core-page.core-page .core-page-header {
        gap: 12px !important;
    }

    /* A summary row whose cards are all hidden (field permissions, no cards) leaves only its stack gap. */
    body .core-page .core-summary-grid:empty {
        display: none;
    }

    body .core-page.core-page .core-page-header > .mud-stack-root:first-child {
        display: none !important;
    }

    body .core-page.core-page .core-page-title {
        font-size: 21px !important;
    }

    body .core-page.core-page .core-page-actions {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px !important;
    }

    body .core-page.core-page .core-page-actions .mud-button-root:not(.mud-switch-base) {
        width: 100%;
        min-width: 0;
    }

    body .core-page.core-page .core-summary-grid {
        display: flex;
        flex-wrap: nowrap;
        margin-inline: 0 !important;
        padding-bottom: 3px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none !important;
    }

    body .core-page.core-page .core-summary-grid > .mud-grid-item {
        flex: 0 0 142px !important;
        max-width: 142px !important;
        scroll-snap-align: start;
    }

    body .core-page.core-page .core-summary-card {
        min-height: 86px !important;
        padding: 12px !important;
        border-radius: 12px !important;
    }

    body .core-page.core-page .core-summary-icon {
        width: 36px !important;
        height: 36px !important;
        flex-basis: 36px !important;
    }

    body .core-page.core-page .core-summary-copy .mud-typography-h4 {
        font-size: 20px !important;
    }

    body .core-page.core-page .core-summary-copy .mud-typography-caption {
        display: none;
    }

    body .core-mobile-filter-toggle {
        width: 100%;
        min-height: 46px;
        padding: 0 13px;
        border: 1px solid var(--ds-border-strong);
        border-radius: 11px;
        background: var(--ds-surface);
        color: var(--ds-text-2);
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-family: inherit;
        font-size: 12.5px;
        font-weight: var(--ds-fw-medium);
    }

    body .core-mobile-filter-toggle > span {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    body .core-mobile-filter-toggle .mud-icon-root {
        color: var(--ds-primary);
        font-size: 20px;
    }

    body .core-page.core-page .core-filter-card {
        display: none;
        padding: 14px !important;
    }

    body .core-page.core-page .core-filter-card.mobile-open {
        display: block;
    }

    body .core-page.core-page .core-filter-card .mud-grid-item {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }

    body .core-page.core-page .core-card-heading {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    /* سرصفحه‌ی کارت فیلتر از قاعده‌ی بالا مستثناست: خودش دکمه‌ی باز/بستن است و باید یک نوار
       افقی بماند (عنوان در یک سو، فلش در سوی دیگر)، وگرنه فلش زیر عنوان می‌افتد. */
    body .core-page.core-page .core-card-heading.core-filter-toggle {
        align-items: center !important;
        flex-direction: row !important;
    }

    body .core-page.core-page .core-filter-actions,
    body .core-page.core-page .core-filter-actions .mud-button-root:not(.mud-switch-base) {
        width: 100%;
    }

    /* فقط کارتِ گرید داده تمام‌عرض می‌شود؛ بخش‌های جزئیات باید کارت بمانند. */
    body .core-page.core-page .core-grid-card.core-grid-card-flush {
        overflow: visible;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body .core-page.core-page .core-hero-badges {
        flex-wrap: wrap;
    }

    body .core-page.core-page .core-hero-card {
        padding: 16px !important;
        border-radius: 13px !important;
    }

    body .core-page.core-page .core-hero-icon {
        width: 50px !important;
        height: 50px !important;
    }

    body .core-page.core-page .core-details-card,
    body .core-page.core-page .core-side-card {
        padding: 14px !important;
        border-radius: 13px !important;
    }

    body .core-page.core-page .mud-tabs-toolbar {
        overflow-x: auto;
        scrollbar-width: none !important;
    }

    body .core-page.core-page .mud-tab {
        min-width: max-content;
        min-height: 44px;
        padding-inline: 12px;
    }

    body .core-page.core-page .core-info-grid .mud-grid-item {
        flex-basis: 50% !important;
        max-width: 50% !important;
    }

    body .core-form-dialog.mud-dialog,
    body .core-confirm-dialog.mud-dialog {
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: 92dvh !important;
        margin: auto 0 0 !important;
        border-width: 1px 0 0 !important;
        border-radius: 16px 16px 0 0 !important;
    }

    body .core-form-dialog .mud-dialog-title,
    body .core-confirm-dialog .mud-dialog-title {
        padding: 14px 16px !important;
    }

    body .core-form-dialog .mud-dialog-content,
    body .core-confirm-dialog .mud-dialog-content {
        padding: 16px !important;
        overscroll-behavior: contain;
    }

    body .core-form-dialog .mud-dialog-actions,
    body .core-confirm-dialog .mud-dialog-actions {
        position: sticky;
        bottom: 0;
        z-index: 2;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important;
    }

    body .core-dialog-actions {
        width: 100%;
        grid-template-columns: 1fr 1.5fr;
        gap: 8px !important;
    }

    body .core-dialog-actions .mud-button-root:not(.mud-switch-base) {
        width: 100%;
        min-width: 0;
        min-height: 46px;
    }

    body .mud-snackbar-location-bottom-left,
    body .mud-snackbar-location-bottom-center,
    body .mud-snackbar-location-bottom-right {
        bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    }
}

@media screen and (max-width: 599.95px) {
    body .core-page.core-page .core-info-grid .mud-grid-item {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }

    body .core-page.core-page .core-info-grid > .mud-grid-item {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }
}

/* The one width below MudBlazor's breakpoints (see the table at the top of core.css): narrow phones. */
@media screen and (max-width: 390px) {
    body .dashboard-mobile-quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body .dashboard-mobile-quick-item {
        min-height: 76px;
    }

    body .core-page.core-page .core-page-actions {
        grid-template-columns: 1fr;
    }

    .uni-mobile-bottom-nav a,
    .uni-mobile-bottom-nav button {
        min-width: 46px;
        padding-inline: 4px;
    }
}

@media screen and (max-width: 959.95px) {
    body .core-page.core-page .app-settings-layout {
        grid-template-columns: 1fr;
    }

    body .core-page.core-page .app-settings-nav {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
    }

    body .core-page.core-page .app-settings-nav-item {
        width: auto;
        flex: 1 1 160px;
    }
}

@media screen and (max-width: 599.95px) {
    body .core-page.core-page .app-settings-toolbar,
    body .core-page.core-page .app-settings-tabs-card {
        padding-inline: 14px;
    }

    body .core-page.core-page .app-settings-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- Card mode of CrudDataGrid (MobileCard) ------------------------------------------------------
   The grid's toolbar (title, tabs) and pager stay; only the table body is hidden and the cards sit
   between them. display: contents on the MudDataGrid root lets its toolbar and pager take part in this
   card's flex order next to the card list. */
.core-grid-card.has-mobile-cards {
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.core-grid-card.has-mobile-cards > .mud-table {
    display: contents;
}

.core-grid-card.has-mobile-cards .mud-table-container {
    display: none !important;
}

.core-grid-card.has-mobile-cards .mud-table-toolbar {
    order: 1;
}

.core-grid-card.has-mobile-cards > .core-mobile-cards {
    order: 2;
}

.core-grid-card.has-mobile-cards .mud-table-pagination {
    order: 3;
}

/* The bulk actions move to the bottom action bar while rows are selected. */
.core-grid-card.has-mobile-cards .core-grid-actions {
    display: none;
}

.core-mobile-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 12px 12px;
    background: var(--ds-bg);
}

.core-mobile-selection {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 4px 4px 12px;
    border-radius: 12px;
    background: var(--ds-primary-soft);
    color: var(--ds-primary-strong);
    font-size: 13px;
    font-weight: var(--ds-fw-bold);
}

.core-mobile-card-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.core-mobile-card {
    display: flex;
    align-items: flex-start;
    border: 1px solid var(--ds-border);
    border-radius: 14px;
    background: var(--ds-surface);
}

.core-mobile-card.is-selected {
    border-color: var(--ds-primary);
    background: var(--ds-primary-softer);
}

.core-mobile-card.is-skeleton {
    height: 112px;
    overflow: hidden;
}

.core-mobile-card.is-skeleton .core-skeleton {
    display: block;
    width: 100%;
    height: 100%;
}

.core-mobile-card-check {
    flex: 0 0 44px;
    height: 44px;
    margin: 4px 4px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.core-mobile-card-box {
    width: 22px;
    height: 22px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--ds-faint);
    border-radius: 6px;
    background: var(--ds-surface);
    color: transparent;
}

.core-mobile-card-check[aria-checked="true"] .core-mobile-card-box {
    border-color: var(--ds-primary);
    background: var(--ds-primary);
    color: var(--ds-primary-contrast);
}

.core-mobile-card-body {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--ds-text);
    text-decoration: none;
}

.core-mobile-card-check + .core-mobile-card-body {
    padding-inline-start: 0;
}

/* Building blocks for the pages' card templates, so every queue card reads the same way. */
.core-mobile-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.core-mobile-card-title {
    font-size: 15px;
    font-weight: var(--ds-fw-bold);
    overflow-wrap: anywhere;
}

.core-mobile-card-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.core-mobile-card-code {
    font-size: 12px;
    color: var(--ds-muted);
}

.core-mobile-card-name {
    font-size: 14px;
    font-weight: var(--ds-fw-medium);
}

.core-mobile-card-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px 12px;
    font-size: 12.5px;
}

.core-mobile-card-field {
    min-width: 0;
    color: var(--ds-muted);
}

.core-mobile-card-field > b {
    color: var(--ds-text);
    font-weight: var(--ds-fw-medium);
}

.core-mobile-card-field.is-wide {
    grid-column: 1 / -1;
}

.core-mobile-card-field.is-danger,
.core-mobile-card-field.is-danger > b {
    color: var(--mud-palette-error);
}

/* The one figure a stock card is read for (on-hand total, a movement's signed quantity), beside the item. */
.core-mobile-card-amount {
    flex: none;
    color: var(--ds-text);
    font-size: 15px;
    font-weight: var(--ds-fw-bold, 700);
    white-space: nowrap;
}

/* Wide report rows: one «label … value» line per field instead of a two-column grid. */
.core-mobile-card-fields.is-rows {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
}

.core-mobile-card-fields.is-rows > .core-mobile-card-field {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    color: var(--ds-text);
    text-align: end;
}

.core-mobile-card-fields.is-rows > .core-mobile-card-field > b {
    flex: none;
    max-width: 55%;
    color: var(--ds-muted);
    font-weight: var(--ds-fw-medium);
    text-align: start;
}

.core-mobile-card-field.is-warning {
    color: var(--mud-palette-warning-darken);
    font-weight: var(--ds-fw-medium);
}

.core-mobile-card-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Progress of a document (lines done of all lines): a bar and the count next to it. */
.core-mobile-card-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--ds-text-2);
}

.core-mobile-card-progress-bar {
    flex: 1;
    height: 6px;
    overflow: hidden;
    border-radius: 3px;
    background: var(--ds-surface-inset);
}

.core-mobile-card-progress-bar > span {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--ds-primary);
}

/* ---- List pages on phones: counts, tabs and the filter sheet ------------------------------------
   Later in this file than the older small-screen block, so these win at equal specificity. */

/* Summary cards: equal columns that all fit across, count above label, no icon. */
body .core-page.core-page .core-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
    gap: 8px;
    margin: 0 !important;
    padding: 0;
    overflow: visible;
}

body .core-page.core-page .core-summary-grid > .mud-grid-item {
    flex: none !important;
    max-width: none !important;
    padding: 0 !important;
}

body .core-page.core-page .core-summary-card {
    min-height: 58px !important;
    height: 100%;
    padding: 8px 6px !important;
}

body .core-page.core-page .core-summary-card .core-summary-icon {
    display: none !important;
}

body .core-page.core-page .core-summary-copy {
    text-align: center;
}

body .core-page.core-page .core-summary-copy .mud-typography-h4 {
    font-size: 18px !important;
    line-height: 1.3;
}

body .core-page.core-page .core-summary-copy .mud-typography-body2 {
    font-size: 11px !important;
    line-height: 1.5;
}

/* Grid tabs: pill chips in one row that scrolls sideways, not wrapping lines with an underline. */
body .core-page.core-page .core-grid-tabs {
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 2px 6px;
    border-bottom: 0;
    scrollbar-width: none;
}

body .core-page.core-page .core-grid-tabs::-webkit-scrollbar {
    display: none;
}

body .core-page.core-page .core-grid-tab {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--ds-border);
    border-radius: 18px;
    background: var(--ds-surface);
    font-weight: var(--ds-fw-bold);
}

body .core-page.core-page .core-grid-tab::after {
    content: none;
}

body .core-page.core-page .core-grid-tab.is-active {
    border-color: var(--ds-primary);
    background: var(--ds-primary);
    color: var(--ds-primary-contrast);
}

body .core-page.core-page .core-grid-tab.is-active .core-grid-tab-count {
    color: inherit;
}

/* Filters: the card opens as a bottom sheet over a scrim instead of pushing the list down. */
.core-mobile-filter-scrim {
    position: fixed;
    inset: 0;
    z-index: 1600;
    padding: 0;
    border: 0;
    background: var(--ds-overlay);
}

body .core-page.core-page .core-filter-card.mobile-open {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1601;
    max-height: 85dvh;
    overflow-y: auto;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom)) !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -8px 24px rgba(14, 23, 43, .18);
}

body .core-page.core-page .core-filter-card.mobile-open .core-filter-footer {
    position: sticky;
    bottom: calc(-16px - env(safe-area-inset-bottom));
    margin: 0 -16px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--ds-surface);
    border-top: 1px solid var(--ds-border-soft);
}

/* ---- Entry dialogs on phones -------------------------------------------------------------------- */

/* An open dialog is a sheet of its own: the bottom bar and the page's action bar would sit over its
   buttons (they are above MudBlazor's dialog layer), so they step aside until it closes. */
body:has(.mud-dialog-container) .uni-mobile-bottom-nav,
body:has(.mud-dialog-container) .uni-mobile-action-bar {
    display: none;
}

/* Quantity stepper: + and − either side of the number, thumb-sized. */
.core-stepper {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.core-stepper-box {
    display: flex;
    align-items: stretch;
    height: 48px;
    overflow: hidden;
    border: 1px solid var(--ds-border-strong);
    border-radius: 12px;
    background: var(--ds-surface);
}

.core-stepper.is-error .core-stepper-box {
    border-color: var(--ds-error);
}

.core-stepper-button {
    display: flex;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: var(--ds-surface-2);
    color: var(--ds-text);
}

.core-stepper-button:first-child {
    border-inline-end: 1px solid var(--ds-border-soft);
}

.core-stepper-button:last-child {
    border-inline-start: 1px solid var(--ds-border-soft);
}

.core-stepper-button:disabled {
    color: var(--ds-faint);
}

.core-stepper .core-stepper-input {
    flex: 1;
    min-width: 0;
    margin: 0 !important;
}

.core-stepper .core-stepper-input .mud-input-control-input-container,
.core-stepper .core-stepper-input .mud-input {
    height: 100%;
}

.core-stepper .core-stepper-input .mud-input-outlined-border {
    border: 0 !important;
}

.core-stepper .core-stepper-input input {
    text-align: center;
    font-size: 17px;
    font-weight: var(--ds-fw-bold);
}

.core-stepper-error {
    color: var(--ds-error);
    font-size: var(--ds-fs-xs);
}

/* Final receipt count: one compact card per line. */
.core-mobile-count-line {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--ds-border);
    border-radius: 14px;
    background: var(--ds-surface);
}

.core-mobile-count-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.core-mobile-count-cap {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    font-size: 11px;
    color: var(--ds-text-2);
}

.core-mobile-count-cap > b {
    color: var(--ds-text);
    font-size: 14px;
}

.core-mobile-count-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.core-mobile-count-label {
    flex: 0 0 auto;
    line-height: 48px;
    font-size: 13px;
    font-weight: var(--ds-fw-bold);
}

.core-mobile-count-diff {
    display: flex;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: var(--ds-fw-bold);
}

.core-mobile-count-diff.is-error {
    background: var(--ds-error-soft);
    color: var(--ds-error);
}

.core-mobile-count-diff.is-notice {
    background: var(--ds-warning-soft);
    color: var(--ds-warning-strong);
}

/* A dialog footer that carries a running total: the total on its own row, then the primary button
   wide and the secondary one narrow. */
.core-mobile-dialog-total {
    display: flex;
    flex: 1 0 100%;
    justify-content: space-between;
    font-size: 13px;
    color: var(--ds-text-2);
}

.core-mobile-dialog-total > b {
    color: var(--ds-text);
}

body .core-form-dialog .mud-dialog-actions:has(> .core-mobile-dialog-total) {
    flex-wrap: wrap;
    gap: 8px;
    border-top: 1px solid var(--ds-border-soft);
    background: var(--ds-surface);
}

body .core-form-dialog .mud-dialog-actions:has(> .core-mobile-dialog-total) > .mud-button-root {
    min-height: 48px;
    margin: 0 !important;
    border-radius: 12px;
}

body .core-form-dialog .mud-dialog-actions:has(> .core-mobile-dialog-total) > .mud-button-filled {
    flex: 1 1 auto;
    order: 1;
}

body .core-form-dialog .mud-dialog-actions:has(> .core-mobile-dialog-total) > .mud-button-outlined {
    flex: 0 0 96px;
    order: 2;
}

/* A dialog whose footer has a single button: it spans the footer. */
body .core-form-dialog .mud-dialog-actions > .mud-button-root:only-child {
    flex: 1;
    min-height: 48px;
    margin: 0 !important;
    border-radius: 12px;
}

/* Inspection verdict: one row per line with its final quantity beside it. */
.core-mobile-verdict-lines {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.core-mobile-verdict-line {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--ds-border);
    border-radius: 12px;
    background: var(--ds-surface);
}

.core-mobile-verdict-line-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.core-mobile-verdict-line-title {
    font-size: 13px;
    font-weight: var(--ds-fw-bold);
}

.core-mobile-verdict-line-meta {
    font-size: 11.5px;
    color: var(--ds-text-2);
}

.core-mobile-verdict-diff {
    align-self: flex-start;
    margin-top: 2px;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11.5px;
    font-weight: var(--ds-fw-bold);
}

.core-mobile-verdict-diff.is-error {
    background: var(--ds-error-soft);
    color: var(--ds-error);
}

.core-mobile-verdict-diff.is-notice {
    background: var(--ds-warning-soft);
    color: var(--ds-warning-strong);
}

body .core-form-dialog .core-mobile-verdict-input {
    flex: 0 0 120px;
    min-width: 0;
    margin: 0 !important;
}

/* Choices as large radio rows (verdicts, pass/fail): the whole row is the target. */
.core-mobile-choice-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.core-mobile-choice {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 0 14px;
    border: 1px solid var(--ds-border-strong);
    border-radius: 12px;
    background: var(--ds-surface);
    color: var(--ds-text);
    font: inherit;
    font-size: 14.5px;
    font-weight: var(--ds-fw-bold);
    text-align: start;
}

.core-mobile-choice.is-selected {
    border-color: var(--ds-primary);
    background: var(--ds-primary-softer);
}

.core-mobile-choice:disabled {
    color: var(--ds-faint);
    background: var(--ds-surface-2);
}

.core-mobile-choice-dot {
    display: flex;
    flex: 0 0 20px;
    align-items: center;
    justify-content: center;
    height: 20px;
    border: 2px solid var(--ds-border-strong);
    border-radius: 50%;
}

.core-mobile-choice.is-selected .core-mobile-choice-dot {
    border-color: var(--ds-primary);
}

.core-mobile-choice.is-selected .core-mobile-choice-dot::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ds-primary);
}

/* Quality control entry: one line per page, its place shown as dots. */
.core-mobile-qc-pager {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    font-weight: var(--ds-fw-bold);
    color: var(--ds-text-2);
}

.core-mobile-qc-dots {
    display: flex;
    gap: 4px;
}

.core-mobile-qc-dot {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--ds-border);
}

.core-mobile-qc-dot.is-done {
    background: var(--ds-success);
}

.core-mobile-qc-dot.is-invalid {
    background: var(--ds-error);
}

.core-mobile-qc-dot.is-current {
    background: var(--ds-primary);
}

.core-mobile-qc-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--ds-border);
    border-radius: 14px;
    background: var(--ds-surface);
}

.core-mobile-qc-section.core-row-invalid {
    border-color: var(--ds-error);
}

.core-mobile-qc-section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.core-mobile-qc-section-head > h3 {
    margin: 0;
    font-size: 14px;
    font-weight: var(--ds-fw-bold);
}

.core-mobile-qc-test {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.core-mobile-qc-test-label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: var(--ds-fw-bold);
}

.core-mobile-qc-range {
    color: var(--ds-text-2);
    font-size: 12px;
    font-weight: var(--ds-fw-medium);
}

/* Pass/fail as two halves of one control, each a full-height target. */
.core-mobile-segment {
    display: flex;
    overflow: hidden;
    border: 1px solid var(--ds-border-strong);
    border-radius: 12px;
}

.core-mobile-segment.is-failed {
    border-color: var(--ds-error);
}

.core-mobile-segment > button {
    flex: 1;
    min-height: 46px;
    padding: 0;
    border: 0;
    background: var(--ds-surface);
    color: var(--ds-text);
    font: inherit;
    font-size: 14px;
    font-weight: var(--ds-fw-bold);
}

.core-mobile-segment > button + button {
    border-inline-start: 1px solid var(--ds-border-soft);
}

.core-mobile-segment > button.is-pass.is-selected {
    background: var(--ds-success-soft);
    color: var(--ds-success);
}

.core-mobile-segment > button.is-fail.is-selected {
    background: var(--ds-error-soft);
    color: var(--ds-error);
}

/* Footer with a previous-line button: the arrow square, the primary button wide. */
body .core-form-dialog .mud-dialog-actions:has(> .core-mobile-pager-prev) {
    gap: 8px;
}

body .core-form-dialog .mud-dialog-actions:has(> .core-mobile-pager-prev) > .mud-button-root {
    min-height: 48px;
    margin: 0 !important;
    border-radius: 12px;
}

body .core-form-dialog .mud-dialog-actions > .core-mobile-pager-prev {
    flex: 0 0 48px;
    order: 0;
}

body .core-form-dialog .mud-dialog-actions:has(> .core-mobile-pager-prev) > .mud-button-filled {
    flex: 1 1 auto;
    order: 1;
}

body .core-form-dialog .mud-dialog-actions:has(> .core-mobile-pager-prev) > .mud-button-outlined:not(.core-mobile-pager-prev) {
    flex: 0 0 auto;
    order: 2;
    padding-inline: 12px;
    white-space: nowrap;
}

/* ---- Detail pages on phones (any page with a hero card) ----------------------------------------
   The top bar already names the section and goes back, so the page's own back button steps aside;
   refresh and print stay as one compact row. */
body .core-page.core-page:has(.core-hero-card) .core-page-actions .core-back-button {
    display: none;
}

body .core-page.core-page:has(.core-hero-card) .core-page-actions .mud-button-root:not(.mud-switch-base) {
    flex: 0 0 auto;
    width: auto;
    min-height: 36px;
    padding: 0 12px;
    font-size: 12.5px;
}

/* Hero card: the side actions become one wrapping row of compact chips under the number. */
body .core-page.core-page .core-hero-card .core-details-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
}

body .core-page.core-page .core-hero-card .core-details-actions .mud-button-root:not(.mud-switch-base) {
    min-height: 34px;
    padding: 0 10px;
}

/* Information cards: label and value on one row each, divided by a hairline, no tiles or icons. */
body .core-page.core-page .core-details-card .core-info-grid {
    width: 100% !important;
    margin: 0 !important;
}

body .core-page.core-page .core-details-card .core-info-grid > .mud-grid-item {
    flex-basis: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

body .core-page.core-page .core-details-card .core-info-box {
    min-height: 0;
    padding: 10px 2px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ds-border-soft) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body .core-page.core-page .core-details-card .core-info-grid > .mud-grid-item:last-child .core-info-box {
    border-bottom: 0 !important;
}

body .core-page.core-page .core-details-card .core-info-box .core-info-icon {
    display: none;
}

body .core-page.core-page .core-details-card .core-info-box .core-info-label {
    flex: 0 0 auto;
    color: var(--ds-text-2);
    font-size: 12.5px;
}

body .core-page.core-page .core-details-card .core-info-box .core-info-value {
    min-width: 0;
    font-weight: var(--ds-fw-bold);
    text-align: end;
    overflow-wrap: anywhere;
}

/* Document actions in the bottom bar (MobileDetailsActions): the buttons share the width, coloured
   actions are filled and plain ones stay outlined; with three or more, only the first keeps its label. */
.uni-mobile-action-bar > :nth-child(n) {
    flex: 1 1 0;
    min-width: 0;
}

.uni-mobile-action-bar .core-action-button {
    width: 100%;
    min-height: 48px;
    border-radius: 12px;
    font-size: 14px;
}

.uni-mobile-action-bar .core-action-button .core-action-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.uni-mobile-action-bar .core-action-button.mud-button-outlined-primary:not(:disabled) {
    border-color: var(--ds-primary);
    background: var(--ds-primary);
    color: var(--ds-primary-contrast);
}

.uni-mobile-action-bar .core-action-button.mud-button-outlined-success:not(:disabled) {
    border-color: var(--ds-success);
    background: var(--ds-success);
    color: #fff;
}

.uni-mobile-action-bar .core-action-button.mud-button-outlined-warning:not(:disabled) {
    border-color: var(--ds-warning);
    background: var(--ds-warning);
    color: #fff;
}

.uni-mobile-action-bar .core-action-button.mud-button-outlined-error:not(:disabled) {
    border-color: var(--ds-error);
    background: var(--ds-error);
    color: #fff;
}

.uni-mobile-action-bar:has(> :nth-child(3)) > :not(:first-child) {
    flex: 0 0 48px;
}

.uni-mobile-action-bar:has(> :nth-child(3)) > :not(:first-child) .core-action-label {
    display: none;
}

.uni-mobile-action-bar:has(> :nth-child(3)) > :not(:first-child) .mud-button-icon-start {
    margin: 0;
}

/* Notes sheet (CommentPanel in DocumentNotesDialog): oldest note first like a conversation, and the
   composer pinned under the list as one row with an icon send button. */
body .core-comment-panel .core-comment-list {
    flex-direction: column-reverse;
}

body .core-comment-panel .core-comment-compose {
    position: sticky;
    bottom: -16px;
    z-index: 1;
    order: 2;
    flex-direction: row;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 -16px -16px;
    padding: 10px 16px 12px;
    border: 0;
    border-top: 1px solid var(--ds-border-soft);
    border-radius: 0;
    background: var(--ds-surface);
}

body .core-comment-panel .core-comment-compose > .core-comment-input {
    flex: 1 1 0;
    min-width: 0;
    margin: 0 !important;
}

/* One line until the user writes, then room for a few; the field keeps its own scroll beyond that. */
body .core-comment-panel .core-comment-compose textarea {
    height: 26px !important;
    min-height: 26px;
}

body .core-comment-panel .core-comment-compose textarea:focus {
    height: 96px !important;
}

body .core-comment-panel .core-comment-compose-footer,
body .core-comment-panel .core-comment-submit {
    width: auto;
    flex: 0 0 auto;
}

body .core-comment-panel .core-comment-submit-meta {
    display: none;
}

body .core-comment-panel .core-comment-send {
    width: 48px;
    min-width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 12px;
    font-size: 0;
}

body .core-comment-panel .core-comment-send .mud-button-icon-start {
    margin: 0;
}

body .core-comment-panel .core-comment-limit-error {
    flex: 0 0 100%;
}

/* A dialog footer holding only a text «بستن» repeats the × in the title bar, so phones drop it. */
body .core-form-dialog .mud-dialog-actions:has(> .core-dialog-actions > .mud-button-text:only-child) {
    display: none;
}

/* Card actions (CrudDataGrid MobileCardActions): a row of buttons under the card body, outside its link. */
.core-mobile-card:has(> .core-mobile-card-actions) {
    flex-wrap: wrap;
}

.core-mobile-card-actions {
    display: flex;
    flex: 0 0 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 14px 12px;
}

.core-mobile-card-actions:empty {
    display: none;
}

.core-mobile-card-actions .mud-button-root:not(.mud-switch-base) {
    min-height: 38px;
}

/* Document lines on detail pages: one compact card per line instead of the wide table. */
.core-mobile-line-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.core-mobile-line {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--ds-border);
    border-radius: 14px;
    background: var(--ds-surface);
}

.core-mobile-line.is-failed {
    border-color: var(--ds-error);
}

.core-mobile-line.is-selected {
    border-color: var(--ds-primary);
    background: var(--ds-primary-softer);
}

.core-mobile-line .core-mobile-count-head > .core-mobile-card-check {
    margin: -6px -6px 0 0;
}

.core-mobile-line .core-mobile-count-head > .core-mobile-card-item {
    flex: 1;
}

/* A line card whose head opens its details (tests) in place. */
.core-mobile-line-toggle {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
}

.core-mobile-line-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--ds-text-2);
    font-size: 12px;
}

.core-mobile-test-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.core-mobile-test {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--ds-surface-2);
    font-size: 13px;
}

.core-mobile-test.is-failed {
    background: var(--ds-error-soft);
    color: var(--ds-error);
}

.core-mobile-test-name small {
    margin-inline-start: 4px;
    color: var(--ds-text-2);
    font-size: 11px;
}

/* Document totals in one strip (e.g. shipped / accepted / rejected). */
.core-mobile-totals {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 8px;
}

.core-mobile-totals > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 6px;
    border: 1px solid var(--ds-border);
    border-radius: 12px;
    background: var(--ds-surface);
    color: var(--ds-text-2);
    font-size: 11.5px;
}

.core-mobile-totals > div > b {
    color: var(--ds-text);
    font-size: 15px;
}

.core-mobile-totals > div.is-error > b {
    color: var(--ds-error);
}

/* A section header with its own action toolbar: the title takes the row, the toolbar goes under it. */
body .core-page.core-page .core-grid-card > .d-flex:has(> .core-action-toolbar) {
    flex-wrap: wrap;
}

body .core-page.core-page .core-grid-card > .d-flex:has(> .core-action-toolbar) > :first-child {
    flex: 1 0 100%;
}

/* A row that opens a section of the page (profile: personal details, password). */
.core-mobile-disclosure {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    margin-bottom: 8px;
    padding: 0 14px;
    border: 1px solid var(--ds-border);
    border-radius: 13px;
    background: var(--ds-surface);
    color: var(--ds-text);
    font: inherit;
    font-size: 14px;
    font-weight: var(--ds-fw-bold);
    text-align: start;
}

.core-mobile-disclosure > span {
    flex: 1;
}

.core-mobile-disclosure > .mud-icon-root:first-child {
    color: var(--ds-primary);
}

/* Profile: identity facts as one card of label/value rows, like the detail pages. */
body .profile-page .mud-grid:has(> .mud-grid-item > .core-info-box) {
    width: auto !important;
    margin: 0 !important;
    padding: 4px 14px;
    border: 1px solid var(--ds-border);
    border-radius: 13px;
    background: var(--ds-surface);
}

body .profile-page .mud-grid:has(> .mud-grid-item > .core-info-box) > .mud-grid-item {
    flex-basis: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

body .profile-page .mud-grid > .mud-grid-item > .core-info-box {
    min-height: 0;
    padding: 10px 2px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ds-border-soft) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body .profile-page .mud-grid > .mud-grid-item:last-child > .core-info-box {
    border-bottom: 0 !important;
}

body .profile-page .core-info-box .core-info-icon {
    display: none;
}

body .profile-page .core-info-box .core-info-label {
    flex: 0 0 auto;
    color: var(--ds-text-2);
    font-size: 12.5px;
}

/* Profile account section: the «پروفایل» link of the shared fragment would point at this very page. */
body .profile-mobile-account .uni-mobile-drawer-action:not(.uni-mobile-drawer-company):not(.uni-mobile-drawer-logout) {
    display: none;
}

/* Read-only list on a phone (CrudDataGrid MobileReadOnlyNotice): why there are no buttons. */
.core-mobile-readonly {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--ds-border);
    border-radius: 12px;
    background: var(--ds-surface-2);
    color: var(--ds-text-2);
    font-size: 12.5px;
    line-height: 1.8;
}

.core-mobile-readonly .mud-icon-root {
    flex: 0 0 auto;
    margin-top: 3px;
}

/* Desktop-only page on a phone (DesktopOnlyNotice): one centred card. */
.uni-desktop-only {
    display: flex;
    align-items: center;
    min-height: calc(100dvh - 200px);
}

.uni-desktop-only-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 28px 20px !important;
    text-align: center;
}

.uni-desktop-only-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--ds-primary-softer);
    color: var(--ds-primary);
}

.uni-desktop-only-icon .mud-icon-root {
    font-size: 32px;
}

.uni-desktop-only-kicker {
    color: var(--ds-text-2);
    font-size: 12.5px;
    font-weight: var(--ds-fw-bold);
}

.uni-desktop-only-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
}

.uni-desktop-only-actions .mud-button-root {
    width: 100%;
    min-height: 48px;
    border-radius: 12px;
}

/* Quick choices in a form (e.g. today / yesterday / pick a date): a row of pills. */
.core-mobile-choice-row {
    display: flex;
    gap: 8px;
}

.core-mobile-pill {
    flex: 1;
    min-height: 40px;
    padding: 0 10px;
    border: 1px solid var(--ds-border-strong);
    border-radius: 20px;
    background: var(--ds-surface);
    color: var(--ds-text);
    font: inherit;
    font-size: 13px;
    font-weight: var(--ds-fw-medium);
}

.core-mobile-pill.is-selected {
    border-color: var(--ds-primary);
    background: var(--ds-primary);
    color: var(--ds-primary-contrast);
    font-weight: var(--ds-fw-bold);
}

/* A single footer button wrapped in a span (for its disabled-reason tooltip) spans the footer too. */
body .core-form-dialog .mud-dialog-actions > span:only-child {
    flex: 1;
}

body .core-form-dialog .mud-dialog-actions > span:only-child > .mud-button-root {
    width: 100%;
    min-height: 48px;
    border-radius: 12px;
}

/* Four or more totals: two per row instead of one cramped row. */
.core-mobile-totals.is-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
}

.core-mobile-daily-qty {
    font-size: 16px;
}

.core-mobile-line .core-mobile-line-action {
    flex: 0 0 auto;
    min-height: 36px;
    margin: 0;
}

.core-mobile-line-error {
    color: var(--ds-error);
    font-size: 12px;
    line-height: 1.7;
}

.core-mobile-lines-total {
    padding: 12px 4px 0;
    font-size: 14px;
}

.core-mobile-line .core-mobile-line-chip {
    align-self: flex-start;
    margin: 0;
}

/* Stage track (MobileStageTrack): one bar per stage under the document number. */
.core-mobile-stages {
    display: flex;
    gap: 4px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.core-mobile-stage {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    color: var(--ds-text-2);
    font-size: 11px;
    line-height: 1.4;
}

.core-mobile-stage-bar {
    height: 4px;
    border-radius: 2px;
    background: var(--ds-border);
}

.core-mobile-stage.is-done {
    color: var(--ds-text);
}

.core-mobile-stage.is-done .core-mobile-stage-bar {
    background: var(--ds-success);
}

.core-mobile-stage.is-current {
    color: var(--ds-text);
    font-weight: var(--ds-fw-bold);
}

.core-mobile-stage.is-current .core-mobile-stage-bar {
    background: var(--ds-warning);
}

/* Section tabs (MobileSegments): a segmented control that splits a long page. */
.core-mobile-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: var(--ds-surface-2);
}

.core-mobile-tab {
    flex: 1;
    min-height: 38px;
    padding: 0 8px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--ds-text-2);
    font: inherit;
    font-size: 13px;
    font-weight: var(--ds-fw-medium);
}

.core-mobile-tab.is-selected {
    background: var(--ds-surface);
    color: var(--ds-text);
    font-weight: var(--ds-fw-bold);
    box-shadow: var(--ds-shadow-sm);
}

} /* end @layer app */

/* mud.overrides: small-screen rules that have to beat a MudBlazor !important utility; see app-ui.css. */
@layer mud.overrides {
    /* Summary cards on phones: count above its label, centred. MudStack sets direction and alignment
       with !important utilities, which only this layer can beat. */
    body .core-page.core-page .core-summary-card > .mud-stack-root {
        justify-content: center !important;
    }

    body .core-page.core-page .core-summary-copy {
        flex-direction: column-reverse !important;
        align-items: center !important;
        gap: 0 !important;
    }

    /* Detail pages: the heading and breadcrumb live in the top bar, and the page actions are one
       scrolling row instead of the two-column grid list pages use. */
    body .core-page.core-page:has(.core-hero-card) .core-page-header > :first-child:not(.core-page-actions) {
        display: none !important;
    }

    /* Nothing left once the back button steps aside (e.g. the profile page): no empty row. */
    body .core-page.core-page:has(.core-hero-card) .core-page-actions:not(:has(> :not(.core-back-button))),
    body .core-page.core-page:has(.core-hero-card) .core-page-header:not(:has(.core-page-actions > :not(.core-back-button))) {
        display: none !important;
    }

    body .core-page.core-page:has(.core-hero-card) .core-page-actions:has(> :not(.core-back-button)) {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        overflow-x: auto;
        scrollbar-width: none;
    }

    body .core-page.core-page .core-hero-card .core-hero-content {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    /* Information rows: label at the start, value at the end. */
    body .core-page.core-page .core-details-card .core-info-box > div {
        width: 100%;
    }

    body .profile-page .core-info-box > div {
        width: 100%;
    }

    body .profile-page .core-info-box .core-info-copy {
        flex: 1 1 auto;
        flex-direction: row !important;
        flex-wrap: wrap;
        justify-content: space-between !important;
        align-items: baseline !important;
        gap: 8px 12px !important;
        min-width: 0;
    }

    body .core-page.core-page .core-details-card .core-info-box .core-info-copy {
        flex: 1 1 auto;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: baseline !important;
        gap: 12px !important;
        min-width: 0;
    }

    /* A MudDataGrid embedded in a detail page (not a CrudDataGrid list) switches to MudBlazor's stacked
       layout on phones, where each row already labels its cells; its header row would only stack the
       column names down the screen, so it is hidden. */
    body .core-page .mud-sm-table .mud-table-head,
    body .core-page .mud-xs-table .mud-table-head {
        display: none !important;
    }

    /* The pager wraps on a phone (rows-per-page, range, arrows); its fixed toolbar height let the arrows spill out. */
    body .core-page .mud-table-pagination-toolbar {
        height: auto !important;
        min-height: 52px;
        padding-block: 6px !important;
    }

    /* Report detail lines: each table row becomes a card of «label  value» pairs; the labels come from the
       cells' data-label (the column titles), so the wide table never needs sideways scrolling on a phone. */
    body .core-page .core-table-scroll:has(td[data-label]),
    body .core-page .core-table:has(td[data-label]) .mud-table-container {
        overflow: visible !important;
    }

    body .core-page .core-table:has(td[data-label]) table,
    body .core-page .core-table:has(td[data-label]) tfoot {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    body .core-page .core-table:has(td[data-label]) thead {
        display: none !important;
    }

    body .core-page .core-table:has(td[data-label]) tbody {
        display: flex !important;
        flex-direction: column;
        gap: 10px;
    }

    body .core-page .core-table:has(td[data-label]) tbody tr {
        display: flex !important;
        flex-direction: column;
        gap: 2px;
        padding: 10px 14px !important;
        border: 1px solid var(--ds-border) !important;
        border-radius: 14px;
        background: var(--ds-surface) !important;
    }

    body .core-page .core-table td[data-label] {
        display: flex !important;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        width: auto !important;
        min-width: 0 !important;
        padding: 3px 0 !important;
        border: 0 !important;
        background: transparent !important;
        text-align: end !important;
        white-space: normal !important;
    }

    /* An ltr value cell is laid out left to right; reverse it so the label still sits on the start side. */
    body .core-page .core-table[dir="rtl"] td.ltr-value[data-label] {
        flex-direction: row-reverse;
    }

    body .core-page .core-table td[data-label]::before {
        content: attr(data-label);
        flex: none;
        color: var(--ds-muted);
        font-size: 12px;
        font-weight: var(--ds-fw-medium);
        text-align: start;
    }

    body .core-page .core-table:has(td[data-label]) tfoot tr {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 4px 12px;
        margin-top: 10px;
        padding: 10px 14px;
        border-radius: 14px;
        background: var(--ds-surface-2, var(--ds-surface));
    }

    body .core-page .core-table:has(td[data-label]) tfoot td {
        width: auto !important;
        padding: 0 !important;
        border: 0 !important;
    }

    body .core-page .core-table:has(td[data-label]) tfoot td:empty {
        display: none !important;
    }

    @media screen and (max-width: 959.95px) {
        .uni-desktop-leading,
        .uni-context-block,
        .uni-action-block,
        .uni-user-menu-root {
            display: none !important;
        }

        .core-page .core-page-actions,
        .core-dialog-actions {
            display: grid !important;
        }
    }
}