/* AIO: NextGen Desktop Sidebar
   Purpose: permanent left sidebar on desktop (>=992px).
   Notes:
   - Overrides aria-hidden transform rules from custom-overrides.css
   - Keeps sidebar below header by --aio-header-h
*/
@media (min-width: 992px){

  :root{
    --aio-sidebar-w: 260px;
    --aio-header-h: 64px; /* adjust if header height changes */
  }

  /* The drawer becomes the fixed sidebar container */
  body.ng .ng-drawer{
    position: fixed !important;
    left: 0 !important;
    top: var(--aio-header-h) !important;
    bottom: 0 !important;

    width: var(--aio-sidebar-w) !important;
    max-width: var(--aio-sidebar-w) !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;

    transform: none !important;
    clip-path: none !important;

    /* KEY: sit above main content (wins if something "covers" it) */
    z-index: 5000 !important;
  }

  /* No backdrop on desktop */
  body.ng .ng-drawer__backdrop{
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Defeat custom-overrides aria-hidden transforms */
  body.ng .ng-drawer[aria-hidden="true"]  .ng-drawer__panel,
  body.ng .ng-drawer[aria-hidden="false"] .ng-drawer__panel{
    transform: none !important;
    pointer-events: auto !important;
  }

  /* Panel fills the sidebar container */
  body.ng .ng-drawer__panel{
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    max-width: 100% !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;

    background: #0f1720 !important;
    border-right: 2px solid rgba(255,255,255,.12) !important;
  }

  /* Desktop: hide mobile controls */
  body.ng .ng-menu{ display: none !important; }
  body.ng .ng-drawer__close{ display: none !important; }

  /* Push site content to the right */
  body.ng .ng-header,
  body.ng .ng-main,
  body.ng .ng-footer{
    margin-left: var(--aio-sidebar-w) !important;
  }

  /* Basic link color (avoid "invisible on dark") */
  body.ng .ng-drawer__panel a{
    color: #fff !important;
  }
}

/* AIO: Desktop sidebar list styling (override mobile pill styles) */
@media (min-width: 992px){

  body.ng .ng-drawer__list{
    margin: 0 !important;
    padding: 10px 10px 14px 10px !important;
    list-style: none !important;
  }

  body.ng .ng-drawer__list li{
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
  }

  body.ng .ng-drawer__list a{
    display: block !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;

    background: transparent !important;
    border: 1px solid rgba(255,255,255,.10) !important;

    text-decoration: none !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  body.ng .ng-drawer__list a:hover{
    background: rgba(255,255,255,.06) !important;
  }
}

/* AIO: Desktop sidebar - kill any remaining "mobile pill/button" styling */
@media (min-width: 992px){
  body.ng .ng-drawer__list li,
  body.ng .ng-drawer__list a{
    box-shadow: none !important;
    background-image: none !important;
    filter: none !important;
  }
  body.ng .ng-drawer__list a{
    border-radius: 10px !important;
  }
}

/* ============================================================
   AIO: DESKTOP SIDEBAR + HEADER INTEGRATION (2026-02-23)
   Goal: Sidebar always visible on desktop AND aligned with header.
   - Sidebar width: 312px
   - Header content shifts right to match main column
   - Sidebar visually tucks under header (integrated)
   ============================================================ */

@media (min-width: 1024px){

    :root{ --aio-sidebar-w: 260px; }
:root{
    --aio-sidebar-w: 260px;
    --aio-header-h: 64px; /* adjust later if needed */
  }

  /* 1) Sidebar: fixed, always present, no slide transforms */
  body.ng .ng-drawer,
  body.ng .ng-drawer__panel{
    transform: none !important;
  }

  body.ng .ng-drawer{
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: var(--aio-sidebar-w) !important;
    height: 100vh !important;
    z-index: 30 !important; /* below header */
  }

  body.ng .ng-drawer__backdrop{
    display: none !important; /* desktop: no overlay */
  }

  /* Panel fills full height; content starts below header */
  body.ng .ng-drawer__panel{
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: var(--aio-sidebar-w) !important;
    height: 100vh !important;
    padding-top: var(--aio-header-h) !important; /* integrate under header */
    overflow: hidden !important; /* list scroll handles scrolling */
    box-shadow: none !important;  /* cleaner desktop */
    border-right: 1px solid rgba(0,0,0,0.08) !important;
  }

  /* Sidebar list scroll area (keeps header integration clean) */
  body.ng .ng-drawer__list{
    max-height: calc(100vh - var(--aio-header-h)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* 2) Main content shifts right */
  body.ng .ng-main,
  body.ng main.ng-main{
    margin-left: var(--aio-sidebar-w) !important;
  }

  /* 3) Header shifts right so it matches the main column */
  body.ng header.ng-header{
    padding-left: var(--aio-sidebar-w) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important; /* above drawer */
  }

  /* 4) Prevent desktop body scroll lock if any leftover class is present */
  body.ng.ng-drawer-open{
    overflow: auto !important;
  }
}

/* ============================================================
   AIO: DESKTOP SIDEBAR + HEADER INTEGRATION (v2) (2026-02-23)
   Fix: avoid shifting the *entire* header (causes lopsided feel).
   Instead: header stays full-width; shift only header INNER wrapper.
   Also: sidebar starts under header for a tucked-in look.
   ============================================================ */

@media (min-width: 1024px){

  :root{
    --aio-sidebar-w: 260px;
    --aio-header-h: 64px;
  }

  /* Header: keep full width; remove previous whole-header left padding */
  body.ng header.ng-header{
    padding-left: 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 60 !important; /* above drawer */
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    background: #fff !important;
  }

  /* Shift ONLY the header inner content to align with main column */
  body.ng header.ng-header > .ng-header__inner{
    margin-left: var(--aio-sidebar-w) !important;
    width: calc(100% - var(--aio-sidebar-w)) !important;
    max-width: none !important;
  }

  /* Desktop: menu is always visible, so hide the hamburger */
  body.ng header.ng-header .ng-menu{
    display: none !important;
  }

  /* Sidebar: start under header (integrated), not behind it */
  body.ng .ng-drawer{
    top: var(--aio-header-h) !important;
    height: calc(100vh - var(--aio-header-h)) !important;
    z-index: 40 !important; /* below header */
  }

  body.ng .ng-drawer__panel{
    top: var(--aio-header-h) !important;
    height: calc(100vh - var(--aio-header-h)) !important;
    padding-top: 0 !important; /* now that the panel starts under header */
    border-right: 1px solid rgba(0,0,0,0.08) !important;
    background: #fff !important;
  }

  body.ng .ng-drawer__list{
    max-height: calc(100vh - var(--aio-header-h)) !important;
  }
}

/* AIO: DESKTOP FORCE OPEN START
   Goal: On desktop, keep the left sidebar menu ALWAYS visible (non-retracting),
   regardless of aria-hidden state. Mobile drawer behavior stays unchanged. */
@media (min-width: 1024px){

  /* Force the drawer container to exist + be interactive even if aria-hidden="true" */
  body.ng .ng-drawer{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Panel: pinned left, no slide transforms */
  body.ng .ng-drawer__panel{
    transform: none !important;
    left: 0 !important;
    position: fixed !important;
  }

  /* No dark overlay/backdrop on desktop */
  body.ng .ng-drawer__backdrop{
    display: none !important;
    pointer-events: none !important;
  }

  /* No close button on desktop (it’s not a drawer anymore) */
  body.ng .ng-drawer__close{
    display: none !important;
  }

  /* If any “open” class toggles exist, keep them from shifting things */
  body.ng.ng-drawer-open{
    overflow: auto !important;
  }
}
/* AIO: DESKTOP FORCE OPEN END */