:root {
  --bg: #091018;
  --bg-soft: #0d141d;
  --sidebar: #071019;
  --panel: #111923;
  --panel-2: #151e29;
  --line: #25303c;
  --line-soft: #1d2731;
  --text: #f5f7fa;
  --muted: #95a0ad;
  --muted-2: #6f7b89;
  --green: #45d483;
  --green-soft: rgba(69, 212, 131, .12);
  --orange: #ff9d2e;
  --orange-soft: rgba(255, 157, 46, .12);
  --red: #ff5c64;
  --red-soft: rgba(255, 92, 100, .12);
  --blue: #3b82f6;
  --shadow: 0 16px 48px rgba(0, 0, 0, .22);
  --radius: 14px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 85% 10%, rgba(27, 74, 98, .12), transparent 28%),
    linear-gradient(180deg, #081019 0%, #0a1119 100%);
}

button,
input,
select {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid rgba(69, 212, 131, .7);
  outline-offset: 2px;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 24px 14px 18px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line-soft);
  background: rgba(5, 12, 19, .96);
  backdrop-filter: blur(12px);
  z-index: 20;
}

.brand {
  min-height: 66px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 10px 20px;
  text-decoration: none;
  color: var(--text);
}

.brand-mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 13px;
  background: #edf2f6;
  overflow: hidden;
}

.brand-mark img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.brand-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.brand-title {
  font-size: 17px;
  font-weight: 750;
  letter-spacing: .08em;
  line-height: 1.05;
}

.brand-subtitle {
  color: var(--green);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
}

.sidebar-nav {
  display: grid;
  gap: 7px;
  padding: 10px 0;
}

.nav-link {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #c9d0d8;
  text-decoration: none;
  font-size: 14px;
  font-weight: 590;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.nav-link svg {
  width: 19px;
  height: 19px;
  stroke-width: 1.8;
  color: #9aa5b2;
  flex: 0 0 auto;
}

.nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .04);
}

.nav-link.active {
  color: #fff;
  background: linear-gradient(90deg, rgba(37, 53, 63, .78), rgba(21, 34, 43, .92));
  border-color: rgba(88, 111, 126, .18);
}

.nav-link.active svg {
  color: var(--green);
}

.nav-link.active::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 2px;
  background: var(--green);
}

.sidebar-spacer {
  flex: 1;
}

.system-health-card {
  margin: 16px 8px 12px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(24, 36, 46, .9), rgba(13, 22, 31, .9));
}

.system-health-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 700;
}

.health-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(69, 212, 131, .08);
}

#connectionStatus {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.sidebar-footer {
  padding: 10px 12px 0;
  color: var(--muted-2);
  font-size: 10px;
}

.app-main {
  min-width: 0;
}

.topbar {
  min-height: 94px;
  padding: 25px 34px 19px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.page-title {
  margin: 0;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.page-subtitle {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.topbar-actions,
#userMenu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.push-button,
.user-chip,
.topbar-link,
.logout-button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: linear-gradient(180deg, #18212b, #141c25);
  color: #eef2f5;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
}

.push-button,
.logout-button {
  cursor: pointer;
  padding: 0 13px;
}

.push-button:hover,
.logout-button:hover,
.user-chip:hover,
.topbar-link:hover {
  border-color: #3a4653;
  background: #1a2530;
}

.push-button {
  font-size: 13px;
  font-weight: 650;
}

.user-chip,
.topbar-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 650;
}

.user-avatar {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
}

.logout-button {
  font-size: 13px;
  color: #cbd3dc;
}

.dashboard {
  padding: 0 34px 36px;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.summary-card {
  min-height: 118px;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(19, 29, 39, .98), rgba(15, 24, 33, .98));
  box-shadow: var(--shadow);
}

.summary-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 12px;
}

.summary-icon svg {
  width: 29px;
  height: 29px;
  stroke-width: 1.8;
}

.summary-card.total .summary-icon,
.summary-card.ok .summary-icon {
  color: var(--green);
  background: var(--green-soft);
}

.summary-card.warning .summary-icon {
  color: var(--orange);
  background: var(--orange-soft);
}

.summary-card.critical .summary-icon {
  color: var(--red);
  background: var(--red-soft);
}

.summary-label {
  margin-bottom: 2px;
  color: #f4f6f8;
  font-size: 13px;
}

.summary-value {
  font-size: 31px;
  font-weight: 760;
  line-height: 1.05;
}

.summary-note {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(360px, 1.15fr) minmax(300px, .9fr);
  gap: 18px;
  align-items: stretch;
  margin-bottom: 18px;
}

.panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(18, 27, 37, .98), rgba(13, 22, 31, .98));
  box-shadow: var(--shadow);
  overflow: hidden;
}

