/* ==========================================================================
   RESPONSIVE DESIGN — component-level overrides only.
   Layout-level mobile rules (main-content, sidebar, topbar, content-layout,
   page-header, page-header-actions) live in layout.css which owns the chrome
   tokens (--topbar-height, --chrome-pad-x-self, etc.).
   Navigation mobile rules (sidebar transform, mobile-header) live in navigation.css.
   Modal mobile rules live in modals.css. Form grid mobile rules live in forms.css.
   ========================================================================== */

/* ── Card grid breakpoints (responsive positive rules, not overrides) ─────── */

/* Tablet: 2-up */
@media (min-width: 769px) {
  .content-layout.cards > .card {
    flex: 0 0 calc(50% - var(--space-3));
  }
}

/* Desktop: 4-up */
@media (min-width: 1200px) {
  .content-layout.cards > .card {
    flex: 0 0 calc(25% - var(--space-3));
  }
}

/* ── Mobile (≤768px) — components ─────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Nav-tabs — scroll horizontally instead of wrapping or overflowing */
  .nav-tabs-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-tabs-container::-webkit-scrollbar { display: none; }
  .nav-tabs {
    flex-wrap: nowrap;
    min-width: max-content;
  }

  /* Search controls */
  .search-controls,
  .search-filters-bar {
    flex-direction: column;
  }
  .search-input {
    max-width: none;
  }
  .filters {
    flex-wrap: wrap;
  }

  /* Searchable dropdown — slide up from bottom on mobile */
  .searchable-dropdown-menu {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    max-height: 50vh;
  }

  /* Entity actions dropdown — flip toward start to avoid viewport clipping */
  .entity-dropdown {
    right: auto;
    left: 0;
    min-width: 140px;
  }
  /* Last two action columns stay right-anchored (they're already near the edge) */
  .entity-actions:nth-last-child(-n+2) .entity-dropdown {
    right: 0;
    left: auto;
  }

  /* Document grid — 2 columns on mobile */
  .document-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .document-card-preview {
    height: 100px;
  }
  .doc-actions {
    align-self: stretch;
  }

  /* Remove button — full-width tap target on mobile */
  .btn-remove {
    width: 100%;
    height: auto;
    padding: 0.75rem;
  }

  /* Table column hidden on small viewports — add class="col-hide-sm" to <th>/<td> */
  .col-hide-sm {
    display: none;
  }
}

/* ── Small Mobile (≤480px) ─────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .page-header-content h1 {
    font-size: 1.375rem;
  }

  .section-header {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
  }

  .section-title {
    font-size: 1rem;
    gap: var(--space-2);
  }

  .count-badge {
    font-size: 0.625rem;
    padding: var(--space-1) var(--space-1);
  }

  .loading-state {
    padding: var(--space-8) var(--space-4);
  }

  .empty-state {
    padding: var(--space-8) var(--space-6);
  }
}

/* ── Container overflow fixes (non-responsive, positional) ─────────────────── */
#listViewContainer {
  overflow: visible;
  position: relative;
}

#listViewContainer .table-container {
  overflow-x: auto;
  overflow-y: visible;
  padding-bottom: 10px;
}

#cardsViewContainer {
  position: relative;
  overflow: visible;
}

.page-content,
.main-content {
  overflow: visible;
  position: relative;
}

/* ── Dropdown body-scroll prevention ───────────────────────────────────────── */
.dropdown-open {
  overflow: hidden;
}

/* ── Modal + entity-dropdown z-index harmony ──────────────────────────────── */
.modal-open .entity-dropdown {
  z-index: 1060;
}