/* components.css — wiederverwendbare UI-Bausteine.
   Generischer Kern aus unpack uebernommen (.app-btn, .app-field, Utilities),
   ohne projektspezifische Altlasten. NEUE Elemente nutzen diese Klassen. */

/* === Utilities === */
.is-hidden { display: none !important; }
.app-spacer { flex: 1; }
.app-hint {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: 0.3em;
}
.app-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.app-row--wrap { flex-wrap: wrap; }
.app-hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--sp-6) 0;
}

/* === Buttons === (Favoriten-Pill-Stil, 40px hoch wie Inputs) */
.app-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-6);
  min-height: 40px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: var(--fs-lg);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--t-fast);
  white-space: nowrap;
}
.app-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.app-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.app-btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.app-btn--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--on-accent);
}

.app-btn--danger {
  border-color: color-mix(in srgb, var(--red) 40%, var(--border));
  color: var(--red);
}
.app-btn--danger:hover {
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 10%, transparent);
}

.app-btn--sm { min-height: 30px; padding: var(--sp-1) var(--sp-4); font-size: var(--fs-md); }

/* === Form fields === (label + control gestapelt, control 40px hoch) */
.app-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.app-field > label {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.app-field input,
.app-field select,
.app-field textarea {
  min-height: 40px;
  box-sizing: border-box;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: var(--fs-lg);
}
.app-field textarea { min-height: 72px; resize: vertical; }
.app-field input:focus,
.app-field select:focus,
.app-field textarea:focus {
  outline: none;
  border-color: var(--accent);
}

/* === Card === */
.app-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-7);
}

/* === Pills (Status / Prioritaet) === nutzen die State-Tokens */
.app-pill {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-1) var(--sp-4);
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 500;
  border: 1px solid var(--state-neutral-border);
  background: var(--state-neutral-bg);
  color: var(--state-neutral);
}
.app-pill--success { border-color: var(--state-success-border); background: var(--state-success-bg); color: var(--state-success); }
.app-pill--warn    { border-color: var(--state-warn-border);    background: var(--state-warn-bg);    color: var(--state-warn); }
.app-pill--error   { border-color: var(--state-error-border);   background: var(--state-error-bg);   color: var(--state-error); }
.app-pill--info    { border-color: var(--state-info-border);    background: var(--state-info-bg);    color: var(--state-info); }

/* === Empty state === */
.empty {
  padding: var(--sp-8);
  text-align: center;
  color: var(--text-muted);
}