/**
 * Universal responsive layer — every app route (portal, admin, auth shell).
 * Load after mobile-native.css and dashboard-native-enforcement.css.
 */

/* ── No horizontal page scroll ── */
.app-shell-stage,
.app-theme-content,
.lb-dash-workspace,
.lb-dash-page,
.lb-dash-page__content {
    max-width: 100%;
    overflow-x: clip;
}

.app-native-scroll {
    overflow-x: clip;
}

/* ── Legacy pages: card spacing + section rhythm (all breakpoints) ── */
.lb-responsive-legacy-page,
.lb-dash-page__content:not(:has(.lb-dash-surface--native)) {
    display: flex;
    flex-direction: column;
    gap: var(--app-section-gap, 1.25rem);
}

.lb-responsive-legacy-page > *,
.lb-dash-page__content:not(:has(.lb-dash-surface--native)) > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.lb-responsive-legacy-page > section,
.lb-dash-page__content:not(:has(.lb-dash-surface--native)) > section,
.lb-responsive-legacy-page > .space-y-6 > section,
.lb-dash-workspace section[class*="rounded-["] {
    border-radius: var(--app-card-radius) !important;
}

/* Compact / tablet: metric strips use card gap; stacks keep section gap above */
@media (max-width: 1024px) {
    .lb-responsive-legacy-page > section[class*="grid"],
    .lb-dash-page__content:not(:has(.lb-dash-surface--native)) > section[class*="grid-cols"] {
        gap: var(--app-card-gap, 0.75rem) !important;
    }

    .app-mobile-mode .lb-responsive-legacy-page > section[class*="grid-cols"],
    .app-mobile-mode .lb-dash-page__content:not(:has(.lb-dash-surface--native)) > section[class*="sm:grid-cols"],
    .app-mobile-mode .lb-dash-page__content:not(:has(.lb-dash-surface--native)) > section[class*="xl:grid-cols"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .app-tablet-mode .lb-responsive-legacy-page > section[class*="grid-cols"],
    .app-tablet-mode .lb-dash-page__content:not(:has(.lb-dash-surface--native)) > section[class*="xl:grid-cols-4"],
    .app-tablet-mode .lb-dash-page__content:not(:has(.lb-dash-surface--native)) > section[class*="xl:grid-cols-5"] {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* ── Tables → stacked cards on mobile ── */
@media (max-width: 767px) {
    .lb-table-responsive {
        overflow: visible !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    .lb-table-responsive > .overflow-x-auto {
        overflow: visible !important;
    }

    .lb-table-responsive table {
        display: block;
        min-width: 0 !important;
        width: 100%;
    }

    .lb-table-responsive thead {
        display: none;
    }

    .lb-table-responsive tbody {
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
    }

    .lb-table-responsive tbody tr {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
        padding: 0.75rem 0.85rem;
        border: 1px solid var(--app-border-subtle);
        border-radius: var(--app-card-radius);
        background: var(--app-surface-overlay);
        box-shadow: var(--app-shadow-xs);
    }

    .lb-table-responsive tbody tr:hover {
        background: var(--app-surface-overlay);
    }

    .lb-table-responsive tbody td,
    .lb-table-responsive tbody th[scope="row"] {
        display: block;
        border: none !important;
        padding: 0.2rem 0 !important;
        font-size: var(--app-text-sm);
    }

    .lb-table-responsive tbody td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: var(--app-text-2xs);
        font-weight: var(--app-weight-semibold);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--app-text-secondary);
        margin-bottom: 0.15rem;
    }

    .lb-table-responsive tbody td:last-child {
        margin-top: 0.35rem;
        padding-top: 0.35rem !important;
        border-top: 1px solid var(--app-border-subtle) !important;
    }
}

/* Plain HTML tables in workspace */
@media (max-width: 767px) {
    .lb-dash-workspace .lb-table-responsive table,
    .lb-dash-workspace .overflow-x-auto > table:not(.lb-table-keep) {
        display: block;
        min-width: 0 !important;
    }

    .lb-dash-workspace .lb-table-responsive thead,
    .lb-dash-workspace .overflow-x-auto:has(table.lb-dash-table) thead {
        display: none;
    }

    .lb-dash-workspace .lb-table-responsive tbody,
    .lb-dash-workspace .overflow-x-auto:has(table.lb-dash-table) tbody {
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
    }

    .lb-dash-workspace .lb-table-responsive tbody tr,
    .lb-dash-workspace .overflow-x-auto:has(table.lb-dash-table) tbody tr {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
        padding: 0.75rem 0.85rem;
        border: 1px solid var(--app-border-subtle);
        border-radius: var(--app-card-radius);
        background: var(--app-surface-overlay);
        box-shadow: var(--app-shadow-xs);
    }

    .lb-dash-workspace .lb-table-responsive tbody td,
    .lb-dash-workspace .overflow-x-auto:has(table.lb-dash-table) tbody td {
        display: block;
        border: none !important;
        padding: 0.2rem 0 !important;
    }

    .lb-dash-workspace .lb-table-responsive tbody td[data-label]::before,
    .lb-dash-workspace .overflow-x-auto:has(table.lb-dash-table) tbody td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: var(--app-text-2xs);
        font-weight: var(--app-weight-semibold);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--app-text-secondary);
        margin-bottom: 0.15rem;
    }

    .lb-dash-workspace .overflow-x-auto:has(table:not(.lb-table-keep)) {
        overflow: visible !important;
    }
}

