/* Home Energy Manager
 *
 * Leitgedanke bleibt: Diese Anlage misst eine Richtung, nicht eine Menge.
 * Im Flussbild wird das buchstaeblich — die Striche auf der Netzleitung
 * laufen rueckwaerts, sobald aus Einspeisung Bezug wird. Das ist das eine
 * Element, an das man sich erinnern soll; alles andere bleibt ruhig.
 */

:root {
    --bg:        #0B0F14;
    --surface:   #131A22;
    --surface-2: #1A232E;
    --line:      #24303D;
    --line-lit:  #35485C;
    --ink:       #EAF0F6;
    --dim:       #7D8DA0;

    --sun:       #FFC94D;
    --out:       #3DDC97;   /* hinaus: Einspeisung, Ueberschuss */
    --in:        #FF8A5C;   /* herein: Netzbezug */

    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
            "Liberation Mono", monospace;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --r: 14px;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(120% 70% at 50% -10%, #16202B 0%, transparent 60%),
        var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 0.9375rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 64rem; margin: 0 auto; padding: 1.25rem 1.25rem 4rem; }

/* -- Kopf --------------------------------------------------------------- */

.top {
    display: flex; align-items: center; gap: 0.875rem;
    padding: 0.5rem 0 1.5rem;
}

.top h1 {
    margin: 0; flex: 1;
    font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em;
}

.top .sub {
    display: block;
    font-family: var(--mono);
    font-size: 0.6875rem; font-weight: 400; color: var(--dim);
    letter-spacing: 0;
}

.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--out);
       box-shadow: 0 0 10px var(--out); animation: breathe 3.5s ease-in-out infinite; }
.dot.stale { background: var(--in); box-shadow: none; animation: none; }
@keyframes breathe { 0%,100% { opacity:1 } 50% { opacity:.3 } }

.who {
    font-family: var(--mono); font-size: 0.6875rem; color: var(--dim);
    display: flex; align-items: center; gap: 0.75rem;
}
.who a { color: var(--dim); text-decoration: none; }
.who a:hover { color: var(--ink); }

/* -- Flussbild: das Herzstueck ------------------------------------------ */

.flowcard {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    padding: 0.5rem 0.5rem 1.25rem;
    margin-bottom: 1rem;
    overflow: hidden;
}

.flowcard svg { display: block; width: 100%; height: auto; max-height: 21rem; }

/* Die Striche wandern. Richtung und Tempo kommen aus den Messwerten. */
.stream {
    stroke-linecap: round;
    animation: march linear infinite;
}
@keyframes march { to { stroke-dashoffset: -100; } }
.stream.reverse { animation-direction: reverse; }

.node-ring { transition: stroke-dashoffset 700ms cubic-bezier(.3,.7,.3,1); }

.summary {
    text-align: center;
    font-size: 0.875rem; color: var(--dim);
    margin: 0.25rem 1rem 0;
}
.summary b { color: var(--ink); font-weight: 600; }

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

.kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.kpi {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 1rem 1.125rem;
}

.kpi .label {
    font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.09em;
    text-transform: uppercase; color: var(--dim); margin-bottom: 0.375rem;
}

.kpi .value {
    font-family: var(--mono); font-size: 1.5rem; font-weight: 600;
    line-height: 1.15; font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
}
.kpi .unit { font-size: 0.8125rem; font-weight: 400; color: var(--dim);
             margin-left: 0.25rem; }

.kpi.sun .value { color: var(--sun); }
.kpi.out .value { color: var(--out); }
.kpi.in  .value { color: var(--in); }

/* -- Karten allgemein --------------------------------------------------- */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 1.125rem 1.25rem 1rem;
    margin-bottom: 1rem;
}

.card-head {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 0.75rem; margin-bottom: 0.875rem;
}

.card-head h2 {
    margin: 0; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.09em;
    text-transform: uppercase; color: var(--dim);
}

.legend { display: flex; gap: 0.875rem; font-family: var(--mono);
          font-size: 0.6875rem; color: var(--dim); }
