:root {
  color-scheme: dark;
  --bg: #06101d;
  --surface: rgba(14, 27, 46, 0.9);
  --border: rgba(163, 185, 216, 0.15);
  --text: #eef5ff;
  --muted: #8fa2bb;
  --cyan: #63d8ff;
  --blue: #5d8cff;
  --green: #50e5a2;
  --yellow: #ffd166;
  --orange: #ff9d5c;
  --red: #ff6f87;
  --purple: #ad86ff;
  --shadow: 0 22px 60px rgba(0, 0, 0, 0.3);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at 8% 0%, rgba(58, 123, 213, 0.2), transparent 28%),
    radial-gradient(circle at 100% 15%, rgba(66, 204, 255, 0.14), transparent 30%),
    linear-gradient(145deg, #06101d 0%, #081626 48%, #06101d 100%);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body { overflow-x: hidden; }

.ambient {
  position: fixed;
  border-radius: 50%;
  filter: blur(150px);
  opacity: 0.15;
  pointer-events: none;
}

.ambient-one { width: 500px; height: 500px; right: -180px; top: -220px; background: var(--cyan); }
.ambient-two { width: 560px; height: 560px; left: -220px; bottom: -250px; background: var(--purple); }

.screen {
  position: relative;
  width: min(100% - 40px, 2200px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 24px 0 16px;
}

.topbar, .topbar-right, .title-row, .livebox {
  display: flex;
  align-items: center;
}

.topbar {
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 18px;
}

.eyebrow {
  color: var(--cyan);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.title-row { gap: 14px; }

h1 {
  margin: 2px 0 0;
  font-size: clamp(2.3rem, 3vw, 4.2rem);
  line-height: 0.95;
  letter-spacing: -0.055em;
}

.version, .badge {
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 850;
}

.version {
  border: 1px solid var(--border);
  color: var(--muted);
}

.topbar p { margin: 7px 0 0; color: var(--muted); }

.topbar-right { gap: 14px; }

.clock, .livebox {
  gap: 13px;
  padding: 11px 15px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.clock {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
}

.clock strong { font-size: 1.5rem; line-height: 1; }
.clock span, .livebox small { color: var(--muted); font-size: 0.74rem; }
.livebox b { display: block; font-size: 0.72rem; letter-spacing: 0.15em; }

.pulse {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 7px rgba(80, 229, 162, 0.1), 0 0 22px rgba(80, 229, 162, 0.8);
}

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

.summary-card, .panel, .ticker-panel {
  border: 1px solid var(--border);
  border-radius: 19px;
  background: linear-gradient(155deg, rgba(18, 34, 57, 0.94), rgba(8, 20, 36, 0.92));
  box-shadow: var(--shadow);
}

.summary-card {
  position: relative;
  overflow: hidden;
  padding: 17px 18px;
}

.summary-card::after {
  content: "";
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  right: -38px;
  top: -40px;
  opacity: 0.16;
  background: currentColor;
}

.summary-label { color: var(--muted); font-size: 0.78rem; font-weight: 800; }

.summary-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 6px;
}

.summary-main strong { font-size: 2.15rem; line-height: 1; letter-spacing: -0.05em; }
.summary-main span, .summary-sub { color: var(--muted); font-size: 0.76rem; }
.summary-sub { margin-top: 5px; }

.accent-blue { color: var(--blue); }
.accent-cyan { color: var(--cyan); }
.accent-red { color: var(--red); }
.accent-purple { color: var(--purple); }
.accent-green { color: var(--green); }
.accent-orange { color: var(--orange); }

.dashboard-grid {
  display: grid;
  grid-template-columns: 1.15fr 1.5fr 0.8fr;
  grid-template-rows: minmax(340px, auto) minmax(235px, auto);
  gap: 12px;
}

.panel { padding: 18px; min-width: 0; }
.panel-critical { grid-column: 1; grid-row: 1; }
.panel-tickets { grid-column: 2 / 4; grid-row: 1; }
.compact-panel { min-height: 235px; }

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 15px;
}

h2 { margin: 4px 0 0; font-size: 1.15rem; letter-spacing: -0.025em; }

.badge { background: rgba(99, 216, 255, 0.11); color: var(--cyan); }
.badge-muted { background: rgba(143, 162, 187, 0.1); color: var(--muted); }

.checkmk-overview, .ticket-stats, .quad-grid, .site-overview {
  display: grid;
  gap: 9px;
}

.checkmk-overview { grid-template-columns: repeat(3, 1fr); margin-bottom: 14px; }
.ticket-stats { grid-template-columns: repeat(4, 1fr); margin-bottom: 12px; }
.quad-grid { grid-template-columns: repeat(2, 1fr); }
.site-overview { grid-template-columns: repeat(3, 1fr); }

.mini-stat, .ticket-stats div, .quad-grid div, .site-overview div {
  padding: 13px;
  border-radius: 13px;
  background: rgba(6, 16, 29, 0.46);
}

.mini-stat span, .ticket-stats span, .quad-grid span, .site-overview span {
  display: block;
  color: var(--muted);
  font-size: 0.69rem;
}

.mini-stat strong, .ticket-stats strong, .quad-grid strong, .site-overview strong {
  display: block;
  margin-top: 3px;
  font-size: 1.55rem;
}

.mini-stat.warning strong { color: var(--yellow); }
.mini-stat.critical strong { color: var(--red); }

.placeholder-list, .ticket-list, .security-bars, .service-list {
  display: grid;
  gap: 8px;
}

.placeholder-row, .ticket-row {
  display: grid;
  align-items: center;
  gap: 12px;
  padding: 12px 13px;
  border-radius: 13px;
  background: rgba(5, 15, 28, 0.48);
}

.placeholder-row { grid-template-columns: auto 1fr; }
.placeholder-row strong, .placeholder-row small { display: block; }
.placeholder-row small { margin-top: 3px; color: var(--muted); }

.status-dot { width: 10px; height: 10px; border-radius: 50%; }
.status-dot.muted { background: var(--muted); }

.ticket-row { grid-template-columns: 74px minmax(0, 1fr) 145px 100px; }
.ticket-id { color: var(--cyan); font-weight: 900; }
.ticket-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 750; }
.ticket-status, .ticket-priority { color: var(--muted); font-size: 0.78rem; }
.ticket-priority.high { color: var(--yellow); font-weight: 800; }
.ticket-priority.critical { color: var(--red); font-weight: 850; }

.security-bars div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 12px;
  align-items: center;
}

.security-bars span { color: var(--muted); font-size: 0.76rem; }

.bar {
  grid-column: 1 / 3;
  display: block;
  height: 7px;
  border-radius: 999px;
  background: rgba(143, 162, 187, 0.13);
}

.bar::after {
  content: "";
  display: block;
  width: 10%;
  height: 100%;
  border-radius: inherit;
  opacity: 0.75;
}

.bar.red::after { background: var(--red); }
.bar.yellow::after { background: var(--yellow); }
.bar.blue::after { background: var(--blue); }

.service-list > div {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 10px 11px;
  border-radius: 11px;
  background: rgba(5, 15, 28, 0.48);
}

.service-list span, .service-list b { color: var(--muted); }

.ticker-panel {
  display: grid;
  grid-template-columns: 105px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding: 12px 16px;
  overflow: hidden;
}

.ticker-title {
  color: var(--cyan);
  font-size: 0.71rem;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.ticker-track {
  overflow: hidden;
  white-space: nowrap;
  color: var(--muted);
  font-size: 0.8rem;
}

.ticker-item { margin-right: 42px; }
.ticker-item b { color: var(--text); margin-right: 8px; }
.ticker-item.ok::before { content: "●"; color: var(--green); margin-right: 8px; }
.ticker-item.info::before { content: "●"; color: var(--cyan); margin-right: 8px; }
.ticker-item.warn::before { content: "●"; color: var(--yellow); margin-right: 8px; }

.loading, .error-box, .empty {
  padding: 24px;
  border-radius: 13px;
  text-align: center;
  background: rgba(5, 15, 28, 0.48);
  color: var(--muted);
}

.error-box { color: var(--red); }

footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 2px 0;
  color: var(--muted);
  font-size: 0.7rem;
}

@media (min-width: 2500px) {
  .screen { width: min(100% - 80px, 3300px); padding-top: 34px; }
  .summary-card { padding: 24px; }
  .summary-main strong { font-size: 3.2rem; }
  .panel { padding: 26px; }
  h2 { font-size: 1.55rem; }
  .ticket-row { padding: 17px 18px; font-size: 1.05rem; }
  .dashboard-grid { grid-template-rows: minmax(520px, auto) minmax(340px, auto); }
}

