/**
 * RCMMS responsive layer — phones, tablets, laptops (10″–17″+), ultra-wide & HiDPI (1K–8K).
 * Loaded after app.css; extends (does not replace) the fluid token system.
 */

:root {
    --rcmms-bp-mobile: 900px;
    --rcmms-bp-tablet: 1024px;
    --rcmms-bp-laptop-sm: 1280px;
    --rcmms-bp-desktop: 1920px;
    --rcmms-bp-ultra: 2560px;
    --rcmms-bp-4k: 3840px;
    --rcmms-viewport-h: 100dvh;
    --rcmms-viewport-h-fallback: 100vh;
    --rcmms-touch-min: 44px;
    --rcmms-content-max: none;
    --rcmms-safe-top: env(safe-area-inset-top, 0px);
    --rcmms-safe-right: env(safe-area-inset-right, 0px);
    --rcmms-safe-bottom: env(safe-area-inset-bottom, 0px);
    --rcmms-safe-left: env(safe-area-inset-left, 0px);
    --rcmms-drawer-w: min(var(--rcmms-sidebar-w), calc(100vw - 3rem));
    --rcmms-drawer-shadow: 8px 0 40px rgba(45, 36, 53, 0.18);
}

html[data-theme="dark"] {
    --rcmms-drawer-shadow: 12px 0 48px rgba(0, 0, 0, 0.55);
}

/* Dynamic viewport height — mobile browser chrome */
.shell,
.sidebar,
.content {
    min-height: var(--rcmms-viewport-h-fallback);
    min-height: var(--rcmms-viewport-h);
}

.shell {
    height: var(--rcmms-viewport-h-fallback);
    height: var(--rcmms-viewport-h);
}

.sidebar {
    height: var(--rcmms-viewport-h-fallback);
    height: var(--rcmms-viewport-h);
}

.content {
    height: var(--rcmms-viewport-h-fallback);
    height: var(--rcmms-viewport-h);
    padding-left: calc(var(--rcmms-content-pad-x) + var(--rcmms-safe-left));
    padding-right: calc(var(--rcmms-content-pad-x) + var(--rcmms-safe-right));
    padding-bottom: calc(var(--rcmms-content-pad-y) + var(--rcmms-safe-bottom));
}

.topbar.sticky-header {
    padding-top: calc(5px + var(--rcmms-safe-top));
}

/* Readable line length on very wide panels */
.content > section.panel {
    width: 100%;
    max-width: var(--rcmms-content-max);
    margin-left: auto;
    margin-right: auto;
}

/* ── Mobile / tablet drawer nav (≤900px) ─────────────────────────────────── */
.sidebar-backdrop {
    display: none;
}

@media (max-width: 900px) {
    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 190;
        border: 0;
        margin: 0;
        padding: 0;
        background: rgba(15, 12, 22, 0.48);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.28s ease;
        -webkit-tap-highlight-color: transparent;
    }

    html[data-theme="dark"] .sidebar-backdrop {
        background: rgba(0, 0, 0, 0.62);
    }

    .shell.sidebar-drawer-open .sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    /* Override app.css display:none — drawer instead */
    .sidebar {
        display: flex !important;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: var(--rcmms-drawer-w);
        max-width: 100%;
        z-index: 200;
        transform: translateX(-105%);
        transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.32s ease;
        padding-top: calc(18px + var(--rcmms-safe-top));
        padding-bottom: calc(18px + var(--rcmms-safe-bottom));
        padding-left: calc(14px + var(--rcmms-safe-left));
        border-right: 1px solid var(--border);
        box-shadow: none;
    }

    .shell.sidebar-drawer-open .sidebar {
        transform: translateX(0);
        box-shadow: var(--rcmms-drawer-shadow);
    }

    /* Icon-rail collapse is desktop-only */
    .shell.sidebar-collapsed {
        grid-template-columns: 1fr;
    }

    .shell.sidebar-collapsed .brand-sub,
    .shell.sidebar-collapsed .nav-label,
    .shell.sidebar-collapsed .nav-section-heading {
        display: initial;
    }

    .shell.sidebar-collapsed .sidebar a {
        justify-content: flex-start;
        padding: 10px 12px;
    }

    .shell.sidebar-collapsed .nav-submenu {
        position: static;
        opacity: 1;
        pointer-events: auto;
        box-shadow: none;
        background: transparent;
        padding-left: 0.5rem;
    }

    body.rcmms-nav-open {
        overflow: hidden;
        touch-action: none;
    }

    .topbar-left h1 {
        font-size: clamp(1rem, 4.2vw, 1.22rem);
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .user-trigger {
        min-width: 0;
        max-width: 100%;
        flex: 1 1 auto;
    }

    .topbar-tools {
        flex-wrap: wrap;
        gap: 6px;
    }

    /* Tables: smooth horizontal scroll on touch */
    .panel,
    .awm-table-wrap,
    .register-table-wrap,
    [class*="table-wrap"],
    [class*="-table-scroll"] {
        -webkit-overflow-scrolling: touch;
    }

    img,
    video,
    canvas,
    svg:not(.sidebar-toggle__icon):not(.nav-icon svg) {
        max-width: 100%;
        height: auto;
    }
}

