:root {
    --ink: #0A0A0B;
    --ink-raised: #101012;
    --panel: #141416;
    --panel-hover: #1A1A1D;
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.16);
    --paper: #F2F2F3;
    --muted: #8A8A92;
    --muted-dim: #5C5C64;
    --accent: #4F6EF7;
    --accent-hover: #6382FF;
    --accent-soft: rgba(79, 110, 247, 0.13);
    --accent-ink: #FFFFFF;
    --ok: #34C77B;
    --down: #E5484D;
    --warn: #E5A93D;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
    --radius: 10px;
    --radius-sm: 7px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 20px -8px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 20px 50px -12px rgba(0, 0, 0, 0.7);
    --sidebar-w: 224px;
    --sidebar-w-collapsed: 62px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Muss vor allen Komponenten stehen und !important tragen: Klassenregeln wie
   `.cmdk-overlay { display: flex }` schlagen sonst das Browser-Default
   `[hidden] { display: none }` — ein unsichtbares Overlay würde dann über der
   Seite liegen und sämtliche Klicks abfangen. */
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

html { -webkit-text-size-adjust: 100%; }

body {
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-body);
    min-height: 100dvh;
    min-height: 100dvh;
    position: relative;
    /* Die ausgeblendete Mobil-Sidebar steht per translateX links außerhalb —
       ohne dies erzeugt sie auf schmalen Displays seitliches Wackeln. */
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
button { font-family: inherit; }

:focus-visible {
    outline: 2px solid var(--accent-hover);
    outline-offset: 2px;
    border-radius: 4px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 8px;
    z-index: 500;
    background: var(--accent);
    color: #fff;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
}
.skip-link:focus { left: 8px; }

.ambient {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 900px 500px at 12% -8%, rgba(79, 110, 247, 0.10), transparent 62%),
        radial-gradient(ellipse 700px 480px at 100% 8%, rgba(255, 255, 255, 0.028), transparent 60%);
}

/* ---------------- Brand mark ---------------- */

.login-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 8px;
    background: linear-gradient(160deg, var(--accent), #3C55D4);
    color: var(--accent-ink);
    font-weight: 700;
    font-size: 0.9rem;
}

/* ================================================================
   LOGIN / 2FA
   ================================================================ */

.login-body { display: flex; align-items: center; justify-content: center; }

.login-main { position: relative; z-index: 1; width: 100%; padding: 24px; }

.login-card-wrap {
    max-width: 388px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    animation: fade-up 0.4s var(--ease) both;
}

@keyframes fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.login-brand { display: flex; align-items: center; gap: 9px; justify-content: center; }
.login-brand-text { font-weight: 700; letter-spacing: 0.02em; font-size: 0.9rem; }
.login-brand-text span { color: var(--muted); font-weight: 500; }

.login-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px 28px;
    box-shadow: var(--shadow);
}

.login-card h1 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
.login-sub { color: var(--muted); font-size: 0.85rem; margin-top: -8px; line-height: 1.5; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 0.78rem; color: var(--muted); font-weight: 500; }

.login-card input[type="text"],
.login-card input[type="password"] {
    background: var(--ink);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--paper);
    padding: 11px 12px;
    font-family: var(--font-body);
    font-size: 1rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.login-card input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.login-submit {
    margin-top: 4px;
    background: var(--accent);
    color: var(--accent-ink);
    border: none;
    border-radius: var(--radius-sm);
    padding: 12px;
    font-weight: 600;
    font-size: 0.94rem;
    min-height: 44px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}
.login-submit:hover { background: var(--accent-hover); }
.login-submit:active { transform: translateY(1px); }

.login-hint { text-align: center; font-size: 0.76rem; color: var(--muted-dim); line-height: 1.5; }

.login-flash { padding: 10px 12px; border-radius: var(--radius-sm); font-size: 0.83rem; border: 1px solid; line-height: 1.5; }
.login-flash-error { background: rgba(229, 72, 77, 0.1); border-color: rgba(229, 72, 77, 0.35); color: #FF9B9E; }
.login-flash-info { background: rgba(229, 169, 61, 0.1); border-color: rgba(229, 169, 61, 0.35); color: #F0C878; }

.login-back { text-align: center; font-size: 0.82rem; color: var(--muted); text-decoration: none; padding: 6px; }
.login-back:hover { color: var(--paper); }

.login-copyright { text-align: center; font-size: 0.72rem; color: var(--muted-dim); }

.checkbox-field { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--muted); }
.checkbox-field input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--accent); }

