/* ==========================================================================
   app-ui.css — Gerät + Software-Oberflächen-Kit
   --------------------------------------------------------------------------
   Alle Oberflächen auf dieser Seite sind echtes HTML, keine Bilder: scharf auf
   jedem Display, ohne einen Byte Bildmaterial, jederzeit inhaltlich änderbar.

   Skalierung: der Bildschirm ist ein Grössen-Container, die Grundschrift der
   Oberfläche wird aus seiner Breite (cqi) berechnet. Alle Innenmasse sind in
   em angegeben. Dadurch verhält sich das Mockup wie ein echter Screenshot:
   es skaliert als Ganzes, statt bei kleinen Breiten zu zerfallen.
   Regel für dieses Kit: font-size nur auf Textknoten, nie auf Container –
   sonst würden em-Werte kaskadieren.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Laptop
   -------------------------------------------------------------------------- */
.device {
  position: relative;
  --device-ratio: 16 / 10;
}
.device__lid {
  position: relative;
  background: #161614;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 12px 12px 0;
  box-shadow: var(--shadow-float);
}
/* Haarlinie auf der Deckelkante – lässt das Gehäuse gefräst wirken. */
.device__lid::before {
  content: "";
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 40%;
  border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
  background: linear-gradient(rgba(255, 255, 255, .09), transparent);
  pointer-events: none;
}
.device__screen {
  position: relative;
  background: var(--c-surface);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  overflow: hidden;
  aspect-ratio: var(--device-ratio);
  container-type: inline-size;
}
.device__base {
  position: relative;
  height: 15px;
  background: linear-gradient(#EAE9E5, #CFCEC9);
  border-radius: 0 0 14px 14px;
}
.device__base::after {
  content: "";
  position: absolute;
  left: 50%; top: 0;
  transform: translateX(-50%);
  width: 92px; height: 6px;
  background: #BBBAB5;
  border-radius: 0 0 8px 8px;
}
.device--wide { --device-ratio: 16 / 9; }

/* Auf schmalen Bildschirmen wird das Gehäuse höher. Ein 16:10-Laptop ist bei
   311px Breite nur 194px hoch – darin ist keine Software darstellbar, die
   man lesen kann. Mehr Höhe statt kleinerer Schrift. */
@media (max-width: 620px) {
  .device { --device-ratio: 4 / 3; }
  .device--wide { --device-ratio: 3 / 2; }
}

/* Freistehende Oberfläche ohne Gehäuse – für Dialoge und Formulare.
   Nicht alles ist ein Laptop: das hält den Rhythmus der Seite lebendig. */
.surface {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  container-type: inline-size;
}

/* ==========================================================================
   Oberflächen-Kit
   ========================================================================== */
/* Grundeinheit jeder Oberfläche. --u wird aus der Containerbreite berechnet,
   alle Innenmasse hängen daran.
   Zwei Bezugsgrössen, weil zwei Situationen: im Laptop ist die ganze
   Oberfläche verkleinert (schmalere Skala), ein freistehender Dialog wird
   dagegen in etwa in Originalgrösse gezeigt. */
.app,
.ui-scope {
  --u: clamp(9px, 1.62cqi, 12px);
  font-family: var(--font-text);
  font-size: var(--u);
  line-height: 1.45;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}
.ui-scope { --u: clamp(10px, 3cqi, 13px); }

.app {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* ---- Kopfleiste der Anwendung ---------------------------------------- */
.app__bar {
  flex: none;
  height: 3.4em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 0 1.4em;
  border-bottom: 1px solid var(--c-line-soft);
  background: var(--c-surface);
}
.app__brand,
.app__group { display: flex; align-items: center; gap: .8em; min-width: 0; }
.app__mark {
  width: 1.9em; height: 1.9em;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #FFF;
  border-radius: .55em;
  font-family: var(--font-display);
  font-size: 1.1em;
  font-weight: 700;
}
.app__mark--dot { border-radius: 50%; width: .85em; height: .85em; }
.app__name {
  font-family: var(--font-display);
  font-size: 1.15em;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--c-bg-ink);
  white-space: nowrap;
}
.app__tabs { display: flex; gap: 1.4em; }
.app__tab { font-size: .95em; font-weight: 500; color: var(--c-faint); white-space: nowrap; }
.app__tab.is-active { color: var(--accent); font-weight: 600; }
.app__period { font-size: .95em; font-weight: 600; color: #44423B; white-space: nowrap; }
.app__search {
  width: 12em; height: 2.2em;
  display: flex;
  align-items: center;
  padding: 0 .9em;
  background: #F4F3EF;
  border-radius: .6em;
  font-size: 1em;
  color: var(--c-faint);
}
.app__avatar {
  width: 1.6em; height: 1.6em;
  flex: none;
  border-radius: 50%;
  background: #E8E7E2;
}

/* ---- Rumpf ------------------------------------------------------------ */
.app__body { flex: 1; display: flex; min-height: 0; }
.app__side {
  width: 13.5em;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: .45em;
  padding: 1.2em 1em;
  background: var(--c-surface);
  border-right: 1px solid var(--c-line-soft);
}
.app__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.2em;
  padding: 1.5em 1.7em;
  background: #FCFCFB;
}
.app__main--flush { padding: 0; gap: 0; }
.app__split { flex: 1; display: flex; min-height: 0; }
.app__split > .app__main { flex: 1.15; }

/* ---- Seitennavigation ------------------------------------------------- */
.nav-item {
  display: flex;
  align-items: center;
  gap: .75em;
  padding: .75em 1em;
  border-radius: .6em;
  font-size: 1.05em;
  font-weight: 600;
  color: var(--c-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-item::before {
  content: "";
  width: .5em; height: .5em;
  flex: none;
  border-radius: 50%;
  background: currentColor;
  opacity: .6;
}
.nav-item.is-active { background: var(--accent); color: #FFF; }
.nav-item--foot { margin-top: auto; font-weight: 500; opacity: .85; }

/* ---- Seitenkopf im Inhaltsbereich ------------------------------------ */
.ui-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1em;
  flex-wrap: wrap;
}
.ui-head__title {
  font-family: var(--font-display);
  font-size: 1.6em;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--c-bg-ink);
}
.ui-head__sub { font-size: .95em; color: var(--c-faint); margin-top: .2em; }

/* ---- Bedienelemente --------------------------------------------------- */
.ui-btn {
  display: inline-block;
  background: var(--accent);
  color: #FFF;
  font-size: 1em;
  font-weight: 600;
  padding: .8em 1.3em;
  border-radius: .6em;
  white-space: nowrap;
}
.ui-btn--ink { background: var(--c-bg-ink); }
.ui-btn--ghost {
  background: transparent;
  color: var(--c-text-2);
  border: 1px solid var(--c-line);
}
.ui-btn--block { display: block; text-align: center; }

.ui-eyebrow {
  font-size: .85em;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-faint);
}
.ui-label { font-size: .95em; font-weight: 600; color: var(--c-muted); }

/* ---- Kennzahlenkarten ------------------------------------------------- */
.ui-stats { display: flex; gap: .9em; flex-wrap: wrap; }
.ui-stat {
  flex: 1;
  min-width: 9em;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: .85em;
  padding: 1em 1.2em;
}
.ui-stat__label {
  font-size: .85em;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--c-faint);
}
.ui-stat__value {
  font-family: var(--font-display);
  font-size: 1.85em;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--c-text);
  margin-top: .18em;
}
.ui-stat__delta { font-size: .95em; font-weight: 500; color: var(--accent); margin-top: .2em; }

