/* Webhost-Admin v1.2 -- mit Dark Mode + Theme-Variables. */
*{box-sizing:border-box}
html[data-theme="light"]{
  --bg:#f7f6f1; --card:#fff; --border:#e5e3da; --text:#2c2c2a; --muted:#7a7a75;
  --accent-hover:color-mix(in srgb, var(--accent) 85%, black);
  --danger:#a32d2d; --ok:#3b6d11; --warn:#854f0b;
  --topbar-bg:#fff; --topbar-border:#e5e3da;
  --hover-bg:#fafaf6; --code-bg:#f4f3ee; --shadow:0 1px 4px rgba(0,0,0,0.06);
  --tag-bg:#e6f1fb; --tag-fg:#185fa5;
  --input-bg:#fafaf6;
}
html[data-theme="dark"]{
  --bg:#1d1e1c; --card:#262724; --border:#3a3b37; --text:#e6e4dc; --muted:#9b9a92;
  --accent-hover:color-mix(in srgb, var(--accent) 75%, white);
  --danger:#e16c6c; --ok:#9bd070; --warn:#e0a766;
  --topbar-bg:#1f201d; --topbar-border:#33342f;
  --hover-bg:#2c2d29; --code-bg:#33342f; --shadow:0 1px 4px rgba(0,0,0,0.4);
  --tag-bg:#1d3553; --tag-fg:#79b3e8;
  --input-bg:#2c2d29;
}
body{margin:0;font-family:-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.5}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
code{background:var(--code-bg);padding:1px 5px;border-radius:4px;font-size:12.5px;font-family:"SF Mono",Consolas,monospace}

/* Top-Bar */
.topbar{background:var(--topbar-bg);border-bottom:1px solid var(--topbar-border);padding:11px 22px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:10}
.topbar .brand a{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--text);letter-spacing:-0.01em}
.topbar .brand a:hover{text-decoration:none}
.topbar .logo{max-height:32px;max-width:140px}
.topbar nav{display:flex;align-items:center;gap:6px}
.topbar .nav-link{padding:6px 11px;font-size:13px;color:var(--muted);border-radius:6px;font-weight:500}
.topbar .nav-link:hover{background:var(--hover-bg);color:var(--text);text-decoration:none}
.user-pill{font-size:12.5px;color:var(--muted);padding:5px 10px;background:var(--hover-bg);border-radius:6px}
.theme-toggle{font-size:18px;line-height:1;padding:5px 9px;border-radius:6px;cursor:pointer;color:var(--text)}
.theme-toggle:hover{background:var(--hover-bg);text-decoration:none}

/* Hauptinhalt */
main{max-width:1100px;margin:0 auto;padding:24px 22px 40px}
footer{text-align:center;padding:20px;font-size:11px;color:var(--muted)}

/* Buttons */
.btn-primary,.btn-secondary,.btn-danger{display:inline-block;padding:8px 14px;border-radius:7px;font-size:13.5px;font-weight:500;cursor:pointer;border:0;font-family:inherit}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover);text-decoration:none;color:#fff}
.btn-secondary{background:var(--card);color:var(--text);border:1px solid var(--border)}
.btn-secondary:hover{background:var(--hover-bg);text-decoration:none;color:var(--text)}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{filter:brightness(0.9);color:#fff}
.btn-small{padding:5px 10px;font-size:12px}
.btn-tiny{padding:3px 8px;font-size:11.5px;background:var(--input-bg);color:var(--text);border:1px solid var(--border);border-radius:5px;cursor:pointer}
.btn-tiny:hover{background:var(--hover-bg)}
.btn-tiny:disabled{opacity:0.4;cursor:not-allowed}

/* Cards */
.card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:20px 22px;margin-bottom:18px;box-shadow:var(--shadow)}
.card h1,.card h2{margin-top:0;font-weight:500}
.card h2{font-size:15px;color:var(--muted);margin-bottom:12px;text-transform:uppercase;letter-spacing:0.5px}
.card h3{font-size:13.5px;font-weight:600;margin:18px 0 8px;color:var(--muted)}

