/* =========================================================
   Meise Wartung – Stylesheet
   (c) 2026 Dennis Radke | RADKE.network
   ========================================================= */

:root{
  --red:        #e10915;
  --red-dark:   #b70710;
  --red-soft:   #fdecec;
  --ink:        #17171b;
  --ink-soft:   #3a3a42;
  --muted:      #6b7280;
  --line:       #e5e7eb;
  --line-soft:  #f0f1f3;
  --bg:         #0a0a0c;
  --card:       #ffffff;
  --green:      #1f9d55;
  --green-bg:   #e6f6ec;
  --amber:      #b7791f;
  --amber-bg:   #fdf3e0;
  --gray:       #4b5563;
  --gray-bg:    #eef0f2;
  --radius:     14px;
  --shadow:     0 10px 30px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.10);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font);
  color:var(--ink);
  background:
    radial-gradient(900px 600px at 18% -5%, #3a0a0a 0%, rgba(58,10,10,0) 55%),
    radial-gradient(800px 700px at 100% 0%, #1a0506 0%, rgba(26,5,6,0) 60%),
    var(--bg);
  background-attachment:fixed;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--red); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3{ line-height:1.2; }

/* ---------------- LOGIN ---------------- */
.login-wrap{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.login-card{
  position:relative;
  width:100%; max-width:360px;
  background:var(--card);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  padding:38px 32px 26px;
}
.login-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:6px;
  background:var(--red);
}
.login-logo{ display:block; width:118px; margin:6px auto 18px; }
.login-card h1{
  text-align:center; font-size:26px; font-weight:800; margin:0 0 6px; color:var(--ink);
}
.login-sub{ text-align:center; color:var(--muted); font-size:14px; margin:0 0 24px; }
.login-card label{ display:block; font-weight:700; font-size:14px; margin:0 0 7px; color:var(--ink); }
.login-card .field{ margin-bottom:16px; }
.login-card input[type=text],
.login-card input[type=password]{
  width:100%; padding:12px 14px; font-size:15px;
  border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink);
}
.login-card input:focus{ outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(225,9,21,.12); }
.remember{ display:flex; align-items:center; gap:9px; margin:4px 0 20px; font-weight:700; font-size:14px; }
.remember input{ width:17px; height:17px; }
.btn-login{
  width:100%; padding:13px; font-size:15px; font-weight:800; color:#fff;
  background:var(--red); border:none; border-radius:9px; cursor:pointer;
}
.btn-login:hover{ background:var(--red-dark); }
.login-foot{ text-align:center; color:var(--muted); font-size:12px; margin-top:22px; }
.login-error{
  background:var(--red-soft); color:var(--red-dark); border:1px solid #f5c2c2;
  padding:11px 13px; border-radius:9px; font-size:14px; margin-bottom:18px; text-align:center;
}