/* ── Modals & dialogs ─────────────────────────────────────────────────────
   Phone (≤767): bottom sheet (native feel)
   Tablet / desktop (≥768): centered in the viewport with safe padding
   ──────────────────────────────────────────────────────────────────────── */
.app-native-dialog-shell.app-shell-overlay,
.app-native-dialog-shell {
    position: fixed !important;
    inset: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding:
        max(1rem, env(safe-area-inset-top, 0px))
        max(1rem, env(safe-area-inset-right, 0px))
        max(1rem, env(safe-area-inset-bottom, 0px))
        max(1rem, env(safe-area-inset-left, 0px)) !important;
}

/* Alpine x-show must be able to hide these — never force display over display:none. */
.app-native-dialog-shell.app-shell-overlay:not([style*="display: none"]):not([hidden]):not([x-cloak]),
.app-native-dialog-shell:not([style*="display: none"]):not([hidden]):not([x-cloak]),
.app-shell-overlay:not([style*="display: none"]):not([hidden]):not([x-cloak]) {
    display: flex !important;
}

.app-native-dialog-shell[style*="display: none"],
.app-shell-overlay[style*="display: none"],
.app-native-dialog-shell[hidden],
.app-shell-overlay[hidden],
.app-native-dialog-shell[x-cloak],
.app-shell-overlay[x-cloak] {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

.app-native-dialog-panel,
.app-dialog-panel {
    margin-block: auto;
    flex-shrink: 0;
}

/* Phone only — bottom sheet */
@media (max-width: 767px) {
    .app-native-dialog-shell:not(.app-dialog-shell--center):not(.app-dialog-shell--full) {
        align-items: flex-end !important;
        padding:
            max(0.5rem, env(safe-area-inset-top, 0px))
            0
            0
            0 !important;
    }

    .app-native-dialog-shell:not(.app-dialog-shell--center):not(.app-dialog-shell--full) .app-native-dialog-panel,
    .app-native-dialog-shell:not(.app-dialog-shell--center):not(.app-dialog-shell--full) .app-dialog-panel {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }

    .app-native-dialog-shell:not(.app-dialog-shell--center):not(.app-dialog-shell--full) .app-native-dialog-panel > div,
    .app-native-dialog-shell:not(.app-dialog-shell--center):not(.app-dialog-shell--full) .app-dialog-panel > div {
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        max-height: min(92dvh, 900px) !important;
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
    }

    /* Raise above bottom nav when present */
    .app-mobile-mode .app-native-dialog-shell:not(.app-dialog-shell--center):not(.app-dialog-shell--full),
    .app-native-mode .app-native-dialog-shell:not(.app-dialog-shell--center):not(.app-dialog-shell--full) {
        padding-bottom: calc(var(--app-shell-bottom-nav-height, 4rem) + env(safe-area-inset-bottom, 0px)) !important;
    }

    .lb-dash-workspace [x-show][class*="fixed"][class*="inset-0"]:not(.app-native-dialog-shell):not(.app-dialog-shell--center) {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    .lb-dash-workspace [x-show][class*="fixed"][class*="inset-0"]:not(.app-native-dialog-shell):not(.app-dialog-shell--center) > div[class*="max-w-"],
    .lb-dash-workspace [x-show][class*="fixed"][class*="inset-0"]:not(.app-native-dialog-shell):not(.app-dialog-shell--center) > .relative > div[class*="max-w-"] {
        max-width: 100% !important;
        width: 100% !important;
        margin-inline: 0 !important;
        border-radius: var(--app-card-radius) var(--app-card-radius) 0 0 !important;
        max-height: 92dvh;
        overflow-y: auto;
    }

    .lb-dash-report-body .grid[class*="xl:grid-cols"],
    .lb-dash-report-body .grid[class*="md:grid-cols"] {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .lb-dash-report-body .p-5 {
        padding: 0.85rem !important;
    }
}

/* Tablet: keep centered, slightly roomier padding */
@media (min-width: 768px) and (max-width: 1024px) {
    .app-native-dialog-shell {
        align-items: center !important;
        justify-content: center !important;
        padding:
            max(1.25rem, env(safe-area-inset-top, 0px))
            max(1.25rem, env(safe-area-inset-right, 0px))
            max(1.25rem, env(safe-area-inset-bottom, 0px))
            max(1.25rem, env(safe-area-inset-left, 0px)) !important;
    }

    .app-native-dialog-panel:not([data-dialog-size="full"]):not(.app-dialog-panel--full),
    .app-dialog-panel:not(.app-dialog-panel--full) {
        width: min(calc(100vw - 2.5rem), 36rem) !important;
        max-width: min(calc(100vw - 2.5rem), 36rem) !important;
        border-radius: 1.15rem !important;
    }
}

/* ── Tabs: horizontal scroll with snap ── */
@media (max-width: 1024px) {
    .lb-dash-tabs,
    .lb-native-segments,
    [class*="lb-dash-tab"] {
        -webkit-overflow-scrolling: touch;
    }

    .lb-dash-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        gap: 0.35rem;
        padding-bottom: 0.15rem;
    }

    .lb-dash-tabs::-webkit-scrollbar {
        display: none;
    }

    .lb-dash-tab {
        flex-shrink: 0;
        white-space: nowrap;
    }
}

/* ── Forms: full-width stacks ── */
@media (max-width: 1024px) {
    .lb-dash-workspace form .grid[class*="grid-cols"],
    .lb-dash-workspace .lb-business-form__field-grid,
    .lb-dash-workspace fieldset .grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .lb-dash-workspace form .md\:col-span-2,
    .lb-dash-workspace form [class*="col-span-"] {
        grid-column: 1 / -1 !important;
    }

    .lb-dash-workspace .lb-business-form__main {
        order: 1;
    }

    .lb-dash-workspace .lb-business-form__aside {
        order: 2;
    }

    .lb-dash-workspace .lb-business-form {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .lb-dash-workspace .lb-business-form__aside-actions {
        display: none;
    }
}

@media (max-width: 767px) {
    .lb-dash-workspace .lb-business-form__aside {
        display: none !important;
    }
}

/* ── Create business: form directly under toolbar ── */
.lb-business-create-page .lb-business-create__body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.app-mobile-mode .lb-business-create-page .lb-dash-surface--native {
    gap: 0.75rem;
    margin-bottom: 0;
}

.app-mobile-mode .lb-business-create-page .lb-business-create__body {
    margin-top: 0;
}

.app-tablet-mode .lb-business-create-page .lb-dash-surface--tablet {
    margin-bottom: 0.25rem;
}

.app-tablet-mode .lb-business-create-page .lb-business-create__body {
    margin-top: 0;
}

.app-desktop-mode .lb-business-create-page .lb-business-create__body {
    margin-top: 1.25rem;
}

@media (max-width: 767px) {
    .lb-business-create-page .lb-business-create-toolbar .lb-dash-native-toolbar__actions {
        display: none !important;
    }

    .lb-business-create-page .lb-business-form__section-head [class*="badge"],
    .lb-business-create-page .lb-business-form__section-head .app-badge {
        display: none !important;
    }

    .lb-business-create-page .lb-business-form__section-head p.mt-0\.5 {
        display: none;
    }

    .lb-business-create-page .lb-business-form__card {
        border-radius: var(--app-card-radius, 0.875rem);
        box-shadow: var(--app-shadow-xs);
    }

    .lb-business-create-page .lb-business-form__section-head {
        padding: 0.75rem 0.875rem;
        background: var(--app-surface-overlay);
    }

    .lb-business-create-page .lb-business-form__field-grid {
        padding: 0.875rem;
        gap: 0.875rem;
    }

    .lb-business-create-page .lb-business-form__hours-details > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.875rem 1rem;
        list-style: none;
        cursor: pointer;
        font-size: var(--app-text-sm, 0.875rem);
        font-weight: var(--app-weight-semibold, 600);
        color: var(--theme-header-text-color);
        touch-action: manipulation;
    }

    .lb-business-create-page .lb-business-form__hours-details > summary::-webkit-details-marker {
        display: none;
    }

    .lb-business-create-page .lb-business-form__hours-details > summary::after {
        content: "▾";
        font-size: 0.75rem;
        color: var(--theme-muted-text-color);
        transition: transform 0.15s ease;
    }

    .lb-business-create-page .lb-business-form__hours-details[open] > summary::after {
        transform: rotate(180deg);
    }

    .lb-business-create-page .lb-business-form__hours-details .lb-business-form__section-head {
        display: none;
    }

@media (max-width: 767px) {
    .lb-business-create-page .lb-business-form__hours-details {
        border: 0;
    }

    .lb-business-create-page .lb-business-form__hours-details:not([open]) .lb-business-form__hours-table,
    .lb-business-create-page .lb-business-form__hours-details:not([open]) .px-0 {
        display: none;
    }

    .lb-business-create-page .lb-business-form__section-badge {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .lb-business-create-page .lb-business-form__hours-details > summary {
        display: none;
    }

    .lb-business-create-page .lb-business-form__hours-details:not([open]) .lb-business-form__hours-table,
    .lb-business-create-page .lb-business-form__hours-details:not([open]) .px-0 {
        display: block !important;
    }
}

@media (min-width: 1280px) {
    .lb-business-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--lb-business-form-sidebar);
        align-items: start;
        gap: 1.5rem;
    }

    .lb-business-form__main,
    .lb-business-form__aside {
        order: unset;
    }
}

/* ── Detail / split layouts ── */
@media (max-width: 1024px) {
    .lb-dash-workspace [class*="xl:grid-cols-["],
    .lb-dash-workspace .lg\:grid-cols-\[minmax\(0\,1fr\)_23rem\],
    .lb-dash-workspace .xl\:grid-cols-\[minmax\(0\,1fr\)_var\(--lb-business-form-sidebar\)\] {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .app-tablet-mode .lb-dash-workspace .lb-tablet-split,
    .app-tablet-mode .lb-dash-workspace .lb-tablet-split--2,
    .app-tablet-mode .lb-dash-workspace .lb-tablet-split--master-detail {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.85rem;
    }
}

/* ── Floating action button ── */
.lb-page-fab {
    display: none;
}

@media (max-width: 767px) {
    .lb-page-fab {
        position: fixed;
        right: max(1rem, env(safe-area-inset-right, 0px));
        bottom: calc(var(--app-shell-bottom-nav-height, 4rem) + env(safe-area-inset-bottom, 0px) + 0.85rem);
        z-index: 110;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        min-height: 3rem;
        padding: 0 1.1rem;
        border: 0;
        border-radius: 999px;
        background: var(--theme-accent);
        color: #fff;
        font-size: var(--app-text-sm);
        font-weight: var(--app-weight-semibold);
        text-decoration: none;
        box-shadow: var(--app-shadow-lg);
        touch-action: manipulation;
    }

    .lb-page-fab i {
        font-size: 0.95rem;
    }

    .lb-page-fab:active {
        transform: scale(0.97);
    }

    .app-tablet-mode .lb-page-fab {
        display: none !important;
    }
}

/* ── Empty / loading / error states ── */
.lb-native-empty,
.lb-dash-emptystate {
    box-sizing: border-box;
    padding: 2rem 1.5rem;
    text-align: center;
}

@media (max-width: 767px) {
    .lb-native-empty,
    .lb-dash-emptystate {
        padding: 2rem 1.25rem;
    }

    .lb-dash-emptystate__art svg,
    .lb-dash-emptystate__art {
        max-width: 8rem;
        margin-inline: auto;
    }
}

/* ── Breadcrumbs & pagination ── */
@media (max-width: 767px) {
    .lb-dash-workspace nav[aria-label="Breadcrumb"],
    .lb-dash-workspace .breadcrumb {
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .lb-dash-workspace .pagination {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.25rem;
    }
}

/* ── Admin dashboard parity ── */
@media (max-width: 1024px) {
    .admin-dashboard .lb-dash-pagehead {
        display: none !important;
    }

    .admin-dashboard .lb-dash-card--hero {
        display: none !important;
    }
}

/* ── Auth pages (app shell auth layout) ── */
@media (max-width: 767px) {
    .app-auth-page {
        padding-inline: max(1rem, env(safe-area-inset-left)) max(1rem, env(safe-area-inset-right));
        padding-block: 1rem;
    }

    .app-auth-page .max-w-md,
    .app-auth-page .max-w-lg,
    .app-auth-page .max-w-xl {
        max-width: 100% !important;
        width: 100%;
    }
}

/* ── Guest marketing / auth ── */
@media (max-width: 1023px) {
    .guest-marketing-canvas,
    .guest-auth-canvas {
        padding-inline: max(1rem, env(safe-area-inset-left)) max(1rem, env(safe-area-inset-right));
    }

    .guest-marketing-canvas section[class*="grid-cols"],
    .guest-auth-canvas .grid[class*="lg:grid-cols"] {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* ── Compact auto-chrome (responsive-page component) ── */
.lb-dash-surface--auto-native,
.lb-dash-surface--auto-tablet {
    display: none;
}

.app-mobile-mode .lb-dash-surface--auto-native {
    display: block;
}

.app-tablet-mode .lb-dash-surface--auto-tablet {
    display: block;
}

.app-desktop-mode .lb-dash-surface--auto-desktop {
    display: block;
}

.app-mobile-mode .lb-dash-surface--auto-desktop,
.app-tablet-mode .lb-dash-surface--auto-desktop {
    display: none;
}

@media (max-width: 767px) {
    .portal-mobile-hub.lb-dash-surface--auto-native,
    .portal-mobile-hub.lb-dash-surface--native {
        padding-bottom: 0.25rem;
    }

    .portal-mobile-hub .lb-native-segments--workspace {
        overflow: visible;
        max-width: 100%;
    }
}