/* ══════════════════════════════════════════════════════════════════════
   Collrd — utilities.css
   Utility-Klassen für Phase F1 (Inline-Style-Audit)
   Naming: Tailwind-ähnlich, ohne Prefix
   Stand: 30. März 2026
   ══════════════════════════════════════════════════════════════════════ */


/* ── Display ──────────────────────────────────────────────────────── */

.d-none          { display: none; }
.d-block         { display: block; }
.d-inline        { display: inline; }
.d-inline-block  { display: inline-block; }
.d-flex          { display: flex; }
.d-inline-flex   { display: inline-flex; }
.d-grid          { display: grid; }


/* ── Flexbox ──────────────────────────────────────────────────────── */

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

.items-center    { align-items: center; }
.items-start     { align-items: flex-start; }
.items-end       { align-items: flex-end; }
.items-stretch   { align-items: stretch; }

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


/* ── Gap (8px base scale) ─────────────────────────────────────────── */

.gap-1           { gap: var(--space-1); }   /*  4px */
.gap-2           { gap: var(--space-2); }   /*  8px */
.gap-3           { gap: var(--space-3); }   /* 12px */
.gap-4           { gap: var(--space-4); }   /* 16px */
.gap-5           { gap: var(--space-5); }   /* 20px */
.gap-6           { gap: var(--space-6); }   /* 24px */
.gap-8           { gap: var(--space-8); }   /* 32px */

/* Named gap aliases for common inline patterns */
.gap-6px         { gap: 6px; }
.gap-10px        { gap: 10px; }


/* ── Margin Top ───────────────────────────────────────────────────── */

.mt-0            { margin-top: 0; }
.mt-1            { margin-top: var(--space-1); }   /*  4px */
.mt-2            { margin-top: var(--space-2); }   /*  8px */
.mt-3            { margin-top: var(--space-3); }   /* 12px */
.mt-4            { margin-top: var(--space-4); }   /* 16px */
.mt-5            { margin-top: var(--space-5); }   /* 20px */
.mt-6            { margin-top: var(--space-6); }   /* 24px */
.mt-8            { margin-top: var(--space-8); }   /* 32px */
.mt-10           { margin-top: var(--space-10); }  /* 40px */

/* Pixel-specific (for patterns that don't fit 8px scale) */
.mt-6px          { margin-top: 6px; }
.mt-14px         { margin-top: 14px; }
.mt-18px         { margin-top: 18px; }


/* ── Margin Bottom ────────────────────────────────────────────────── */

.mb-0            { margin-bottom: 0; }
.mb-1            { margin-bottom: var(--space-1); }   /*  4px */
.mb-2            { margin-bottom: var(--space-2); }   /*  8px */
.mb-3            { margin-bottom: var(--space-3); }   /* 12px */
.mb-4            { margin-bottom: var(--space-4); }   /* 16px */
.mb-5            { margin-bottom: var(--space-5); }   /* 20px */
.mb-6            { margin-bottom: var(--space-6); }   /* 24px */
.mb-8            { margin-bottom: var(--space-8); }   /* 32px */

/* Pixel-specific */
.mb-6px          { margin-bottom: 6px; }
.mb-10px         { margin-bottom: 10px; }
.mb-14px         { margin-bottom: 14px; }
.mb-18px         { margin-bottom: 18px; }


/* ── Margin Left / Right / Auto ───────────────────────────────────── */

.ml-auto         { margin-left: auto; }
.mr-auto         { margin-right: auto; }
.mx-auto         { margin-left: auto; margin-right: auto; }
.ml-2            { margin-left: var(--space-2); }
.mr-2            { margin-right: var(--space-2); }
.mx-3            { margin-left: var(--space-3); margin-right: var(--space-3); }

/* Reset */
.m-0             { margin: 0; }


/* ── Padding ──────────────────────────────────────────────────────── */

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

