/* ============ MINE TEKSTER — Card Grid Redesign ============ */

/* Prevent double scrollbar from layout.css overflow-x:hidden on .main-content */
.app-layout > .main-content {
  overflow-x: clip;
}

/* ── Page Header ── */
.docs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: var(--space-8);
}

.docs-header h1 {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--color-text-primary);
}

.docs-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── Responsive ── */
@media (max-width: 767px) {
  .docs-header {
    flex-direction: column;
    align-items: stretch;
  }

  .docs-controls {
    flex-direction: column;
    gap: 8px;
  }

  /* Wrap controls into rows: search full-width, then toggle+sort side by side */
  .docs-controls {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }

  .docs-stats {
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
  }
}

/* ── 7.3 Safe Area Inset for iPhone ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mobile-nav {
    padding-bottom: env(safe-area-inset-bottom);
  }
}