/* =============================================================
   Astrology Hub — SIDEBAR structural positioning (v58+)
   ----------------------------------------------------------------
   ONLY layout/positioning rules that CANNOT be expressed as
   Tailwind utilities live here (ancestor-based selectors, media
   queries referencing body classes, grid-row animations).

   All visual styling (colors, fonts, borders, shadows, hover
   states) is now driven by Tailwind utilities in the Blade template
   (sidebar.blade.php) using sidebar-* semantic tokens.
   ============================================================= */

/* Hide the legacy .ah-sidebar / .ah-nav styles. */
.ah-sidebar, .ah-nav { display: none !important; }

/* ── Container — STICKY, full-height sidebar column.
   Width matches the shell's CSS-grid sidebar column (--ah-side-w). ── */
.ahs {
    position: sticky;
    top: 0;
    align-self: flex-start;
    width: var(--ah-side-w, 272px);
    flex-shrink: 0;
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 30;
    isolation: isolate;
    /* Token-driven background — set via Tailwind `bg-sidebar` on the element,
       but we add the gradient overlay here because ::before pseudo is structural. */
    background: var(--sidebar);
}

/* Top accent hairline — animated brand gradient */
.ahs::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary), var(--sidebar-primary), transparent);
    background-size: 200% 100%;
    animation: ahs-flow 8s linear infinite;
    z-index: 2;
    pointer-events: none;
}
@keyframes ahs-flow { to { background-position: 200% 0; } }

/* Pulse animation for status dots */
@keyframes ahs-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(20,184,166,0.6); }
    70% { box-shadow: 0 0 0 6px transparent; }
}

/* ── Nav scroller — custom thin scrollbar ─────────────────────── */
.ahs__nav {
    scrollbar-width: thin;
    scrollbar-color: var(--sidebar-border) transparent;
}
.ahs__nav::-webkit-scrollbar { width: 6px; }
.ahs__nav::-webkit-scrollbar-track { background: transparent; }
.ahs__nav::-webkit-scrollbar-thumb {
    background: var(--sidebar-border);
    border-radius: 999px;
}
.ahs__nav::-webkit-scrollbar-thumb:hover {
    background: var(--sidebar-primary);
    opacity: 0.5;
}

/* Centre the empty state when it's the only child in .ahs__nav */
.ahs__nav:has(> .ahs__empty:only-child) {
    justify-content: center;
}

