/* =========================================================
   90MIN DASHBOARD — mobile.css
   Mobile is the default. This file adds the bottom nav and
   then widens things up for tablet/desktop.
   ========================================================= */

/* ===== BOTTOM NAV (mobile default) ===== */
.bottom-nav{
  position:fixed;
  left:0; right:0; bottom:0;
  height:calc(var(--bottomnav-h) + var(--safe-bottom));
  padding-bottom:var(--safe-bottom);
  background:var(--bg-elevated);
  border-top:1px solid var(--border-soft);
  display:flex;
  z-index:50;
}
.bottom-nav-item{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  background:transparent;
  border:none;
  color:var(--text-faint);
  font-size:10.5px;
  font-weight:600;
  min-height:44px;
  cursor:pointer;
}
.bottom-nav-item.active{ color:var(--blue); }
.bottom-nav-item svg{ flex-shrink:0; }

.main{ padding-bottom:0; }
#columns-viewport{ padding-bottom:var(--bottomnav-h); }

/* Only one column-worth of width visible at a time on mobile;
   columns-track is translated via JS to swipe between them. */
.columns-track{ transition: transform 0.28s cubic-bezier(.22,.9,.35,1); }

.only-desktop-hide{ display:flex; }

@media (min-width: 768px){
  :root{ --sidebar-w: 220px; }
  .bottom-nav{ display:none; }
  #columns-viewport{ padding-bottom:0; }
  .fab{ bottom:24px; }
  .only-desktop-hide{ display:none; }
  .sidebar{ display:flex; }

  /* Desktop: multiple columns visible side by side, no swipe-track transform */
  .columns-track{ transition:none; transform:none !important; }
  .column{ width:340px; }
  .dashboard-header{ padding:20px 22px 10px; }
  .dot-indicator{ display:none; }
}

@media (min-width: 1200px){
  .column{ width:360px; }
}

/* Tablet portrait: keep single-column swipe but wider column */
@media (min-width: 600px) and (max-width: 767px){
  .column{ width:100%; max-width:520px; margin:0 auto; }
}