/* Mobile-first overrides for the portal header, forms, dialogs and data workspaces. */

html,
body,
.app-shell,
.app-shell main {
    max-width: 100%;
}

.panel-table-scroll,
.table-scroll,
.table-panel,
.admin-management-dialog,
.admin-management-dialog form,
.admin-management-dialog .field,
.city-search-select {
    min-width: 0;
}

select {
    text-overflow: ellipsis;
}

@media (max-width: 980px) {
    /* Keep the page identity and signed-in store clearly separated on mobile. */
    .topbar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        gap: 0 !important;
        min-height: 0;
        padding: 12px 14px 14px !important;
    }

    .topbar-title {
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr);
        align-items: start;
        width: 100%;
        gap: 10px;
        padding-bottom: 12px;
    }

    .menu-button {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        border-radius: 8px;
        font-size: 20px;
        line-height: 1;
    }

    .topbar-title > div {
        min-width: 0;
    }

    .topbar h1 {
        margin: 0;
        font-size: 17px;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    .topbar-title .muted {
        margin-top: 2px;
        font-size: 11px;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .topbar-actions {
        width: 100%;
        margin: 0 !important;
        padding-top: 11px;
        border-top: 1px solid rgba(255, 255, 255, .24);
    }

    .topbar-profile-menu,
    .topbar-profile-menu summary {
        width: 100%;
    }

    .topbar-profile-menu {
        z-index: 14;
    }

    .topbar-profile-menu summary {
        min-height: 36px;
        justify-content: space-between;
        gap: 12px;
    }

    .topbar-profile-copy {
        min-width: 0;
        max-width: calc(100% - 48px);
        justify-items: start;
        text-align: left;
    }

    .topbar-profile-copy strong {
        max-width: 100%;
        font-size: 13px;
    }

    .topbar-profile-copy small {
        max-width: 100%;
        font-size: 11px;
    }

    .topbar-profile-avatar {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        border-width: 1px;
    }

    .topbar-profile-menu[open] {
        z-index: 50;
    }

    .topbar-profile-dropdown {
        top: calc(100% + 8px);
        right: 0;
        left: 0;
        width: 100%;
        max-width: none;
        border-radius: 10px;
    }

    .topbar-actions > .badge {
        width: fit-content;
    }

    .content {
        width: 100%;
        padding: 16px 12px 32px !important;
    }

    /* Avoid nested horizontal scrolling shifting the whole page. */
    .table-panel.table-scroll,
    .admin-management-panel.table-scroll {
        overflow: hidden !important;
    }

    .panel-table-scroll,
    .table-scroll {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }

    .panel-table-scroll table {
        width: max-content;
        min-width: 100%;
    }

    /* Mobile dialogs behave like contained sheets instead of desktop popups. */
    dialog.detail-dialog,
    dialog.admin-management-dialog {
        width: min(680px, calc(100vw - 16px)) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100vh - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
        margin: auto;
        padding: 0 !important;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        border-radius: 12px;
    }

    .admin-management-dialog .dialog-header,
    .detail-dialog .dialog-header {
        position: sticky;
        top: 0;
        z-index: 5;
        margin: 0 !important;
        padding: 14px !important;
        align-items: flex-start;
        background: #fff;
        border-bottom: 1px solid var(--line);
    }

    .admin-management-dialog .dialog-header > div,
    .detail-dialog .dialog-header > div {
        min-width: 0;
    }

    .admin-management-dialog .dialog-header strong,
    .detail-dialog .dialog-header strong {
        display: block;
        padding-right: 4px;
        font-size: 16px;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .dialog-close {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
    }

    .admin-management-dialog > form,
    .admin-management-dialog .pricing-form,
    .admin-management-dialog .compact-form {
        width: 100%;
        margin: 0;
        padding: 14px !important;
    }

    .admin-management-dialog .form-grid,
    .admin-management-dialog .pricing-form,
    .admin-management-dialog .compact-form {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px;
    }

    .admin-management-dialog .field,
    .admin-management-dialog .field.full,
    .admin-management-dialog .span-full,
    .admin-management-dialog .dialog-actions {
        grid-column: 1 !important;
        min-width: 0;
    }

    .admin-management-dialog input,
    .admin-management-dialog select,
    .admin-management-dialog textarea,
    .detail-dialog input,
    .detail-dialog select,
    .detail-dialog textarea {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        font-size: 16px;
    }

    .admin-management-dialog select,
    .detail-dialog select {
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .admin-management-dialog .city-search-options,
    .detail-dialog .city-search-options {
        right: 0;
        left: 0;
        width: 100%;
        max-height: min(230px, 38dvh);
    }

    .admin-management-dialog .dialog-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
        margin: 4px 0 0;
        padding: 12px 0 0;
        border-top: 1px solid var(--line);
        border-bottom: 0;
    }

    .admin-management-dialog .dialog-actions .btn,
    .admin-management-dialog .dialog-actions button {
        width: 100%;
        min-width: 0;
    }

    .admin-management-dialog .dialog-actions > :only-child {
        grid-column: 1 / -1;
    }

    /* Toolbars stack without squeezing controls or pushing content off canvas. */
    .admin-list-toolbar .table-toolbar-actions,
    .admin-orders-toolbar .table-toolbar-actions {
        width: 100%;
    }

    .admin-list-toolbar .table-toolbar-actions {
        display: flex !important;
        align-items: stretch;
        flex-direction: column;
    }

    .admin-list-toolbar .entries-control {
        align-self: flex-start;
    }

    .admin-list-toolbar .table-toolbar-actions > .btn {
        width: 100%;
    }

    .admin-orders-toolbar-controls {
        width: 100%;
    }

    .admin-order-filters {
        width: 100%;
    }

    /* Single-booking flow keeps comfortable separation below the mobile header. */
    .single-panel-grid,
    .single-booking-panel,
    .single-booking-workflow,
    .single-booking-flow {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .single-booking-page-heading {
        margin: 2px 0 16px;
    }

    .booking-flow-card,
    .booking-live-summary {
        min-width: 0;
    }

    .booking-pickup-option,
    .booking-pickup-copy {
        min-width: 0;
    }

    .booking-pickup-copy strong,
    .booking-pickup-copy small {
        overflow-wrap: anywhere;
    }

    /* Tracking workspaces remain usable without causing page-level overflow. */
    .tracking-reference-page,
    .tracking-orders-panel,
    .tracking-reference-filters {
        min-width: 0;
    }

    .tracking-reference-hero {
        gap: 14px;
    }

    .tracking-orders-table {
        width: max-content;
    }
}

@media (max-width: 560px) {
    .topbar {
        padding-inline: 12px !important;
    }

    .content {
        padding-inline: 10px !important;
    }

    .single-booking-page-heading {
        gap: 12px;
    }

    .single-booking-page-heading h2 {
        font-size: 23px;
        line-height: 1.15;
    }

    .single-booking-page-heading p {
        line-height: 1.4;
    }

    .single-booking-reference {
        width: 100%;
        padding: 11px 12px;
    }

    .booking-flow-card,
    .booking-live-summary {
        padding: 14px !important;
    }

    .booking-step-heading {
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 14px;
    }

    .booking-step-icon,
    .booking-pickup-pin {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .booking-pickup-option {
        min-height: 0;
        gap: 9px;
        padding: 12px;
    }

    .booking-selection-state {
        width: 22px;
        height: 22px;
        flex-basis: 22px;
    }

    .booking-payment-segments {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .booking-payment-segments label > span {
        min-height: 42px;
        padding: 7px 8px;
        font-size: 12px;
        text-align: center;
    }

    .single-booking-submit {
        padding-bottom: 0;
    }

    dialog.detail-dialog,
    dialog.admin-management-dialog {
        width: calc(100vw - 8px) !important;
        max-width: calc(100vw - 8px) !important;
        max-height: calc(100vh - 8px) !important;
        max-height: calc(100dvh - 8px) !important;
        border-radius: 10px;
    }

    .admin-management-dialog .dialog-actions {
        grid-template-columns: 1fr;
    }

    .admin-management-dialog .dialog-actions > * {
        grid-column: 1;
    }

    .admin-orders-toolbar-controls {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .admin-orders-toolbar-controls .entries-control {
        justify-self: start;
    }

    .admin-orders-toolbar-controls .btn,
    .admin-order-filters .btn {
        width: 100%;
    }

    .tracking-reference-page {
        gap: 14px;
    }

    .tracking-reference-hero {
        padding: 16px !important;
    }

    .tracking-reference-hero-icon {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }

    .tracking-reference-hero h2 {
        font-size: 22px;
    }

    .tracking-reference-hero p {
        line-height: 1.4;
    }

    .tracking-summary-grid {
        grid-template-columns: 1fr !important;
    }

    .tracking-summary-card {
        min-height: 78px;
        padding: 13px;
    }
}

@media (max-width: 360px) {
    .topbar-profile-copy strong,
    .topbar-profile-copy small {
        max-width: 220px;
    }

    .booking-payment-segments {
        grid-template-columns: 1fr !important;
    }
}