/* Gemeinsame Grundlage für Dashboard und Login, übernommen aus dem SeKo-Mailer:
 * Corporate Design der RWTH Aachen, Originalwerte der Hausfarben.
 *
 * Zwei Hausfarben sind als Textfarbe unbrauchbar: Grün 100 kommt auf Weiß nur auf
 * 2,9:1, Orange 100 auf 2,0:1 – beide weit unter den 4,5:1, die lesbarer Text braucht.
 * Orange taucht deshalb nur als Linie auf (Symbol in der Kopfzeile, Upload im Diagramm),
 * nie als Schrift.
 *
 * Die Regeln hier und in dashboard.css benutzen nur die Bedeutungsfarben (--card,
 * --accent, --err …), nie eine Hausfarbe oder #fff direkt. Die vier Farbmodi setzen dann
 * nur diese Variablen: data-mode="dark" am <html> für dunkel, data-accent="pink" für
 * RWTH Magenta statt Blau. Gesetzt werden beide von theme.js, bevor die Seite gezeichnet
 * wird.
 */
:root {
  --rwth-blau-100:#00549F; --rwth-blau-25:#C7DDF2; --rwth-blau-10:#E8F1FA;
  --rwth-schwarz-100:#000000; --rwth-schwarz-75:#646567; --rwth-schwarz-25:#CFD1D2; --rwth-schwarz-10:#ECEDED;
  --rwth-petrol-100:#006165;
  --rwth-gruen-25:#DDEBCE; --rwth-gruen-10:#F2F7EC;
  --rwth-orange-100:#F6A800; --rwth-orange-25:#FEEAC9; --rwth-orange-10:#FFF7EA;
  --rwth-rot-100:#CC071E; --rwth-rot-10:#FAEBE3;
  --rwth-magenta-100:#E30066;

  /* Flächen und Text */
  --bg:var(--rwth-schwarz-10);       /* Seite */
  --card:#fff;                       /* Karten, Kopfzeile, Eingabefelder */
  --sunken:var(--rwth-schwarz-10);   /* vertieft in einer Karte, Hover in Listen */
  --text:var(--rwth-schwarz-100);
  --muted:var(--rwth-schwarz-75);
  --line:var(--rwth-schwarz-25);
  /* Akzent: --accent als Fläche (Knöpfe), --accent-text für Links und Schrift */
  --accent:var(--rwth-blau-100);
  --accent-text:var(--rwth-blau-100);
  --on-accent:#fff;
  --accent-soft:var(--rwth-blau-10);
  --accent-soft-2:var(--rwth-blau-25);
  --accent-shadow:rgba(0,84,159,.15);
  /* Bedeutungsfarben: bleiben in jedem Akzent dieselben, Fehler ist nie pink */
  --ok:var(--rwth-petrol-100);
  --ok-soft:var(--rwth-gruen-10);
  --err:var(--rwth-rot-100);
  --err-soft:var(--rwth-rot-10);
  --warn-soft:var(--rwth-orange-10);
  /* Diagramme (dashboard.js liest diese Werte): 1 Download/Temperatur, 2 Upload,
     3 Luftfeuchte, 4 Soll-Temperatur (gestrichelt) */
  --chart-1:var(--accent-text);
  --chart-1-fill:rgba(0,84,159,.08);
  --chart-2:var(--rwth-orange-100);
  --chart-3:var(--ok);
  --chart-4:var(--muted);
  --chart-grid:var(--rwth-schwarz-10);
}
/* Pink: RWTH Magenta als Akzent. Weiß auf Magenta 4,6:1; als Schrift das etwas dunklere
   #C4005A (5,8:1 auf Weiß), weil Magenta 100 für kleine Schrift knapp wäre. */
:root[data-accent="pink"] {
  --bg:#FCEEF4; --sunken:#FCEEF4; --text:#2A0F1C; --muted:#8A5570; --line:#F2CFDF;
  --accent:var(--rwth-magenta-100); --accent-text:#C4005A;
  --accent-soft:#FDE3EE; --accent-soft-2:#F7B9D3; --accent-shadow:rgba(227,0,102,.15);
  --chart-1-fill:rgba(227,0,102,.08); --chart-grid:#FCEEF4;
}
/* Dunkel. Das RWTH-Blau 100 wäre auf dunklem Grund kaum zu sehen: als Fläche ein helleres
   Blau (#3372B0, Weiß darauf 5,0:1), als Schrift Blau 50 (#8EBAE5). Die Bedeutungsfarben
   bekommen eigene Stufen, damit Grün, Rot und Orange auch im Dunkeln lesbar bleiben. */
