/* FWLS — Layout Standard Utility Classes
   Defines the three standard layout classes for all member-facing content pages.
   See docs/LAYOUT-STANDARD.md for usage guidance.
*/

/* Standard page content area — scrollable, centered, padded */
.page-content {
  flex: 1 1 0%;
  overflow-y: auto;
  padding: 1.25rem;          /* px-5 py-5 */
  max-width: 48rem;          /* ~768px readable width */
  margin: 0 auto;
  width: 100%;
}

/* Standard section card — rounded container */
.page-card {
  background: rgba(255,255,255,0.04);   /* bg-white/[0.04] */
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0.75rem;              /* rounded-xl */
  padding: 1rem;                        /* p-4 */
}

/* Standard page header — sticky top bar */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.25rem;            /* py-3.5 px-5 */
  flex-shrink: 0;
}

/* ── Sub-navigation tabs (page-level navigation within a section) ─────────── */
.sub-tab {
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  color: #6b7280;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
  background: transparent;
  border-left: none;
  border-right: none;
  border-top: none;
}
.sub-tab:hover { color: #d1d5db; }
.sub-tab--active { color: #818cf8; border-bottom-color: #818cf8; }

/* ── Filter tabs (compact content filter buttons) ────────────────────────── */
.filter-tab {
  font-size: 12px;
  padding: 8px 14px;
  color: #6b7280;
  border-bottom: 2px solid transparent;
  background: transparent;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
  cursor: pointer;
  border-left: none;
  border-right: none;
  border-top: none;
}
.filter-tab:hover { color: #d1d5db; }
.filter-tab--active { color: #818cf8; border-bottom-color: #818cf8; }

/* ── Canonical loading and error state placeholders ─────────────────────── */
.loading-state {
  text-align: center;
  padding: 2rem 1rem;
  font-size: 12px;
  color: #6b7280;
  font-style: italic;
}
.error-state {
  text-align: center;
  padding: 2rem 1rem;
  font-size: 12px;
  color: var(--status-alert-text);
}