/* ============================================================
   Store admin · Shell
   ------------------------------------------------------------
   Layout principal del admin: body, header mobile, layout en
   dos columnas con sidebar sticky full-height + contenido.
   Componente reusable: footer de copyright (.sa-app-footer).
   ============================================================ */

body.page-store-admin-app {
    background: var(--sa-bg);
    color: var(--sa-text);
    font-family: var(--sa-font);
    min-height: 100vh;
    margin: 0;
}

/* Neutralizamos los wrappers globales del layout.php cuando el
   admin nuevo está activo (mismo patrón usado en auth.css). */
body.page-store-admin-app .site-shell {
    background: transparent;
    min-height: 0;
    padding: 0;
}
body.page-store-admin-app .container,
body.page-store-admin-app .container.page-container,
body.page-store-admin-app .page-container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* --- Layout principal --- */
/* Grid de 2 columnas: el sidebar es sticky y ocupa todo el alto,
   el content rellena su propio padding y siempre llega al pie del
   viewport para que el footer del admin quede abajo de todo. */
.sa-layout {
    display: grid;
    grid-template-columns: var(--sa-sidebar-w) minmax(0, 1fr);
    align-items: start;
    min-height: 100vh;
}

.sa-content {
    display: flex;
    flex-direction: column;
    gap: var(--sa-stack);
    padding: 24px;
    min-width: 0;
    min-height: 100vh;
}

@media (min-width: 901px) {
    body.is-deuna-panel-app .sa-layout {
        min-height: 100dvh;
    }

    body.is-deuna-panel-app .sa-content {
        padding:
            calc(24px + env(safe-area-inset-top, 0px))
            calc(24px + env(safe-area-inset-right, 0px))
            calc(24px + env(safe-area-inset-bottom, 0px))
            24px;
        min-height: 100dvh;
    }
}

/* Variante usada por el dashboard: contenedor angosto centrado. */
.sa-content--narrow {
    max-width: 49.75rem;
    margin-inline: auto;
    width: 100%;
}

/* --- Header mobile: oculto en desktop --- */
.sa-mobile-header {
    display: none;
}
.sa-mobile-brand-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 36px;
    text-decoration: none;
    color: var(--sa-text);
}
.sa-mobile-brand-link .site-brand-logo {
    height: 24px;
    width: auto;
    display: block;
}

/* --- Backdrop drawer mobile: oculto en desktop --- */
.sa-sidebar-backdrop {
    display: none;
}

/* --- Helpers screen-reader only --- */
.sa-sr-only,
.sa-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Footer reusable: copyright en cualquier pantalla.
   margin-top: auto lo empuja al final del .sa-content (que es
   un flex column). --- */
.sa-app-footer {
    margin-top: auto;
    padding: 20px 0 4px;
    color: var(--sa-muted);
    font-size: 12px;
    text-align: left;
}

/* ============================================================
   Mobile (≤ 900px)
   ============================================================ */
@media (max-width: 900px) {
    /* Header mobile fijo arriba */
    .sa-mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        height: calc(56px + env(safe-area-inset-top, 0px));
        padding: env(safe-area-inset-top, 0px) 12px 0;
        background: var(--sa-surface);
        border-bottom: 1px solid var(--sa-border);
        position: sticky;
        top: 0;
        z-index: 30;
    }
    .sa-mobile-header__copy {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* Layout: una sola columna (content), sidebar como drawer */
    .sa-layout {
        grid-template-columns: 1fr;
        /* el min-height baja a 100vh - header mobile (56px) para que
           no genere scroll extra abajo del footer */
        min-height: calc(100vh - 56px - env(safe-area-inset-top, 0px));
    }
    .sa-content {
        padding: 16px;
        min-height: calc(100dvh - 56px - env(safe-area-inset-top, 0px));
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }

    /* Backdrop visible cuando el drawer está abierto */
    .sa-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.40);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.22s ease;
        z-index: 1099;
    }

    /* Estado abierto: usamos la clase legacy `store-admin-menu-open`
       en <body> para no tocar el JS. */
    body.store-admin-menu-open .sa-sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }
    body.store-admin-menu-open {
        overflow: hidden;
    }

    body.is-deuna-panel-app .sa-mobile-header { top: 0; }
}