.qr-wrap { display: flex; justify-content: center; padding: 12px; background: var(--paper); border-radius: var(--radius-sm); }
.qr-wrap canvas { max-width: 100%; height: auto; }
.totp-secret {
    display: block;
    background: var(--ink);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 9px 10px;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    word-break: break-all;
}

/* ================================================================
   SHELL: Sidebar + Content
   ================================================================ */

.dashboard-body { display: flex; flex-direction: column; }

.dash-shell { display: flex; min-height: 100dvh; min-height: 100dvh; align-items: stretch; }

.dash-sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100dvh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--ink-raised);
    border-right: 1px solid var(--border);
    padding: 16px 10px;
    z-index: 120;
    transition: width 0.24s var(--ease);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 6px 20px;
    position: relative;
}
.dash-title { font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em; white-space: nowrap; }
.dash-title span { color: var(--muted); font-weight: 500; display: block; font-size: 0.71rem; }

.sidebar-collapse-btn {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--muted-dim);
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}
.sidebar-collapse-btn svg { width: 16px; height: 16px; }
.sidebar-collapse-btn:hover { color: var(--paper); background: var(--panel-hover); }

.sidebar-nav { display: flex; flex-direction: column; gap: 3px; flex: 1; min-height: 0; }

/* Wichtig: eigene Item-Klasse — .sidebar-nav ist der Container (flex:1) und
   darf niemals auf einzelne Links angewendet werden, sonst blähen sie sich auf. */
.sidebar-item {
    display: flex;
    align-items: center;
    gap: 11px;
    flex: 0 0 auto;
    text-decoration: none;
    color: var(--muted);
    font-size: 0.87rem;
    font-weight: 500;
    padding: 0 11px;
    height: 40px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    position: relative;
    transition: color 0.15s ease, background 0.15s ease;
}
.sidebar-item svg { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.9; }
.sidebar-item:hover { color: var(--paper); background: var(--panel-hover); }
.sidebar-item.active { color: #fff; background: var(--accent); }
.sidebar-item.active svg { opacity: 1; }
.sidebar-logout:hover { color: #FF9B9E; }

.sidebar-footer {
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 11px;
    height: 40px;
    font-size: 0.85rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
}
.sidebar-user-name { color: var(--paper); font-weight: 600; text-overflow: ellipsis; overflow: hidden; }
.dash-user-avatar {
    width: 26px; height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(160deg, var(--accent), #3C55D4);
    color: var(--accent-ink);
    font-weight: 600;
    font-size: 0.76rem;
}

/* --- Eingeklappter Zustand (Desktop) --- */

body.sidebar-collapsed .dash-sidebar { width: var(--sidebar-w-collapsed); }
body.sidebar-collapsed .sidebar-item-label,
body.sidebar-collapsed .dash-title { display: none; }
/*
 * Eingeklappt stehen Zeichen und Knopf uebereinander.
 *
 * Vorher stand hier `display: none` fuer den Knopf — damit liess sich
 * die Leiste einklappen, aber nie wieder aufklappen. Es gab schlicht
 * nichts mehr zum Anklicken; wer es einmal getan hatte, sass fest
 * (der Zustand wird in localStorage gemerkt und ueberlebte auch das
 * Neuladen). Am 04.09.2026 gemeldet und nachgemessen: der Knopf hatte
 * eingeklappt die Groesse 0x0.
 *
 * Nebeneinander passen Zeichen und Knopf nicht in die 62px des
 * schmalen Streifens — also untereinander.
 */
body.sidebar-collapsed .sidebar-brand {
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding-left: 0; padding-right: 0; padding-bottom: 14px;
}
body.sidebar-collapsed .sidebar-collapse-btn {
    margin-left: 0;                 /* sonst schiebt `margin-left:auto` ihn zur Seite */
}
/* Der Pfeil zeigt jetzt in die andere Richtung — er sagt, was der
   Klick tut, nicht wo man ist. */
body.sidebar-collapsed .sidebar-collapse-btn svg { transform: scaleX(-1); }
body.sidebar-collapsed .sidebar-item,
body.sidebar-collapsed .sidebar-user { justify-content: center; padding: 0; gap: 0; }

/* Tooltip, damit die Icons im eingeklappten Zustand verständlich bleiben */
body.sidebar-collapsed .sidebar-item::after,
body.sidebar-collapsed .sidebar-user::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    background: var(--panel);
    border: 1px solid var(--border-strong);
    color: var(--paper);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.78rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    box-shadow: var(--shadow);
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 200;
}
body.sidebar-collapsed .sidebar-item:hover::after,
body.sidebar-collapsed .sidebar-item:focus-visible::after,
body.sidebar-collapsed .sidebar-user:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}
body.sidebar-collapsed .sidebar-user { position: relative; }

/* --- Content --- */

.dash-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.dash-header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    border-bottom: 1px solid var(--border);
    background: rgba(10, 10, 11, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    min-height: 58px;
}

.dash-header-title { font-weight: 600; font-size: 0.95rem; }
.dash-header-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.sidebar-open-btn {
    display: none;
    background: none;
    border: 1px solid var(--border);
    color: var(--paper);
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.sidebar-open-btn svg { width: 19px; height: 19px; }

.header-icon-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--muted);
    height: 34px;
    padding: 0 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.8rem;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.header-icon-btn svg { width: 15px; height: 15px; }
.header-icon-btn:hover { color: var(--paper); border-color: var(--border-strong); }
.cmdk-hint {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--muted-dim);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 5px;
}

