/** DropX Admin — MOBILE/PWA ONLY. Never styles desktop admin selectors. */
.admin-mobile-shell,
[data-admin-mobile-root] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* A mobil módot a globális admin controller is jelzi. Ez nem a desktop
   layoutot méretezi át, csak garantálja, hogy a külön mobil DOM-réteg
   megjelenjen akkor is, ha a SPA/PWA környezetben a viewport media query
   később frissül. */
html.dropx-admin-mobile-mode .admin-mobile-shell,
html.dropx-admin-mobile-mode [data-admin-mobile-root],
body.dropx-admin-mobile-mode .admin-mobile-shell,
body.dropx-admin-mobile-mode [data-admin-mobile-root] {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

@media (max-width: 900px) {
    /* The legacy admin responsive layer may hide the old desktop nav; that is fine.
       The mobile layer has its own DOM and does not depend on the desktop nav. */
    .admin-mobile-content {
        display: block;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .admin-mobile-shell {
        display: block !important;
        visibility: visible;
        position: relative;
        z-index: 80;
    }

    .admin-mobile-toolbar {
        position: sticky;
        top: 0;
        z-index: 85;
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 58px;
        width: 100%;
        padding: 8px 12px;
        box-sizing: border-box;
        background: var(--theme-surface, #111418);
        border-bottom: 1px solid rgba(214,165,43,.20);
        box-shadow: 0 8px 24px rgba(0,0,0,.12);
        backdrop-filter: blur(18px) saturate(1.15);
        -webkit-backdrop-filter: blur(18px) saturate(1.15);
    }

    .admin-mobile-menu-button,
    .admin-mobile-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        border: 1px solid rgba(214,165,43,.30);
        background: rgba(214,165,43,.08);
        color: var(--theme-gold, #d6a52b);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .admin-mobile-menu-button {
        order: 3;
        width: 42px;
        height: 42px;
        padding: 0;
        border-radius: 12px;
    }

    .admin-mobile-menu-button svg {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
    }

    .admin-mobile-toolbar-copy {
        order: 2;
        min-width: 0;
        flex: 1 1 auto;
    }

    .admin-mobile-toolbar-copy span,
    .admin-mobile-toolbar-copy strong {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-family: 'Rajdhani', 'Arial Narrow', sans-serif;
        text-transform: uppercase;
    }

    .admin-mobile-toolbar-copy span {
        color: var(--theme-gold, #d6a52b);
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .16em;
    }

    .admin-mobile-toolbar-copy strong {
        margin-top: 2px;
        color: var(--theme-text, #f1eadf);
        font-size: 16px;
        font-weight: 800;
        letter-spacing: .03em;
    }

    .admin-mobile-toolbar-mark {
        order: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        color: var(--theme-gold, #d6a52b);
        opacity: .82;
    }

    .admin-mobile-toolbar-mark svg {
        width: 21px;
        height: 21px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .admin-mobile-backdrop {
        position: fixed;
        inset: 0;
        z-index: 120;
        background: rgba(0,0,0,.54);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }

    .admin-mobile-drawer {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 130;
        display: flex;
        flex-direction: column;
        width: min(88vw, 350px);
        padding: max(12px, env(safe-area-inset-top)) 12px max(14px, env(safe-area-inset-bottom));
        box-sizing: border-box;
        background: var(--theme-surface, #15181c);
        border-left: 1px solid rgba(214,165,43,.22);
        border-right: 0;
        box-shadow: -24px 0 70px rgba(0,0,0,.34);
        transform: translateX(105%);
        transition: transform .24s cubic-bezier(.2,.8,.2,1);
        overflow: hidden;
    }

    .admin-mobile-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 8px 4px 14px;
        border-bottom: 1px solid rgba(214,165,43,.15);
    }

    .admin-mobile-drawer-head span,
    .admin-mobile-drawer-head strong {
        display: block;
        font-family: 'Rajdhani', 'Arial Narrow', sans-serif;
        text-transform: uppercase;
    }

    .admin-mobile-drawer-head span {
        color: var(--theme-gold, #d6a52b);
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .14em;
    }

    .admin-mobile-drawer-head strong {
        margin-top: 3px;
        color: var(--theme-text, #f1eadf);
        font-size: 17px;
        letter-spacing: .04em;
    }

    .admin-mobile-close {
        width: 38px;
        height: 38px;
        padding: 0;
        border-radius: 11px;
        background: transparent;
        font-size: 24px;
        line-height: 1;
    }

    .admin-mobile-nav {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding: 12px 0;
        scrollbar-width: thin;
    }

    .admin-mobile-group {
        border-bottom: 1px solid rgba(214,165,43,.11);
    }

    .admin-mobile-group-title {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 46px;
        padding: 9px 8px;
        gap: 9px;
        border: 0;
        background: transparent;
        color: var(--theme-text-muted, #8e98a3);
        font: 800 10px 'Rajdhani', 'Arial Narrow', sans-serif;
        letter-spacing: .14em;
        text-align: left;
        text-transform: uppercase;
        cursor: pointer;
    }

    .admin-mobile-group-title > svg:first-child,
    .admin-mobile-link > svg:first-child {
        width: 19px;
        height: 19px;
        flex: 0 0 19px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .admin-mobile-group-title .chevron {
        width: 15px;
        height: 15px;
        margin-left: auto;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        transition: transform .18s ease;
    }

    .admin-mobile-group.is-open .chevron {
        transform: rotate(180deg);
    }

    .admin-mobile-group-items {
        display: none;
        padding: 0 4px 10px;
    }

    .admin-mobile-group.is-open .admin-mobile-group-items {
        display: grid;
        gap: 4px;
    }

    .admin-mobile-link {
        display: flex;
        align-items: center;
        min-height: 48px;
        gap: 10px;
        padding: 8px 10px;
        box-sizing: border-box;
        border: 1px solid transparent;
        border-radius: 12px;
        background: transparent;
        color: var(--theme-text, #d9c9ae);
        text-decoration: none;
        font: 700 14px 'Rajdhani', 'Arial Narrow', sans-serif;
        -webkit-tap-highlight-color: transparent;
    }

    .admin-mobile-link.is-active {
        color: var(--theme-gold, #f0c774);
        background: rgba(214,165,43,.10);
        border-color: rgba(214,165,43,.27);
        box-shadow: inset 3px 0 0 var(--theme-gold, #d6a52b);
    }

    .admin-mobile-link span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.admin-mobile-menu-open .admin-mobile-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    body.admin-mobile-menu-open .admin-mobile-drawer {
        transform: translateX(0);
    }

    /* App-like content rules: only descendants of the mobile admin workspace. */
    .admin-workspace-content > * {
        max-width: 100%;
        box-sizing: border-box;
    }

    .admin-workspace-content table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .admin-workspace-content input,
    .admin-workspace-content select,
    .admin-workspace-content textarea,
    .admin-workspace-content button {
        max-width: 100%;
    }

}

@media (min-width: 901px) {
    html:not(.dropx-admin-mobile-mode) .admin-mobile-shell,
    html:not(.dropx-admin-mobile-mode) [data-admin-mobile-root] {
        display: none !important;
        visibility: hidden !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .admin-mobile-backdrop,
    .admin-mobile-drawer,
    .admin-mobile-group-title .chevron {
        transition: none;
    }
}
