@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
    /* Flächen (dunkel -> hell = "erhabener") */
    --bg: #121110;
    --bg-elevated: #1c1a18;
    --bg-card: #221f1c;
    --bg-hover: #2b2621;
    --border: #332e29;

    /* Text (hell -> gedämpft) */
    --text: #eae6e1;
    --text-dim: #a49c93;
    --text-faint: #6f675f;

    /* Akzent / Highlights */
    --accent: #e8933c;
    --accent-dark: #b5651d;
    --accent-bg: rgba(232, 147, 60, 0.12);
    --accent-secondary: #7f97ab;
    --accent-secondary-bg: rgba(127, 151, 171, 0.14);

    /* Semantische Farben */
    --danger: #d9534f;
    --danger-bg: rgba(217, 83, 79, 0.12);
    --success: #6fae5c;
    --success-bg: rgba(111, 174, 92, 0.12);

    /* Rundungen */
    --radius: 14px;
    --radius-sm: 8px;
    --radius-pill: 999px;

    /* Spacing (4/8pt-Raster) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;

    /* Schriften */
    --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'JetBrains Mono', 'Consolas', monospace;

    /* Typo-Skala */
    --fs-xs: 11px;
    --fs-sm: 12px;
    --fs-base: 13px;
    --fs-md: 14px;
    --fs-lg: 16px;
    --fs-xl: 20px;
    --fs-2xl: 24px;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: 1.5;
}

a { color: var(--accent); }

/* ---------- Login ---------- */

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.login-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-6);
    width: 100%;
    max-width: 340px;
    text-align: center;
}

.login-card h1 {
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    margin: 0 0 var(--space-1);
}

.login-card p.subtitle {
    color: var(--text-dim);
    font-size: var(--fs-sm);
    margin: 0 0 var(--space-5);
}

.pin-dots { display: flex; justify-content: center; gap: var(--space-4); margin-bottom: var(--space-5); }

.pin-dots .dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--text-faint);
    background: transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.pin-dots .dot.filled { background: var(--accent); border-color: var(--accent); }

.pin-dots.shake { animation: shake 0.4s ease; }
.pin-dots.error .dot.filled { background: var(--danger); border-color: var(--danger); }

@keyframes shake {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(4px); }
    30%, 50%, 70% { transform: translateX(-8px); }
    40%, 60% { transform: translateX(8px); }
}

.login-message { min-height: 18px; color: var(--danger); font-size: var(--fs-base); margin: 0 0 var(--space-3); }

.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }

.key {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: var(--fs-xl);
    font-weight: var(--fw-medium);
    padding: var(--space-4) 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s var(--ease-out);
}

.key:hover:not(:disabled) { border-color: var(--accent); background: var(--bg-hover); }
.key:active:not(:disabled) { background: var(--accent-dark); transform: scale(0.95); }
.key:disabled { visibility: hidden; cursor: default; }
.key-backspace { font-size: var(--fs-lg); }

/* ---------- Layout ---------- */

.app-header {
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    padding: var(--space-4) var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.app-header h1 {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    margin: 0;
}

.live-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid var(--success);
    border-radius: var(--radius-pill);
    padding: var(--space-1) var(--space-3);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
}

.live-badge .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 0 rgba(111, 174, 92, 0.6);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(111, 174, 92, 0.5); }
    70% { box-shadow: 0 0 0 6px rgba(111, 174, 92, 0); }
    100% { box-shadow: 0 0 0 0 rgba(111, 174, 92, 0); }
}

.logout-link {
    color: var(--text-dim);
    text-decoration: none;
    font-size: var(--fs-sm);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: var(--space-1) var(--space-4);
    transition: color 0.12s ease, border-color 0.12s ease;
}
.logout-link:hover { color: var(--accent); border-color: var(--accent); }

.filter-bar {
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    padding: var(--space-4) var(--space-5);
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    align-items: center;
}

.filter-bar select,
.filter-bar .toggle {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
}

.filter-bar select:focus { outline: none; border-color: var(--accent); }

.range-tabs {
    display: flex;
    gap: var(--space-1);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: var(--space-1);
}

.range-tabs a {
    text-decoration: none;
    color: var(--text-dim);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
}

.range-tabs a.active {
    background: var(--accent);
    color: #1c1204;
    font-weight: var(--fw-semibold);
}

.toggle-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    color: var(--text-dim);
    cursor: pointer;
}

.toggle-label input { accent-color: var(--accent); }

.content {
    padding: var(--space-5);
    max-width: 1400px;
    margin: 0 auto;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.stat-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: var(--space-4);
}

.stat-card .label {
    color: var(--text-dim);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-2);
}

.stat-card .value {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-extrabold);
    font-family: var(--font-mono);
}

.stat-card .delta {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    margin-top: var(--space-1);
    display: inline-block;
}
.delta.positive { color: var(--success); }
.delta.negative { color: var(--danger); }
.delta.neutral { color: var(--text-faint); }

.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: var(--space-4);
}

.module-grid.full { grid-template-columns: 1fr; }

.module {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.module h2 {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    margin: 0 0 var(--space-4);
}

.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td {
    text-align: left;
    padding: var(--space-2) var(--space-2);
    font-size: var(--fs-sm);
    border-bottom: 1px solid var(--border);
}
.data-table th {
    color: var(--text-dim);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-xs);
    text-transform: uppercase;
}
.data-table td.mono { font-family: var(--font-mono); color: var(--text-faint); }
.data-table td.num { font-family: var(--font-mono); text-align: right; }
.data-table tr:last-child td { border-bottom: none; }

.bar-row { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.bar-row .bar-label { width: 110px; flex-shrink: 0; font-size: var(--fs-sm); color: var(--text-dim); }
.bar-row .bar-track { flex: 1; background: var(--bg); border-radius: var(--radius-pill); height: 10px; overflow: hidden; }
.bar-row .bar-fill { height: 100%; background: var(--accent); border-radius: var(--radius-pill); }
.bar-row .bar-value { width: 50px; text-align: right; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-faint); }

.badge {
    display: inline-block;
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid var(--danger);
}

.empty-state { color: var(--text-faint); font-size: var(--fs-sm); padding: var(--space-4) 0; text-align: center; }

.copy-row { display: flex; gap: var(--space-2); }

.mono-input {
    flex: 1;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    min-width: 0;
}
.mono-input:focus { outline: none; border-color: var(--accent); color: var(--text); }

.btn-ghost {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.btn-ghost:hover { color: var(--accent); background: var(--accent-bg); border-color: var(--accent); }
.btn-ghost.copied { color: var(--success); background: var(--success-bg); border-color: var(--success); }

canvas#hourly-chart { max-height: 220px; }

@media (max-width: 640px) {
    .content { padding: var(--space-3); }
    .app-header, .filter-bar { padding: var(--space-3); }
}