.session-timer {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    padding: 0 11px;
    height: 34px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    color: var(--muted);
    transition: color 0.3s ease, border-color 0.3s ease;
}
.timer-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.session-timer.timer-ok { color: var(--ok); }
.session-timer.timer-warn { color: var(--warn); border-color: rgba(229, 169, 61, 0.4); }
.session-timer.timer-danger { color: var(--down); border-color: rgba(229, 72, 77, 0.45); }
.session-timer.timer-danger .timer-dot { animation: blink 1s steps(2, start) infinite; }
@keyframes blink { 50% { opacity: 0.25; } }

.dash-main {
    position: relative;
    z-index: 1;
    padding: 26px 24px 12px;
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    flex: 1;
}
.dash-main-wide { max-width: 1560px; }

.sidebar-scrim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 110;
    animation: fade-in 0.2s ease both;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ================================================================
   Karten / Sektionen
   ================================================================ */

.dash-flash {
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 18px;
    font-size: 0.87rem;
    border: 1px solid;
    line-height: 1.5;
    animation: fade-up 0.3s var(--ease) both;
}
.dash-flash-success { background: rgba(52, 199, 123, 0.08); border-color: rgba(52, 199, 123, 0.3); }
.dash-flash-error { background: rgba(229, 72, 77, 0.08); border-color: rgba(229, 72, 77, 0.3); }

.dash-section { margin-bottom: 34px; }

.dash-section h2 {
    font-size: 0.79rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 14px;
}

.dash-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.dash-section-head h2 { margin-bottom: 0; }
.section-updated { font-size: 0.7rem; color: var(--muted-dim); font-family: var(--font-mono); }

.dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.dash-card {
    position: relative;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    text-decoration: none;
    color: var(--paper);
    box-shadow: var(--shadow-sm);
    transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.16s var(--ease);
}
.project-card:hover, .service-card:hover, .chart-card:hover, .stat-card:hover, .cert-card:hover, .vhost-card:hover {
    border-color: var(--border-strong);
    background: var(--panel-hover);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.card-label { font-weight: 600; font-size: 0.92rem; }

.badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
}
.badge-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.badge-ok { background: rgba(52, 199, 123, 0.1); color: var(--ok); border-color: rgba(52, 199, 123, 0.25); }
.badge-ok .badge-dot { animation: pulse-dot 2.4s ease-in-out infinite; }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.badge-down { background: rgba(229, 72, 77, 0.1); color: var(--down); border-color: rgba(229, 72, 77, 0.25); }
.badge-unknown { background: rgba(138, 138, 146, 0.1); color: var(--muted); border-color: var(--border); }

