/*
 * 6Flaschen WeinApp
 * Datei: /assets/app-components.css
 * Version: 1.0.0
 * Build: 20260806.820000a
 * Stand: 2026-08-06 Europe/Berlin
 *
 * Semantisches Komponenten- und Token-System.
 * Bestehende Seiten behalten ihre Struktur; neue und migrierte Oberflächen
 * verwenden ausschließlich die ui-* Komponenten und semantischen Variablen.
 */

:root {
  --ui-surface-page: var(--bg, #f7f4ee);
  --ui-surface-card: var(--card, rgba(255, 252, 247, .92));
  --ui-surface-card-solid: var(--card-solid, #fffcf7);
  --ui-surface-field: rgba(255, 252, 247, .86);
  --ui-surface-elevated: #fffdf9;
  --ui-surface-selected: rgba(184, 154, 103, .13);
  --ui-surface-muted: rgba(49, 69, 85, .055);
  --ui-surface-success: rgba(79, 123, 89, .10);
  --ui-surface-warning: rgba(181, 138, 66, .11);
  --ui-surface-error: rgba(138, 61, 54, .09);

  --ui-text-primary: var(--text, #24313b);
  --ui-text-secondary: var(--muted, #7e8790);
  --ui-text-muted: #8c949b;
  --ui-text-on-action: #17232c;

  --ui-border-default: var(--line, rgba(49, 69, 85, .14));
  --ui-border-strong: rgba(49, 69, 85, .24);
  --ui-border-active: rgba(184, 154, 103, .70);

  --ui-action-primary: linear-gradient(135deg, #dfbd78 0%, #bf8d3b 100%);
  --ui-action-primary-hover: linear-gradient(135deg, #e7c987 0%, #ca9949 100%);
  --ui-action-secondary: rgba(255, 252, 247, .72);
  --ui-accent: var(--gold, #b89a67);
  --ui-success: var(--success, #4f7b59);
  --ui-warning: var(--warning, #b58a42);
  --ui-error: var(--danger, #8a3d36);

  --ui-radius-sm: 12px;
  --ui-radius-md: 18px;
  --ui-radius-lg: 24px;
  --ui-radius-xl: 30px;
  --ui-shadow-card: 0 12px 32px rgba(36, 49, 59, .08);
  --ui-shadow-elevated: 0 22px 54px rgba(36, 49, 59, .13);
  --ui-focus-ring: 0 0 0 3px rgba(184, 154, 103, .25);
  --ui-control-height: 48px;
  --ui-touch-target: 44px;
}

html[data-theme="light"] { color-scheme: light; }

html[data-theme="dark"] {
  color-scheme: dark;
  --ui-surface-page: #071c27;
  --ui-surface-card: rgba(10, 34, 46, .94);
  --ui-surface-card-solid: #0b2633;
  --ui-surface-field: rgba(8, 29, 40, .96);
  --ui-surface-elevated: #102f3d;
  --ui-surface-selected: rgba(210, 170, 91, .13);
  --ui-surface-muted: rgba(222, 232, 234, .055);
  --ui-surface-success: rgba(54, 129, 103, .17);
  --ui-surface-warning: rgba(193, 143, 57, .15);
  --ui-surface-error: rgba(170, 74, 67, .16);

  --ui-text-primary: #f5efe4;
  --ui-text-secondary: #bcc8cc;
  --ui-text-muted: #94a7ad;
  --ui-text-on-action: #10232b;

  --ui-border-default: rgba(211, 222, 224, .15);
  --ui-border-strong: rgba(211, 222, 224, .26);
  --ui-border-active: rgba(214, 175, 98, .76);
  --ui-action-secondary: rgba(12, 39, 51, .92);
  --ui-accent: #d6af62;
  --ui-success: #79b594;
  --ui-warning: #d6ae62;
  --ui-error: #e19a92;
  --ui-shadow-card: 0 14px 38px rgba(0, 0, 0, .23);
  --ui-shadow-elevated: 0 24px 64px rgba(0, 0, 0, .34);
}

/* Karten */
.ui-card {
  color: var(--ui-text-primary);
  background: var(--ui-surface-card);
  border: 1px solid var(--ui-border-default);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-card);
}

.ui-card--compact { padding: 16px; }
.ui-card--selected {
  background: var(--ui-surface-selected);
  border-color: var(--ui-border-active);
}
.ui-card--flat { box-shadow: none; }

/* Buttons */
.ui-button {
  appearance: none;
  min-height: var(--ui-touch-target);
  padding: 11px 17px;
  border: 1px solid transparent;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--ui-text-primary);
  background: var(--ui-action-secondary);
  font: inherit;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.ui-button:hover { transform: translateY(-1px); }
.ui-button:focus-visible { outline: none; box-shadow: var(--ui-focus-ring); }
.ui-button:disabled,
.ui-button[aria-disabled="true"] { opacity: .54; cursor: wait; transform: none; }
.ui-button--primary {
  color: var(--ui-text-on-action);
  background: var(--ui-action-primary);
  border-color: rgba(122, 84, 24, .18);
  box-shadow: 0 10px 24px rgba(157, 111, 40, .18);
}
.ui-button--primary:hover { background: var(--ui-action-primary-hover); }
.ui-button--secondary {
  border-color: var(--ui-border-default);
  background: var(--ui-action-secondary);
}
.ui-button--quiet {
  padding-inline: 8px;
  color: var(--ui-accent);
  background: transparent;
}
.ui-button--block { width: 100%; }

/* Felder */
.ui-field {
  min-width: 0;
  display: grid;
  gap: 7px;
}
.ui-field__label,
.ui-field > span:first-child {
  color: var(--ui-text-secondary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .035em;
}
.ui-field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
.ui-field select,
.ui-field textarea {
  width: 100%;
  min-height: var(--ui-control-height);
  padding: 11px 13px;
  color: var(--ui-text-primary);
  background: var(--ui-surface-field);
  border: 1px solid var(--ui-border-default);
  border-radius: var(--ui-radius-sm);
  font: inherit;
}
.ui-field textarea { min-height: 110px; resize: vertical; }
.ui-field input:focus,
.ui-field select:focus,
.ui-field textarea:focus {
  outline: none;
  border-color: var(--ui-border-active);
  box-shadow: var(--ui-focus-ring);
}
.ui-field__help { color: var(--ui-text-secondary); font-size: 12px; line-height: 1.45; }
.ui-field__error { color: var(--ui-error); font-size: 13px; font-weight: 750; }

/* Akkordeons und progressive Offenlegung */
.ui-accordion {
  overflow: clip;
  color: var(--ui-text-primary);
  background: var(--ui-surface-card);
  border: 1px solid var(--ui-border-default);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-card);
}
.ui-accordion[open] { border-color: var(--ui-border-active); }
.ui-accordion > summary { min-height: var(--ui-touch-target); cursor: pointer; }
.ui-disclosure {
  border-top: 1px solid var(--ui-border-default);
  margin-top: 12px;
  padding-top: 3px;
}
.ui-disclosure > summary {
  min-height: var(--ui-touch-target);
  display: flex;
  align-items: center;
  color: var(--ui-accent);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}
.ui-disclosure > summary::-webkit-details-marker { display: none; }
.ui-disclosure > summary::after { content: "⌄"; margin-left: auto; }
.ui-disclosure[open] > summary::after { transform: rotate(180deg); }
.ui-disclosure__body { padding: 8px 0 4px; }

/* Status-, Lade-, Leer- und Fehlerzustände */
.ui-status {
  padding: 16px 18px;
  color: var(--ui-text-primary);
  background: var(--ui-surface-muted);
  border: 1px solid var(--ui-border-default);
  border-radius: var(--ui-radius-md);
}
.ui-status--success {
  background: var(--ui-surface-success);
  border-color: rgba(79, 123, 89, .40);
  border-color: color-mix(in srgb, var(--ui-success) 44%, transparent);
}
.ui-status--warning {
  background: var(--ui-surface-warning);
  border-color: rgba(181, 138, 66, .40);
  border-color: color-mix(in srgb, var(--ui-warning) 44%, transparent);
}
.ui-status--error {
  background: var(--ui-surface-error);
  border-color: rgba(138, 61, 54, .40);
  border-color: color-mix(in srgb, var(--ui-error) 44%, transparent);
}
.ui-status__title { margin: 0; font-weight: 850; }
.ui-status__message { margin: 5px 0 0; color: var(--ui-text-secondary); line-height: 1.5; }
.ui-status__actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }

.ui-loading {
  min-height: 148px;
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--ui-text-primary);
  background: var(--ui-surface-elevated);
  border: 1px solid var(--ui-border-default);
  border-radius: var(--ui-radius-lg);
}
.ui-loading__indicator {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: 0 0 50px;
  color: var(--ui-accent);
  background: var(--ui-surface-selected);
  border: 1px solid var(--ui-border-active);
}
.ui-loading p { margin: 5px 0 0; color: var(--ui-text-secondary); }

.ui-empty-state { padding: 28px; text-align: center; }
.ui-empty-state__title { margin: 0; font-size: 20px; }
.ui-empty-state__message { margin: 7px auto 0; max-width: 52ch; color: var(--ui-text-secondary); }

/* Kleine Layoutbausteine */
.ui-stack { display: grid; gap: 12px; }
.ui-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ui-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ui-chip {
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid var(--ui-border-default);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  color: var(--ui-text-secondary);
  background: var(--ui-surface-muted);
  font-size: 12px;
  font-weight: 750;
}
.ui-kicker { color: var(--ui-accent); font-size: 11px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.ui-muted { color: var(--ui-text-secondary); }

/* Behutsame Legacy-Anbindung: keine Layoutänderung, nur semantische Werte. */
.btn.btn-primary { color: var(--ui-text-on-action); background: var(--ui-action-primary); }
.btn.btn-secondary { color: var(--ui-text-primary); background: var(--ui-action-secondary); border-color: var(--ui-border-default); }
.card { --component-surface: var(--ui-surface-card); }

@media (max-width: 720px) {
  .ui-status__actions,
  .ui-actions { align-items: stretch; }
  .ui-status__actions .ui-button,
  .ui-actions .ui-button { flex: 1 1 100%; }
  .ui-loading { align-items: flex-start; justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .ui-button { transition: none; }
}