/* ============================================================
   SettlementRadar — Utility Classes (Task #1308675)
   Spacing, layout, display, and responsive helpers.

   Uses design tokens exclusively. No magic numbers.
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   DISPLAY
   ═══════════════════════════════════════════════════════════ */

.sr-hidden { display: none !important; }
.sr-block { display: block; }
.sr-inline { display: inline; }
.sr-inline-block { display: inline-block; }
.sr-flex { display: flex; }
.sr-inline-flex { display: inline-flex; }
.sr-grid { display: grid; }

/* ═══════════════════════════════════════════════════════════
   FLEXBOX
   ═══════════════════════════════════════════════════════════ */

.sr-flex-row { flex-direction: row; }
.sr-flex-col { flex-direction: column; }
.sr-flex-wrap { flex-wrap: wrap; }
.sr-flex-nowrap { flex-wrap: nowrap; }
.sr-flex-1 { flex: 1 1 0%; }
.sr-flex-auto { flex: 1 1 auto; }
.sr-flex-none { flex: none; }
.sr-flex-shrink-0 { flex-shrink: 0; }
.sr-flex-grow { flex-grow: 1; }

/* Alignment */
.sr-items-start { align-items: flex-start; }
.sr-items-center { align-items: center; }
.sr-items-end { align-items: flex-end; }
.sr-items-stretch { align-items: stretch; }
.sr-items-baseline { align-items: baseline; }

.sr-justify-start { justify-content: flex-start; }
.sr-justify-center { justify-content: center; }
.sr-justify-end { justify-content: flex-end; }
.sr-justify-between { justify-content: space-between; }
.sr-justify-around { justify-content: space-around; }
.sr-justify-evenly { justify-content: space-evenly; }

.sr-self-start { align-self: flex-start; }
.sr-self-center { align-self: center; }
.sr-self-end { align-self: flex-end; }

/* Common flex patterns */
.sr-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sr-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sr-flex-stack {
  display: flex;
  flex-direction: column;
}

/* ═══════════════════════════════════════════════════════════
   GRID
   ═══════════════════════════════════════════════════════════ */

.sr-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); }
.sr-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.sr-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); }

