/* ══════════════════════════════════════════════════════════════════════
   Collrd — components.css
   Wiederverwendbare UI-Komponenten für Phase F1 (Inline-Style-Audit)
   Referenz: design_system.md
   Stand: 30. März 2026
   ══════════════════════════════════════════════════════════════════════ */


/* ── Meta Row ─────────────────────────────────────────────────────────
   Flex-Zeile mit space-between für Key-Value-Paare
   Usage: <div class="meta-row">
            <span>Label</span>
            <span>Value</span>
          </div>
   ──────────────────────────────────────────────────────────────────── */

.meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: var(--text-secondary);
}

.meta-row + .meta-row {
  margin-top: var(--space-2);
}


/* ── Description Text ─────────────────────────────────────────────────
   Sekundärer Beschreibungstext; font-size:0.88rem)
   ──────────────────────────────────────────────────────────────────── */

.desc-text {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
}

.desc-text-lg {
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.6;
}


/* ── Form Label ───────────────────────────────────────────────────────
   Einheitliches Label-Styling; font-size:0.85rem)
   ──────────────────────────────────────────────────────────────────── */

.form-label {
  display: block;
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 6px;
}


/* ── Section Title ────────────────────────────────────────────────────
   Modul-Abschnittstitel
   ──────────────────────────────────────────────────────────────────── */

.section-title {
  color: var(--neon-violet);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 6px;
}

.section-subtitle {
  color: var(--text-secondary);
  font-size: 16px;
  margin-bottom: 18px;
}


/* ── Aftercare Block ──────────────────────────────────────────────────
   Wiederverwendbar für Aftercare Check-In Bereiche
  ...")
   ──────────────────────────────────────────────────────────────────── */

.aftercare-title {
  color: var(--neon-violet);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 6px;
}

.aftercare-desc {
  color: var(--text-secondary);
  font-size: 16px;
  margin-bottom: 18px;
}


/* ── Category Accent Border ───────────────────────────────────────────
   Linke Farbleiste für Kategorien (dynamische Farbe via CSS Custom Property)
   Usage: <div class="cat-border" style="--cat-color: {{ cat.color }}">
   ──────────────────────────────────────────────────────────────────── */

.cat-border {
  border-left: 3px solid var(--cat-color, var(--gold));
}

.cat-border-rounded {
  border-left: 3px solid var(--cat-color, var(--gold));
  border-radius: var(--radius-md);
}


/* ── Status Badge (Inline) ────────────────────────────────────────────
   Kleine Status-Anzeige
   Usage: <span class="status-badge status-badge-gold">Text</span>
   ──────────────────────────────────────────────────────────────────── */

.status-badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  font-size: 14px;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  line-height: 1.4;
}

.status-badge-gold {
  color: var(--gold);
  border: 1px solid rgba(201, 168, 76, 0.27);
  background: var(--gold-soft);
}

.status-badge-error {
  color: var(--status-error);
  border: 1px solid rgba(255, 77, 106, 0.27);
  background: rgba(255, 77, 106, 0.08);
}

.status-badge-success {
  color: var(--status-success);
  border: 1px solid rgba(74, 222, 128, 0.27);
  background: rgba(74, 222, 128, 0.08);
}

.status-badge-warning {
  color: var(--status-warning);
  border: 1px solid rgba(251, 191, 36, 0.27);
  background: rgba(251, 191, 36, 0.08);
}

.status-badge-violet {
  color: var(--neon-violet);
  border: 1px solid rgba(168, 85, 247, 0.27);
  background: var(--neon-violet-soft);
}

.status-badge-cyan {
  color: var(--neon-cyan);
  border: 1px solid rgba(0, 229, 255, 0.27);
  background: var(--neon-cyan-soft);
}

.status-badge-magenta {
  color: var(--neon-magenta);
  border: 1px solid rgba(255, 45, 123, 0.27);
  background: var(--neon-magenta-soft);
}

.status-badge-muted {
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  background: transparent;
}


