:root {
    --field-touch-target: 44px;
    --field-bottom-nav-height: 70px;
}

.mobile-only { display: none !important; }
.desktop-only { display: initial !important; }

.field-page-title {
    font-weight: 700;
    font-size: 1.15rem;
    margin-bottom: .75rem;
}

.field-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
}

.mobile-card-list { display: grid; gap: .75rem; }
.mobile-tap-card {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .75rem;
    background: #fff;
    padding: .75rem;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.05);
}

.mobile-sticky-actions {
    position: sticky;
    bottom: 0;
    z-index: 1020;
    background: #fff;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    padding: .65rem;
}

.mobile-estimator-summary {
    position: sticky;
    top: .5rem;
    z-index: 1010;
    border: 2px solid rgba(25, 135, 84, .25);
}

.mobile-action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1045;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    background: #fff;
    padding: .35rem .5rem calc(.35rem + env(safe-area-inset-bottom));
}

.mobile-action-bar .btn {
    min-height: var(--field-touch-target);
    border-radius: .65rem;
    font-size: .75rem;
    padding: .35rem .2rem;
}

.btn,
.form-control,
.form-select,
.input-group-text,
.nav-link,
a.btn {
    min-height: var(--field-touch-target);
}

@media (max-width: 991.98px) {
    .mobile-only { display: block !important; }
    .desktop-only,
    .desktop-heavy,
    .desktop-sidebar,
    .desktop-filter-panel,
    .desktop-chart,
    .desktop-audit-log { display: none !important; }

    .desktop-table { display: none !important; }

    body.has-mobile-action-bar {
        padding-bottom: calc(var(--field-bottom-nav-height) + env(safe-area-inset-bottom));
    }

    .container,
    .container-fluid,
    [class*="col-"] {
        min-width: 0;
    }

    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .btn-group,
    .d-flex {
        flex-wrap: wrap;
    }

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

    .field-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mobile-sticky-actions {
        margin-left: -.75rem;
        margin-right: -.75rem;
    }
}

.mapstack-mobile-tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    margin-bottom: .75rem;
}

.mapstack-mobile-tools .btn {
    min-height: 48px;
    font-size: .9rem;
}

#basemapSelector .btn.active {
    color: #fff;
}

@media (max-width: 991.98px) {
    #basemapSelector {
        position: fixed;
        right: .75rem;
        bottom: calc(var(--field-bottom-nav-height) + 1rem);
        z-index: 1030;
        box-shadow: 0 .35rem 1rem rgba(0,0,0,.15);
    }

    #basemapSelector .btn {
        padding: .4rem .55rem;
        font-size: .75rem;
    }
}