/*
 * WifiPilot - gemeinsame Gestaltung fuer Produktseite und Auswertung.
 *
 * Farbrollen statt roher Farbwerte: die Umschaltung zwischen hell und dunkel
 * passiert an genau einer Stelle. Die Statusfarben sind bewusst NICHT
 * umschaltbar - eine Ampel, deren Rot im Dunkelmodus ein anderes Rot ist,
 * verliert ihre Bedeutung.
 */

:root {
  color-scheme: light;

  --flaeche:        #fcfcfb;   /* Karten, Diagrammgrund */
  --ebene:          #f9f9f7;   /* Seitenhintergrund */
  --ebene-erhoben:  #ffffff;
  --schrift:        #0b0b0b;
  --schrift-2:      #52514e;
  --schrift-leise:  #898781;
  --gitter:         #e1e0d9;
  --achse:          #c3c2b7;
  --rand:           rgba(11, 11, 11, 0.10);
  --schatten:       0 1px 2px rgba(11, 11, 11, 0.05), 0 4px 12px rgba(11, 11, 11, 0.04);

  /* Reihen fuer die Zeitdiagramme - je Diagramm nur eine, der Titel benennt sie. */
  --reihe-1: #2a78d6;   /* WLAN-Signal */
  --reihe-2: #eb6834;   /* Antwortzeit */
  --reihe-3: #1baf7a;   /* Mobilfunk */

  /* Statusfarben: feste Werte, in beiden Modi identisch. */
  --gut:            #0ca30c;
  --langsam:        #fab219;
  --portal:         #ec835a;
  --kein-internet:  #d03b3b;
  --kein-netz:      #d03b3b;   /* wird zusaetzlich schraffiert */
  --keine-daten:    #e1e0d9;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='hell']) {
    color-scheme: dark;
    --flaeche:       #1a1a19;
    --ebene:         #0d0d0d;
    --ebene-erhoben: #232322;
    --schrift:       #ffffff;
    --schrift-2:     #c3c2b7;
    --schrift-leise: #898781;
    --gitter:        #2c2c2a;
    --achse:         #383835;
    --rand:          rgba(255, 255, 255, 0.10);
    --schatten:      0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
    --reihe-1:       #3987e5;
    --reihe-2:       #d95926;
    --reihe-3:       #199e70;
    --keine-daten:   #2c2c2a;
  }
}

:root[data-theme='dunkel'] {
  color-scheme: dark;
  --flaeche:       #1a1a19;
  --ebene:         #0d0d0d;
  --ebene-erhoben: #232322;
  --schrift:       #ffffff;
  --schrift-2:     #c3c2b7;
  --schrift-leise: #898781;
  --gitter:        #2c2c2a;
  --achse:         #383835;
  --rand:          rgba(255, 255, 255, 0.10);
  --schatten:      0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
  --reihe-1:       #3987e5;
  --reihe-2:       #d95926;
  --reihe-3:       #199e70;
  --keine-daten:   #2c2c2a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--ebene);
  color: var(--schrift);
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; font-weight: 650; }
h1 { font-size: 1.6rem; letter-spacing: -0.01em; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p  { margin: 0 0 .75rem; }

a { color: var(--reihe-1); }

code, .einheit {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .875em;
}

.hinweis { color: var(--schrift-2); font-size: .875rem; }
.leise   { color: var(--schrift-leise); }

.karte {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 12px;
  padding: 1rem 1.15rem 1.15rem;
  box-shadow: var(--schatten);
  margin-bottom: 1rem;
}

.karte > h2 { display: flex; align-items: baseline; gap: .6rem; }
.karte > h2 .leise { font-size: .8rem; font-weight: 400; }

/* --- Bedienelemente ------------------------------------------------------ */

button, .knopf {
  font: inherit;
  font-weight: 550;
  padding: .45rem .9rem;
  border-radius: 8px;
  border: 1px solid var(--rand);
  background: var(--ebene-erhoben);
  color: var(--schrift);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button:hover, .knopf:hover { border-color: var(--achse); }
button:disabled { opacity: .5; cursor: default; }

button.haupt, .knopf.haupt {
  background: var(--reihe-1);
  border-color: var(--reihe-1);
  color: #fff;
}

button.gefahr { color: var(--kein-internet); }

button.aktiv {
  background: var(--reihe-1);
  border-color: var(--reihe-1);
  color: #fff;
}

input[type='text'], input[type='password'], input[type='datetime-local'], select {
  font: inherit;
  padding: .45rem .6rem;
  border-radius: 8px;
  border: 1px solid var(--rand);
  background: var(--ebene-erhoben);
  color: var(--schrift);
}

.reihe { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* --- Kennzahlen ---------------------------------------------------------- */

.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .75rem;
  margin-bottom: 1rem;
}

.kachel {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 12px;
  padding: .85rem 1rem;
  box-shadow: var(--schatten);
}
.kachel .wert { font-size: 1.7rem; font-weight: 650; letter-spacing: -0.02em; display: block; }
.kachel .titel { color: var(--schrift-2); font-size: .8rem; }
.kachel .fuss { color: var(--schrift-leise); font-size: .75rem; }

/* --- Ampelband ----------------------------------------------------------- */

.ampelband { width: 100%; height: 34px; display: block; border-radius: 6px; overflow: hidden; }
.ampelzeile { margin-bottom: .9rem; }
.ampelzeile .kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.ampelzeile .kopf strong { font-size: .95rem; }

.zeitachse {
  display: flex;
  justify-content: space-between;
  color: var(--schrift-leise);
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
  margin-top: .15rem;
}

.legende { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: .6rem; font-size: .8rem; }
.legende span { display: inline-flex; align-items: center; gap: .35rem; color: var(--schrift-2); }
.legende i {
  width: 14px; height: 14px; border-radius: 3px;
  border: 1px solid var(--rand);
  display: inline-block;
}

/* --- Diagramme ----------------------------------------------------------- */

.diagramm { width: 100%; }
.uplot { font-family: inherit !important; }
.u-legend { font-size: .8rem; }

/* --- Karte --------------------------------------------------------------- */

#karte { height: 420px; border-radius: 10px; border: 1px solid var(--rand); }
/* Ohne Kartenkacheln aus dem Netz ist der Hintergrund die einzige Fläche –
   er muss dem Modus folgen, sonst leuchtet im Dunkeln ein weißer Kasten. */
.leaflet-container { background: var(--gitter); font: inherit; }
/* OpenStreetMap-Kacheln sind hell gezeichnet. Im Dunkelmodus wären sie ein
   Scheinwerfer neben allem anderen – der Filter dreht sie ins Dunkle, ohne
   die Route zu berühren (die liegt in einer eigenen Ebene darüber). */
:root[data-theme='dunkel'] .leaflet-tile-container.kacheln,
:root[data-theme='dunkel'] .kacheln {
  filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) saturate(.7);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='hell']) .leaflet-tile-container.kacheln,
  :root:not([data-theme='hell']) .kacheln {
    filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) saturate(.7);
  }
}