/* ---------------- TOPBAR / NAV ---------------- */
.topbar{
  position:sticky; top:0; z-index:50;
  background:#fff; border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(0,0,0,.04);
}
.topbar-inner{
  max-width:1180px; margin:0 auto; padding:0 18px;
  display:flex; align-items:center; gap:14px; min-height:62px;
}
.brand{ display:flex; align-items:center; gap:10px; color:var(--ink); font-weight:800; font-size:17px; white-space:nowrap; }
.brand:hover{ text-decoration:none; }
.brand img{ width:38px; height:38px; object-fit:contain; }
.mainnav{
  display:flex; gap:2px; flex:1; min-width:0;
  flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
}
.mainnav::-webkit-scrollbar{ height:0; display:none; }
.mainnav a{
  color:var(--ink-soft); font-weight:600; font-size:14px;
  padding:8px 10px; border-radius:9px; white-space:nowrap;
}
.mainnav a:hover{ background:var(--line-soft); text-decoration:none; }
.mainnav a.active{ background:var(--red-soft); color:var(--red-dark); }
.userbox{ display:flex; align-items:center; gap:12px; flex:none; }
.topbar-dl{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:10px; color:var(--ink-soft); flex:none; }
.topbar-dl:hover{ background:var(--line-soft); color:var(--red); text-decoration:none; }
.topbar-dl svg{ width:21px; height:21px; }
.topbar-bell{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:10px; color:var(--ink-soft); flex:none; background:none; border:none; cursor:pointer; padding:0; position:relative; }
.topbar-bell:hover{ background:var(--line-soft); color:var(--red); }
.topbar-bell svg{ width:21px; height:21px; }
.topbar-bell.active{ color:var(--red); }
.topbar-bell.active::after{ content:""; position:absolute; top:7px; right:8px; width:8px; height:8px;
  border-radius:50%; background:#16a34a; border:2px solid #fff; }
.nav-dl{ display:none; }
.nav-dl svg{ width:20px; height:20px; }
.user-link{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.15; color:var(--ink); }
.user-link:hover{ text-decoration:none; }
.user-link strong{ font-size:14px; }
.user-link span{ font-size:11.5px; color:var(--muted); }
.nav-toggle{
  display:none; margin-left:auto; background:none; border:1px solid var(--line);
  border-radius:8px; font-size:18px; padding:5px 11px; cursor:pointer; color:var(--ink);
}

/* ---------------- LAYOUT ---------------- */
.container{ max-width:1180px; margin:0 auto; padding:26px 18px 70px; }
.appfooter{ text-align:center; color:#9aa0a6; font-size:12px; padding:18px; }

.page-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin:0 0 18px; flex-wrap:wrap; }
.page-head h1{ color:#fff; font-size:24px; margin:0; font-weight:800; letter-spacing:.2px; }
.page-head .sub{ color:#c9ccd1; font-size:14px; margin-top:3px; }

.card{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:22px; margin-bottom:18px;
}
.card h2{ font-size:18px; margin:0 0 14px; }
.card h3{ font-size:15px; margin:18px 0 10px; }
.muted{ color:var(--muted); }
.small{ font-size:13px; }
hr.div{ border:none; border-top:1px solid var(--line); margin:18px 0; }

/* Grid */
.grid{ display:grid; gap:18px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

/* Stat-Kacheln */
.stat{
  background:#fff; border-radius:var(--radius); box-shadow:var(--shadow);
  padding:18px 20px; display:flex; align-items:center; gap:16px;
  position:relative; overflow:hidden;
  transition:transform .13s ease, box-shadow .13s ease;
}
.stat:hover{ transform:translateY(-3px); box-shadow:0 10px 26px rgba(16,24,40,.10); }
.stat .stat-ico{
  width:54px; height:54px; border-radius:15px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--red-soft); color:var(--red);
}
.stat .stat-ico svg{ width:27px; height:27px; }
.stat .stat-body{ min-width:0; }
.stat .num{ font-size:32px; font-weight:800; color:var(--ink); line-height:1; letter-spacing:-0.5px; }
.stat .lbl{ color:var(--muted); font-size:13px; margin-top:5px; font-weight:600; }
.stat a{ color:inherit; }

/* farbiger Akzentbalken links */
.stat::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--red); }
.stat.tone-amber::before{ background:#f59e0b; }
.stat.tone-red::before{ background:#dc2626; }
.stat.tone-violet::before{ background:#7c3aed; }
.stat.tone-blue::before{ background:#0ea5e9; }
.stat.tone-green::before{ background:#16a34a; }

/* Icon-Badge-Farben je Ton */
.stat.tone-amber .stat-ico{ background:#fef3c7; color:#d97706; }
.stat.tone-red .stat-ico{ background:#fee2e2; color:#dc2626; }
.stat.tone-violet .stat-ico{ background:#ede9fe; color:#7c3aed; }
.stat.tone-blue .stat-ico{ background:#e0f2fe; color:#0284c7; }
.stat.tone-green .stat-ico{ background:#dcfce7; color:#16a34a; }
.stat.tone-teal .stat-ico{ background:#ccfbf1; color:#0d9488; }
.stat.tone-teal::before{ background:#14b8a6; }

/* Automatisch umbrechendes Raster für die Kennzahl-Kacheln */
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:14px; margin-bottom:18px; }

/* Trendpfeil in der Kachel */
.stat-trend{ margin-top:8px; font-size:12px; font-weight:800; display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.stat-trend .tr-arrow{ font-size:11px; line-height:1; }
.stat-trend .tr-lbl{ font-weight:600; color:var(--muted); }
.trend-good{ color:#16a34a; }
.trend-bad{ color:#dc2626; }
.trend-flat{ color:#9aa2b1; }

/* Weitere Kachel-Töne + Text-Kacheln */
.stat.tone-indigo .stat-ico{ background:#e0e7ff; color:#4f46e5; }
.stat.tone-indigo::before{ background:#6366f1; }
.stat.tone-sky .stat-ico{ background:#e0f2fe; color:#0369a1; }
.stat.tone-sky::before{ background:#0ea5e9; }
.stat.tone-slate .stat-ico{ background:#e2e8f0; color:#475569; }
.stat.tone-slate::before{ background:#64748b; }
.stat .stat-primary{ font-size:19px; font-weight:800; color:var(--ink); line-height:1.15; }
.wifi-pass{ display:flex; align-items:center; gap:6px; margin-top:7px; }
.wifi-pass code{ font-family:ui-monospace,Menlo,Consolas,monospace; background:#fff; border:1px solid var(--line); padding:4px 8px; border-radius:7px; font-size:13px; }

/* Abschnitts-Titel mit Icon */
.section-title h2{ display:inline-flex; align-items:center; gap:8px; }
.section-title h2 svg.sec-ico{ width:18px; height:18px; color:var(--red); }

/* Liste: Fällige Wartungen */
.due-list{ display:flex; flex-direction:column; gap:10px; }
.due-item{ display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line);
  border-left:4px solid #f59e0b; border-radius:11px; background:#fff; text-decoration:none; color:var(--ink);
  transition:box-shadow .12s ease, transform .12s ease; }
.due-item:hover{ box-shadow:0 6px 18px rgba(16,24,40,.08); transform:translateY(-1px); text-decoration:none; }
.due-item .di-body{ flex:1; min-width:0; }
.due-item .di-title{ font-weight:700; }
.due-item .di-sub{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.due-item .di-go{ font-weight:800; color:var(--red); font-size:13px; white-space:nowrap; }
.due-item:hover .di-go{ text-decoration:underline; }

/* Liste: Letzte Aktivitäten */
.act-list{ display:flex; flex-direction:column; }
.act-item{ display:flex; align-items:center; gap:12px; padding:11px 6px; border-bottom:1px solid var(--line-soft);
  text-decoration:none; color:var(--ink); }
.act-item:last-child{ border-bottom:none; }
.act-item:hover{ background:var(--line-soft); border-radius:9px; text-decoration:none; }
.act-dot{ width:10px; height:10px; border-radius:50%; flex:none; background:var(--muted); }
.act-dot.done{ background:#16a34a; } .act-dot.issue{ background:#d97706; } .act-dot.skipped{ background:#9aa2b1; }
.act-body{ flex:1; min-width:0; }
.act-title{ font-weight:700; }
.act-sub{ font-size:12px; color:var(--muted); margin-top:1px; }

/* Zählerstände: Standort-Panel + aktueller Monat hervorgehoben */
.meter-loc, .loc-group{ border:1px solid var(--line); border-radius:12px; padding:12px 15px; margin-bottom:14px; background:#fcfcfd; }
.meter-loc h3, .loc-group h3{ margin:2px 0 10px; font-size:15px; display:flex; align-items:center; gap:7px; }
.meter-loc h3 svg, .loc-group h3 svg{ width:16px; height:16px; color:var(--red); }
.loc-group .loc-count{ background:var(--line-soft); color:var(--ink-soft); font-size:12px; font-weight:800;
  border-radius:999px; padding:2px 9px; }
.table th.col-current, .table td.col-current{ background:#fff7ed; }
.table td.col-current{ font-weight:800; color:var(--ink); }

/* Seiten-Icon-Badges (Unterseiten, wie Dashboard-Kacheln) */
.page-head h1{ display:flex; align-items:center; gap:11px; }
.page-ico{ display:inline-flex; width:42px; height:42px; border-radius:12px; align-items:center; justify-content:center; flex:none; }
.page-ico svg{ width:22px; height:22px; }
.page-ico.tone-amber{ background:#fef3c7; color:#d97706; }
.page-ico.tone-red{ background:#fee2e2; color:#dc2626; }
.page-ico.tone-violet{ background:#ede9fe; color:#7c3aed; }
.page-ico.tone-blue{ background:#e0f2fe; color:#0284c7; }
.page-ico.tone-green{ background:#dcfce7; color:#16a34a; }
.page-ico.tone-teal{ background:#ccfbf1; color:#0d9488; }
.page-ico.tone-indigo{ background:#e0e7ff; color:#4f46e5; }
.page-ico.tone-sky{ background:#e0f2fe; color:#0369a1; }
.page-ico.tone-slate{ background:#e2e8f0; color:#475569; }

/* Farbakzent oben auf Listen-Karten */
.card.accent-amber{ border-top:4px solid #f59e0b; }
.card.accent-red{ border-top:4px solid #dc2626; }
.card.accent-violet{ border-top:4px solid #7c3aed; }
.card.accent-blue{ border-top:4px solid #0ea5e9; }
.card.accent-green{ border-top:4px solid #16a34a; }
.card.accent-teal{ border-top:4px solid #14b8a6; }
.card.accent-indigo{ border-top:4px solid #6366f1; }
.card.accent-sky{ border-top:4px solid #0ea5e9; }
.card.accent-slate{ border-top:4px solid #64748b; }

/* ---------------- BUTTONS ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:7px; justify-content:center;
  background:var(--red); color:#fff; font-weight:700; font-size:14.5px;
  padding:10px 16px; border:none; border-radius:9px; cursor:pointer; text-decoration:none;
}
.btn:hover{ background:var(--red-dark); text-decoration:none; color:#fff; }
.btn-secondary{ background:#fff; color:var(--ink); border:1px solid var(--line); }
.btn-secondary:hover{ background:var(--line-soft); color:var(--ink); }
.btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--line); }
.btn-ghost:hover{ background:var(--line-soft); color:var(--ink); }
.btn-danger{ background:#fff; color:var(--red-dark); border:1px solid #f0bcbc; }
.btn-danger:hover{ background:var(--red-soft); color:var(--red-dark); }
.btn-sm{ padding:6px 11px; font-size:13px; border-radius:8px; }
.btn-icon{ padding:7px 9px; line-height:0; }
.btn-icon svg{ width:16px; height:16px; display:block; }
.btn-block{ width:100%; }
.btn-row{ display:flex; gap:10px; flex-wrap:wrap; }

/* Sortierbare Tabellenköpfe */
th.th-sort{ cursor:pointer; user-select:none; white-space:nowrap; position:relative; padding-right:20px; }
th.th-sort:hover{ color:var(--red); }
th.th-sort::after{ content:"⇅"; position:absolute; right:6px; opacity:.35; font-size:12px; }
th.th-sort.sorted-asc::after{ content:"▲"; opacity:.9; font-size:10px; }
th.th-sort.sorted-desc::after{ content:"▼"; opacity:.9; font-size:10px; }

/* Suchfeld über Tabellen */
.table-search{ display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.table-search input{ max-width:420px; }
.table-search .muted{ font-size:13px; }

/* ---------------- FORMULARE ---------------- */
.form-group{ margin-bottom:16px; }
.form-group label{ display:block; font-weight:700; font-size:14px; margin-bottom:7px; }
.form-group .hint{ font-size:12.5px; color:var(--muted); margin-top:5px; }
input[type=text], input[type=password], input[type=email], input[type=number],
input[type=date], input[type=datetime-local], input[type=time], input[type=search], select, textarea{
  width:100%; padding:11px 13px; font-size:15px; font-family:inherit;
  border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink);
}
textarea{ min-height:96px; resize:vertical; }
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(225,9,21,.12);
}
input[type=file]{
  width:100%; padding:10px; border:1px dashed var(--line); border-radius:9px; background:#fafafa; font-size:14px;
}
.check{ display:flex; align-items:center; gap:9px; font-weight:600; }
.check input{ width:17px; height:17px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* ---------------- TABELLEN ---------------- */
.table-wrap{ overflow-x:auto; }
table.table{ width:100%; border-collapse:collapse; font-size:14.5px; }
table.table th{
  text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.4px;
  color:var(--muted); padding:10px 12px; border-bottom:2px solid var(--line);
}
table.table td{ padding:11px 12px; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
table.table tr.clickable{ cursor:pointer; }
table.table tr.clickable:hover td{ background:#fafbfc; }
table.table td.actions{ text-align:right; white-space:nowrap; }
.empty{ text-align:center; color:var(--muted); padding:34px 12px; }

/* ---------------- BADGES ---------------- */
.badge{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:700; }
.badge-red{ background:var(--red-soft); color:var(--red-dark); }
.badge-green{ background:var(--green-bg); color:var(--green); }
.badge-amber{ background:var(--amber-bg); color:var(--amber); }
.badge-gray{ background:var(--gray-bg); color:var(--gray); }
.badge-role{ background:#eef2ff; color:#3b4cca; }
.chip{ display:inline-block; background:var(--line-soft); color:var(--ink-soft); border-radius:7px; padding:2px 9px; font-size:12.5px; margin:2px 3px 2px 0; }
.chip-tech{ background:#e0e7ff; color:#4f46e5; font-weight:700; }

/* ---------------- FLASH ---------------- */
.flash{ padding:12px 16px; border-radius:10px; margin-bottom:16px; font-size:14.5px; font-weight:600; }
.flash-success{ background:var(--green-bg); color:var(--green); border:1px solid #bfe6cc; }
.flash-error{ background:var(--red-soft); color:var(--red-dark); border:1px solid #f5c2c2; }
.flash-info{ background:#e8f1fd; color:#1d4ed8; border:1px solid #c4dafc; }

/* ---------------- DETAIL / GALERIE ---------------- */
.detail-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:18px; align-items:start; }
.kv{ display:grid; grid-template-columns:160px 1fr; gap:8px 14px; font-size:14.5px; }
.kv dt{ color:var(--muted); font-weight:600; }
.kv dd{ margin:0; color:var(--ink); }
.guide-photo img{ width:100%; border-radius:10px; border:1px solid var(--line); }

.gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; }
.gallery a, .gallery .media{
  display:block; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#000; aspect-ratio:4/3;
}
.gallery img{ width:100%; height:100%; object-fit:cover; display:block; }
.gallery video{ width:100%; height:100%; object-fit:cover; display:block; background:#000; }
.media-badge{ position:relative; }
.media-badge .tag{
  position:absolute; left:7px; top:7px; background:rgba(0,0,0,.7); color:#fff;
  font-size:11px; padding:2px 7px; border-radius:6px; font-weight:700;
}

.file-preview{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.file-preview .pv{ width:74px; height:74px; border-radius:8px; overflow:hidden; border:1px solid var(--line); background:#f3f4f6; display:flex; align-items:center; justify-content:center; }
.file-preview .pv img{ width:100%; height:100%; object-fit:cover; }
.file-preview .pv span{ font-size:11px; color:var(--muted); padding:4px; text-align:center; word-break:break-all; }

.section-title{ display:flex; align-items:center; justify-content:space-between; margin:0 0 14px; }
.section-title h2{ margin:0; }

.pwfield{ display:flex; align-items:center; gap:8px; }
.pwfield code{ font-family:ui-monospace,Menlo,Consolas,monospace; background:var(--line-soft); padding:4px 9px; border-radius:7px; font-size:13.5px; }

/* ---------------- BEARBEITUNGSHISTORIE ---------------- */
.history{ display:flex; flex-direction:column; gap:0; }
.history-item{ position:relative; padding:10px 0 12px 16px; border-left:2px solid var(--line); }
.history-item:last-child{ border-left-color:transparent; }
.history-item::before{
  content:""; position:absolute; left:-6px; top:14px; width:10px; height:10px;
  border-radius:50%; background:var(--red); border:2px solid #fff;
}
.history-meta{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.history-meta strong{ font-size:14.5px; }
.history-note{ margin-top:4px; font-size:14px; color:var(--ink-soft); white-space:pre-line; }

/* ---------------- RESPONSIVE ---------------- */
@media (min-width: 881px) and (max-width: 1100px){
  .brand span{ display:none; }
  .topbar-inner{ gap:10px; }
}
@media (max-width: 880px){
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .grid-4{ grid-template-columns:1fr 1fr; }
  .detail-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .nav-toggle{ display:block; }
  .mainnav{ display:none; order:3; flex-basis:100%; flex-direction:column; padding-bottom:10px; flex-wrap:wrap; overflow-x:visible; }
  .mainnav.open{ display:flex; }
  .topbar-dl{ display:none; }
  .mainnav .nav-dl{ display:inline-flex; align-items:center; gap:9px; color:var(--red); font-weight:700; padding:10px; margin-top:4px; border-top:1px solid var(--line-soft); }
  .mainnav .nav-dl:hover{ background:var(--red-soft); border-radius:9px; text-decoration:none; }
  .userbox{ margin-left:auto; }
  .kv{ grid-template-columns:1fr; gap:2px 0; }
  .kv dt{ margin-top:8px; }
}
@media (max-width: 520px){
  .grid-4{ grid-template-columns:1fr; }
  .user-link strong{ font-size:13px; }
  .page-head h1{ font-size:20px; }
}