/* ================================================================
   SIDEBAR + TOPBAR — Mathom House
   Sidebar stays dark in both light and dark mode (VS Code pattern)
   ================================================================ */

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  transition: background 0.3s, color 0.3s;
  /* Offset all page content past the fixed sidebar on desktop */
  padding-left: var(--sidebar-w, 240px);
}

@media (max-width: 900px) {
  body {
    padding-left: 0;
    /* Add room for the fixed mobile topbar */
    padding-top: var(--topbar-h, 52px);
  }
}

/* ── SIDEBAR ── */
/* Applied via both #id (all pages) and .class (index.html explicitly) */
#header-placeholder,
.sidebar {
  width: var(--sidebar-w, 240px);
  height: 100vh;
  position: fixed; top: 0; left: 0;
  z-index: 300;
  background: var(--sidebar-bg, #080c15);
  border-right: 1px solid rgba(0,212,170,0.08);
  display: flex; flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  transition: transform 0.3s ease;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,212,170,0.15) transparent;
}

/* ── SIDEBAR HEADER / LOGO ── */
.sidebar-header {
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
}
.sidebar-logo {
  text-decoration: none;
  display: block;
}
.logo-text {
  font-family: 'Rajdhani', sans-serif;
  font-size: 20px; font-weight: 700; letter-spacing: 2px;
  color: #c8e0ee;
  text-transform: uppercase; display: block; line-height: 1.1;
}
.logo-accent { color: var(--teal, #00d4aa); }
.logo-sub {
  font-size: 10px; letter-spacing: 1.5px;
  color: rgba(74,122,144,0.7); text-transform: uppercase;
  margin-top: 3px; display: block;
}

/* ── SIDEBAR NAV ── */
.sidebar-nav {
  flex: 1;
  padding: 8px 0;
  overflow-y: auto;
}

.nav-group {
  padding: 12px 0 6px;
}

.nav-label {
  display: block;
  font-family: 'Rajdhani', sans-serif;
  font-size: 9px; letter-spacing: 2.5px; font-weight: 600;
  text-transform: uppercase;
  color: rgba(74,122,144,0.5);
  padding: 0 20px 6px;
  margin-bottom: 2px;
  border-top: 1px solid rgba(255,255,255,0.04);
  padding-top: 12px;
}
.nav-group:first-child .nav-label { border-top: none; padding-top: 4px; }

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 18px;
  font-size: 13px; font-weight: 500;
  color: rgba(140,170,190,0.7);
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
  border-left: 2px solid transparent;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-item:hover {
  color: #c8e0ee;
  background: rgba(0,212,170,0.04);
}
.nav-item.active {
  color: var(--teal, #00d4aa);
  border-left-color: var(--teal, #00d4aa);
  background: rgba(0,212,170,0.07);
}

.nav-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--dot, rgba(100,140,160,0.5));
  flex-shrink: 0;
  box-shadow: 0 0 4px var(--dot, transparent);
}

/* ── SIDEBAR FOOTER / THEME TOGGLE ── */
.sidebar-footer {
  padding: 16px 20px;
  border-top: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
}
.sidebar-theme-btn {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px; letter-spacing: 1.5px; font-weight: 600;
  text-transform: uppercase;
  color: rgba(74,122,144,0.7);
  background: transparent; border: none;
  padding: 8px 10px; width: 100%;
  cursor: pointer;
  border-radius: 4px;
  clip-path: none;
  transition: color 0.15s, background 0.15s;
}
.sidebar-theme-btn:hover {
  color: #c8e0ee;
  background: rgba(255,255,255,0.04);
  filter: none; transform: none;
}
.sidebar-theme-label { flex: 1; text-align: left; }

/* ── SIDEBAR COFFEE LINK ── */
.sidebar-coffee {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px; letter-spacing: 1.5px; font-weight: 600;
  text-transform: uppercase; text-decoration: none;
  color: #f59e0b;
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.2);
  padding: 8px 10px; margin-bottom: 6px;
  transition: background 0.15s, border-color 0.15s;
  border-radius: 4px;
}
.sidebar-coffee:hover {
  background: rgba(245,158,11,0.15);
  border-color: rgba(245,158,11,0.4);
  color: #f59e0b;
}

/* ── TOPBAR ── */
.topbar {
  height: var(--topbar-h, 52px);
  background: rgba(7,10,15,0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,212,170,0.1);
  display: flex; align-items: center;
  padding: 0 24px; gap: 16px;
  position: sticky; top: 0; z-index: 200;
  flex-shrink: 0;
  transition: background 0.3s, border-color 0.3s;
}

[data-theme="light"] .topbar {
  background: rgba(238,242,247,0.96);
  border-bottom-color: rgba(0,0,0,0.08);
}

.topbar-burger {
  display: none;
  flex-direction: column; gap: 4px;
  background: none; border: none;
  padding: 6px; cursor: pointer;
  clip-path: none; transform: none; filter: none;
  width: auto;
}
.topbar-burger:hover { background: none; filter: none; transform: none; }
.topbar-burger span {
  width: 20px; height: 2px;
  background: rgba(140,170,190,0.7);
  display: block;
  transition: background 0.15s;
}
.topbar-burger:hover span { background: #c8e0ee; }

.topbar-brand {
  font-family: 'Rajdhani', sans-serif;
  font-size: 18px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: #c8e0ee;
  text-decoration: none; display: none;
}
.topbar-brand span { color: var(--teal, #00d4aa); }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(0,212,170,0.15);
  color: rgba(140,170,190,0.7);
  cursor: pointer;
  border-radius: 0;
  clip-path: none; padding: 0; transform: none;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.theme-toggle:hover {
  color: var(--teal, #00d4aa);
  border-color: rgba(0,212,170,0.4);
  background: rgba(0,212,170,0.06);
  filter: none; transform: none;
}

/* ── MOBILE TOPBAR (inside sidebar, shown on mobile only) ── */
.mobile-topbar {
  display: none;
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--topbar-h, 52px);
  background: #111620;
  border-bottom: 1px solid rgba(0,212,170,0.12);
  z-index: 400;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
}
.mobile-burger {
  display: flex; flex-direction: column; gap: 4px;
  background: none; border: none; padding: 6px;
  cursor: pointer; clip-path: none; width: auto;
  transform: none; filter: none;
}
.mobile-burger:hover { background: none; filter: none; transform: none; }
.mobile-burger span { width: 20px; height: 2px; background: rgba(200,224,238,0.7); display: block; }
.mobile-brand {
  font-family: 'Rajdhani', sans-serif;
  font-size: 17px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: #c8e0ee; text-decoration: none; flex: 1;
}
.mobile-brand span { color: var(--teal, #00d4aa); }
.mobile-topbar .theme-toggle {
  background: none; border: none; padding: 6px; color: rgba(200,224,238,0.6);
  cursor: pointer; clip-path: none; width: auto; transform: none;
  display: flex; align-items: center;
}
.mobile-topbar .theme-toggle:hover { color: var(--teal,#00d4aa); filter: none; transform: none; }

/* ── MOBILE: sidebar becomes drawer ── */
@media (max-width: 900px) {
  .mobile-topbar { display: flex; }
  #header-placeholder {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    /* Sidebar drops below the mobile topbar */
    padding-top: var(--topbar-h, 52px);
  }
  #header-placeholder.sidebar-open {
    transform: translateX(0);
  }
  .topbar-burger { display: flex; }
  .topbar-brand { display: block; }
}

@media (min-width: 901px) {
  /* Hide topbar theme toggle on desktop — sidebar has it */
  .topbar-right { display: none; }
  /* Keep topbar but thinner on desktop */
  .topbar {
    height: 44px;
    border-bottom: 1px solid rgba(0,212,170,0.06);
    background: rgba(7,10,15,0.5);
  }
}