/* ══════════════════════════════════════════════
   Phi Translator — Responsive / Mobile Styles
   Breakpoints: 768px (tablet), 480px (phone)
   ══════════════════════════════════════════════ */

/* ──────────────────────────────────────────────
   TABLET  (≤ 768px)
   ────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── main.html: App shell ── */
  .app {
    padding: 8px 8px 0;
  }

  /* ── main.html: Tabs — fill container evenly, remove trapezoid clip-path ──
     flex:1 on each tab makes all tabs equal-width and fills the full container
     so no tab is clipped or hidden on narrow screens.
     version-badge is hidden because margin-left:auto would steal all flex free
     space and collapse the tabs. The badge is non-critical on mobile. */
  .tabs {
    padding: 0 4px;
  }

  .version-badge {
    display: none;
  }

  .tab {
    clip-path: none !important;
    border-radius: 6px 6px 0 0;
    flex: 1;
    min-width: 0;
    padding: 8px 6px;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
  }
  /* Remove the negative margin cascade that creates the trapezoid overlap */
  .tab:nth-child(2),
  .tab:nth-child(3),
  .tab:nth-child(4),
  .tab:nth-child(5),
  .tab:nth-child(6) {
    margin-left: 2px !important;
  }

  /* ── main.html: Hide sidebars entirely on mobile ──
     The sidebar toggle button is position:absolute inside the sidebar,
     so when the sidebar is hidden the button also disappears.
     This is acceptable: on mobile the kanban content fills full width. */
  .sidebar,
  .archive-folders,
  .rules-sidebar {
    display: none !important;
  }

  /* ── human_queue.html: banner wraps instead of overflowing ── */
  .banner {
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
  }
  .banner .est {
    margin-left: 0;
    text-align: left;
  }

  /* ── human_queue.html: q-body label column slightly narrower ── */
  .q-body {
    grid-template-columns: 48px 1fr;
  }

  /* ── human_queue.html: action buttons wrap ── */
  .q-actions {
    flex-wrap: wrap;
  }

  /* ── human_queue.html: section padding ── */
  .section {
    padding: 14px 16px 8px;
  }
}

/* ──────────────────────────────────────────────
   PHONE  (≤ 480px)
   ────────────────────────────────────────────── */
@media (max-width: 480px) {

  /* ── main.html: App shell ── */
  .app {
    padding: 4px 4px 0;
  }

  /* ── main.html: Tabs — even more compact on phone ── */
  .tab {
    padding: 7px 4px;
    font-size: 11px;
  }

  /* ── main.html: Kanban columns stack vertically ──
     The inline grid-template-columns set by JS is overridden with !important. */
  .kanban {
    grid-template-columns: 1fr !important;
    overflow-x: hidden;
    padding: 10px 0 10px 10px;
  }
  .k-col:last-child {
    margin-right: 10px;
  }
  /* Hide empty Kanban columns to save vertical space */
  .k-col.empty {
    display: none !important;
  }

  /* ── human_queue.html: banner as 2×2 grid ── */
  .banner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .banner .est {
    grid-column: span 2;
    text-align: left;
  }

  /* ── human_queue.html: q-body stacked (label above, content below) ── */
  .q-body {
    grid-template-columns: 1fr;
    gap: 2px 0;
  }
  .q-body .label {
    margin-top: 8px;
    font-size: 9px;
  }

  /* ── human_queue.html: action buttons spread evenly ── */
  .q-actions {
    gap: 4px;
  }
  .q-actions button {
    flex: 1;
    min-width: 0;
  }

  /* ── human_queue.html: header title truncation ── */
  .header h1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100vw - 140px);
  }
}