/* Login */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh}
.login-body main{padding:0}
.login-card{max-width:380px;text-align:center}
.login-logo{margin-bottom:14px}
.login-logo img{max-height:80px;max-width:240px}
.login-card h1{margin:0 0 6px;font-size:21px}
.login-card .sub{color:var(--muted);font-size:13px;margin-bottom:18px}
.login-card form{display:flex;flex-direction:column;gap:13px;text-align:left}
.login-card label{font-size:12px;color:var(--muted);font-weight:500;display:flex;flex-direction:column;gap:4px}
.login-card input{padding:9px 11px;border:1px solid var(--border);border-radius:7px;font-size:14px;background:var(--input-bg);color:var(--text)}
.login-card input:focus{outline:none;border-color:var(--accent);background:var(--card)}

/* Suchfeld */
.search-input{padding:7px 11px;border:1px solid var(--border);border-radius:7px;background:var(--input-bg);color:var(--text);font-size:13.5px;font-family:inherit;min-width:200px}
.search-input:focus{outline:none;border-color:var(--accent)}

/* Page-Head */
.page-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px;gap:16px;flex-wrap:wrap}
.page-head h1{margin:8px 0 4px;font-size:22px;font-weight:500;letter-spacing:-0.01em}
.link-row{font-size:13px;color:var(--muted);margin-top:4px}
.link-row a{font-family:"SF Mono",Consolas,monospace;font-size:12.5px}
.project-desc-detail{margin-top:6px;font-size:13.5px;color:var(--muted)}

/* Projekt-Liste */
.project-list{display:grid;gap:11px}
.project-card{display:block;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px 18px;color:var(--text);transition:all 0.12s ease}
.project-card:hover{border-color:var(--accent);background:var(--hover-bg);text-decoration:none;transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,0.06)}
.project-name{font-size:15.5px;font-weight:500;margin-bottom:3px}
.project-slug{font-family:"SF Mono",Consolas,monospace;font-size:12px;color:var(--muted);margin-bottom:10px}
.project-desc{font-size:12.5px;color:var(--muted);margin-bottom:8px}
.project-meta{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--muted);align-items:center}
.meta-mute{font-style:italic}
.tag{display:inline-block;background:var(--tag-bg);color:var(--tag-fg);padding:1.5px 7px;border-radius:7px;font-size:11px;font-weight:500}