.legend span { display: flex; align-items: center; gap: 0.375rem; }
.legend i { width: 10px; height: 2px; border-radius: 1px; }

.chart svg { display: block; width: 100%; height: auto; }

/* -- Berichte ----------------------------------------------------------- */

.reports { display: flex; flex-wrap: wrap; gap: 0.625rem; }

.btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink); font-size: 0.875rem; font-weight: 500;
    text-decoration: none; cursor: pointer;
    transition: border-color 160ms, background-color 160ms, transform 120ms;
}
.btn:hover { border-color: var(--line-lit); background: #202B38; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 15px; height: 15px; opacity: .65; }

.btn.primary { background: var(--ink); color: var(--bg); border-color: var(--ink);
               font-weight: 600; }
.btn.primary:hover { background: #fff; }
.btn.danger { color: var(--in); border-color: #3A2A26; background: #1E1613; }
.btn.danger:hover { border-color: var(--in); }

/* -- Tabelle ------------------------------------------------------------ */

table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
th {
    text-align: left; padding: 0 0.75rem 0.5rem 0;
    font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.09em;
    text-transform: uppercase; color: var(--dim);
    border-bottom: 1px solid var(--line);
}
td { padding: 0.75rem 0.75rem 0.75rem 0; border-bottom: 1px solid var(--line);
     vertical-align: middle; }
tr:last-child td { border-bottom: 0; }

.tag {
    display: inline-block; padding: 0.125rem 0.5rem; border-radius: 999px;
    font-family: var(--mono); font-size: 0.6875rem;
    border: 1px solid var(--line); color: var(--dim);
}
.tag.admin { color: var(--sun); border-color: #4A3D1C; background: #211B0D; }

/* -- Formulare ---------------------------------------------------------- */

label { display: block; font-size: 0.6875rem; font-weight: 600;
        letter-spacing: 0.09em; text-transform: uppercase; color: var(--dim);
        margin-bottom: 0.4375rem; }

input, select {
    width: 100%; padding: 0.625rem 0.75rem;
    background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
    color: var(--ink); font-family: var(--mono); font-size: 0.9375rem;
}
select { font-family: var(--sans); }
input:focus, select:focus {
    outline: none; border-color: var(--line-lit);
    box-shadow: 0 0 0 3px rgba(61,220,151,.13);
}

.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
       gap: 0.875rem; align-items: end; }
.field { margin-bottom: 0.875rem; }

.notice { padding: 0.6875rem 0.875rem; border-radius: 10px;
          border: 1px solid var(--line); background: var(--surface-2);
          font-size: 0.875rem; margin-bottom: 1rem; }
.notice.bad { border-color: #3A2A26; background: #1E1613; color: #FFC0A5; }
.notice.good { border-color: #1D3D33; background: #101F1A; color: #A8F0D0; }

/* -- Anmeldung ---------------------------------------------------------- */

.login-page { min-height: 100vh; display: grid; place-items: center;
              padding: 1.25rem; }
.login { width: 100%; max-width: 21rem; }
.login .mark { font-family: var(--mono); font-size: 0.6875rem;
               letter-spacing: 0.18em; text-transform: uppercase;
               color: var(--dim); margin-bottom: 0.5rem; }
.login h1 { margin: 0 0 1.75rem; font-size: 1.5rem; font-weight: 600;
            letter-spacing: -0.02em; }
.login .btn { width: 100%; justify-content: center; margin-top: 0.25rem; }

/* -- Zugaenglichkeit ---------------------------------------------------- */

:focus-visible { outline: 2px solid var(--out); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important; animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    /* Ausnahme: Die Striche im Flussbild sind keine Zierde, sie zeigen
       Richtung und Stärke des Stroms. Statt sie abzuschalten, laufen sie
       gleichmäßig langsam — die Richtung bleibt ablesbar, die Unruhe geht
       weg. Wer gar keine Bewegung will, sieht Richtung und Stärke weiterhin
       an Farbe und Strichstärke. */
    .stream {
        animation-duration: 6s !important;
        animation-iteration-count: infinite !important;
    }
}

@media (max-width: 34rem) {
    .wrap { padding: 1rem 0.875rem 3rem; }
    .kpi .value { font-size: 1.25rem; }
    .kpi { padding: 0.875rem 1rem; }
    .reports { display: grid; grid-template-columns: 1fr 1fr; }
    .reports .btn { justify-content: center; }
}

/* -- Diagramm: Legende, Erklärung, Werteanzeige beim Zeigen ------------- */

.chart-wrap { position: relative; }

.tip {
    position: absolute; display: none; z-index: 5;
    min-width: 9rem; padding: 0.625rem 0.75rem;
    background: rgba(11,15,20,.94);
    border: 1px solid var(--line-lit);
    border-radius: 10px;
    box-shadow: 0 8px 28px -8px rgba(0,0,0,.8);
    pointer-events: none;
    backdrop-filter: blur(6px);
}
.tip-time {
    font-family: var(--mono); font-size: 0.6875rem; color: var(--dim);
    margin-bottom: 0.4375rem;
    padding-bottom: 0.375rem; border-bottom: 1px solid var(--line);
}
.tip-row {
    display: flex; align-items: center; gap: 0.4375rem;
    font-size: 0.75rem; color: var(--dim); margin-top: 0.25rem;
}
.tip-row i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.tip-row b {
    margin-left: auto; padding-left: 0.75rem;
    font-family: var(--mono); font-size: 0.8125rem; font-weight: 600;
    color: var(--ink); font-variant-numeric: tabular-nums;
}

/* Erklärung unter dem Diagramm: was die Farben bedeuten. */
.explain {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.625rem 1.25rem;
    margin-top: 1rem; padding-top: 0.875rem;
    border-top: 1px solid var(--line);
}
.explain div { display: flex; gap: 0.5rem; font-size: 0.8125rem; color: var(--dim);
               line-height: 1.45; }
.explain i { width: 12px; height: 12px; border-radius: 3px; flex: none;
             margin-top: 0.2rem; }
.explain i.line { height: 3px; margin-top: 0.5rem; border-radius: 2px; }
.explain b { color: var(--ink); font-weight: 600; }

/* -- Steckdosen --------------------------------------------------------- */

.plugs { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
         gap: 0.75rem; }

.plug {
    display: flex; align-items: center; gap: 0.875rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.875rem 1rem;
    transition: border-color 200ms;
}
.plug.on { border-color: #2C5A47; }
.plug.offline { opacity: .55; }

.plug .info { flex: 1; min-width: 0; }
.plug .pname {
    font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.plug .pmeta {
    font-family: var(--mono); font-size: 0.75rem; color: var(--dim);
    margin-top: 0.125rem; font-variant-numeric: tabular-nums;
}
.plug.on .pmeta b { color: var(--sun); font-weight: 600; }

/* Kippschalter. Der Knauf faehrt, die Farbe folgt dem Zustand. */
.toggle {
    position: relative; flex: none;
    width: 52px; height: 30px; padding: 0; border: 0;
    border-radius: 999px; cursor: pointer;
    background: var(--line);
    transition: background-color 220ms cubic-bezier(.3,.7,.3,1);
}
.toggle::after {
    content: ""; position: absolute; top: 3px; left: 3px;
    width: 24px; height: 24px; border-radius: 50%;
    background: #9AA9BB;
    transition: transform 220ms cubic-bezier(.3,.7,.3,1), background-color 220ms;
}
.toggle[aria-checked="true"] { background: #1F7A5A; }
.toggle[aria-checked="true"]::after { transform: translateX(22px); background: var(--out); }
.toggle[disabled] { cursor: progress; opacity: .6; }

/* Der Totmannschalter ist keine Nebensache — er wird benannt. */
.deadman {
    display: inline-flex; align-items: center; gap: 0.3125rem;
    font-family: var(--mono); font-size: 0.6875rem; color: var(--dim);
}
.deadman::before {
    content: ""; width: 5px; height: 5px; border-radius: 50%;
    background: var(--out);
}

/* -- Regelzustand ------------------------------------------------------- */

.rule { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.rule-head { display: flex; align-items: baseline; justify-content: space-between;
             gap: 0.75rem; }
.rule-name { font-size: 0.875rem; font-weight: 600; }
.rule-avg { font-family: var(--mono); font-size: 0.875rem; font-weight: 600;
            color: var(--ink); font-variant-numeric: tabular-nums; }

/* Der Strich in der Mitte ist die Einschaltschwelle. Man sieht auf einen
   Blick, wie weit der Mittelwert davon entfernt ist. */
.rule-bar { position: relative; height: 6px; margin: 0.5rem 0 0.4375rem;
            background: var(--bg); border-radius: 3px; overflow: hidden; }
.rule-bar i { display: block; height: 100%; border-radius: 3px;
              transition: width 600ms cubic-bezier(.3,.7,.3,1),
                          background-color 400ms; }
.rule-mark { position: absolute; top: -2px; bottom: -2px; width: 2px;
             background: var(--line-lit); }
.rule-why { font-size: 0.75rem; color: var(--dim); }

/* -- Zoom im Diagramm --------------------------------------------------- */

.chart-wrap { cursor: crosshair; user-select: none; }
.zoom-label { font-family: var(--mono); color: var(--out); }
.btn-sm { padding: 0.25rem 0.625rem; font-size: 0.75rem; border-radius: 8px; }

/* -- Schaltverlauf ------------------------------------------------------ */

.sl-head {
    margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line);
    font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.09em;
    text-transform: uppercase; color: var(--dim); margin-bottom: 0.75rem;
}

/* Senkrechte Linie durch die Punkte: der Verlauf als Zeitstrahl. */
.sl-row {
    position: relative; display: flex; align-items: flex-start; gap: 0.75rem;
    padding-bottom: 0.875rem;
}
.sl-row:last-child { padding-bottom: 0; }
.sl-row::before {
    content: ""; position: absolute; left: 3.05rem; top: 0.5rem; bottom: -0.375rem;
    width: 1px; background: var(--line);
}
.sl-row:last-child::before { display: none; }

.sl-time {
    flex: none; width: 2.5rem; text-align: right;
    font-family: var(--mono); font-size: 0.75rem; color: var(--dim);
    padding-top: 0.0625rem; font-variant-numeric: tabular-nums;
}
.sl-dot {
    flex: none; width: 9px; height: 9px; border-radius: 50%;
    margin-top: 0.3125rem; z-index: 1;
    background: var(--dim); box-shadow: 0 0 0 3px var(--surface);
}
.sl-row.on  .sl-dot { background: var(--out); }
.sl-row.off .sl-dot { background: var(--line-lit); }
.sl-row.fail .sl-dot { background: var(--in); }

.sl-body { min-width: 0; font-size: 0.8125rem; line-height: 1.4; }
.sl-body b { font-weight: 600; }
.sl-by {
    display: inline-block; margin-left: 0.5rem; padding: 0 0.375rem;
    border: 1px solid var(--line); border-radius: 999px;
    font-family: var(--mono); font-size: 0.625rem; color: var(--dim);
    vertical-align: 1px;
}
.sl-why { display: block; color: var(--dim); font-size: 0.75rem; }
.sl-empty { color: var(--dim); font-size: 0.8125rem; margin: 0; }

/* -- Ertragsprognose ---------------------------------------------------- */

.fc { margin-top: 0.5rem; }

/* Gestrichelt statt gefüllt: Es ist eine Schätzung, keine Messung. */
.fc-bar {
    height: 3px; border-radius: 2px; overflow: hidden;
    background: repeating-linear-gradient(90deg,
        var(--line) 0 3px, transparent 3px 6px);
}
.fc-bar i {
    display: block; height: 100%; border-radius: 2px; background: var(--sun);
    transition: width 700ms cubic-bezier(.3,.7,.3,1);
}
.fc-text {
    margin-top: 0.3125rem;
    font-family: var(--mono); font-size: 0.6875rem; color: var(--dim);
}
.fc-text b { color: var(--ink); font-weight: 600; }
.fc-stale { color: var(--in); }