/* ============================================================
 * Cloudzy Status — Stylesheet
 * Design tokens from design.cloudzy.com
 * Dark-first, aligned with Cloudzy design system
 * ============================================================ */

/* ---- Design tokens ---- */
:root {
  --font-primary:    'Geist', 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Background layers */
  --color-bg:        #040b1a;
  --color-bg-2:      #0b0f1c;
  --color-bg-3:      #08152a;

  /* Text */
  --color-text:      #ffffff;
  --color-text-soft: #d4e3f0;
  --color-text-muted:#8ba0b8;
  --color-text-dim:  #4f627a;

  /* Brand / Accent */
  --color-sky-light: #38bdf8;
  --color-sky:       #0ea5e9;
  --color-sky-dark:  #0284c7;

  /* Status */
  --color-success:   #00b67a;
  --color-warning:   #febc2e;
  --color-error:     #ff5f57;

  /* Borders */
  --color-border:        rgba(56,189,248,0.08);
  --color-border-strong: rgba(56,189,248,0.22);
  --color-border-solid:  rgba(255,255,255,0.05);

  /* Radius */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-xl:  18px;

  /* Shadows */
  --shadow-md: 0 4px 12px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

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

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ---- Layout ---- */
.status-wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 3rem;
}

/* ---- Header ---- */
.status-header {
  text-align: center;
  margin-bottom: 2rem;
}

.status-header img {
  display: inline-block;
  height: 26px;
  width: auto;
}

/* ---- Overall status banner ---- */
.banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  margin-bottom: 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-xl);
}

.banner-dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.banner-text {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Operational */
.banner.banner-ok          { background: rgba(0,182,122,0.08);  border-color: rgba(0,182,122,0.22); }
.banner.banner-ok .banner-dot  { background: var(--color-success); box-shadow: 0 0 8px rgba(0,182,122,0.55); }
.banner.banner-ok .banner-text { color: #00e0a4; }

/* Degraded */
.banner.banner-degraded          { background: rgba(254,188,46,0.08); border-color: rgba(254,188,46,0.22); }
.banner.banner-degraded .banner-dot  { background: var(--color-warning); box-shadow: 0 0 8px rgba(254,188,46,0.55); }
.banner.banner-degraded .banner-text { color: var(--color-warning); }

/* Down */
.banner.banner-down          { background: rgba(255,95,87,0.08);  border-color: rgba(255,95,87,0.22); }
.banner.banner-down .banner-dot  { background: var(--color-error); box-shadow: 0 0 8px rgba(255,95,87,0.55); }
.banner.banner-down .banner-text { color: var(--color-error); }

/* Maintenance */
.banner.banner-maintenance          { background: rgba(14,165,233,0.08); border-color: rgba(14,165,233,0.22); }
.banner.banner-maintenance .banner-dot  { background: var(--color-sky); box-shadow: 0 0 8px rgba(14,165,233,0.55); }
.banner.banner-maintenance .banner-text { color: var(--color-sky-light); }

/* Unknown */
.banner.banner-unknown          { background: rgba(79,98,122,0.12); border-color: rgba(79,98,122,0.22); }
.banner.banner-unknown .banner-dot  { background: var(--color-text-dim); }
.banner.banner-unknown .banner-text { color: var(--color-text-muted); }

/* ---- Announcements ---- */
.ann {
  padding: 16px 20px;
  margin-bottom: 12px;
  border: 1px solid;
  border-radius: var(--radius-xl);
}

.ann-incident    { background: rgba(255,95,87,0.06);  border-color: rgba(255,95,87,0.18); }
.ann-maintenance { background: rgba(14,165,233,0.06); border-color: rgba(14,165,233,0.18); }

.ann-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ann-type-badge,
.ann-status-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
  border: 1px solid transparent;
}

.ann-type-incident    { background: rgba(255,95,87,0.15);  border-color: rgba(255,95,87,0.3);  color: var(--color-error); }
.ann-type-maintenance { background: rgba(14,165,233,0.12); border-color: rgba(14,165,233,0.3); color: var(--color-sky-light); }
.ann-status-badge     { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); color: var(--color-text-muted); }

.ann-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text-soft);
}

.ann-summary {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.ann-entries {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border-solid);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ann-entry {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: baseline;
  font-size: 13px;
}

.ann-entry-status {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.ann-entry-msg  { color: var(--color-text-muted); }

.ann-entry-time {
  font-size: 11px;
  color: var(--color-text-dim);
  white-space: nowrap;
}

/* ---- Sections (groups of rows with optional title) ---- */
.section { margin: 0; }

.section.has-title {
  margin: 12px 0 6px;
  padding: 14px 18px;
  background: var(--color-bg-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

#datacenters > .section.has-title:first-child { margin-top: 0; }

.section-title {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text-soft);
}

/* Rows inside a titled section: divider-style, smaller text — the
 * surrounding section card already provides background + border, so
 * the rows themselves go flat. */
.section.has-title .row {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--color-border-solid);
  border-radius: 0;
  padding: 6px 0;
  margin: 0;
}

.section.has-title .row:first-of-type { border-top: 0; }

.section.has-title .row-name     { font-size: 12px; }
.section.has-title .dot          { width: 7px; height: 7px; }
.section.has-title .status-label { font-size: 11px; }

/* ---- Datacenter rows ---- */
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  margin-bottom: 6px;
  background: var(--color-bg-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color 0.15s;
}

.row:hover { border-color: var(--color-border-strong); }

.row-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.row-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-text-dim);
}

.row-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.row.is-ok          .dot          { background: var(--color-success); box-shadow: 0 0 6px rgba(0,182,122,0.5); }
.row.is-ok          .status-label { color: #00e0a4; }
.row.is-degraded    .dot          { background: var(--color-warning); box-shadow: 0 0 6px rgba(254,188,46,0.5); }
.row.is-degraded    .status-label { color: var(--color-warning); }
.row.is-down        .dot          { background: var(--color-error);   box-shadow: 0 0 6px rgba(255,95,87,0.5); }
.row.is-down        .status-label { color: var(--color-error); }
.row.is-maintenance .dot          { background: var(--color-sky);     box-shadow: 0 0 6px rgba(14,165,233,0.5); }
.row.is-maintenance .status-label { color: var(--color-sky-light); }
.row.is-unknown     .dot          { background: var(--color-text-dim); }
.row.is-unknown     .status-label { color: var(--color-text-dim); }

/* ---- Footer ---- */
.tagline {
  margin: 2rem 0 0.4rem;
  font-size: 13px;
  text-align: center;
  color: var(--color-text-dim);
}

.footer {
  margin: 0;
  font-size: 12px;
  text-align: center;
  color: var(--color-text-dim);
}

.footer time { color: var(--color-text-muted); }

.feeds {
  margin: 0.75rem 0 0;
  font-size: 12px;
  text-align: center;
}

.feeds > * {
  display: inline-block;
  vertical-align: middle;
}

.feeds a,
.feeds select {
  color: var(--color-sky);
  text-decoration: none;
  margin: 0 0.4rem;
  opacity: 0.7;
  transition: opacity 0.15s;
}

.feeds a:hover,
.feeds select:hover,
.feeds select:focus {
  opacity: 1;
  outline: none;
}

.feeds form {
  margin: 0;
  display: inline-block;
}

.feeds select {
  font: inherit;
  background: transparent;
  border: 0;
  padding: 0 14px 0 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%230ea5e9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
}

.feeds select option {
  background: var(--color-bg-2);
  color: var(--color-text-soft);
}