/* ====================================
   DeerLabs — Layout (Navbar, Sidebar, Grid)
   ==================================== */

/* ── Top Navbar ── */
.topnav {
  position: fixed; top: 0; left: 0; right: 0; height: var(--navbar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px;
  background: rgba(15,23,42,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  z-index: 100;
}
.topnav-brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--fg);
}
.topnav-brand svg { flex-shrink: 0; }
.topnav-brand span { font-weight: 800; font-size: 18px; letter-spacing: 0.06em; }

.topnav-links { display: flex; align-items: center; gap: 6px; }

.topnav-link {
  color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 500;
  padding: 6px 14px; border-radius: var(--radius-md); transition: all var(--ease);
}
.topnav-link:hover { color: var(--fg); background: rgba(255,255,255,0.05); }
.topnav-link.active { color: var(--brand); background: var(--brand-dim); }

.topnav-user { color: var(--muted); font-size: 13px; padding: 0 8px; }

.topnav-btn {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--bg1); background: var(--brand); border: none;
  padding: 7px 16px; border-radius: var(--radius-md); font-size: 13px; font-weight: 600;
  cursor: pointer; text-decoration: none; transition: background var(--ease);
}
.topnav-btn:hover { background: var(--brand-hover); color: var(--bg1); }
.topnav-btn.outline {
  background: transparent; color: var(--muted);
  border: 1px solid var(--border-light);
}
.topnav-btn.outline:hover { color: var(--fg); border-color: rgba(255,255,255,0.2); }

.topnav-toggle {
  display: none; background: none; border: none; color: var(--fg);
  padding: 6px; cursor: pointer;
}

/* ── App layout wrapper ── */
.app-layout {
  display: flex;
  padding-top: var(--navbar-h);
  min-height: 100vh;
}

/* ── Left Sidebar ── */
.sidebar {
  position: fixed; top: var(--navbar-h); left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: rgba(30,41,59,0.45);
  border-right: 1px solid var(--border);
  padding: 16px 10px;
  overflow-y: auto;
  z-index: 50;
  transition: transform 0.25s ease;
}

.sidebar-section { margin-bottom: 22px; }

.sidebar-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--dim); padding: 0 12px;
  margin-bottom: 6px;
}

.sidebar-nav { list-style: none; padding: 0; margin: 0; }
.sidebar-nav li a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: var(--radius-md);
  color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 500;
  transition: all var(--ease);
}
.sidebar-nav li a:hover { color: var(--fg); background: rgba(255,255,255,0.04); }
.sidebar-nav li a.active { color: var(--brand); background: var(--brand-dim); }
.sidebar-nav li a svg { flex-shrink: 0; opacity: 0.6; }
.sidebar-nav li a:hover svg,
.sidebar-nav li a.active svg { opacity: 1; }

.sidebar-badge {
  margin-left: auto; font-size: 10px; font-weight: 700;
  background: var(--brand-dim); color: var(--brand);
  padding: 2px 7px; border-radius: var(--radius-pill);
}

.sidebar-divider {
  height: 1px; background: var(--border); margin: 12px 12px;
}

/* ── Main content area ── */
.main-content {
  flex: 1;
  margin-left: var(--sidebar-w);
  padding: 24px 28px;
  min-width: 0;
}

/* ── Page header ── */
.page-header { margin-bottom: 24px; }
.page-header h1 { font-size: 22px; font-weight: 700; margin: 0 0 4px; }
.page-header p { color: var(--muted); font-size: 13px; margin: 0; }

/* ── Sidebar backdrop (mobile only) ──
   A dimming overlay that sits between the page and the sidebar. Tapping
   anywhere on it closes the menu. Injected at runtime by nav.js so we
   don't have to thread an extra element through every template. */
.sidebar-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 40;
}
.sidebar-backdrop.show { opacity: 1; visibility: visible; }

/* ── Mobile auth section inside the sidebar ──
   Hidden by default; shown only at mobile widths (the desktop top navbar
   already carries this info). */
.sidebar-auth { display: none; }
.sidebar-user-row { padding: 0 12px 8px; }
.sidebar-user-label {
  display: block; font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--dim); margin-bottom: 2px;
}
.sidebar-user-name { font-weight: 700; color: var(--fg); font-size: 14px; word-break: break-word; }
.sidebar-auth-btn {
  display: block; width: calc(100% - 24px); margin: 0 12px;
  text-align: center;
  background: transparent; color: var(--muted);
  border: 1px solid var(--border-light);
  padding: 10px 16px; border-radius: var(--radius-md);
  font-size: 14px; font-weight: 600; cursor: pointer;
  text-decoration: none;
  transition: all var(--ease);
}
.sidebar-auth-btn:hover { color: var(--fg); border-color: rgba(255,255,255,0.2); }
.sidebar-auth-btn.primary { background: var(--brand); color: var(--bg1); border-color: var(--brand); }
.sidebar-auth-btn.primary:hover { background: var(--brand-hover); color: var(--bg1); }

/* ── Responsive ── */
@media (max-width: 768px) {
  .topnav { padding: 0 14px; }

  /* Hamburger drives the sidebar only. The topnav links dropdown is GONE
     on mobile — the sidebar is the single source of navigation. */
  .topnav-toggle { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  .topnav-links  { display: none !important; }

  .sidebar { transform: translateX(-100%); width: 84vw; max-width: 320px; }
  .sidebar.open { transform: translateX(0); box-shadow: 8px 0 32px rgba(0,0,0,0.5); }

  .main-content { margin-left: 0; padding: 16px 14px 80px; }

  /* Show the sidebar's auth controls only on mobile. */
  .sidebar-auth { display: block; }

  /* Lock body scroll while the menu is open (prevents the page from
     scrolling underneath the open sheet). */
  body.sidebar-open { overflow: hidden; touch-action: none; }

  /* Bigger tap targets in the sidebar — comfortable for thumbs. */
  .sidebar-nav li a { padding: 12px 14px; font-size: 15px; }

  /* Tighter page header on small screens. */
  .page-header h1 { font-size: 20px; }

  /* iOS zooms the viewport when a text input has font-size < 16px on focus.
     Forcing 16px on form controls prevents that jarring zoom. */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  textarea,
  select { font-size: 16px; }

  /* Game tabs get a slightly bigger touch area on mobile. */
  .tab { padding: 9px 16px; font-size: 14px; }

  /* Things like wide pre/code/table blocks shouldn't blow out the viewport. */
  pre, code, table { max-width: 100%; }
  pre { overflow-x: auto; }
  .markdown-body table, .post-body table { display: block; overflow-x: auto; }
}

/* Single-column on phones for any responsive grid that doesn't already cap itself. */
@media (max-width: 480px) {
  .service-grid, .card-grid, .home-cta-grid, .storage-grid, .status-list { grid-template-columns: 1fr !important; }
}