/* ── Avatar ───────────────────────────────────────────────────────────
   Profilbild-Circle
   ──────────────────────────────────────────────────────────────────── */

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  border: 2px solid var(--border-default);
}

.avatar-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  flex-shrink: 0;
}

.avatar-sm {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.avatar-lg {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  flex-shrink: 0;
}


/* ── Icon Text Row ────────────────────────────────────────────────────
   Icon + Text nebeneinander
   ──────────────────────────────────────────────────────────────────── */

.icon-text {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.icon-text-sm {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 14px;
}


/* ── Action Row ───────────────────────────────────────────────────────
   Button-Gruppe am Ende einer Card/Section
  
   ──────────────────────────────────────────────────────────────────── */

.action-row {
  display: flex;
  gap: var(--space-3);
  margin-top: 18px;
}

.action-row-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.action-row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}


/* ── Filter Bar ───────────────────────────────────────────────────────
   Horizontale Filter-/Sortier-Leiste oberhalb von Listen
   ──────────────────────────────────────────────────────────────────── */

.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}

.filter-bar-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}


/* ── Compact Input ────────────────────────────────────────────────────
   Kleine Inline-Inputs
   ──────────────────────────────────────────────────────────────────── */

.input-compact {
  width: auto;
  padding: 4px 8px;
  font-size: 14px;
}

.input-narrow {
  width: 110px;
  padding: 6px 8px;
  font-size: 14px;
}

.input-medium {
  width: 120px;
  padding: 6px 8px;
  font-size: 14px;
}


/* ── Gem Badge ────────────────────────────────────────────────────────
   Gold-umrandeter Gem/XP Badge
  ...)
   ──────────────────────────────────────────────────────────────────── */

.gem-badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 14px;
  padding: 4px 12px;
  color: var(--gold);
  border: 1px solid rgba(201, 168, 76, 0.27);
  border-radius: var(--radius-sm);
}


/* ── Empty State ──────────────────────────────────────────────────────
   Leerer Zustand für Listen/Sektionen
   ──────────────────────────────────────────────────────────────────── */

.empty-state {
  color: var(--text-secondary);
  font-size: 16px;
  padding: var(--space-2) 0;
}

.empty-state p {
  margin-bottom: 16px;
  font-size: 16px;
}

.empty-state-centered {
  max-width: 520px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--text-tertiary);
}


/* ── Loading Skeleton (F5 STATE-M02) ─────────────────────────────────
   Generischer Shimmer-Skeleton für Ladezustände.
   Höhe wird per Element gesetzt (z.B. height:60px auf .feed-skeleton).
   ──────────────────────────────────────────────────────────────────── */

.skeleton {
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-elevated) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s infinite;
  border-radius: var(--radius-sm);
}

.skeleton-text {
  height: 14px;
  margin-bottom: 8px;
  border-radius: 4px;
}

.skeleton-text:last-child {
  width: 60%;
}

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-default);
  border-top-color: var(--neon-cyan);
  border-radius: 50%;
  animation: spinner-rotate 0.6s linear infinite;
}

.loading-spinner-lg {
  width: 32px;
  height: 32px;
  border-width: 3px;
}

@keyframes spinner-rotate {
  to { transform: rotate(360deg); }
}


/* ── Gold Highlight Header ────────────────────────────────────────────
  
   ──────────────────────────────────────────────────────────────────── */

.gold-header {
  color: var(--gold);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 14px;
}


/* ── Severity Dot ─────────────────────────────────────────────────────
   Farbiger Punkt für Severity-Level
  
   Usage: <span class="severity-dot" style="--dot-color: {{ color }}"></span>
   ──────────────────────────────────────────────────────────────────── */

.severity-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--dot-color, var(--text-secondary));
  flex-shrink: 0;
}


/* ── Card Section Divider ─────────────────────────────────────────────
   Trennlinie innerhalb von Cards
   ──────────────────────────────────────────────────────────────────── */

