/* ─────────────────────────────────────────────────────────────────────────────
   LAYOUT.CSS — Responsive Grid Layout (Mobile, Tablet, Desktop)
   
   Breakpoints:
   - Mobile: 320–767 px (single column, full-width)
   - Tablet: 768–1199 px (two-column layout)
   - Desktop: 1200–2560 px (centered container max-width 1200px, sidebar nav)
   ───────────────────────────────────────────────────────────────────────────── */

/* ─── Mobile Layout (320–767 px) ────────────────────────────────────────────── */

main#app {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-md);
  max-width: 100%;
}

#status-message {
  order: 1;
}

#search-bar {
  order: 2;
}

#category-tabs {
  order: 3;
}

#file-list {
  order: 4;
}

#media-player-container {
  order: 5;
}

/* Category tabs: full-width, stacked buttons */
#category-tabs {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

#category-tabs [role="tab"] {
  width: 100%;
  text-align: left;
}

/* Media player: full-width */
#media-player-container {
  width: 100%;
}

/* ─── Tablet Layout (768–1199 px) ──────────────────────────────────────────── */

@media (min-width: 768px) {
  main#app {
    padding: var(--space-lg);
    gap: var(--space-xl);
  }

  /* Two-column layout: sidebar nav + content */
  main#app {
    display: grid;
    grid-template-columns: 180px 1fr;
    grid-template-rows: auto auto auto auto;
  }

  #status-message {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  #search-bar {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  /* Category tabs: vertical sidebar */
  #category-tabs {
    grid-column: 1;
    grid-row: 3;
    flex-direction: column;
    gap: var(--space-md);
    align-self: start;
  }

  #category-tabs [role="tab"] {
    width: 100%;
    text-align: left;
  }

  /* File list: main content area */
  #file-list {
    grid-column: 2;
    grid-row: 3;
  }

  /* Media player: full-width */
  #media-player-container {
    grid-column: 1 / -1;
    grid-row: 4;
  }
}

/* ─── Desktop Layout (1200+ px) ────────────────────────────────────────────── */

@media (min-width: 1200px) {
  main#app {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: var(--space-2xl) var(--space-lg);
  }

  #status-message {
    grid-column: 1 / -1;
  }

  #search-bar {
    grid-column: 1 / -1;
  }

  /* Category tabs: vertical sidebar with fixed width */
  #category-tabs {
    grid-column: 1;
    width: 200px;
    align-self: start;
    position: sticky;
    top: var(--space-lg);
  }

  /* File list: main content */
  #file-list {
    grid-column: 2;
  }

  /* Media player: spans full width */
  #media-player-container {
    grid-column: 1 / -1;
  }
}

/* ─── Large Desktop (1600+ px) ─────────────────────────────────────────────── */

@media (min-width: 1600px) {
  main#app {
    max-width: 1400px;
  }

  #category-tabs {
    width: 220px;
  }
}

/* ─── Print Styles ──────────────────────────────────────────────────────────── */

@media print {
  header[role="banner"],
  #search-bar,
  #media-player-container {
    display: none;
  }

  #category-tabs {
    display: none;
  }

  main#app {
    grid-template-columns: 1fr;
  }

  #file-list {
    grid-column: 1;
  }
}