.service-actions { display: flex; gap: 6px; margin-top: 2px; flex-wrap: wrap; }
.service-actions form { display: contents; }
.service-actions button, .service-actions .log-toggle {
    flex: 1 1 auto;
    min-width: 62px;
    font-size: 0.74rem;
    padding: 8px 6px;
    min-height: 36px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--paper);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.service-actions button:hover, .service-actions .log-toggle:hover { background: var(--panel-hover); border-color: var(--border-strong); }
.service-actions button:active { transform: translateY(1px); }
.btn-stop { color: var(--down); }
.btn-restart { color: var(--warn); }

.log-toggle {
    margin-top: 2px;
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.75rem;
    padding: 8px 11px;
    min-height: 36px;
    border-radius: 6px;
    align-self: flex-start;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.log-toggle:hover { color: var(--paper); border-color: var(--border-strong); }

.stat-card { align-items: flex-start; }
.stat-label { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.stat-value { font-family: var(--font-mono); font-size: 1.05rem; }

.uptime-line { font-size: 0.72rem; color: var(--muted-dim); font-family: var(--font-mono); }

.cert-card { gap: 5px; }
.cert-domain { font-family: var(--font-mono); font-size: 0.83rem; font-weight: 600; word-break: break-all; }
.cert-days { font-size: 0.76rem; color: var(--muted); }
.cert-days.days-ok { color: var(--ok); }
.cert-days.days-warn { color: var(--warn); }
.cert-days.days-critical { color: var(--down); }

.vhost-card { gap: 8px; }
.vhost-domain { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 600; word-break: break-all; }
.vhost-toggle {
    margin-top: 2px;
    width: 100%;
    padding: 9px 10px;
    min-height: 40px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--paper);
    font-size: 0.79rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.vhost-toggle:hover { background: var(--panel-hover); border-color: var(--border-strong); }
.vhost-toggle.is-online { color: var(--down); }
.vhost-toggle.is-offline { color: var(--ok); }

.ssh-login-list { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.ssh-login-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 0.73rem;
    color: var(--muted);
    padding: 4px 0;
    flex-wrap: wrap;
}
.ssh-login-row .ssh-user { color: var(--paper); cursor: pointer; }
.ssh-login-row .ssh-user:hover { color: var(--accent-hover); }
.ssh-fail-count { font-size: 0.78rem; color: var(--muted); }
.ssh-fail-count strong { color: var(--warn); font-family: var(--font-mono); }

/* ---------------- Charts ---------------- */

.dash-grid-charts { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.chart-card { gap: 12px; }
.chart-wrap { position: relative; width: 100%; }
.chart-wrap-line { height: 150px; }
.chart-wrap-gauge { height: 150px; display: flex; align-items: center; justify-content: center; }
.gauge-center { position: absolute; font-family: var(--font-mono); font-size: 1.3rem; font-weight: 600; }

/* ---------------- Progress / Skeleton / Toast ---------------- */

.progress-bar {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), #7C9BFF);
    z-index: 400;
    opacity: 0;
    pointer-events: none; /* rein dekorativ — darf nie Klicks abfangen */
    transition: width 0.4s ease, opacity 0.3s ease;
}
.progress-bar.active { opacity: 1; }

.skeleton {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.055);
    border-radius: 4px;
    color: transparent !important;
}
.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent);
    animation: skeleton-sweep 1.4s ease-in-out infinite;
}
@keyframes skeleton-sweep { to { transform: translateX(100%); } }

.toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 450;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: min(92vw, 340px);
    /* Der Container spannt (v. a. mobil) über die volle Breite — nur die
       Toasts selbst dürfen Klicks annehmen, der leere Bereich nicht. */
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    padding: 12px 15px;
    border-radius: var(--radius-sm);
    background: var(--panel);
    border: 1px solid var(--border);
    border-left: 2px solid var(--muted);
    box-shadow: var(--shadow-lg);
    font-size: 0.84rem;
    line-height: 1.45;
    animation: toast-in 0.25s var(--ease) both;
}
.toast.toast-out { animation: toast-out 0.22s ease both; }
.toast-success { border-left-color: var(--ok); }
.toast-error { border-left-color: var(--down); }
@keyframes toast-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(16px); } }

/* ================================================================
   Command-Palette
   ================================================================ */