@media (max-width: 1300px) {
  .summary-grid { grid-template-columns: repeat(3, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .panel-critical, .panel-tickets, .compact-panel { grid-column: auto; grid-row: auto; }
  .panel-tickets { grid-column: 1 / 3; }
}

@media (max-width: 800px) {
  .screen { width: min(100% - 22px, 2200px); }
  .topbar { align-items: flex-start; }
  .topbar-right { display: none; }
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .panel-tickets { grid-column: auto; }
  .ticket-stats { grid-template-columns: repeat(2, 1fr); }
  .ticket-row { grid-template-columns: 65px 1fr; }
  .ticket-status, .ticket-priority { grid-column: 2; }
}


/* Checkmk Live-Modul */
.cmk-problem {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 10px 11px;
  border-radius: 12px;
  background: rgba(5, 15, 28, 0.48);
  border-left: 3px solid var(--muted);
}

.cmk-problem.cmk-crit { border-left-color: var(--red); }
.cmk-problem.cmk-warn { border-left-color: var(--yellow); }
.cmk-problem.cmk-ok { border-left-color: var(--green); }

.cmk-state {
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.cmk-crit .cmk-state { color: var(--red); }
.cmk-warn .cmk-state { color: var(--yellow); }
.cmk-ok .cmk-state { color: var(--green); }

.cmk-problem-body {
  min-width: 0;
}

.cmk-problem-body strong,
.cmk-problem-body span,
.cmk-problem-body small {
  display: block;
}

.cmk-problem-body strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cmk-problem-body span {
  margin-top: 1px;
  color: var(--cyan);
  font-size: 0.76rem;
}

.cmk-problem-body small {
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.69rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cmk-age {
  color: var(--muted);
  font-size: 0.67rem;
  white-space: nowrap;
}

.cmk-badge-live {
  color: var(--green);
  background: rgba(80, 229, 162, 0.11);
}

.cmk-badge-error {
  color: var(--red);
  background: rgba(255, 111, 135, 0.11);
}

.cmk-all-ok {
  color: var(--green);
}

@media (min-width: 2500px) {
  .cmk-problem {
    grid-template-columns: 85px minmax(0, 1fr) auto;
    padding: 15px 16px;
  }

  .cmk-problem-body small {
    font-size: 0.82rem;
  }
}


/* ==========================================================
   Checkmk Professional – Version 2.2
   ========================================================== */

.panel-critical {
  display: flex;
  flex-direction: column;
}

.checkmk-overview-pro {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.checkmk-overview-pro .mini-stat {
  min-height: 82px;
  padding: 12px 13px;
}

.checkmk-overview-pro .mini-stat.success strong {
  color: var(--green);
}

.checkmk-overview-pro .mini-stat small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.63rem;
}

#checkmk-list {
  overflow: hidden;
}

.cmk-problem-pro {
  grid-template-columns: 38px minmax(0, 1fr) 88px;
  min-height: 62px;
  padding: 9px 11px;
  border-left-width: 4px;
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    background 140ms ease;
}

.cmk-problem-pro:hover {
  transform: translateX(2px);
  background: rgba(11, 28, 49, 0.88);
}

.cmk-icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--muted);
  font-size: 0.94rem;
  font-weight: 900;
}

.cmk-crit .cmk-icon {
  color: var(--red);
  background: rgba(255, 111, 135, 0.08);
}

.cmk-warn .cmk-icon {
  color: var(--yellow);
  background: rgba(255, 209, 102, 0.08);
}

.cmk-unknown {
  border-left-color: var(--orange);
}

.cmk-unknown .cmk-icon,
.cmk-unknown .cmk-state {
  color: var(--orange);
}

.cmk-title-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
}

.cmk-title-line strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cmk-title-line .cmk-state {
  flex: 0 0 auto;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
}

.cmk-service {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--cyan);
  font-size: 0.74rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cmk-problem-body small {
  margin-top: 2px;
  max-width: 100%;
  font-size: 0.66rem;
}

.cmk-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  color: var(--muted);
  font-size: 0.61rem;
  white-space: nowrap;
}

@media (min-width: 2500px) {
  .checkmk-overview-pro .mini-stat {
    min-height: 112px;
    padding: 19px;
  }

  .checkmk-overview-pro .mini-stat strong {
    font-size: 2.35rem;
  }

  .cmk-problem-pro {
    grid-template-columns: 58px minmax(0, 1fr) 145px;
    min-height: 92px;
    padding: 15px 17px;
  }

  .cmk-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 1.25rem;
  }

  .cmk-title-line strong {
    font-size: 1.07rem;
  }

  .cmk-service {
    font-size: 0.92rem;
  }

  .cmk-problem-body small {
    font-size: 0.79rem;
  }

  .cmk-meta {
    font-size: 0.76rem;
  }
}

