/* ============================================
   COMMAND CENTER — Responsive breakpoints
   Loaded last so it wins the cascade.
   ============================================ */

@media (max-width: 1280px) {
  .queue-panel { width: 260px; }

  .metrics-strip { flex-wrap: wrap; }
  .metric-card { min-width: 80px; }
}

@media (max-width: 1024px) {
  .kanban-board {
    overflow-x: auto;
  }

  .kanban-column {
    min-width: 240px;
  }

  .detail-panel {
    width: 70%;
    min-width: 0;
    max-width: none;
  }

  .brief-sidebar { width: 220px; }
}

@media (max-width: 768px) {
  /* Queue becomes an overlay drawer (existing collapse logic still works) */
  .queue-panel {
    position: absolute;
    top: 48px;
    bottom: 0;
    left: 0;
    z-index: 50;
    width: 280px;
    box-shadow: var(--shadow-lg);
  }

  .queue-panel.collapsed {
    position: static;
    width: 44px;
    box-shadow: none;
  }

  .main-content { position: relative; }

  .detail-panel { width: 100%; }

  .topbar { padding: 0 var(--space-sm); }
  .topbar-left { gap: var(--space-md); }

  .topbar-nav {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .topbar-nav::-webkit-scrollbar { display: none; }

  .nav-tab { padding: 0 var(--space-sm); white-space: nowrap; }

  .metrics-strip { margin: var(--space-sm); }
  .kanban-board { padding: var(--space-sm); }

  .brief-sidebar { display: none; }

  .modal, .settings-modal { max-width: none; }
}

@media (max-width: 1024px) {
  .focus-view { grid-template-columns: 1fr 260px; }
}

@media (max-width: 768px) {
  .focus-view { grid-template-columns: 1fr; }
  .focus-rail { flex-direction: row; flex-wrap: wrap; }
  .focus-rail .focus-card { flex: 1 1 260px; }
}