/* Admin-only final mobile/tablet responsiveness layer.
   Loaded after legacy/admin page styles so every admin screen shares one predictable viewport contract. */

.portal-role-admin,
.portal-role-admin .app-shell,
.portal-role-admin .app-shell > main,
.portal-role-admin .content,
.portal-role-admin .content > *,
.portal-role-admin .panel,
.portal-role-admin .table-panel,
.portal-role-admin .panel-header,
.portal-role-admin .table-toolbar,
.portal-role-admin form,
.portal-role-admin fieldset {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.portal-role-admin {
    overflow-x: hidden;
}

.portal-role-admin img,
.portal-role-admin svg,
.portal-role-admin canvas,
.portal-role-admin video,
.portal-role-admin iframe {
    max-width: 100%;
}

.portal-role-admin .panel-table-scroll,
.portal-role-admin .table-scroll,
.portal-role-admin .portal-table-scroll,
.portal-role-admin .admin-management-panel,
.portal-role-admin .admin-merchant-performance-panel {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.portal-role-admin .panel-table-scroll > table,
.portal-role-admin .table-scroll > table,
.portal-role-admin .portal-table-scroll > table {
    width: max-content;
    min-width: 100%;
    table-layout: auto;
}

.portal-role-admin table th,
.portal-role-admin table td {
    vertical-align: middle;
}

.portal-role-admin table td,
.portal-role-admin table th,
.portal-role-admin .muted,
.portal-role-admin .table-toolbar-title,
.portal-role-admin .panel-header,
.portal-role-admin .admin-user-filter-banner,
.portal-role-admin .pricing-type-card,
.portal-role-admin .admin-linked-user,
.portal-role-admin .admin-shipper-mini-stats {
    overflow-wrap: anywhere;
}

@media (max-width: 1199px) {
    .portal-role-admin .app-shell > main {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        zoom: 1 !important;
    }

    .portal-role-admin .content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: clip;
        padding-bottom: max(28px, calc(18px + env(safe-area-inset-bottom))) !important;
    }

    .portal-role-admin .sidebar {
        max-height: var(--portal-viewport-height, 100dvh) !important;
        padding-bottom: max(14px, env(safe-area-inset-bottom)) !important;
        overscroll-behavior: contain;
    }

    .portal-role-admin .topbar {
        min-width: 0;
        max-width: 100%;
        padding-top: max(8px, env(safe-area-inset-top)) !important;
    }

    .portal-role-admin .topbar-title,
    .portal-role-admin .topbar-title > div,
    .portal-role-admin .topbar-actions {
        min-width: 0;
    }

    .portal-role-admin .topbar-title h1,
    .portal-role-admin .topbar-title .muted {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .portal-role-admin .grid,
    .portal-role-admin .grid-2,
    .portal-role-admin .form-grid,
    .portal-role-admin .pricing-detail-grid,
    .portal-role-admin .admin-dashboard-summary,
    .portal-role-admin .merchant-performance-summary {
        min-width: 0;
        max-width: 100%;
    }

    .portal-role-admin input,
    .portal-role-admin select,
    .portal-role-admin textarea,
    .portal-role-admin button,
    .portal-role-admin .btn {
        max-width: 100%;
        box-sizing: border-box;
    }

    .portal-role-admin input[type="file"] {
        width: 100%;
        overflow: hidden;
    }

    .portal-role-admin dialog,
    .portal-role-admin dialog.detail-dialog,
    .portal-role-admin dialog.admin-management-dialog,
    .portal-role-admin dialog.pricing-detail-dialog {
        width: min(760px, calc(100vw - 20px)) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: calc(var(--portal-viewport-height, 100dvh) - 20px) !important;
        overflow: auto;
        overscroll-behavior: contain;
    }

    .portal-role-admin dialog > *,
    .portal-role-admin dialog form,
    .portal-role-admin dialog .dialog-header,
    .portal-role-admin dialog .dialog-actions,
    .portal-role-admin dialog .form-grid,
    .portal-role-admin dialog .pricing-detail-grid {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .portal-role-admin .dialog-header {
        padding-top: max(12px, env(safe-area-inset-top)) !important;
    }

    .portal-role-admin .dialog-actions {
        padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
    }
}

@media (max-width: 980px) {
    .portal-role-admin .content {
        padding-inline: clamp(10px, 2.2vw, 18px) !important;
    }

    .portal-role-admin .topbar {
        gap: 10px;
    }

    .portal-role-admin .topbar-title {
        flex: 1 1 auto;
    }

    .portal-role-admin .topbar-actions {
        flex: 0 0 auto;
    }

    .portal-role-admin .topbar-profile-dropdown {
        width: min(230px, calc(100vw - 18px)) !important;
        max-width: calc(100vw - 18px) !important;
        right: 0 !important;
    }

    /* Generic admin panels/forms */
    .portal-role-admin .grid.grid-2,
    .portal-role-admin .grid-2 {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .portal-role-admin .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .portal-role-admin .panel-header,
    .portal-role-admin .table-toolbar,
    .portal-role-admin .admin-list-toolbar,
    .portal-role-admin .admin-orders-toolbar {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .portal-role-admin .table-toolbar-actions,
    .portal-role-admin .admin-reference-toolbar-actions,
    .portal-role-admin .admin-orders-toolbar-controls,
    .portal-role-admin .admin-order-filters,
    .portal-role-admin .admin-shipper-search-form,
    .portal-role-admin .admin-user-search-form,
    .portal-role-admin .entries-control {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Order Reports */
    .portal-role-admin .admin-orders-toolbar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
        align-items: stretch !important;
    }

    .portal-role-admin .admin-orders-toolbar > *,
    .portal-role-admin .admin-orders-toolbar .table-toolbar-title,
    .portal-role-admin .admin-orders-toolbar .table-toolbar-actions {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .portal-role-admin .admin-orders-toolbar-controls {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
        width: 100% !important;
        align-items: stretch !important;
    }

    .portal-role-admin .admin-orders-toolbar-controls > *,
    .portal-role-admin .admin-orders-toolbar-controls > form,
    .portal-role-admin .admin-orders-toolbar-controls .entries-control {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .portal-role-admin #admin-orders-bulk-cheque-form {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .portal-role-admin #admin-orders-bulk-cheque-amount,
    .portal-role-admin #admin-orders-bulk-cheque,
    .portal-role-admin #admin-orders-bulk-invoice,
    .portal-role-admin #admin-orders-bulk-settlement,
    .portal-role-admin #admin-orders-export {
        width: 100% !important;
        min-width: 0 !important;
    }

    .portal-role-admin .admin-order-filters {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
        width: 100% !important;
    }

    .portal-role-admin .admin-order-filters > *,
    .portal-role-admin .admin-order-date-field,
    .portal-role-admin .admin-order-date-field input {
        width: 100% !important;
        min-width: 0 !important;
    }

    .portal-role-admin .admin-order-date-field {
        display: grid;
        gap: 5px;
    }

    /* Manage shippers + users */
    .portal-role-admin .admin-list-toolbar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .portal-role-admin .admin-reference-toolbar-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto auto !important;
        gap: 8px !important;
        width: 100% !important;
        align-items: stretch !important;
    }

    .portal-role-admin .admin-shipper-search-form,
    .portal-role-admin .admin-user-search-form {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto auto !important;
        gap: 8px !important;
        width: 100% !important;
        grid-column: 1 / -1;
    }

    .portal-role-admin .admin-shipper-search-form input,
    .portal-role-admin .admin-user-search-form input {
        width: 100% !important;
        min-width: 0 !important;
    }

    .portal-role-admin .admin-shipper-actions,
    .portal-role-admin .status-control {
        min-width: 0;
        max-width: 100%;
    }

    .portal-role-admin .admin-user-filter-banner {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    .portal-role-admin .admin-user-filter-banner .btn-row {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Pricing */
    .portal-role-admin #pricing-configure-panel,
    .portal-role-admin .pricing-type-card,
    .portal-role-admin .pricing-legacy-card {
        min-width: 0;
        max-width: 100%;
    }

    .portal-role-admin .pricing-detail-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        padding: 14px !important;
    }

    .portal-role-admin .pricing-type-card-header,
    .portal-role-admin .pricing-detail-line {
        min-width: 0;
        max-width: 100%;
    }

    .portal-role-admin .pricing-detail-line > * {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .portal-role-admin .pricing-legacy-card {
        margin-inline: 14px !important;
    }

    /* Dashboard */
    .portal-role-admin .admin-command-banner,
    .portal-role-admin .admin-dashboard-summary,
    .portal-role-admin .merchant-performance-summary,
    .portal-role-admin .admin-merchant-performance-filters {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .portal-role-admin .admin-dashboard-summary,
    .portal-role-admin .merchant-performance-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .portal-role-admin .admin-merchant-performance-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Touch/accessibility */
    .portal-role-admin button,
    .portal-role-admin .btn,
    .portal-role-admin input,
    .portal-role-admin select,
    .portal-role-admin summary,
    .portal-role-admin .menu-button,
    .portal-role-admin .dialog-close {
        min-height: 44px;
    }

    .portal-role-admin .dialog-close {
        min-width: 44px;
    }

    .portal-role-admin .pagination {
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }

    .portal-role-admin .pagination a,
    .portal-role-admin .pagination span,
    .portal-role-admin .pagination button {
        flex: 0 0 auto;
    }
}

@media (max-width: 700px) {
    .portal-role-admin .content {
        padding-inline: 10px !important;
    }

    .portal-role-admin .panel,
    .portal-role-admin .table-panel,
    .portal-role-admin .admin-management-panel {
        border-radius: 10px !important;
    }

    .portal-role-admin .topbar {
        align-items: flex-start !important;
    }

    .portal-role-admin .topbar-title h1 {
        font-size: clamp(19px, 6vw, 25px) !important;
        line-height: 1.12;
    }

    .portal-role-admin .topbar-title .muted {
        font-size: 12px;
        line-height: 1.4;
    }

    .portal-role-admin .table-toolbar,
    .portal-role-admin .panel-header,
    .portal-role-admin .admin-list-toolbar,
    .portal-role-admin .admin-orders-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .portal-role-admin .table-toolbar-actions,
    .portal-role-admin .admin-reference-toolbar-actions,
    .portal-role-admin .admin-orders-toolbar-controls,
    .portal-role-admin .admin-order-filters,
    .portal-role-admin .admin-shipper-search-form,
    .portal-role-admin .admin-user-search-form,
    .portal-role-admin .admin-user-filter-banner .btn-row,
    .portal-role-admin .admin-shipper-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .portal-role-admin .table-toolbar-actions > *,
    .portal-role-admin .admin-reference-toolbar-actions > *,
    .portal-role-admin .admin-orders-toolbar-controls > *,
    .portal-role-admin .admin-order-filters > *,
    .portal-role-admin .admin-shipper-search-form > *,
    .portal-role-admin .admin-user-search-form > *,
    .portal-role-admin .admin-user-filter-banner .btn-row > *,
    .portal-role-admin .admin-shipper-actions > * {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        grid-column: 1 !important;
    }

    .portal-role-admin .admin-order-filters,
    .portal-role-admin .admin-orders-toolbar-controls,
    .portal-role-admin .admin-merchant-performance-filters,
    .portal-role-admin .admin-dashboard-summary,
    .portal-role-admin .merchant-performance-summary,
    .portal-role-admin .form-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .portal-role-admin .admin-summary-card {
        width: 100% !important;
        min-width: 0 !important;
    }

    .portal-role-admin input,
    .portal-role-admin select,
    .portal-role-admin textarea {
        width: 100%;
        min-width: 0;
        font-size: 16px !important;
    }

    .portal-role-admin .pricing-type-card-header,
    .portal-role-admin .pricing-detail-line {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .portal-role-admin .pricing-detail-line strong {
        width: 100%;
        text-align: left !important;
    }

    .portal-role-admin .pricing-courier-cell .btn {
        width: 100%;
        min-width: 0 !important;
    }

    .portal-role-admin table input[type="checkbox"] {
        width: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
    }
}

@media (max-width: 480px) {
    .portal-role-admin .content {
        padding-inline: 8px !important;
    }

    .portal-role-admin dialog,
    .portal-role-admin dialog.detail-dialog,
    .portal-role-admin dialog.admin-management-dialog,
    .portal-role-admin dialog.pricing-detail-dialog {
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: var(--portal-viewport-height, 100dvh) !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    .portal-role-admin .dialog-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
        width: 100%;
    }

    .portal-role-admin .dialog-actions > * {
        width: 100% !important;
        min-width: 0 !important;
    }

    .portal-role-admin .pricing-detail-grid {
        padding-inline: 10px !important;
    }

    .portal-role-admin .pricing-legacy-card {
        margin-inline: 10px !important;
    }
}

@media (max-height: 520px) and (max-width: 980px) {
    .portal-role-admin .topbar {
        position: sticky;
        top: 0;
        z-index: 30;
    }

    .portal-role-admin dialog,
    .portal-role-admin dialog.detail-dialog,
    .portal-role-admin dialog.admin-management-dialog,
    .portal-role-admin dialog.pricing-detail-dialog {
        max-height: var(--portal-viewport-height, 100dvh) !important;
        border-radius: 0 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .portal-role-admin *,
    .portal-role-admin *::before,
    .portal-role-admin *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}