@media (max-width: 1550px) {
  .checkmk-overview-pro {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ==========================================================
   4K-TV-Modus – Version 2.3
   Automatisch ab 3000 × 1600 oder manuell über ?tv=1
   ========================================================== */

@media (min-width: 3000px) and (min-height: 1600px) {
  html {
    font-size: 19px;
  }

  .screen {
    width: calc(100% - 72px);
    max-width: none;
    padding: 30px 0 18px;
  }

  .topbar {
    margin-bottom: 18px;
  }

  h1 {
    font-size: 4.35rem;
  }

  .topbar p {
    font-size: 0.93rem;
  }

  .clock,
  .livebox {
    padding: 15px 20px;
    border-radius: 19px;
  }

  .clock strong {
    font-size: 2rem;
  }

  .summary-grid {
    gap: 15px;
    margin-bottom: 15px;
  }

  .summary-card {
    min-height: 132px;
    padding: 21px 23px;
  }

  .summary-label {
    font-size: 0.82rem;
  }

  .summary-main strong {
    font-size: 2.8rem;
  }

  .summary-main span,
  .summary-sub {
    font-size: 0.8rem;
  }

  .dashboard-grid {
    grid-template-columns:
      minmax(720px, 1.15fr)
      minmax(0, 1fr)
      minmax(0, 1fr)
      minmax(520px, 0.82fr);
    grid-template-rows:
      minmax(830px, 1fr)
      minmax(360px, auto)
      minmax(230px, auto);
    gap: 15px;
  }

  .panel {
    padding: 22px;
    border-radius: 22px;
  }

  .panel-critical {
    grid-column: 1;
    grid-row: 1;
  }

  .panel-tickets {
    grid-column: 2 / 5;
    grid-row: 1;
  }

  .dashboard-grid > .compact-panel:nth-of-type(3) {
    grid-column: 1;
    grid-row: 2;
  }

  .dashboard-grid > .compact-panel:nth-of-type(4) {
    grid-column: 2 / 4;
    grid-row: 2;
  }

  .dashboard-grid > .compact-panel:nth-of-type(5) {
    grid-column: 4;
    grid-row: 2;
  }

  .dashboard-grid > .compact-panel:nth-of-type(6) {
    grid-column: 1 / 5;
    grid-row: 3;
    min-height: 0;
  }

  .dashboard-grid > .compact-panel:nth-of-type(6) .site-overview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dashboard-grid > .compact-panel:nth-of-type(6) .site-overview div {
    min-height: 105px;
    display: grid;
    align-content: center;
  }

  .panel-head {
    margin-bottom: 17px;
  }

  h2 {
    font-size: 1.42rem;
  }

  .eyebrow {
    font-size: 0.76rem;
  }

  .checkmk-overview-pro {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px;
  }

  .checkmk-overview-pro .mini-stat {
    min-height: 104px;
    padding: 16px;
  }

  .checkmk-overview-pro .mini-stat strong {
    font-size: 2.15rem;
  }

  .cmk-problem-pro {
    grid-template-columns: 52px minmax(0, 1fr) 135px;
    min-height: 78px;
    padding: 12px 15px;
  }

  .cmk-icon {
    width: 40px;
    height: 40px;
    font-size: 1.12rem;
  }

  .cmk-title-line strong {
    font-size: 0.98rem;
  }

  .cmk-service {
    font-size: 0.82rem;
  }

  .cmk-problem-body small {
    font-size: 0.72rem;
  }

  .cmk-meta {
    font-size: 0.68rem;
  }

  .ticket-stats {
    gap: 11px;
  }

  .ticket-stats div {
    min-height: 86px;
    padding: 15px 17px;
  }

  .ticket-stats strong {
    font-size: 1.75rem;
  }

  .ticket-row {
    grid-template-columns: 90px minmax(0, 1fr) 205px 125px;
    min-height: 69px;
    padding: 14px 18px;
  }

  .ticket-id {
    font-size: 0.96rem;
  }

  .ticket-title {
    font-size: 0.96rem;
  }

  .ticket-status,
  .ticket-priority {
    font-size: 0.77rem;
  }

  .quad-grid div,
  .site-overview div {
    padding: 18px;
  }

  .security-bars {
    gap: 18px;
  }

  .service-list > div {
    padding: 13px 15px;
  }

  .ticker-panel {
    margin-top: 15px;
    padding: 14px 19px;
    border-radius: 18px;
  }

  .ticker-track {
    font-size: 0.78rem;
  }

  footer {
    padding-top: 10px;
  }
}

/* Manuell testbarer TV-Modus: http://SERVER:8095/?tv=1 */
html.tv-mode .screen {
  width: calc(100% - 48px);
  max-width: none;
}

/* Bei kleineren Testmonitoren nur die Breite simulieren, nicht alles
   in vier winzige Spalten pressen. */
@media (min-width: 1800px) and (max-width: 2999px) {
  html.tv-mode {
    font-size: 17px;
  }

  html.tv-mode .screen {
    width: calc(100% - 48px);
    max-width: none;
  }
}


/* ==========================================================
   TV-Erkennung Fix – Version 2.4
   Greift auch, wenn Windows 4K wegen 150/200 % Skalierung
   nur als 1920 CSS-Pixel an den Browser meldet.
   ========================================================== */

html.tv-mode {
  font-size: 19px;
}

html.tv-mode .screen {
  width: calc(100% - 48px);
  max-width: none;
  padding: 24px 0 14px;
}

html.tv-mode .topbar {
  margin-bottom: 14px;
}

html.tv-mode h1 {
  font-size: 3.65rem;
}

html.tv-mode .topbar p {
  font-size: 0.86rem;
}

html.tv-mode .clock,
html.tv-mode .livebox {
  padding: 13px 18px;
  border-radius: 17px;
}

html.tv-mode .clock strong {
  font-size: 1.8rem;
}

html.tv-mode .summary-grid {
  gap: 12px;
  margin-bottom: 12px;
}

html.tv-mode .summary-card {
  min-height: 112px;
  padding: 18px 20px;
}

html.tv-mode .summary-main strong {
  font-size: 2.45rem;
}

html.tv-mode .dashboard-grid {
  grid-template-columns:
    minmax(580px, 1.1fr)
    minmax(0, 1fr)
    minmax(0, 1fr)
    minmax(420px, 0.8fr);
  grid-template-rows:
    minmax(680px, 1fr)
    minmax(300px, auto)
    minmax(190px, auto);
  gap: 12px;
}

html.tv-mode .panel {
  padding: 18px;
}

html.tv-mode .panel-critical {
  grid-column: 1;
  grid-row: 1;
}

html.tv-mode .panel-tickets {
  grid-column: 2 / 5;
  grid-row: 1;
}

html.tv-mode .dashboard-grid > .compact-panel:nth-of-type(3) {
  grid-column: 1;
  grid-row: 2;
}

html.tv-mode .dashboard-grid > .compact-panel:nth-of-type(4) {
  grid-column: 2 / 4;
  grid-row: 2;
}

html.tv-mode .dashboard-grid > .compact-panel:nth-of-type(5) {
  grid-column: 4;
  grid-row: 2;
}

html.tv-mode .dashboard-grid > .compact-panel:nth-of-type(6) {
  grid-column: 1 / 5;
  grid-row: 3;
  min-height: 0;
}

html.tv-mode .dashboard-grid > .compact-panel:nth-of-type(6) .site-overview {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

html.tv-mode .checkmk-overview-pro {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

html.tv-mode .checkmk-overview-pro .mini-stat {
  min-height: 92px;
  padding: 14px;
}

html.tv-mode .cmk-problem-pro {
  grid-template-columns: 46px minmax(0, 1fr) 118px;
  min-height: 70px;
  padding: 11px 13px;
}

html.tv-mode .cmk-icon {
  width: 36px;
  height: 36px;
}

html.tv-mode .ticket-row {
  grid-template-columns: 80px minmax(0, 1fr) 180px 110px;
  min-height: 62px;
  padding: 12px 16px;
}

html.tv-mode .ticket-title {
  font-size: 0.92rem;
}

html.tv-mode .ticket-stats div {
  min-height: 76px;
  padding: 13px 15px;
}

html.tv-mode .ticker-panel {
  margin-top: 12px;
  padding: 12px 17px;
}

/* Bei echtem kleinen Bildschirm den erzwungenen TV-Modus nicht
   unbrauchbar machen. Dieser Fallback gilt nur unter 1700 CSS-Pixeln. */
@media (max-width: 1699px) {
  html.tv-mode .dashboard-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }

  html.tv-mode .panel-critical,
  html.tv-mode .panel-tickets,
  html.tv-mode .compact-panel {
    grid-column: auto;
    grid-row: auto;
  }

  html.tv-mode .panel-tickets {
    grid-column: 1 / 3;
  }
}


/* ==========================================================
   GLPI Professional – Version 2.5
   ========================================================== */

.ticket-stats div {
  position: relative;
}

.ticket-stats small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.62rem;
}

.ticket-stat-warning strong {
  color: var(--yellow);
}

.ticket-stat-critical strong {
  color: var(--red);
}

.ticket-row-pro {
  grid-template-columns: 92px minmax(0, 1fr) 145px 115px;
  min-height: 66px;
  padding: 10px 14px;
  border-left: 3px solid rgba(143, 162, 187, 0.28);
}

.ticket-row-pro.high {
  border-left-color: var(--yellow);
}

.ticket-row-pro.critical {
  border-left-color: var(--red);
  background:
    linear-gradient(90deg, rgba(255, 111, 135, 0.07), transparent 32%),
    rgba(5, 15, 28, 0.48);
}

.ticket-id-block {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ticket-priority-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 0 0 4px rgba(143, 162, 187, 0.07);
}

.ticket-priority-dot.low {
  background: var(--green);
}

.ticket-priority-dot.medium {
  background: var(--cyan);
}

.ticket-priority-dot.high {
  background: var(--yellow);
}

.ticket-priority-dot.critical {
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(255, 111, 135, 0.09);
}

.ticket-body {
  min-width: 0;
}

.ticket-metadata {
  display: flex;
  gap: 13px;
  margin-top: 5px;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.65rem;
  white-space: nowrap;
}

.ticket-metadata span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.ticket-age {
  font-weight: 750;
}

.ticket-age.age-fresh {
  color: var(--green);
}

.ticket-age.age-attention {
  color: var(--cyan);
}

.ticket-age.age-warning {
  color: var(--yellow);
}

.ticket-age.age-critical {
  color: var(--red);
}

.ticket-status-pill,
.ticket-priority-pill {
  justify-self: start;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 0.67rem;
  font-weight: 800;
  white-space: nowrap;
}

.ticket-status-pill.status-new {
  color: var(--cyan);
  background: rgba(99, 216, 255, 0.1);
}

.ticket-status-pill.status-progress {
  color: var(--green);
  background: rgba(80, 229, 162, 0.1);
}

.ticket-status-pill.status-waiting {
  color: var(--yellow);
  background: rgba(255, 209, 102, 0.1);
}

.ticket-status-pill.status-done {
  color: var(--muted);
  background: rgba(143, 162, 187, 0.1);
}

.ticket-priority-pill.low {
  color: var(--green);
  background: rgba(80, 229, 162, 0.08);
}

.ticket-priority-pill.medium {
  color: var(--cyan);
  background: rgba(99, 216, 255, 0.08);
}

.ticket-priority-pill.high {
  color: var(--yellow);
  background: rgba(255, 209, 102, 0.09);
}

.ticket-priority-pill.critical {
  color: var(--red);
  background: rgba(255, 111, 135, 0.1);
}

@media (min-width: 2500px) {
  .ticket-row-pro {
    grid-template-columns: 120px minmax(0, 1fr) 205px 155px;
    min-height: 82px;
    padding: 14px 18px;
  }

  .ticket-title {
    font-size: 1.02rem;
  }

  .ticket-metadata {
    font-size: 0.74rem;
  }

  .ticket-status-pill,
  .ticket-priority-pill {
    padding: 7px 11px;
    font-size: 0.72rem;
  }
}

html.tv-mode .ticket-row-pro {
  grid-template-columns: 105px minmax(0, 1fr) 175px 135px;
  min-height: 70px;
}

html.tv-mode .ticket-metadata {
  font-size: 0.69rem;
}

@media (max-width: 900px) {
  .ticket-row-pro {
    grid-template-columns: 75px minmax(0, 1fr);
  }

  .ticket-status-pill,
  .ticket-priority-pill {
    grid-column: 2;
  }

  .ticket-metadata {
    flex-wrap: wrap;
    white-space: normal;
  }
}


/* ==========================================================
   AWO IT-Leitstand v3.0 – erster Redesign-Schritt
   ========================================================== */

.summary-card-v3 {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 104px;
}

.summary-card-v3::after {
  width: 118px;
  height: 118px;
}

.summary-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 0 22px rgba(255, 255, 255, 0.025);
  font-size: 1.35rem;
  font-weight: 900;
}

.summary-content {
  min-width: 0;
}

.summary-card-v3 .summary-label {
  letter-spacing: 0.08em;
}

.summary-card-v3 .summary-main {
  margin-top: 4px;
}

.summary-card-v3 .summary-main strong {
  color: currentColor;
}

.ticket-table-head,
.ticket-table-row {
  display: grid;
  grid-template-columns:
    78px
    minmax(280px, 1.55fr)
    minmax(190px, 0.9fr)
    minmax(175px, 0.78fr)
    minmax(110px, 0.48fr)
    minmax(105px, 0.48fr);
  align-items: center;
  gap: 14px;
}

.ticket-table-head {
  min-height: 38px;
  padding: 0 15px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.61rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.ticket-table {
  gap: 0;
  overflow: hidden;
  border-radius: 13px;
  background: rgba(5, 15, 28, 0.23);
}

.ticket-table-row {
  position: relative;
  min-height: 61px;
  padding: 9px 15px;
  border-bottom: 1px solid rgba(163, 185, 216, 0.08);
  background: rgba(5, 15, 28, 0.34);
}

.ticket-table-row:last-child {
  border-bottom: 0;
}

.ticket-table-row::before {
  content: "";
  position: absolute;
  inset: 7px auto 7px 0;
  width: 3px;
  border-radius: 0 5px 5px 0;
  background: rgba(143, 162, 187, 0.25);
}

.ticket-table-row.high::before {
  background: var(--yellow);
}

.ticket-table-row.critical::before {
  background: var(--red);
}

.ticket-table-row:hover {
  background: rgba(12, 30, 51, 0.66);
}

.ticket-table-id {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--cyan);
}

.ticket-table-id strong {
  font-size: 0.82rem;
}

.ticket-table-title,
.ticket-table-source {
  min-width: 0;
}

.ticket-table-title strong,
.ticket-table-source strong,
.ticket-table-title small,
.ticket-table-source small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-table-title strong {
  color: var(--text);
  font-size: 0.79rem;
}

.ticket-table-title small,
.ticket-table-source small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.62rem;
}

.ticket-table-source strong {
  color: #c5d3e6;
  font-size: 0.7rem;
  font-weight: 700;
}

.ticket-table-status,
.ticket-table-priority {
  min-width: 0;
}

.ticket-table-status .ticket-status-pill,
.ticket-table-priority .ticket-priority-pill {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-table-age {
  font-size: 0.69rem;
  font-weight: 800;
  white-space: nowrap;
}

.ticket-table-message {
  margin: 12px;
}

.panel-tickets {
  overflow: hidden;
}

@media (min-width: 2500px) {
  .summary-card-v3 {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 18px;
    min-height: 132px;
  }

  .summary-icon {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    font-size: 1.7rem;
  }

  .ticket-table-head,
  .ticket-table-row {
    grid-template-columns:
      105px
      minmax(420px, 1.6fr)
      minmax(300px, 0.9fr)
      minmax(240px, 0.75fr)
      minmax(160px, 0.45fr)
      minmax(155px, 0.45fr);
    gap: 20px;
  }

  .ticket-table-head {
    min-height: 51px;
    padding: 0 21px;
    font-size: 0.7rem;
  }

  .ticket-table-row {
    min-height: 78px;
    padding: 12px 21px;
  }

  .ticket-table-id strong,
  .ticket-table-title strong {
    font-size: 0.93rem;
  }

  .ticket-table-source strong {
    font-size: 0.82rem;
  }

  .ticket-table-title small,
  .ticket-table-source small,
  .ticket-table-age {
    font-size: 0.72rem;
  }
}

html.tv-mode .summary-card-v3 {
  grid-template-columns: 55px minmax(0, 1fr);
}

html.tv-mode .summary-icon {
  width: 49px;
  height: 49px;
}

html.tv-mode .ticket-table-head,
html.tv-mode .ticket-table-row {
  grid-template-columns:
    88px
    minmax(350px, 1.55fr)
    minmax(250px, 0.88fr)
    minmax(215px, 0.72fr)
    minmax(135px, 0.42fr)
    minmax(130px, 0.42fr);
  gap: 17px;
}

html.tv-mode .ticket-table-row {
  min-height: 70px;
  padding-top: 11px;
  padding-bottom: 11px;
}

@media (max-width: 1400px) {
  .ticket-table-head {
    display: none;
  }

  .ticket-table-row {
    grid-template-columns: 78px minmax(0, 1fr) 160px 105px;
  }

  .ticket-table-source {
    grid-column: 2;
  }

  .ticket-table-status {
    grid-column: 3;
    grid-row: 1 / 3;
  }

  .ticket-table-priority {
    grid-column: 4;
    grid-row: 1;
  }

  .ticket-table-age {
    grid-column: 4;
    grid-row: 2;
  }
}


/* ==========================================================
   Checkmk-Gerätesymbole – Version 3.1
   Klein, einfarbig und bewusst zurückhaltend.
   ========================================================== */

.cmk-icon {
  color: #aebbd0 !important;
  background: rgba(255, 255, 255, 0.035) !important;
  border-color: rgba(174, 187, 208, 0.15) !important;
}

.cmk-icon-glyph {
  display: block;
  width: 21px;
  height: 21px;
  background-color: currentColor;
  -webkit-mask-image: var(--cmk-icon-url);
  mask-image: var(--cmk-icon-url);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: 0.92;
}

/* Das Symbol bleibt neutral. Nur Balken und Statuslabel tragen die
   Warn-/Fehlerfarbe – wie im gewünschten Drucker-Beispiel. */
.cmk-crit .cmk-icon,
.cmk-warn .cmk-icon,
.cmk-unknown .cmk-icon,
.cmk-ok .cmk-icon {
  color: #aebbd0 !important;
  background: rgba(255, 255, 255, 0.035) !important;
}

@media (min-width: 2500px) {
  .cmk-icon-glyph {
    width: 27px;
    height: 27px;
  }
}

html.tv-mode .cmk-icon-glyph {
  width: 24px;
  height: 24px;
}


/* ==========================================================
   Checkmk-Gruppierung – Version 3.3
   ========================================================== */

.checkmk-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 13px 1px 8px;
}

