/**
 * Status Page – Uptime Kuma Style, besser & geiler
 * Dunkles Theme · Blau = Aktiv · Sidebar-Layout
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --kuma-bg: #0d1117;
  --kuma-bg-sidebar: #161b22;
  --kuma-bg-card: #21262d;
  --kuma-bg-hover: #30363d;
  --kuma-border: #30363d;
  --kuma-text: #e6edf3;
  --kuma-text-muted: #8b949e;
  --kuma-primary: #58a6ff;
  --kuma-operational: #58a6ff;
  --kuma-warning: #d29922;
  --kuma-danger: #f85149;
  --kuma-radius: 10px;
  --kuma-radius-sm: 6px;
  --kuma-transition: 0.2s ease;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Inter', -apple-system, sans-serif !important;
  background: var(--kuma-bg) !important;
  color: var(--kuma-text) !important;
  min-height: 100vh;
  line-height: 1.6;
}

/* ===== Admin Sidebar Layout (wie Uptime Kuma) ===== */
.admin-layout {
  display: flex;
  min-height: 100vh;
}

.kuma-sidebar {
  width: 240px;
  min-width: 240px;
  background: var(--kuma-bg-sidebar);
  border-right: 1px solid var(--kuma-border);
  display: flex;
  flex-direction: column;
}

.sidebar-brand {
  padding: 1.25rem 1.5rem;
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border-bottom: 1px solid var(--kuma-border);
}

.sidebar-brand i {
  font-size: 1.25rem;
  color: var(--kuma-primary);
}

.sidebar-nav {
  flex: 1;
  padding: 1rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  color: var(--kuma-text-muted);
  text-decoration: none;
  border-radius: var(--kuma-radius-sm);
  font-weight: 500;
  transition: var(--kuma-transition);
}

.sidebar-link i {
  font-size: 1.1rem;
  width: 1.25rem;
  text-align: center;
}

.sidebar-link:hover {
  color: var(--kuma-text);
  background: var(--kuma-bg-hover);
}

.sidebar-link.active {
  color: var(--kuma-primary);
  background: rgba(88, 166, 255, 0.1);
}

.sidebar-footer {
  padding: 1rem 1rem 1.25rem;
  border-top: 1px solid var(--kuma-border);
}

.sidebar-user {
  font-size: 0.875rem;
  color: var(--kuma-text-muted);
  margin-bottom: 0.5rem;
}

.sidebar-user .role {
  color: var(--kuma-primary);
  font-weight: 500;
}

.main-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.main-header {
  padding: 1.25rem 2rem;
  border-bottom: 1px solid var(--kuma-border);
  background: var(--kuma-bg);
}

.page-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

.main-content {
  flex: 1;
  padding: 2rem;
}

/* ===== Public Navbar ===== */
.kuma-navbar {
  background: var(--kuma-bg-sidebar) !important;
  border-bottom: 1px solid var(--kuma-border);
  padding: 1rem 0;
}

.kuma-navbar .navbar-brand {
  color: var(--kuma-text) !important;
  font-weight: 700;
  font-size: 1.1rem;
}

.kuma-navbar .navbar-brand i { color: var(--kuma-primary); }

.kuma-navbar .nav-link {
  color: var(--kuma-text-muted) !important;
  border-radius: var(--kuma-radius-sm);
  padding: 0.5rem 0.9rem !important;
  font-weight: 500;
  font-size: 0.95rem;
  transition: var(--kuma-transition);
}

.kuma-navbar .nav-link:hover,
.kuma-navbar .nav-link.active {
  color: var(--kuma-text) !important;
  background: rgba(88, 166, 255, 0.1);
}

/* ===== Cards – Uptime Kuma Style ===== */
.kuma-card {
  background: var(--kuma-bg-card);
  border: 1px solid var(--kuma-border);
  border-radius: var(--kuma-radius);
  overflow: hidden;
  transition: var(--kuma-transition);
}

.kuma-card:hover {
  border-color: rgba(88, 166, 255, 0.25);
}