.panel-header {
  min-height: 55px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 17px;
  border-bottom: 1px solid var(--line-soft);
}

.panel-title {
  margin: 0;
  font-size: 14px;
  font-weight: 720;
}

.panel-subtle {
  color: var(--muted);
  font-size: 11px;
}

.panel-content {
  padding: 18px;
}

.status-panel-content {
  min-height: 285px;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(130px, .8fr);
  align-items: center;
  gap: 10px;
}

.donut-wrap {
  display: grid;
  place-items: center;
}

.status-donut {
  --ok-angle: 0deg;
  --warning-angle: 0deg;
  --critical-angle: 0deg;
  width: 190px;
  height: 190px;
  display: grid;
  place-items: center;
  position: relative;
  border-radius: 50%;
  background:
    conic-gradient(
      var(--green) 0deg var(--ok-angle),
      var(--orange) var(--ok-angle) var(--warning-angle),
      var(--red) var(--warning-angle) var(--critical-angle),
      #33404c var(--critical-angle) 360deg
    );
  box-shadow: inset 0 0 28px rgba(0, 0, 0, .22);
}

.status-donut::after {
  content: "";
  position: absolute;
  inset: 17px;
  border-radius: 50%;
  background: #111a23;
  border: 1px solid rgba(255, 255, 255, .04);
}

.donut-center {
  position: relative;
  z-index: 1;
  text-align: center;
}

.donut-value {
  font-size: 27px;
  font-weight: 760;
}

.donut-label {
  margin-top: 3px;
  color: #dce2e8;
  font-size: 13px;
}

.legend {
  display: grid;
  gap: 14px;
}

.legend-row {
  display: grid;
  grid-template-columns: 8px 1fr;
  gap: 9px;
  align-items: start;
}

.legend-dot {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
}

.legend-name {
  color: var(--muted);
  font-size: 12px;
}

.legend-count {
  margin-top: 2px;
  color: #e8edf2;
  font-size: 11px;
}

.notification-panel .panel-content {
  display: grid;
  gap: 13px;
}

