/* Native mobile / tablet / PWA shell utilities */

:root {
    --native-touch-min: 44px;
    --native-touch-comfortable: 48px;
    --theme-bp-mobile-max: 767px;
    --theme-bp-tablet-min: 768px;
    --theme-bp-tablet-max: 1023px;
    --theme-bp-nav-desktop: 1024px;
    --guest-bottom-nav-height: 4.5rem;
    --guest-header-offset: calc(3.85rem + env(safe-area-inset-top, 0px));
    --app-shell-bottom-nav-height: 4.75rem;
    --app-tablet-sidebar-width: 4.375rem;
    --native-section-pad-mobile: clamp(1.5rem, 4.5vw, 2.25rem);
    --native-section-pad-tablet: clamp(2rem, 3.5vw, 2.75rem);
    --native-gap-mobile: 0.75rem;
    --native-gap-tablet: 1rem;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html.native-shell-open,
html.native-shell-open body,
html.app-shell-menu-open,
html.app-shell-menu-open body,
html.guest-shell-menu-open,
html.guest-shell-menu-open body {
    overflow: hidden;
    overscroll-behavior: none;
}

body {
    min-height: 100dvh;
    overscroll-behavior-y: none;
}

.guest-native-scroll,
.app-native-scroll {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}

/* Prevent iOS zoom on focused inputs */
@media (max-width: 767px) {
    input,
    select,
    textarea,
    .lb-input,
    [type="text"],
    [type="email"],
    [type="password"],
    [type="search"],
    [type="tel"],
    [type="url"],
    [type="number"] {
        font-size: max(16px, 1rem);
    }
}

@supports (padding: max(0px)) {
    .native-safe-top {
        padding-top: max(0.75rem, env(safe-area-inset-top, 0px));
    }

    .native-safe-bottom {
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
    }
}

.native-touch-target {
    min-height: var(--native-touch-min);
    min-width: var(--native-touch-min);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.native-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.native-scroll-x::-webkit-scrollbar {
    display: none;
}

/* Guest marketing native shell */
.guest-native-header {
    top: 0;
    padding-top: env(safe-area-inset-top, 0px);
}

    .guest-native-header__bar {
        width: 100%;
        max-width: none;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        border-top: 0;
        box-shadow: 0 1px 0 rgba(36, 35, 32, 0.08), 0 8px 24px -20px rgba(36, 35, 32, 0.35);
    }

@media (min-width: 768px) {
    .guest-native-header {
        top: 0.75rem;
        padding-top: env(safe-area-inset-top, 0px);
    }

    .guest-native-header__bar:not(.theme-content-shell) {
        width: min(100%, var(--theme-page-max-width, 90rem));
        max-width: var(--theme-page-max-width, 90rem);
        margin-inline: auto;
        border-radius: 1.45rem;
        border: 1px solid rgba(232, 229, 220, 0.86);
        box-shadow: 0 18px 52px -46px rgba(36, 35, 32, 0.55);
    }
}

.guest-shell-main {
    padding-top: var(--guest-header-offset);
}

@media (max-width: 1023px) {
    .guest-shell-main {
        padding-bottom: calc(var(--guest-bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 1rem);
    }

    .guest-shell-footer {
        padding-bottom: calc(var(--guest-bottom-nav-height) + env(safe-area-inset-bottom, 0px));
    }
}

@media (min-width: 1024px) {
    .guest-shell-main {
        padding-bottom: 0;
    }

    .guest-shell-footer {
        padding-bottom: 0;
    }
}

.guest-mobile-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0px);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.guest-mobile-bottom-nav__item {
    min-height: var(--native-touch-min);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.guest-mobile-bottom-nav__icon-wrap {
    min-height: var(--native-touch-min);
    min-width: var(--native-touch-min);
}

.guest-mobile-drawer {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* App dashboard native shell */
@media (max-width: 767px) {
    .app-shell-main {
        padding-bottom: calc(var(--app-shell-bottom-nav-height) + 1.25rem + env(safe-area-inset-bottom, 0px)) !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .app-shell-main {
        padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px)) !important;
    }
}

.app-mobile-bottom-nav__item {
    min-height: var(--native-touch-min);
}

.app-mobile-bottom-nav__icon {
    min-height: var(--native-touch-min);
    min-width: var(--native-touch-min);
}

@media (max-width: 767px) {
    .app-theme-content .grid.sm\:grid-cols-2:not(.portal-dashboard .grid):not(.admin-dashboard .grid),
    .app-theme-content .grid.sm\:grid-cols-3:not(.portal-dashboard .grid),
    .app-theme-content .grid.sm\:grid-cols-4:not(.portal-dashboard .grid),
    .app-theme-content .grid.md\:grid-cols-2:not(.portal-dashboard .grid):not(.admin-dashboard .grid),
    .app-theme-content .grid.md\:grid-cols-3:not(.portal-dashboard .grid) {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .app-theme-content .xl\:grid-cols-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-theme-content .lg\:grid-cols-3,
    .app-theme-content .lg\:grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .lb-sales,
    .lb-page {
        --lb-section-pad: var(--native-section-pad-mobile);
    }

    .lb-sales .lb-section,
    .lb-page .lb-section,
    .guest-public-shell .lb-section {
        padding-block: var(--native-section-pad-mobile);
    }

    .lb-sales .lb-section--compact,
    .lb-page .lb-section--compact,
    .guest-public-shell .lb-section--compact {
        padding-block: clamp(1.25rem, 3.5vw, 1.75rem);
    }

    .lb-sales .lb-heading,
    .lb-sales .lb-hero-title,
    .lb-page .lb-heading,
    .lb-page .lb-hero-title,
    .guest-public-shell .lb-heading {
        font-size: clamp(1.85rem, 8.5vw, 2.65rem) !important;
        max-width: none !important;
        line-height: 1.06 !important;
    }

    .lb-sales .lb-button,
    .lb-sales .lb-button-soft,
    .lb-sales .lb-btn:not(.lb-btn--icon),
    .lb-page .lb-button,
    .lb-page .lb-button-soft,
    .lb-page .lb-btn:not(.lb-btn--icon),
    .guest-public-shell .lb-button,
    .guest-public-shell .lb-button-soft,
    .guest-public-shell .lb-btn:not(.lb-btn--icon),
    .guest-public-shell .localboost-button-primary,
    .guest-public-shell .localboost-button-secondary,
    .guest-marketing-canvas .lb-btn--block {
        width: 100%;
        justify-content: center;
        min-height: var(--lb-btn-h, var(--native-touch-min));
    }

    .guest-marketing-canvas .lb-form-row--inline .lb-btn:not(.lb-btn--icon) {
        width: 100%;
    }

    .lb-sales .lb-marquee-wrap {
        display: none;
    }

    .lb-sales .lb-workflow-band::before,
    .lb-sales .lb-workflow-band::after {
        display: none;
    }

    .lb-sales .lb-workflow-card {
        width: 14rem;
    }

    .lb-sales .lb-live-demo__panel,
    .lb-sales .lb-feature-alt,
    .lb-sales .lb-testimonial-card {
        border-radius: 1.15rem;
    }

    .lb-sales .lb-feature-showcase .grid,
    .lb-sales #features .grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .lb-sales .lb-logo-pill {
        padding-block: 0.85rem;
    }

    .lb-sales .lb-journey-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .lb-sales .lb-journey-step:not(:last-child)::after {
        content: "↓";
        left: 50%;
        right: auto;
        bottom: -1.1rem;
        top: auto;
        transform: translateX(-50%);
    }

    .guest-public-shell .lb-pricing-hero,
    .guest-public-shell .lb-contact-hero,
    .guest-public-shell .lb-blog-hero,
    .guest-public-shell > .lb-wrap:first-child {
        padding-top: clamp(1.25rem, 4vw, 2rem) !important;
        padding-bottom: clamp(1.5rem, 5vw, 2.5rem) !important;
    }

    .guest-public-shell .lb-pricing-card,
    .guest-public-shell .lb-card {
        border-radius: 1.15rem;
    }
}

@media (min-width: 640px) {
    .guest-marketing-canvas .lb-form-row--inline .lb-btn:not(.lb-btn--icon) {
        width: auto;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .lb-sales,
    .lb-page {
        --lb-section-pad: var(--native-section-pad-tablet);
    }

    .lb-sales .lb-section,
    .lb-page .lb-section,
    .guest-public-shell .lb-section {
        padding-block: var(--native-section-pad-tablet);
    }

    .lb-sales .lb-hero-title,
    .lb-page .lb-hero-title {
        max-width: none;
        font-size: clamp(2.35rem, 5.5vw, 3.25rem) !important;
    }

    .lb-sales .lb-feature-showcase .grid,
    .lb-sales #features .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .lb-sales .lb-journey-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .lb-sales .lb-live-demo .grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .guest-public-shell .lb-pricing-hero .grid,
    .guest-public-shell .lb-pricing-hero + .lb-wrap .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767px) {
    .app-shell-main .lb-dash-page {
        padding-inline: var(--app-page-pad-x, 1rem);
    }

    .app-shell-main .lb-dash-page .px-4,
    .app-shell-main .lb-dash-page .sm\:px-5 {
        padding-inline: 0 !important;
    }
}

/* App dashboard — native mobile / tablet */
@media (max-width: 767px) {
    .lb-dash-workspace .lb-dash-hero {
        padding: 1rem !important;
        border-radius: 1rem !important;
        overflow: hidden;
    }

    .lb-dash-workspace .lb-dash-hero > .relative,
    .lb-dash-workspace .lb-dash-hero .flex.flex-wrap {
        flex-direction: column;
        align-items: stretch !important;
    }

    .lb-dash-workspace .lb-dash-step-card {
        min-height: auto !important;
    }

    .lb-dash-workspace .lb-dash-metric-tile {
        padding: 0.9rem 1rem;
    }

    .lb-dash-workspace .lb-dash-metric-tile__value {
        font-size: 1.35rem;
    }

    .lb-dash-workspace .lb-dash-tabs,
    .lb-dash-workspace .lb-dash-tabs-wrap {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.5rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0.15rem;
    }

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

    .lb-dash-workspace .lb-dash-tab {
        flex: 0 0 auto;
        min-height: var(--native-touch-min);
        white-space: nowrap;
    }

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

    .lb-dash-workspace .lb-dash-card,
    .lb-dash-workspace .lb-dash-panel,
    .lb-dash-workspace .lb-dash-form-panel {
        border-radius: 1rem;
    }

    .lb-dash-workspace .overflow-x-auto,
    .lb-dash-workspace table {
        -webkit-overflow-scrolling: touch;
    }

    .lb-dash-workspace .lb-dash-hero .lb-button,
    .lb-dash-workspace .lb-dash-hero button,
    .lb-dash-workspace .lb-dash-hero a[class*="button"] {
        min-height: var(--native-touch-min);
        width: 100%;
        justify-content: center;
    }

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

@media (min-width: 768px) and (max-width: 1023px) {
    .lb-dash-workspace .lb-dash-step-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

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

    .lb-dash-workspace .lb-dash-metric-tile__value {
        font-size: 1.45rem;
    }
}

@media (display-mode: standalone) {
    .guest-native-header {
        padding-top: env(safe-area-inset-top, 0px);
    }

    .app-shell-stage .fixed.top-0 {
        padding-top: env(safe-area-inset-top, 0px);
    }
}