/* Body & background */ 
body { 
  background-color: #000; 
  color: #e5e7eb; 
  font-family: 'Inter', sans-serif; 
}

/* Toggle switches */ 
.toggle-switch { 
  display: flex; 
  align-items: center; 
  justify-content: flex-start; 
  position: relative; 
  padding: 8px 12px; 
  cursor: pointer; 
  font-size: 14px; 
  user-select: none; 
}

.toggle-switch input { 
  display: none; 
}

.switch-slider { 
  position: relative; 
  width: 36px; 
  height: 18px; 
  background-color: #6b7280; 
  border-radius: 9px; 
  margin-right: 8px; 
  transition: background 0.2s; 
}

.switch-slider::before { 
  content: ""; 
  position: absolute; 
  height: 14px; 
  width: 14px; 
  left: 2px; 
  bottom: 2px; 
  background-color: white; 
  border-radius: 50%; 
  transition: transform 0.2s; 
}

.toggle-switch input:checked + .switch-slider { 
  background-color: #11b981; 
}

.toggle-switch input:checked + .switch-slider::before { 
  transform: translateX(18px); 
}

.toggle-switch:hover { 
  background-color: #1f2937; 
  border-radius: 6px; 
}

/* Model cards (uptime) */ 
.stack-container { 
  padding: 8px 16px; 
}

.model { 
  margin: 16px auto; 
  background: #111827; 
  border-radius: 10px; 
  padding: 8px 12px; 
  max-width: 100%; 
}

@media (max-width: 768px) { 
  .model { max-width: 100%; } 
  .dropdown-container { max-width: 100%; } 
}

/* Divider */ 
.endpoint-divider { 
  border: 0; 
  height: 1px; 
  background: #444; 
  margin: 12px 20%; 
}

/* Model header & blocks */ 
.model-header { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  flex-wrap: wrap; 
  margin-bottom: 6px; 
}

.model-name { 
  font-weight: 500; 
  font-size: 14px; 
  display: flex; 
  align-items: center; 
  gap: 6px; 
}

.model-name.ok::before {
  content: "✔";
  color: #11b981;
}

/* last day bad */ 
.model-name.bad::before { 
  content: "✖"; 
  color: #f87171; 
}

.uptime { 
  font-size: 13px; 
  font-weight: 500; 
}

.uptime-green { color: #11b981; } 
.uptime-yellow { color: #facc15; } 
.uptime-orange { color: #fb923c; } 
.uptime-red { color: #f97171; }

.blocks { 
  display: flex; 
  flex-wrap: nowrap; 
  overflow: visible; 
  gap: 2px; 
  width: 100%; 
}

.block { 
  flex: 0 1 auto; 
  height: 30px; 
  border-radius: 4px;
  transition: filter 0.15s ease; 
}

.block:hover { 
  filter: brightness(1); 
}

.block .tooltip-text {
  opacity: 0;
  position: absolute;
  top: 125%; /* below the block */
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #333, #555);
  color: #fff;
  text-align: left;
  padding: 8px 12px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  white-space: nowrap;
  z-index: 100;
  transition: opacity 0.2s, transform 0.2s;
}
.block:hover .tooltip-text {
  overflow: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(5px); /* slight pop effect */
}
.tooltip-status {
  font-weight: 300;
  font-size: 0.85rem;
  color: white;
  text-transform: capitalize;
}
.tooltip-divider {
  height: 1px;
  background-color: rgba(255,255,255,0.3);
  margin: 4px 0;
}
.tooltip-time {
  font-size: 0.75rem;
  color: #9b9b9b;
}
.block.up { background-color: #11b981; }
.block.down { background-color: #f97171; }
.block.shortlyDown { background-color: #f1a262; }
.block.nodata { background-color: #6b7280; }

.block.up:hover {
  background-color: #0e7a50;
}

.block.down:hover {
  background-color: #5c0c0c;
}

.block.shortlyDown:hover {
  background-color: #b85c1c;
}

.block.nodata:hover {
  background-color: #4b5563;
}

.footer { 
  display: flex; 
  justify-content: space-between; 
  font-size: 11px; 
  color: #9ca3af; 
  margin-top: 6px; 
}

/* Status panel */ 
.status-container { 
  font-family: 'Inter', sans-serif; 
  color: #e5e7eb; 
  padding: 24px 18px; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  background-color: #111827; 
  border-radius: 12px; 
  max-width: 400px; 
  margin: 0 auto; 
}

.status-container img { 
  display: block; 
  width: 100%; 
  height: auto; 
  border-radius: 12px; 
  object-fit: cover; 
  max-width: 160px; 
  margin-bottom: 16px; 
}

.status-circle { 
  width: 25px; 
  height: 25px; 
  border-radius: 50%; 
  margin: 0 auto 12px auto; 
  box-shadow: 0 0 12px rgba(0,0,0,0.6); 
}

.status-text { 
  font-size: 25px; 
  font-weight: 600; 
  text-align: center; 
}

.status-updated { 
  font-size: 17px; 
  color: #9ca3af; 
  margin-top: 4px; 
  text-align: center; 
}

/* Collapsible sections*/ 
.section { 
  margin: 16px auto; 
  max-width: 60%; 
  background: #111827; 
  border-radius: 10px; 
  padding: 0; 
  overflow: visible; 
  border: 1px solid #1f2937; 
}

.section-header { 
  width: 100%; 
  padding: 14px 16px; 
  background: #0f1620; 
  color: #e5e7eb; 
  border: none;
  border-radius: 10px;
  font-size: 16px; 
  font-weight: 600; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  cursor: pointer; 
  text-align: left;
}

.section-header:hover { 
  background: #1a2332; 
}

.arrow { 
  transition: transform 0.25s ease; 
  font-size: 14px; 
}

/* collapsed by default */ 
.section-content { 
  max-height: 0; 
  overflow: hidden;
  transition: max-height 0.25s ease, padding 0.25s ease; 
}

/* expanded state */ 
.section-content.open { 
  padding: 16px;
  overflow: visible;
  position: relative; /* keep stacking context */
}

@media (max-width: 768px) { 
  .section { max-width: 100%; } 
}