.checkmk-section-head > div {
  min-width: 0;
}

.checkmk-section-head strong,
.checkmk-section-kicker {
  display: block;
}

.checkmk-section-head strong {
  margin-top: 2px;
  color: var(--text);
  font-size: 0.82rem;
}

.checkmk-section-kicker {
  color: var(--muted);
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.checkmk-section-count {
  min-width: 28px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.025);
  font-size: 0.66rem;
  font-weight: 900;
  text-align: center;
}

.checkmk-device-head {
  margin-top: 15px;
  padding-top: 11px;
  border-top: 1px solid rgba(163, 185, 216, 0.1);
}

.checkmk-primary-list,
.checkmk-device-list {
  gap: 6px;
}

.cmk-problem-compact {
  grid-template-columns: 38px minmax(0, 1fr) 82px;
  min-height: 51px;
  padding: 7px 10px;
  opacity: 0.88;
}

.cmk-problem-compact .cmk-icon {
  width: 29px;
  height: 29px;
  border-radius: 8px;
}

.cmk-problem-compact .cmk-icon-glyph {
  width: 18px;
  height: 18px;
}

.cmk-problem-compact .cmk-title-line strong {
  font-size: 0.75rem;
}

.cmk-problem-compact .cmk-service {
  font-size: 0.65rem;
}

.cmk-problem-compact .cmk-problem-body small {
  display: none;
}

.cmk-problem-compact .cmk-meta {
  font-size: 0.57rem;
}

@media (min-width: 2500px) {
  .checkmk-section-head strong {
    font-size: 0.95rem;
  }

  .checkmk-section-kicker {
    font-size: 0.62rem;
  }

  .cmk-problem-compact {
    grid-template-columns: 48px minmax(0, 1fr) 120px;
    min-height: 64px;
    padding: 10px 13px;
  }

  .cmk-problem-compact .cmk-icon {
    width: 38px;
    height: 38px;
  }

  .cmk-problem-compact .cmk-icon-glyph {
    width: 23px;
    height: 23px;
  }

  .cmk-problem-compact .cmk-title-line strong {
    font-size: 0.88rem;
  }

  .cmk-problem-compact .cmk-service {
    font-size: 0.75rem;
  }
}

html.tv-mode .cmk-problem-compact {
  grid-template-columns: 43px minmax(0, 1fr) 105px;
  min-height: 58px;
}


/* ==========================================================
   Aktuelle Checkmk-Probleme – Version 3.4
   ========================================================== */

.checkmk-stale-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 9px;
  padding: 7px 10px;
  border: 1px solid rgba(163, 185, 216, 0.1);
  border-radius: 10px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.018);
  font-size: 0.61rem;
}

.checkmk-stale-note[hidden] {
  display: none;
}

.checkmk-stale-note strong {
  min-width: 26px;
  padding: 3px 7px;
  border-radius: 999px;
  color: #aebbd0;
  background: rgba(174, 187, 208, 0.08);
  text-align: center;
}

@media (min-width: 2500px) {
  .checkmk-stale-note {
    padding: 9px 13px;
    font-size: 0.7rem;
  }
}

.checkmk-filter-notes {
  display: grid;
  gap: 6px;
  margin-top: 9px;
}
.checkmk-filter-notes .checkmk-stale-note {
  margin-top: 0;
}


/* ==========================================================
   Wetter Mettmann – Version 3.6
   ========================================================== */

.weather-box {
  display: grid;
  grid-template-columns: 42px minmax(100px, auto) auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: rgba(7, 20, 36, 0.72);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}

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

.weather-main strong,
.weather-main span,
.weather-main small {
  display: block;
  white-space: nowrap;
}

.weather-main strong {
  color: var(--text);
  font-size: 1.25rem;
  line-height: 1;
}

.weather-main span {
  margin-top: 3px;
  color: #b8c7da;
  font-size: 0.67rem;
  font-weight: 800;
}

.weather-main small {
  margin-top: 2px;
  max-width: 145px;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.58rem;
  text-overflow: ellipsis;
}

.weather-range {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 0.56rem;
  font-weight: 800;
  text-align: right;
}

.weather-icon {
  position: relative;
  width: 34px;
  height: 34px;
  color: #8eb6d9;
}

.weather-icon::before,
.weather-icon::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

