/* =============================================================================
   Responsive / mobile styles for TexwinOne.Server.
   Loaded last so these overrides win. The desktop layout is a CSS grid
   ("rz-header rz-header" / "rz-sidebar rz-body", columns "55px 1fr"); on small
   screens we collapse the sidebar column and turn the sidebar into an off-canvas
   drawer, then stack the dense desktop layouts (2-col field grids, the Construct
   splitter, dialogs) into a single readable column.
   Breakpoint: 768px (phones + small tablets in portrait).
   ============================================================================= */

/* The drawer backdrop is inert off mobile (kept out of the desktop layout grid). */
.tx-sidebar-backdrop {
    display: none;
}

/* =============================================================================
   Record cards (TxRecordList) — the mobile card-per-record view rendered by a
   RadzenDataList in place of the desktop RadzenDataGrid. Reset the DataList's
   default list chrome and present each item as a standalone card.
   ============================================================================= */
.tx-record-list .rz-datalist-data {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.tx-record-list .rz-datalist-item {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}

.tx-record-card {
    background: var(--rz-card-background-color, #fff);
    border: 1px solid var(--rz-base-300, #e7e5e4);
    border-radius: 12px;
    padding: 0.875rem 1rem;
}

.tx-record-card-clickable {
    cursor: pointer;
    transition: background-color 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}

    .tx-record-card-clickable:active {
        background: var(--rz-base-100, #f5f5f4);
    }

/* A record-card key/value row helper (optional; pages can use their own markup). */
.tx-record-field {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.15rem 0;
    font-size: 0.85rem;
}

    .tx-record-field > .tx-record-field-label {
        color: var(--rz-text-secondary-color);
        flex: 0 0 auto;
    }

    .tx-record-field > .tx-record-field-value {
        text-align: right;
        min-width: 0;
        overflow-wrap: anywhere;
    }

@media (max-width: 768px) {

    /* --- Layout: reclaim the sidebar column; body spans full width --- */
    .main-layout.rz-layout {
        grid-template-columns: 0 1fr !important;
    }

    /* --- Sidebar as an off-canvas drawer --- */
    .rz-sidebar {
        position: fixed !important;
        top: var(--app-header-height);
        left: 0;
        width: 264px !important;
        max-width: 82vw !important;
        height: calc(100dvh - var(--app-header-height)) !important;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        z-index: 1300;
        overflow-y: auto;
        box-shadow: 2px 0 14px rgba(0, 0, 0, 0.18);
    }

    .main-layout.tx-drawer-open .rz-sidebar {
        transform: translateX(0);
    }

    /* When the drawer is open, always show the labelled (expanded) menu. */
    .rz-sidebar .rz-panel-menu {
        display: flex;
        flex-direction: column;
    }

    /* Backdrop behind the open drawer. */
    .tx-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: var(--app-header-height) 0 0 0;
        background: rgba(0, 0, 0, 0.42);
        z-index: 1200;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.22s ease;
    }

    .main-layout.tx-drawer-open .tx-sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    /* --- Header: tighten spacing, keep it single-row --- */
    .app-header {
        padding: 0 6px !important;
    }

    .sidebar-header {
        padding: 8px !important;
    }

    /* Breadcrumb: on a phone the full trail wraps to several lines. Show only the
       current (last) crumb — navigation up is via the drawer / browser back. */
    .tx-breadcrumbs .rz-breadcrumb-item:not(:last-child) {
        display: none;
    }

    .tx-breadcrumbs .rz-breadcrumb-item:last-child::before {
        display: none;
    }

    .tx-breadcrumbs {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 46vw;
    }

    /* --- Page frame: less horizontal padding, smaller titles --- */
    .basePage.rz-px-8,
    .basePage {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .page-title-row {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    .page-title-row.rz-text-h3,
    .basePage .rz-text-h3,
    .basePage h1 {
        font-size: 1.5rem !important;
        line-height: 1.2 !important;
    }

    /* --- Segmented controls (RadzenSelectBar + MudToggleGroup .fui-button-group) ---
       On phones these overflowed / overlapped: each segment carried ~1rem side padding and the group
       didn't shrink. Make the group take full width, let segments share it and shrink (min-width:0),
       and cut the padding + font so a 3–4 segment control fits one row. */
    .rz-selectbar,
    .fui-button-group.mud-toggle-group {
        display: flex !important;
        width: 100% !important;
        flex-wrap: wrap;
        gap: 0.15rem;
        padding: 0.15rem !important;
    }

    .rz-selectbar .rz-button {
        flex: 1 1 0;
        min-width: 0;
        padding: 0.35rem 0.4rem !important;
        font-size: 0.78rem !important;
    }

    .fui-button-group.mud-toggle-group > .mud-toggle-item {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        padding: 0.15rem 0.35rem !important;
        justify-content: center;
    }

        .fui-button-group .mud-button-label,
        .fui-button-group .mud-typography {
            padding: 0 0.2rem !important;
            font-size: 0.78rem !important;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    /* Two segmented controls side-by-side in one row: let them wrap onto separate rows. */
    .fui-button-group-stack {
        width: 100%;
    }

    /* --- Toolbars: let action button rows wrap and buttons shrink to content --- */
    .rz-toolbar {
        flex-wrap: wrap !important;
        height: auto !important;
    }

    /* --- Tab views (RadzenTabs) must not size to content beyond the viewport ---
       The tab panel otherwise grows to its widest child, dragging every rz-w-100 descendant (filters,
       cards) to that width. Pin it to its container so content reflows to the phone width. */
    .rz-tabview,
    .rz-tabview-panels,
    .rz-tabview-panel {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* --- Order-status timeline inside a record card: keep it within the card (scroll, don't spill) --- */
    .tx-record-card .timelineCell,
    .tx-record-card .rz-timeline {
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
    }

    /* --- 2-column field grids collapse to one column (drop the divider) --- */
    .grid-stack-2col {
        grid-template-columns: 1fr !important;
        gap: 1rem 0 !important;
    }

    .grid-stack-2col .rz-form-field:nth-child(even):not(:last-child)::after {
        display: none !important;
    }

    /* --- Construct detail RadzenSplitter → stacked panes --- */
    .rz-splitter {
        display: block !important;
        height: auto !important;
    }

    .rz-splitter .rz-splitter-pane {
        width: 100% !important;
        height: auto !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    .rz-splitter .rz-splitter-bar {
        display: none !important;
    }

    /* --- Dialogs: near full-width; neutralise fixed inline min-widths --- */
    .rz-dialog {
        width: 96vw !important;
        max-width: 96vw !important;
        min-width: 0 !important;
    }

    .rz-dialog .rz-card,
    .rz-dialog form,
    .rz-dialog .rz-stack {
        min-width: 0 !important;
    }

    /* Dialog form columns use fixed Size=n (no responsive variant) → they cram in a ~96vw dialog.
       Stack them full-width on phones. */
    .rz-dialog [class*="rz-col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* --- Data grids: never push the page wider than the viewport; scroll inside --- */
    .rz-data-grid,
    .rz-datatable {
        max-width: 100% !important;
    }

    .rz-data-grid-data,
    .rz-datatable-data {
        overflow-x: auto !important;
    }

    /* Keep the body from ever scrolling sideways (wide content scrolls internally). */
    .rz-body.main-body-container {
        overflow-x: hidden;
        max-width: 100vw;
    }
}