.notification-help {
  margin: -3px 0 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.notify-option {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 13px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: rgba(255, 255, 255, .018);
  cursor: pointer;
}

.notify-copy {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.notify-symbol {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-size: 14px;
}

.notify-symbol.warning {
  color: var(--orange);
  background: var(--orange-soft);
}

.notify-symbol.critical {
  color: var(--red);
  background: var(--red-soft);
}

.notify-symbol.restore {
  color: var(--green);
  background: var(--green-soft);
}

.notify-title {
  font-size: 12px;
  font-weight: 650;
}

.notify-subtitle {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.notify-option input {
  width: 36px;
  height: 19px;
  appearance: none;
  position: relative;
  flex: 0 0 auto;
  border-radius: 20px;
  background: #35404b;
  cursor: pointer;
  transition: background .16s ease;
}

.notify-option input::after {
  content: "";
  width: 15px;
  height: 15px;
  position: absolute;
  top: 2px;
  left: 2px;
  border-radius: 50%;
  background: #e9edf1;
  transition: transform .16s ease;
}

.notify-option input:checked {
  background: var(--green);
}

.notify-option input:checked::after {
  transform: translateX(17px);
}

#pushSettingsStatus {
  min-height: 17px;
  color: var(--green);
  font-size: 11px;
}

.incidents-panel .panel-content {
  padding: 0;
  max-height: 324px;
  overflow: auto;
}

.incident {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 11px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--line-soft);
}

.incident:last-child {
  border-bottom: 0;
}

.incident-indicator {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  font-weight: 800;
}

.incident.warning .incident-indicator {
  color: var(--orange);
  background: var(--orange-soft);
}

.incident.critical .incident-indicator {
  color: var(--red);
  background: var(--red-soft);
}

.incident-title {
  margin-bottom: 3px;
  color: #f0f3f6;
  font-size: 12px;
  font-weight: 700;
}

.incident-meta {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.empty {
  padding: 30px 18px;
  color: var(--muted-2);
  text-align: center;
  font-size: 12px;
}

.systems-panel {
  margin-bottom: 18px;
}

.systems-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
}

.toolbar-controls {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.search-control {
  min-width: 230px;
  position: relative;
}

.search-control svg {
  width: 16px;
  height: 16px;
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.search-control input,
.status-filter {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #18212b;
  color: #e9edf2;
  font-size: 12px;
}

.search-control input {
  width: 100%;
  padding: 0 12px 0 35px;
}

.status-filter {
  padding: 0 32px 0 11px;
}

.search-control input::placeholder {
  color: #75818e;
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 12px 15px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--line-soft);
}

th {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .01em;
}

td {
  color: #dfe5eb;
  font-size: 11px;
}

tbody tr {
  transition: background .14s ease;
}

tbody tr:hover {
  background: rgba(255, 255, 255, .018);
}

tbody tr:last-child td {
  border-bottom: 0;
}

.installation-link {
  color: #f3f6f8;
  text-decoration: none;
  font-weight: 700;
}

.installation-link:hover {
  color: var(--green);
}

.installation-primary {
  display: flex;
  align-items: center;
  gap: 9px;
}

.installation-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.installation-dot.ok {
  background: var(--green);
}

.installation-dot.warning {
  background: var(--orange);
}

.installation-dot.critical,
.installation-dot.offline {
  background: var(--red);
}

.installation-dot.unknown {
  background: #7b8794;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 23px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
}

.status::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.status-ok {
  color: var(--green);
  background: var(--green-soft);
}

.status-warning {
  color: var(--orange);
  background: var(--orange-soft);
}

.status-critical,
.status-offline {
  color: var(--red);
  background: var(--red-soft);
}

.status-unknown {
  color: #a2adb9;
  background: rgba(162, 173, 185, .1);
}

.incident-count {
  display: inline-flex;
  min-width: 27px;
  justify-content: center;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .04);
  color: #dce3ea;
}

.error {
  padding: 18px;
  color: #ff9298;
}

.mobile-nav-toggle {
  display: none;
}

@media (max-width: 1260px) {
  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .incidents-panel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 250px;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: 20px 0 60px rgba(0,0,0,.35);
  }

  body.sidebar-open .sidebar {
    transform: translateX(0);
  }

  .mobile-nav-toggle {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #151e27;
    color: #eef2f5;
    cursor: pointer;
  }

  .topbar {
    padding: 18px 18px 14px;
    align-items: center;
  }

  .title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .page-subtitle {
    display: none;
  }

  .dashboard {
    padding: 0 18px 26px;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .incidents-panel {
    grid-column: auto;
  }

  .status-panel-content {
    min-height: auto;
  }
}

@media (max-width: 620px) {
  .topbar {
    flex-wrap: wrap;
  }

  .topbar-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .summary-grid {
    grid-template-columns: 1fr;
  }

  .summary-card {
    min-height: 100px;
  }

  .status-panel-content {
    grid-template-columns: 1fr;
  }

  .systems-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .toolbar-controls,
  .search-control,
  .status-filter {
    width: 100%;
  }

  .push-button {
    flex: 1 1 210px;
  }

  #userMenu {
    flex: 1 1 auto;
    justify-content: flex-start;
  }

  th:nth-child(2),
  td:nth-child(2),
  th:nth-child(3),
  td:nth-child(3) {
    display: none;
  }
}

/* ==========================================================
   Erweiterte Ansichten: Systeme / Störungen / Ereignisse /
   Standorte / Benachrichtigungen / Einstellungen / Login
   ========================================================== */