/* Auto-fit responsive grid */
.sr-grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.sr-grid-auto-sm {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* ═══════════════════════════════════════════════════════════
   GAP
   ═══════════════════════════════════════════════════════════ */

.sr-gap-1 { gap: var(--space-1); }
.sr-gap-2 { gap: var(--space-2); }
.sr-gap-3 { gap: var(--space-3); }
.sr-gap-4 { gap: var(--space-4); }
.sr-gap-5 { gap: var(--space-5); }
.sr-gap-6 { gap: var(--space-6); }
.sr-gap-8 { gap: var(--space-8); }
.sr-gap-10 { gap: var(--space-10); }
.sr-gap-12 { gap: var(--space-12); }

/* ═══════════════════════════════════════════════════════════
   SPACING — MARGIN
   ═══════════════════════════════════════════════════════════ */

.sr-m-0 { margin: 0; }
.sr-m-auto { margin: auto; }

/* Margin Top */
.sr-mt-0 { margin-top: 0; }
.sr-mt-1 { margin-top: var(--space-1); }
.sr-mt-2 { margin-top: var(--space-2); }
.sr-mt-3 { margin-top: var(--space-3); }
.sr-mt-4 { margin-top: var(--space-4); }
.sr-mt-5 { margin-top: var(--space-5); }
.sr-mt-6 { margin-top: var(--space-6); }
.sr-mt-8 { margin-top: var(--space-8); }
.sr-mt-10 { margin-top: var(--space-10); }
.sr-mt-12 { margin-top: var(--space-12); }
.sr-mt-16 { margin-top: var(--space-16); }

/* Margin Bottom */
.sr-mb-0 { margin-bottom: 0; }
.sr-mb-1 { margin-bottom: var(--space-1); }
.sr-mb-2 { margin-bottom: var(--space-2); }
.sr-mb-3 { margin-bottom: var(--space-3); }
.sr-mb-4 { margin-bottom: var(--space-4); }
.sr-mb-5 { margin-bottom: var(--space-5); }
.sr-mb-6 { margin-bottom: var(--space-6); }
.sr-mb-8 { margin-bottom: var(--space-8); }
.sr-mb-10 { margin-bottom: var(--space-10); }
.sr-mb-12 { margin-bottom: var(--space-12); }
.sr-mb-16 { margin-bottom: var(--space-16); }

/* Margin Inline (left/right) */
.sr-mx-auto { margin-inline: auto; }
.sr-mx-4 { margin-inline: var(--space-4); }
.sr-mx-6 { margin-inline: var(--space-6); }

/* Margin Block (top/bottom) */
.sr-my-4 { margin-block: var(--space-4); }
.sr-my-6 { margin-block: var(--space-6); }
.sr-my-8 { margin-block: var(--space-8); }
.sr-my-12 { margin-block: var(--space-12); }

/* ═══════════════════════════════════════════════════════════
   SPACING — PADDING
   ═══════════════════════════════════════════════════════════ */

.sr-p-0 { padding: 0; }
.sr-p-2 { padding: var(--space-2); }
.sr-p-3 { padding: var(--space-3); }
.sr-p-4 { padding: var(--space-4); }
.sr-p-5 { padding: var(--space-5); }
.sr-p-6 { padding: var(--space-6); }
.sr-p-8 { padding: var(--space-8); }
.sr-p-10 { padding: var(--space-10); }

/* Padding X */
.sr-px-4 { padding-inline: var(--space-4); }
.sr-px-6 { padding-inline: var(--space-6); }
.sr-px-8 { padding-inline: var(--space-8); }

/* Padding Y */
.sr-py-4 { padding-block: var(--space-4); }
.sr-py-6 { padding-block: var(--space-6); }
.sr-py-8 { padding-block: var(--space-8); }
.sr-py-12 { padding-block: var(--space-12); }
.sr-py-16 { padding-block: var(--space-16); }
.sr-py-20 { padding-block: var(--space-20); }
.sr-py-24 { padding-block: var(--space-24); }

/* ═══════════════════════════════════════════════════════════
   TEXT ALIGNMENT
   ═══════════════════════════════════════════════════════════ */

.sr-text-left { text-align: left; }
.sr-text-center { text-align: center; }
.sr-text-right { text-align: right; }

/* ═══════════════════════════════════════════════════════════
   TEXT SIZE
   ═══════════════════════════════════════════════════════════ */

.sr-text-xs { font-size: var(--text-xs); }
.sr-text-sm { font-size: var(--text-sm); }
.sr-text-base { font-size: var(--text-base); }
.sr-text-lg { font-size: var(--text-lg); }
.sr-text-xl { font-size: var(--text-xl); }
.sr-text-2xl { font-size: var(--text-2xl); }
.sr-text-3xl { font-size: var(--text-3xl); }
.sr-text-4xl { font-size: var(--text-4xl); }
.sr-text-5xl { font-size: var(--text-5xl); }
.sr-text-6xl { font-size: var(--text-6xl); }
.sr-text-hero { font-size: var(--text-hero); }

/* ═══════════════════════════════════════════════════════════
   FONT WEIGHT
   ═══════════════════════════════════════════════════════════ */

.sr-font-light { font-weight: var(--weight-light); }
.sr-font-normal { font-weight: var(--weight-normal); }
.sr-font-medium { font-weight: var(--weight-medium); }
.sr-font-semibold { font-weight: var(--weight-semibold); }
.sr-font-bold { font-weight: var(--weight-bold); }
.sr-font-extrabold { font-weight: var(--weight-extrabold); }

/* ═══════════════════════════════════════════════════════════
   TEXT COLOR
   ═══════════════════════════════════════════════════════════ */

.sr-text-primary-color { color: var(--color-text-primary); }
.sr-text-secondary-color { color: var(--color-text-secondary); }
.sr-text-muted-color { color: var(--color-text-muted); }
.sr-text-inverse-color { color: var(--color-text-inverse); }
.sr-text-brand { color: var(--color-primary); }
.sr-text-gold { color: var(--color-gold); }
.sr-text-success { color: var(--color-success); }
.sr-text-error { color: var(--color-error); }
.sr-text-warning { color: var(--color-warning); }

/* ═══════════════════════════════════════════════════════════
   BACKGROUND COLOR
   ═══════════════════════════════════════════════════════════ */

.sr-bg-white { background-color: var(--color-bg); }
.sr-bg-subtle { background-color: var(--color-bg-subtle); }
.sr-bg-muted { background-color: var(--color-bg-muted); }
.sr-bg-primary { background-color: var(--color-primary); }
.sr-bg-primary-light { background-color: var(--color-primary-light); }
.sr-bg-gold-light { background-color: var(--color-gold-light); }
.sr-bg-success-light { background-color: var(--color-success-light); }
.sr-bg-error-light { background-color: var(--color-error-light); }
.sr-bg-warning-light { background-color: var(--color-warning-light); }

/* ═══════════════════════════════════════════════════════════
   BORDER
   ═══════════════════════════════════════════════════════════ */

.sr-border { border: 1px solid var(--color-border); }
.sr-border-t { border-top: 1px solid var(--color-border); }
.sr-border-b { border-bottom: 1px solid var(--color-border); }
.sr-border-strong { border-color: var(--color-border-strong); }
.sr-border-none { border: none; }

/* ═══════════════════════════════════════════════════════════
   BORDER RADIUS
   ═══════════════════════════════════════════════════════════ */

.sr-rounded-none { border-radius: 0; }
.sr-rounded-sm { border-radius: var(--radius-sm); }
.sr-rounded-md { border-radius: var(--radius-md); }
.sr-rounded-lg { border-radius: var(--radius-lg); }
.sr-rounded-xl { border-radius: var(--radius-xl); }
.sr-rounded-2xl { border-radius: var(--radius-2xl); }
.sr-rounded-full { border-radius: var(--radius-full); }

/* ═══════════════════════════════════════════════════════════
   SHADOW
   ═══════════════════════════════════════════════════════════ */

.sr-shadow-none { box-shadow: none; }
.sr-shadow-xs { box-shadow: var(--shadow-xs); }
.sr-shadow-sm { box-shadow: var(--shadow-sm); }
.sr-shadow-md { box-shadow: var(--shadow-md); }
.sr-shadow-lg { box-shadow: var(--shadow-lg); }
.sr-shadow-xl { box-shadow: var(--shadow-xl); }
.sr-shadow-2xl { box-shadow: var(--shadow-2xl); }

/* ═══════════════════════════════════════════════════════════
   WIDTH & HEIGHT
   ═══════════════════════════════════════════════════════════ */

.sr-w-full { width: 100%; }
.sr-w-auto { width: auto; }
.sr-h-full { height: 100%; }
.sr-h-screen { height: 100vh; }
.sr-min-h-screen { min-height: 100vh; }
.sr-max-w-full { max-width: 100%; }

/* ═══════════════════════════════════════════════════════════
   POSITION
   ═══════════════════════════════════════════════════════════ */

.sr-relative { position: relative; }
.sr-absolute { position: absolute; }
.sr-fixed { position: fixed; }
.sr-sticky { position: sticky; top: 0; }
.sr-inset-0 { inset: 0; }

/* ═══════════════════════════════════════════════════════════
   OVERFLOW
   ═══════════════════════════════════════════════════════════ */

.sr-overflow-hidden { overflow: hidden; }
.sr-overflow-auto { overflow: auto; }
.sr-overflow-x-auto { overflow-x: auto; }
.sr-overflow-y-auto { overflow-y: auto; }

/* ═══════════════════════════════════════════════════════════
   POINTER / CURSOR
   ═══════════════════════════════════════════════════════════ */

.sr-pointer { cursor: pointer; }
.sr-cursor-default { cursor: default; }
.sr-select-none { user-select: none; }

/* ═══════════════════════════════════════════════════════════
   OPACITY
   ═══════════════════════════════════════════════════════════ */

.sr-opacity-0 { opacity: 0; }
.sr-opacity-50 { opacity: 0.5; }
.sr-opacity-75 { opacity: 0.75; }
.sr-opacity-100 { opacity: 1; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE VISIBILITY
   ═══════════════════════════════════════════════════════════ */

/* Mobile only (hide on desktop) */
@media (min-width: 769px) {
  .sr-mobile-only { display: none !important; }
}

/* Desktop only (hide on mobile) */
@media (max-width: 768px) {
  .sr-desktop-only { display: none !important; }
}

/* Responsive grid collapse */
@media (max-width: 768px) {
  .sr-grid-2,
  .sr-grid-3,
  .sr-grid-4 {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 769px) and (max-width: 1023px) {
  .sr-grid-3,
  .sr-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ═══════════════════════════════════════════════════════════
   SCREEN READER ONLY
   ═══════════════════════════════════════════════════════════ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.sr-not-sr-only {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}