:root[data-mode="dark"] {
  color-scheme:dark;  /* Bildlaufleisten, Formularfelder usw. ebenfalls dunkel */
  --bg:#0E1117; --card:#161B22; --sunken:#0E1117; --text:#E6EDF3; --muted:#8B949E; --line:#2A313C;
  --accent:#3372B0; --accent-text:#8EBAE5;
  --accent-soft:#16304D; --accent-soft-2:#24476E; --accent-shadow:rgba(0,0,0,.4);
  --ok:#7FD1B9; --ok-soft:#10302A;
  --err:#F28B82; --err-soft:#3A1518;
  --warn-soft:#33260F;
  --chart-1-fill:rgba(142,186,229,.12); --chart-grid:#222933;
}
:root[data-mode="dark"][data-accent="pink"] {
  --bg:#170C12; --card:#221119; --sunken:#170C12; --text:#F5E6EE; --muted:#B8909F; --line:#3D2331;
  --accent:var(--rwth-magenta-100); --accent-text:#FF5FA2;
  --accent-soft:#3F1128; --accent-soft-2:#5E1A3C;
  --chart-1-fill:rgba(255,95,162,.12); --chart-grid:#2E1822;
}

* { box-sizing:border-box; }
body { margin:0; font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; background:var(--bg); color:var(--text); }
a { color:var(--accent-text); }

/* Kopfzeile: Symbol und Schriftzug, Navigation, rechts Abmelden und die Farbmodi */
header { background:var(--card); border-bottom:1px solid var(--line); padding:10px 24px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
header h1 { font-size:18px; margin:0; line-height:0; }
header h1 a { text-decoration:none; color:inherit; }
/* Orange nur als Linie des Symbols, nie als Textfarbe: Orange 100 kommt auf Weiß nur auf 2,0:1. */
header h1 a.brand { display:flex; align-items:center; gap:8px; line-height:1; }
.brand-mark { width:30px; height:30px; stroke:var(--rwth-orange-100); flex:none; }
.brand span { font-size:20px; font-weight:700; letter-spacing:-.01em; color:var(--text); }
header .spacer { flex:1; }
header form { margin:0; }

button { padding:8px 14px; border:1px solid var(--accent); background:var(--accent); color:var(--on-accent); border-radius:6px; font:inherit; cursor:pointer; }
button.secondary { background:var(--card); color:var(--accent-text); }
button.small { padding:4px 10px; font-size:13px; }
button:disabled { opacity:.5; cursor:default; }

label { display:block; font-size:13px; color:var(--muted); margin:10px 0 4px; }
input[type=text], input[type=email], input[type=password] { width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:6px; font:inherit; background:var(--card); color:var(--text); }

.msg { padding:10px 14px; border-radius:6px; margin:10px 0; font-size:14px; }
.msg.err { background:var(--err-soft); color:var(--err); }
.msg.ok { background:var(--ok-soft); color:var(--ok); }
.msg.warn { background:var(--warn-soft); color:var(--text); }

/* Farbmodi: zwei unabhängige Schalter oben rechts. Aus: Fläche der Karte, Symbol in der
   Akzentfarbe. An: ganz in der Akzentfarbe, Symbol weiß. */
.modes { display:flex; gap:8px; }
.mode-toggle { width:38px; height:38px; padding:0; border-radius:9px; border:1px solid var(--line); background:var(--card); color:var(--accent-text); display:inline-flex; align-items:center; justify-content:center; }
.mode-toggle svg { width:18px; height:18px; fill:currentColor; }
.mode-toggle[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }

/* Anmeldung */
.card-login { max-width:420px; margin:60px auto; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:20px; }
.card-login h2 { margin:0 0 12px; font-size:17px; }
.card-login .actions { margin-top:14px; }
@media (max-width:480px) { .card-login { margin:24px 16px; } }