/*
 * Canonical authenticated breakpoints:
 * phone <= 767px, tablet 768-1199px, desktop >= 1200px.
 * Keep these media literals synchronized with tokens.css and responsive.js.
 */

.rtu-stack-below-phone {
    display: flex;
    align-items: center;
    gap: var(--rtu-space-3);
}

.rtu-show-below-phone {
    display: none !important;
}

.rtu-min-touch-target {
    min-inline-size: var(--rtu-touch-target-min);
    min-block-size: var(--rtu-touch-target-min);
}

.rtu-mobile-action-bar {
    position: fixed;
    inset: auto 0 0;
    z-index: 1300;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--rtu-space-1);
    padding:
        var(--rtu-space-2)
        var(--rtu-space-2)
        calc(var(--rtu-space-2) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--rtu-color-border);
    background: color-mix(in srgb, var(--rtu-color-surface) 94%, transparent);
    box-shadow: var(--rtu-elevation-popover);
    backdrop-filter: blur(14px);
}

.rtu-mobile-action-bar .mud-button-root {
    min-width: 0;
    min-height: var(--rtu-touch-target-min);
    padding-inline: var(--rtu-space-1);
    font-size: 0.72rem;
}

.rtu-mobile-action-bar .mud-toggle-icon-button {
    margin: auto;
}

.admin-shell--tablet {
    --admin-shell-padding-x: var(--rtu-space-4);
    --admin-shell-padding-y: var(--rtu-space-3);
}

.admin-shell--tablet .admin-appbar__brand {
    flex: 1 1 18rem;
}

.admin-shell--tablet .admin-brand__subtitle {
    font-size: 0.71rem;
}

.admin-shell--compact .admin-content-shell {
    max-width: 100%;
}

.admin-shell--compact .admin-surface {
    box-shadow: var(--rtu-elevation-card);
}

.admin-shell--phone {
    --admin-appbar-height: 4rem;
    --admin-shell-padding-x: var(--rtu-space-1);
    --admin-shell-padding-y: var(--rtu-space-2);
}

.admin-shell--phone .admin-appbar__brand {
    flex: 1 1 calc(100% - 3rem);
    gap: var(--rtu-space-2);
}

.admin-shell--phone .admin-brand__logo {
    width: 2.35rem;
    height: 2.35rem;
}

.admin-shell--phone .admin-drawer {
    width: min(92vw, 292px) !important;
    max-width: min(92vw, 292px) !important;
}

.admin-shell--phone .admin-nav-hero__text {
    font-size: 0.9rem;
}

@media (max-width: 1199px) {
    .client-trust-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .client-proof-grid,
    .client-proof-banner,
    .client-preview-grid {
        grid-template-columns: 1fr;
    }

    .client-proof-banner__actions {
        justify-content: flex-start;
    }

    .admin-drawer {
        width: min(84vw, 292px) !important;
        max-width: min(84vw, 292px) !important;
    }

    .admin-content {
        padding: var(--rtu-space-3) var(--rtu-space-3) 4.5rem;
    }

    .admin-surface {
        padding: var(--rtu-space-6) !important;
    }

    .admin-map-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-detail-panel {
        position: static;
    }
}