.weather-sun::before {
  inset: 8px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.weather-sun::after {
  inset: 1px;
  background:
    linear-gradient(currentColor, currentColor) center top / 2px 6px no-repeat,
    linear-gradient(currentColor, currentColor) center bottom / 2px 6px no-repeat,
    linear-gradient(90deg, currentColor, currentColor) left center / 6px 2px no-repeat,
    linear-gradient(90deg, currentColor, currentColor) right center / 6px 2px no-repeat;
  opacity: 0.8;
}

.weather-cloud::before,
.weather-partly-cloudy::before,
.weather-rain::before,
.weather-showers::before,
.weather-drizzle::before,
.weather-sleet::before,
.weather-snow::before,
.weather-thunderstorm::before,
.weather-fog::before {
  left: 4px;
  bottom: 8px;
  width: 26px;
  height: 13px;
  border: 2px solid currentColor;
  border-radius: 12px;
}

.weather-cloud::after,
.weather-partly-cloudy::after,
.weather-rain::after,
.weather-showers::after,
.weather-drizzle::after,
.weather-sleet::after,
.weather-snow::after,
.weather-thunderstorm::after {
  left: 9px;
  bottom: 16px;
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
  background: rgba(7, 20, 36, 0.95);
}

.weather-partly-cloudy {
  color: #9cb7d2;
}

.weather-rain,
.weather-showers,
.weather-drizzle {
  color: #6aaee8;
}

.weather-rain {
  background:
    linear-gradient(#6aaee8, #6aaee8) 10px 29px / 2px 5px no-repeat,
    linear-gradient(#6aaee8, #6aaee8) 17px 29px / 2px 5px no-repeat,
    linear-gradient(#6aaee8, #6aaee8) 24px 29px / 2px 5px no-repeat;
}

.weather-snow {
  color: #c5d7e8;
  background:
    radial-gradient(circle, currentColor 0 1.5px, transparent 2px) 10px 29px / 6px 6px no-repeat,
    radial-gradient(circle, currentColor 0 1.5px, transparent 2px) 20px 29px / 6px 6px no-repeat;
}

.weather-thunderstorm {
  color: #d8b968;
}

.weather-fog::after {
  left: 4px;
  top: 10px;
  width: 26px;
  height: 12px;
  border: 0;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 26px 2px no-repeat,
    linear-gradient(currentColor, currentColor) 4px 5px / 22px 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 10px / 26px 2px no-repeat;
}

.weather-night {
  opacity: 0.85;
}

.weather-unavailable {
  opacity: 0.65;
}

html.tv-mode .weather-box {
  grid-template-columns: 50px minmax(130px, auto) auto;
  min-height: 72px;
  padding: 10px 15px;
}

html.tv-mode .weather-icon {
  width: 42px;
  height: 42px;
}

html.tv-mode .weather-main strong {
  font-size: 1.55rem;
}

html.tv-mode .weather-main span {
  font-size: 0.77rem;
}

html.tv-mode .weather-main small,
html.tv-mode .weather-range {
  font-size: 0.67rem;
}

@media (max-width: 1250px) {
  .weather-range {
    display: none;
  }
}


/* ==========================================================
   Wetter-Outline-SVGs – Version 3.7
   ========================================================== */

.weather-icon {
  display: none !important;
}

.weather-icon-wrap {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #9eb4ca;
  border: 1px solid rgba(158, 180, 202, 0.13);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.025);
}

.weather-icon-image {
  width: 27px;
  height: 27px;
  object-fit: contain;
  filter:
    brightness(0)
    saturate(100%)
    invert(79%)
    sepia(10%)
    saturate(672%)
    hue-rotate(170deg)
    brightness(91%)
    contrast(89%);
}

.weather-tone-sun .weather-icon-image {
  filter:
    brightness(0)
    saturate(100%)
    invert(84%)
    sepia(42%)
    saturate(604%)
    hue-rotate(356deg)
    brightness(100%)
    contrast(91%);
}

.weather-tone-rain .weather-icon-image,
.weather-tone-showers .weather-icon-image,
.weather-tone-drizzle .weather-icon-image {
  filter:
    brightness(0)
    saturate(100%)
    invert(68%)
    sepia(34%)
    saturate(882%)
    hue-rotate(170deg)
    brightness(93%)
    contrast(89%);
}

.weather-tone-thunderstorm .weather-icon-image {
  filter:
    brightness(0)
    saturate(100%)
    invert(72%)
    sepia(39%)
    saturate(824%)
    hue-rotate(350deg)
    brightness(96%)
    contrast(89%);
}

.weather-tone-snow .weather-icon-image,
.weather-tone-sleet .weather-icon-image {
  filter:
    brightness(0)
    saturate(100%)
    invert(91%)
    sepia(8%)
    saturate(380%)
    hue-rotate(170deg)
    brightness(96%)
    contrast(91%);
}

.weather-tone-cloud .weather-icon-image,
.weather-tone-partly-cloudy .weather-icon-image,
.weather-tone-fog .weather-icon-image {
  filter:
    brightness(0)
    saturate(100%)
    invert(76%)
    sepia(7%)
    saturate(517%)
    hue-rotate(170deg)
    brightness(92%)
    contrast(89%);
}

.weather-night .weather-icon-image {
  opacity: 0.82;
}

html.tv-mode .weather-icon-wrap {
  width: 46px;
  height: 46px;
  border-radius: 13px;
}

html.tv-mode .weather-icon-image {
  width: 32px;
  height: 32px;
}

.backup-list{gap:7px}
.backup-row{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;min-height:48px;padding:9px 11px!important;border-left:3px solid var(--muted)}
.backup-row-body{min-width:0}.backup-row-body strong,.backup-row-body small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.backup-row-body strong{color:var(--text);font-size:.76rem}.backup-row-body small{margin-top:4px;color:var(--muted);font-size:.59rem}
.backup-row>b{font-size:.61rem;letter-spacing:.06em}.backup-ok{border-left-color:var(--green)}.backup-ok>b{color:var(--green)}
.backup-warning{border-left-color:var(--yellow)}.backup-warning>b{color:var(--yellow)}
.backup-running{border-left-color:var(--cyan)}.backup-running>b{color:var(--cyan)}
.backup-failed{border-left-color:var(--red)}.backup-failed>b{color:var(--red)}
.backup-unknown{border-left-color:var(--orange)}.backup-unknown>b{color:var(--orange)}
.backup-badge-running{color:var(--cyan);background:rgba(99,216,255,.1)}
.backup-badge-warning{color:var(--yellow);background:rgba(255,209,102,.1)}
html.tv-mode .backup-row{min-height:58px;padding:11px 13px!important}
html.tv-mode .backup-row-body strong{font-size:.88rem}
html.tv-mode .backup-row-body small,html.tv-mode .backup-row>b{font-size:.68rem}


/* ==========================================================
   TacticalRMM – Version 3.9
   ========================================================== */

.tactical-offline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px solid rgba(163, 185, 216, 0.1);
  color: var(--muted);
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.tactical-offline-head strong {
  min-width: 25px;
  padding: 3px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  text-align: center;
}

.tactical-offline-list {
  display: grid;
  gap: 5px;
  margin-top: 7px;
}

.tactical-agent {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 7px 9px;
  border: 1px solid rgba(163, 185, 216, 0.09);
  border-left: 3px solid var(--yellow);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.018);
}

.tactical-agent-body {
  min-width: 0;
}

.tactical-agent-body strong,
.tactical-agent-body small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tactical-agent-body strong {
  color: var(--text);
  font-size: 0.7rem;
}

.tactical-agent-body small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.55rem;
}

.tactical-agent > b {
  color: var(--yellow);
  font-size: 0.54rem;
  letter-spacing: 0.05em;
}

.tactical-offline,
.tactical-down {
  border-left-color: var(--red);
}

.tactical-offline > b,
.tactical-down > b {
  color: var(--red);
}

.tactical-all-ok {
  min-height: 40px;
}

html.tv-mode .tactical-agent {
  min-height: 48px;
  padding: 9px 11px;
}

html.tv-mode .tactical-agent-body strong {
  font-size: 0.8rem;
}

html.tv-mode .tactical-agent-body small,
html.tv-mode .tactical-agent > b {
  font-size: 0.62rem;
}


/* TacticalRMM Clientverwaltung – Version 4.0 */
.tactical-client-grid > div:nth-child(1) strong { color: var(--green); }
.tactical-client-grid > div:nth-child(2) strong { color: var(--yellow); }
.tactical-client-grid > div:nth-child(3) strong { color: var(--cyan); }
.tactical-client-grid > div:nth-child(4) strong { color: var(--orange); }
.tactical-agent-old { border-left-color: var(--orange); }
.tactical-agent-old > b { color: var(--orange); }
.tactical-agent-reboot { border-left-color: var(--cyan); }
.tactical-agent-reboot > b { color: var(--cyan); }


/* ==========================================================
   TacticalRMM Feinschliff – Version 4.1
   ========================================================== */

.tactical-unavailable {
  color: var(--muted) !important;
  font-size: 0.78rem !important;
  line-height: 1.05;
}

.tactical-more {
  padding: 7px 9px;
  border: 1px dashed rgba(163, 185, 216, 0.16);
  border-radius: 9px;
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.03em;
}

.tactical-agent-outdated {
  border-left-color: var(--orange) !important;
}

.tactical-agent-outdated > b {
  color: var(--orange) !important;
}

html.tv-mode .tactical-unavailable {
  font-size: 0.88rem !important;
}

html.tv-mode .tactical-more {
  padding: 9px 11px;
  font-size: 0.66rem;
}


/* ==========================================================
   GLPI team + avatars – Version 4.4
   ========================================================== */

.ticket-source-with-avatars {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ticket-source-text {
  min-width: 0;
}

.ticket-source-text strong,
.ticket-source-text small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-avatar-stack {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}

.ticket-avatar {
  position: relative;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  overflow: hidden;
  border: 2px solid #0b1828;
  border-radius: 50%;
  background: rgba(130, 151, 178, 0.16);
}

.ticket-avatar + .ticket-avatar {
  margin-left: -7px;
}

.ticket-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.ticket-avatar.has-image img {
  opacity: 1;
}

.ticket-avatar-fallback {
  position: relative;
  width: 12px;
  height: 12px;
  opacity: 0.66;
}

.ticket-avatar-fallback::before {
  content: "";
  position: absolute;
  top: 0;
  left: 3.5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #aebed1;
}

.ticket-avatar-fallback::after {
  content: "";
  position: absolute;
  right: 1px;
  bottom: 0;
  left: 1px;
  height: 6px;
  border-radius: 7px 7px 3px 3px;
  background: #aebed1;
}

html.tv-mode .ticket-avatar {
  width: 31px;
  height: 31px;
}

html.tv-mode .ticket-avatar + .ticket-avatar {
  margin-left: -9px;
}


/* ==========================================================
   GLPI Avatar-Feinschliff – Version 4.4.1
   ========================================================== */

.ticket-avatar {
  width: 28px;
  height: 28px;
}

html.tv-mode .ticket-avatar {
  width: 36px;
  height: 36px;
}

.ticket-avatar-fallback {
  width: 14px;
  height: 14px;
}

.ticket-avatar-fallback::before {
  left: 4px;
  width: 6px;
  height: 6px;
}

.ticket-avatar-fallback::after {
  height: 7px;
}

html.tv-mode .ticket-avatar-fallback {
  width: 18px;
  height: 18px;
}

html.tv-mode .ticket-avatar-fallback::before {
  left: 5px;
  width: 8px;
  height: 8px;
}

html.tv-mode .ticket-avatar-fallback::after {
  height: 9px;
}


/* ==========================================================
   Checkmk geplante Downtime – Version 4.5
   ========================================================== */

.checkmk-overview-pro {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.mini-stat.maintenance strong {
  color: #62b7ff;
}

.checkmk-maintenance-section {
  margin-top: 10px;
}

.checkmk-maintenance-head {
  margin-bottom: 7px;
}

.checkmk-maintenance-list {
  display: grid;
  gap: 6px;
}

.cmk-problem.cmk-maintenance {
  border-left-color: #62b7ff;
  background:
    linear-gradient(
      90deg,
      rgba(52, 136, 209, 0.08),
      rgba(255, 255, 255, 0.012)
    );
}

.cmk-maintenance .cmk-state {
  color: #62b7ff;
}

.cmk-maintenance .cmk-icon {
  color: #62b7ff;
  border-color: rgba(98, 183, 255, 0.34);
  background: rgba(42, 122, 191, 0.11);
}

@media (max-width: 1450px) {
  .checkmk-overview-pro {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .checkmk-overview-pro .mini-stat {
    padding-inline: 8px;
  }

  .checkmk-overview-pro .mini-stat span,
  .checkmk-overview-pro .mini-stat small {
    font-size: 0.48rem;
  }
}

html.tv-mode .checkmk-overview-pro {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}


/* Direktlinks – Version 4.6 */
.dashboard-detail-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.cmk-problem.dashboard-detail-link {
  transition: transform 120ms ease, border-color 120ms ease, background-color 120ms ease;
}
.cmk-problem.dashboard-detail-link:hover,
.cmk-problem.dashboard-detail-link:focus-visible {
  transform: translateX(2px);
  border-color: rgba(106, 199, 255, 0.38);
  background-color: rgba(255, 255, 255, 0.035);
  outline: none;
}
.cmk-problem.dashboard-detail-link::after {
  content: "↗";
  align-self: center;
  margin-left: 5px;
  color: var(--muted);
  font-size: 0.66rem;
  opacity: 0;
}
.cmk-problem.dashboard-detail-link:hover::after,
.cmk-problem.dashboard-detail-link:focus-visible::after {
  opacity: 0.8;
}
.ticket-table-id .dashboard-detail-link,
.ticket-title-link {
  transition: color 120ms ease, text-shadow 120ms ease;
}
.ticket-table-id .dashboard-detail-link:hover,
.ticket-title-link:hover,
.ticket-table-id .dashboard-detail-link:focus-visible,
.ticket-title-link:focus-visible {
  color: #72d4ff;
  text-shadow: 0 0 14px rgba(78, 190, 240, 0.24);
  outline: none;
}


/* ==========================================================
   v4.6.1 - Link Fix
   ========================================================== */
.cmk-problem.dashboard-detail-link,
.cmk-problem.dashboard-detail-link:visited,
.cmk-problem.dashboard-detail-link:hover,
.cmk-problem.dashboard-detail-link:focus,
.cmk-problem.dashboard-detail-link:active{
    display:flex;
    color:inherit;
    text-decoration:none !important;
}
.cmk-problem.dashboard-detail-link *{
    text-decoration:none !important;
}


/* ==========================================================
   v4.6.2 - endgültiger Checkmk-Link-Fix
   ========================================================== */

a.cmk-problem.dashboard-detail-link,
a.cmk-problem.dashboard-detail-link:link,
a.cmk-problem.dashboard-detail-link:visited,
a.cmk-problem.dashboard-detail-link:hover,
a.cmk-problem.dashboard-detail-link:focus,
a.cmk-problem.dashboard-detail-link:focus-visible,
a.cmk-problem.dashboard-detail-link:active,
a.cmk-problem.dashboard-detail-link *,
a.cmk-problem.dashboard-detail-link strong,
a.cmk-problem.dashboard-detail-link span,
a.cmk-problem.dashboard-detail-link small,
a.cmk-problem.dashboard-detail-link div {
  color: inherit;
  text-decoration: none !important;
}


/* ==========================================================
   Wazuh Phase 1 – Version 4.7
   ========================================================== */

.wazuh-panel {
  min-height: 0;
}

.wazuh-dashboard-link {
  color: inherit;
  text-decoration: none;
}

.wazuh-agent-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.7fr);
  gap: 10px;
}

.wazuh-agent-main,
.wazuh-agent-stats > div {
  border: 1px solid rgba(129, 153, 181, 0.13);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.018);
}

.wazuh-agent-main {
  display: grid;
  align-content: center;
  min-height: 72px;
  padding: 10px 12px;
}

.wazuh-agent-main strong {
  font-size: clamp(1.25rem, 1.7vw, 1.85rem);
  line-height: 1;
}

.wazuh-agent-main span,
.wazuh-agent-stats span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wazuh-agent-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.wazuh-agent-stats > div {
  display: grid;
  align-content: center;
  justify-items: center;
  min-width: 0;
  padding: 8px 5px;
  text-align: center;
}

.wazuh-agent-stats strong {
  font-size: 1.05rem;
}

.wazuh-agent-stats span {
  overflow: hidden;
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wazuh-alert-placeholder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 9px;
  padding: 8px 10px;
  border: 1px dashed rgba(130, 151, 178, 0.19);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.012);
}

