/* ============================================================
   grid.css — Responsive grid layouts and container queries
   Tokens: var(--rh-*) from tokens.css
   ============================================================ */

/* ── Container-type setup for card-like grids ─────────── */
.card-grid-container,
.chat-conversations-list,
.ticket-list,
.board-columns {
  container-type: inline-size;
}

/* ── Container query: narrow grids → 1 column ────────── */
@container (max-width: 600px) {
  .card-grid-container > *,
  .chat-conversations-list > *,
  .ticket-list > *,
  .board-columns > * {
    grid-column: 1 / -1;
  }
}

/* ── Dashboard Stats Grid ─────────────────────────────── */
.dashboard-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

@media (max-width: 767px) {
  .dashboard-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .dashboard-stats-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Portfolio Filter Bar: mobile → column stack ─────── */
@media (max-width: 767px) {
  .portfolio-filter-bar {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .portfolio-filter-bar > * {
    width: 100%;
  }
}

/* ── Costs Filter Row: mobile → column stack ─────────── */
@media (max-width: 767px) {
  .costs-filter-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .costs-filter-row > * {
    width: 100%;
  }
}

/* ── Review Container: mobile height auto, column ────── */
@media (max-width: 767px) {
  .review-container {
    height: auto;
    flex-direction: column;
  }
}

/* ── Comment Panel: mobile full width, no left border ── */
@media (max-width: 767px) {
  .comment-panel {
    width: 100%;
    border-left: none;
  }
}

/* ── Dependency Graph Container: scrollable on mobile ─── */
@media (max-width: 767px) {
  .dep-graph-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}