/* ══ RESPONSIVE — tablet & mobile breakpoints ══
 *
 *  Desktop  ≥ 1024px  →  sidebar (collapsed 64px / expanded 200px)
 *  Tablet    768–1023px  →  sidebar icon-only, no expand, tighter layout
 *  Mobile   < 768px   →  sidebar hidden, bottom tab bar
 * ─────────────────────────────────────────────────────────────────── */

/* ── Tablet (768px – 1023px) ──────────────────────────────────────── */
@media (max-width: 1023px) {

  /* Sidebar stays collapsed — disable expand toggle */
  .nav-menu,
  .nav-menu.expanded {
    width: 64px;
  }

  .nav-menu .nav-label,
  .nav-menu.expanded .nav-label {
    opacity: 0;
    width: 0;
    overflow: hidden;
  }

  /* Keep tooltips always visible (not hidden by .expanded rule) */
  .nav-menu.expanded .nav-menu-button::after,
  .nav-menu.expanded .nav-user::after,
  .nav-menu.expanded .nav-settings-btn::after {
    display: block;
  }

  /* Team switcher doesn't fit in collapsed sidebar */
  .nav-team-switcher { display: none !important; }

  /* Collapsed bottom card */
  .nav-menu.expanded .nav-bottom-card {
    flex-direction: column;
    gap: 2px;
    padding: 4px 0;
    margin: 0;
    background: none;
  }
  .nav-menu.expanded .nav-user {
    gap: 0;
    padding: 4px 0;
    justify-content: center;
  }
  .nav-menu.expanded .nav-user-info { display: none; }
  .nav-menu.expanded .nav-settings-btn {
    width: 100%;
    height: 42px;
  }

  /* Less padding on main content */
  .main-content {
    padding: 20px 18px;
    scroll-padding-top: 58px;
  }

  /* ── Detail page: stack all cards in a single column ── */
  .detail-dashboard {
    grid-template-columns: 1fr;
  }
  .detail-top-row {
    grid-template-columns: 1fr;
  }
  .dash-span-2,
  .dash-span-3 {
    grid-column: span 1;
  }
  .dash-row-2 {
    grid-row: span 1;
  }
}

/* ── Mobile (< 768px) ─────────────────────────────────────────────── */
@media (max-width: 767px) {

  /* Hide the sidebar entirely */
  .nav-menu { display: none; }

  /* Main content fills width, with bottom padding for the tab bar */
  .main-content {
    padding: 16px 14px 80px;
    /* offset scroll targets so sticky top bar doesn't cover them */
    scroll-padding-top: 58px;
  }

  /* ── Detail page: stack all cards in a single column ── */
  .detail-dashboard {
    grid-template-columns: 1fr;
  }
  .detail-top-row {
    grid-template-columns: 1fr;
  }
  /* reset span / row helpers so everything flows naturally */
  .dash-span-2,
  .dash-span-3 {
    grid-column: span 1;
  }
  .dash-row-2 {
    grid-row: span 1;
  }

  /* Profile popup card repositioned for mobile */
  .nav-profile-card {
    bottom: 72px;
    left: 8px;
    right: 8px;
    width: auto;
  }

  /* ── Bottom tab bar ── */
  .bottom-nav {
    display: flex;
  }
}

/* Hide bottom nav on tablet/desktop */
@media (min-width: 768px) {
  .bottom-nav { display: none !important; }
}

/* ── Bottom nav styles (always defined, display toggled above) ──────── */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: #101318;
  border-top: 1px solid #1f2530;
  z-index: 100;
  align-items: stretch;
  justify-content: space-around;
  padding: 0 4px;
  gap: 0;
}

.bottom-nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 1;
  background: none;
  border: none;
  color: #5a6a7b;
  cursor: pointer;
  padding: 6px 4px;
  border-radius: 10px;
  transition: color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.bottom-nav-btn .material-symbols-outlined {
  font-size: 22px;
  line-height: 1;
}
.bottom-nav-btn .bn-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  line-height: 1;
}
.bottom-nav-btn:hover { color: #dce3ed; }
.bottom-nav-btn.active-btn {
  color: #d4f542;
}

/* Light mode — bottom nav */
body.light-mode .bottom-nav {
  background: #ffffff;
  border-top-color: #dde2ec;
}
body.light-mode .bottom-nav-btn { color: #8899aa; }
body.light-mode .bottom-nav-btn:hover { color: #1a2030; }
body.light-mode .bottom-nav-btn.active-btn { color: #5a7a00; }