/* Phase 1 / Release 10 — mobile experience and responsive optimization */
:root {
    --s10-safe-top: env(safe-area-inset-top, 0px);
    --s10-safe-right: env(safe-area-inset-right, 0px);
    --s10-safe-bottom: env(safe-area-inset-bottom, 0px);
    --s10-safe-left: env(safe-area-inset-left, 0px);
    --s10-mobile-gutter: clamp(12px, 3.8vw, 22px);
    --s10-touch: 44px;
    --s10-nav-height: 64px;
    --s10-vh: 100dvh;
}

html {
    max-width: 100%;
    overflow-x: clip;
    scroll-padding-block-start: calc(var(--s10-nav-height) + var(--s10-safe-top) + 12px);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
}

body.is-mobile-menu-open {
    overscroll-behavior: none;
}

body.mobile-keyboard-open :is(.compare-tray, .property-sticky-actions, .form-wizard-actions, .mobile-scroll-top) {
    position: static !important;
}

:where(main, section, article, aside, header, footer, nav, form, fieldset, div, ul, ol, li) {
    min-width: 0;
}

:where(h1, h2, h3, h4, p, a, button, label, legend, td, th, dd, dt, strong, span) {
    overflow-wrap: break-word;
}

:where(img, picture, video, canvas, iframe) {
    height: auto;
    max-width: 100%;
}

img[data-mobile-lazy="true"] {
    background: color-mix(in srgb, currentColor 6%, transparent);
}

.mobile-nav-backdrop {
    background: rgba(7, 12, 22, .54);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border: 0;
    display: none;
    inset: 0;
    padding: 0;
    position: fixed;
    z-index: 8980;
}

.mobile-nav-backdrop.is-visible {
    display: block;
}

.mobile-scroll-top {
    align-items: center;
    background: #172033;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    bottom: max(16px, var(--s10-safe-bottom));
    box-shadow: 0 10px 28px rgba(15, 23, 42, .28);
    color: #fff;
    display: inline-flex;
    height: 48px;
    inset-inline-end: max(14px, var(--s10-safe-right));
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    transform: translateY(12px);
    transition: opacity .18s ease, transform .18s ease;
    width: 48px;
    z-index: 8200;
}

.mobile-scroll-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.mobile-scroll-top:focus-visible {
    outline: 3px solid #fbbf24;
    outline-offset: 3px;
}

/* Tablet composition */
@media (min-width: 681px) and (max-width: 1024px) {
    :is(.home-nav, main, .app-global-content) {
        box-sizing: border-box;
        max-width: 100%;
        width: 100%;
    }

    .home-nav {
        padding-inline: clamp(12px, 2.4vw, 24px) !important;
    }

    :is(button, .btn, [role="button"], .pagination a, .pagination button, summary, .favorite-button, .property-card__actions a, .form-step-button) {
        box-sizing: border-box;
        min-height: var(--s10-touch) !important;
    }

    :is(.home-menu-button, .home-toggle-link, .home-tool-link) {
        min-height: var(--s10-touch) !important;
        min-width: var(--s10-touch) !important;
    }

    :is(button, .btn, [role="button"], a, input, select, textarea, summary):focus-visible {
        outline: 3px solid #f59e0b !important;
        outline-offset: 3px !important;
    }

    :is(.dashboard-main, .workflow-main, .property-details-main, .favorites-main, .property-search-main, .home-main, .review-shell, .broker-import-main) {
        width: min(calc(100% - 36px), 960px) !important;
    }

    :is(.property-card-grid, .featured-property-grid, .favorites-grid, .dashboard-card-grid, .review-grid) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    :is(.workflow-grid, .auth-commercial-layout, .property-details-layout, .property-search-layout) {
        gap: 18px !important;
    }

    .leaflet-map,
    :is(.workflow-map, .property-search-map, .property-details-map, .favorites-map, .dashboard-map, .valuation-result-map) {
        min-height: 420px !important;
    }
}