/* Badges */
.badge{display:inline-block;padding:2px 9px;border-radius:9px;font-size:11.5px;font-weight:500;letter-spacing:0.2px}
.badge-user_password{background:#e6f1fb;color:#185fa5}
.badge-password_only{background:#faeed8;color:#854f0b}
.badge-open_link{background:#e0f0d9;color:#3b6d11}
html[data-theme="dark"] .badge-user_password{background:#163958;color:#79b3e8}
html[data-theme="dark"] .badge-password_only{background:#4a3613;color:#e0a766}
html[data-theme="dark"] .badge-open_link{background:#27431b;color:#9bd070}

/* Forms */
.form-stack{display:flex;flex-direction:column;gap:14px;max-width:560px}
.form-stack label{font-size:12.5px;color:var(--muted);font-weight:500;display:flex;flex-direction:column;gap:4px}
.form-stack small{color:var(--muted);font-size:11.5px;margin-top:-8px}
.form-stack input,.form-stack select,.form-stack textarea{padding:8px 11px;border:1px solid var(--border);border-radius:7px;background:var(--input-bg);color:var(--text);font-size:14px;font-family:inherit}
.form-stack input:focus,.form-stack select:focus,.form-stack textarea:focus{outline:none;border-color:var(--accent);background:var(--card)}
.form-stack textarea{resize:vertical;min-height:60px}
.form-stack input[type="color"]{padding:2px;cursor:pointer}

.form-row{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.form-row input{padding:7px 10px;border:1px solid var(--border);border-radius:7px;background:var(--input-bg);color:var(--text);font-size:13.5px;flex:1;min-width:140px}
.form-row input[type="file"]{flex:2}
.form-row label{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.form-row label input{flex:none;min-width:auto}

/* Grid */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:14px}
@media (max-width:780px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* Tabellen */
table{width:100%;border-collapse:collapse;margin-top:8px;font-size:13px}
table th{text-align:left;color:var(--muted);font-weight:500;font-size:11.5px;text-transform:uppercase;letter-spacing:0.4px;padding:6px 8px;border-bottom:1px solid var(--border)}
table td{padding:7px 8px;border-bottom:1px solid var(--border);vertical-align:middle}
table tr:hover td{background:var(--hover-bg)}
.files .size{color:var(--muted);text-align:right;font-family:"SF Mono",Consolas,monospace;font-size:12px}
.users td:first-child{font-weight:500}
.logs code{font-size:11.5px}
.status-2xx{color:var(--ok);font-weight:600}
.status-3xx{color:var(--accent)}
.status-4xx{color:var(--warn);font-weight:600}
.status-5xx{color:var(--danger);font-weight:600}
table.mini{width:100%;font-size:12.5px}
table.mini td{padding:5px 6px;border-bottom:1px solid var(--border)}
table.mini td.num{text-align:right;color:var(--accent);font-weight:500;font-family:"SF Mono",Consolas,monospace;width:50px}
table.mini td.time{font-size:11px;color:var(--muted);font-family:"SF Mono",Consolas,monospace;text-align:right}

/* Stat-Grid */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:20px}
.stat-box{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:14px 16px;text-align:center;box-shadow:var(--shadow)}
.stat-num{font-size:24px;font-weight:600;color:var(--accent);letter-spacing:-0.02em}
.stat-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;margin-top:4px}

/* Bar-Chart */
.bar-chart{display:flex;align-items:flex-end;gap:6px;height:120px;padding:8px 0 30px;border-bottom:1px solid var(--border);margin-bottom:14px}
.bar{flex:1;text-align:center;position:relative;display:flex;flex-direction:column;align-items:center;height:100%}
.bar-fill{background:linear-gradient(180deg,var(--accent) 0%,var(--accent-hover) 100%);width:80%;min-height:4px;margin-top:auto;border-radius:4px 4px 0 0}
.bar-label{font-size:10px;color:var(--muted);margin-top:4px;position:absolute;bottom:-20px}
.bar-value{font-size:11px;color:var(--text);font-weight:500;position:absolute;bottom:-8px;background:var(--card);padding:0 4px}
.bar-chart-wide{height:80px;padding-bottom:18px}
.bar-chart-wide .bar-label{font-size:9px}
.bar-chart-wide .bar-value{display:none}

/* Tabellen-Scroll */
.table-scroll{overflow-x:auto;max-width:100%}
.table-scroll table{min-width:max-content}
.nowrap{white-space:nowrap}

/* Pagination */
.pagination{display:flex;justify-content:center;align-items:center;gap:14px;padding:14px 0;color:var(--muted);font-size:13px}
.pagination .page-info{font-weight:500}

/* Alerts */
.alert{padding:10px 14px;border-radius:7px;margin-bottom:14px;font-size:13.5px}
.alert-msg{background:#e0f0d9;color:#3b6d11;border:1px solid #b9d6a3}
.alert-error{background:#fcebeb;color:var(--danger);border:1px solid #f0b9b9}
html[data-theme="dark"] .alert-msg{background:#27431b;color:#9bd070;border-color:#3d6724}
html[data-theme="dark"] .alert-error{background:#4a1f1f;color:#e16c6c;border-color:#6e2e2e}

/* Empty-States */
.empty-state{background:var(--card);border:1px dashed var(--border);border-radius:10px;padding:48px 22px;text-align:center;color:var(--muted)}
.empty-state p{margin:0 0 14px}
.empty-mini{padding:14px 0;color:var(--muted);font-style:italic;font-size:13px}

/* Map (Leaflet override im Dark Mode) */
html[data-theme="dark"] .leaflet-tile{filter:brightness(0.6) contrast(1.1) saturate(0.8)}
html[data-theme="dark"] .leaflet-popup-content-wrapper,html[data-theme="dark"] .leaflet-popup-tip{background:var(--card);color:var(--text)}