.kuma-card .card-header {
  background: transparent;
  border-bottom: 1px solid var(--kuma-border);
  padding: 1rem 1.25rem;
  font-weight: 600;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kuma-card .card-body,
.kuma-card .list-group-item {
  background: transparent;
  border-color: var(--kuma-border);
  color: var(--kuma-text);
  padding: 1rem 1.25rem;
}

/* KPI Cards – wie Uptime Kuma ===== */
.kuma-card .card-body h6 {
  color: var(--kuma-text-muted);
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.5rem;
}

/* ===== Monitor Grid – Public ===== */
.monitor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

.monitor-item {
  background: var(--kuma-bg-card);
  border: 1px solid var(--kuma-border);
  border-radius: var(--kuma-radius);
  padding: 1.25rem;
  transition: var(--kuma-transition);
  animation: fadeIn 0.35s ease-out backwards;
}

.monitor-item:nth-child(1) { animation-delay: 0.02s; }
.monitor-item:nth-child(2) { animation-delay: 0.05s; }
.monitor-item:nth-child(3) { animation-delay: 0.08s; }
.monitor-item:nth-child(4) { animation-delay: 0.11s; }
.monitor-item:nth-child(5) { animation-delay: 0.14s; }
.monitor-item:nth-child(n+6) { animation-delay: 0.17s; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.monitor-item:hover {
  border-color: var(--kuma-primary);
  background: var(--kuma-bg-hover);
}

.monitor-item .item-name {
  color: var(--kuma-text);
  font-weight: 600;
  font-size: 1.05rem;
}

.monitor-item .item-desc {
  color: var(--kuma-text-muted);
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

/* ===== Uptime Bar (wie Uptime Kuma) ===== */
.uptime-bar-wrap { margin-top: 0.75rem; }
.uptime-bar {
  display: flex;
  gap: 1px;
  height: 20px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--kuma-border);
}

.uptime-seg {
  flex: 1;
  min-width: 3px;
  background: var(--kuma-operational);
}
.uptime-seg.down { background: var(--kuma-danger); }

.uptime-label {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8rem;
}

.uptime-bar.admin-uptime-bar {
  max-width: 120px;
  height: 14px;
}

/* ===== Status Badges ===== */
.badge-operational, .badge-degraded, .badge-outage {
  padding: 0.3em 0.7em !important;
  font-weight: 600 !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.02em;
  border-radius: 100px;
  text-transform: uppercase;
  border: none !important;
}

.badge-operational { 
  background: var(--kuma-operational) !important; 
  color: #0d1117 !important;
}
.badge-degraded { 
  background: var(--kuma-warning) !important; 
  color: #0d1117 !important;
}
.badge-outage { 
  background: var(--kuma-danger) !important; 
  color: #fff !important;
}

/* ===== Status Dot ===== */
.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 10px;
  flex-shrink: 0;
}

.status-dot.operational { background: var(--kuma-operational); }
.status-dot.degraded { background: var(--kuma-warning); }
.status-dot.outage { background: var(--kuma-danger); }

/* ===== Overall Status ===== */
.overall-status {
  animation: fadeIn 0.4s ease-out;
  background: var(--kuma-bg-card);
  border: 1px solid var(--kuma-border);
  border-radius: var(--kuma-radius);
  padding: 1.75rem 2rem;
  text-align: center;
  margin-bottom: 2rem;
}

.overall-status.operational { border-left: 4px solid var(--kuma-operational); }
.overall-status.degraded { border-left: 4px solid var(--kuma-warning); }
.overall-status.outage { border-left: 4px solid var(--kuma-danger); }

.overall-status .status-text {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--kuma-text);
}

.overall-status.operational .status-text { color: var(--kuma-operational); }
.overall-status.degraded .status-text { color: var(--kuma-warning); }
.overall-status.outage .status-text { color: var(--kuma-danger); }

/* ===== Forms ===== */
.form-control, .form-select {
  background: var(--kuma-bg) !important;
  border: 1px solid var(--kuma-border) !important;
  color: var(--kuma-text) !important;
  border-radius: var(--kuma-radius-sm);
  padding: 0.6rem 1rem;
  transition: var(--kuma-transition);
}

.form-control:focus, .form-select:focus {
  border-color: var(--kuma-primary) !important;
  box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.2);
  outline: none;
}

.form-control::placeholder { color: var(--kuma-text-muted); }
.form-label { color: var(--kuma-text); font-weight: 500; }
.form-text { color: var(--kuma-text-muted) !important; font-size: 0.875rem; }

/* ===== Buttons ===== */
.btn-primary {
  background: var(--kuma-primary) !important;
  border: none !important;
  color: #0d1117 !important;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: var(--kuma-radius-sm);
  transition: var(--kuma-transition);
}

.btn-primary:hover {
  filter: brightness(1.1);
}

.btn-outline-light {
  border: 1px solid var(--kuma-border);
  color: var(--kuma-text);
  border-radius: var(--kuma-radius-sm);
  font-weight: 500;
  transition: var(--kuma-transition);
}

.btn-outline-light:hover {
  background: rgba(88, 166, 255, 0.1);
  border-color: var(--kuma-primary);
  color: var(--kuma-primary);
}

/* ===== Tables ===== */
.kuma-table,
.table-dark {
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--kuma-border);
  --bs-table-hover-bg: rgba(88, 166, 255, 0.05);
  color: var(--kuma-text);
}

.table-dark th {
  color: var(--kuma-text-muted);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-color: var(--kuma-border);
  padding: 1rem 1.25rem;
}

.table-dark td {
  padding: 1rem 1.25rem;
  border-color: var(--kuma-border);
}

/* ===== Alerts ===== */
.alert-danger { 
  background: rgba(248, 81, 73, 0.1); 
  border: 1px solid rgba(248, 81, 73, 0.3); 
  color: #f85149;
  border-radius: var(--kuma-radius-sm);
}
.alert-success { 
  background: rgba(88, 166, 255, 0.1); 
  border: 1px solid rgba(88, 166, 255, 0.3); 
  color: var(--kuma-primary);
  border-radius: var(--kuma-radius-sm);
}

/* ===== Login ===== */
.kuma-login-card {
  background: var(--kuma-bg-card);
  border: 1px solid var(--kuma-border);
  border-radius: var(--kuma-radius);
}

/* ===== Section Titles ===== */
h5.text-secondary {
  color: var(--kuma-text-muted) !important;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

/* ===== Footer ===== */
.kuma-footer {
  color: var(--kuma-text-muted);
  border-top: 1px solid var(--kuma-border);
  padding: 2rem 0;
  font-size: 0.875rem;
}

/* ===== Mobile Sidebar ===== */
.sidebar-toggle { color: var(--kuma-text) !important; }
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1025;
  transition: opacity 0.3s ease;
}
.admin-layout.sidebar-open .sidebar-overlay { display: block; }

@media (max-width: 991.98px) {
  .kuma-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 1030;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }

  .admin-layout.sidebar-open .kuma-sidebar {
    transform: translateX(0);
  }

  .main-wrapper {
    width: 100%;
  }

  .main-content {
    padding: 1.5rem 1rem;
  }
}