.cmdk-overlay {
    position: fixed;
    inset: 0;
    z-index: 460;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh 16px 16px;
    animation: fade-in 0.15s ease both;
}
.cmdk-panel {
    width: 100%;
    max-width: 520px;
    background: var(--panel);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: fade-up 0.2s var(--ease) both;
}
.cmdk-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    color: var(--paper);
    font-family: var(--font-body);
    font-size: 1rem;
    padding: 16px 18px;
}
.cmdk-input:focus { outline: none; }
.cmdk-results { max-height: 320px; overflow-y: auto; padding: 6px; }
.cmdk-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    background: none;
    border: none;
    color: var(--paper);
    text-align: left;
    font-size: 0.88rem;
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
}
.cmdk-result:hover, .cmdk-result.active { background: var(--accent); color: #fff; }
.cmdk-result-hint { font-size: 0.72rem; color: var(--muted-dim); flex-shrink: 0; }
.cmdk-result.active .cmdk-result-hint, .cmdk-result:hover .cmdk-result-hint { color: rgba(255, 255, 255, 0.75); }
.cmdk-empty { padding: 24px; text-align: center; color: var(--muted-dim); font-size: 0.87rem; }
.cmdk-foot {
    border-top: 1px solid var(--border);
    padding: 9px 14px;
    font-size: 0.72rem;
    color: var(--muted-dim);
}
.cmdk-foot kbd {
    font-family: var(--font-mono);
    background: var(--ink);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 5px;
    margin-right: 3px;
}

/* ================================================================
   Logs-Seite
   ================================================================ */

.logs-shell {
    display: flex;
    gap: 16px;
    align-items: stretch;
    height: calc(100dvh - 150px);
    min-height: 460px;
}

.logs-source-panel {
    width: 292px;
    flex-shrink: 0;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow-y: auto;
    padding: 8px;
}

.logs-source-group-title {
    font-size: 0.69rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--muted-dim);
    padding: 14px 10px 6px;
}
.logs-source-group-title:first-child { padding-top: 6px; }

.logs-source-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.4;
    padding: 10px;
    min-height: 40px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.logs-source-item:hover { background: var(--panel-hover); color: var(--paper); }