/* ── Group expand/collapse — smooth grid-row animation ────────── */
.ahs__group__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.22s ease;
    overflow: hidden;
}
.ahs__group__body__inner {
    overflow: hidden;
    min-height: 0;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.18s ease, transform 0.22s ease;
}
.ahs__group.is-open .ahs__group__body {
    grid-template-rows: 1fr;
}
.ahs__group.is-open .ahs__group__body__inner {
    opacity: 1;
    transform: translateY(0);
    padding: 2px 0 6px;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — ancestor-based selectors (can't be Tailwind)
   ═══════════════════════════════════════════════════════════════ */

/* ── Collapsed state — sidebar FULLY hidden (width: 0).
   The collapse button in the topbar restores it. ── */
@media (min-width: 1025px) {
    body.ah-sidebar-collapsed .ah-shell {
        grid-template-columns: 0 1fr !important;
    }
    body.ah-sidebar-collapsed .ahs {
        width: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        transition: width 0.28s ease;
    }
}

/* ── Tablet 768–1024: sidebar hidden by default, drawer on toggle ── */
@media (min-width: 768px) and (max-width: 1024px) {
    .ahs {
        position: fixed;
        top: 0; left: 0;
        z-index: 100;
        transform: translateX(-100%);
        transition: transform 0.28s ease;
        box-shadow: 16px 0 40px rgba(0,0,0,0.55);
    }
    .ahs.is-open { transform: translateX(0); }
    .ahs__close { display: inline-grid !important; }
}

/* ── Mobile < 768: drawer overlay ──────────────────────────────── */
@media (max-width: 767px) {
    .ahs {
        position: fixed;
        top: 0; left: 0;
        z-index: 1000;
        width: 90vw;
        max-width: 348px;
        transform: translateX(-100%);
        transition: transform 0.30s cubic-bezier(.4, 0, .2, 1);
        box-shadow: 24px 0 60px -12px rgba(0,0,0,0.55);
    }
    .ahs.is-open { transform: translateX(0); }
    .ahs__close {
        display: inline-grid !important;
        width: 38px !important;
        height: 38px !important;
    }

    /* ── Professional mobile ergonomics ───────────────────────────────
       On phones every row must be a comfortable thumb target and the
       list must breathe. These override the compact desktop utilities. */

    /* Brand header — a touch more room + a bigger close affordance */
    .ahs > div:first-child { padding: 20px 18px 14px; }

    /* Nav scroller — momentum scroll, safe-area aware bottom padding */
    .ahs__nav {
        -webkit-overflow-scrolling: touch;
        padding: 10px 8px 14px;
        gap: 3px;
    }

    /* Nav rows — 46px min tap target, larger label + icon, rounder */
    .ahs__nav a {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        min-height: 46px;
        font-size: 0.95rem !important;
        border-radius: 12px !important;
    }
    .ahs__nav a > svg { width: 20px !important; height: 20px !important; }

    /* Group headers — clearer, more spaced section labels */
    .ahs__group { margin-bottom: 4px; }
    .ahs__group__head {
        padding-top: 13px !important;
        padding-bottom: 8px !important;
        font-size: 0.63rem !important;
        letter-spacing: 0.16em !important;
    }

    /* Active-chart / filter cards — a little more breathing room */
    .ahs__nav-tag, .ahs__group__body__inner { gap: 3px; }

    /* Footer — compact, pinned, safe-area aware. The account pill and its
       quick tiles get bigger touch targets. */
    .ahs > div:last-child {
        padding: 12px 12px calc(env(safe-area-inset-bottom, 0px) + 14px) !important;
    }
    [data-ahs-account-toggle] { padding-top: 11px !important; padding-bottom: 11px !important; }
    [data-ahs-account-menu] a,
    [data-ahs-account-menu] [role="menuitem"] { padding-top: 11px !important; padding-bottom: 11px !important; }
}

/* Mobile/tablet drawer scrim — removed. It sat above the drawer in the
   tablet range (backdrop z-index 999 vs sidebar z-index 100) and covered
   the whole viewport, so menu taps were swallowed. The drawer now closes
   via outside-tap / X / Esc (handled in sidebar.blade.php). Force it gone
   so any cached markup can never intercept clicks again. */
.ahs-backdrop { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   Account popover — cap its height so it can never grow taller than
   the viewport (on a phone the 12-item menu used to overshoot the top
   of the drawer and bury the nav). Scroll internally instead.
   ═══════════════════════════════════════════════════════════════ */
[data-ahs-account-menu] {
    max-height: min(68vh, 520px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* ── BUGFIX: account popover opening itself on mobile ──────────────────
   The popover markup uses Tailwind's `[.is-open_&]` variant to reveal
   itself — but that matches ANY ancestor carrying `.is-open`. On phones
   the mobile drawer sidebar (`.ahs`) gets `.is-open` when it slides in,
   so simply opening the drawer auto-expanded this menu and buried the
   nav. Force it CLOSED whenever its own wrapper isn't toggled; a real
   tap on the account pill adds `.is-open` to [data-ahs-account] and this
   `:not(.is-open)` guard stops matching, letting it open normally. */
[data-ahs-account]:not(.is-open) [data-ahs-account-menu] {
    opacity: 0 !important;
    transform: scale(0.95) !important;
    pointer-events: none !important;
}
[data-ahs-account]:not(.is-open) [data-ahs-account-toggle] > span:last-child {
    transform: none !important;   /* keep the chevron un-rotated while closed */
}

/* ═══════════════════════════════════════════════════════════════
   Desktop collapse PULL-TAB — a handle riding the sidebar's right
   outline (replaces the old topbar collapse button). Straddles the
   edge; when the sidebar collapses to width:0 it slides flush to the
   screen's left edge so it's still reachable to re-open.
   Desktop only (≥1025px) — phones/tablets use the hamburger drawer.
   ═══════════════════════════════════════════════════════════════ */
.ah-rail-toggle { display: none; }

@media (min-width: 1025px) {
    .ah-rail-toggle {
        position: fixed;
        top: 50%;
        left: var(--ah-side-w, 272px);
        transform: translate(-50%, -50%);
        z-index: 40;                 /* above sidebar(30)/content, below modal(60) */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 64px;
        padding: 0;
        border: 1px solid var(--sidebar-border);
        border-radius: 9px;
        background: var(--sidebar);
        color: var(--sidebar-primary);
        box-shadow: 3px 0 12px -5px rgba(10, 6, 40, 0.45);
        cursor: pointer;
        transition: left 0.28s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    }
    .ah-rail-toggle:hover {
        background: var(--sidebar-accent);
        box-shadow: 4px 0 16px -5px rgba(10, 6, 40, 0.55);
    }
    .ah-rail-toggle:active { transform: translate(-50%, -50%) scale(0.94); }
    .ah-rail-toggle svg { transition: transform 0.28s ease; }

    /* Collapsed: sidebar width→0, so pin the tab to the screen edge and
       round only its outer corners; flip the chevron to point "open". */
    body.ah-sidebar-collapsed .ah-rail-toggle {
        left: 0;
        transform: translate(0, -50%);
        border-radius: 0 10px 10px 0;
        border-left: 0;
    }
    body.ah-sidebar-collapsed .ah-rail-toggle:active { transform: translate(0, -50%) scale(0.94); }
    body.ah-sidebar-collapsed .ah-rail-toggle svg { transform: rotate(180deg); }
}