/* ============================================================
   layout.css — GymBI by Statvo
   PURPOSE: App shell layout — sidebar nav (desktop), bottom
   nav (mobile), topbar, main content area, and responsive grid.
   Mobile-first: sidebar hidden on mobile, bottom nav shown.
   ============================================================ */

/* ------------------------------------------------------------
   APP SHELL
   The outer wrapper that holds everything after login.
   Hidden until auth is confirmed.
   ------------------------------------------------------------ */
#app-shell {
  display: none; /* shown via JS after auth */
  min-height: 100vh;
  position: relative;
}
#app-shell.visible { display: flex; }

/* ------------------------------------------------------------
   SIDEBAR — Desktop Navigation
   Fixed left panel with nav links. Hidden on mobile.
   Width: 240px (--sidebar-w). Scrollable if nav overflows.
   ------------------------------------------------------------ */
#sidebar {
  width: var(--sidebar-w);
  height: 100vh;
  position: fixed;
  top: 0; left: 0;
  background: var(--glass-1);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border-right: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  z-index: var(--z-nav);
  overflow: hidden;
  transition: transform var(--transition-base);
}

/* Sidebar top — gym logo and name */
.sidebar-brand {
  padding: var(--sp-6) var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0;
}

.sidebar-logo {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--bg-3);
  flex-shrink: 0;
}

.sidebar-gym-name {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-powered {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* Navigation links list */
.sidebar-nav {
  flex: 1;
  padding: var(--sp-4) var(--sp-3);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

/* Each nav item */
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--text-base);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  position: relative;
}

.nav-item:hover {
  background: var(--glass-2);
  color: var(--text-primary);
}

/* Active nav item — accent color indicator */
.nav-item.active {
  background: var(--accent-dim);
  color: var(--accent);
}

/* Vertical accent bar on left of active item */
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 3px;
  background: var(--accent);
  border-radius: 2px;
}

.nav-icon {
  width: 18px; height: 18px;
  flex-shrink: 0;
  opacity: 0.7;
}
.nav-item.active .nav-icon { opacity: 1; }
.nav-item:hover .nav-icon { opacity: 1; }

/* Nav section label (e.g. "MANAGEMENT", "ACCOUNT") */
.nav-section-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--sp-4) var(--sp-4) var(--sp-2);
  margin-top: var(--sp-2);
}

/* Sidebar bottom — user avatar, plan badge, sign out */
.sidebar-footer {
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--glass-border);
  flex-shrink: 0;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.sidebar-user:hover { background: var(--glass-2); }

.sidebar-user-info {
  flex: 1;
  overflow: hidden;
}
.sidebar-user-name {
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-user-role {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* Plan badge in sidebar (FREE / PRO) */
.plan-badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
}
.plan-badge-free {
  background: var(--glass-2);
  color: var(--text-muted);
  border: 1px solid var(--glass-border);
}
.plan-badge-pro {
  background: linear-gradient(135deg, var(--accent), #00a87a);
  color: #000;
}

/* ------------------------------------------------------------
   TOPBAR
   Fixed top bar — page title, actions, theme toggle.
   Only shown on desktop; hidden on mobile (bottom nav handles nav).
   ------------------------------------------------------------ */
#topbar {
  height: var(--topbar-h);
  position: fixed;
  top: 0;
  left: var(--sidebar-w);
  right: 0;
  background: var(--glass-1);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border-bottom: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-6);
  z-index: var(--z-nav);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

/* Page title shown in topbar */
.topbar-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
}

/* Breadcrumb separator */
.topbar-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* Theme toggle button */
#theme-toggle {
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  background: var(--glass-2);
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
  font-size: 16px;
}
#theme-toggle:hover {
  background: var(--glass-3);
  color: var(--text-primary);
}

/* Notification bell in topbar */
.topbar-notif {
  position: relative;
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  background: var(--glass-2);
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}
.topbar-notif:hover { background: var(--glass-3); color: var(--text-primary); }

/* Notification dot */
.notif-dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 7px; height: 7px;
  background: var(--danger);
  border-radius: 50%;
  border: 1px solid var(--bg-0);
}

/* ------------------------------------------------------------
   MAIN CONTENT AREA
   Offset from sidebar (left) and topbar (top).
   All module panels render inside here.
   ------------------------------------------------------------ */
