/* ====================================================================
   Gymify Dashboard — App Shell (Sidebar + Hamburger)
   --------------------------------------------------------------------
   RTL layout: sidebar anchored to the RIGHT, content flows to the LEFT.
   Mobile (<= 900px): sidebar collapses behind a hamburger.
   ==================================================================== */

:root {
    --shell-bg: #0f2a4a;
    --shell-bg-2: #0b1f37;
    --shell-fg: #e6edf6;
    --shell-fg-dim: #9aa9bc;
    --shell-accent: #2ed8a3;
    --shell-accent-dim: rgba(46, 216, 163, 0.15);
    --shell-border: rgba(255, 255, 255, 0.08);
    --shell-topbar-h: 60px;
    --shell-sidebar-w: 240px;
}

/* ---------- Topbar -------------------------------------------------- */
.shell-topbar {
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--shell-topbar-h);
    background: var(--shell-bg);
    color: var(--shell-fg);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    z-index: 1100;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
.shell-burger {
    background: transparent;
    color: var(--shell-fg);
    border: 0;
    font-size: 22px;
    width: 42px; height: 42px;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.shell-burger:hover { background: rgba(255, 255, 255, 0.08); }

.shell-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 20px;
    /* Keep the gym name on a single line even on narrow viewports. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: clamp(180px, 38vw, 520px);
}
.shell-brand > span,
.shell-brand .shell-gym-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.shell-brand img {
    width: 36px; height: 36px;
    object-fit: contain;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
}
.shell-spacer { flex: 1; }

.shell-icon-btn {
    background: transparent;
    color: var(--shell-fg);
    border: 0;
    width: 38px; height: 38px;
    border-radius: 999px;
    cursor: pointer;
}
.shell-icon-btn:hover { background: rgba(255, 255, 255, 0.08); }

.shell-badge {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 700;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #0f172a;
}
.shell-badge.hidden { display: none; }

.shell-user {
    color: var(--shell-fg-dim);
    font-size: 13px;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shell-logout {
    background: rgba(255, 255, 255, 0.08);
    color: var(--shell-fg);
    border: 0;
    width: 38px; height: 38px;
    border-radius: 10px;
    cursor: pointer;
}
.shell-logout:hover { background: #b81515; color: #fff; }

/* ---------- Sidebar (off-canvas on ALL viewports) ----------------- */
.shell-sidebar {
    position: fixed;
    top: var(--shell-topbar-h);
    bottom: 0;
    right: 0;
    width: var(--shell-sidebar-w);
    background: var(--shell-bg-2);
    color: var(--shell-fg);
    border-left: 1px solid var(--shell-border);
    overflow-y: auto;
    z-index: 1050;
    transform: translateX(100%); /* hidden by default (RTL: slide off right) */
    transition: transform 0.25s ease;
}
.shell-sidebar.open { transform: translateX(0); }

.shell-sidebar-head {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--shell-border);
    position: sticky; top: 0;
    background: var(--shell-bg-2);
    z-index: 1;
}
.shell-sidebar-title {
    font-weight: 700; font-size: 14px; color: var(--shell-fg-dim);
}
.shell-close {
    background: rgba(255,255,255,0.06);
    color: var(--shell-fg);
    border: 0;
    width: 34px; height: 34px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.shell-close:hover { background: #b81515; color: #fff; }

.shell-nav {
    padding: 10px 8px 80px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.shell-link,
.shell-group-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--shell-fg);
    text-decoration: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
    text-align: right;
}
.shell-link:hover,
.shell-group-toggle:hover {
    background: rgba(255, 255, 255, 0.06);
}
.shell-link.active {
    background: var(--shell-accent-dim);
    color: var(--shell-accent);
}
.shell-link i,
.shell-group-toggle > i:first-child {
    width: 20px; text-align: center;
}
.shell-label { flex: 1; }

.shell-group-toggle .shell-caret {
    transition: transform 0.2s ease;
    font-size: 11px;
    opacity: 0.7;
}
.shell-group.open .shell-caret { transform: rotate(180deg); }

.shell-children {
    display: none;
    flex-direction: column;
    gap: 2px;
    padding-right: 14px;   /* RTL indent */
    margin-top: 2px;
    border-right: 2px solid rgba(46, 216, 163, 0.25);
}
.shell-group.open .shell-children { display: flex; }
.shell-children .shell-link {
    padding: 8px 10px;
    font-size: 13px;
    color: var(--shell-fg-dim);
}
.shell-children .shell-link:hover { color: var(--shell-fg); }
.shell-children .shell-link.active { color: var(--shell-accent); }

.shell-role-tag {
    margin: 14px 4px 4px;
    font-size: 11px;
    color: var(--shell-fg-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ---------- Backdrop & content -------------------------------------- */
.shell-backdrop {
    position: fixed;
    inset: var(--shell-topbar-h) 0 0 0; /* don't cover the topbar */
    background: rgba(0, 0, 0, 0.45);
    z-index: 1040;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.shell-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

#appContent {
    padding-top: var(--shell-topbar-h);
    /* full-width by default — sidebar overlays instead of pushing */
}

/* When #subscriptionBanner is a direct body child (most pages), push it
   below the 60px fixed topbar so it is not hidden behind the header.
   On leads.html the banner sits inside #appContent so this rule won't apply. */
body > #subscriptionBanner {
    margin-top: var(--shell-topbar-h);
}

@media (max-width: 900px) {
    .shell-user { display: none; }
    .shell-sidebar { width: min(var(--shell-sidebar-w), 86vw); }
}

/* ---------- Body lock when sidebar open on mobile ------------------ */
.shell-no-scroll { overflow: hidden; }

/* ---------- Light mode override ------------------------------------ */
/* NOTE: theme.js sets data-theme="light" on <html>, NOT a class.     */
[data-theme="light"] .shell-topbar {
    background: #ffffff;
    color: #1a1c1e;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
[data-theme="light"] .shell-burger,
[data-theme="light"] .shell-icon-btn { color: #1a1c1e; }
[data-theme="light"] .shell-burger:hover,
[data-theme="light"] .shell-icon-btn:hover { background: rgba(0,0,0,0.06); }
[data-theme="light"] .shell-logout { color: #1a1c1e; background: rgba(0,0,0,0.06); }
[data-theme="light"] .shell-logout:hover { background: #dc2626; color: #fff; }
[data-theme="light"] .shell-user { color: #475569; }
[data-theme="light"] .shell-brand { color: #1a1c1e; }
[data-theme="light"] .shell-brand img { background: rgba(0,0,0,0.06); }
[data-theme="light"] .shell-sidebar {
    background: #f8fafc;
    color: #1a1c1e;
    border-left-color: #e2e8f0;
}
[data-theme="light"] .shell-sidebar-head {
    background: #f8fafc;
    border-bottom-color: #e2e8f0;
}
[data-theme="light"] .shell-sidebar-title { color: #475569; }
[data-theme="light"] .shell-close { background: #e2e8f0; color: #1a1c1e; }
[data-theme="light"] .shell-close:hover { background: #dc2626; color: #fff; }
[data-theme="light"] .shell-link,
[data-theme="light"] .shell-group-toggle { color: #1a1c1e; }
[data-theme="light"] .shell-link:hover,
[data-theme="light"] .shell-group-toggle:hover { background: #e9eef4; }
[data-theme="light"] .shell-link.active {
    background: rgba(13, 143, 106, 0.12);
    color: #0d8f6a;
}
[data-theme="light"] .shell-children { border-right-color: rgba(13, 143, 106, 0.4); }
[data-theme="light"] .shell-children .shell-link { color: #475569; }
[data-theme="light"] .shell-children .shell-link:hover { color: #1a1c1e; background: #e9eef4; }
[data-theme="light"] .shell-children .shell-link.active { color: #0d8f6a; }
[data-theme="light"] .shell-role-tag { color: #64748b; }
[data-theme="light"] .shell-caret { opacity: 0.5; }