.px-2            { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-4            { padding-left: var(--space-4); padding-right: var(--space-4); }
.py-2            { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3            { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-8            { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.pb-3            { padding-bottom: var(--space-3); }
.ml-auto         { margin-left: auto; }


/* ── Width / Height ───────────────────────────────────────────────── */

.w-full          { width: 100%; }
.w-auto          { width: auto; }
.min-w-0         { min-width: 0; }
.max-w-200       { max-width: 200px; }
.max-w-300       { max-width: 300px; }
.max-w-440       { max-width: 440px; }
.max-w-480       { max-width: 480px; }
.max-w-520       { max-width: 520px; }

.max-h-200       { max-height: 200px; }


/* ── Text Alignment ───────────────────────────────────────────────── */

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


/* ── Text Colors (Design-System Tokens) ───────────────────────────── */

.text-primary    { color: var(--text-primary); }
.text-secondary  { color: var(--text-secondary); }
.text-tertiary   { color: var(--text-tertiary); }
.text-disabled   { color: var(--text-disabled); }
.text-gold       { color: var(--gold); }
.text-gold-light { color: var(--gold-light); }
.text-magenta    { color: var(--neon-magenta); }
.text-cyan       { color: var(--neon-cyan); }
.text-violet     { color: var(--neon-violet); }
.text-error      { color: var(--status-error); }
.text-success    { color: var(--status-success); }
.text-warning    { color: var(--status-warning); }
.text-white      { color: #fff; }


/* ── Font Size (Design-System v2.1 Scale) ────────────────────────────── */

.text-2xs        { font-size: 11px; }   /* --type-micro */
.text-xs         { font-size: 12px; }   /* --type-caption */
.text-sm         { font-size: 14px; }   /* --type-body-sm */
.text-base       { font-size: 16px; }   /* --type-body */
.text-md         { font-size: 16px; }   /* --type-heading-md */
.text-lg         { font-size: 20px; }   /* --type-heading-lg */
.text-xl         { font-size: 24px; }   /* --type-display-md */
.text-2xl        { font-size: 32px; }   /* --type-display-lg */
.text-3xl        { font-size: 48px; }   /* --type-display-xl */


/* ── Font Weight ──────────────────────────────────────────────────── */

.font-normal     { font-weight: 400; }
.font-medium     { font-weight: 500; }
.font-semibold   { font-weight: 600; }
.font-bold       { font-weight: 700; }
.font-extrabold  { font-weight: 800; }


/* ── Font Family ──────────────────────────────────────────────────── */

.font-display    { font-family: var(--font-display); }
.font-body       { font-family: var(--font-body); }
.font-mono       { font-family: var(--font-mono); }


/* ── Font Style ───────────────────────────────────────────────────── */

.italic          { font-style: italic; }
.not-italic      { font-style: normal; }
.uppercase       { text-transform: uppercase; }
.lowercase       { text-transform: lowercase; }
.capitalize      { text-transform: capitalize; }
.no-underline    { text-decoration: none; }
.line-through    { text-decoration: line-through; }


/* ── Line Height ──────────────────────────────────────────────────── */

.leading-tight   { line-height: 1.1; }
.leading-snug    { line-height: 1.3; }
.leading-normal  { line-height: 1.6; }
.leading-relaxed { line-height: 1.8; }


/* ── Whitespace / Overflow / Truncation ────────────────────────────── */

.whitespace-nowrap  { white-space: nowrap; }
.whitespace-pre     { white-space: pre-wrap; }
.overflow-hidden    { overflow: hidden; }
.overflow-y-auto    { overflow-y: auto; }
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ── Opacity ──────────────────────────────────────────────────────── */

.opacity-30      { opacity: 0.3; }
.opacity-40      { opacity: 0.4; }
.opacity-50      { opacity: 0.5; }
.opacity-60      { opacity: 0.6; }
.opacity-70      { opacity: 0.7; }


/* ── Cursor ───────────────────────────────────────────────────────── */

.cursor-pointer  { cursor: pointer; }
.cursor-default  { cursor: default; }
.pointer-events-none { pointer-events: none; }


/* ── Borders ──────────────────────────────────────────────────────── */

.border          { border: 1px solid var(--border-default); }
.border-subtle   { border: 1px solid var(--border-subtle); }
.border-strong   { border: 1px solid var(--border-strong); }
.border-t        { border-top: 1px solid var(--border-default); }
.border-b        { border-bottom: 1px solid var(--border-default); }
.border-l-3      { border-left: 3px solid var(--border-default); }
.border-violet   { border-color: var(--neon-violet); }
.border-gold     { border-color: var(--gold); }

.rounded-sm      { border-radius: var(--radius-sm); }
.rounded-md      { border-radius: var(--radius-md); }
.rounded-lg      { border-radius: var(--radius-lg); }
.rounded-full    { border-radius: 9999px; }
.rounded-circle  { border-radius: 50%; }


/* ── Background Colors ────────────────────────────────────────────── */

.bg-void         { background: var(--bg-void); }
.bg-surface      { background: var(--bg-surface); }
.bg-card         { background: var(--bg-card); }
.bg-elevated     { background: var(--bg-elevated); }
.bg-hover        { background: var(--bg-hover); }


/* ── Positioning ──────────────────────────────────────────────────── */

.relative        { position: relative; }
.absolute        { position: absolute; }
.sticky          { position: sticky; }


/* ── Grid Shortcuts ───────────────────────────────────────────────── */

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

/* F6b: Phone — alle Grids auf Single-Column */
@media (max-width: 480px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}


/* ── Interaction States ───────────────────────────────────────────── */

.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}


/* ── 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;
}


/* ── Letter Spacing ───────────────────────────────────────────────── */

.tracking-wide   { letter-spacing: 1.5px; }
.tracking-wider  { letter-spacing: 3px; }
.my-4            { margin-top: var(--space-4); margin-bottom: var(--space-4); }
.grid-3-col      { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }

/* F6b: Phone — grid-3-col Single-Column */
@media (max-width: 480px) {
  .grid-3-col { grid-template-columns: 1fr; }
}