@media (max-width: 480px) {
    :root {
        --rcmms-content-pad-x: clamp(10px, 3.5vw, 14px);
        --rcmms-panel-pad: clamp(10px, 3vw, 14px);
    }

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

    .topbar.sticky-header {
        margin-left: calc(-1 * var(--rcmms-content-pad-x));
        margin-right: calc(-1 * var(--rcmms-content-pad-x));
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }
}

/* ── Tablet landscape (901–1024px) ─────────────────────────────────────────── */
@media (min-width: 901px) and (max-width: 1024px) {
    :root {
        --rcmms-card-grid-min: clamp(7rem, 12vw, 9rem);
    }
}

/* ── Small laptops 10″–13″ (1025–1280px) — tighter grids, not smaller text ─ */
@media (min-width: 1025px) and (max-width: 1280px) {
    :root {
        --rcmms-card-grid-min: clamp(7.25rem, 10vw + 2rem, 9.5rem);
        --rcmms-sidebar-w: clamp(200px, 14vw, 228px);
    }
}

/* ── Standard laptops / 1K displays (1281–1920px) ──────────────────────────── */
@media (min-width: 1281px) and (max-width: 1920px) {
    :root {
        --rcmms-content-pad-x: clamp(14px, 1vw + 8px, 24px);
    }
}

/* ── 2K / large desktop (1921–2560px) ────────────────────────────────────── */
@media (min-width: 1921px) {
    :root {
        --rcmms-content-pad-x: clamp(18px, 1.2vw, 32px);
        --rcmms-content-pad-y: clamp(16px, 1.2vw, 28px);
        --rcmms-panel-pad: clamp(16px, 0.8vw + 10px, 24px);
        --rcmms-grid-gap: clamp(10px, 0.5vw + 8px, 16px);
        --rcmms-card-grid-min: clamp(9rem, 5vw + 3rem, 12.5rem);
        --rcmms-content-max: 2200px;
    }
}

/* ── 4K (2561–3839px) ────────────────────────────────────────────────────── */
@media (min-width: 2561px) {
    :root {
        --rcmms-content-max: 2600px;
        --rcmms-sidebar-w: clamp(240px, 10vw, 300px);
    }
}

/* ── 8K and presentation displays (3840px+) ────────────────────────────────── */
@media (min-width: 3840px) {
    :root {
        --rcmms-content-max: 3200px;
        --rcmms-card-grid-min: clamp(10rem, 4vw + 4rem, 14rem);
    }
}

/* ── Touch / coarse pointer ────────────────────────────────────────────────── */
@media (pointer: coarse) {
    .sidebar a,
    .sidebar a.nav-sub,
    .sidebar a.nav-root-link,
    .nav-accordion .nav-section-trigger,
    .btn,
    .sidebar-toggle,
    .topbar-icon-btn,
    .awm-ib {
        min-height: var(--rcmms-touch-min);
    }

    .sidebar-toggle {
        width: var(--rcmms-touch-min);
        height: var(--rcmms-touch-min);
    }
}

/* ── HiDPI / Retina (2x+) — crisper UI without global zoom ─────────────────── */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .brand-mark {
        image-rendering: -webkit-optimize-contrast;
    }

    .topbar.sticky-header,
    .panel,
    .card {
        border-width: 0.5px;
    }
}

@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
    :root {
        --panel-shadow: 0 10px 28px rgba(69, 43, 93, 0.1);
    }

    html[data-theme="dark"] {
        --panel-shadow: 0 12px 32px rgba(0, 0, 0, 0.42);
    }
}

/* ── Landscape phones ──────────────────────────────────────────────────────── */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
    .sidebar {
        width: min(var(--rcmms-drawer-w), 72vw);
        padding-top: calc(10px + var(--rcmms-safe-top));
        padding-bottom: calc(10px + var(--rcmms-safe-bottom));
    }

    .sidebar nav {
        gap: 4px;
    }

    .sidebar a {
        padding-top: 8px;
        padding-bottom: 8px;
    }
}

/* ── Print ─────────────────────────────────────────────────────────────────── */
@media print {
    .sidebar,
    .sidebar-backdrop,
    .topbar-tools,
    .sidebar-toggle {
        display: none !important;
    }

    .shell {
        display: block;
        height: auto;
        min-height: 0;
    }

    .content {
        height: auto;
        overflow: visible;
        padding: 0;
    }

    .panel {
        box-shadow: none;
        border: 1px solid #ccc;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar,
    .sidebar-backdrop {
        transition: none !important;
    }
}

/* ── Dialogs & modals on small screens ─────────────────────────────────────── */
@media (max-width: 900px) {
    .rcmms-dialog-backdrop {
        padding: calc(10px + var(--rcmms-safe-top))
            calc(10px + var(--rcmms-safe-right))
            calc(10px + var(--rcmms-safe-bottom))
            calc(10px + var(--rcmms-safe-left));
        align-items: flex-end;
    }

    .rcmms-dialog {
        max-width: 100%;
        margin-bottom: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    dialog.rcmms-dialog,
    .users-page dialog.rcmms-dialog,
    .roles-page dialog.rcmms-dialog {
        width: calc(100vw - 20px);
        max-width: calc(100vw - 20px);
        max-height: calc(100dvh - 32px);
        margin: auto;
    }
}