/**
 * ============================================================
 * COMMISSARYOS APPEARANCE ENGINE (css/appearance-engine.css)
 * ============================================================
 * Declarative Structural Layouts, Drawer Mechanics & Geometry
 * Supports 7 layouts:
 *   - default        : Fixed full-width header + vertical sidebar
 *   - mini           : 76px compact rail with hover expansion
 *   - twocolumn      : Group icon rail (70px) + panel (210px)
 *   - horizontal     : Full-width topbar navigation + dropdowns
 *   - detached       : Floating cards with gutters and elevation
 *   - without-header : Full-height sidebar with hidden topbar
 *   - rtl            : Mirrored logical layout
 *
 * Scoped to html[data-theme-pack="dreamspos"] for structural changes.
 * Preserves Commissary Classic byte-for-byte on desktop!
 * ============================================================
 */

/* ── 1. Appearance CSS Custom Properties ─────────────────── */
:root {
    --app-header-h: 64px;
    --app-header-bg: var(--bg-base);
    --app-header-fg: var(--text-main);
    --app-header-border: var(--border);
    --app-header-hover: rgb(var(--rgb-white) / 0.06);

    --app-sidebar-bg: var(--bg-base);
    --app-sidebar-fg: var(--text-subtle);
    --app-sidebar-border: var(--border);
    --app-sidebar-w: 260px;
    --app-sidebar-w-mini: 76px;
    --app-sidebar-w-twocol: 280px;

    --app-radius: 10px;
    --app-content-pad: 24px;
    --app-transition-speed: 0.22s;
}

/* ── 2. Shared Drawer & Backdrop Mechanics ───────────────── */
.appearance-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 1040;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--app-transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.appearance-backdrop.is-active:not([hidden]) {
    opacity: 1;
    pointer-events: auto;
}

.appearance-backdrop[hidden] {
    display: none !important;
}

body.appearance-lock {
    overflow: hidden !important;
    touch-action: none;
}

/* Safe area support for notched displays and bottom home bars */
.admin-sidebar,
.appearance-drawer,
.sidebar-footer {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── 3. Two-Column Rail & Panel (Shared Elements) ────────── */
.sidebar-twocolumn-wrap {
    display: none;
}

.sidebar-standard-wrap {
    display: block;
    width: 100%;
}

.nav-rail {
    width: 70px;
    min-width: 70px;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0;
    gap: 8px;
    background: var(--bg-deep);
    overflow-y: auto;
}

.nav-rail-btn {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.12s;
}

.nav-rail-btn:hover {
    background: var(--bg-hover);
    color: var(--text-main);
    transform: scale(1.04);
}

.nav-rail-btn.is-active {
    background: rgb(var(--rgb-accent) / 0.15);
    border-color: var(--accent);
    color: var(--accent);
}

.nav-panel {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: var(--bg-base);
}

.nav-panel-group {
    display: none;
    padding: 10px 6px;
}

.nav-panel-group.is-active {
    display: block;
}

.nav-panel-header {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    padding: 6px 12px 8px;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 6px;
}

/* ── 4. Horizontal Topnav Menu (Shared Elements) ─────────── */
.app-topnav {
    display: none;
}

.app-topnav-menu {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.app-topnav-item {
    position: relative;
}

.app-topnav-link {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 6px 12px;
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--app-header-fg);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s, color 0.15s;
    height: 36px;
}

.app-topnav-link:hover,
.app-topnav-item.is-open .app-topnav-link {
    background: var(--app-header-hover);
    border-color: var(--border-subtle);
}

.app-topnav-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 220px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    padding: 6px;
    display: none;
    flex-direction: column;
    z-index: 1050;
}

.app-topnav-item:hover .app-topnav-dropdown,
.app-topnav-item.is-open .app-topnav-dropdown {
    display: flex;
}

.app-topnav-dropdown .nav-tab {
    width: 100%;
    text-align: left;
    padding: 7px 10px;
    border-radius: 6px;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-main);
    cursor: pointer;
}

.app-topnav-dropdown .nav-tab:hover {
    background: var(--bg-hover);
}

.app-topnav-dropdown .nav-tab.active {
    background: rgb(var(--rgb-accent) / 0.15);
    color: var(--accent);
    font-weight: 600;
}

/* ══════════════════════════════════════════════════════════ */
/* 5. DREAMS POS BASE FULL-WIDTH HEADER SHELL                */
/* ══════════════════════════════════════════════════════════ */