.page-dashboard { min-height: calc(100vh - 94px); }
.workspace-grid { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:18px; align-items:start; }
.analytics-grid { display:grid; grid-template-columns:minmax(0,1fr) 390px; gap:18px; align-items:stretch; margin-bottom:18px; }
.location-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(320px,.75fr); gap:18px; margin-bottom:18px; }
.notification-layout { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr); gap:18px; }
.grow { flex:1 1 auto; }
.compact-input { min-height:40px; min-width:180px; padding:0 12px; color:var(--text); background:#111923; border:1px solid var(--line); border-radius:9px; }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.92em; }
.muted { color:var(--muted); }
.positive-text { color:var(--green); }
.message-ok { color:var(--green); }
.message-error { color:#ff7a80; }
.summary-value.small { font-size:20px; margin-top:6px; }
.action-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.action-button { min-height:40px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 14px; border:1px solid var(--line); border-radius:9px; background:#18222d; color:var(--text); text-decoration:none; cursor:pointer; font-weight:650; }
.action-button:hover { border-color:#3b4a59; background:#1c2936; }
.primary-action { border-color:rgba(69,212,131,.34); background:linear-gradient(180deg,rgba(45,191,111,.94),rgba(31,157,89,.94)); color:white; }
.detail-panel { position:sticky; top:18px; }
.detail-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:18px; }
.detail-name { font-size:20px; font-weight:760; margin-bottom:8px; }
.detail-list { display:grid; gap:0; border-top:1px solid var(--line-soft); }
.detail-list > div { display:flex; justify-content:space-between; gap:20px; padding:11px 0; border-bottom:1px solid var(--line-soft); }
.detail-list span { color:var(--muted); font-size:12px; }
.detail-list strong { text-align:right; font-size:13px; font-weight:650; overflow-wrap:anywhere; }
.detail-section { margin-top:20px; }
.detail-section h3, .incident-detail-grid h3 { margin:0 0 12px; font-size:14px; }
.detail-section p, .incident-detail-grid p { color:var(--muted); line-height:1.6; }
.activity-item { display:flex; flex-direction:column; gap:4px; padding:10px 0; border-bottom:1px solid var(--line-soft); }
.activity-item strong { font-size:13px; }
.activity-item span { color:var(--muted); font-size:11px; }
.link-item { color:var(--text); text-decoration:none; }
.link-item:hover strong { color:var(--green); }
.selectable-row { cursor:pointer; }
.selectable-row:hover td { background:rgba(255,255,255,.025); }
.selectable-row.selected td { background:rgba(69,212,131,.045); border-top-color:rgba(69,212,131,.36); border-bottom-color:rgba(69,212,131,.36); }
.selectable-row.selected td:first-child { box-shadow:inset 2px 0 0 var(--green); }
.events-toolbar { min-height:68px; }
.table-footer { min-height:48px; display:flex; align-items:center; padding:0 17px; color:var(--muted); border-top:1px solid var(--line-soft); font-size:12px; }
.incident-detail-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:28px; }
.bar-chart { height:210px; display:grid; grid-template-columns:repeat(7,1fr); gap:8px; align-items:end; padding:10px 0 0; }
.bar-day { min-width:0; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:8px; color:var(--muted); font-size:10px; }
.bar-stack { width:72%; height:170px; display:flex; flex-direction:column-reverse; justify-content:flex-start; border-bottom:1px solid var(--line); background:linear-gradient(to top,rgba(255,255,255,.025),transparent); border-radius:5px 5px 0 0; overflow:hidden; }
.bar { width:100%; min-height:0; }
.bar.critical { background:rgba(255,92,100,.8); }
.bar.warning { background:rgba(255,157,46,.78); }
.chart-legend { display:flex; gap:18px; margin-top:12px; color:var(--muted); font-size:11px; }
.dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; }
.dot.critical { background:var(--red); }.dot.warning { background:var(--orange); }
.location-notice { padding:12px 14px; margin-bottom:14px; border:1px solid rgba(59,130,246,.18); border-radius:9px; background:rgba(59,130,246,.06); color:#a9b6c5; font-size:12px; line-height:1.55; }
.location-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px; }
.location-card { min-height:88px; display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:9px; align-items:center; text-align:left; padding:14px; border:1px solid var(--line); border-radius:10px; background:#111923; color:var(--text); cursor:pointer; }
.location-card .installation-dot { grid-row:1 / 3; }
.location-card strong { font-size:13px; }
.location-card > span:last-child { color:var(--muted); font-size:11px; }
.location-card:hover,.location-card.selected { border-color:rgba(69,212,131,.42); background:rgba(69,212,131,.045); }
.channel-state p { color:var(--muted); line-height:1.55; }

/* Settings */
.settings-page { max-width:none; margin:0; }
.settings-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:18px; }
.settings-tabs a { min-height:52px; display:flex; align-items:center; justify-content:center; padding:0 14px; border:1px solid var(--line); border-radius:10px; background:linear-gradient(180deg,#151f29,#111923); color:#dbe1e7; text-decoration:none; font-size:13px; font-weight:650; }
.settings-tabs a:hover { color:var(--green); border-color:rgba(69,212,131,.32); }
.settings-page > .panel { margin-bottom:18px; }
.settings-page #maintenanceSettings section { border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(145deg,rgba(18,27,37,.98),rgba(13,22,31,.98)); box-shadow:var(--shadow); overflow:hidden; margin-bottom:18px; }
.settings-page #maintenanceSettings h2 { margin:0; min-height:55px; display:flex; align-items:center; padding:0 17px; border-bottom:1px solid var(--line-soft); font-size:14px; }
.settings-page .content { padding:17px; }
.settings-inline-form { display:grid; grid-template-columns:minmax(180px,1fr) minmax(220px,1fr) auto; gap:10px; align-items:center; margin-bottom:20px; }
.settings-inline-form input,.settings-page input[type="text"],.settings-page input[type="password"],.settings-page input[type="number"],.settings-page select { min-height:42px; width:100%; padding:0 12px; border:1px solid var(--line); border-radius:9px; background:#0f1720; color:var(--text); }
.settings-form-message { grid-column:1 / -1; min-height:18px; font-size:12px; }
.settings-users { display:grid; gap:12px; }
.user-card { border:1px solid var(--line); border-radius:10px; padding:16px; margin-bottom:12px; background:#101820; }
.user-header { display:flex; justify-content:space-between; align-items:flex-start; gap:15px; margin-bottom:14px; }
.username { font-weight:720; }
.scope { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:8px; margin:12px 0; }
.scope label,.all-option { display:flex; gap:9px; align-items:center; padding:10px; border:1px solid var(--line-soft); border-radius:8px; background:#0d151e; }
.settings-page button.primary { min-height:40px; padding:0 14px; border:1px solid rgba(69,212,131,.3); border-radius:8px; background:#1e9d59; color:#fff; font-weight:650; cursor:pointer; }
.settings-page button.danger { min-height:38px; padding:0 12px; border:1px solid rgba(255,92,100,.28); border-radius:8px; background:rgba(255,92,100,.1); color:#ff9297; cursor:pointer; }
.status { margin-left:0; }

/* Login */
.login-page { min-height:100vh; position:relative; overflow-x:hidden; background:radial-gradient(circle at 32% 42%,rgba(19,126,78,.12),transparent 28%),radial-gradient(circle at 88% 10%,rgba(25,64,90,.15),transparent 30%),#070d13; }
.login-brand { position:absolute; left:34px; top:28px; display:flex; align-items:center; gap:10px; z-index:2; }
.login-brand img { width:52px; height:52px; object-fit:contain; background:#edf2f6; border-radius:12px; padding:2px; }
.login-brand span { display:grid; }
.login-brand strong { letter-spacing:.14em; font-size:18px; }.login-brand small { color:#42e286; font-weight:800; letter-spacing:.16em; font-size:10px; }
.login-layout { width:min(1380px,calc(100vw - 70px)); min-height:100vh; margin:auto; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(430px,.95fr); gap:70px; align-items:center; padding:120px 0 100px; }
.login-hero { text-align:center; }
.security-visual { width:330px; height:250px; margin:0 auto 16px; position:relative; display:grid; place-items:center; }
.shield-shape { width:142px; height:166px; position:relative; z-index:3; display:grid; place-items:center; clip-path:polygon(50% 0,94% 18%,88% 72%,50% 100%,12% 72%,6% 18%); background:linear-gradient(145deg,#3a4148,#151a20 58%,#0c1117); border:1px solid rgba(255,255,255,.2); filter:drop-shadow(0 18px 24px rgba(0,0,0,.38)); }
.shield-shape::before { content:""; width:78px; height:94px; position:absolute; clip-path:inherit; background:#0b1714; box-shadow:inset 0 0 0 1px #17ba66; }
.shield-shape span { position:relative; z-index:2; color:#25e579; font-size:54px; font-weight:900; text-shadow:0 0 20px rgba(37,229,121,.45); }
.security-ring { position:absolute; left:50%; bottom:24px; transform:translateX(-50%); border:1px solid rgba(38,220,120,.26); border-radius:50%; }
.ring-one { width:245px; height:68px; box-shadow:0 0 34px rgba(24,204,104,.12); }.ring-two { width:340px; height:115px; opacity:.5; }
.login-hero h1 { margin:0; font-size:34px; line-height:1.18; letter-spacing:-.025em; }.login-hero > p { max-width:600px; margin:18px auto 34px; color:#a6b0bb; line-height:1.65; }
.login-feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; text-align:left; }
.login-feature-grid article { min-height:150px; padding:18px; display:flex; flex-direction:column; gap:10px; border:1px solid var(--line); border-radius:12px; background:linear-gradient(145deg,rgba(17,26,35,.93),rgba(11,18,26,.93)); }
.feature-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:10px; background:var(--green-soft); color:var(--green); font-size:20px; }.login-feature-grid strong { font-size:14px; }.login-feature-grid span { color:var(--muted); font-size:12px; line-height:1.55; }
.login-health { width:max-content; max-width:100%; margin:26px auto 0; display:flex; align-items:center; gap:9px; padding:10px 14px; border:1px solid var(--line); border-radius:9px; background:#101820; color:var(--muted); font-size:12px; }.login-health.online { color:var(--green); }.login-health.offline { color:#ff7d83; }.login-health.offline .health-dot { background:var(--red); }
.login-card { padding:46px; border:1px solid #2a3541; border-radius:15px; background:linear-gradient(145deg,rgba(18,27,37,.98),rgba(10,17,24,.98)); box-shadow:0 28px 70px rgba(0,0,0,.35); }
.login-card h2 { margin:0 0 8px; text-align:center; font-size:32px; }.login-card > div:first-child > p { margin:0 0 32px; text-align:center; color:var(--muted); }.login-card label { display:block; margin:18px 0 8px; font-size:13px; font-weight:650; }
.login-input-wrap { min-height:58px; display:grid; grid-template-columns:42px 1fr auto; align-items:center; border:1px solid #313c48; border-radius:10px; background:#111923; overflow:hidden; }.login-input-wrap > span { text-align:center; color:#9da8b4; }.login-input-wrap input { width:100%; height:56px; border:0; outline:0; background:transparent; color:white; font-size:15px; }.password-toggle { width:48px; height:56px; border:0; background:transparent; color:#9da8b4; cursor:pointer; }
.login-submit { width:100%; min-height:58px; margin-top:28px; border:0; border-radius:10px; background:linear-gradient(90deg,#24d574,#28b865); color:white; font-size:16px; font-weight:750; cursor:pointer; }.login-submit:disabled { opacity:.65; cursor:wait; }.login-submit span { margin-left:14px; font-size:22px; }.login-error { min-height:22px; margin-top:12px; color:#ff777d; font-size:13px; text-align:center; }.login-security-note { margin-top:32px; padding-top:18px; border-top:1px solid var(--line-soft); color:var(--muted); font-size:11px; text-align:center; }.login-footer { position:absolute; left:34px; bottom:24px; color:#65717f; font-size:11px; }

@media (max-width: 1180px) {
  .workspace-grid,.analytics-grid,.location-grid,.notification-layout { grid-template-columns:1fr; }
  .detail-panel { position:static; }
  .login-layout { grid-template-columns:1fr; width:min(760px,calc(100vw - 36px)); gap:32px; padding-top:120px; }
  .login-brand { left:22px; top:20px; }.login-footer { position:static; text-align:center; padding:0 20px 24px; }
}
@media (max-width: 760px) {
  .settings-tabs { grid-template-columns:1fr 1fr; }
  .settings-inline-form { grid-template-columns:1fr; }
  .incident-detail-grid { grid-template-columns:1fr; }
  .login-card { padding:26px 20px; }.login-feature-grid { grid-template-columns:1fr; }.security-visual { width:260px; }.ring-two { width:270px; }.login-hero h1 { font-size:28px; }
}

/* ==========================================================
   Standortverwaltung v3
   ========================================================== */
.panel-actions { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.map-wrap { position:relative; min-height:410px; background:#0b1219; }
.location-map { width:100%; height:410px; background:#0b1219; z-index:1; }
.map-fallback { position:absolute; inset:0; z-index:3; display:grid; place-items:center; padding:30px; text-align:center; color:var(--muted); background:radial-gradient(circle at 50% 50%,rgba(44,197,112,.06),transparent 40%),#0b1219; }
.map-privacy-note { padding:9px 14px; border-top:1px solid var(--line-soft); color:#758392; font-size:10px; }
.ajax-map-marker-wrap { background:transparent!important; border:0!important; }
.ajax-map-marker { display:block; width:18px; height:18px; margin:5px; border-radius:50%; background:var(--marker); border:3px solid rgba(5,13,18,.86); box-shadow:0 0 0 5px color-mix(in srgb,var(--marker) 22%,transparent),0 0 22px color-mix(in srgb,var(--marker) 45%,transparent); }
.leaflet-container { font-family:inherit; }
.leaflet-control-zoom a { background:#121c26!important; color:#dce4eb!important; border-color:#263442!important; }
.leaflet-control-attribution { background:rgba(7,13,19,.78)!important; color:#82909e!important; }
.leaflet-control-attribution a { color:#45d483!important; }
.table-secondary { margin-top:4px; color:var(--muted); font-size:10px; }
.detail-list a { color:#b9c6d2; text-decoration:none; }.detail-list a:hover { color:var(--green); }

.modal[hidden] { display:none!important; }
.modal { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:22px; }
.modal-backdrop { position:absolute; inset:0; background:rgba(2,6,10,.78); backdrop-filter:blur(4px); }
.modal-card { position:relative; z-index:1; width:min(760px,100%); max-height:calc(100vh - 44px); overflow:auto; border:1px solid #2a3744; border-radius:14px; background:linear-gradient(145deg,#121c26,#0b1219); box-shadow:0 28px 90px rgba(0,0,0,.55); }
.modal-card-sm { width:min(650px,100%); }
.modal-header { min-height:62px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:0 18px; border-bottom:1px solid var(--line-soft); }
.modal-header h2 { margin:0; font-size:17px; }
.modal-close { width:38px; height:38px; border:0; border-radius:8px; background:transparent; color:#9ca8b4; font-size:24px; cursor:pointer; }.modal-close:hover { background:#18232e; color:#fff; }
.modal-body { padding:18px; }
.location-form { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field { display:grid; gap:7px; }.field.full,.modal-actions.full,.form-message.full { grid-column:1 / -1; }
.field span { color:#aeb8c2; font-size:11px; font-weight:650; }
.field input,.field textarea { width:100%; min-height:42px; padding:9px 11px; border:1px solid #2d3a47; border-radius:8px; background:#0d151e; color:#f2f5f7; outline:0; }
.field textarea { resize:vertical; min-height:84px; }.field input:focus,.field textarea:focus { border-color:rgba(69,212,131,.58); box-shadow:0 0 0 3px rgba(69,212,131,.08); }
.modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:6px; }
.form-message { min-height:18px; font-size:12px; }
.assignment-list { display:grid; gap:8px; max-height:410px; overflow:auto; margin:14px 0; }
.assignment-item { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding:11px 12px; border:1px solid var(--line); border-radius:9px; background:#0d151e; cursor:pointer; }
.assignment-item:hover { border-color:#3a4a59; }.assignment-item input { width:17px; height:17px; accent-color:#27c873; }
.assignment-item span { display:grid; gap:3px; }.assignment-item strong { font-size:12px; }.assignment-item small { color:var(--muted); font-size:10px; }.assignment-item em { color:#ffb55d; font-size:10px; font-style:normal; }

@media (max-width:760px) { .location-form { grid-template-columns:1fr; }.field.full,.modal-actions.full,.form-message.full { grid-column:auto; }.location-map,.map-wrap { height:330px; min-height:330px; } }