/* =========================================================================
   ServiceHub — Redesign · Block 01: Basis-Komponenten
   --------------------------------------------------------------------------
   REIN OPTISCH. Keine Funktions-/Markup-/Layout-Änderung — nur Farbe, Schrift,
   Radius, Schatten, Rahmen, Hintergrund. Additiv (lädt zuletzt → gewinnt die
   Kaskade). Light + Dark über [data-theme="dark"].

   Aufgabe dieser Datei: die ECHTEN App-Komponenten (.btn / .input / select /
   textarea / .badge / .chip / .card / .panel / .data-table) optisch an das
   neue Design-System (sh/theme.css) angleichen.

   Token-Bezug: nutzt ausschliesslich die Redesign-Tokens (--accent, --surf-2,
   --ink, --field …). Diese werden vom Token-Fundament (Block 00) global auf
   :root + [data-theme="dark"] bereitgestellt. Diese Datei definiert KEINE
   globalen Tokens neu. Fallback-Werte stehen nur als Sicherheitsnetz dabei,
   falls das Fundament (noch) nicht geladen ist — sie entsprechen 1:1 den
   Token-Werten aus theme.css.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Figtree:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

/* =========================================================================
   1) BUTTONS  — pill-Radius, weicher Akzent-Schatten beim Primary, Figtree 600
   ========================================================================= */

/* Basis-Button: Form/Schrift/Übergang (keine Klickflächen-/Padding-Logik ändern,
   nur Optik-Padding leicht angeglichen an theme.css 10px 16px). */