html[data-theme-pack="dreamspos"] .admin-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--app-header-h);
    z-index: 1020;
    background: var(--app-header-bg);
    color: var(--app-header-fg);
    border-bottom: 1px solid var(--app-header-border);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    overflow: visible;
}

html[data-theme-pack="dreamspos"] .admin-sidebar {
    position: fixed;
    top: var(--app-header-h);
    left: 0;
    right: auto;
    bottom: 0;
    height: calc(100vh - var(--app-header-h));
    height: calc(100dvh - var(--app-header-h));
    width: var(--app-sidebar-w);
    min-width: var(--app-sidebar-w);
    max-width: var(--app-sidebar-w);
    z-index: 1010;
    background: var(--app-sidebar-bg);
    color: var(--app-sidebar-fg);
    border-right: 1px solid var(--app-sidebar-border);
    border-left: none;
    transition: width var(--app-transition-speed) ease, transform var(--app-transition-speed) ease, box-shadow var(--app-transition-speed) ease;
}

html[data-theme-pack="dreamspos"] .admin-main {
    margin-left: var(--app-sidebar-w);
    margin-right: 0;
    padding-top: var(--app-header-h);
    width: calc(100% - var(--app-sidebar-w));
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    transition: margin-left var(--app-transition-speed) ease, margin-right var(--app-transition-speed) ease, width var(--app-transition-speed) ease;
}

html[data-theme-pack="dreamspos"] .admin-container {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    padding: var(--app-content-pad);
}

/* ══════════════════════════════════════════════════════════ */
/* 6. LAYOUT: MINI SIDEBAR (76px compact rail)               */
/* ══════════════════════════════════════════════════════════ */

html[data-layout="mini"] .admin-sidebar,
body.mini-sidebar .admin-sidebar {
    position: fixed !important;
    top: var(--app-header-h) !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    height: calc(100vh - var(--app-header-h)) !important;
    height: calc(100dvh - var(--app-header-h)) !important;
    width: var(--app-sidebar-w-mini) !important;
    min-width: var(--app-sidebar-w-mini) !important;
    max-width: var(--app-sidebar-w-mini) !important;
    overflow-x: hidden !important;
    z-index: 1010 !important;
    background: var(--app-sidebar-bg) !important;
    border-right: 1px solid var(--app-sidebar-border) !important;
    border-left: none !important;
}

html[data-layout="mini"] .admin-main,
body.mini-sidebar .admin-main {
    margin-left: var(--app-sidebar-w-mini) !important;
    margin-right: 0 !important;
    width: calc(100% - var(--app-sidebar-w-mini)) !important;
    padding-top: var(--app-header-h) !important;
}

