/* ==========================================================
   SYSTEM ADMIN SHELL
   ----------------------------------------------------------
   Shared responsive shell for every /bhookie365 page: sidebar,
   top bar, and content area. One fluid shell, no separate
   mobile-only layout.

   Breakpoint scheme — shared with pages/dashboard.css, keep
   these three values in sync rather than adding new ones:
     1180px — dashboard content density (KPI/chart/list columns)
      860px — sidebar switches from persistent to off-canvas drawer
      640px — dashboard content narrows to a single column
========================================================== */

.admin-shell {
    display: grid;
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
    min-height: 100vh;

    background: var(--st-bg);
}

.admin-sidebar {
    display: flex;
    flex-direction: column;
    gap: 22px;

    padding: 20px 16px;

    background: var(--st-surface);
    border-right: 1px solid var(--st-border);
}

.admin-sidebar__head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-sidebar__mobile-label {
    display: none;

    color: var(--st-muted);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.admin-drawer-close {
    display: none;

    padding: 6px;
    margin-left: auto;

    color: var(--st-muted);
    background: transparent;
    border: none;
    border-radius: var(--st-radius-sm);

    cursor: pointer;
}

.admin-drawer-close:hover,
.admin-drawer-close:focus-visible {
    color: var(--st-text);
    background: var(--st-surface-muted);
}

.admin-drawer-overlay {
    display: none;
}

.admin-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.admin-header {
    display: flex;
    align-items: center;
    gap: 10px;

    min-height: 64px;
    padding: 0 24px;

    background: rgba(255, 255, 255, .88);
    border-bottom: 1px solid var(--st-border);
}

.admin-menu-toggle {
    display: none;
    flex: 0 0 auto;

    padding: 8px;

    color: var(--st-text);
    background: transparent;
    border: none;
    border-radius: var(--st-radius-sm);

    cursor: pointer;
}

.admin-menu-toggle:hover,
.admin-menu-toggle:focus-visible {
    background: var(--st-surface-muted);
}

.admin-header__title-group {
    flex: 1 1 auto;
    min-width: 0;
}

.admin-header__title {
    overflow: hidden;

    font-size: 1.05rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-header__logout-form {
    flex: 0 0 auto;
}

.admin-content {
    flex: 1 1 auto;
    min-width: 0;

    padding: 24px 28px;
}

/* ==========================================================
   MOBILE / OFF-CANVAS DRAWER (≤860px)
========================================================== */

@media (max-width: 860px) {
    .admin-shell {
        display: block;
    }

    .admin-sidebar {
        position: fixed;
        z-index: 60;
        top: 0;
        left: 0;

        width: min(300px, 84vw);
        height: 100vh;

        transform: translateX(-100%);
        transition: transform .22s ease;
    }

    .admin-sidebar.is-open {
        transform: translateX(0);
    }

    .admin-sidebar .brand-mark--admin {
        display: none;
    }

    .admin-sidebar__mobile-label {
        display: block;
    }

    .admin-drawer-close {
        display: inline-flex;
    }

    .admin-drawer-overlay {
        position: fixed;
        z-index: 50;
        inset: 0;

        display: none;

        background: rgba(15, 23, 42, .45);
    }

    .admin-drawer-overlay.is-open {
        display: block;
    }

    .admin-menu-toggle {
        display: inline-flex;
    }

    .admin-header__title-group .eyebrow {
        display: none;
    }

    .admin-header {
        padding: 0 16px;
    }

    .admin-content {
        padding: 20px 16px;
    }
}

body.admin-drawer-open {
    overflow: hidden;
}

@media (max-width: 640px) {
    .admin-header__logout-label {
        display: none;
    }
}