.btn,
button.btn {
  font-family: var(--font-body, 'Figtree', system-ui, sans-serif);
  font-weight: 600;
  font-size: 13.5px;
  border-radius: var(--r-pill, 999px);
  border: 1px solid var(--border-2, #E3D9CE);
  background: var(--surface, #FFFFFF);
  color: var(--text, #463D35);
  transition: background var(--tr, .16s cubic-bezier(.2,.7,.3,1)),
              border-color var(--tr, .16s cubic-bezier(.2,.7,.3,1)),
              color var(--tr, .16s cubic-bezier(.2,.7,.3,1)),
              box-shadow var(--tr, .16s cubic-bezier(.2,.7,.3,1)),
              transform .12s ease;
}
.btn:hover,
button.btn:hover {
  background: var(--surf-2, #F6F1EB);
  border-color: var(--border-2, #E3D9CE);
}
.btn:active,
button.btn:active {
  transform: translateY(0) scale(.985);
}

/* Primary — Akzent-Fläche + warmer Akzent-Schatten */
.btn-primary,
button.btn-primary {
  background: var(--accent, #E73D25);
  border: 1px solid var(--accent, #E73D25);
  color: #fff;
  box-shadow: var(--sh-accent, 0 5px 14px rgba(231,61,37,.28));
}
.btn-primary:hover,
button.btn-primary:hover {
  background: var(--accent-700, #C5331E);
  border-color: var(--accent-700, #C5331E);
  color: #fff;
  box-shadow: var(--sh-accent, 0 5px 14px rgba(231,61,37,.28));
  transform: translateY(-1px);
}

/* Secondary — weiche, ruhige Fläche */
.btn-secondary,
button.btn-secondary {
  background: var(--surf-2, #F6F1EB);
  border: 1px solid transparent;
  color: var(--text-2, #6B6157);
}
.btn-secondary:hover,
button.btn-secondary:hover {
  background: var(--surf-3, #EFE8E0);
  border-color: var(--border-2, #E3D9CE);
  color: var(--ink, #231C17);
}

/* Ghost — randlos, Akzent beim Hover */
.btn-ghost,
button.btn-ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-2, #6B6157);
}
.btn-ghost:hover,
button.btn-ghost:hover {
  background: var(--accent-soft, #FCEDE7);
  border-color: transparent;
  color: var(--accent, #E73D25);
}

/* Danger — bleibt deutlich, jetzt in Akzent-Rot-Logik der Palette */
.btn-danger,
button.btn-danger {
  background: var(--accent, #E73D25);
  border: 1px solid var(--accent, #E73D25);
  color: #fff;
}
.btn-danger:hover,
button.btn-danger:hover {
  background: var(--accent-700, #C5331E);
  border-color: var(--accent-700, #C5331E);
  color: #fff;
}

/* Kleinere Variante: nur Schriftgrösse, Padding der App nicht antasten */
.btn-sm,
button.btn-sm {
  font-size: 12.5px;
  border-radius: var(--r-pill, 999px);
}

.btn:disabled,
button.btn:disabled {
  opacity: .45;
  box-shadow: none;
}

/* =========================================================================
   2) FORMULARFELDER  — Radius 9px, --field-Hintergrund, Fokus-Ring --accent-soft
   ========================================================================= */

/* Generische Feld-Klassen */
.input,
.textarea,
.select,
input.input,
select.select,
textarea.textarea {
  font-family: var(--font-body, 'Figtree', system-ui, sans-serif);
  font-size: 13.5px;
  color: var(--ink, #231C17);
  background: var(--field, #F6F1EB);
  border: 1px solid var(--border-2, #E3D9CE);
  border-radius: var(--r-sm, 9px);
  transition: border-color var(--tr, .16s cubic-bezier(.2,.7,.3,1)),
              box-shadow var(--tr, .16s cubic-bezier(.2,.7,.3,1)),
              background var(--tr, .16s cubic-bezier(.2,.7,.3,1));
}
.input::placeholder,
.textarea::placeholder,
input.input::placeholder,
textarea.textarea::placeholder {
  color: var(--muted, #9A8F84);
}

/* Felder innerhalb von Karten/Panels (App-Konvention .panel input/select/textarea) */
.panel input[type="text"],
.panel input[type="email"],
.panel input[type="password"],
.panel input[type="number"],
.panel input[type="date"],
.panel input[type="datetime-local"],
.panel input[type="time"],
.panel input[type="url"],
.panel input[type="search"],
.panel input[type="tel"],
.panel select,
.panel textarea,
.card input[type="text"],
.card input[type="email"],
.card input[type="number"],
.card input[type="search"],
.card select,
.card textarea {
  background: var(--field, #F6F1EB);
  border: 1px solid var(--border-2, #E3D9CE);
  border-radius: var(--r-sm, 9px);
  color: var(--ink, #231C17);
  font-family: var(--font-body, 'Figtree', system-ui, sans-serif);
}

/* Einheitlicher Fokus-Ring (--accent-soft) für alle Feldtypen */
.input:focus,
.textarea:focus,
.select:focus,
input.input:focus,
select.select:focus,
textarea.textarea:focus,
.panel input:focus,
.panel select:focus,
.panel textarea:focus,
.card input:focus,
.card select:focus,
.card textarea:focus {
  outline: none;
  background: var(--surface, #FFFFFF);
  border-color: var(--accent, #E73D25);
  box-shadow: var(--ring, 0 0 0 3px var(--accent-soft, #FCEDE7));
}

/* Listen-/Toolbar-Suchfelder (App-Konvention) an die warme Palette angleichen */
.ui-toolbar input[type="search"],
.ui-toolbar input[type="text"],
.list-toolbar input,
.table-toolbar input {
  background: var(--field, #F6F1EB);
  border: 1px solid transparent;
  border-radius: var(--r-sm, 9px);
  color: var(--ink, #231C17);
}
.ui-toolbar input:focus,
.list-toolbar input:focus,
.table-toolbar input:focus {
  background: var(--surface, #FFFFFF);
  border-color: var(--accent, #E73D25);
  box-shadow: var(--ring, 0 0 0 3px var(--accent-soft, #FCEDE7));
}

/* Pfeil-Icon für native Selects in der warmen Akzent-Logik */
.select,
select.select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239A8F84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

/* =========================================================================
   3) BADGES  — pill, weiche Token-Hintergründe
   ========================================================================= */

.badge {
  font-family: var(--font-body, 'Figtree', system-ui, sans-serif);
  font-weight: 600;
  font-size: 11.5px;
  border-radius: var(--r-pill, 999px);
}

.badge-success, .badge--success {
  background: var(--ok-soft, #E9F8EF);
  color: var(--ok, #16A34A);
}
.badge-warning, .badge--warning {
  background: var(--warn-soft, #FBF1E0);
  color: var(--warn, #C7791A);
}
.badge-danger, .badge--danger {
  background: var(--accent-soft, #FCEDE7);
  color: var(--accent, #E73D25);
}
.badge-info, .badge--info {
  background: var(--info-soft, #EAF1FC);
  color: var(--info, #2F6BD6);
}
.badge-neutral, .badge--neutral {
  background: var(--surf-2, #F6F1EB);
  color: var(--text-2, #6B6157);
}

/* =========================================================================
   4) CHIPS / FILTER-CHIPS  — pill, weiche Token-Flächen
   ========================================================================= */

.chip {
  font-family: var(--font-body, 'Figtree', system-ui, sans-serif);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--text-2, #6B6157);
  background: var(--surface, #FFFFFF);
  border: 1px solid var(--border-2, #E3D9CE);
  border-radius: var(--r-pill, 999px);
  transition: background var(--tr, .16s cubic-bezier(.2,.7,.3,1)),
              border-color var(--tr, .16s cubic-bezier(.2,.7,.3,1)),
              color var(--tr, .16s cubic-bezier(.2,.7,.3,1));
}
.chip:hover {
  background: var(--surf-2, #F6F1EB);
  border-color: var(--border-2, #E3D9CE);
  color: var(--ink, #231C17);
}
.chip.on,
.chip.active,
.chip.is-active,
.chip[aria-pressed="true"] {
  background: var(--accent-soft, #FCEDE7);
  border-color: var(--accent, #E73D25);
  color: var(--accent, #E73D25);
}

/* =========================================================================
   5) KARTEN / PANELS  — Radius 16px, warmer Schatten, zarte Border
   ========================================================================= */

.card,
.panel {
  background: var(--surface, #FFFFFF);
  border: 1px solid var(--border, #EEE5DC);
  border-radius: var(--r-lg, 16px);
  box-shadow: var(--sh-md, 0 6px 20px rgba(120,80,50,.07), 0 1px 2px rgba(120,80,50,.05));
}
.card:hover,
.panel:hover {
  box-shadow: var(--sh-lg, 0 18px 44px rgba(120,80,50,.14));
  border-color: var(--border, #EEE5DC);
}

/* =========================================================================
   6) DATENTABELLEN  — Kopf uppercase muted, Zeilen-Hover surf-2, weiche Border
   ========================================================================= */

.data-table,
.sh-table {
  font-family: var(--font-body, 'Figtree', system-ui, sans-serif);
  color: var(--text, #463D35);
}
.data-table thead th,
.sh-table thead th {
  background: var(--surf-2, #F6F1EB);
  color: var(--muted, #9A8F84);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border, #EEE5DC);
}
.data-table tbody td,
.sh-table tbody td {
  color: var(--text, #463D35);
  border-bottom: 1px solid var(--border, #EEE5DC);
}
.data-table tbody tr,
.sh-table tbody tr {
  transition: background var(--tr, .16s cubic-bezier(.2,.7,.3,1));
}
.data-table tbody tr:hover,
.sh-table tbody tr:hover {
  background: var(--surf-2, #F6F1EB);
}
.data-table tbody tr:last-child td,
.sh-table tbody tr:last-child td {
  border-bottom: none;
}

/* Schlichte .table-Tabellen (ohne .data-table) mitnehmen, damit der Look
   einheitlich ist (Optik-only, keine Layout-Änderung). */
.panel table.table:not(.data-table) > thead > tr > th {
  background: var(--surf-2, #F6F1EB);
  color: var(--muted, #9A8F84);
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--border, #EEE5DC);
}
.panel table.table:not(.data-table) > tbody > tr > td {
  color: var(--text, #463D35);
  border-bottom: 1px solid var(--border, #EEE5DC);
}
.panel table.table:not(.data-table) > tbody > tr:hover {
  background: var(--surf-2, #F6F1EB);
}

/* =========================================================================
   7) DARK-MODE  — die Komponenten ziehen ihre Farben aus den Tokens, die das
   Fundament unter [data-theme="dark"] umschaltet. Hier nur, was über reine
   Token-Referenz hinaus nötig ist (Fallback-Hex der Light-Defaults oben würde
   im Dark sonst zünden, falls das Fundament fehlt). Diese Block-Overrides
   greifen nur, wenn das Theme aktiv auf dark steht. Reine Optik.
   ========================================================================= */

[data-theme="dark"] .btn,
[data-theme="dark"] button.btn {
  background: var(--surface, #1E1A16);
  border-color: var(--border-2, #3A332B);
  color: var(--text, #E2D8CE);
}
[data-theme="dark"] .btn:hover,
[data-theme="dark"] button.btn:hover {
  background: var(--surf-2, #241F1A);
}
[data-theme="dark"] .btn-ghost,
[data-theme="dark"] button.btn-ghost {
  background: transparent;
  color: var(--text-2, #B3A99E);
}
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] button.btn-secondary {
  background: var(--surf-2, #241F1A);
  color: var(--text-2, #B3A99E);
}

[data-theme="dark"] .input,
[data-theme="dark"] .textarea,
[data-theme="dark"] .select,
[data-theme="dark"] input.input,
[data-theme="dark"] select.select,
[data-theme="dark"] textarea.textarea,
[data-theme="dark"] .panel input,
[data-theme="dark"] .panel select,
[data-theme="dark"] .panel textarea {
  background: var(--field, #241F1A);
  border-color: var(--border-2, #3A332B);
  color: var(--ink, #F6F1EC);
}

[data-theme="dark"] .chip {
  background: var(--surface, #1E1A16);
  border-color: var(--border-2, #3A332B);
  color: var(--text-2, #B3A99E);
}

[data-theme="dark"] .card,
[data-theme="dark"] .panel {
  background: var(--surface, #1E1A16);
  border-color: var(--border, #2E2822);
}

[data-theme="dark"] .data-table thead th,
[data-theme="dark"] .sh-table thead th {
  background: var(--surf-2, #241F1A);
  color: var(--muted, #8C8175);
  border-bottom-color: var(--border, #2E2822);
}
[data-theme="dark"] .data-table tbody td,
[data-theme="dark"] .sh-table tbody td {
  color: var(--text, #E2D8CE);
  border-bottom-color: var(--border, #2E2822);
}
[data-theme="dark"] .data-table tbody tr:hover,
[data-theme="dark"] .sh-table tbody tr:hover {
  background: var(--surf-2, #241F1A);
}