html[data-layout="mini"] .sidebar-inner,
body.mini-sidebar .sidebar-inner {
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

html[data-layout="mini"] .sidebar-header,
body.mini-sidebar .sidebar-header {
    padding: 0 6px !important;
    justify-content: center !important;
}

html[data-layout="mini"] .sidebar-header .sidebar-brand,
body.mini-sidebar .sidebar-header .sidebar-brand {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}

html[data-layout="mini"] .sidebar-header .sidebar-brand-img,
body.mini-sidebar .sidebar-header .sidebar-brand-img {
    max-width: 38px !important;
    height: 26px !important;
    object-fit: contain !important;
}

html[data-layout="mini"] .sidebar-header .sidebar-brand .brand-text,
body.mini-sidebar .sidebar-header .sidebar-brand .brand-text,
html[data-layout="mini"] .sidebar-header .sidebar-close-btn,
body.mini-sidebar .sidebar-header .sidebar-close-btn,
html[data-layout="mini"] .nav-group-title,
body.mini-sidebar .nav-group-title,
html[data-layout="mini"] .tab-label,
body.mini-sidebar .tab-label,
html[data-layout="mini"] .sidebar-search-wrap,
body.mini-sidebar .sidebar-search-wrap,
html[data-layout="mini"] .sidebar-action-btn .tab-label,
body.mini-sidebar .sidebar-action-btn .tab-label {
    display: none !important;
}

html[data-layout="mini"] .sidebar-body,
body.mini-sidebar .sidebar-body {
    padding: 8px 4px !important;
    overflow-x: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

html[data-layout="mini"] .sidebar-standard-wrap,
body.mini-sidebar .sidebar-standard-wrap {
    width: 100% !important;
}

html[data-layout="mini"] .admin-nav-vertical,
body.mini-sidebar .admin-nav-vertical {
    width: 100% !important;
    align-items: center !important;
    gap: 6px !important;
}

html[data-layout="mini"] .nav-group,
body.mini-sidebar .nav-group {
    background: transparent !important;
    border: none !important;
    padding: 2px 0 !important;
    gap: 6px !important;
    width: 100% !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

html[data-layout="mini"] .nav-tab,
body.mini-sidebar .nav-tab {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    justify-content: center !important;
    align-items: center !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}

html[data-layout="mini"] .nav-tab .tab-icon,
body.mini-sidebar .nav-tab .tab-icon {
    margin: 0 !important;
    font-size: 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html[data-layout="mini"] .nav-tab.active,
body.mini-sidebar .nav-tab.active {
    background: rgb(var(--rgb-accent) / 0.16) !important;
    color: var(--accent) !important;
    border: 1px solid var(--accent) !important;
    box-shadow: 0 2px 8px rgb(var(--rgb-accent) / 0.25) !important;
}

html[data-layout="mini"] .sidebar-action-btn,
body.mini-sidebar .sidebar-action-btn {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}

/* Hover expansion on desktop for mini sidebar */
@media (min-width: 992px) {
    html[data-layout="mini"] .admin-sidebar:hover,
    body.mini-sidebar .admin-sidebar:hover {
        width: var(--app-sidebar-w) !important;
        min-width: var(--app-sidebar-w) !important;
        max-width: var(--app-sidebar-w) !important;
        box-shadow: 8px 0 32px rgba(0, 0, 0, 0.55) !important;
        z-index: 1040 !important;
    }

    html[data-layout="mini"] .admin-sidebar:hover .sidebar-header,
    body.mini-sidebar .admin-sidebar:hover .sidebar-header {
        padding: 0 16px !important;
        justify-content: space-between !important;
    }

    html[data-layout="mini"] .admin-sidebar:hover .sidebar-brand,
    body.mini-sidebar .admin-sidebar:hover .sidebar-brand {
        justify-content: flex-start !important;
        width: auto !important;
    }

    html[data-layout="mini"] .admin-sidebar:hover .sidebar-brand-img,
    body.mini-sidebar .admin-sidebar:hover .sidebar-brand-img {
        max-width: 145px !important;
    }

    html[data-layout="mini"] .admin-sidebar:hover .brand-text,
    body.mini-sidebar .admin-sidebar:hover .brand-text,
    html[data-layout="mini"] .admin-sidebar:hover .nav-group-title,
    body.mini-sidebar .admin-sidebar:hover .nav-group-title,
    html[data-layout="mini"] .admin-sidebar:hover .tab-label,
    body.mini-sidebar .admin-sidebar:hover .tab-label,
    html[data-layout="mini"] .admin-sidebar:hover .sidebar-search-wrap,
    body.mini-sidebar .admin-sidebar:hover .sidebar-search-wrap,
    html[data-layout="mini"] .admin-sidebar:hover .sidebar-action-btn .tab-label,
    body.mini-sidebar .admin-sidebar:hover .sidebar-action-btn .tab-label {
        display: block !important;
    }

    html[data-layout="mini"] .admin-sidebar:hover .sidebar-close-btn,
    body.mini-sidebar .admin-sidebar:hover .sidebar-close-btn {
        display: inline-flex !important;
    }

    html[data-layout="mini"] .admin-sidebar:hover .sidebar-body,
    body.mini-sidebar .admin-sidebar:hover .sidebar-body {
        padding: 10px 8px !important;
    }

    html[data-layout="mini"] .admin-sidebar:hover .nav-group,
    body.mini-sidebar .admin-sidebar:hover .nav-group {
        background: rgb(var(--rgb-card) / 0.35) !important;
        border: 1px solid rgb(var(--rgb-border) / 0.35) !important;
        padding: 6px 4px !important;
        width: 100% !important;
        align-items: stretch !important;
    }

    html[data-layout="mini"] .admin-sidebar:hover .nav-tab,
    body.mini-sidebar .admin-sidebar:hover .nav-tab {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        justify-content: flex-start !important;
        padding: 7px 10px !important;
        border: 1px solid transparent !important;
        border-left: 3px solid transparent !important;
        border-radius: 5px !important;
    }

    html[data-layout="mini"] .admin-sidebar:hover .nav-tab.active,
    body.mini-sidebar .admin-sidebar:hover .nav-tab.active {
        border-left: 3px solid var(--accent) !important;
        border-right: 1px solid transparent !important;
        border-top: 1px solid transparent !important;
        border-bottom: 1px solid transparent !important;
    }

    html[data-layout="mini"] .admin-sidebar:hover .nav-tab .tab-icon,
    body.mini-sidebar .admin-sidebar:hover .nav-tab .tab-icon {
        margin-right: 10px !important;
        margin-left: 0 !important;
        font-size: 1.05rem !important;
    }

    html[data-layout="mini"] .admin-sidebar:hover .sidebar-action-btn,
    body.mini-sidebar .admin-sidebar:hover .sidebar-action-btn {
        width: 100% !important;
        height: auto !important;
        justify-content: flex-start !important;
        padding: 8px 12px !important;
    }
}

/* ══════════════════════════════════════════════════════════ */
/* 7. LAYOUT: TWO-COLUMN (70px Rail + 210px Panel = 280px)   */
/* ══════════════════════════════════════════════════════════ */

html[data-layout="twocolumn"] .admin-sidebar,
body.layout-twocolumn .admin-sidebar {
    position: fixed !important;
    top: var(--app-header-h) !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    height: calc(100vh - var(--app-header-h)) !important;
    height: calc(100dvh - var(--app-header-h)) !important;
    width: var(--app-sidebar-w-twocol) !important;
    min-width: var(--app-sidebar-w-twocol) !important;
    max-width: var(--app-sidebar-w-twocol) !important;
    z-index: 1010 !important;
    background: var(--app-sidebar-bg) !important;
    border-right: 1px solid var(--app-sidebar-border) !important;
    border-left: none !important;
}

html[data-layout="twocolumn"] .admin-main,
body.layout-twocolumn .admin-main {
    margin-left: var(--app-sidebar-w-twocol) !important;
    margin-right: 0 !important;
    width: calc(100% - var(--app-sidebar-w-twocol)) !important;
    padding-top: var(--app-header-h) !important;
}

html[data-layout="twocolumn"] .sidebar-inner,
body.layout-twocolumn .sidebar-inner {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

html[data-layout="twocolumn"] .sidebar-body,
body.layout-twocolumn .sidebar-body {
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
}

html[data-layout="twocolumn"] .sidebar-standard-wrap,
body.layout-twocolumn .sidebar-standard-wrap {
    display: none !important;
}

html[data-layout="twocolumn"] .sidebar-twocolumn-wrap,
body.layout-twocolumn .sidebar-twocolumn-wrap {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    flex: 1 !important;
    min-height: 0 !important;
}

html[data-layout="twocolumn"] .nav-rail,
body.layout-twocolumn .nav-rail {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    background: var(--bg-deep) !important;
    border-right: 1px solid var(--border) !important;
    overflow-y: auto !important;
    padding: 10px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
}

html[data-layout="twocolumn"] .nav-panel,
body.layout-twocolumn .nav-panel {
    flex: 1 !important;
    min-width: 0 !important;
    background: var(--bg-base) !important;
    overflow-y: auto !important;
}

html[data-layout="twocolumn"] .nav-panel-header,
body.layout-twocolumn .nav-panel-header {
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    color: var(--text-muted) !important;
    padding: 12px 14px 8px !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    margin-bottom: 6px !important;
}

html[data-layout="twocolumn"] .nav-panel-items,
body.layout-twocolumn .nav-panel-items {
    padding: 4px 6px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

html[data-layout="twocolumn"] .nav-panel-items .nav-tab,
body.layout-twocolumn .nav-panel-items .nav-tab {
    padding: 8px 10px !important;
    border-radius: 6px !important;
    font-size: 0.8rem !important;
}

/* ══════════════════════════════════════════════════════════ */
/* 8. LAYOUT: HORIZONTAL (Top Navigation Shell)              */
/* ══════════════════════════════════════════════════════════ */

html[data-layout="horizontal"] .admin-sidebar,
body.menu-horizontal .admin-sidebar {
    display: none !important;
}

html[data-layout="horizontal"] #sidebar-toggle-btn,
body.menu-horizontal #sidebar-toggle-btn {
    display: none !important;
}

html[data-layout="horizontal"],
body.menu-horizontal {
    --app-horizontal-extra: 40px;
}

html[data-layout="horizontal"] .admin-main,
body.menu-horizontal .admin-main {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    padding-top: calc(var(--app-header-h) + var(--app-horizontal-extra)) !important;
}

/* Horizontal is a two-row header, not a single 48px strip. The admin shell has
   seven nav groups and the SuperAdmin shell has four; one row cannot hold both
   the brand and the right-side account controls at laptop widths. Row 1 owns the
   brand/controls, row 2 owns the full-width horizontal menu. This keeps every
   dropdown above the content and stops the menu from running under the controls. */
html[data-layout="horizontal"] .admin-topbar,
body.menu-horizontal .admin-topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: calc(var(--app-header-h) + var(--app-horizontal-extra)) !important;
    min-height: calc(var(--app-header-h) + var(--app-horizontal-extra)) !important;
    overflow: visible !important;
    z-index: 1020 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: var(--app-header-h) 36px !important;
    align-items: center !important;
    column-gap: 10px !important;
    padding: 0 12px 4px !important;
    box-sizing: border-box !important;
}

html[data-layout="horizontal"] .admin-topbar .topbar-left,
body.menu-horizontal .admin-topbar .topbar-left {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

html[data-layout="horizontal"] .admin-topbar .topbar-right,
body.menu-horizontal .admin-topbar .topbar-right {
    grid-column: 2 !important;
    grid-row: 1 !important;
    flex: 0 0 auto !important;
}

html[data-layout="horizontal"] .app-topnav,
body.menu-horizontal .app-topnav {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    overflow: visible !important;
}

html[data-layout="horizontal"] .app-topnav-menu,
body.menu-horizontal .app-topnav-menu {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    gap: 3px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

html[data-layout="horizontal"] .app-topnav-item,
body.menu-horizontal .app-topnav-item {
    position: relative !important;
}

html[data-layout="horizontal"] .app-topnav-link,
body.menu-horizontal .app-topnav-link {
    white-space: nowrap !important;
    padding: 6px 9px !important;
    font-size: 0.78rem !important;
}

/* Between tablet and small laptop widths the admin's seven groups cannot fit on
   one menu line. Let them wrap into a second line instead of clipping the last
   two groups behind the edge; the header and content offset grow together. */
@media (min-width: 992px) and (max-width: 1349.98px) {
    /* Only the tenant admin shell has seven groups; the platform shell's four
       groups still fit on one line and must not reserve an empty second row. */
    body.surface-tenant-admin {
        --app-horizontal-extra: 80px;
    }

    html[data-layout="horizontal"] body.surface-tenant-admin .admin-topbar,
    body.menu-horizontal.surface-tenant-admin .admin-topbar {
        grid-template-rows: var(--app-header-h) auto !important;
        align-items: start !important;
    }

    html[data-layout="horizontal"] body.surface-tenant-admin .app-topnav,
    body.menu-horizontal.surface-tenant-admin .app-topnav {
        align-items: flex-start !important;
    }

    html[data-layout="horizontal"] body.surface-tenant-admin .app-topnav-menu,
    body.menu-horizontal.surface-tenant-admin .app-topnav-menu {
        flex-wrap: wrap !important;
        width: 100% !important;
        max-width: 100% !important;
        row-gap: 3px !important;
    }
}

/* ══════════════════════════════════════════════════════════ */
/* 9. LAYOUT: DETACHED (Floating Card Elevation & Gutters)   */
/* ══════════════════════════════════════════════════════════ */

html[data-layout="detached"] .admin-topbar,
body.layout-detached .admin-topbar {
    position: fixed !important;
    top: 14px !important;
    left: calc(var(--app-sidebar-w) + 28px) !important;
    right: 14px !important;
    height: var(--app-header-h) !important;
    border-radius: var(--app-radius) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25) !important;
    z-index: 1020 !important;
}

html[data-layout="detached"] .admin-sidebar,
body.layout-detached .admin-sidebar {
    position: fixed !important;
    top: 14px !important;
    left: 14px !important;
    right: auto !important;
    bottom: 14px !important;
    height: calc(100vh - 28px) !important;
    height: calc(100dvh - 28px) !important;
    width: var(--app-sidebar-w) !important;
    min-width: var(--app-sidebar-w) !important;
    max-width: var(--app-sidebar-w) !important;
    border-radius: var(--app-radius) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
    z-index: 1010 !important;
}

html[data-layout="detached"] .admin-main,
body.layout-detached .admin-main {
    margin-left: calc(var(--app-sidebar-w) + 28px) !important;
    margin-right: 14px !important;
    width: calc(100% - var(--app-sidebar-w) - 42px) !important;
    padding-top: calc(var(--app-header-h) + 28px) !important;
    height: 100vh !important;
    height: 100dvh !important;
}

html[data-layout="detached"] .admin-container,
body.layout-detached .admin-container {
    padding: 14px 0 !important;
}

/* ══════════════════════════════════════════════════════════ */
/* 10. LAYOUT: WITHOUT HEADER (Full Sidebar Focus)           */
/* ══════════════════════════════════════════════════════════ */

html[data-layout="without-header"] .admin-topbar,
body.layout-without-header .admin-topbar {
    display: none !important;
}

html[data-layout="without-header"] .admin-sidebar,
body.layout-without-header .admin-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    width: var(--app-sidebar-w) !important;
    min-width: var(--app-sidebar-w) !important;
    max-width: var(--app-sidebar-w) !important;
    z-index: 1010 !important;
    border-right: 1px solid var(--app-sidebar-border) !important;
}

html[data-layout="without-header"] .sidebar-header .sidebar-close-btn,
body.layout-without-header .sidebar-header .sidebar-close-btn {
    display: inline-flex !important;
}

html[data-layout="without-header"] .admin-main,
body.layout-without-header .admin-main {
    margin-left: var(--app-sidebar-w) !important;
    margin-right: 0 !important;
    width: calc(100% - var(--app-sidebar-w)) !important;
    padding-top: 14px !important;
    height: 100vh !important;
    height: 100dvh !important;
}

/* ══════════════════════════════════════════════════════════ */
/* 11. LAYOUT: RTL / RIGHT-SIDE MENU (Mirrored Geometry)     */
/* ══════════════════════════════════════════════════════════ */

html[dir="rtl"],
html[data-layout="rtl"],
body.layout-rtl {
    direction: rtl !important;
}

html[dir="rtl"] .admin-sidebar,
html[data-layout="rtl"] .admin-sidebar,
body.layout-rtl .admin-sidebar {
    position: fixed !important;
    top: var(--app-header-h) !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    height: calc(100vh - var(--app-header-h)) !important;
    height: calc(100dvh - var(--app-header-h)) !important;
    width: var(--app-sidebar-w) !important;
    min-width: var(--app-sidebar-w) !important;
    max-width: var(--app-sidebar-w) !important;
    border-right: none !important;
    border-left: 1px solid var(--app-sidebar-border) !important;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.4) !important;
    z-index: 1010 !important;
}

html[dir="rtl"] .admin-sidebar.collapsed,
html[data-layout="rtl"] .admin-sidebar.collapsed,
body.layout-rtl .admin-sidebar.collapsed {
    border-left: none !important;
    border-right: none !important;
}

html[dir="rtl"] .admin-main,
html[data-layout="rtl"] .admin-main,
body.layout-rtl .admin-main {
    margin-right: var(--app-sidebar-w) !important;
    margin-left: 0 !important;
    width: calc(100% - var(--app-sidebar-w)) !important;
    padding-top: var(--app-header-h) !important;
    transition: margin-right var(--app-transition-speed) ease, width var(--app-transition-speed) ease;
}

html[dir="rtl"] .admin-topbar,
html[data-layout="rtl"] .admin-topbar,
body.layout-rtl .admin-topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: var(--app-header-h) !important;
    z-index: 1020 !important;
}

/* RTL Tabs & Internal Alignment */
html[dir="rtl"] .admin-nav-vertical .nav-tab,
html[data-layout="rtl"] .admin-nav-vertical .nav-tab,
body.layout-rtl .admin-nav-vertical .nav-tab,
html[dir="rtl"] .nav-tab,
html[data-layout="rtl"] .nav-tab,
body.layout-rtl .nav-tab {
    text-align: right !important;
    justify-content: flex-start !important;
    border-left: none !important;
    border-right: 3px solid transparent !important;
}

html[dir="rtl"] .admin-nav-vertical .nav-tab:hover,
html[data-layout="rtl"] .admin-nav-vertical .nav-tab:hover,
body.layout-rtl .admin-nav-vertical .nav-tab:hover,
html[dir="rtl"] .nav-tab:hover,
html[data-layout="rtl"] .nav-tab:hover,
body.layout-rtl .nav-tab:hover {
    transform: translateX(-2px) !important;
    border-right-color: var(--accent-blue) !important;
    border-left-color: transparent !important;
}

html[dir="rtl"] .admin-nav-vertical .nav-tab.active,
html[data-layout="rtl"] .admin-nav-vertical .nav-tab.active,
body.layout-rtl .admin-nav-vertical .nav-tab.active,
html[dir="rtl"] .nav-tab.active,
html[data-layout="rtl"] .nav-tab.active,
body.layout-rtl .nav-tab.active {
    border-right: 3px solid var(--accent) !important;
    border-left: none !important;
}

html[dir="rtl"] .nav-tab .tab-icon,
html[data-layout="rtl"] .nav-tab .tab-icon,
body.layout-rtl .nav-tab .tab-icon {
    margin-left: 10px !important;
    margin-right: 0 !important;
}

html[dir="rtl"] .sidebar-search-wrap span,
html[data-layout="rtl"] .sidebar-search-wrap span,
body.layout-rtl .sidebar-search-wrap span {
    right: 9px !important;
    left: auto !important;
}

html[dir="rtl"] #sidebar-tab-search,
html[data-layout="rtl"] #sidebar-tab-search,
body.layout-rtl #sidebar-tab-search {
    padding-right: 28px !important;
    padding-left: 24px !important;
    text-align: right !important;
}

html[dir="rtl"] #sidebar-tab-search-clear,
html[data-layout="rtl"] #sidebar-tab-search-clear,
body.layout-rtl #sidebar-tab-search-clear {
    left: 6px !important;
    right: auto !important;
}

