/* ============================================
   JULIUS SILVERT STATUS PAGE — CUSTOM CSS
   Theme: Professional Dark / Brand Red
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700&family=Barlow+Condensed:wght@500;700&display=swap');

/* ---- Global Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Barlow', sans-serif !important;
  background: #0d0f12 !important;
  color: #d6d9de !important;
}

/* ---- Page Container ---- */
.page-body, .container, .layout-content {
  background: transparent !important;
}

/* ---- Hero / Header Band ---- */
.page-header {
  background: linear-gradient(135deg, #111318 0%, #1a1d24 100%) !important;
  border-bottom: 1px solid #2a2e38 !important;
  padding: 40px 0 32px !important;
}

/* Logo */
.page-header img {
  max-height: 52px !important;
  filter: brightness(1.05) !important;
}

/* Subscribe button */
.btn-subscribe, .subscribe-btn, a[href*="subscribe"], button[class*="subscribe"] {
  background: #c0392b !important;
  border: none !important;
  border-radius: 3px !important;
  color: #fff !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-size: 13px !important;
  padding: 10px 22px !important;
  transition: background 0.2s ease !important;
}
.btn-subscribe:hover, a[href*="subscribe"]:hover {
  background: #a93226 !important;
}

/* ---- Status Banner ---- */
.status-heading, .page-status .status {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

/* All-green banner */
.page-status.status-none, .unaffected-components .page-status {
  background: linear-gradient(90deg, #0e4a2e 0%, #0b5e39 100%) !important;
  border: 1px solid #1a7a4a !important;
  border-radius: 6px !important;
  padding: 20px 28px !important;
  margin-bottom: 32px !important;
}

/* Status colors */
.page-status.status-none .status { color: #2ecc71 !important; }
.page-status.status-minor .status { color: #f39c12 !important; }
.page-status.status-major .status { color: #c0392b !important; }

/* ---- Component Groups ---- */
.components-section {
  background: transparent !important;
}

.component-container {
  background: #13161c !important;
  border: 1px solid #22262f !important;
  border-radius: 6px !important;
  margin-bottom: 12px !important;
  overflow: hidden !important;
  transition: border-color 0.2s ease !important;
}

.component-container:hover {
  border-color: #3a3f4d !important;
}

/* Component name */
.component-container .name {
  font-family: 'Barlow', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #cdd2db !important;
  letter-spacing: 0.01em !important;
}

/* Component status label */
.component-container .component-status {
  font-family: 'Barlow', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #2ecc71 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

/* Uptime bar track */
.uptime-graph, .uptimebar {
  background: #1e222b !important;
  border-radius: 3px !important;
  overflow: hidden !important;
}

/* Uptime bar fill (operational) */
.uptime-graph .day.operational, .day.operational rect {
  fill: #1a7a4a !important;
  background: #1a7a4a !important;
}

/* Uptime % label */
.uptime-percent, .component-uptime {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
}

/* Group headers */
.child-components-container .component-inner-container,
.group-parent .component-inner-container {
  background: #0f1217 !important;
}

.group-parent .component-header {
  border-bottom: 1px solid #22262f !important;
}

/* ---- Incident History ---- */
.incidents-list, .incident-container {
  background: transparent !important;
}

.incident-title a {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #e0e4eb !important;
  text-decoration: none !important;
  letter-spacing: 0.02em !important;
}

.incident-title a:hover {
  color: #c0392b !important;
}

.update-body p, .incident-body p {
  color: #8a919e !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.update-timestamp, .incident-timestamp {
  font-size: 11px !important;
  color: #555c69 !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

/* Status badges on incidents */
.impact-label, .update-resolved, .update-investigating, .update-monitoring {
  border-radius: 3px !important;
  padding: 2px 8px !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.update-resolved { background: #0e4a2e !important; color: #2ecc71 !important; }
.update-investigating { background: #4a1f0e !important; color: #e67e22 !important; }
.update-monitoring { background: #1a2d4a !important; color: #3498db !important; }

/* Date separators */
.date-separator span, h4.date-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #454c59 !important;
  font-weight: 600 !important;
}

.date-separator::before, .date-separator::after {
  background: #22262f !important;
}

/* ---- Legend ---- */
.legend .legend-item .legend-label {
  font-size: 11px !important;
  color: #666d7a !important;
  font-family: 'Barlow', sans-serif !important;
}

/* ---- Footer ---- */
.page-footer, footer {
  border-top: 1px solid #1a1e27 !important;
  background: #0b0d11 !important;
  padding: 24px 0 !important;
}

.page-footer a, footer a {
  color: #555c69 !important;
  font-size: 12px !important;
  font-family: 'Barlow', sans-serif !important;
}

.page-footer a:hover { color: #c0392b !important; }

/* Powered by Statuspage */
.powered-by { opacity: 0.35 !important; }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0d0f12; }
::-webkit-scrollbar-thumb { background: #2a2e38; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #3a3f4d; }