/* Queuehand — desktop-first layout (v2.12.0)
 *
 * Mobile keeps the iOS-style bottom tab bar and stacked cards (styles.css).
 * At >=1024px this file transforms the same DOM into a desktop app:
 *   - left sidebar navigation (icon + label rows)
 *   - wider content column with multi-column grids where it helps
 *   - dense table-like queue rows with compact inline actions
 *   - smaller pointer-sized controls with hover states
 * No HTML/JS changes needed — pure CSS, same functionality both ways.
 */

@media (min-width: 1024px) {

  /* ---------- App shell: sidebar + content ---------- */

  /* Left sidebar nav (was the iOS bottom tab bar) */
  .tab-bar {
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: 224px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 20px 12px calc(20px + var(--safe-bottom));
    border-top: none;
    border-right: 0.5px solid var(--separator);
    gap: 2px;
    overflow-y: auto;
  }

  /* Brand header at the top of the sidebar */
  .tab-bar::before {
    content: "Queuehand";
    display: block;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.3px;
    padding: 4px 12px 18px;
    color: var(--text-primary);
  }

  .tab-btn {
    flex: none;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 15px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    text-align: left;
  }

  .tab-btn:hover {
    background: var(--bg-secondary);
  }

  .tab-btn.active {
    /* Fallback for older Safari (< 16.2) without color-mix() */
    background: var(--bg-secondary);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    font-weight: 600;
  }

  .tab-icon {
    font-size: 18px;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
  }

  /* Content shifts right of the sidebar */
  #main-view {
    margin-left: 224px;
    padding-bottom: 0;
  }

  /* Settings tab lives outside #main-view — give it the same offset */
  #tab-settings {
    margin-left: 224px;
  }

  /* ---------- Content width & density ---------- */

  .tab-content {
    max-width: 1180px;
    margin: 0 auto;
    padding: 24px 32px 48px;
  }

  /* Slimmer header on desktop */
  .app-header {
    padding: 14px 32px 12px;
  }

  .app-header h1 {
    font-size: 22px;
  }

  /* Pointer-sized controls with hover feedback */
  .btn-primary,
  .btn-secondary,
  .btn-danger {
    min-height: 36px;
    padding: 8px 18px;
    font-size: 15px;
  }

  .btn-primary:hover { filter: brightness(1.08); }
  .btn-secondary:hover { background: var(--separator); }
  .btn-danger:hover { filter: brightness(1.08); }
  .btn-icon:hover { color: var(--text-primary); }

  /* ---------- Queue: dense table-like rows ---------- */

  .queue-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 20px;
    align-items: center;
    padding: 12px 18px;
  }

  .queue-item:hover {
    background: var(--bg-hover);
  }

  .queue-item-header {
    min-width: 0;
  }

  .queue-item-name {
    font-size: 15px;
  }

  .queue-item-meta {
    font-size: 13px;
    gap: 12px;
  }

  .queue-item .progress-bar {
    margin-top: 6px;
    max-width: 420px;
  }

  .queue-item-actions {
    flex-direction: row;
    flex-shrink: 0;
    gap: 8px;
  }

  .queue-item-actions button {
    flex: none;
    width: auto;
    min-height: 34px;
    padding: 7px 14px;
    font-size: 14px;
  }

  /* Toolbar: proper desktop row, search grows */
  .toolbar {
    flex-wrap: nowrap;
    align-items: center;
  }

  .toolbar input[type="search"] {
    max-width: 340px;
  }

  /* v2.12.0: push actions to the right edge so the toolbar doesn't
     look disconnected on wide screens. */
  .toolbar-actions {
    margin-left: auto;
  }

  /* v2.13.0: premium minimalist — generous card whitespace on desktop */
  .viz-card,
  .storage-timeline,
  .pipeline-diagram,
  .compare-card,
  .planner-math,
  .upgrade-card {
    padding: 24px;
  }

  /* v2.15.1: cap bar-chart width so bars don't stretch into long pills
     on wide screens. */
  .viz-card .chart:not(.donut) {
    max-width: 720px;
  }

  /* v2.13.0: quiet chrome — sidebar recedes, content stands out */
  .tab-bar {
    background: var(--bg-primary);
  }

  .tab-btn {
    color: var(--text-secondary);
  }

  .tab-btn .tab-icon {
    opacity: 0.75;
  }

  .tab-btn.active .tab-icon {
    opacity: 1;
  }

  /* v2.13.0: quieter desktop header */
  .app-header {
    border-bottom: 1px solid var(--separator);
    padding-left: 32px;
    padding-right: 32px;
  }

  .app-header h1 {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.3px;
  }

  .toolbar .btn-secondary {
    width: auto;
  }

  /* Filter bar: no horizontal scroll on desktop */
  .filter-bar {
    overflow-x: visible;
    padding: 8px 0;
  }

  .filter-bar select {
    flex: none;
    width: auto;
    min-width: 130px;
  }

  /* ---------- Upgrades tab ---------- */

  /* Smart planner modes side-by-side */
  .planner-modes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  .planner-mode {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-height: 0;
  }

  /* Upgrade overview + batch controls breathe */
  .batch-controls .btn-primary {
    flex: none;
    width: auto;
  }

  .predictor-toolbar .btn-primary {
    flex: none;
    width: auto;
    min-width: 200px;
  }

  .predictor-toolbar .btn-secondary {
    width: auto;
  }

  /* ---------- Dashboard: card grid ---------- */

  #dashboard-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 16px;
    align-items: start;
  }

  #dashboard-content .card {
    margin-bottom: 0;
  }

  /* ---------- Stats: already 4-col, tighten ---------- */

  .stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* ---------- Settings: two-column cards ---------- */

  #tab-settings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
    max-width: 1180px;
    /* margin-left: 224px comes from the shell rule above; don't duplicate */
    padding: 24px 32px 48px;
  }

  #tab-settings .card {
    margin-bottom: 0;
  }

  /* ---------- Review tab ---------- */

  .review-actions {
    flex-wrap: nowrap;
  }

  .review-actions .btn-secondary,
  .review-actions .btn-danger {
    width: auto;
  }

  /* ---------- Modals: centered desktop dialogs ---------- */

  .modal {
    align-items: center;
  }

  .modal-card {
    border-radius: var(--radius-lg);
    max-width: 560px;
  }

  .match-modal-card {
    max-width: 640px;
  }

  /* ---------- Misc desktop polish ---------- */

  /* How-to guides: full width is fine, cap line length for readability */
  .howto-body {
    max-width: 78ch;
  }

  /* (simulator-input-row button fix lives in base styles.css, v2.15.1) */

  /* Log/debug panels get more room */
  .log-entries,
  .debug-entries,
  .history-list {
    max-height: 520px;
  }

  /* Login/setup cards: fine centered, keep the mobile sizing */
}

/* v2.18.0: version footer at the bottom of the desktop sidebar. */
@media (min-width: 1024px) {
  .app-version { display: block; }
}