/* ====================================================================
   WuKo-Tracker — visuelle Identität

   Ausgangslage: die Anwendung lief auf Materialize, also auf Googles
   Material Design. Genau daher kam der Eindruck "sieht aus wie ein
   Default-Template" — es WAR eines.

   Materialize bleibt als Raster- und Komponentengerüst bestehen (sonst
   müssten siebzehn Views umgebaut werden), aber die komplette sichtbare
   Schicht wird hier ersetzt: Schrift, Farbe, Form, Flächen, Formulare.
   Deshalb steht diese Datei NACH materialize.min.css und arbeitet an
   vielen Stellen mit !important — Materialize setzt seine Farbklassen
   selbst so.

   Gestaltungsidee: das Kontrollschild.
   Geprägte Zeichen in Tiefschwarz auf leicht warmem Reflexweiss, das
   Rot des Schweizerkreuzes als einzige Signalfarbe, harte Kanten statt
   Material-Schatten.
   ==================================================================== */

:root {
  /* --- Flächen ------------------------------------------------------ */
  --papier:      #e9e7e2;  /* Seitengrund, etwas dunkler als das Schild */
  --schild:      #f6f4f0;  /* Kartenfläche = Reflexfolie                */
  --schild-rein: #fffefb;  /* hervorgehobene Fläche                     */
  --linie:       #d8d3ca;  /* Haarlinien                                */
  --linie-kraeftig: #bdb6aa;

  /* --- Schrift ------------------------------------------------------ */
  --tinte:       #15181d;  /* geprägte Zeichen                          */
  --tinte-matt:  #5a6068;
  --tinte-leise: #8c9199;

  /* --- Signal ------------------------------------------------------- */
  --rot:         #d8232a;  /* Schweizerkreuz                            */
  --rot-dunkel:  #a81a20;
  --rot-blass:   #fbeceb;

  --gruen:       #1f7a3d;
  --gruen-blass: #e8f3ea;
  --gelb:        #b3791a;
  --gelb-blass:  #fbf2e0;
  --blau:        #1f5f8b;
  --blau-blass:  #e8f0f6;

  /* --- Form --------------------------------------------------------- */
  --radius:      3px;      /* Kante eines Schilds, nicht Material-Pille */
  --radius-gross: 6px;
  --schatten:    0 1px 2px rgba(21, 24, 29, .06);
  --schatten-hoch: 0 4px 14px rgba(21, 24, 29, .10);

  --font-ui: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-zahl: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* ====================================================================
   Grundlagen
   ==================================================================== */

html { background: var(--papier); }

body {
  font-family: var(--font-ui) !important;
  background: var(--papier) !important;
  color: var(--tinte);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Diese Anwendung besteht fast nur aus Zahlen — Ziffern müssen
   untereinander stehen, sonst flimmern Tabellen beim Überfliegen. */
body, table, input, select, .kpi .num, .detail-price {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--tinte);
  letter-spacing: -0.015em;
}

h4 { font-size: 1.7rem; margin: 0 0 .35em; }
h5 { font-size: 1.22rem; margin: 2em 0 .6em; font-weight: 600; }
h6 { font-size: 1.02rem; }

a { color: var(--rot); text-decoration: none; }
a:hover { color: var(--rot-dunkel); text-decoration: underline; text-underline-offset: 2px; }

/* Materialize färbt "grey-text" grau-blau; hier die eigene Skala. */
.grey-text { color: var(--tinte-leise) !important; }

::selection { background: var(--rot); color: #fff; }

/* ====================================================================
   Navigation — dunkle Leiste mit rotem Abschluss, wie der Rand eines
   Schilds. Kein Material-Schatten, sondern eine harte Kante.
   ==================================================================== */

nav, nav .nav-wrapper {
  background: var(--tinte) !important;
  box-shadow: none !important;
  height: 60px;
  line-height: 60px;
}

nav { border-bottom: 3px solid var(--rot); }

nav .brand-logo {
  font-weight: 600;
  font-size: 1.16rem !important;
  letter-spacing: -0.01em;
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  padding-left: 4px;
}

/* Rotes Quadrat vor dem Namen — das Kreuzfeld des Schilds. */
nav .brand-logo::before {
  content: '';
  width: 15px;
  height: 15px;
  border-radius: 2px;
  background: var(--rot);
  flex: 0 0 auto;
}

nav ul a {
  font-size: .89rem;
  font-weight: 450;
  color: rgba(255, 255, 255, .78) !important;
  padding: 0 13px;
  transition: color .12s, background-color .12s;
}
nav ul a:hover { background: rgba(255, 255, 255, .07) !important; color: #fff !important; }
nav ul a.aktiv { color: #fff !important; box-shadow: inset 0 -3px 0 var(--rot); }

nav .material-icons { font-size: 19px; }

/* Seitenmenü auf kleinen Schirmen */
.sidenav {
  background: var(--tinte);
  width: 280px;
}
.sidenav li > a {
  color: rgba(255, 255, 255, .82) !important;
  font-weight: 450;
  font-size: .95rem;
}
.sidenav li > a:hover { background: rgba(255, 255, 255, .07); }
.sidenav li > a > i.material-icons { color: rgba(255, 255, 255, .5) !important; }
.sidenav .subheader {
  color: var(--tinte-leise) !important;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 600;
}
.sidenav .divider { background: rgba(255, 255, 255, .12); }

.nav-badge {
  background: var(--rot) !important;
  font-family: var(--font-zahl);
  font-size: 10px !important;
  font-weight: 600;
}

/* ====================================================================
   Flächen — Karten sind bordierte Schilder, keine schwebenden Blätter
   ==================================================================== */

.card, .card-panel {
  background: var(--schild);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten) !important;
}
.card .card-content { padding: 20px 22px; }

.empty-hint {
  background: var(--schild) !important;
  border: 1px dashed var(--linie-kraeftig);
  border-radius: var(--radius-gross);
  color: var(--tinte-matt) !important;
}

/* ====================================================================
   Schaltflächen — flach, eckig, in Satzschrift.
   Material setzt Grossbuchstaben, Pillenform und zwei Schatten; genau
   diese drei Dinge machen den generischen Eindruck aus.
   ==================================================================== */

.btn, .btn-small, .btn-large, .btn-flat {
  font-family: var(--font-ui);
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 500;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  transition: background-color .12s, border-color .12s, color .12s;
}

.btn, .btn-small, .btn-large {
  background: var(--tinte) !important;
  color: #fff !important;
  border: 1px solid var(--tinte);
  height: 38px;
  line-height: 36px;
  padding: 0 18px;
}
.btn:hover, .btn-small:hover, .btn-large:hover { background: #000 !important; }

.btn-small { height: 33px; line-height: 31px; font-size: .86rem; padding: 0 14px; }

.btn-flat {
  color: var(--tinte-matt) !important;
  background: transparent !important;
  border: 1px solid transparent;
  height: 36px;
  line-height: 34px;
}
.btn-flat:hover { background: rgba(21, 24, 29, .05) !important; color: var(--tinte) !important; }

/* Die Farbklassen aus den Views auf die eigene Palette umbiegen, damit
   nicht in siebzehn Dateien Klassen getauscht werden müssen. */
.btn.indigo, .btn-small.indigo, .btn-large.indigo,
.btn.red, .btn-small.red {
  background: var(--rot) !important;
  border-color: var(--rot);
  color: #fff !important;
}
.btn.indigo:hover, .btn-small.indigo:hover, .btn.red:hover, .btn-small.red:hover {
  background: var(--rot-dunkel) !important;
  border-color: var(--rot-dunkel);
}

.btn.grey, .btn-small.grey, .btn.grey.lighten-1, .btn-small.grey.lighten-1,
.btn.blue-grey, .btn-small.blue-grey {
  background: var(--schild-rein) !important;
  color: var(--tinte-matt) !important;
  border: 1px solid var(--linie-kraeftig);
}
.btn.grey:hover, .btn-small.grey:hover, .btn.grey.lighten-1:hover,
.btn-small.grey.lighten-1:hover, .btn.blue-grey:hover, .btn-small.blue-grey:hover {
  background: var(--papier) !important;
  color: var(--tinte) !important;
}

.btn.amber, .btn-small.amber, .btn.amber.darken-2, .btn-small.amber.darken-2 {
  background: var(--gelb) !important;
  border-color: var(--gelb);
  color: #fff !important;
}
.btn.green, .btn-small.green { background: var(--gruen) !important; border-color: var(--gruen); color: #fff !important; }

/* Materialize' Wellen-Effekt wirkt hier fehl am Platz. */
.waves-effect .waves-ripple { background: rgba(21, 24, 29, .12) !important; }

/* ====================================================================
   Marken (Chips) — bordierte Etiketten statt gefüllter Pillen
   ==================================================================== */

.chip {
  background: var(--schild-rein) !important;
  color: var(--tinte-matt) !important;
  border: 1px solid var(--linie-kraeftig);
  border-radius: var(--radius) !important;
  height: 23px;
  line-height: 21px;
  font-size: .78rem;
  font-weight: 500;
  padding: 0 9px;
  margin: 0 3px 3px 0;
}

.chip.green, .chip.green.lighten-4, .chip.light-green.lighten-4 {
  background: var(--gruen-blass) !important; color: var(--gruen) !important; border-color: #b9d9c2;
}
.chip.red, .chip.red.lighten-4, .chip.deep-orange.lighten-4 {
  background: var(--rot-blass) !important; color: var(--rot-dunkel) !important; border-color: #f0c4c2;
}
.chip.amber, .chip.amber.lighten-4, .chip.orange.lighten-3, .chip.orange.lighten-4, .chip.yellow.lighten-4 {
  background: var(--gelb-blass) !important; color: var(--gelb) !important; border-color: #e8d3a8;
}
.chip.blue.lighten-4, .chip.blue.lighten-5, .chip.light-blue.lighten-4,
.chip.indigo.lighten-4, .chip.deep-purple.lighten-4, .chip.cyan.lighten-4 {
  background: var(--blau-blass) !important; color: var(--blau) !important; border-color: #bcd3e4;
}
.chip.grey, .chip.grey.lighten-2, .chip.blue-grey.lighten-4 {
  background: var(--papier) !important; color: var(--tinte-matt) !important; border-color: var(--linie-kraeftig);
}

/* ====================================================================
   Tabellen — Registerdaten: Haarlinien, ruhige Zebrastreifen
   ==================================================================== */

table { border-collapse: collapse; }

table.striped > tbody > tr:nth-child(odd),
table > tbody > tr:nth-child(odd) { background: transparent; }

table thead th {
  font-size: .74rem !important;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 600;
  color: var(--tinte-leise);
  border-bottom: 1px solid var(--linie-kraeftig) !important;
  padding: 9px 12px;
  white-space: nowrap;
}

table tbody td { padding: 11px 12px; border-bottom: 1px solid var(--linie); }
table tbody tr:last-child td { border-bottom: none; }
table tbody tr { transition: background-color .1s; }
table tbody tr:hover { background: rgba(216, 35, 42, .035); }

/* Die Datentabellen sitzen auf eigener Fläche, damit sie sich vom
   Seitengrund abheben, ohne einen Rahmen um jede Zeile zu brauchen. */
.table-scroll {
  background: var(--schild);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ====================================================================
   Formulare — Materialize benutzt Unterstrich-Felder, das wirkt am
   stärksten nach Material. Hier bordierte Felder mit rotem Fokus.
   ==================================================================== */

input[type=text], input[type=password], input[type=email],
input[type=number], input[type=search], textarea.materialize-textarea,
select.browser-default {
  background: var(--schild-rein) !important;
  border: 1px solid var(--linie-kraeftig) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  padding: 0 11px !important;
  height: 38px !important;
  box-sizing: border-box !important;
  color: var(--tinte);
  font-family: var(--font-ui);
  font-size: .93rem;
  width: 100%;
  transition: border-color .12s, box-shadow .12s;
}

input[type=text]:focus, input[type=password]:focus, input[type=email]:focus,
input[type=number]:focus, input[type=search]:focus,
textarea.materialize-textarea:focus, select.browser-default:focus {
  border-color: var(--rot) !important;
  box-shadow: 0 0 0 3px rgba(216, 35, 42, .13) !important;
  outline: none;
}

.input-field > label {
  color: var(--tinte-leise) !important;
  font-size: .82rem;
}
/* Materialize schiebt Label über das Feld; mit bordierten Feldern
   passt das nicht mehr — Label steht fest darüber. */
.input-field > label:not(.label-icon).active {
  transform: translateY(-16px) scale(.86);
}

.filter-label {
  display: block;
  font-size: .76rem;
  font-weight: 500;
  color: var(--tinte-matt);
  margin-bottom: 3px;
  letter-spacing: .01em;
}

/* Kontrollkästchen in der Signalfarbe */
[type="checkbox"].filled-in:checked + span:not(.lever)::after {
  background: var(--rot) !important;
  border-color: var(--rot) !important;
  border-radius: 2px;
}
[type="checkbox"] + span:not(.lever)::after { border-radius: 2px; }

/* Aufklappbare Bereiche */
details > summary {
  cursor: pointer;
  color: var(--tinte-matt);
  font-weight: 500;
}
details > summary:hover { color: var(--rot); }

/* ====================================================================
   Filterleisten
   ==================================================================== */

.filter-row {
  background: var(--schild);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: 14px 16px 16px;
  margin-bottom: 18px;
}
.filter-actions { display: flex; align-items: flex-end; }

.filter-card { background: var(--schild); }

/* Umschaltleiste (Laufend / Vorschau / POI …) als zusammenhängende
   Gruppe statt loser Knöpfe. */
.scope-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.scope-bar .btn-small {
  background: var(--schild-rein) !important;
  color: var(--tinte-matt) !important;
  border: 1px solid var(--linie-kraeftig);
}
.scope-bar .btn-small.indigo {
  background: var(--tinte) !important;
  border-color: var(--tinte);
  color: #fff !important;
}

/* ====================================================================
   Kleinteile
   ==================================================================== */

.badge-special { color: var(--gelb) !important; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 2em 0 .7em;
}
.section-head h5 { margin: 0; }

hr { border: none; border-top: 1px solid var(--linie); margin: 24px 0; }

.dropdown-content {
  background: var(--schild-rein);
  border: 1px solid var(--linie-kraeftig);
  border-radius: var(--radius);
  box-shadow: var(--schatten-hoch);
}
.dropdown-content li > a, .dropdown-content li > span {
  color: var(--tinte) !important;
  font-size: .92rem;
}
.dropdown-content li:hover { background: var(--papier); }

/* Fussbereich der Seite */
main.container { width: 92%; max-width: 1240px; }

@media (max-width: 600px) {
  body { font-size: 14.5px; }
  h4 { font-size: 1.42rem; }
  h5 { font-size: 1.1rem; }
  main.container { width: 94%; }
}

/* ====================================================================
   Stufen-Editor

   Eine Regel je Block. Der Block traegt links einen farbigen Streifen
   in der Farbe seiner Stufe — so ist die Rangfolge beim Ueberfliegen
   ablesbar, ohne jede Zeile zu lesen.
   ==================================================================== */

.regel-block {
  background: var(--schild);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  margin-bottom: 10px;
  overflow: hidden;
}

.regel-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--schild-rein);
  border-bottom: 1px solid var(--linie);
}

.regel-nr {
  font-family: var(--font-zahl);
  font-size: .78rem;
  font-weight: 600;
  color: var(--tinte-leise);
  background: var(--papier);
  border-radius: var(--radius);
  min-width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  flex: 0 0 auto;
}

.regel-an { flex: 0 0 auto; }
.regel-an span { font-size: .85rem; padding-left: 26px; }

.regel-pfeil { color: var(--stufe-farbe, var(--tinte-leise)); font-weight: 700; }

.regel-stufe {
  width: auto !important;
  min-width: 200px;
  flex: 0 1 auto;
  height: 32px !important;
}

.regel-aktionen { margin-left: auto; display: flex; gap: 2px; }

.btn-winzig {
  height: 28px !important;
  line-height: 26px !important;
  padding: 0 9px !important;
  min-width: 0;
  font-size: 1rem;
}
.btn-winzig[disabled] { opacity: .3; pointer-events: none; }
.btn-winzig.loeschen:hover { color: var(--rot) !important; background: var(--rot-blass) !important; }

.regel-koerper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 14px;
}
.regel-spalte { flex: 0 0 auto; min-width: 140px; }
.regel-spalte--breit { flex: 1 1 360px; min-width: 300px; }

.bedingungs-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 2px 14px;
}

.bedingung {
  display: block;
  padding: 3px 0;
  font-size: .88rem;
  line-height: 1.35;
}
.bedingung span { padding-left: 26px; display: block; }
.bedingung.ist-aktiv span { color: var(--tinte); font-weight: 500; }

.bed-param {
  width: 62px !important;
  height: 26px !important;
  padding: 0 6px !important;
  margin-left: 4px;
  display: inline-block !important;
  font-size: .85rem;
}

.bed-hinweis {
  display: block;
  font-size: .76rem;
  font-style: normal;
  line-height: 1.3;
}

.regel-mehrfach {
  height: auto !important;
  padding: 4px !important;
  font-size: .86rem;
}

.regel-fuss {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 14px 0 6px;
}

/* --- Probe: wie die Regeln gerade wirken --- */
.stufen-probe {
  background: var(--schild);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: 14px 16px;
  margin-top: 14px;
  max-width: 460px;
}
.probe-tabelle { width: 100%; }
.probe-tabelle td, .probe-tabelle th { padding: 5px 8px; }

.stufen-marke {
  display: inline-block;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .03em;
  padding: 1px 8px;
  border-radius: var(--radius);
  text-transform: capitalize;
  color: #3a2f12;
}
.stufen-marke--schimmer { background: linear-gradient(135deg, #fff3c4, #ffd76e); }
.stufen-marke--diamant  { background: linear-gradient(135deg, #dff3ff, #8fd3f4); color: #0d3a4d; }
.stufen-marke--gold     { background: linear-gradient(135deg, #f2d27a, #c9a227); }
.stufen-marke--silber   { background: linear-gradient(135deg, #e8e9ec, #a9adb5); color: #34383d; }
.stufen-marke--bronze   { background: linear-gradient(135deg, #c98a52, #8a5a2b); color: #fff; }

@media (max-width: 700px) {
  .regel-koerper { gap: 14px; }
  .regel-spalte, .regel-spalte--breit { flex: 1 1 100%; min-width: 0; }
  .bedingungs-gitter { grid-template-columns: 1fr; }
  .regel-aktionen { margin-left: 0; width: 100%; justify-content: flex-end; }
}