@media (max-width: 767px) {
    .rtu-hide-below-phone {
        display: none !important;
    }

    .rtu-show-below-phone {
        display: grid !important;
    }

    .rtu-stack-below-phone {
        flex-direction: column;
        align-items: stretch;
    }

    .client-quick-shell {
        padding-bottom: calc(4rem + env(safe-area-inset-bottom));
    }

    .rtu-authenticated-shell :where(.mud-button-root, .mud-icon-button, .mud-nav-link, a, button, input, select, textarea, [role="button"]) {
        min-inline-size: var(--rtu-touch-target-min);
        min-block-size: var(--rtu-touch-target-min);
    }

    .rtu-authenticated-shell a:not(.mud-nav-link) {
        display: inline-flex;
        align-items: center;
    }

    .rtu-authenticated-shell .leaflet-control-zoom {
        display: flex;
        flex-direction: column;
    }

    .rtu-authenticated-shell .leaflet-control-zoom a {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .rtu-authenticated-shell :where(.mud-icon-button, [role="button"]) {
        min-inline-size: var(--rtu-touch-target-min);
    }

    .rtu-authenticated-shell .mud-stack[style*="flex-direction: row"],
    .rtu-authenticated-shell .mud-stack[style*="flex-direction:row"] {
        max-width: 100%;
        flex-wrap: wrap !important;
    }

    :where(.mud-dialog, .mud-popover) {
        max-width: calc(100vw - (2 * var(--rtu-space-2)));
    }

    :where(.mud-dialog, .mud-popover) :where(a, button, input, select, textarea, [role="button"], .mud-button-root, .mud-icon-button) {
        min-inline-size: var(--rtu-touch-target-min);
        min-block-size: var(--rtu-touch-target-min);
    }

    .client-brand-copy small {
        display: none;
    }

    .client-appbar,
    .client-quick-appbar {
        align-items: center;
        min-height: 4rem;
        padding-inline: var(--rtu-space-2);
    }

    .client-appbar-quick,
    .client-appbar-chip {
        display: none !important;
    }

    .client-appbar-actions {
        display: flex;
        align-items: center;
    }

    .client-main-container {
        padding: calc(4rem + var(--rtu-space-3)) var(--rtu-space-2) var(--rtu-space-6);
    }

    .client-quick-main {
        padding: calc(4rem + var(--rtu-space-3)) var(--rtu-space-2) calc(5rem + env(safe-area-inset-bottom));
    }

    .client-login-main {
        padding: calc(4rem + var(--rtu-space-4)) var(--rtu-space-2) var(--rtu-space-6);
    }

    .client-login-hero {
        gap: var(--rtu-space-6);
    }

    .client-login-copy {
        text-align: center;
    }

    .client-login-copy__facts {
        grid-template-columns: 1fr;
    }

    .client-hero-layout,
    .client-hero-actions,
    .client-summary-chips,
    .client-quick-device-card__header,
    .client-quick-device-card__actions,
    .client-device-members__row {
        flex-direction: column;
        align-items: stretch;
    }

    .client-hero-actions,
    .client-summary-chips {
        width: 100%;
    }

    .client-hero-actions .mud-button-root,
    .client-full-width-mobile,
    .client-quick-device-card__actions .mud-button-root {
        width: 100%;
        min-width: 0;
        flex-basis: auto;
    }

    .client-home-header__actions {
        width: 100%;
        justify-content: flex-start;
    }

    .client-trust-grid,
    .client-proof-grid,
    .client-preview-grid {
        grid-template-columns: 1fr;
    }

    .client-map-shell__canvas,
    .client-map-shell__canvas .leaflet-container {
        height: 20rem;
    }

    .client-proof-banner__meta div {
        align-items: flex-start;
        flex-direction: column;
    }

    .rtu-authenticated-shell .mud-simple-table table {
        min-width: 42rem;
    }

    .admin-appbar {
        min-height: 4rem;
    }

    .admin-appbar__row {
        gap: var(--rtu-space-2);
        align-items: center;
        flex-wrap: nowrap;
    }

    .admin-appbar__brand {
        min-width: 0;
        flex: 1 1 auto;
        gap: var(--rtu-space-2);
    }

    .admin-brand {
        font-size: 0.98rem;
        line-height: 1.2;
    }

    .admin-brand__logo {
        width: 2.45rem;
        height: 2.45rem;
    }

    .admin-brand__subtitle,
    .admin-user-chip,
    .admin-device-chip,
    .admin-nav-chip {
        display: none !important;
    }

    .admin-content {
        padding: var(--rtu-space-2) var(--rtu-space-1) 4.2rem;
    }

    .admin-surface {
        border-radius: var(--rtu-radius-md);
        padding: var(--rtu-space-4) !important;
    }

    .admin-page .mud-typography-h4 {
        font-size: 1.85rem;
        line-height: 2.1rem;
    }

    .admin-page .mud-typography-h6 {
        font-size: 1.08rem;
        line-height: 1.35rem;
    }

    .admin-module-grid {
        grid-template-columns: 1fr;
    }

    .admin-kpi {
        min-height: 132px;
        padding: var(--rtu-space-4) !important;
    }

    .admin-page :where(.mud-table-container, .admin-table-shell) {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .admin-page :where(.mud-simple-table table, .mud-table-root table) {
        min-width: 760px;
    }

    .admin-page .mud-paper {
        max-width: 100%;
    }

    .admin-detail-panel {
        position: static;
    }

    .admin-map-canvas,
    .admin-map-canvas .leaflet-container {
        min-height: 24rem;
        height: 52vh;
    }

    .admin-footer {
        padding-inline: var(--rtu-space-2);
        font-size: 0.76rem;
    }

    .rtu-alice-appbar .mud-typography-h6 {
        font-size: 1rem;
    }

    .rtu-alice-main {
        padding:
            calc(4rem + var(--rtu-space-3))
            var(--rtu-space-2)
            calc(var(--rtu-space-8) + env(safe-area-inset-bottom));
    }

    .rtu-alice-card {
        padding: var(--rtu-space-4) !important;
    }

    .rtu-alice-card .mud-button-root {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .admin-brand {
        font-size: 0.9rem;
    }

    .admin-logout .mud-button-label {
        font-size: 0;
    }

    .admin-page-header {
        padding: var(--rtu-space-4) !important;
    }

    .admin-nav-hero {
        margin-inline: var(--rtu-space-2);
        padding: var(--rtu-space-3);
    }

    .admin-nav-hero__logo {
        width: 2rem;
        height: 2rem;
    }

    .admin-page .mud-typography-h4 {
        font-size: 1.6rem;
        line-height: 1.95rem;
    }

    .admin-page :where(.mud-simple-table table, .mud-table-root table, .admin-table-shell .mud-simple-table) {
        min-width: 860px;
    }
}

@media (min-width: 1024px) and (max-width: 1199px) and (orientation: portrait) {
    .admin-shell--tablet .admin-content-shell {
        max-width: 100%;
    }

    .admin-shell--tablet .admin-surface {
        padding: var(--rtu-space-6) !important;
    }

    .admin-shell--tablet .admin-kpi {
        min-height: 144px;
    }
}