html[dir="rtl"] .sidebar-action-btn,
html[data-layout="rtl"] .sidebar-action-btn,
body.layout-rtl .sidebar-action-btn {
    text-align: right !important;
    justify-content: flex-start !important;
}

html[dir="rtl"] .sidebar-action-btn span:first-child,
html[data-layout="rtl"] .sidebar-action-btn span:first-child,
body.layout-rtl .sidebar-action-btn span:first-child,
html[dir="rtl"] .sidebar-action-btn .btn-icon,
html[data-layout="rtl"] .sidebar-action-btn .btn-icon,
body.layout-rtl .sidebar-action-btn .btn-icon {
    margin-left: 8px !important;
    margin-right: 0 !important;
}

html[dir="rtl"] .app-topnav-dropdown,
html[data-layout="rtl"] .app-topnav-dropdown,
body.layout-rtl .app-topnav-dropdown {
    right: 0 !important;
    left: auto !important;
    text-align: right !important;
}

html[dir="rtl"] #quick-launch-menu,
html[data-layout="rtl"] #quick-launch-menu,
body.layout-rtl #quick-launch-menu {
    right: auto !important;
    left: 0 !important;
}

/* ══════════════════════════════════════════════════════════ */
/* 12. BOXED WIDTH CONTAINER                                 */
/* ══════════════════════════════════════════════════════════ */

