/* ═══════════════════════════════════════════════════════════
   Maintix — Mobile responsive UI (Master Data, workflow, notifications)
   UI-only overrides. Load after maintix-bento.css.
   ═══════════════════════════════════════════════════════════ */

/* ── Workflow status / tracking bar ──
   app.css sets grid-template-columns / flex-wrap on .workflow-strip at
   1100/860/768px which fights the bento horizontal stepper and causes overlap. */

/* Stepper card must contain the strip — never expand the page */
.maintix-bento-shell .workflow-stepper-card.portal-card,
.maintix-bento-shell .portal-card:has(> .maintix-workflow-stepper),
.maintix-bento-shell .portal-card:has(> .workflow-strip) {
    overflow: hidden;
    max-width: 100%;
    min-width: 0;
}

.maintix-bento-shell .workflow-strip.maintix-workflow-stepper,
.workflow-strip.maintix-workflow-stepper {
    grid-template-columns: none !important;
    /* Critical: default min-width:auto lets steps inflate the page */
    min-width: 0 !important;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 1100px) {
    .maintix-bento-shell .workflow-strip.maintix-workflow-stepper,
    .workflow-strip.maintix-workflow-stepper {
        display: grid !important;
        grid-auto-flow: column;
        grid-auto-columns: minmax(92px, max-content);
        grid-template-columns: none !important;
        flex-wrap: nowrap !important;
        align-items: start;
        overflow-x: auto;
        overflow-y: hidden;
        min-width: 0 !important;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .maintix-bento-shell .workflow-strip.maintix-workflow-stepper::before,
    .workflow-strip.maintix-workflow-stepper::before {
        display: block;
        top: 2.05rem;
        left: 2.4rem;
        right: 2.4rem;
    }

    .maintix-bento-shell .workflow-strip.maintix-workflow-stepper.workflow-strip-compact,
    .workflow-strip.maintix-workflow-stepper.workflow-strip-compact {
        grid-auto-columns: minmax(120px, max-content);
    }
}

@media (max-width: 860px) {
    .maintix-bento-shell .workflow-strip.maintix-workflow-stepper,
    .workflow-strip.maintix-workflow-stepper {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0;
        padding: 1rem 0.85rem 0.9rem;
        grid-template-columns: none !important;
        overflow-x: auto;
        overflow-y: hidden;
        min-width: 0 !important;
        max-width: 100%;
        width: 100%;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }

    .maintix-bento-shell .workflow-strip.maintix-workflow-stepper .workflow-step,
    .workflow-strip.maintix-workflow-stepper .workflow-step {
        flex: 0 0 auto;
        width: 78px;
        min-width: 78px;
        max-width: 78px;
        scroll-snap-align: start;
        background: transparent;
    }

    .maintix-bento-shell .workflow-strip.maintix-workflow-stepper.workflow-strip-compact .workflow-step,
    .workflow-strip.maintix-workflow-stepper.workflow-strip-compact .workflow-step {
        width: 110px;
        min-width: 110px;
        max-width: 110px;
    }

    .maintix-bento-shell .workflow-badge,
    .workflow-strip.maintix-workflow-stepper .workflow-badge {
        width: 30px;
        height: 30px;
        border-radius: 11px;
        font-size: 0.72rem;
        box-shadow: 0 0 0 5px #ffffff;
    }

    .maintix-bento-shell .workflow-badge.current {
        box-shadow: 0 0 0 5px rgba(83, 147, 203, 0.14), 0 8px 16px rgba(83, 147, 203, 0.2);
        animation: none;
    }

    .maintix-bento-shell .workflow-badge.current::after {
        display: none;
    }

    .maintix-bento-shell .workflow-step-label,
    .maintix-bento-shell .workflow-step span:last-child,
    .workflow-strip.maintix-workflow-stepper .workflow-step span:last-child {
        width: 100%;
        max-width: 100%;
        font-size: 0.64rem;
        line-height: 1.2;
        word-break: break-word;
        hyphens: auto;
    }

    .maintix-bento-shell .workflow-strip.maintix-workflow-stepper::before,
    .workflow-strip.maintix-workflow-stepper::before {
        top: 1.85rem;
        left: 2rem;
        right: 2rem;
        height: 2px;
    }

    .maintix-bento-shell .workflow-strip.workflow-terminal {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        overflow: visible;
    }
}

/* ── Master Data: header / filters / buttons ── */

@media (max-width: 768px) {
    .maintix-bento-shell .master-panel {
        padding: 0.85rem;
        overflow: visible;
    }

    .maintix-bento-shell .master-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        margin-bottom: 0.85rem;
    }

    .maintix-bento-shell .master-header > .d-flex,
    .maintix-bento-shell .master-header .d-flex.gap-3,
    .maintix-bento-shell .master-header .d-flex.gap-2 {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100%;
        flex-wrap: wrap;
        gap: 0.55rem !important;
    }

    .maintix-bento-shell .master-header > .d-flex > .d-flex.align-items-center.gap-2:first-child,
    .maintix-bento-shell .master-header .d-flex.align-items-center.gap-2 {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: 100%;
        flex-direction: column;
        align-items: stretch !important;
    }

    .maintix-bento-shell .master-header .portal-input,
    .maintix-bento-shell .master-header .portal-select,
    .maintix-bento-shell .master-header .form-control,
    .maintix-bento-shell .master-header button,
    .maintix-bento-shell .master-header .btn-outline,
    .maintix-bento-shell .master-header .btn-submit,
    .maintix-bento-shell .master-header .pem-btn {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    .maintix-bento-shell .master-header .border.p-1.rounded.bg-white {
        width: 100%;
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.45rem;
    }

    .maintix-bento-shell .master-header .border.p-1.rounded.bg-white .form-control {
        max-width: 100% !important;
    }

    .maintix-bento-shell .portal-alert {
        word-break: break-word;
        overflow-wrap: anywhere;
        white-space: normal !important;
        max-width: 100%;
    }

    /* Issue Items filters + form */
    .maintix-bento-shell .tech-master-selector .portal-input,
    .maintix-bento-shell .tech-master-form-row .portal-input,
    .maintix-bento-shell .tech-master-form-row .portal-select,
    .maintix-bento-shell .tech-master-form-row button,
    .maintix-bento-shell .tech-type-select,
    .maintix-bento-shell .tech-qty-input,
    .maintix-bento-shell .tech-uom-select {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .maintix-bento-shell .d-flex.gap-2.align-items-center.mb-2 {
        flex-direction: column;
        align-items: stretch !important;
    }

    .maintix-bento-shell .d-flex.gap-2.align-items-center.mb-2 .portal-input,
    .maintix-bento-shell .d-flex.gap-2.align-items-center.mb-2 .portal-select,
    .maintix-bento-shell .d-flex.gap-2.align-items-center.mb-2 button {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Pagination footer */
    .maintix-bento-shell .master-panel > .d-flex.justify-content-between.align-items-center.mt-3 {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.75rem;
        text-align: center;
    }

    .maintix-bento-shell .master-panel > .d-flex.justify-content-between.align-items-center.mt-3 > .d-flex {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .maintix-bento-shell .master-panel > .d-flex.justify-content-between.align-items-center.mt-3 .btn-outline {
        flex: 1 1 auto;
        min-height: 40px;
    }

    /* Workflow assignment form */
    .maintix-bento-shell .vendor-form-container {
        padding: 1rem !important;
    }

    .maintix-bento-shell .vendor-form-container .mt-4.d-flex {
        flex-direction: column-reverse;
        align-items: stretch !important;
    }

    .maintix-bento-shell .vendor-form-container .mt-4.d-flex button {
        width: 100%;
    }

    /* Vendor services popover stays in-card on mobile */
    .maintix-bento-shell .vendor-services-popover.services-popover {
        position: static !important;
        width: 100%;
        max-width: 100%;
        margin-top: 0.5rem;
    }
}

/* ── List data: keep real tables on mobile (no card transform) ── */

@media (max-width: 860px) {
    .maintix-bento-shell .table-wrap,
    .maintix-bento-shell .meter-table-wrap,
    .maintix-bento-shell .notification-grid-wrap,
    .maintix-bento-shell .bills-grid-wrap,
    .maintix-bento-shell .registry-grid-host {
        display: flex !important;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        max-height: var(--maintix-list-max-height, calc(100vh - 11.5rem));
        min-height: 0;
        -webkit-overflow-scrolling: touch;
    }

    .maintix-bento-shell .table-wrap:has(> .rz-data-grid),
    .maintix-bento-shell .meter-table-wrap:has(> .rz-data-grid),
    .maintix-bento-shell .notification-grid-wrap:has(> .rz-data-grid),
    .maintix-bento-shell .bills-grid-wrap:has(> .rz-data-grid),
    .maintix-bento-shell .registry-grid-host {
        overflow: hidden;
    }

    .maintix-bento-shell .table-wrap:not(:has(> .rz-data-grid)),
    .maintix-bento-shell .meter-table-wrap:not(:has(> .rz-data-grid)),
    .maintix-bento-shell .notification-grid-wrap:not(:has(> .rz-data-grid)),
    .maintix-bento-shell .bills-grid-wrap:not(:has(> .rz-data-grid)) {
        overflow: auto;
    }

    .maintix-bento-shell .master-table.master-mobile-table,
    .master-table.master-mobile-table,
    .maintix-bento-shell .rz-data-grid,
    .maintix-bento-shell .rz-grid-table {
        min-width: 640px;
    }

    /* Master HTML tables without .table-wrap still scroll horizontally + vertically */
    .maintix-bento-shell .portal-card:has(> .master-table),
    .maintix-bento-shell .portal-card:has(> .master-table.master-mobile-table),
    .maintix-bento-shell section.master-panel:has(> .master-table),
    .maintix-bento-shell .master-body:has(> .master-table) {
        /* scroll handled by .table-wrap when present */
    }

    .maintix-bento-shell .master-table.master-mobile-table thead,
    .master-table.master-mobile-table thead {
        display: table-header-group;
    }

    .maintix-bento-shell .rz-pager,
    .maintix-bento-shell .rz-data-grid .rz-pager {
        /* detailed layout in project-wide mobile polish below */
        gap: 0.5rem;
    }

    /* Legacy mobile card lists — permanently off */
    .pem-mobile-card-list,
    .pem-mobile-card-list.mobile-only,
    .mobile-request-list,
    .maintix-notifications-mobile {
        display: none !important;
    }
}

/* ── Notifications (bell + page) ── */

@media (max-width: 860px) {
    .notification-menu {
        position: fixed !important;
        top: 3.75rem !important;
        right: 0.75rem !important;
        left: 0.75rem !important;
        width: auto !important;
        max-width: none !important;
        max-height: min(70vh, 28rem);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .notification-menu-body {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .notification-menu-header {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .notification-menu-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .notification-menu-item {
        align-items: stretch;
        text-align: left;
    }

    .notification-item-top {
        flex-wrap: wrap;
        gap: 0.25rem 0.5rem;
    }

    .maintix-bento-shell .maintix-notifications-page .portal-card-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.85rem;
        padding: 1rem;
    }

    .maintix-bento-shell .maintix-notifications-page .notification-filters {
        width: 100%;
        flex-direction: column;
    }

    .maintix-bento-shell .maintix-notifications-page .notification-filters .form-input {
        width: 100%;
        min-width: 0;
    }

    .maintix-bento-shell .maintix-notifications-page .notification-grid-wrap {
        margin: 0.85rem;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
    }
}

@media (hover: none) and (pointer: coarse) {
    .maintix-bento-shell .master-header .btn-submit,
    .maintix-bento-shell .master-header .btn-outline,
    .maintix-bento-shell .master-table .btn-link,
    .maintix-bento-shell .master-table .btn-icon {
        min-height: 40px;
    }
}

/* ═══════════════════════════════════════════════════════════
   PEM (non–Petty Cash) — mobile filter/toolbars (tables only)
   Excludes .pc-module / .pc-dashboard
   ═══════════════════════════════════════════════════════════ */

.pem-mobile-card-list {
    display: none !important;
}

@media (max-width: 860px) {
    /* Meter / Expense / Audit toolbars */
    .maintix-bento-shell .pem-meter-list-panel .master-header,
    .maintix-bento-shell .pem-workflow-panel .master-header,
    .maintix-bento-shell .pem-expense-panel .master-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .maintix-bento-shell .pem-meter-list-panel .meter-list-actions,
    .maintix-bento-shell .pem-workflow-actions,
    .maintix-bento-shell .pem-expense-panel .pem-active-bar,
    .maintix-bento-shell .pem-search-bar,
    .maintix-bento-shell .meter-filter-bar {
        width: 100%;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.55rem !important;
    }

    .maintix-bento-shell .pem-meter-list-panel .meter-list-actions .pem-btn,
    .maintix-bento-shell .pem-meter-list-panel .meter-list-actions label.pem-btn,
    .maintix-bento-shell .pem-workflow-actions .pem-btn,
    .maintix-bento-shell .pem-search-bar .pem-search-input,
    .maintix-bento-shell .pem-search-bar .portal-input,
    .maintix-bento-shell .pem-search-bar .portal-select,
    .maintix-bento-shell .pem-search-bar .pem-btn,
    .maintix-bento-shell .meter-filter-bar > div,
    .maintix-bento-shell .meter-filter-bar .portal-select,
    .maintix-bento-shell .meter-filter-bar .pem-btn {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .maintix-bento-shell .pem-workflow-panel .audit-queue-filters {
        padding: 0.75rem;
    }

    .maintix-bento-shell .pem-workflow-panel .audit-queue-filters .rz-form-field,
    .maintix-bento-shell .pem-workflow-panel .audit-queue-filters .rz-dropdown,
    .maintix-bento-shell .pem-workflow-panel .audit-queue-filters .rz-textbox,
    .maintix-bento-shell .pem-workflow-panel .audit-queue-filters .rz-datepicker,
    .maintix-bento-shell .pem-workflow-panel .audit-queue-filters .rz-button,
    .maintix-bento-shell .pem-workflow-panel .audit-queue-filters .portal-input {
        width: 100% !important;
    }

    .maintix-bento-shell .pem-expense-panel .pem-form-grid,
    .maintix-bento-shell .pem-meter-list-panel .pem-form-grid {
        grid-template-columns: 1fr !important;
    }

    .maintix-bento-shell .pem-modal .pem-modal-footer,
    .maintix-bento-shell .pem-expense-panel .pem-modal-footer {
        flex-direction: column-reverse;
        gap: 0.5rem;
    }

    .maintix-bento-shell .pem-modal .pem-modal-footer .pem-btn,
    .maintix-bento-shell .pem-expense-panel .pem-modal-footer .pem-btn {
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════
   Project-wide mobile polish (Maintenance + PEM)
   Excludes Petty Cash: .pc-module / .pc-dashboard
   UI-only — do not alter backend / C# logic.
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 860px) {
    /* Page / card shell: prevent horizontal page bleed (not Petty Cash) */
    .maintix-bento-shell .maintix-registry-card,
    .maintix-bento-shell .pem-expense-panel,
    .maintix-bento-shell .pem-meter-list-panel,
    .maintix-bento-shell .pem-workflow-panel,
    .maintix-bento-shell .master-panel {
        max-width: 100%;
        min-width: 0;
    }

    .maintix-bento-shell.portal-page:not(:has(.pc-module)):not(:has(.pc-dashboard)),
    .maintix-bento-shell .portal-page:not(:has(.pc-module)):not(:has(.pc-dashboard)) {
        overflow-x: clip;
    }

    /* Detail views: never let wide stepper/tables shift the whole page left */
    .maintix-bento-shell:not(:has(.pc-module)):not(:has(.pc-dashboard)) .portal-main {
        overflow-x: clip;
        max-width: 100%;
    }

    .maintix-bento-shell .detail-stack,
    .maintix-bento-shell .case-layout,
    .maintix-bento-shell .case-main,
    .maintix-bento-shell .case-sidebar,
    .maintix-bento-shell .issue-card,
    .maintix-bento-shell .portal-card,
    .maintix-bento-shell .approval-body {
        max-width: 100%;
        min-width: 0;
    }

    .maintix-bento-shell .issue-card-top {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .maintix-bento-shell .issue-card-top .status-badge {
        max-width: 100%;
        white-space: normal;
        text-align: center;
        line-height: 1.25;
    }

    /* ── Request Registry filters (not Petty Cash) ── */
    .maintix-bento-shell .maintix-registry-card .filter-bar {
        padding: 0.75rem !important;
    }

    .maintix-bento-shell .maintix-registry-card .filter-bar > .d-flex,
    .maintix-bento-shell .maintix-registry-card .filter-bar .d-flex.flex-wrap {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.65rem !important;
        width: 100%;
    }

    .maintix-bento-shell .maintix-registry-card .filter-group,
    .maintix-bento-shell .maintix-registry-card .location-filter,
    .maintix-bento-shell .maintix-registry-card .search-input,
    .maintix-bento-shell .maintix-registry-card .filter-bar .form-input,
    .maintix-bento-shell .maintix-registry-card .filter-bar select,
    .maintix-bento-shell .maintix-registry-card .filter-bar input,
    .maintix-bento-shell .maintix-registry-card .search-container,
    .maintix-bento-shell .maintix-registry-card .search-container input {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        box-sizing: border-box;
    }

    .maintix-bento-shell .maintix-registry-card .complaint-queue-mode-tabs {
        display: flex !important;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .maintix-bento-shell .maintix-registry-card .complaint-queue-mode-tab {
        flex: 1 1 auto;
        text-align: center;
        white-space: nowrap;
        min-height: 40px;
    }

    .maintix-bento-shell .maintix-registry-card .registry-actions {
        gap: 0.4rem;
        justify-content: flex-start;
    }

    .maintix-bento-shell .maintix-registry-card .registry-icon-action {
        min-width: 40px;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* ── Case detail / forms / dense tables ── */
    .maintix-bento-shell .case-layout {
        flex-direction: column !important;
        gap: 0.85rem;
    }

    .maintix-bento-shell .case-sidebar {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .maintix-bento-shell .case-header,
    .maintix-bento-shell .approval-issue-top {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem;
    }

    .maintix-bento-shell .case-header-actions {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .maintix-bento-shell .case-header-actions > *,
    .maintix-bento-shell .case-header-actions .btn-outline,
    .maintix-bento-shell .case-header-actions .btn-approval-action,
    .maintix-bento-shell .case-header-actions .btn-verify-action,
    .maintix-bento-shell .case-header-actions .btn-submit,
    .maintix-bento-shell .case-header-actions .pem-btn,
    .maintix-bento-shell .case-header-actions .approval-select,
    .maintix-bento-shell .case-header-actions select {
        flex: 1 1 auto;
        min-width: min(100%, 9rem);
        min-height: 40px;
    }

    .maintix-bento-shell .sidebar-card,
    .maintix-bento-shell .audit-history-card {
        max-width: 100%;
        overflow: hidden;
    }

    .maintix-bento-shell .audit-timeline-scroll {
        max-height: min(50vh, 22rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Assessment / comparison / quote tables: own horizontal scroll
       (never put overflow-x on .case-main — that scrolls the whole detail body) */
    .maintix-bento-shell .comparison-container,
    .maintix-bento-shell .portal-card:has(> .assessment-table),
    .maintix-bento-shell .portal-card:has(.comparison-table),
    .maintix-bento-shell .approval-body:has(.assessment-table),
    .maintix-bento-shell .assess-items-block,
    .maintix-bento-shell .issue-card .assess-items-block,
    .maintix-bento-shell .table-scroll,
    .maintix-bento-shell .assessment-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        min-width: 0;
    }

    .maintix-bento-shell table.assessment-table,
    .maintix-bento-shell table.assess-items-table,
    .maintix-bento-shell table.comparison-table,
    .maintix-bento-shell table.quote-table {
        min-width: 480px;
        width: 100%;
    }

    /* ── Modals / drawers ── */
    .maintix-bento-shell .pem-modal,
    .maintix-bento-shell .pem-modal.wide,
    .maintix-bento-shell .pem-modal.engineer-modal,
    .maintix-bento-shell .pem-modal.user-region-modal,
    .maintix-bento-shell .pem-modal.user-maintenance-group-modal,
    .maintix-bento-shell .maintix-issue-modal,
    .maintix-bento-shell .assessment-modal-wide,
    .maintix-bento-shell .approval-modal,
    .maintix-bento-shell .maintix-quote-modal {
        width: min(100vw - 1rem, 100%) !important;
        max-width: min(100vw - 1rem, 40rem) !important;
        max-height: min(92vh, 100%);
        margin: 0.5rem auto;
    }

    .maintix-bento-shell .pem-modal-overlay,
    .maintix-bento-shell .maintix-modal-overlay {
        padding: 0.5rem;
        align-items: flex-start;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .maintix-bento-shell .pem-modal-body,
    .maintix-bento-shell .maintix-modal-body,
    .maintix-bento-shell .approval-body {
        max-height: min(70vh, 32rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .maintix-bento-shell .pem-modal-footer .pem-btn,
    .maintix-bento-shell .pem-modal-footer .btn-submit,
    .maintix-bento-shell .pem-modal-footer .btn-outline,
    .maintix-bento-shell .pem-modal-footer .primary-button,
    .maintix-bento-shell .pem-modal-footer .secondary-button,
    .maintix-bento-shell .maintix-modal-footer .pem-btn,
    .maintix-bento-shell .maintix-modal-footer .btn-submit,
    .maintix-bento-shell .maintix-modal-footer .btn-outline,
    .maintix-bento-shell .approval-footer .btn-submit,
    .maintix-bento-shell .approval-footer .btn-cancel {
        width: 100%;
        min-height: 42px;
    }

    .timeline-drawer {
        width: min(100vw, 440px) !important;
        max-width: 100vw !important;
    }

    .timeline-drawer-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ── PEM: kill fixed min-widths on filters / grids ── */
    .maintix-bento-shell .pem-expense-panel .pem-search-bar [style*="min-width"],
    .maintix-bento-shell .pem-meter-list-panel .meter-filter-bar [style*="min-width"],
    .maintix-bento-shell .pem-expense-panel .pem-search-bar input,
    .maintix-bento-shell .pem-meter-list-panel .meter-filter-bar input,
    .maintix-bento-shell .pem-expense-panel .pem-search-bar > div,
    .maintix-bento-shell .pem-meter-list-panel .meter-filter-bar > div {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
    }

    .maintix-bento-shell .pem-expense-panel .select-meter-table,
    .maintix-bento-shell .select-meter-table {
        min-width: 720px !important;
    }

    .maintix-bento-shell .select-meter-col-variance {
        width: 150px !important;
        max-width: 150px !important;
    }

    .maintix-bento-shell .select-meter-col-actions {
        width: 120px !important;
        max-width: 130px !important;
    }

    .maintix-bento-shell .pem-meter-list-panel .rz-data-grid,
    .maintix-bento-shell .utility-meter-grid {
        min-width: 0 !important;
        width: 100% !important;
    }

    .maintix-bento-shell .pem-expense-panel .variance-wrap,
    .maintix-bento-shell .pem-workflow-panel .variance-wrap {
        min-width: 0 !important;
        max-width: 100%;
        width: 100%;
    }

    .maintix-bento-shell .pem-expense-panel .bill-action-bar,
    .maintix-bento-shell .pem-workflow-panel .bill-action-bar,
    .maintix-bento-shell .pem-meter-list-panel .meter-row-actions {
        flex-wrap: wrap !important;
        justify-content: flex-end;
        gap: 0.35rem !important;
        max-width: 100%;
    }

    .maintix-bento-shell .pem-expense-panel .bill-action-icon,
    .maintix-bento-shell .pem-workflow-panel .bill-action-icon,
    .maintix-bento-shell .pem-meter-list-panel .meter-row-actions .pem-btn-icon,
    .maintix-bento-shell .pem-expense-panel .select-meter-col-actions .pem-btn-icon {
        min-width: 40px;
        min-height: 40px;
        width: 40px;
        height: 40px;
    }

    .maintix-bento-shell .pem-expense-panel .pem-active-bar,
    .maintix-bento-shell .pem-expense-panel .pem-active-bar > * {
        width: 100%;
        max-width: 100%;
        min-width: 0 !important;
    }

    .maintix-bento-shell .pem-expense-panel .pem-form-grid,
    .maintix-bento-shell .pem-meter-list-panel .pem-form-grid,
    .maintix-bento-shell .pem-workflow-panel .pem-form-grid {
        grid-template-columns: 1fr !important;
    }

    .maintix-bento-shell .pem-tile-grid {
        grid-template-columns: 1fr !important;
    }

    /* Expandable bill rows (audit / finance) */
    .maintix-bento-shell .pem-workflow-panel .rz-data-row-expansion,
    .maintix-bento-shell .pem-workflow-panel .rz-detail-template {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .maintix-bento-shell .pem-workflow-panel .rz-data-row-expansion > div,
    .maintix-bento-shell .pem-workflow-panel .rz-detail-template > div {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.65rem !important;
    }

    /* Custom PEM pagers (audit / finance / select-meter) */
    .maintix-bento-shell .pem-list-pager {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.55rem !important;
        text-align: center;
        width: 100%;
    }

    .maintix-bento-shell .pem-list-pager > div {
        width: 100%;
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center !important;
        align-items: center;
        gap: 0.4rem;
    }

    .maintix-bento-shell .pem-expense-panel .d-flex.justify-content-between.align-items-center,
    .maintix-bento-shell .pem-workflow-panel .d-flex.justify-content-between.align-items-center {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.65rem;
        text-align: center;
    }

    .maintix-bento-shell .pem-expense-panel .d-flex.justify-content-between.align-items-center > .d-flex,
    .maintix-bento-shell .pem-workflow-panel .d-flex.justify-content-between.align-items-center > div {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 0.4rem;
    }

    /* Fault draft / create request editors */
    .maintix-bento-shell .fault-draft-editor,
    .maintix-bento-shell .request-create-form,
    .maintix-bento-shell .pem-form-group {
        max-width: 100%;
    }

    .maintix-bento-shell .fault-draft-editor .d-flex,
    .maintix-bento-shell .request-create-form .d-flex.gap-2,
    .maintix-bento-shell .request-create-form .d-flex.gap-3 {
        flex-wrap: wrap;
    }

    /* Dashboard tiles (non-PC) */
    .maintix-bento-shell .maintix-stat-grid,
    .maintix-bento-shell .pem-dashboard-grid {
        grid-template-columns: 1fr !important;
    }

    /* Touch-friendly master table action links */
    .maintix-bento-shell .master-table .btn-link,
    .maintix-bento-shell .master-table .btn-icon,
    .maintix-bento-shell .master-table .pem-btn-icon,
    .maintix-bento-shell .portal-table .btn-link {
        min-height: 40px;
        min-width: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.35rem 0.55rem;
    }

    /* Radzen pager buttons */
    .maintix-bento-shell .rz-pager .rz-pager-element,
    .maintix-bento-shell .rz-pager button {
        min-height: 36px;
        min-width: 36px;
    }

    /* Ensure select-meter wrap participates in sticky list scroll */
    .maintix-bento-shell .select-meter-table-wrap.table-wrap {
        max-height: var(--maintix-list-max-height, calc(100vh - 11.5rem));
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 960px) {
    /* Topbar: icon-only hub, title never collides with actions */
    .maintix-topbar.portal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.45rem;
        flex-wrap: nowrap;
        min-width: 0;
    }

    .maintix-topbar-title.portal-header-title {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
    }

    .maintix-topbar-title.portal-header-title > div {
        min-width: 0;
        overflow: hidden;
    }

    .maintix-topbar-label.portal-header-label {
        display: none;
    }

    .maintix-topbar h1,
    .maintix-topbar-page-title {
        font-size: 0.95rem !important;
        line-height: 1.2;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .maintix-topbar-actions.portal-header-actions {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        min-width: 0;
    }

    .maintix-hub-button.maintix-hub-button-topbar {
        max-width: 2.5rem !important;
        min-width: 2.5rem !important;
        min-height: 2.5rem !important;
        width: 2.5rem !important;
        padding: 0 !important;
        justify-content: center;
        border-radius: 12px;
        gap: 0;
        overflow: hidden;
        font-size: 0 !important;
    }

    .maintix-hub-button.maintix-hub-button-topbar .maintix-hub-button-label {
        display: none !important;
    }

    .maintix-hub-button.maintix-hub-button-topbar i {
        font-size: 0.9rem !important;
        line-height: 1;
    }
}

@media (max-width: 860px) {
    :root {
        --maintix-list-max-height: min(52vh, calc(100dvh - 17rem));
    }

    /* Topbar: icon-only hub, title never collides with actions */
    .maintix-bento-shell .rz-data-grid {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100%;
    }

    .maintix-bento-shell .rz-data-grid > .rz-data-grid-data {
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .maintix-bento-shell .rz-data-grid .rz-grid-table,
    .maintix-bento-shell .registry-data-grid .rz-grid-table,
    .maintix-bento-shell .utility-meter-grid .rz-grid-table,
    .maintix-bento-shell .bills-grid-wrap .rz-grid-table,
    .maintix-bento-shell .pem-workflow-panel .rz-grid-table {
        width: max-content !important;
        min-width: 920px !important;
        table-layout: auto !important;
    }

    .maintix-bento-shell .registry-data-grid .rz-grid-table {
        min-width: 1120px !important;
    }

    .maintix-bento-shell .utility-meter-grid .rz-grid-table {
        min-width: 1100px !important;
    }

    .maintix-bento-shell .rz-grid-table th,
    .maintix-bento-shell .rz-grid-table td {
        white-space: nowrap;
        vertical-align: middle;
    }

    /* HTML master / select-meter tables */
    .maintix-bento-shell .master-table.master-mobile-table,
    .maintix-bento-shell .select-meter-table {
        width: max-content !important;
        min-width: 920px !important;
    }

    .maintix-bento-shell .select-meter-table {
        min-width: 980px !important;
    }

    .maintix-bento-shell .table-wrap:not(:has(> .rz-data-grid)),
    .maintix-bento-shell .select-meter-table-wrap {
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* ── Pager: zero overlap on mobile ──
       Row 1 = page nav only. Hide page-size dropdown (avoids collision). */
    .maintix-bento-shell .rz-data-grid > .rz-pager,
    .maintix-bento-shell .rz-pager {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        align-content: center !important;
        gap: 0.25rem !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0.7rem 0.5rem !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    .maintix-bento-shell .rz-pager > .rz-pager-first,
    .maintix-bento-shell .rz-pager > .rz-pager-prev,
    .maintix-bento-shell .rz-pager > .rz-pager-numbers,
    .maintix-bento-shell .rz-pager > .rz-pager-next,
    .maintix-bento-shell .rz-pager > .rz-pager-last,
    .maintix-bento-shell .rz-pager .rz-pager-first,
    .maintix-bento-shell .rz-pager .rz-pager-prev,
    .maintix-bento-shell .rz-pager .rz-pager-numbers,
    .maintix-bento-shell .rz-pager .rz-pager-next,
    .maintix-bento-shell .rz-pager .rz-pager-last {
        order: 1 !important;
        position: static !important;
        float: none !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        opacity: 1 !important;
        color: #334155 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .maintix-bento-shell .rz-pager .rz-pager-numbers {
        flex-wrap: wrap !important;
        gap: 0.15rem !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .maintix-bento-shell .rz-pager .rz-pager-element,
    .maintix-bento-shell .rz-pager button,
    .maintix-bento-shell .rz-pager .rz-button,
    .maintix-bento-shell .rz-pager a {
        min-height: 36px !important;
        min-width: 36px !important;
        margin: 0 !important;
        opacity: 1 !important;
        position: static !important;
    }

    /* Hide page-size control on mobile — this was overlapping the next/last arrows */
    .maintix-bento-shell .rz-pager .rz-pager-sizes,
    .maintix-bento-shell .rz-data-grid > .rz-pager .rz-pager-sizes,
    .maintix-bento-shell .rz-data-grid > .rz-pager > .rz-dropdown,
    .maintix-bento-shell .rz-data-grid > .rz-pager > .rz-select,
    .maintix-bento-shell .rz-pager > .rz-dropdown,
    .maintix-bento-shell .rz-pager > .rz-select {
        display: none !important;
    }

    .maintix-bento-shell .rz-pager .rz-pager-summary,
    .maintix-bento-shell .rz-data-grid > .rz-pager .rz-pager-summary {
        order: 3 !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        margin: 0.25rem 0 0 !important;
        text-align: center !important;
        font-size: 0.78rem !important;
        color: #64748b !important;
        white-space: normal !important;
    }

    /* ── Billing trend modal ── */
    .maintix-bento-shell .pem-trend-modal,
    .pem-trend-modal {
        display: flex !important;
        flex-direction: column !important;
        max-height: min(92dvh, 92vh) !important;
        width: min(100vw - 1rem, 820px) !important;
        max-width: min(100vw - 1rem, 820px) !important;
        overflow: hidden !important;
    }

    .maintix-bento-shell .pem-trend-modal .pem-modal-body,
    .pem-trend-modal .pem-modal-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 1rem !important;
    }

    .maintix-bento-shell .pem-trend-modal .pem-modal-footer,
    .pem-trend-modal .pem-modal-footer {
        flex: 0 0 auto !important;
        width: 100%;
    }

    .maintix-bento-shell .pem-trend-chart-wrap,
    .pem-trend-chart-wrap {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.35rem;
        margin-bottom: 0.35rem;
    }

    .maintix-bento-shell .pem-trend-chart-wrap .rz-chart,
    .pem-trend-chart-wrap .rz-chart {
        min-width: 560px;
    }

    /* ── Audit / Finance filters ── */
    .maintix-bento-shell .pem-workflow-panel .audit-queue-filters {
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
        padding: 0.75rem !important;
    }

    .maintix-bento-shell .pem-workflow-panel .audit-queue-filters .rz-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.65rem !important;
        margin: 0 !important;
    }

    .maintix-bento-shell .pem-workflow-panel .audit-queue-filters .rz-col,
    .maintix-bento-shell .pem-workflow-panel .audit-queue-filters [class*="rz-col"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        padding: 0 !important;
    }

    .maintix-bento-shell .pem-workflow-panel .audit-queue-filters .rz-form-field {
        width: 100%;
        display: block;
    }

    .maintix-bento-shell .pem-workflow-panel .audit-queue-filters .rz-datepicker,
    .maintix-bento-shell .pem-workflow-panel .audit-queue-filters .rz-dropdown,
    .maintix-bento-shell .pem-workflow-panel .audit-queue-filters .rz-textbox,
    .maintix-bento-shell .pem-workflow-panel .audit-queue-filters .portal-input,
    .maintix-bento-shell .pem-workflow-panel .audit-queue-filters .rz-form-field-content {
        width: 100% !important;
        max-width: 100% !important;
    }

    .maintix-bento-shell .pem-workflow-panel .audit-queue-filters .rz-datepicker .rz-inputtext,
    .maintix-bento-shell .pem-workflow-panel .audit-queue-filters .rz-form-field-label {
        max-width: calc(100% - 2.5rem);
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .maintix-bento-shell .pem-workflow-panel .audit-queue-filters .rz-datepicker-trigger {
        flex-shrink: 0;
    }

    /* Expense active meter bar + bill actions */
    .maintix-bento-shell .pem-expense-panel .pem-active-bar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.65rem;
    }

    .maintix-bento-shell .pem-expense-panel .pem-active-bar-info,
    .maintix-bento-shell .pem-expense-panel .pem-active-bar-info h3,
    .maintix-bento-shell .pem-expense-panel .pem-active-bar-info p {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .maintix-bento-shell .pem-expense-panel .pem-active-bar-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.45rem;
        width: 100%;
    }

    .maintix-bento-shell .pem-expense-panel .pem-active-bar-actions .pem-btn {
        flex: 1 1 auto;
        min-height: 40px;
    }

    .maintix-bento-shell .pem-expense-panel .pem-breadcrumbs {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 0.35rem 0.4rem !important;
        max-width: 100%;
        min-width: 0;
        overflow: visible;
    }

    .maintix-bento-shell .pem-expense-panel .pem-breadcrumb-link,
    .maintix-bento-shell .pem-expense-panel .pem-breadcrumb-current {
        max-width: 100%;
        min-width: 0;
        white-space: normal !important;
        overflow-wrap: anywhere;
        word-break: break-word;
        line-height: 1.25;
        height: auto;
        min-height: 30px;
    }

    .maintix-bento-shell .pem-expense-panel .pem-breadcrumb-current {
        flex: 1 1 auto;
    }

    .maintix-bento-shell .pem-expense-panel .pem-badge-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
        max-width: 100%;
    }

    .maintix-bento-shell .pem-expense-panel .pem-badge,
    .maintix-bento-shell .pem-expense-panel .pem-chip {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
        white-space: normal;
    }

    .maintix-bento-shell .pem-meter-list-panel .meter-filter-bar .portal-select,
    .maintix-bento-shell .pem-meter-list-panel .meter-filter-bar .pem-btn {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

@media (max-width: 520px) {
    .maintix-bento-shell .case-header-actions > * {
        flex: 1 1 100%;
        min-width: 100%;
    }

    .maintix-bento-shell .complaint-queue-mode-tab {
        font-size: 0.78rem;
        padding: 0.45rem 0.55rem;
    }

    .maintix-bento-shell .select-meter-col-actions .pem-btn {
        padding: 0.35rem 0.55rem;
        font-size: 0.78rem;
    }

    .maintix-bento-shell .rz-pager {
        font-size: 0.78rem;
    }

    .maintix-topbar h1,
    .maintix-topbar-page-title {
        font-size: 0.88rem !important;
    }
}