.card-divider {
  border: none;
  border-top: 1px solid var(--border-default);
  margin: var(--space-4) 0;
}


/* ── Stat Value (Display Number) ──────────────────────────────────────
   Große Zahlendarstellung
   ──────────────────────────────────────────────────────────────────── */

.stat-value {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
}

.stat-value-sm {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
}

.stat-value-gold { color: var(--gold); }
.stat-value-magenta { color: var(--neon-magenta); }
.stat-value-cyan { color: var(--neon-cyan); }
.stat-value-violet { color: var(--neon-violet); }


/* ── Compact Select ───────────────────────────────────────────────────
   Kleine Selects für Sortierung/Filter
   ──────────────────────────────────────────────────────────────────── */

.select-compact {
  padding: 4px 28px 4px 8px;
  font-size: 14px;
  background-color: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
}


/* ── Inline Form Group ────────────────────────────────────────────────
   Label + Input in einer Zeile
   ──────────────────────────────────────────────────────────────────── */

.form-group-inline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.form-group-inline label {
  color: var(--text-secondary);
  font-size: 14px;
  white-space: nowrap;
}


/* ── Content Wrapper (narrow centered) ─────────────────────────────── */

.content-narrow {
  max-width: 520px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
  text-align: center;
}


/* ── Card Top Accent (via CSS Custom Property) ─────────────────────── */

.card-accent-top {
  position: relative;
}

.card-accent-top::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent-color, var(--neon-magenta));
  box-shadow: 0 0 12px var(--accent-glow, var(--neon-magenta-glow));
}


/* ── Impersonation Banner ──────────────────────────────────────────── */

.impersonate-banner {
  background: var(--status-error);
  color: #fff;
  text-align: center;
  padding: var(--space-2) var(--space-4);
  font-size: 14px;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 9999;
}

.impersonate-banner a {
  color: #fff;
  margin-left: var(--space-4);
  text-decoration: underline;
}


/* ── Nav Paywall Lock ──────────────────────────────────────────────── */

.nav-lock {
  margin-left: auto;
  font-size: 14px;
  color: var(--gold);
  line-height: 1;
}

.nav-disabled {
  opacity: 0.4;
  cursor: default;
}


/* ── Safety Button ─────────────────────────────────────────────────── */

.btn-safety {
  width: 100%;
  background: rgba(255, 77, 106, 0.12);
  border: 1px solid rgba(255, 77, 106, 0.35);
  color: var(--status-error);
}


/* ── FAB Status Text ───────────────────────────────────────────────── */

.fab-status-text {
  font-size: 14px;
  color: var(--text-secondary);
  text-align: center;
  margin-top: 6px;
}


/* ── Tribute Balance Card ──────────────────────────────────────────── */

.tribute-balance-card {
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  text-align: center;
}

.tribute-balance-label {
  color: var(--text-secondary);
  font-size: 14px;
  margin: 0 0 4px;
}

.tribute-balance-value {
  color: var(--neon-cyan);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  margin: 0;
}

.tribute-action-label {
  color: var(--neon-cyan);
  font-size: 14px;
}


/* ── Severity Filter Spacing ───────────────────────────────────────── */

.severity-filter-spaced {
  margin: var(--space-2) var(--space-4) var(--space-1);
}

.severity-filter-flush {
  margin: 0 var(--space-4) var(--space-2);
}

.severity-filter-modal {
  margin: var(--space-3) 0 var(--space-2);
}

.severity-filter-modal-flush {
  margin: 0 0 var(--space-3);
}


/* ── Confirm Modal Text ────────────────────────────────────────────── */

.confirm-text {
  color: var(--text-primary);
  line-height: 1.5;
}


/* ── Modal Body Padded ─────────────────────────────────────────────── */

.modal-body-padded {
  padding: 20px 16px 8px;
}


/* ── Section Overline ──────────────────────────────────────────────── */

.section-overline {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}


/* ── Gold Info Box ─────────────────────────────────────────────────── */