#main-content {
  margin-left: var(--sidebar-w);
  margin-top: var(--topbar-h);
  min-height: calc(100vh - var(--topbar-h));
  padding: var(--sp-6);
  flex: 1;
}

/* Each section/panel inside main content */
.content-panel {
  max-width: 1280px;
  margin: 0 auto;
  animation: fade-in 0.2s ease;
}

/* Page header row (title + action button) */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.page-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-primary);
}

.page-subtitle {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--sp-1);
}

/* ------------------------------------------------------------
   RESPONSIVE GRID
   Auto-adapting column grid for KPI cards and list panels.
   ------------------------------------------------------------ */

/* 4 columns on large screens, adapts down */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}

/* Auto-fit grid — fills available space */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-4);
}

/* 2-column layout: sidebar + content (used inside pages) */
.layout-split {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--sp-6);
  align-items: start;
}

/* ------------------------------------------------------------
   BOTTOM NAVIGATION — Mobile Only
   Fixed at bottom. Shows 5 key nav items as icon+label.
   Replaces sidebar on small screens.
   ------------------------------------------------------------ */
#bottom-nav {
  display: none; /* shown only on mobile via media query */
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--bottomnav-h);
  background: var(--glass-2);
  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);
  border-top: 1px solid var(--glass-border);
  z-index: var(--z-nav);
  padding: 0 var(--sp-2);
  padding-bottom: env(safe-area-inset-bottom, 0); /* iPhone notch support */
}

.bottom-nav-inner {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-around;
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: var(--sp-2) var(--sp-3);
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--transition-fast);
  flex: 1;
  min-width: 0;
}
.bottom-nav-item.active { color: var(--accent); }
.bottom-nav-item:hover { color: var(--text-secondary); }

.bottom-nav-icon {
  font-size: 20px;
  line-height: 1;
}
.bottom-nav-label {
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Active indicator dot above active item */
.bottom-nav-item.active .bottom-nav-icon::after {
  content: '';
  display: block;
  width: 4px; height: 4px;
  background: var(--accent);
  border-radius: 50%;
  margin: 2px auto 0;
}

/* Mobile top nav bar (replaces sidebar brand on mobile) */
#mobile-topbar {
  display: none;
  height: var(--topbar-h);
  position: fixed;
  top: 0; left: 0; right: 0;
  background: var(--glass-1);
  backdrop-filter: var(--blur-md);
  border-bottom: 1px solid var(--glass-border);
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-4);
  z-index: var(--z-nav);
}

.mobile-topbar-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.mobile-topbar-title {
  font-size: var(--text-md);
  font-weight: 700;
}

/* ------------------------------------------------------------
   RESPONSIVE BREAKPOINTS
   640px = mobile/tablet boundary
   1024px = tablet/desktop boundary
   ------------------------------------------------------------ */

/* Tablet adjustments */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .layout-split { grid-template-columns: 1fr; }
}

/* Mobile — hide sidebar, show bottom nav */
@media (max-width: 640px) {
  /* Hide desktop elements */
  #sidebar { display: none; }
  #topbar { display: none; }

  /* Show mobile elements */
  #bottom-nav { display: flex; }
  #mobile-topbar { display: flex; }

  /* Adjust main content for mobile */
  #main-content {
    margin-left: 0;
    margin-top: var(--topbar-h);
    padding: var(--sp-4);
    padding-bottom: calc(var(--bottomnav-h) + var(--sp-4));
  }

  /* Stack grids on mobile */
  .grid-4, .grid-3, .grid-2 {
    grid-template-columns: 1fr;
  }

  .grid-auto {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }

  .page-header { flex-direction: column; align-items: flex-start; }
  .page-title { font-size: var(--text-xl); }
}

/* ------------------------------------------------------------
   FAB — Floating Action Button
   Mobile "+" button for quick add actions.
   ------------------------------------------------------------ */
.fab {
  position: fixed;
  bottom: calc(var(--bottomnav-h) + var(--sp-4));
  right: var(--sp-5);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
  display: none; /* shown only on mobile via JS */
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 300;
  box-shadow: var(--shadow-accent);
  cursor: pointer;
  z-index: calc(var(--z-nav) - 1);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.fab:hover { transform: scale(1.08); }
.fab:active { transform: scale(0.96); }

@media (max-width: 640px) {
  .fab { display: flex; }
}