/* global.css
   Grundlayout, Typografie, Buttons, Formularfelder, Feedback.
   Voraussetzung: tokens.css muss VOR dieser Datei eingebunden sein. */

/* ---- Reset & Basis -------------------------------------------------------- */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* [hidden] explizit durchsetzen – verhindert, dass Komponenten-CSS (z. B. display:flex)
   das native HTML-Attribut aushebelt. */
[hidden] {
  display: none !important;
}

/* Nur für Screenreader sichtbar – Text bleibt im Accessibility-Tree, ohne Layout zu belegen. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html {
  font-size: var(--fs-root);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--c-body);
  background: var(--c-bg);
}

h1, h2, h3, h4 {
  color: var(--c-heading);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }

a { color: var(--c-primary); }

/* ---- Formularfeld --------------------------------------------------------- */

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.form-field label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-heading);
}

.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font);
  font-size: var(--fs-base);
  color: var(--c-heading);
  background: var(--c-surface);
  border: 1.5px solid var(--c-input-border);
  border-radius: var(--r);
  padding: var(--sp-3) var(--sp-4);
  width: 100%;
  min-height: var(--tap);
  transition: border-color var(--tt), box-shadow var(--tt);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  border-color: var(--c-primary);
  box-shadow: var(--ring);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--c-placeholder);
}

.form-field textarea {
  resize: vertical;
  min-height: 96px;
}

/* Chevron-Pfeil für native Select */
.form-field select {
  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='%238C8AA0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  padding-right: 44px;
}

.form-field small {
  font-size: var(--fs-sm);
  color: var(--c-body);
}

/* ---- Fieldset (Standort, Kontakt) ---------------------------------------- */

fieldset {
  border: none;
  padding: 0;
}

fieldset legend {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-heading);
  display: block;
  margin-bottom: var(--sp-3);
}

/* ---- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  min-height: var(--tap);
  padding: 0 var(--sp-6);
  border-radius: var(--r);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--tt), box-shadow var(--tt);
  white-space: nowrap;
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--ring-strong);
}

.btn:active:not(:disabled) {
  transform: scale(.985);
}

.btn--primary {
  background: var(--c-primary);
  color: #fff;
}

.btn--primary:hover:not(:disabled) {
  background: var(--c-primary-press);
}

.btn--ghost {
  background: transparent;
  color: var(--c-primary);
  border: 1.5px solid var(--c-primary);
}

.btn--ghost:hover:not(:disabled) {
  background: var(--c-primary-tint);
}

.btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.btn--block { width: 100%; }

.btn--sm {
  min-height: 36px;
  font-size: var(--fs-sm);
  padding: 0 var(--sp-4);
}

/* ---- Feedback / Inline-Alert ---------------------------------------------- */

.feedback {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.feedback[data-typ="erfolg"] {
  background: var(--c-success-tint);
  color: var(--c-success);
}

.feedback[data-typ="fehler"] {
  background: var(--c-danger-tint);
  color: var(--c-danger);
}

.feedback[data-typ="warnung"] {
  background: var(--c-warning-tint);
  color: var(--c-warning);
}

/* ---- Standort-Chip (Kaskade-Pfad) ---------------------------------------- */

.standort-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-primary-tint);
  color: var(--c-primary);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  word-break: break-word;
}

/* Versionsanzeige auf der Login-Seite */
.login-version {
  margin-top: var(--sp-4);
  font-size: 11px;
  color: var(--c-placeholder);
  text-align: center;
  min-height: 14px; /* verhindert Springen beim Laden */
}

/* ---- Status-Badge (bisher doppelt in mobile.css + desktop.css) ----------- */

.status-badge {
  display: inline-block;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.status-badge[data-status="offen"]           { background: var(--c-st-offen-tint); color: var(--c-st-offen); }
.status-badge[data-status="zugewiesen"]      { background: var(--c-st-zug-tint);   color: var(--c-st-zug); }
.status-badge[data-status="in_bearbeitung"]  { background: var(--c-st-bear-tint);  color: var(--c-st-bear); }
.status-badge[data-status="wartet_material"] { background: var(--c-st-mat-tint);   color: var(--c-st-mat); }
.status-badge[data-status="erledigt"]        { background: var(--c-st-erl-tint);   color: var(--c-st-erl); }

/* ---- Dringlichkeits-Punkt (bisher doppelt in mobile.css + desktop.css) --- */

.dring-punkt {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  vertical-align: middle;
}

.dring-punkt[data-wert="niedrig"]  { background: var(--c-u-niedrig); }
.dring-punkt[data-wert="mittel"]   { background: var(--c-u-mittel); }
.dring-punkt[data-wert="hoch"]     { background: var(--c-u-hoch); }
.dring-punkt[data-wert="kritisch"] { background: var(--c-u-krit); }

/* ---- Kommentare (bisher doppelt in mobile.css + desktop.css .modal) ------ */

.kommentar-liste {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.kommentar-liste__leer {
  font-size: var(--fs-sm);
  color: var(--c-body);
  font-style: italic;
  margin: 0;
}

.kommentar-item {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r);
  background: var(--c-bg);
  max-width: 88%;
  align-self: flex-start;
}

.kommentar-item--eigen {
  align-self: flex-end;
  background: var(--c-primary-tint);
}

.kommentar-item__kopf {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-body);
  margin-bottom: var(--sp-1);
}

.kommentar-item__text {
  font-size: var(--fs-base);
  color: var(--c-heading);
  white-space: pre-wrap;
  word-break: break-word;
}

.kommentar-item__zeit {
  font-size: 12px;
  color: var(--c-placeholder);
  margin-top: var(--sp-1);
}

.kommentar-neu {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.kommentar-neu textarea {
  font-family: var(--font);
  font-size: var(--fs-base);
  color: var(--c-heading);
  background: var(--c-surface);
  border: 1.5px solid var(--c-input-border);
  border-radius: var(--r);
  padding: var(--sp-3);
  width: 100%;
  min-height: 72px;
  resize: vertical;
  outline: none;
  transition: border-color var(--tt), box-shadow var(--tt);
  box-sizing: border-box;
}

.kommentar-neu textarea:focus-visible {
  border-color: var(--c-primary);
  box-shadow: var(--ring);
}

.kommentar-neu .feedback {
  margin: 0;
}