/* Standalone-page nav overrides (files / rets / blog).
   Everything else (sidebar, topbar, account card, session list, login
   modal...) is the exact same markup + assets/style.css as index.php.

   Layout model differs by breakpoint, matching index.php exactly at
   each one:

   - Desktop (>800px): a persistent two-column layout (sidebar column +
     a content column holding the topbar and the page's own <main>),
     not an overlay drawer — same idea as index.php's desktop
     `.sidebar-hidden` toggle. Opening the sidebar grows its column and
     pushes the topbar/content aside.

   - Mobile (<=800px): index.php never pushes content on mobile — the
     sidebar is a fixed-position overlay drawer that slides in on top
     of everything with a dark backdrop, and the topbar/content never
     resize or shift by even a pixel. These pages must match that
     exactly, so below 801px the grid/push rules are turned off and the
     sidebar switches to the same fixed + transform + backdrop
     mechanics as index.php's mobile sidebar. */

body.subpage-nav{
  overflow-x:hidden;
  width:100%;
  height:100dvh;
  min-height:100dvh;
}

@media(min-width:801px){
  body.subpage-nav{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr);
    overflow:hidden;
  }

  /* The sidebar column is sized `auto`, and the actual open/close
     animation happens on the sidebar's own `width` (0 -> 285px, the
     exact same value index.php's sidebar uses by default on desktop),
     exactly like index.php's `.sidebar-hidden .sidebar{width:0;
     flex-basis:0;...}` desktop toggle. That's what makes it track the
     same easing/duration as index and stay smooth — animating a
     child's width is far better supported by browsers than animating
     the grid container's track sizes directly. */
  body.subpage-nav .sidebar{
    position:static;
    grid-column:1;
    grid-row:1 / span 2;
    width:0;
    min-width:0;
    flex:0 0 auto;
    overflow:hidden;
    opacity:0;
    box-shadow:none;
    transform:none;
    transition:width .3s cubic-bezier(.22,1,.36,1),opacity .22s ease;
  }
  body.subpage-nav.sidebar-open .sidebar{
    width:285px;
    opacity:1;
  }

  /* Topbar sits in the content column, row 1 — always visible, never
     covered by the sidebar. */
  body.subpage-nav .subnav-topbar{
    grid-column:2;
    grid-row:1;
    min-width:0;
  }

  /* No backdrop needed on desktop — the layout pushes content aside
     instead of overlaying on top of it. */
  body.subpage-nav .sidebar-backdrop{display:none!important}
}

@media(max-width:800px){
  /* assets/style.css intentionally locks the page body because the chat
     screen has its own scroller. Standalone pages therefore need an
     explicit viewport-height flex layout; without it iOS treats <main>
     as auto-height content inside a locked body and the page feels stuck. */
  body.subpage-nav{
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }

  /* Same mechanics as index.php's mobile sidebar: fixed overlay,
     slides in with translateX, dark backdrop behind it. The topbar and
     <main> stay completely untouched — no width/columns change at
     all — because a position:fixed element is taken out of normal
     flow, so it can never push or resize anything around it. */
  body.subpage-nav .sidebar{
    position:fixed;
    inset:0 auto 0 0;
    width:min(300px,88vw);
    min-width:0;
    flex:none;
    overflow:hidden auto;
    opacity:1;
    transform:translateX(-102%);
    transition:transform .28s cubic-bezier(.22,1,.36,1);
    z-index:30;
  }
  body.subpage-nav.sidebar-open .sidebar{
    transform:translateX(0);
  }
}

/* The page's own <main> (files/rets/blog content) is the content
   column's second row and scrolls on its own. scrollbar-gutter keeps a
   stable reserved strip for the scrollbar so it never overlaps content
   (e.g. the "Aktif" pill on the RETS page), and the thin custom
   scrollbar matches the rest of the app instead of the default OS one. */
body.subpage-nav > main{
  grid-column:2;
  grid-row:2;
  min-width:0;
  min-height:0;
  max-width:100%;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  touch-action:pan-y;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:#252d39 transparent;
}

@media(max-width:800px){
  body.subpage-nav > .subnav-topbar{flex:0 0 60px}
  body.subpage-nav > main{
    flex:1 1 auto;
    width:100%;
    height:auto;
    scrollbar-gutter:auto;
  }

  /* Keep the drawer independently scrollable when its menu/history is
     taller than the phone. Horizontal gestures remain reserved for the
     slide animation, while normal vertical swipes always work. */
  body.subpage-nav .sidebar{
    height:100dvh;
    min-height:0;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
  }
}
body.subpage-nav > main::-webkit-scrollbar{width:8px}
body.subpage-nav > main::-webkit-scrollbar-track{background:transparent}
body.subpage-nav > main::-webkit-scrollbar-thumb{background:#252d39;border-radius:10px}
body.subpage-nav > main::-webkit-scrollbar-thumb:hover{background:#2f3948}

.top-model{text-decoration:none;color:inherit;cursor:pointer}

.rets-menu.active{
  border-color:rgba(66,215,173,.45);
  background:linear-gradient(135deg,rgba(66,215,173,.16),rgba(139,124,255,.05));
}
.rets-menu.active>.ui-icon{color:#5fe3bb}