.logs-source-item.active { background: var(--accent); color: #fff; font-weight: 500; }

.logs-viewer {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.logs-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.logs-toolbar-title { font-weight: 600; font-size: 0.92rem; margin-right: auto; }
.logs-toolbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.logs-search {
    background: var(--ink);
    border: 1px solid var(--border);
    color: var(--paper);
    font-family: var(--font-body);
    font-size: 0.82rem;
    padding: 0 10px;
    height: 34px;
    width: 190px;
    max-width: 100%;
    border-radius: 6px;
}
.logs-search:focus { outline: none; border-color: var(--accent); }

.logs-toolbar select, .logs-btn {
    background: var(--ink);
    border: 1px solid var(--border);
    color: var(--paper);
    font-size: 0.8rem;
    padding: 0 10px;
    height: 34px;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.logs-btn:hover, .logs-toolbar select:hover { border-color: var(--border-strong); }
.logs-btn.is-active { border-color: var(--ok); color: var(--ok); }

.logs-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 7px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 0.73rem;
    color: var(--muted-dim);
    font-family: var(--font-mono);
    flex-wrap: wrap;
}

.logs-viewer-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 18px 18px;
    scroll-behavior: smooth;
    position: relative;
}
.logs-line {
    font-family: var(--font-mono);
    font-size: 0.785rem;
    line-height: 1.65;
    color: #C0C0C8;
    white-space: pre-wrap;
    word-break: break-word;
    padding: 1px 6px;
    border-radius: 3px;
    border-left: 2px solid transparent;
}
.logs-line.lvl-error { color: #FFA8AB; background: rgba(229, 72, 77, 0.07); border-left-color: var(--down); }
.logs-line.lvl-warn { color: #F0C878; background: rgba(229, 169, 61, 0.06); border-left-color: var(--warn); }
.logs-line.lvl-ok { color: #8FE0B4; }
.logs-line.lvl-info { color: #A9BEFF; }
.logs-line mark { background: rgba(229, 169, 61, 0.35); color: #fff; border-radius: 2px; }
.logs-line.is-new { animation: line-in 0.5s var(--ease) both; }
@keyframes line-in {
    from { background: var(--accent-soft); }
}

.logs-empty { color: var(--muted-dim); font-size: 0.88rem; padding: 40px; text-align: center; }

.logs-jump-btn {
    position: absolute;
    bottom: 16px;
    right: 22px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 9px 15px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    animation: fade-up 0.2s var(--ease) both;
}
.logs-jump-btn:hover { background: var(--accent-hover); }

.ssh-summary-box {
    margin: 12px 18px 0;
    padding: 13px 15px;
    background: var(--ink);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

/* ================================================================
   Audit-Tabelle
   ================================================================ */

.audit-table-wrap { overflow-x: auto; padding: 0; -webkit-overflow-scrolling: touch; }
.audit-table { width: 100%; border-collapse: collapse; font-size: 0.83rem; min-width: 620px; }
.audit-table th {
    text-align: left;
    padding: 11px 16px;
    color: var(--muted);
    font-size: 0.69rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    position: sticky;
    top: 0;
    background: var(--panel);
}
.audit-table td { padding: 10px 16px; border-bottom: 1px solid var(--border); }
.audit-table tr:last-child td { border-bottom: none; }
.audit-table tbody tr { transition: background 0.12s ease; }
.audit-table tbody tr:hover { background: var(--panel-hover); }
.audit-table .mono { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
.audit-empty { text-align: center; color: var(--muted); padding: 32px !important; }

/* ---------------- Sicherheit / IP-Sperren ---------------- */

.ip-ban-form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 8px;
}
.ip-ban-form input[type="text"] { font-family: var(--font-mono); }

/* ================================================================
   Footer
   ================================================================ */

.dash-footer {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 22px 20px 30px;
    font-size: 0.73rem;
    color: var(--muted-dim);
}

/* ================================================================
   Responsive — Mobile bekommt denselben Funktionsumfang
   ================================================================ */

@media (max-width: 900px) {
    .dash-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        width: min(78vw, 280px);
        transform: translateX(-100%);
        transition: transform 0.26s var(--ease);
        box-shadow: var(--shadow-lg);
    }
    body.sidebar-open .dash-sidebar { transform: translateX(0); }
    /* Auf Mobil ist der Drawer immer voll ausgeklappt — Collapse gilt nur für Desktop. */
    body.sidebar-collapsed .dash-sidebar { width: min(78vw, 280px); }
    body.sidebar-collapsed .sidebar-item-label,
    body.sidebar-collapsed .dash-title { display: block; }
    body.sidebar-collapsed .sidebar-item,
    body.sidebar-collapsed .sidebar-user { justify-content: flex-start; padding: 0 11px; gap: 11px; }
    body.sidebar-collapsed .sidebar-item::after,
    body.sidebar-collapsed .sidebar-user::after { content: none; }
    body.sidebar-collapsed .sidebar-brand { justify-content: flex-start; padding: 4px 6px 20px; }
    /* Auf schmalen Schirmen gibt es den eigenen Menueknopf in der
       Kopfzeile (.sidebar-open-btn); der Einklapp-Knopf ist dort
       ueberfluessig und darf verschwinden. */
    body.sidebar-collapsed .sidebar-collapse-btn { display: none; }

    .sidebar-open-btn { display: flex; }
    .dash-header { padding: 10px 16px; }
    .dash-main { padding: 20px 16px 12px; }

    .logs-shell { flex-direction: column; height: auto; }
    .logs-source-panel { width: 100%; max-height: 210px; }
    .logs-viewer { height: 62vh; min-height: 380px; }
    .logs-toolbar-title { width: 100%; margin-right: 0; }
    .logs-search { flex: 1; width: auto; min-width: 130px; }

    .dash-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

@media (max-width: 560px) {
    .dash-grid, .dash-grid-charts { grid-template-columns: 1fr; }
    .dash-header-title { display: none; }
    .cmdk-hint { display: none; }
    /* 34px waren zum Treffen mit dem Finger zu klein (Richtwert 44px). */
    .header-icon-btn { width: 42px; min-height: 42px; padding: 0; justify-content: center; }
    .toast-container { left: 12px; right: 12px; bottom: 12px; max-width: none; }
    .dash-main { padding: 18px 14px 12px; }
    .dash-card { padding: 16px; }
    .cmdk-overlay { padding: 8vh 12px 12px; }
    .logs-viewer-body { padding: 12px 12px 16px; }
    .logs-line { font-size: 0.74rem; }
    .ssh-login-row { flex-direction: column; gap: 2px; }
}

/* ------------------------------------------------------------------------
   WEICHE SEITENUEBERGAENGE
   Beim Wechsel zwischen den Unterseiten blendet der Browser ueber, statt
   kurz weiss aufzublitzen. Fuehlt sich an wie in einer App, obwohl die
   Seite neu geladen wird. Aeltere Browser ignorieren die Regel.
   ------------------------------------------------------------------------ */

@view-transition {
    navigation: auto;
}

::view-transition-old(root) { animation: dash-fade-out 0.16s ease forwards; }
::view-transition-new(root) { animation: dash-fade-in  0.22s ease forwards; }

@keyframes dash-fade-out { to { opacity: 0; } }
@keyframes dash-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) { animation-duration: 0.01s; }
    @keyframes dash-fade-in { from { opacity: 1; transform: none; } }
}

/* ------------------------------------------------------------------------
   SERVER-UEBERSICHT (system.php)
   ------------------------------------------------------------------------ */

.sys-big {
    font-size: 2.4rem; font-weight: 700; line-height: 1.1;
    margin: 4px 0 2px; font-variant-numeric: tabular-nums;
}
.sys-big.ok   { color: var(--ok, #4ade80); }
.sys-big.warn { color: var(--warn, #fbbf24); }
.warn { color: var(--warn, #fbbf24); }

.sys-hinweis {
    margin-top: 10px; padding: 8px 12px; border-radius: 8px;
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.3);
    font-size: 0.85rem;
}
.sys-zwischen {
    margin: 18px 0 8px; font-size: 0.78rem; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--muted);
}
.sys-fuss { margin-top: 12px; font-size: 0.78rem; }

.sys-details { margin-top: 12px; }
.sys-details summary { cursor: pointer; font-size: 0.85rem; color: var(--muted); }
.sys-details summary:hover { color: var(--text); }
.sys-liste {
    margin: 8px 0 0; padding-left: 18px; font-size: 0.8rem;
    color: var(--muted); max-height: 220px; overflow-y: auto;
}

/* Balken fuer die Verzeichnisgroessen */
.sys-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.sys-bars li {
    display: grid; grid-template-columns: minmax(90px, 1.2fr) 2fr auto;
    align-items: center; gap: 10px; font-size: 0.82rem;
}
.sys-bar-label {
    font-family: var(--font-mono); color: var(--muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sys-bar-track {
    height: 6px; background: var(--border); border-radius: 4px; overflow: hidden;
}
.sys-bar-fill {
    display: block; height: 100%; border-radius: 4px;
    background: linear-gradient(90deg, var(--accent, #6366f1), var(--accent, #6366f1));
}
.sys-bar-wert {
    font-family: var(--font-mono); font-size: 0.78rem;
    color: var(--muted); white-space: nowrap; text-align: right; min-width: 56px;
}

.sys-tag {
    display: inline-block; padding: 2px 9px; border-radius: 999px;
    font-size: 0.72rem; letter-spacing: 0.02em; white-space: nowrap;
}
.sys-tag.ok      { background: rgba(74, 222, 128, 0.14); color: #4ade80; }
.sys-tag.warn    { background: rgba(251, 191, 36, 0.14); color: #fbbf24; }
.sys-tag.neutral { background: rgba(255, 255, 255, 0.07); color: var(--muted); }

/* Auf schmalen Geraeten: Balken unter das Label */
@media (max-width: 560px) {
    .sys-bars li { grid-template-columns: 1fr auto; }
    .sys-bar-track { grid-column: 1 / -1; order: 3; }
}

/* Live-Anzeige auf system.php */
.live-punkt {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: #4ade80; margin-left: 8px; vertical-align: middle;
    animation: live-puls 2s ease-in-out infinite;
}
.live-punkt.aus { background: var(--muted); animation: none; }
@keyframes live-puls {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

.live-balken {
    height: 6px; background: var(--border); border-radius: 4px;
    overflow: hidden; margin: 6px 0 8px;
}
.live-balken-fill {
    height: 100%; width: 0; border-radius: 4px;
    background: #4ade80; transition: width 0.6s ease, background 0.6s ease;
}
.live-verlauf { margin-top: 12px; line-height: 0; }
.live-verlauf canvas { width: 100%; display: block; }

@media (prefers-reduced-motion: reduce) {
    .live-punkt { animation: none; }
    .live-balken-fill { transition: none; }
}

/* =====================================================================
   Zeitplaene (zeitplaene.php)
   ================================================================== */

/* Es gab bisher nur ok / down / unknown. Eine ueberfaellige Aufgabe ist
   aber weder das eine noch das andere: sie ist nicht fehlgeschlagen,
   sie ist ausgeblieben. */
.badge-warn {
    background: rgba(229, 169, 61, 0.1);
    color: var(--warn, #E5A93D);
    border-color: rgba(229, 169, 61, 0.25);
}

.zeitplan-plan { color: var(--muted); white-space: nowrap; font-size: 12.5px; }
.zeitplan-meldung {
    color: var(--muted); font-size: 12px;
    max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Eine fehlgeschlagene Aufgabe soll man auf einen Blick finden, ohne
   die Abzeichen einzeln zu lesen. */
.zeitplan-zeile.zeitplan-down  { background: rgba(229, 72, 77, 0.055); }
.zeitplan-zeile.zeitplan-warn  { background: rgba(229, 169, 61, 0.05); }
.zeitplan-hinweis {
    margin: 12px 2px 0; font-size: 12.5px; color: var(--muted-dim, #5C5C64);
}
.zeitplan-hinweis a { color: var(--accent, #4F6EF7); }

/* =====================================================================
   Zugriffe (zugriffe.php)
   ================================================================== */

.zugriff-wahl {
    display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px;
}
.zugriff-reiter {
    padding: 7px 13px; border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, .03);
    color: var(--muted); font-size: 13px; font-weight: 500;
    text-decoration: none; white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s;
}
.zugriff-reiter:hover { color: var(--paper); background: rgba(255, 255, 255, .07); }
.zugriff-reiter.aktiv {
    background: rgba(79, 110, 247, .16);
    border-color: rgba(79, 110, 247, .5);
    color: #C3CEFF;
}

.zugriff-gitter {
    display: grid; gap: 14px;
    grid-template-columns: 1fr;
}
@media (min-width: 900px) { .zugriff-gitter { grid-template-columns: 1fr 1fr; } }

.zugriff-block { padding: 16px 18px 18px; }
.zugriff-block h3 {
    font-size: 12px; letter-spacing: .07em; text-transform: uppercase;
    color: var(--muted-dim); font-weight: 600; margin: 0 0 12px;
}

.zugriff-zeile {
    display: grid; grid-template-columns: minmax(70px, 190px) 1fr auto;
    align-items: center; gap: 10px; padding: 4px 0;
}
/* Ein Abzeichen in einer Gitterzelle wird sonst auf die volle
   Spaltenbreite gezogen — aus "200" wird ein 190px breiter Kasten. */
.zugriff-zeile > .badge { justify-self: start; }
.zugriff-name {
    font-size: 12.5px; color: var(--paper);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zugriff-zahl {
    font-family: var(--font-mono, monospace); font-size: 12px;
    color: var(--muted); text-align: right; white-space: nowrap;
}
/* Der Balken traegt keine Information, die nicht auch als Zahl
   danebensteht — er macht die Verhaeltnisse nur auf einen Blick
   erfassbar. Deshalb ohne eigene Beschriftung. */
.zugriff-balken {
    height: 6px; border-radius: 999px;
    background: rgba(255, 255, 255, .06); overflow: hidden;
}
.zugriff-balken > span {
    display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, rgba(79,110,247,.55), var(--accent, #4F6EF7));
}

/* Tagesverlauf */
.zugriff-tag {
    display: flex; align-items: flex-end; gap: 3px; height: 132px;
}
.zugriff-saeule {
    flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
    align-items: center; height: 100%; gap: 5px;
}
.zugriff-saeule > span {
    width: 100%; border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, var(--accent, #4F6EF7), rgba(79,110,247,.35));
    min-height: 2px;
}
.zugriff-saeule em {
    font-style: normal; font-size: 9.5px; color: var(--muted-dim);
    font-family: var(--font-mono, monospace);
}
@media (max-width: 620px) {
    /* Auf schmalen Schirmen nur jede dritte Stunde beschriften. */
    .zugriff-saeule:not(:nth-child(3n+1)) em { visibility: hidden; }
}
.mono { font-family: var(--font-mono, monospace); }