/* ===========================================
   MEIBEL STATUSPAGE CUSTOM CSS
   Based on Brand Guidelines - v2
   =========================================== */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* CSS Variables for Brand Colors */
:root {
  --meibel-blue-primary: #1160D6;
  --meibel-blue-dark: #141E3D;
  --meibel-blue-light: #6D89E1;
  --meibel-blue-pale: #D3E6FC;
  --meibel-green: #0E8A5B;
  --meibel-white: #FFFFFF;
  --meibel-gray-light: #F5F7FA;
  --meibel-gray-text: #4A5568;
}

/* Base Typography */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  color: var(--meibel-gray-text);
}

/* Subscribe Button Styling */
.btn.subscribe-btn,
.btn-subscribe,
a.btn[href*="subscribe"],
.page-header .btn {
  background-color: var(--meibel-blue-primary) !important;
  border-color: var(--meibel-blue-primary) !important;
  color: var(--meibel-white) !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  padding: 10px 20px !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  letter-spacing: 0.5px !important;
  transition: all 0.2s ease !important;
}

.btn.subscribe-btn:hover,
.btn-subscribe:hover,
a.btn[href*="subscribe"]:hover,
.page-header .btn:hover {
  background-color: var(--meibel-blue-dark) !important;
  border-color: var(--meibel-blue-dark) !important;
}

/* Status Banner - All Systems Operational */
.page-status {
  border-radius: 8px !important;
  font-weight: 600 !important;
}

.page-status.status-none {
  background-color: var(--meibel-green) !important;
}

/* =============================================
   COMPONENT LIST - CLEAN STYLING
   ============================================= */

/* Remove outer border from component section */
.components-section,
.component-container,
.components-container {
  border: none !important;
  box-shadow: none !important;
}

/* Component rows - subtle separator only */
.component-container {
  border-bottom: 1px solid #E2E8F0 !important;
  padding: 20px 0 !important;
}

.component-container:last-child {
  border-bottom: none !important;
}

/* Remove any wrapper borders */
.components-section .components-container,
.component-inner-container {
  border: none !important;
}

/* Component Names */
.name,
.component-name {
  font-weight: 600 !important;
  color: var(--meibel-blue-dark) !important;
  font-size: 16px !important;
}

/* Operational Status Text */
.component-status {
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
}

.component-status.operational,
span.component-status[class*="operational"] {
  color: var(--meibel-green) !important;
}

/* =============================================
   UPTIME BARS
   ============================================= */

/* Make all uptime bars the brand green */
.uptime-day,
.uptime-day-ok,
.bar {
  background-color: var(--meibel-green) !important;
  opacity: 0.3;
}

/* Today and recent days - full opacity */
.uptime-day-ok,
.bar.operational,
.uptime-day.operational {
  background-color: var(--meibel-green) !important;
  opacity: 1 !important;
}

/* Days with no data - light gray */
.uptime-day-no-data,
.bar.no-data {
  background-color: #CBD5E0 !important;
  opacity: 0.5 !important;
}

/* =============================================
   VIEW HISTORICAL UPTIME LINK
   ============================================= */
a[href*="uptime"],
.uptime-link {
  color: var(--meibel-blue-primary) !important;
  font-weight: 500 !important;
}

a[href*="uptime"]:hover {
  color: var(--meibel-blue-dark) !important;
}

/* =============================================
   PAST INCIDENTS SECTION
   ============================================= */

.incidents-list .page-separator,
.date-separator {
  font-weight: 600 !important;
  color: var(--meibel-blue-dark) !important;
  font-size: 14px !important;
}

.incident-title a {
  color: var(--meibel-blue-dark) !important;
  font-weight: 600 !important;
}

.incident-title a:hover {
  color: var(--meibel-blue-primary) !important;
}

/* Status Labels */
.incident-status {
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  letter-spacing: 0.3px !important;
}

.incident-status.resolved {
  color: var(--meibel-green) !important;
}

.incident-status.monitoring {
  color: var(--meibel-blue-primary) !important;
}

/* =============================================
   FOOTER
   ============================================= */

.meibel-footer {
  text-align: center;
  padding: 32px 20px;
  background: linear-gradient(180deg, var(--meibel-gray-light) 0%, var(--meibel-white) 100%);
  border-top: 1px solid #E2E8F0;
  margin-top: 48px;
}

.meibel-footer-links {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.meibel-footer-links a {
  color: var(--meibel-gray-text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s ease;
}

.meibel-footer-links a:hover {
  color: var(--meibel-blue-primary);
}

.meibel-footer-copyright {
  color: #718096;
  font-size: 13px;
}

/* =============================================
   GENERAL LINKS
   ============================================= */

a {
  color: var(--meibel-blue-primary);
}

a:hover {
  color: var(--meibel-blue-dark);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .meibel-footer-links {
    flex-direction: column;
    gap: 12px;
  }
}