@media (max-width: 760px) {
    :root {
        --s10-nav-height: 58px;
    }

    body {
        padding-inline: var(--s10-safe-left) var(--s10-safe-right);
    }

    .app-header {
        inset-block-start: 0;
        position: sticky;
        z-index: 9000;
    }

    .home-nav {
        background: color-mix(in srgb, var(--surface, #fff) 92%, transparent) !important;
        box-sizing: border-box;
        width: 100% !important;
        backdrop-filter: blur(16px) saturate(140%);
        -webkit-backdrop-filter: blur(16px) saturate(140%);
        border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent);
        min-height: calc(var(--s10-nav-height) + var(--s10-safe-top)) !important;
        padding-block: max(6px, var(--s10-safe-top)) 6px !important;
        padding-inline: var(--s10-mobile-gutter) !important;
    }

    [data-theme="dark"] .home-nav,
    [data-bs-theme="dark"] .home-nav {
        background: rgba(15, 25, 41, .94) !important;
    }

    .home-brand-mark {
        flex: 0 0 38px;
        height: 38px;
        width: 38px;
    }

    .home-brand small,
    .home-theme-button [data-home-theme-label],
    .home-login,
    .home-register,
    .nav-search-shortcut {
        display: none !important;
    }

    .home-user-tools {
        gap: 5px !important;
    }

    :is(.home-menu-button, .home-toggle-link, .home-tool-link) {
        align-items: center;
        display: inline-flex;
        flex: 0 0 var(--s10-touch);
        height: var(--s10-touch) !important;
        justify-content: center;
        min-height: var(--s10-touch) !important;
        min-width: var(--s10-touch) !important;
        padding: 0 !important;
        width: var(--s10-touch);
    }

    .home-mobile-panel {
        background: var(--surface, #fff);
        border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
        border-radius: 20px 20px 0 0;
        bottom: 0;
        box-shadow: 0 -20px 50px rgba(15, 23, 42, .25);
        display: grid;
        gap: 4px;
        inset-inline: 0 !important;
        max-height: min(82dvh, calc(var(--s10-vh) - var(--s10-nav-height) - var(--s10-safe-top)));
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 14px var(--s10-mobile-gutter) max(18px, var(--s10-safe-bottom)) !important;
        position: fixed !important;
        top: auto !important;
        width: auto !important;
        z-index: 8990 !important;
        -webkit-overflow-scrolling: touch;
    }

    [data-theme="dark"] .home-mobile-panel,
    [data-bs-theme="dark"] .home-mobile-panel {
        background: #101a2b;
    }

    .home-mobile-panel[hidden] {
        display: none !important;
    }

    .home-mobile-panel::before {
        background: color-mix(in srgb, currentColor 22%, transparent);
        border-radius: 999px;
        content: "";
        height: 4px;
        justify-self: center;
        margin-bottom: 4px;
        width: 42px;
    }

    .home-mobile-panel a {
        align-items: center;
        border-radius: 11px;
        display: flex;
        font-size: .96rem;
        font-weight: 680;
        justify-content: space-between;
        min-height: 48px;
        padding: .65rem .8rem;
        text-decoration: none;
    }

    .home-mobile-panel a::after {
        content: "›";
        font-size: 1.25rem;
        opacity: .55;
    }

    [dir="rtl"] .home-mobile-panel a::after {
        content: "‹";
    }

    .home-mobile-panel a:is(:hover, :focus-visible, .is-active) {
        background: color-mix(in srgb, #f59e0b 14%, transparent);
        color: inherit;
    }

    .mobile-nav-label {
        color: color-mix(in srgb, currentColor 62%, transparent);
        font-size: .72rem;
        font-weight: 800;
        letter-spacing: .08em;
        margin: .7rem .8rem .2rem;
        text-transform: uppercase;
    }

    .app-breadcrumb {
        margin-inline: var(--s10-mobile-gutter) !important;
        overflow-x: auto;
        padding-block: .55rem !important;
        scrollbar-width: none;
        white-space: nowrap;
    }

    .app-breadcrumb::-webkit-scrollbar { display: none; }

    :is(.dashboard-main, .workflow-main, .property-details-main, .favorites-main, .property-search-main, .home-main, .review-shell, .broker-import-main, .app-global-content, .auth-public-main) {
        margin-inline: auto !important;
        max-width: none !important;
        padding-inline: 0 !important;
        width: calc(100% - (2 * var(--s10-mobile-gutter))) !important;
    }

    :is(.dashboard-hero, .workflow-hero, .property-details-hero, .favorites-topbar, .property-search-topbar, .review-hero, .broker-import-hero) {
        border-radius: 18px !important;
        gap: 14px !important;
        margin-block: 14px 16px !important;
        padding: 18px !important;
    }

    :is(.dashboard-hero, .workflow-hero, .property-details-hero, .favorites-topbar, .property-search-topbar, .review-hero, .broker-import-hero) h1 {
        font-size: clamp(1.55rem, 7vw, 2.1rem) !important;
        line-height: 1.12 !important;
    }

    :is(.dashboard-hero, .workflow-hero, .property-details-hero, .favorites-topbar, .property-search-topbar, .review-hero, .broker-import-hero) p {
        font-size: .94rem;
        line-height: 1.58;
    }

    :is(.hero-actions, .property-section-actions, .property-search-card-actions, .favorites-controls, .home-actions, .admin-hero-actions, .broker-import-actions) {
        display: grid !important;
        gap: 8px !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
    }

    :is(.hero-actions, .property-section-actions, .property-search-card-actions, .favorites-controls, .home-actions, .admin-hero-actions, .broker-import-actions) > :is(a, button, .btn) {
        align-items: center;
        display: inline-flex;
        justify-content: center;
        min-height: var(--s10-touch);
        min-width: 0;
        padding-inline: .65rem !important;
        text-align: center;
    }

    /* Cards and responsive media */
    :is(.property-card-grid, .featured-property-grid, .favorites-grid, .dashboard-card-grid, .review-grid, .broker-import-grid, .admin-material-grid) {
        gap: 14px !important;
        grid-template-columns: 1fr !important;
    }

    :is(.property-card, .app-card, .workflow-card, .property-section-card, .valuation-result-band, .review-content-card, .broker-import-card, .auth-panel) {
        border-radius: 16px !important;
        max-width: 100%;
        padding: 15px !important;
    }

    .property-card {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    :is(.property-card__media, .property-card-media, .featured-property-image) {
        aspect-ratio: 16 / 10;
        border-radius: 13px;
        overflow: hidden;
    }

    :is(.property-card__media, .property-card-media, .featured-property-image) img {
        height: 100% !important;
        object-fit: cover;
        width: 100%;
    }

    .property-card__body {
        display: flex;
        flex: 1;
        flex-direction: column;
        gap: 8px;
        padding: 12px 2px 2px !important;
    }

    .property-card__actions {
        margin-top: auto;
    }

    /* Search */
    :is(.search-primary-search, .property-search-primary-search) {
        background: var(--surface, #fff);
        border-radius: 16px !important;
        gap: 8px !important;
        padding: 8px !important;
        position: relative;
        z-index: 20;
    }

    :is(.search-primary-search, .property-search-primary-search) input[type="search"] {
        font-size: 16px !important;
        min-height: 52px !important;
    }

    :is(.search-filter-disclosure, .property-search-filter-disclosure) > summary {
        align-items: center;
        display: flex;
        justify-content: space-between;
        min-height: 48px;
        padding: .65rem .8rem;
    }

    :is(.search-filter-panel, .property-search-filter-panel) {
        padding: 12px !important;
    }

    :is(.property-search-field-grid, .search-filter-grid, .property-search-button-row, .search-search-button-row) {
        grid-template-columns: 1fr !important;
    }

    :is(.property-search-view-toggle, .search-view-toggle) {
        bottom: max(12px, var(--s10-safe-bottom));
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        margin-inline: auto;
        max-width: 320px;
        position: sticky;
        z-index: 30;
    }

    /* Forms */
    form[data-form-enhanced="true"] :is(.form-control, .form-select) {
        font-size: 16px !important;
        min-height: 50px !important;
    }

    .form-wizard-actions {
        bottom: max(8px, var(--s10-safe-bottom)) !important;
        box-shadow: 0 12px 32px rgba(15, 23, 42, .18);
    }

    /* Maps */
    :is(.leaflet-map, .workflow-map, .property-search-map, .property-details-map, .favorites-map, .dashboard-map, .valuation-result-map, .home-map) {
        border-radius: 16px !important;
        height: min(62dvh, 480px) !important;
        min-height: 340px !important;
        width: 100% !important;
    }

    :is(.leaflet-control-zoom a, .leaflet-control-layers-toggle, .leaflet-control-fullscreen a, .gis-map-action, [data-map-action]) {
        align-items: center !important;
        display: flex !important;
        height: var(--s10-touch) !important;
        justify-content: center !important;
        line-height: var(--s10-touch) !important;
        min-height: var(--s10-touch) !important;
        min-width: var(--s10-touch) !important;
        width: var(--s10-touch) !important;
    }

    :is(.gis-map-toolbar, .gis-map-toolbar, .map-toolbar) {
        gap: 6px !important;
        max-width: calc(100% - 16px);
        overflow-x: auto;
        padding: 6px !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    :is(.gis-map-toolbar, .gis-map-toolbar, .map-toolbar)::-webkit-scrollbar { display: none; }

    .leaflet-popup-content-wrapper {
        border-radius: 14px !important;
        max-width: min(84vw, 320px);
    }

    .leaflet-popup-content {
        margin: 12px !important;
        max-width: calc(84vw - 24px);
        min-width: 0 !important;
    }

    .leaflet-control-attribution {
        font-size: 9px !important;
        max-width: 72vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    :fullscreen :is(.leaflet-map, .workflow-map, .property-search-map, .property-details-map, .favorites-map, .dashboard-map, .valuation-result-map),
    .leaflet-container:fullscreen {
        border-radius: 0 !important;
        height: 100dvh !important;
        max-height: none !important;
        width: 100vw !important;
    }

    /* Mobile card tables: labels are supplied by mobile_mobile.js. */
    .table-responsive:has(> table[data-mobile-mobile-table="cards"]) {
        margin-inline: 0 !important;
        overflow: visible !important;
        padding-inline: 0 !important;
    }

    table[data-mobile-mobile-table="cards"] {
        border: 0 !important;
        display: block;
        min-width: 0 !important;
        width: 100% !important;
    }

    table[data-mobile-mobile-table="cards"] thead {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }

    table[data-mobile-mobile-table="cards"] :is(tbody, tr, td) {
        box-sizing: border-box;
        display: block;
        max-width: 100%;
        width: 100%;
    }

    table[data-mobile-mobile-table="cards"] tbody {
        display: grid;
        gap: 12px;
    }

    table[data-mobile-mobile-table="cards"] tbody tr {
        background: var(--surface, #fff);
        border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
        border-radius: 14px;
        box-shadow: 0 6px 18px rgba(15, 23, 42, .06);
        overflow: hidden;
        padding: 6px 12px;
    }

    [data-theme="dark"] table[data-mobile-mobile-table="cards"] tbody tr,
    [data-bs-theme="dark"] table[data-mobile-mobile-table="cards"] tbody tr {
        background: #142034;
    }

    table[data-mobile-mobile-table="cards"] tbody td {
        align-items: start;
        border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent) !important;
        display: grid;
        gap: 10px;
        grid-template-columns: minmax(92px, 38%) minmax(0, 1fr);
        min-height: var(--s10-touch);
        padding: 10px 0 !important;
        text-align: end;
        white-space: normal !important;
    }

    table[data-mobile-mobile-table="cards"] tbody td:last-child {
        border-bottom: 0 !important;
    }

    table[data-mobile-mobile-table="cards"] tbody td::before {
        color: color-mix(in srgb, currentColor 66%, transparent);
        content: attr(data-mobile-label);
        font-size: .75rem;
        font-weight: 800;
        letter-spacing: .02em;
        text-align: start;
    }

    table[data-mobile-mobile-table="cards"] tbody td[data-mobile-label=""]::before {
        display: none;
    }

    table[data-mobile-mobile-table="cards"] tbody td:has(.btn, button, .pagination) {
        align-items: stretch;
        grid-template-columns: 1fr;
        text-align: start;
    }

    table[data-mobile-mobile-table="cards"] tbody td :is(.btn, button) {
        min-height: var(--s10-touch);
    }

    /* Footer */
    .site-footer {
        margin-top: 28px;
        padding-bottom: max(22px, var(--s10-safe-bottom)) !important;
        padding-inline: var(--s10-mobile-gutter) !important;
    }

    .site-footer-grid {
        gap: 22px !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .site-footer-column a {
        align-items: center;
        display: flex;
        min-height: var(--s10-touch);
        padding-block: .35rem;
    }

    .site-footer-bottom {
        align-items: flex-start !important;
        flex-direction: column;
        gap: 10px;
    }

    /* Touch and accessibility */
    :is(button, .btn, [role="button"], .pagination a, .pagination button, summary, .favorite-button, .property-card__actions a) {
        box-sizing: border-box;
        min-height: var(--s10-touch) !important;
    }

    .mobile-touch-target {
        min-height: var(--s10-touch) !important;
    }

    :is(button, .btn, [role="button"], a, input, select, textarea, summary):focus-visible {
        outline: 3px solid #f59e0b !important;
        outline-offset: 3px !important;
    }

    @media (pointer: coarse) {
        :is(button, .btn, [role="button"], .pagination a, .home-mobile-panel a) {
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
        }

        :is(.property-card, .app-card, .workflow-card, .btn, button) {
            transition-duration: .08s !important;
        }
    }
}

@media (max-width: 420px) {
    :root { --s10-mobile-gutter: 12px; }

    .home-brand strong { font-size: .82rem !important; }
    .home-brand-mark { flex-basis: 34px; height: 34px; width: 34px; }

    :is(.hero-actions, .property-section-actions, .property-search-card-actions, .favorites-controls, .home-actions, .admin-hero-actions, .broker-import-actions) {
        grid-template-columns: 1fr !important;
    }

    .site-footer-grid {
        grid-template-columns: 1fr !important;
    }

    table[data-mobile-mobile-table="cards"] tbody td {
        grid-template-columns: minmax(82px, 36%) minmax(0, 1fr);
    }
}

@media (max-width: 340px) {
    .home-language-toggle { display: none !important; }
    .home-brand span:last-child { max-width: 118px; }
    .form-step-list li { flex-basis: 76vw !important; }
}

@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
    .home-mobile-panel {
        border-radius: 16px 0 0 16px;
        inset-block: var(--s10-safe-top) var(--s10-safe-bottom) !important;
        inset-inline: auto 0 !important;
        max-height: none;
        max-width: min(420px, 76vw);
    }

    [dir="rtl"] .home-mobile-panel {
        border-radius: 0 16px 16px 0;
        inset-inline: 0 auto !important;
    }

    :is(.leaflet-map, .workflow-map, .property-search-map, .property-details-map, .favorites-map, .dashboard-map, .valuation-result-map) {
        height: min(78dvh, 420px) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-scroll-top,
    .home-mobile-panel {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

@media (forced-colors: active) {
    .home-mobile-panel,
    .mobile-scroll-top,
    table[data-mobile-mobile-table="cards"] tbody tr {
        border: 1px solid CanvasText !important;
    }

    .mobile-nav-backdrop { background: Canvas; opacity: .72; }
}

@media print {
    .mobile-nav-backdrop,
    .mobile-scroll-top {
        display: none !important;
    }
}