/* Portal-wide frontend integrity layer (Admin + Shipper).
   Loaded last so every authenticated page gets the same safe gutters,
   width constraints and responsive behaviour without changing business logic. */

:root {
    --portal-content-gutter: 28px;
    --portal-mobile-gutter: 12px;
}

body.portal-role-admin,
body.portal-role-merchant {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

.portal-role-admin .app-shell,
.portal-role-merchant .app-shell,
.portal-role-admin .app-shell > main,
.portal-role-merchant .app-shell > main,
.portal-role-admin .content,
.portal-role-merchant .content {
    min-width: 0;
    max-width: 100%;
}

/* Keep page content away from the viewport/sidebar edge on every portal page. */
.portal-role-admin .content,
.portal-role-merchant .content {
    width: 100%;
    padding-inline: var(--portal-content-gutter) !important;
}

.portal-role-admin .topbar,
.portal-role-merchant .topbar {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding-inline: var(--portal-content-gutter) !important;
}

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

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

/* A grid/flex child with intrinsic width must never force the full page wider. */
.portal-role-admin .content > *,
.portal-role-merchant .content > *,
.portal-role-admin .grid,
.portal-role-merchant .grid,
.portal-role-admin .form-grid,
.portal-role-merchant .form-grid,
.portal-role-admin .panel,
.portal-role-merchant .panel,
.portal-role-admin .table-panel,
.portal-role-merchant .table-panel,
.portal-role-admin .panel-header,
.portal-role-merchant .panel-header,
.portal-role-admin .table-toolbar,
.portal-role-merchant .table-toolbar,
.portal-role-admin .btn-row,
.portal-role-merchant .btn-row,
.portal-role-admin .split-actions,
.portal-role-merchant .split-actions,
.portal-role-admin fieldset,
.portal-role-merchant fieldset {
    min-width: 0;
    max-width: 100%;
}

.portal-role-admin .grid > *,
.portal-role-merchant .grid > *,
.portal-role-admin .form-grid > *,
.portal-role-merchant .form-grid > *,
.portal-role-admin .panel-header > *,
.portal-role-merchant .panel-header > *,
.portal-role-admin .table-toolbar > *,
.portal-role-merchant .table-toolbar > *,
.portal-role-admin .btn-row > *,
.portal-role-merchant .btn-row > * {
    min-width: 0;
}

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

/* Inputs are allowed to shrink with their grid column instead of overflowing it. */
.portal-role-admin input,
.portal-role-merchant input,
.portal-role-admin select,
.portal-role-merchant select,
.portal-role-admin textarea,
.portal-role-merchant textarea {
    min-width: 0;
    max-width: 100%;
}

.portal-role-admin .field input,
.portal-role-merchant .field input,
.portal-role-admin .field select,
.portal-role-merchant .field select,
.portal-role-admin .field textarea,
.portal-role-merchant .field textarea {
    width: 100%;
}

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

/* Wide operational tables stay inside their own scroll area rather than shifting the page. */
.portal-role-admin .portal-table-scroll,
.portal-role-merchant .portal-table-scroll,
.portal-role-admin .panel-table-scroll,
.portal-role-merchant .panel-table-scroll,
.portal-role-admin .table-scroll,
.portal-role-merchant .table-scroll,
.portal-role-admin .report-table-view,
.portal-role-merchant .report-table-view,
.portal-role-admin .report-city-table-scroll,
.portal-role-merchant .report-city-table-scroll,
.portal-role-admin .report-mini-table,
.portal-role-merchant .report-mini-table,
.portal-role-admin .payments-ledger-panel,
.portal-role-merchant .payments-ledger-panel,
.portal-role-admin .tracking-orders-panel,
.portal-role-merchant .tracking-orders-panel,
.portal-role-admin .returns-orders-panel,
.portal-role-merchant .returns-orders-panel,
.portal-role-admin .loadsheet-history-panel,
.portal-role-merchant .loadsheet-history-panel,
.portal-role-admin .admin-management-panel {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

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

.portal-role-admin table th,
.portal-role-admin table td,
.portal-role-merchant table th,
.portal-role-merchant table td,
.portal-role-admin .muted,
.portal-role-merchant .muted,
.portal-role-admin .alert,
.portal-role-merchant .alert,
.portal-role-admin .error-list,
.portal-role-merchant .error-list {
    overflow-wrap: anywhere;
}

/* Dialogs/drawers must remain reachable even on narrow or short screens. */
.portal-role-admin dialog,
.portal-role-merchant dialog,
.portal-role-admin dialog.detail-dialog,
.portal-role-merchant dialog.detail-dialog,
.portal-role-admin dialog.admin-management-dialog,
.portal-role-admin dialog.pricing-detail-dialog,
.portal-role-merchant dialog.shipper-dialog,
.portal-role-merchant dialog.ops-side-drawer,
.portal-role-merchant dialog.return-bulk-scanner-drawer {
    max-width: calc(100vw - 24px) !important;
    max-height: calc(var(--portal-viewport-height, 100dvh) - 24px) !important;
}

.portal-role-admin dialog > *,
.portal-role-merchant dialog > *,
.portal-role-admin dialog form,
.portal-role-merchant dialog form,
.portal-role-admin dialog .form-grid,
.portal-role-merchant dialog .form-grid,
.portal-role-admin dialog .dialog-header,
.portal-role-merchant dialog .dialog-header,
.portal-role-admin dialog .dialog-actions,
.portal-role-merchant dialog .dialog-actions {
    min-width: 0;
    max-width: 100%;
}

/* Current pricing UI: cards and action rows must not leak outside the dialog/table. */
.portal-role-admin #pricing-configure-panel,
.portal-role-admin .pricing-detail-grid,
.portal-role-admin .pricing-type-card,
.portal-role-admin .pricing-type-card-body,
.portal-role-admin .pricing-type-card-header,
.portal-role-admin .pricing-detail-list,
.portal-role-admin .pricing-detail-line,
.portal-role-admin .pricing-legacy-card,
.portal-role-admin .pricing-client-table {
    min-width: 0;
    max-width: 100%;
}

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

.portal-role-admin .pricing-type-card .btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Desktop: retain the compact 75% portal density, but keep a visible content gutter. */
@media (min-width: 1200px) {
    .portal-role-admin .content,
    .portal-role-merchant .content,
    .portal-role-admin .topbar,
    .portal-role-merchant .topbar {
        padding-inline: 30px !important;
    }

    .portal-role-admin .app-shell > main,
    .portal-role-merchant .app-shell > main {
        overflow-x: clip;
    }
}

/* Tablet / small laptop: prevent two-column layouts from becoming cramped. */
@media (max-width: 1199px) {
    :root {
        --portal-content-gutter: clamp(16px, 2.4vw, 24px);
    }

    .portal-role-admin .app-shell > main,
    .portal-role-merchant .app-shell > main {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        zoom: 1 !important;
    }

    .portal-role-admin .content,
    .portal-role-merchant .content {
        overflow-x: clip;
    }

    .portal-role-admin .panel-header,
    .portal-role-merchant .panel-header,
    .portal-role-admin .table-toolbar,
    .portal-role-merchant .table-toolbar {
        flex-wrap: wrap;
    }
}

@media (max-width: 980px) {
    .portal-role-admin .grid-3,
    .portal-role-merchant .grid-3,
    .portal-role-admin .grid-4,
    .portal-role-merchant .grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

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

    .portal-role-admin .topbar-profile-dropdown,
    .portal-role-merchant .topbar-profile-dropdown {
        max-width: calc(100vw - 24px) !important;
    }

    .portal-role-admin .pagination,
    .portal-role-merchant .pagination,
    .portal-role-admin .tracking-pagination-controls,
    .portal-role-merchant .tracking-pagination-controls,
    .portal-role-admin .report-pagination nav,
    .portal-role-merchant .report-pagination nav {
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 700px) {
    :root {
        --portal-content-gutter: var(--portal-mobile-gutter);
    }

    .portal-role-admin .content,
    .portal-role-merchant .content,
    .portal-role-admin .topbar,
    .portal-role-merchant .topbar {
        padding-inline: var(--portal-mobile-gutter) !important;
    }

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

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

    .portal-role-admin .table-toolbar-actions,
    .portal-role-merchant .table-toolbar-actions,
    .portal-role-admin .split-actions,
    .portal-role-merchant .split-actions,
    .portal-role-admin .dialog-actions,
    .portal-role-merchant .dialog-actions {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        flex-wrap: wrap;
    }

    .portal-role-admin .search-control,
    .portal-role-merchant .search-control,
    .portal-role-admin .inline-payment-form,
    .portal-role-merchant .inline-payment-form {
        width: 100%;
        min-width: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .portal-role-admin .search-control > *,
    .portal-role-merchant .search-control > *,
    .portal-role-admin .inline-payment-form > *,
    .portal-role-merchant .inline-payment-form > * {
        width: 100% !important;
        min-width: 0 !important;
    }

    .portal-role-admin input,
    .portal-role-merchant input,
    .portal-role-admin select,
    .portal-role-merchant select,
    .portal-role-admin textarea,
    .portal-role-merchant textarea {
        font-size: 16px !important;
    }

    .portal-role-admin button,
    .portal-role-merchant button,
    .portal-role-admin .btn,
    .portal-role-merchant .btn,
    .portal-role-admin input,
    .portal-role-merchant input,
    .portal-role-admin select,
    .portal-role-merchant select,
    .portal-role-admin summary,
    .portal-role-merchant summary {
        min-height: 44px;
    }

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

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

@media (max-width: 480px) {
    :root {
        --portal-mobile-gutter: 10px;
    }

    .portal-role-admin .panel,
    .portal-role-merchant .panel {
        padding-inline: 14px;
    }

    .portal-role-admin dialog,
    .portal-role-merchant dialog,
    .portal-role-admin dialog.detail-dialog,
    .portal-role-merchant dialog.detail-dialog,
    .portal-role-admin dialog.admin-management-dialog,
    .portal-role-admin dialog.pricing-detail-dialog,
    .portal-role-merchant dialog.shipper-dialog {
        width: calc(100vw - 12px) !important;
        max-width: calc(100vw - 12px) !important;
        max-height: calc(var(--portal-viewport-height, 100dvh) - 12px) !important;
        margin: 6px auto !important;
        border-radius: 10px !important;
    }

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

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

@media (prefers-reduced-motion: reduce) {
    .portal-role-admin *,
    .portal-role-merchant * {
        scroll-behavior: auto !important;
    }
}