.wazuh-alert-placeholder span {
  color: var(--muted);
  font-size: 0.54rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.wazuh-alert-placeholder strong {
  color: #91a4bb;
  font-size: 0.65rem;
  text-align: right;
}

.wazuh-problem-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 1px 6px;
}

.wazuh-problem-head span {
  color: var(--muted);
  font-size: 0.54rem;
  font-weight: 800;
  letter-spacing: 0.09em;
}

.wazuh-problem-head strong {
  color: #e8eef6;
  font-size: 0.7rem;
}

.wazuh-problem-list {
  display: grid;
  gap: 5px;
}

.wazuh-agent-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(130, 151, 178, 0.11);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.014);
}

.wazuh-agent-icon {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: rgba(231, 173, 62, 0.12);
  color: #efbd55;
  font-size: 0.7rem;
  font-weight: 900;
}

.wazuh-agent-body {
  min-width: 0;
}

.wazuh-agent-body strong,
.wazuh-agent-body small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wazuh-agent-body strong {
  font-size: 0.72rem;
}

.wazuh-agent-body small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.57rem;
}

.wazuh-agent-status {
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(231, 173, 62, 0.1);
  color: #efbd55;
  font-size: 0.52rem;
  font-weight: 800;
  text-transform: uppercase;
}

.wazuh-disconnected {
  color: #ff7878;
}

.wazuh-never_connected,
.wazuh-pending,
.wazuh-unknown {
  color: #efbd55;
}

html.tv-mode .wazuh-agent-main {
  min-height: 82px;
}

html.tv-mode .wazuh-agent-row {
  padding: 9px 10px;
}


/* Wazuh Phase 2 – Version 4.9 */
.wazuh-alert-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 9px;
}

.wazuh-alert-card {
  display: grid;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(130,151,178,.13);
  border-radius: 9px;
  background: rgba(255,255,255,.014);
}