/* ---- Balkendiagramm --------------------------------------------------
   Die Balken haben eine feste Höhe und werden über scaleY() skaliert.
   Höhenanimation würde Layout auslösen, scaleY läuft auf der GPU. */
.ui-chart {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: .85em;
  padding: 1.2em 1.4em;
}
.ui-chart__plot {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: .6em;
  margin-top: .9em;
  min-height: 5em;
}
.ui-bar {
  flex: 1;
  height: 100%;
  border-radius: .25em .25em 0 0;
  background: var(--accent);
  transform-origin: bottom;
  transform: scaleY(var(--bar, .5));
  opacity: var(--bar-op, 1);
  will-change: transform;
}
/* Tages-/Wochenbalken mit Beschriftung darunter.
   Der Balken füllt die Spalte und wird über scaleY gekürzt – dasselbe Prinzip
   wie bei .ui-bar. Eine Prozenthöhe würde sich hier auf die gesamte Spalte
   inklusive Beschriftung beziehen und überlaufen. */
.ui-days { flex: 1; display: flex; align-items: stretch; gap: .7em; min-height: 5em; }
.ui-day { flex: 1; display: flex; flex-direction: column; gap: .4em; min-height: 0; }
.ui-day__bar {
  flex: 1;
  border-radius: .25em .25em 0 0;
  background: #E2E1DB;
  transform-origin: bottom;
  transform: scaleY(var(--bar, .5));
}
.ui-day__bar.is-peak { background: var(--accent); }
.ui-day__label { font-size: .8em; font-weight: 500; color: var(--c-faint); text-align: center; }
.ui-day__label.is-peak { font-weight: 600; color: #44423B; }

/* ---- Listenzeilen ---------------------------------------------------- */
.ui-list { display: flex; flex-direction: column; gap: .6em; min-height: 0; }
.ui-row {
  display: flex;
  align-items: center;
  gap: .9em;
  padding: .85em 1em;
  border: 1px solid var(--c-line-soft);
  border-radius: .6em;
  background: var(--c-surface);
}
.ui-row.is-selected { border-color: var(--accent); background: #FDFCFA; }
.ui-row__time { font-size: .95em; font-weight: 600; color: var(--c-muted); flex: none; }
.ui-row__main { display: block; min-width: 0; flex: 1; }
.ui-row__title {
  display: block;
  font-size: 1.05em;
  font-weight: 600;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-row__sub { display: block; font-size: .9em; color: var(--c-faint); }

/* ---- Statuszeichen --------------------------------------------------- */
.ui-badge {
  flex: none;
  font-size: .85em;
  font-weight: 600;
  padding: .35em .75em;
  border-radius: 99em;
  white-space: nowrap;
  background: #F1F0EC;
  color: var(--c-muted);
}
.ui-badge--ok   { background: #EDF2EE; color: #4E6B54; }
.ui-badge--warn { background: #F7F1E3; color: #856427; }
.ui-badge--crit { background: #F9EDEB; color: #8F4239; }
.ui-badge--live { background: var(--accent-soft); color: var(--accent); }

/* ---- Detailspalte ---------------------------------------------------- */
.ui-panel {
  flex: .85;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 1.5em 1.6em;
  background: #FCFCFB;
  border-left: 1px solid var(--c-line-soft);
}
.ui-panel__title {
  font-family: var(--font-display);
  font-size: 1.15em;
  font-weight: 700;
  color: var(--c-bg-ink);
}
.ui-panel__sub { font-size: .9em; color: var(--c-faint); margin-top: .2em; }
.ui-panel__foot { margin-top: auto; }

.ui-kv { display: flex; flex-direction: column; gap: .55em; margin-top: 1.1em; }
.ui-kv__row { display: flex; justify-content: space-between; gap: .8em; }
.ui-kv__key { font-size: .9em; font-weight: 500; color: var(--c-faint); }
.ui-kv__val { font-size: .9em; font-weight: 600; color: #44423B; text-align: right; }

/* ---- Fortschritt in Etappen ------------------------------------------ */
.ui-steps { display: flex; align-items: center; gap: .35em; margin-top: 1.2em; }
.ui-steps__seg { height: .3em; flex: 1; border-radius: 99em; background: var(--c-line); }
.ui-steps__seg.is-done { background: var(--accent); }
.ui-steps__note { font-size: .85em; font-weight: 500; color: var(--c-faint); margin-top: .45em; }

/* ---- Tabelle ---------------------------------------------------------
   Für Auftragsübersicht und Wasserkontrolle. Zahlen rechtsbündig und
   tabellarisch – so liest eine Sachbearbeiterin eine Spalte, keine Wolke. */
.ui-table { width: 100%; border-collapse: collapse; }
.ui-table th,
.ui-table td {
  text-align: left;
  padding: .8em 1em;
  border-bottom: 1px solid var(--c-line-soft);
  white-space: nowrap;
}
.ui-table th {
  font-size: .85em;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--c-faint);
  background: #FCFCFB;
  position: sticky;
  top: 0;
}
.ui-table td { font-size: 1em; font-weight: 500; color: #44423B; }
.ui-table td.is-key { font-weight: 600; color: var(--c-text); }
.ui-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.ui-table tbody tr:last-child td { border-bottom: 0; }
.ui-table tbody tr.is-selected { background: #FDFCFA; }
.ui-table__wrap { flex: 1; overflow: hidden; }

/* ---- Werkzeugleiste über Tabellen ------------------------------------ */
.ui-toolbar {
  display: flex;
  align-items: center;
  gap: .8em;
  padding: 1em 1.4em;
  border-bottom: 1px solid var(--c-line-soft);
  flex-wrap: wrap;
}
.ui-chip {
  font-size: .95em;
  font-weight: 500;
  color: var(--c-muted);
  background: #F4F3EF;
  border-radius: 99em;
  padding: .45em 1em;
  white-space: nowrap;
}
.ui-chip.is-active { background: var(--c-bg-ink); color: #FFF; font-weight: 600; }
.ui-toolbar__spacer { flex: 1; }

/* ---- Formular / Dialog ----------------------------------------------- */
.ui-dialog { padding: 1.6em 1.8em 1.8em; }
.ui-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1em;
  padding-bottom: 1.2em;
  border-bottom: 1px solid var(--c-line-soft);
}
.ui-dialog__title {
  font-family: var(--font-display);
  font-size: 1.4em;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--c-bg-ink);
}
.ui-dialog__sub { font-size: .95em; color: var(--c-faint); margin-top: .25em; }
.ui-dialog__close { font-size: 1.2em; color: var(--c-faint); line-height: 1; }
.ui-dialog__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .7em;
  margin-top: 1.5em;
  padding-top: 1.2em;
  border-top: 1px solid var(--c-line-soft);
}

.ui-fields { display: flex; flex-direction: column; gap: 1em; margin-top: 1.3em; }
.ui-fields--two { flex-direction: row; flex-wrap: wrap; }
.ui-field { flex: 1; min-width: 8em; }
.ui-field__label {
  display: block;
  font-size: .9em;
  font-weight: 600;
  color: var(--c-muted);
  margin-bottom: .4em;
}
.ui-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6em;
  min-height: 2.6em;
  padding: .55em .9em;
  border: 1px solid var(--c-line);
  border-radius: .55em;
  background: var(--c-surface);
  font-size: 1em;
  font-weight: 500;
  color: var(--c-text);
}
.ui-input.is-focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ui-input--select::after { content: "⌄"; color: var(--c-faint); line-height: 1; }
.ui-input__hint { font-size: .9em; font-weight: 500; color: var(--c-faint); }
.ui-note {
  display: flex;
  align-items: center;
  gap: .6em;
  margin-top: 1.1em;
  padding: .8em 1em;
  border-radius: .55em;
  background: #F7F1E3;
  font-size: .95em;
  font-weight: 500;
  color: #856427;
}
.ui-check {
  display: flex;
  align-items: center;
  gap: .6em;
  font-size: .95em;
  font-weight: 500;
  color: #44423B;
}
.ui-check::before {
  content: "✓";
  display: grid;
  place-items: center;
  width: 1.25em; height: 1.25em;
  flex: none;
  border-radius: .3em;
  background: var(--accent);
  color: #FFF;
  font-size: .8em;
}

/* ---- Signaturfeld (Rapport) ------------------------------------------ */
.ui-sign {
  margin-top: 1em;
  height: 4.5em;
  border: 1px dashed var(--c-line);
  border-radius: .55em;
  display: grid;
  place-items: center;
  background: #FCFCFB;
}
.ui-sign svg { width: 60%; height: auto; }

/* ---- Belegungsraster (Campingreservation) ---------------------------
   Ein echtes Raster aus Platz × Nacht. Zusammenhängende Buchungen laufen
   über mehrere Spalten – genau das braucht ein Platzwart am Empfang. */
.ui-plan { padding: 1.2em 1.4em 1.4em; }
.ui-plan__grid {
  display: grid;
  grid-template-columns: 4.5em repeat(7, 1fr);
  gap: .3em;
  margin-top: .9em;
}
.ui-plan__head,
.ui-plan__side {
  font-size: .85em;
  font-weight: 600;
  color: var(--c-faint);
  display: flex;
  align-items: center;
}
.ui-plan__head { justify-content: center; }
.ui-plan__cell {
  height: 1.9em;
  border-radius: .3em;
  background: #F4F3EF;
}
.ui-plan__book {
  height: 1.9em;
  border-radius: .3em;
  background: var(--accent);
  color: #FFF;
  font-size: .85em;
  font-weight: 600;
  display: flex;
  align-items: center;
  padding: 0 .6em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ui-plan__book--soft { background: var(--accent-soft); color: var(--accent); }
.ui-plan__book--ink  { background: #4E6B54; color: #FFF; }
.ui-plan__legend {
  display: flex;
  gap: 1.2em;
  flex-wrap: wrap;
  margin-top: 1.1em;
  padding-top: 1em;
  border-top: 1px solid var(--c-line-soft);
}

/* ---- Messwertzeile (Wasserkontrolle) --------------------------------
   Der Sollbereich wird als Band gezeichnet, der Messwert als Marke darauf.
   "4.2 mg/l" allein sagt nichts – die Lage im Band sagt alles. */
.ui-gauge { display: flex; flex-direction: column; gap: .35em; min-width: 6em; }
.ui-gauge__value { font-size: 1em; font-weight: 600; color: var(--c-text); }
.ui-gauge__value.is-out { color: #8F4239; }
.ui-gauge__track {
  display: block;
  position: relative;
  height: .35em;
  border-radius: 99em;
  background: var(--c-line);
}
.ui-gauge__band {
  position: absolute;
  inset: 0 auto 0 var(--band-from, 20%);
  width: var(--band-w, 45%);
  border-radius: 99em;
  background: #D6E2D9;
}
.ui-gauge__pin {
  position: absolute;
  top: 50%;
  left: var(--pin, 50%);
  width: .55em; height: .55em;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--c-bg-ink);
  box-shadow: 0 0 0 .18em var(--c-surface);
}
.ui-gauge__pin.is-out { background: #8F4239; }

/* ==========================================================================
   Verhalten auf schmalen Containern
   Unter ~460px Bildschirmbreite werden Nebenspalten ausgeblendet, statt die
   Schrift weiter zu verkleinern. Ein Mockup, das man nicht lesen kann,
   beweist nichts.
   ========================================================================== */
@container (max-width: 460px) {
  .app__side,
  .ui-panel,
  .app__tabs,
  .app__search { display: none; }
  .app__main { padding: 1.2em 1.2em; gap: 1em; }
  .ui-stat:nth-child(n+3) { display: none; }
}

/* Unter ~400px wird nicht weiter verkleinert, sondern weggelassen:
   engere Innenmasse und weniger Zeilen. Ein Ausschnitt, den man lesen kann,
   überzeugt mehr als eine vollständige Ansicht, die man erraten muss. */
@container (max-width: 400px) {
  .app__main { padding: 1em; gap: .8em; }
  .ui-head__title { font-size: 1.35em; }
  .ui-stat { padding: .7em .85em; }
  .ui-chart { padding: .85em 1em; }
  .ui-chart__plot { min-height: 3.5em; margin-top: .6em; }
  .ui-days { min-height: 3.5em; }
  .ui-list > .ui-row:nth-child(n+4) { display: none; }
  .ui-toolbar { padding: .8em 1em; gap: .6em; }
}
@container (max-width: 380px) {
  /* Spalten von rechts wegnehmen – die vordersten tragen die Bedeutung. */
  .ui-table th:nth-child(n+4),
  .ui-table td:nth-child(n+4) { display: none; }

  /* Das Belegungsraster behält alle sieben Nächte: Buchungen laufen über
     mehrere Spalten, ein Ausblenden einzelner Zellen würde es zerreissen.
     Stattdessen schrumpft nur die Beschriftungsspalte. */
  .ui-plan__grid { grid-template-columns: 3em repeat(7, 1fr); gap: .2em; }
  .ui-plan__book { padding: 0 .3em; }
}