/* Aeonik Font */
@font-face {
  font-family: "Aeonik";
  src: url("/static/fonts/Aeonik-Regular.woff2") format("woff2"),
    url("/static/fonts/Aeonik-Regular.woff") format("woff"),
    url("/static/fonts/Aeonik-Regular.eot?#iefix") format("embedded-opentype"),
    url("/static/fonts/Aeonik-Regular.ttf") format("truetype"),
    url("/static/fonts/Aeonik-Regular.svg#Aeonik-Regular") format("svg");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Aeonik";
  src: url("/static/fonts/Aeonik-RegularItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Aeonik";
  src: url("/static/fonts/Aeonik-Medium.woff2") format("woff2"),
    url("/static/fonts/Aeonik-Medium.woff") format("woff"),
    url("/static/fonts/Aeonik-Medium.eot?#iefix") format("embedded-opentype"),
    url("/static/fonts/Aeonik-Medium.ttf") format("truetype"),
    url("/static/fonts/Aeonik-Medium.svg#Aeonik-Medium") format("svg");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Aeonik";
  src: url("/static/fonts/Aeonik-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --primary-color: #4a154b; /* Dark purple */
  --secondary-color: #ed9e49; /* Orange */
  --success-color: #4caf50; /* Green */
  --danger-color: #dc3545; /* Red */
  --warning-color: #f39c12; /* Yellow */
  --header-bg: #333840;
  --body-bg: #f8f9fa;
  --card-bg: #ffffff;
  --text-color: #333333;
  --text-light: #6c757d;
  --border-color: #e9ecef;
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, sans-serif;

  --text-txt-success-primary: #143f1c;
  --text-txt-error-primary: #802626;
  --font-family-Aeonik: Aeonik, var(--font-family);
  --font-size-1-rem: 16px;
  --font-height-15-rem: 24px;
  --font-height-0-rem: 0px;
  --success-bg: rgba(76, 175, 80, 0.1);
  --warning-bg: rgba(243, 156, 18, 0.1);
  --danger-bg: rgba(220, 53, 69, 0.1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family-Aeonik);
  background-color: var(--body-bg);
  color: var(--text-color);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--primary-color);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header */
.header {
  background-color: var(--header-bg);
  padding: 20px 0;
  color: white;
}

.logo-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-text {
  font-weight: 600;
  font-size: 38px;
  font-family: var(--font-family-Aeonik);
}

.logo-highlight {
  color: var(--secondary-color);
}

.logo-divider {
  margin: 0 15px;
  color: #555;
  font-weight: 300;
}

.contact-link {
  color: var(--secondary-color);
  font-weight: 500;
}

/* Main Content */
.main-content {
  padding: 30px 0;
}

/* Status Overview */
.status-overview {
  display: flex;
  align-items: center;
  padding: 24px;
  border-radius: 8px;
  margin-bottom: 30px;
}

.status-overview.success {
  background-color: var(--success-bg);
  border-left: 4px solid var(--success-color);
}

.status-overview.warning {
  background-color: var(--warning-bg);
  border-left: 4px solid var(--warning-color);
}

.status-overview.danger {
  background-color: var(--danger-bg);
  border-left: 4px solid var(--danger-color);
}

.status-icon {
  font-size: 24px;
  margin-right: 20px;
}

.status-overview.success .status-icon {
  color: var(--success-color);
}

.status-overview.warning .status-icon {
  color: var(--warning-color);
}

.status-overview.danger .status-icon {
  color: var(--danger-color);
}

.status-content h2 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 5px;
}

.status-description {
  font-family: var(--font-family-Aeonik, Aeonik);
  font-size: var(--font-size-1-rem, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--font-height-15-rem, 24px);
}

/* Match status colors to operational/outage paradigm */
.status-overview.success .status-description {
  color: var(--text-txt-success-primary, #143f1c);
}

.status-overview.warning .status-description {
  color: #8a6d00; /* Match warning paradigm */
}

.status-overview.danger .status-description {
  color: var(--text-txt-error-primary, #802626);
}

/* Ensure title matches the same color scheme */
.status-overview.success .status-content h2 {
  color: var(--text-txt-success-primary, #143f1c);
}

.status-overview.warning .status-content h2 {
  color: #8a6d00; /* Match warning paradigm */
}

.status-overview.danger .status-content h2 {
  color: var(--text-txt-error-primary, #802626);
}

/* Components Section */
.components-section {
  margin-bottom: 30px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
}

.section-text {
  color: var(--text-light);
  margin-bottom: 20px;
}

.component-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 20px;
}

.component-item {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background-color: var(--card-bg);
  transition: box-shadow 0.2s;
}

.component-content {
  padding: 20px;
}

.component-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.component-name {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.component-status {
  display: flex;
  padding: 4px 12px;
  border-radius: 100px; /* Pill shape */
  align-items: center;
  background-color: var(--success-bg);
}

.status-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: 6px;
}

.component-status {
  /* Default status styles */
  font-family: var(--font-family-Aeonik, Aeonik);
  font-size: var(--font-size-1-rem, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--font-height-15-rem, 24px);
  letter-spacing: var(--font-height-0-rem, 0px);
}

/* Update to use Vue classes directly */
.component-status.status-operational {
  background-color: var(--success-bg);
  color: var(--text-txt-success-primary, #143f1c);
}

.component-status.status-outage {
  background-color: var(--danger-bg);
  color: var(--text-txt-error-primary, #802626);
}

.status-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: 6px;
}

.status-text {
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

/* Success status text */
.status-indicator.operational + .status-text {
  color: var(--text-txt-success-primary, #143f1c);
}

/* Error status text */
.status-indicator.outage + .status-text {
  color: var(--text-txt-error-primary, #802626);
}

.status-indicator svg {
  width: 20px;
  height: 20px;
}

.status-indicator.operational {
  color: var(--text-txt-success-primary, #143f1c);
}

.status-indicator.outage {
  color: var(--text-txt-error-primary, #802626);
}

/* Style for operational status */
.component-status:has(.status-indicator.operational) {
  background-color: var(--success-bg);
}

/* Style for outage status */
.component-status:has(.status-indicator.outage) {
  background-color: var(--danger-bg);
}

/* For browsers that don't support :has() */
.status-pill-operational {
  background-color: rgba(20, 63, 28, 0.1);
}

.status-pill-outage {
  background-color: rgba(128, 38, 38, 0.1);
}

.component-url {
  font-size: 14px;
  color: var(--text-light);
  word-break: break-all;
}

.component-note {
  margin-top: 6px;
  font-size: 13px;
  font-style: italic;
  color: var(--text-light);
}

/* Loading */
.loading-component {
  text-align: center;
  padding: 30px;
  color: var(--text-light);
}

/* Responsive */
@media (max-width: 768px) {
  .component-grid {
    grid-template-columns: 1fr;
  }

  .status-overview {
    flex-direction: column;
    text-align: center;
  }

  .status-icon {
    margin-right: 0;
    margin-bottom: 15px;
  }
}

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

.logo-link:hover,
.logo-link:visited,
.logo-link:active {
  color: inherit;
  text-decoration: none;
}