html[data-width="box"],
body.layout-box-mode {
    background: var(--bg-deep);
}

html[data-width="box"] .admin-wrapper,
body.layout-box-mode .admin-wrapper {
    max-width: 1440px;
    margin: 0 auto;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    position: relative;
}

html[data-width="box"] .admin-topbar,
body.layout-box-mode .admin-topbar {
    max-width: 1440px;
    width: 100%;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
}

@media (max-width: 1200px) {
    html[data-width="box"] .admin-wrapper,
    body.layout-box-mode .admin-wrapper {
        max-width: 100%;
        margin: 0;
        box-shadow: none;
    }

    html[data-width="box"] .admin-topbar,
    body.layout-box-mode .admin-topbar {
        max-width: 100%;
        width: 100%;
        left: 0 !important;
        right: auto !important;
        transform: none;
    }
}

/* ══════════════════════════════════════════════════════════ */
/* 13. UNIVERSAL SIDEBAR COLLAPSED FLOW                      */
/* ══════════════════════════════════════════════════════════ */

.admin-sidebar.collapsed ~ .admin-main,
html[data-theme-pack="dreamspos"] .admin-sidebar.collapsed ~ .admin-main,
html[dir="rtl"] .admin-sidebar.collapsed ~ .admin-main,
html[data-layout="rtl"] .admin-sidebar.collapsed ~ .admin-main,
body.layout-rtl .admin-sidebar.collapsed ~ .admin-main {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

html[data-layout="detached"] .admin-sidebar.collapsed ~ .admin-main,
body.layout-detached .admin-sidebar.collapsed ~ .admin-main {
    margin-left: 14px !important;
    margin-right: 14px !important;
    width: calc(100% - 28px) !important;
}

html[data-layout="detached"] .admin-sidebar.collapsed ~ .admin-main .admin-topbar,
body.layout-detached .admin-sidebar.collapsed ~ .admin-main .admin-topbar {
    left: 14px !important;
    right: 14px !important;
}

/* ══════════════════════════════════════════════════════════ */
/* 14. MOBILE DRAWER (< 992px) — Universal Touch Safe        */
/* ══════════════════════════════════════════════════════════ */

@media (max-width: 991.98px) {
    .admin-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 1050 !important;
        width: min(320px, 85vw) !important;
        min-width: 0 !important;
        max-width: 85vw !important;
        transform: translateX(-100%);
        transition: transform var(--app-transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 6px 0 24px rgba(0, 0, 0, 0.6) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    body.sidebar-open .admin-sidebar {
        transform: translateX(0) !important;
    }

    /* RTL mobile drawer slide from right */
    html[dir="rtl"] .admin-sidebar,
    html[data-layout="rtl"] .admin-sidebar,
    body.layout-rtl .admin-sidebar {
        right: 0 !important;
        left: auto !important;
        transform: translateX(100%) !important;
        box-shadow: -6px 0 24px rgba(0, 0, 0, 0.6) !important;
    }

    body.sidebar-open html[dir="rtl"] .admin-sidebar,
    body.sidebar-open html[data-layout="rtl"] .admin-sidebar,
    body.sidebar-open.layout-rtl .admin-sidebar {
        transform: translateX(0) !important;
    }

    .admin-main,
    html[dir="rtl"] .admin-main,
    html[data-layout="rtl"] .admin-main,
    body.layout-rtl .admin-main {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    /* Mini layout on mobile falls back to the full drawer. The mini rules use
       higher specificity than the generic .admin-sidebar mobile rule, so they
       must be overridden explicitly. */
    html[data-layout="mini"] .admin-sidebar,
    body.mini-sidebar .admin-sidebar {
        top: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        width: min(320px, 85vw) !important;
        min-width: 0 !important;
        max-width: 85vw !important;
    }

    html[data-layout="mini"] .admin-main,
    body.mini-sidebar .admin-main {
        margin-left: 0 !important;
        width: 100% !important;
        padding-top: var(--app-header-h) !important;
    }

    html[data-layout="mini"] .sidebar-header,
    body.mini-sidebar .sidebar-header {
        padding: 14px 16px !important;
        justify-content: space-between !important;
    }

    html[data-layout="mini"] .sidebar-header .sidebar-brand,
    body.mini-sidebar .sidebar-header .sidebar-brand {
        justify-content: flex-start !important;
    }

    html[data-layout="mini"] .sidebar-header .sidebar-brand-img,
    body.mini-sidebar .sidebar-header .sidebar-brand-img {
        max-width: 145px !important;
    }

    html[data-layout="mini"] .sidebar-header .sidebar-brand .brand-text,
    body.mini-sidebar .sidebar-header .sidebar-brand .brand-text,
    html[data-layout="mini"] .sidebar-header .sidebar-close-btn,
    body.mini-sidebar .sidebar-header .sidebar-close-btn,
    html[data-layout="mini"] .nav-group-title,
    body.mini-sidebar .nav-group-title,
    html[data-layout="mini"] .tab-label,
    body.mini-sidebar .tab-label,
    html[data-layout="mini"] .sidebar-search-wrap,
    body.mini-sidebar .sidebar-search-wrap {
        display: revert !important;
    }

    html[data-layout="mini"] .sidebar-action-btn .tab-label,
    body.mini-sidebar .sidebar-action-btn .tab-label {
        display: inline !important;
    }

    /* Horizontal layout on mobile falls back to standard drawer. Reset the
       two-row desktop header so the drawer does not leave a 40px dead strip. */
    html[data-layout="horizontal"] .admin-topbar,
    body.menu-horizontal .admin-topbar {
        display: flex !important;
        height: var(--app-header-h) !important;
        min-height: var(--app-header-h) !important;
        padding: 0 16px !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
    }

    html[data-layout="horizontal"] .admin-main,
    body.menu-horizontal .admin-main {
        padding-top: var(--app-header-h) !important;
    }

    html[data-layout="horizontal"] .admin-sidebar,
    body.menu-horizontal .admin-sidebar {
        display: flex !important;
    }

    html[data-layout="horizontal"] .app-topnav,
    body.menu-horizontal .app-topnav {
        display: none !important;
    }

    html[data-layout="horizontal"] #sidebar-toggle-btn,
    body.menu-horizontal #sidebar-toggle-btn {
        display: inline-flex !important;
    }

    /* Minimum 44px hit targets on mobile touch */
    .nav-tab,
    .sidebar-action-btn,
    .hamburger-btn,
    .gear-btn {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ══════════════════════════════════════════════════════════ */
/* 15. REDUCED MOTION & FORCED COLORS                        */
/* ══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

@media (forced-colors: active) {
    .nav-tab.active,
    .nav-rail-btn.is-active {
        outline: 2px solid Highlight;
    }
}