/* ═══════════════════════════════════════
   NF Workouts — Desktop Layer
   Activates at ≥900px. Mobile untouched below.
   ═══════════════════════════════════════ */

/* Hide desktop-only elements on mobile by default */
.desktop-only { display: none; }

@media (min-width: 900px) {

  /* ── Shell: sidebar + content side by side ── */
  .app {
    max-width: 1180px;
    display: flex;
    gap: 0;
    padding: 0;
    align-items: stretch;
    min-height: 100vh;
  }

  .desktop-only { display: flex; }

  #desktop-sidebar {
    width: 240px;
    flex-shrink: 0;
    background: #20252b;
    border-right: 1px solid var(--border-soft);
    padding: 24px 14px;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
  }

  .ds-brand { display: flex; align-items: center; gap: 11px; padding: 0 8px 24px; }
  .ds-brand-mark { width: 40px; height: 40px; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .ds-brand-mark img { width: 100%; height: 100%; object-fit: cover; }
  .ds-brand-name { font-size: 15px; font-weight: 800; letter-spacing: 0.3px; color: var(--text); }

  .ds-nav { display: flex; flex-direction: column; gap: 3px; }
  .ds-nav-foot { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border-soft); }
  .ds-nav-item {
    display: flex; align-items: center; gap: 13px;
    padding: 11px 14px; border-radius: 10px;
    font-size: 14px; font-weight: 600; font-family: inherit;
    color: var(--text-mid); background: none; border: none;
    cursor: pointer; transition: all .15s ease; width: 100%; text-align: left;
  }
  .ds-nav-item svg { width: 19px; height: 19px; flex-shrink: 0; }
  .ds-nav-item:hover { background: var(--raised); color: var(--text); }
  .ds-nav-item.active { background: var(--mint-glow); color: var(--mint); }

  /* ── Content area ── */
  .app-content {
    flex: 1;
    min-width: 0;
    padding: 28px 34px 60px;
    overflow-y: auto;
  }

  /* Hide the mobile top button rows on desktop (sidebar replaces them) */
  #scr-home > .topbar,
  #scr-dashboard > .topbar .btn-ghost:last-child,
  #scr-friends > .topbar,
  #scr-challenges > .topbar,
  #scr-measurements > .topbar { display: none; }

  /* Re-show back buttons where they matter, but style as page titles */
  #scr-dashboard > .topbar,
  #scr-history > .topbar { display: flex; }

  /* ── Home: workout grid ── */
  #workout-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  #workout-list .info-empty { grid-column: 1 / -1; }

  /* Level bar full width */
  #level-bar { margin-bottom: 20px !important; }

  /* Home action buttons — inline, not stretched */
  #scr-home > div:last-child {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    margin-top: 20px !important;
  }
  #scr-home > div:last-child .btn { flex: 0 0 auto !important; min-width: 150px !important; }

  /* Search bar — constrain width */
  #scr-home .ac-wrap { max-width: 480px; }

  /* Page heading spacing */
  .app-content > div > .topbar { margin-bottom: 22px; }
  .topbar-title { font-size: 22px; font-weight: 800; }

  /* ── Dashboard: stat grid + charts ── */
  .dash-stats { grid-template-columns: repeat(4, 1fr) !important; }
  .dash-charts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  /* ── Session: three-pane ── */
  #scr-session.desktop-session {
    display: grid;
    grid-template-columns: 200px 260px 1fr;
    gap: 0;
    align-items: stretch;
  }

  /* ── Session: three-pane ── */
  .session-grid {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 20px;
    align-items: start;
  }
  .session-rail {
    position: sticky;
    top: 20px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    box-shadow: var(--shadow);
  }
  .rail-title { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: var(--text-dim); text-transform: uppercase; padding: 4px 10px 8px; }
  .rail-item { text-align: left; background: none; border: none; border-radius: 10px; padding: 10px 12px; cursor: pointer; transition: background .15s ease; width: 100%; font-family: inherit; }
  .rail-item:hover { background: var(--base); }
  .rail-item.done { opacity: 0.6; }
  .rail-item-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
  .rail-name { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rail-check { color: var(--mint); font-size: 13px; font-weight: 700; flex-shrink: 0; }
  .rail-sub { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
  .rail-bar { height: 4px; background: var(--base); border-radius: 3px; overflow: hidden; margin-top: 6px; }
  .rail-bar-fill { height: 100%; background: var(--mint); border-radius: 3px; transition: width .3s ease; }
  .rail-bar-fill.cardio { background: var(--blue); }

  /* Flash highlight when jumping to an exercise */
  .ex-flash { animation: exFlash 1.2s ease; }
  @keyframes exFlash {
    0%, 100% { box-shadow: var(--shadow); }
    30% { box-shadow: 0 0 0 2px var(--mint), var(--shadow-lift); }
  }

  /* ── Cards hover already handled in base; widen modals ── */
  .modal { max-width: 560px; border-radius: 20px; align-self: center; }
  .modal-overlay { align-items: center; }

  /* Friends/challenges lists in 2 columns */
  #friends-content, #challenges-content { max-width: 720px; }

  /* Measurements & history constrain width for readability */
  #meas-list, #history-list { max-width: 720px; }

  /* PB list and volume in 2 cols */
  .pb-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* Larger desktops — more room */
@media (min-width: 1200px) {
  .app { max-width: 1320px; }
  #workout-list { grid-template-columns: repeat(3, 1fr); }
}