.leaflet-control-attribution {
  background: color-mix(in srgb, var(--flaeche) 85%, transparent) !important;
  color: var(--schrift-leise) !important;
  font-size: .68rem;
}
.leaflet-control-attribution a { color: var(--schrift-2) !important; }

.leaflet-tooltip {
  background: var(--flaeche); color: var(--schrift);
  border-color: var(--rand); box-shadow: var(--schatten);
}
.leaflet-tooltip-left::before { border-left-color: var(--rand); }
.leaflet-tooltip-right::before { border-right-color: var(--rand); }
.leaflet-bar a {
  background: var(--flaeche); color: var(--schrift); border-bottom-color: var(--rand);
}
.leaflet-bar a:hover { background: var(--ebene-erhoben); color: var(--schrift); }

/* --- Tabellen ------------------------------------------------------------ */

.tabellenrahmen { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: .875rem; }
th, td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--gitter); white-space: nowrap; }
th { color: var(--schrift-2); font-weight: 550; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--ebene); }

.marke {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .8rem; font-weight: 550;
  padding: .1rem .45rem; border-radius: 5px;
  border: 1px solid var(--rand);
}
.marke i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* --- Stundenprofil ------------------------------------------------------- */

.stunden { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; align-items: end; height: 130px; }
.stunden .saeule { position: relative; height: 100%; display: flex; align-items: flex-end; }
.stunden .saeule > div { width: 100%; border-radius: 4px 4px 0 0; min-height: 2px; }
.stundenachse { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; font-size: .62rem; color: var(--schrift-leise); text-align: center; margin-top: .25rem; font-variant-numeric: tabular-nums; }

/* --- Ursachenbalken ------------------------------------------------------ */

.ursachen { display: grid; gap: .4rem; }
.ursache { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: center; font-size: .85rem; }
.ursache .balken { height: 8px; border-radius: 4px; background: var(--gitter); overflow: hidden; margin-top: .2rem; }
.ursache .balken > div { height: 100%; border-radius: 4px; }

/* --- Anordnung ----------------------------------------------------------- */

.huelle { max-width: 1240px; margin: 0 auto; padding: 1.25rem 1rem 4rem; }

.kopfleiste {
  position: sticky; top: 0; z-index: 500;
  background: var(--ebene);
  border-bottom: 1px solid var(--rand);
  padding: .6rem 1rem;
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
}
.kopfleiste .marke-name { font-weight: 700; letter-spacing: -0.01em; margin-right: .5rem; }
.kopfleiste .schub { margin-left: auto; }

.reiter { display: flex; gap: .25rem; border-bottom: 1px solid var(--rand); margin-bottom: 1rem; }
.reiter button {
  border: none; background: none; border-radius: 0;
  border-bottom: 2px solid transparent;
  color: var(--schrift-2); padding: .5rem .8rem;
}
.reiter button.aktiv { color: var(--schrift); border-bottom-color: var(--reihe-1); background: none; }

.zwei-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 860px) { .zwei-spalten { grid-template-columns: 1fr; } }

.mitte { max-width: 420px; margin: 12vh auto; }

.hinweisfeld {
  border-left: 3px solid var(--langsam);
  background: color-mix(in srgb, var(--langsam) 8%, transparent);
  padding: .6rem .8rem; border-radius: 0 8px 8px 0; font-size: .875rem;
  margin-bottom: .75rem;
}
.hinweisfeld.schlimm { border-left-color: var(--kein-internet); background: color-mix(in srgb, var(--kein-internet) 8%, transparent); }

.lade { color: var(--schrift-leise); padding: 2rem; text-align: center; }