.wazuh-alert-card span {
  font-size: .5rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.wazuh-alert-card strong {
  margin-top: 3px;
  font-size: 1rem;
}

.severity-critical { color: #ff5f82; }
.severity-high { color: #ff8764; }
.severity-medium { color: #efbd55; }
.severity-low { color: #6ea8ff; }

.wazuh-alert-list {
  display: grid;
  gap: 5px;
  max-height: 150px;
  overflow: hidden;
}

.wazuh-alert-row {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(130,151,178,.11);
  border-left: 3px solid currentColor;
  border-radius: 9px;
  background: rgba(255,255,255,.014);
}

.wazuh-alert-level {
  min-width: 38px;
  padding: 3px 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  font-size: .48rem;
  font-weight: 900;
  text-align: center;
}

.wazuh-alert-body {
  min-width: 0;
}

.wazuh-alert-body strong,
.wazuh-alert-body small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wazuh-alert-body strong {
  color: #edf3fa;
  font-size: .67rem;
}

.wazuh-alert-body small {
  margin-top: 2px;
  color: var(--muted);
  font-size: .55rem;
}


/* Security Intelligence – Version 5.0 */
.wazuh-action-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 6px;
  margin-top: 8px;
}
.wazuh-action-card {
  display: grid;
  padding: 7px 8px;
  border: 1px solid rgba(130,151,178,.13);
  border-radius: 9px;
  background: rgba(255,255,255,.014);
}
.wazuh-action-card span {
  font-size: .48rem;
  font-weight: 900;
  letter-spacing: .08em;
}
.wazuh-action-card strong {
  margin-top: 3px;
  font-size: 1rem;
}
.action-immediate,.priority-immediate { color:#ff5f82; }
.action-today,.priority-today { color:#ff936a; }
.action-observe,.priority-observe { color:#efbd55; }
.action-info,.priority-info { color:#6ea8ff; }

.wazuh-category-list {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 5px;
  max-height: 128px;
  overflow: hidden;
}
.wazuh-category-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 7px 8px;
  border: 1px solid rgba(130,151,178,.11);
  border-left: 3px solid currentColor;
  border-radius: 9px;
  background: rgba(255,255,255,.014);
}
.wazuh-category-body { min-width:0; }
.wazuh-category-body strong,
.wazuh-category-body small {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.wazuh-category-body strong {
  color:#edf3fa;
  font-size:.67rem;
}
.wazuh-category-body small {
  margin-top:2px;
  color:var(--muted);
  font-size:.54rem;
}
.wazuh-category-count {
  min-width:24px;
  padding:3px 6px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  font-size:.62rem;
  font-weight:900;
  text-align:center;
}
.wazuh-alert-row[title],
.wazuh-category-row[title] {
  cursor:help;
}


/* ==========================================================
   Security Tasks – Version 5.1
   ========================================================== */

.wazuh-task-summary {
  margin-top: 9px;
  padding: 9px 10px;
  border: 1px solid rgba(130,151,178,.14);
  border-radius: 10px;
  background: rgba(255,255,255,.018);
}

.wazuh-task-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.wazuh-task-summary-head > div {
  min-width: 0;
}

.wazuh-task-eyebrow {
  display: block;
  color: var(--muted);
  font-size: .49rem;
  font-weight: 900;
  letter-spacing: .1em;
}

.wazuh-task-summary-head strong {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: #f1f5fa;
  font-size: .73rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wazuh-task-priority {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(75,214,165,.1);
  color: #4bd6a5;
  font-size: .52rem;
  font-weight: 900;
}

.wazuh-next-task-text {
  overflow: hidden;
  margin-top: 6px;
  color: #aebdd0;
  font-size: .59rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wazuh-task-list {
  display: grid;
  gap: 5px;
  max-height: 132px;
  overflow: hidden;
}

.wazuh-task-row {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(130,151,178,.11);
  border-left: 3px solid currentColor;
  border-radius: 9px;
  background: rgba(255,255,255,.014);
}

.wazuh-task-checkbox {
  color: currentColor;
  font-size: .86rem;
  line-height: 1;
}

.wazuh-task-body {
  min-width: 0;
}

.wazuh-task-body strong,
.wazuh-task-body small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wazuh-task-body strong {
  color: #edf3fa;
  font-size: .64rem;
}

.wazuh-task-body small {
  margin-top: 2px;
  color: var(--muted);
  font-size: .53rem;
}

html.tv-mode .wazuh-task-list {
  max-height: 150px;
}


/* Work Tasks – Version 6.1 */
.wazuh-task-summary-meta {
  display:flex;
  gap:12px;
  margin-top:7px;
  color:var(--muted);
  font-size:.52rem;
  font-weight:800;
}
.wazuh-task-summary-meta span {
  padding:3px 6px;
  border-radius:999px;
  background:rgba(255,255,255,.035);
}
.wazuh-task-list { max-height:245px; }
.wazuh-task-row {
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  padding:8px 9px;
}
.wazuh-task-order {
  display:grid;
  width:23px;
  height:23px;
  place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.055);
  font-size:.62rem;
  font-weight:900;
}
.wazuh-task-title-line {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-width:0;
}
.wazuh-task-title-line strong {
  overflow:hidden;
  color:#edf3fa;
  font-size:.65rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.wazuh-task-effort {
  flex:0 0 auto;
  padding:3px 6px;
  border-radius:999px;
  background:rgba(255,255,255,.045);
  color:#bdcad9;
  font-size:.49rem;
  font-weight:800;
}
.wazuh-task-steps {
  display:grid;
  gap:2px;
  margin-top:6px;
}
.wazuh-task-step {
  overflow:hidden;
  color:#aebdd0;
  font-size:.53rem;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap;
}


/* ==========================================================
   Security Assistant – Version 6.2
   ========================================================== */

.wazuh-task-row {
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.wazuh-task-row:hover,
.wazuh-task-row:focus-visible {
  border-color: rgba(99,216,255,.28);
  background: rgba(255,255,255,.026);
  outline: none;
}

.wazuh-task-row[data-workflow-state="done"] {
  opacity: .58;
}

.wazuh-task-row[data-workflow-state="done"] .wazuh-task-step {
  text-decoration: line-through;
}

.wazuh-task-right-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
}

.wazuh-task-state {
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  color: #aebdd0;
  font-size: .45rem;
  font-weight: 900;
}

.wazuh-task-row[data-workflow-state="working"] .wazuh-task-state {
  color: var(--yellow);
  background: rgba(255,209,102,.09);
}

.wazuh-task-row[data-workflow-state="done"] .wazuh-task-state {
  color: var(--green);
  background: rgba(80,229,162,.09);
}

.wazuh-task-open-hint {
  margin-top: 5px;
  color: #72ccec;
  font-size: .49rem;
  font-weight: 800;
}

.security-assistant-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(1, 7, 14, .62);
  backdrop-filter: blur(3px);
}

.security-assistant {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 90;
  width: min(520px, 94vw);
  height: 100vh;
  padding: 22px;
  overflow-y: auto;
  border-left: 1px solid rgba(163,185,216,.17);
  background:
    radial-gradient(circle at 100% 0%, rgba(65,180,225,.12), transparent 34%),
    #081522;
  box-shadow: -25px 0 70px rgba(0,0,0,.42);
  transform: translateX(105%);
  transition: transform .22s ease;
}

.security-assistant.open {
  transform: translateX(0);
}

.assistant-head,
.assistant-meta,
.assistant-task-summary-head {
  display: flex;
  align-items: center;
}

.assistant-head {
  justify-content: space-between;
  gap: 15px;
}

.assistant-head h2 {
  margin: 4px 0 0;
  font-size: 1.15rem;
}

.assistant-close {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(163,185,216,.16);
  border-radius: 9px;
  background: rgba(255,255,255,.035);
  color: #dce8f5;
  font-size: 1.35rem;
  cursor: pointer;
}

.assistant-meta {
  gap: 10px;
  margin-top: 18px;
  padding: 12px;
  border: 1px solid rgba(163,185,216,.12);
  border-radius: 12px;
  background: rgba(255,255,255,.018);
}

.assistant-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 10px;
  background: rgba(99,216,255,.08);
  font-size: 1.2rem;
}

.assistant-meta > div {
  min-width: 0;
  flex: 1;
}

.assistant-meta strong,
.assistant-meta small {
  display: block;
}

.assistant-meta small {
  margin-top: 2px;
  color: var(--muted);
}

.assistant-priority {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255,157,92,.1);
  color: var(--orange);
  font-size: .58rem;
  font-weight: 900;
}

.assistant-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 7px;
  margin-top: 10px;
}

.assistant-facts > div {
  padding: 9px;
  border: 1px solid rgba(163,185,216,.11);
  border-radius: 10px;
  background: rgba(255,255,255,.014);
}

.assistant-facts span,
.assistant-facts strong {
  display: block;
}

.assistant-facts span {
  color: var(--muted);
  font-size: .53rem;
  font-weight: 800;
  text-transform: uppercase;
}

.assistant-facts strong {
  margin-top: 4px;
  font-size: .83rem;
}

.assistant-section {
  margin-top: 16px;
}

.assistant-section h3 {
  margin: 0 0 7px;
  color: #ecf4fd;
  font-size: .72rem;
  letter-spacing: .03em;
}

.assistant-section p {
  margin: 0;
  color: #aebdd0;
  font-size: .68rem;
  line-height: 1.55;
}

.assistant-steps {
  display: grid;
  gap: 6px;
}

.assistant-step {
  padding: 8px 10px;
  border: 1px solid rgba(163,185,216,.1);
  border-radius: 9px;
  background: rgba(255,255,255,.016);
  color: #c8d5e3;
  font-size: .65rem;
  line-height: 1.4;
}

.assistant-workflow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 6px;
}

.assistant-workflow button {
  padding: 8px 6px;
  border: 1px solid rgba(163,185,216,.13);
  border-radius: 9px;
  background: rgba(255,255,255,.02);
  color: #9eb0c5;
  font-size: .58rem;
  font-weight: 850;
  cursor: pointer;
}

.assistant-workflow button.active {
  border-color: rgba(99,216,255,.38);
  background: rgba(99,216,255,.09);
  color: var(--cyan);
}

.assistant-local-note {
  display: block;
  margin-top: 6px;
  color: #6f849d;
  font-size: .52rem;
}

.assistant-footer {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid rgba(163,185,216,.11);
}

.assistant-link {
  display: inline-flex;
  padding: 8px 11px;
  border: 1px solid rgba(99,216,255,.22);
  border-radius: 9px;
  background: rgba(99,216,255,.07);
  color: var(--cyan);
  font-size: .63rem;
  font-weight: 850;
  text-decoration: none;
}

html.tv-mode .security-assistant {
  width: min(620px, 38vw);
  padding: 28px;
}


/* Security Trends – Version 6.3 */
.wazuh-trend-grid {
  display:grid;
  grid-template-columns:.8fr 1.25fr 1.2fr;
  gap:6px;
  margin-top:8px;
}
.wazuh-trend-score,.wazuh-trend-history,.wazuh-trend-risk {
  min-width:0;
  padding:8px 9px;
  border:1px solid rgba(130,151,178,.12);
  border-radius:9px;
  background:rgba(255,255,255,.014);
}
.wazuh-trend-score>span,.wazuh-trend-title span {
  color:var(--muted);
  font-size:.46rem;
  font-weight:900;
  letter-spacing:.08em;
}
.wazuh-trend-score-line {
  display:flex;
  align-items:baseline;
  gap:6px;
  margin-top:3px;
}
.wazuh-trend-score-line strong {
  font-size:1.15rem;
  color:#edf5ff;
}
.wazuh-trend-score-line small {
  color:#a8b9cc;
  font-size:.53rem;
  font-weight:800;
}
.wazuh-score-note {
  overflow:hidden;
  margin-top:3px;
  color:#667b94;
  font-size:.43rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.wazuh-trend-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
}
.wazuh-trend-title strong {
  color:#dce8f5;
  font-size:.58rem;
}
.wazuh-score-bars {
  display:flex;
  align-items:end;
  gap:4px;
  height:54px;
  margin-top:6px;
}
.wazuh-score-bar-wrap {
  display:grid;
  flex:1;
  height:100%;
  min-width:0;
  grid-template-rows:1fr auto;
  align-items:end;
  gap:2px;
}
.wazuh-score-bar {
  width:100%;
  min-height:5px;
  border-radius:3px 3px 1px 1px;
  background:linear-gradient(180deg,rgba(80,229,162,.9),rgba(99,216,255,.55));
}
.wazuh-score-bar-wrap span {
  overflow:hidden;
  color:#61768e;
  font-size:.36rem;
  text-align:center;
  white-space:nowrap;
}
.wazuh-risk-hosts {
  display:grid;
  gap:3px;
  margin-top:5px;
}
.wazuh-risk-host {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:5px;
}
.wazuh-risk-host-body { min-width:0; }
.wazuh-risk-host strong,.wazuh-risk-host small {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.wazuh-risk-host strong {
  color:#e6eff9;
  font-size:.53rem;
}
.wazuh-risk-host small {
  color:#778ca4;
  font-size:.42rem;
}
.wazuh-risk-host>span {
  min-width:22px;
  padding:2px 4px;
  border-radius:999px;
  background:rgba(255,157,92,.08);
  color:var(--orange);
  font-size:.45rem;
  font-weight:900;
  text-align:center;
}
.wazuh-change-strip {
  display:flex;
  gap:5px;
  margin-top:5px;
  overflow:hidden;
}
.wazuh-change {
  overflow:hidden;
  padding:3px 6px;
  border-radius:999px;
  background:rgba(255,255,255,.03);
  color:#8fa2bb;
  font-size:.43rem;
  font-weight:800;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.wazuh-change.better {
  background:rgba(80,229,162,.07);
  color:var(--green);
}
.wazuh-change.worse {
  background:rgba(255,111,135,.07);
  color:var(--red);
}
.wazuh-change.stable { color:#7489a0; }


/* ==========================================================
   Top Event Ticker – Version 6.4
   ========================================================== */

.ticker-panel-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 36px;
  margin: 7px 0 9px;
  padding: 0 10px;
  border: 1px solid rgba(130,151,178,.14);
  border-radius: 10px;
  background: linear-gradient(
    90deg,
    rgba(12,27,45,.96),
    rgba(9,22,37,.96)
  );
  overflow: hidden;
}

.ticker-panel-top .ticker-title {
  position: relative;
  z-index: 2;
  color: var(--cyan);
  font-size: .52rem;
  font-weight: 900;
  letter-spacing: .11em;
  white-space: nowrap;
}

.ticker-window {
  position: relative;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 24px,
    #000 calc(100% - 24px),
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 24px,
    #000 calc(100% - 24px),
    transparent 100%
  );
}

.ticker-track {
  --ticker-duration: 36s;
  display: flex;
  width: max-content;
  min-width: 100%;
  animation: awoTicker var(--ticker-duration) linear infinite;
  will-change: transform;
}

.ticker-track:hover {
  animation-play-state: paused;
}

.ticker-track.ticker-static {
  animation: none;
}

.ticker-content {
  display: flex;
  align-items: center;
  gap: 28px;
  flex: 0 0 auto;
  min-width: max-content;
  padding-right: 28px;
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #9fb0c4;
  font-size: .55rem;
  white-space: nowrap;
}

.ticker-item strong {
  color: #dce8f5;
  font-size: .56rem;
  font-weight: 900;
}

.ticker-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 3px rgba(99,216,255,.08);
}

.ticker-ok .ticker-dot,
.ticker-success .ticker-dot,
.ticker-live .ticker-dot {
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(80,229,162,.08);
}

.ticker-warning .ticker-dot,
.ticker-warn .ticker-dot {
  background: var(--yellow);
  box-shadow: 0 0 0 3px rgba(255,209,102,.08);
}

.ticker-error .ticker-dot,
.ticker-critical .ticker-dot,
.ticker-down .ticker-dot {
  background: var(--red);
  box-shadow: 0 0 0 3px rgba(255,111,135,.08);
}

@keyframes awoTicker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

html.tv-mode .ticker-panel-top {
  min-height: 38px;
  margin-top: 7px;
  margin-bottom: 9px;
}

html.tv-mode .ticker-item {
  font-size: .56rem;
}

.screen > .ticker-panel:not(.ticker-panel-top) {
  display: none;
}


/* ==========================================================
   Top Event Ticker Fix – Version 6.4.1
   ========================================================== */

/* Etwas mehr Luft zwischen Laufband und den großen Modulen. */
.ticker-panel-top {
  margin-bottom: 15px;
}

/*
 * Jeder der beiden identischen Blöcke bekommt genügend Abstand,
 * damit der Übergang sauber wirkt und nicht zusammenklebt.
 */
.ticker-content {
  padding-right: 48px;
}

/* Das Laufband läuft in 6.4.1 immer. */
.ticker-track.ticker-static {
  animation: awoTicker var(--ticker-duration) linear infinite;
}

/*
 * Alte event.level-Klassen kommen ebenfalls aus renderEvents().
 * Damit behalten auch diese Einträge ihre Statusfarben.
 */
.ticker-item.ok .ticker-dot,
.ticker-item.success .ticker-dot,
.ticker-item.live .ticker-dot {
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(80,229,162,.08);
}

.ticker-item.warning .ticker-dot,
.ticker-item.warn .ticker-dot {
  background: var(--yellow);
  box-shadow: 0 0 0 3px rgba(255,209,102,.08);
}

.ticker-item.error .ticker-dot,
.ticker-item.critical .ticker-dot,
.ticker-item.down .ticker-dot {
  background: var(--red);
  box-shadow: 0 0 0 3px rgba(255,111,135,.08);
}

html.tv-mode .ticker-panel-top {
  margin-bottom: 15px;
}


/* Readable Top Ticker – v6.5 */
.ticker-panel-top {
  min-height: 44px;
  margin-top: 8px;
  margin-bottom: 20px;
  padding: 0 14px;
  gap: 16px;
  border-radius: 11px;
}
.ticker-panel-top .ticker-title {
  font-size: .62rem;
  letter-spacing: .12em;
}
.ticker-window {
  min-height: 42px;
  display: flex;
  align-items: center;
}
.ticker-track { align-items: center; }
.ticker-content {
  gap: 38px;
  padding-right: 56px;
}
.ticker-item {
  gap: 9px;
  font-size: .72rem;
  line-height: 1.2;
}
.ticker-item strong {
  font-size: .73rem;
  font-weight: 900;
}
.ticker-dot {
  width: 9px;
  height: 9px;
}
html.tv-mode .ticker-panel-top {
  min-height: 46px;
  margin-top: 8px;
  margin-bottom: 20px;
  padding-left: 16px;
  padding-right: 16px;
}
html.tv-mode .ticker-panel-top .ticker-title { font-size: .64rem; }
html.tv-mode .ticker-item { font-size: .76rem; }
html.tv-mode .ticker-item strong { font-size: .77rem; }


/* Seamless Ticker – v6.5.1 */
.ticker-track {
  --ticker-duration: 36s;
  --ticker-distance: 1000px;
  display: flex;
  align-items: center;
  width: max-content;
  min-width: max-content;
  animation: none;
  will-change: transform;
  transform: translate3d(0,0,0);
}
.ticker-track.ticker-running {
  animation: awoTickerSeamless var(--ticker-duration) linear infinite;
}
.ticker-track:hover {
  animation-play-state: paused;
}
.ticker-content {
  display: flex;
  align-items: center;
  gap: 38px;
  flex: 0 0 auto;
  width: max-content;
  min-width: max-content;
  padding-right: 56px;
}
@keyframes awoTickerSeamless {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(calc(-1 * var(--ticker-distance)),0,0); }
}
.ticker-track.ticker-static,
.ticker-track.ticker-running.ticker-static {
  animation: awoTickerSeamless var(--ticker-duration) linear infinite;
}


/* ==========================================================
   Standortmonitor – Version 6.6
   ========================================================== */
.site-header {
  display:flex; align-items:center; gap:9px; min-width:178px; min-height:64px;
  padding:8px 11px; border:1px solid rgba(130,151,178,.16); border-radius:12px;
  background:rgba(8,23,39,.72);
}
.site-header-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:9px; border:1px solid rgba(99,216,255,.22); color:var(--cyan); font-size:1.1rem; }
.site-header-main>span { display:block; color:#8fa5bd; font-size:.47rem; font-weight:900; letter-spacing:.1em; }
.site-header-counts { display:flex; gap:8px; margin-top:4px; }
.site-header-counts strong { font-size:.49rem; font-weight:800; white-space:nowrap; }
.site-header-counts b { font-size:.72rem; margin-right:2px; }
.site-ok { color:var(--green); } .site-warn { color:var(--yellow); } .site-down { color:var(--red); }
.site-header[data-state="critical"] { border-color:rgba(255,111,135,.34); background:rgba(255,111,135,.045); }
.site-header[data-state="warning"] { border-color:rgba(255,209,102,.28); }
.site-header[data-state="ok"] { border-color:rgba(80,229,162,.22); }

.panel-sites .site-overview { margin-bottom:8px; }
.site-overview-ok strong { color:var(--green)!important; }
.site-overview-warn strong { color:var(--yellow)!important; }
.site-overview-down strong { color:var(--red)!important; }
.site-problem-head { display:flex; justify-content:space-between; align-items:center; margin:7px 2px 5px; color:#71859d; font-size:.45rem; font-weight:900; letter-spacing:.08em; }
.site-problem-list { display:grid; gap:5px; }
.site-problem { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px; padding:7px 8px; border:1px solid rgba(130,151,178,.10); border-radius:8px; background:rgba(255,255,255,.012); }
.site-status-dot { width:8px; height:8px; border-radius:50%; background:var(--yellow); box-shadow:0 0 0 3px rgba(255,209,102,.07); }
.site-offline .site-status-dot { background:var(--red); box-shadow:0 0 0 3px rgba(255,111,135,.08); }
.site-problem-body { min-width:0; }
.site-problem-body strong,.site-problem-body small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.site-problem-body strong { color:#e7eff8; font-size:.58rem; }
.site-problem-body small { margin-top:2px; color:#8296ad; font-size:.47rem; }
.site-state-label { color:var(--yellow); font-size:.43rem; font-weight:900; }
.site-offline .site-state-label { color:var(--red); }
.site-all-ok { padding:14px 8px; border-radius:8px; background:rgba(80,229,162,.035); color:var(--green); font-size:.56rem; text-align:center; }
html.tv-mode .site-header { min-width:190px; }


/* ==========================================================
   Standortmonitor – Version 6.6.2
   ========================================================== */

.site-header {
  min-width: 210px;
}

.site-header-counts {
  gap: 7px;
}

.site-unmonitored {
  color: #8b9bad;
}

.site-overview {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.site-overview-unmonitored strong {
  color: #9aa9ba !important;
}

.site-overview-unmonitored {
  border-color: rgba(154,169,186,.12);
}


/* v6.6.4 */
.site-overview{grid-template-columns:repeat(3,minmax(0,1fr))!important}.site-unmonitored,.site-overview-unmonitored{display:none!important}

.spotify-mini{width:300px;height:64px;display:flex;align-items:center;gap:9px;padding:7px 9px;border:1px solid var(--border);border-radius:15px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden}.spotify-hidden{display:none!important}.spotify-cover-wrap,.spotify-cover,.spotify-note{width:48px;height:48px}.spotify-cover-wrap{flex:0 0 48px}.spotify-cover{object-fit:cover;border-radius:9px;display:none}.spotify-note{display:grid;place-items:center;border-radius:9px;background:rgba(80,229,162,.11);color:var(--green);font-size:1.3rem}.spotify-info{min-width:0;flex:1}.spotify-label{color:var(--green);font-size:.5rem;font-weight:900;letter-spacing:.14em}.spotify-title,.spotify-artist{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.spotify-title{font-size:.76rem;font-weight:800;margin-top:2px}.spotify-artist{font-size:.6rem;color:var(--muted)}.spotify-progress{height:2px;margin-top:5px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden}.spotify-progress span{display:block;height:100%;width:0;background:var(--green);transition:width 1s linear}.spotify-controls{display:flex;gap:2px}.spotify-controls button{width:24px;height:24px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.06);color:var(--text);cursor:pointer;font-weight:900}.spotify-connect{cursor:pointer}@media(max-width:1550px){.spotify-mini{width:245px}}html.tv-mode .spotify-mini{width:320px}

.spotify-wrap{position:relative}.spotify-mini{cursor:pointer}.spotify-menu{position:absolute;z-index:200;top:calc(100% + 10px);right:0;width:390px;max-height:min(630px,calc(100vh - 120px));overflow:hidden;border:1px solid rgba(163,185,216,.18);border-radius:15px;background:rgba(7,20,34,.98);box-shadow:0 26px 70px rgba(0,0,0,.55);backdrop-filter:blur(18px)}.spotify-menu[hidden]{display:none!important}.spotify-menu-head{display:flex;align-items:center;justify-content:space-between;padding:13px 14px 11px;border-bottom:1px solid rgba(163,185,216,.10)}.spotify-menu-head strong{display:block;margin-top:2px;font-size:.9rem}.spotify-menu-close,.spotify-menu-section-head button{border:0;color:var(--muted);background:rgba(255,255,255,.05);cursor:pointer}.spotify-menu-close{width:28px;height:28px;border-radius:50%;font-size:1.05rem}.spotify-menu-section{padding:11px 12px}.spotify-menu-section+.spotify-menu-section{border-top:1px solid rgba(163,185,216,.08)}.spotify-menu-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;color:#8fa5bd;font-size:.51rem;font-weight:900;letter-spacing:.12em}.spotify-menu-section-head button{width:24px;height:24px;border-radius:7px}.spotify-choice-list,.spotify-playlist-list{display:grid;gap:5px}.spotify-playlist-list{max-height:365px;overflow-y:auto;padding-right:2px}.spotify-device-choice,.spotify-playlist-choice{width:100%;display:flex;align-items:center;gap:9px;padding:8px 9px;border:1px solid rgba(163,185,216,.08);border-radius:10px;color:var(--text);text-align:left;background:rgba(255,255,255,.025);cursor:pointer}.spotify-device-choice:hover,.spotify-playlist-choice:hover{border-color:rgba(80,229,162,.24);background:rgba(80,229,162,.055)}.spotify-device-choice.active{border-color:rgba(80,229,162,.28);background:rgba(80,229,162,.07)}.spotify-device-icon{width:30px;height:30px;display:grid;place-items:center;flex:0 0 30px;border-radius:8px;background:rgba(99,216,255,.07);color:var(--cyan)}.spotify-device-text,.spotify-playlist-text{min-width:0;flex:1}.spotify-device-text strong,.spotify-playlist-text strong{display:block;overflow:hidden;font-size:.69rem;text-overflow:ellipsis;white-space:nowrap}.spotify-device-text small,.spotify-playlist-text small{display:block;margin-top:1px;overflow:hidden;color:var(--muted);font-size:.56rem;text-overflow:ellipsis;white-space:nowrap}.spotify-device-state{color:var(--green);font-size:.48rem;font-weight:900}.spotify-playlist-choice img,.spotify-playlist-placeholder{width:38px;height:38px;flex:0 0 38px;border-radius:7px}.spotify-playlist-choice img{object-fit:cover}.spotify-playlist-placeholder{display:grid;place-items:center;color:var(--green);background:rgba(80,229,162,.10)}.spotify-playlist-play{color:var(--green);font-size:.74rem}.spotify-menu-loading,.spotify-menu-empty,.spotify-menu-error{padding:12px 8px;color:var(--muted);font-size:.63rem}.spotify-menu-error{color:var(--red)}html.tv-mode .spotify-menu{width:430px}