/* =========================================
   Pass 17 — Visual QA polish (load LAST on layouts)
   Overrides and mobile safety only; no new component systems.
   Canonical tokens: tokens.css
   See wwwroot/css/DESIGN-SYSTEM.md for load order.
   ========================================= */

html {
    overflow-x: clip;
}

.lyt-public-body,
body.dashboard-body.lyt-dash-body {
    overflow-x: clip;
}

body.mobile-sidebar-open {
    overflow: hidden;
}

/* ----- Public layout ----- */

.section-container {
    padding-inline: var(--space-2);
}

@media (max-width: 480px) {
    .section-container {
        width: min(var(--container-max), calc(100% - var(--space-4)));
    }
}

.lyt-public-body-wrap {
    max-width: 100%;
    overflow-x: clip;
}

.mobile-nav-overlay {
    padding-bottom: max(var(--space-4), env(safe-area-inset-bottom, 0px));
}

.mobile-nav-backdrop {
    cursor: pointer;
}

/* Home landing — layout in home-page.css; QA taps below */
@media (max-width: 768px) {
    .home-hero-content {
        padding: var(--space-8) var(--space-4);
    }

    .home-hero-actions .home-btn {
        min-height: var(--tap-min);
        width: 100%;
        justify-content: center;
    }
}

/* ----- Auth ----- */

@media (max-width: 991.98px) {
    .auth-shell {
        padding: var(--space-6) 0 var(--space-10);
        min-height: auto;
        align-items: stretch;
    }

    .auth-main {
        padding: var(--space-4);
    }

    .auth-card-wrap {
        width: 100%;
        max-width: 100%;
    }
}

.auth-main .btn-premium,
.auth-main .btn-primary-full {
    width: 100%;
}

/* ----- Dashboard shell ----- */

.dashboard-shell,
.lyt-dash-shell {
    max-width: 100%;
    overflow-x: clip;
}

.dashboard-sidebar-footer .btn-icon,
.lyt-dash-sidebar-footer .btn-icon {
    min-width: var(--tap-min);
    min-height: var(--tap-min);
}

.dashboard-user-trigger,
.lyt-dash-user-trigger {
    min-height: var(--tap-min);
}

/* Notifications */
.notification-dropdown-menu {
    max-width: min(360px, calc(100% - var(--space-4)));
}

.notification-dropdown-item {
    min-height: var(--tap-min);
}

.notification-dropdown-item .btn {
    min-height: 36px;
    min-width: 36px;
}

/* Dashboard page content safety */
.dashboard-content img,
.lyt-dash-content img,
.dashboard-content video,
.lyt-dash-content video {
    max-width: 100%;
    height: auto;
}

.dashboard-content .table-responsive,
.lyt-dash-content .table-responsive,
.dashboard-content .dashboard-table-wrap,
.lyt-dash-content .dashboard-table-wrap,
.dashboard-content .dbp-table-scroll,
.lyt-dash-content .dbp-table-scroll {
    max-width: 100%;
}

.dashboard-content .btn:not(.btn-sm):not(.btn-link),
.lyt-dash-content .btn:not(.btn-sm):not(.btn-link),
.dashboard-content .dashboard-btn-modern,
.lyt-dash-content .dashboard-btn-modern {
    min-height: var(--tap-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.dashboard-panel__header {
    flex-wrap: wrap;
    gap: var(--space-3);
}

.dashboard-panel__header .dashboard-link,
.dashboard-panel__header .dbp-action-link-compact {
    min-height: var(--tap-min);
    display: inline-flex;
    align-items: center;
}

/* ----- Book Ride ----- */

.wr-booking-shell {
    max-width: 100%;
    overflow-x: clip;
}

@media (max-width: 768px) {
    .wr-topbar {
        flex-wrap: wrap;
        gap: var(--space-3);
    }

    .wr-topbar-left {
        width: 100%;
    }

    .wr-location-pill {
        width: 100%;
        justify-content: center;
        min-height: var(--tap-min);
    }

    .wr-input-group button {
        min-width: var(--tap-min);
        min-height: var(--tap-min);
    }

    .wr-map-locate {
        width: var(--tap-min);
        height: var(--tap-min);
    }
}

.wr-searching-overlay button,
.wr-toast-inner button {
    min-height: var(--tap-min);
    min-width: var(--tap-min);
}

.wr-action-link,
.wr-secondary-btn,
.wr-danger-btn,
.wr-ghost-btn {
    min-height: var(--tap-min);
}

/* ----- Driver dashboard (canonical: driver-dashboard.css + site.css map legacy) ----- */

.driver-map-shell,
.driver-premium {
    max-width: 100%;
}

.driver-status-switch {
    min-height: var(--tap-min);
}

.driver-status-switch .form-check-input {
    min-width: 2.75rem;
    min-height: 1.35rem;
}

@media (max-width: 768px) {
    .ride-overlay {
        max-width: calc(100% - var(--space-4));
    }

    .driver-action-btn {
        min-height: var(--tap-min);
    }
}

/* Inline dashboard pages (company/driver) — prevent grid blowout */
[class*="cadmin-"],
[class*="driver-premium"] {
    max-width: 100%;
}

@media (max-width: 1200px) {
    .cadmin-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    .cadmin-kpi-grid,
    .cadmin-head {
        grid-template-columns: 1fr !important;
    }

    .cadmin-head-meta {
        white-space: normal;
    }
}