/**
 * Unified responsive system — driven by html[data-layout] set by responsive.js
 *
 * Layout rule (JS in assets/web-js/responsive.js — do not duplicate here):
 *   mobile  → touch devices (phone + tablet, any orientation)
 *   desktop → mouse/trackpad + width >= 1024px
 *
 * Width breakpoints (--n360-bp-*) are for fine-grained sizing only,
 * NOT for choosing mobile vs desktop shell.
 */

:root {
    --n360-bp-xs: 540px;
    --n360-bp-sm: 660px;
    --n360-bp-md: 768px;
    --n360-bp-lg: 840px;
    --n360-bp-xl: 1024px;
}

/* ── Layout visibility (follows data-layout, NOT viewport width) ── */

.r-show-mobile,
.r-flex-mobile,
.r-show-desktop,
.r-flex-desktop {
    display: none !important;
}

html[data-layout="mobile"] .r-show-mobile {
    display: block !important;
}

html[data-layout="mobile"] .r-flex-mobile {
    display: flex !important;
}

html[data-layout="mobile"] .r-hide-mobile {
    display: none !important;
}

html[data-layout="desktop"] .r-show-desktop {
    display: block !important;
}

html[data-layout="desktop"] .r-flex-desktop {
    display: flex !important;
}

html[data-layout="desktop"] .r-hide-desktop {
    display: none !important;
}

/* Intro header aliases */
.hidden-header-tablet,
.hidden-header-mb {
    display: none !important;
}

html[data-layout="mobile"] .hidden-header-tablet {
    display: block !important;
}

html[data-layout="mobile"] .hidden-header-mb {
    display: none !important;
}

html[data-layout="desktop"] .hidden-header-tablet {
    display: none !important;
}

html[data-layout="desktop"] .hidden-header-mb {
    display: block !important;
}

/* Stack direction */
.r-stack-mobile {
    display: flex;
    flex-direction: row;
}

html[data-layout="mobile"] .r-stack-mobile {
    flex-direction: column;
}

html[data-layout="desktop"] .r-stack-mobile {
    flex-direction: row;
}

/* ── App shell overrides (desktop chrome → mobile on touch/tablet) ── */

html[data-layout="mobile"] body {
    overflow: scroll !important;
}

html[data-layout="mobile"] #sidebar,
html[data-layout="mobile"] .sidebar.sidebar-fixed,
html[data-layout="mobile"] .sidebar.sidebar-dark {
    display: none !important;
}

html[data-layout="mobile"] .wrapper .body.flex-grow-1 {
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    margin-top: -1px !important;
}

html[data-layout="mobile"] .wrapper.d-flex.flex-column.min-vh-100.bg-light {
    background: #1e1e1e !important;
}

/* ── Width-only utilities (sub-breakpoints within a layout) ── */

@media screen and (max-width: 539px) {
    .r-xs-only { display: block !important; }
}

@media screen and (min-width: 540px) {
    .r-xs-only { display: none !important; }
}

@media screen and (max-width: 659px) {
    .r-sm-down { display: block !important; }
}

@media screen and (min-width: 660px) {
    .r-sm-up { display: block !important; }
}

@media screen and (max-width: 839px) {
    .r-lg-down { display: block !important; }
}

@media screen and (min-width: 840px) {
    .r-lg-up { display: block !important; }
}