.gold-info-box {
  background: rgba(201, 168, 76, 0.06);
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: var(--radius-md);
  padding: 10px 14px;
}


/* ── Hint Box (inside modals) ──────────────────────────────────────── */
/* DS v2: Info/Tipps = --neon-cyan (§2.7)                              */

.hint-box {
  padding: 8px 10px;
  background: rgba(0, 229, 255, 0.05);
  border-left: 3px solid rgba(0, 229, 255, 0.35);
  border-radius: var(--radius-sm);
}

.hint-box-error {
  padding: 8px 10px;
  background: rgba(255, 77, 106, 0.06);
  border-left: 3px solid rgba(255, 77, 106, 0.35);
  border-radius: var(--radius-sm);
}

.hint-box-violet {
  padding: 8px 10px;
  background: rgba(168, 85, 247, 0.05);
  border-left: 3px solid rgba(168, 85, 247, 0.35);
  border-radius: var(--radius-sm);
}


/* ── Dom Safety Button ─────────────────────────────────────────────── */
/* DS v2: Safety = --status-error border (§2.6)                        */

.btn-safety-wide {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  font-weight: 600;
  background: rgba(255, 77, 106, 0.1);
  border: 1px solid rgba(255, 77, 106, 0.3);
  border-radius: var(--radius-sm);
  color: var(--status-error);
  cursor: pointer;
}


/* ── Checkbox Label Row ────────────────────────────────────────────── */

.checkbox-label-row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  cursor: pointer;
  font-size: 14px;
  color: var(--text-secondary);
}

/* Pill-Variante: Checkbox als Pill (z.B. Wochentage)                  */
.checkbox-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
}

.checkbox-pill input[type="checkbox"] {
  accent-color: var(--neon-magenta);
}


/* ── Selection Box (selected item highlight) ──────────────────────── */

.selection-box-error {
  padding: 8px 12px;
  background: rgba(255, 77, 106, 0.08);
  border: 1px solid rgba(255, 77, 106, 0.3);
  border-radius: var(--radius-sm);
}


/* ── Preview Card (task/punishment preview in modals) ─────────────── */

.preview-card {
  background: var(--bg-void);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}


/* ── Catalog Item (selectable list item in modal) ─────────────────── */

.catalog-item {
  padding: 8px 10px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  transition: background 0.15s ease;
}

.catalog-item:hover {
  background: var(--bg-elevated);
}

.catalog-item.is-selected {
  background: rgba(255, 77, 106, 0.08);
  border-color: rgba(255, 77, 106, 0.3);
}


/* ── Button Success State (disabled after action) ─────────────────── */
/* DS v2: --status-success (#4ade80)                                   */

.btn-success-done {
  width: 100%;
  padding: 12px;
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.3);
  color: var(--status-success);
  font-size: 16px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: default;
}


/* ── Modal Width Modifiers ────────────────────────────────────────── */

/* ── Modal Sizing (base: 440px in modules.css, overrides here) ── */
.modal-card-sm { max-width: 360px; }
.modal-card-md { max-width: 460px; }
.modal-card-lg { max-width: 500px; }
.modal-card-xl { max-width: 560px; }

/* F6b: Phone — Modals als Bottom-Sheet */
@media (max-width: 480px) {
  .modal-card,
  .modal-box,
  .modal-card-sm,
  .modal-card-md,
  .modal-card-lg,
  .modal-card-xl {
    max-width: 100%;
    width: 100%;
    margin: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
  }
  .modal-overlay {
    align-items: flex-end;
  }
}


/* ── Card Divider Compact ─────────────────────────────────────────── */

.card-divider-sm {
  border: none;
  border-top: 1px solid var(--border-default);
  margin: 4px 0;
}


/* ── Contract Row (inset section in modals) ───────────────────────── */

.modal-section-inset {
  padding: 0 16px 8px;
}


/* ── Thumbnail Image ───────────────────────────────────────────────── */

.thumbnail-sm {
  max-height: 80px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
}