/* Shared mobile layout overrides. Loaded after page-specific styles. */

@media (max-width: 960px) {
    html {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body {
        width: 100%;
        max-width: 100%;
        /* hidden = fallback pre staré prehliadače; clip nevytvára scroll
           container, takže position:sticky v reporte funguje aj na mobile. */
        overflow-x: hidden;
        overflow-x: clip;
    }

    body {
        min-width: 0;
        -webkit-text-size-adjust: 100%;
    }

    img,
    video,
    canvas,
    svg {
        max-width: 100%;
    }

    input,
    select,
    textarea {
        max-width: 100%;
        font-size: 16px !important;
    }

    button,
    a,
    input,
    select,
    textarea {
        touch-action: manipulation;
    }

    h1,
    h2,
    h3,
    p,
    span,
    strong,
    a,
    button,
    label,
    td,
    th {
        overflow-wrap: anywhere;
    }

    /* Public valuation flow */
    body > nav {
        gap: 0.65rem !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    body > main,
    main.max-w-7xl,
    main.max-w-\[96rem\] {
        width: 100%;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    #analysis-form {
        padding: 1rem !important;
        border-radius: 1rem !important;
    }

    .wizard-stage {
        min-height: 0 !important;
        padding: 1.25rem 0.25rem !important;
    }

    .wizard-stage h2,
    .wizard-big-question,
    #wizard-question {
        font-size: clamp(2rem, 10vw, 3.1rem) !important;
        line-height: 1.04 !important;
        letter-spacing: 0 !important;
    }

    .wizard-choice-grid,
    .wizard-choice-grid.cols-3,
    .wizard-choice-grid.cols-4,
    .wizard-choice-grid.cols-6 {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0.65rem !important;
    }

    .wizard-choice-card {
        min-height: 0 !important;
        padding: 1rem !important;
    }

    .wizard-step-list {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 0.45rem !important;
        overflow-x: auto;
        padding: 0.15rem 0.05rem 0.4rem;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .wizard-step-list::-webkit-scrollbar,
    .sidebar-list::-webkit-scrollbar,
    .account-nav-list::-webkit-scrollbar {
        display: none;
    }

    .wizard-step-pill {
        flex: 0 0 auto !important;
        min-width: 4.3rem;
        padding: 0.45rem 0.55rem !important;
        scroll-snap-align: start;
    }

    .wizard-step-label {
        display: block !important;
        white-space: nowrap;
    }

    .wizard-bottom-actions {
        align-items: stretch !important;
        gap: 0.65rem !important;
    }

    .wizard-bottom-actions button,
    .wizard-bottom-actions a {
        width: 100%;
        justify-content: center;
    }

    .tracking-modal-shell,
    .property-modal-shell {
        align-items: flex-end !important;
        padding: 0.6rem !important;
    }

    /*
     * Mortgage and AML forms are much taller than the viewport. Bottom
     * alignment moves the start of an oversized flex item above the scroll
     * origin, so the first several thousand pixels become unreachable.
     * These full-page tools must always start at the top of their own scroller.
     */
    #mortgage-modal > .tracking-modal-shell,
    #aml-modal > .tracking-modal-shell {
        align-items: flex-start !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
    }

    .tracking-modal-card,
    .property-modal-card,
    .overlay-shell {
        width: 100% !important;
        max-width: none !important;
        max-height: calc(100dvh - 1.2rem) !important;
        overflow-y: auto !important;
        border-radius: 1rem !important;
    }

    /* Portfolio */
    .account-dashboard-shell:not(.hidden) {
        display: block !important;
        width: 100%;
    }

    .account-sidebar {
        position: sticky !important;
        top: 0.45rem !important;
        z-index: 35;
        display: block !important;
        padding: 0.45rem !important;
        margin-bottom: 0.75rem;
        overflow: hidden;
        border-radius: 0.9rem !important;
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    .account-sidebar-copy,
    .account-sidebar-note {
        display: none !important;
    }

    .account-nav-list {
        display: flex !important;
        gap: 0.35rem !important;
        overflow-x: auto;
        padding-bottom: 0.1rem;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .account-nav-link {
        flex: 0 0 auto;
        align-items: center !important;
        min-height: 42px;
        padding: 0.6rem 0.75rem !important;
        border-radius: 0.7rem !important;
        scroll-snap-align: start;
    }

    .account-nav-link i {
        margin-top: 0 !important;
    }

    .account-nav-link strong {
        white-space: nowrap;
        font-size: 0.82rem !important;
    }

    .account-nav-link span {
        display: none !important;
    }

    .account-main {
        gap: 0.75rem !important;
    }

    .account-hero,
    .account-detail-shell {
        padding: 0.85rem !important;
        border-radius: 1rem !important;
    }

    .account-hero-grid,
    .account-summary-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .account-hero-title {
        font-size: clamp(1.75rem, 9vw, 2.4rem) !important;
        letter-spacing: 0 !important;
    }

    .account-section-heading {
        align-items: flex-start !important;
        flex-direction: column;
        gap: 0.55rem !important;
    }

    .account-section-heading > * {
        max-width: 100%;
    }

    .portfolio-row {
        padding: 0.85rem !important;
    }

    .portfolio-row .grid {
        min-width: 0;
    }

    #portfolio-user-menu {
        position: fixed !important;
        top: 4.15rem !important;
        right: 0.65rem !important;
        left: 0.65rem !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: calc(100dvh - 4.8rem);
        overflow-y: auto;
    }

    /* Administration */
    .admin-topbar {
        gap: 0.55rem !important;
        padding: 0.65rem 0.75rem !important;
    }

    .admin-topbar > div:last-child {
        gap: 0.35rem !important;
    }

    .admin-shell {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0.75rem !important;
    }

    .admin-sidebar {
        position: sticky !important;
        top: 3.75rem !important;
        z-index: 35;
        display: block !important;
        width: 100% !important;
        padding: 0.45rem !important;
        overflow: hidden;
        border-radius: 0.9rem !important;
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    .sidebar-heading {
        display: none !important;
    }

    .sidebar-list {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.35rem !important;
        width: 100%;
        overflow-x: auto;
        padding-bottom: 0.1rem;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .sidebar-item {
        flex: 0 0 auto !important;
        width: auto !important;
        min-height: 42px;
        padding: 0.58rem 0.7rem !important;
        gap: 0.45rem !important;
        border-radius: 0.7rem !important;
        white-space: nowrap;
        scroll-snap-align: start;
    }

    .sidebar-item i,
    .sidebar-item .lucide {
        width: 1rem !important;
        height: 1rem !important;
    }

    .admin-main,
    #admin-view-root,
    .view-section {
        width: 100%;
        min-width: 0;
    }

    .admin-main > section,
    #admin-view-root > section {
        max-width: 100%;
    }

    .admin-toolbar,
    .admin-toolbar-row,
    .admin-toolbar-actions,
    .admin-filter-row,
    .admin-filter-bar {
        flex-wrap: wrap !important;
    }

    .admin-filter-select,
    .admin-filter-input,
    .admin-toolbar input,
    .admin-toolbar select {
        flex: 1 1 10rem;
        width: auto !important;
        min-width: 0 !important;
    }

    .properties-table-card,
    .admin-main .overflow-x-auto {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .properties-table {
        width: max-content !important;
        min-width: 45rem !important;
        table-layout: auto !important;
    }

    .properties-table th,
    .properties-table td {
        white-space: nowrap;
    }

    .user-menu {
        position: fixed !important;
        top: 3.9rem !important;
        right: 0.65rem !important;
        left: 0.65rem !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: calc(100dvh - 4.55rem) !important;
        overflow-y: auto;
    }

    .setup-widget {
        right: 0.65rem !important;
        bottom: calc(0.65rem + env(safe-area-inset-bottom)) !important;
        left: 0.65rem !important;
        width: auto !important;
        max-width: none !important;
    }

    .admin-modal-backdrop {
        align-items: flex-end !important;
        padding: 0.6rem !important;
    }

    .admin-modal-card {
        width: 100% !important;
        max-width: none !important;
        max-height: calc(100dvh - 1.2rem) !important;
        border-radius: 1rem !important;
    }

    .admin-modal-header,
    .admin-modal-body,
    .admin-modal-footer {
        padding-left: 0.9rem !important;
        padding-right: 0.9rem !important;
    }

    .admin-modal-footer {
        flex-wrap: wrap;
    }

    .admin-modal-footer button {
        flex: 1 1 9rem;
        justify-content: center;
    }

    /* Standalone report and supporting tools */
    .report-shell,
    .report-container,
    .page-shell,
    .tool-shell {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .report-grid,
    .result-grid,
    .analysis-grid,
    .tool-grid,
    .form-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .report-toolbar,
    .top-actions,
    .button-row,
    .action-row {
        flex-wrap: wrap !important;
    }

    .report-toolbar button,
    .report-toolbar a,
    .button-row button,
    .action-row button {
        min-height: 44px;
    }
}

@media (max-width: 640px) {
    body > nav .text-lg {
        font-size: 0.98rem !important;
    }

    body > nav .rounded-full,
    .admin-topbar .icon-btn,
    .admin-topbar button {
        flex-shrink: 0;
    }

    #analysis-form {
        padding: 0.75rem !important;
    }

    .wizard-stage {
        padding: 1rem 0 !important;
    }

    .wizard-step-pill {
        min-width: 3.75rem;
    }

    .wizard-step-label {
        font-size: 0.68rem !important;
    }

    .account-highlight-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
    }

    .account-highlight-pill {
        border-radius: 0.65rem !important;
    }

    .portfolio-row .grid-cols-2,
    .portfolio-row .grid-cols-3,
    .portfolio-row .grid-cols-4 {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #admin-view-root h1,
    #admin-view-root h2,
    #admin-view-root .view-title {
        font-size: clamp(1.35rem, 7vw, 2rem) !important;
        line-height: 1.1 !important;
        letter-spacing: 0 !important;
    }

    #admin-view-root .grid-cols-3,
    #admin-view-root .grid-cols-4,
    #admin-view-root .lg\:grid-cols-3,
    #admin-view-root .lg\:grid-cols-4 {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .expense-row {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }

    .expense-row > *:last-child {
        grid-column: 1 / -1;
    }

    .admin-modal-title {
        font-size: 1rem !important;
    }

    .admin-modal-body {
        padding-top: 0.8rem !important;
        padding-bottom: 0.8rem !important;
    }

    .report-topbar,
    .topbar {
        align-items: flex-start !important;
        flex-wrap: wrap !important;
        gap: 0.65rem !important;
        padding: 0.75rem !important;
    }

    .report-toolbar,
    .top-actions {
        width: 100%;
        justify-content: flex-start !important;
        overflow-x: auto;
        flex-wrap: nowrap !important;
        padding-bottom: 0.2rem;
        scroll-padding-left: 0;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .report-toolbar::-webkit-scrollbar,
    .top-actions::-webkit-scrollbar {
        display: none;
    }

    .report-toolbar > *,
    .top-actions > * {
        flex: 0 0 auto;
    }

    .report-hero h1,
    .hero-address,
    .empty-state h1 {
        font-size: clamp(1.8rem, 10vw, 2.8rem) !important;
        line-height: 1.05 !important;
        letter-spacing: 0 !important;
    }

    .card-inner,
    .report-card,
    .tool-card {
        padding: 0.85rem !important;
        border-radius: 0.9rem !important;
    }
}

@media (max-width: 380px) {
    .admin-topbar {
        padding-left: 0.55rem !important;
        padding-right: 0.55rem !important;
    }

    .admin-topbar .brand-copy,
    .admin-topbar .brand-subtitle {
        display: none !important;
    }

    .account-nav-link,
    .sidebar-item {
        padding-left: 0.6rem !important;
        padding-right: 0.6rem !important;
    }
}