/* Page background (behind h2 and body) */
.status-page{
  background: rgb(253 253 253);
  padding: 32px 0 64px;
}

/* Title */
.status-title{
  margin: 0 0 14px;
  font-size: clamp(22px, 3.5vw, 28px);
  font-weight: 700;
}

/* Card: 3px radius, no hover transitions */
.card{
  background: var(--light-bg);
  border: var(--border);
  border-radius: 3px;
  box-shadow: var(--shadow);
  overflow: hidden;
  padding: 0 12px;
}
.card:hover{ transform: none !important; }

/* Table */
.table{ width:100%; border-collapse:collapse; }
.table thead th{
  background:#f5f5f5;
  text-align:left; font-size:14px; letter-spacing:.06em; text-transform:uppercase;
  color: rgb(24 24 24); padding:10px 12px; border-bottom: var(--border);
}
.table td, .table th{ padding:12px; vertical-align:top; }

/* Events (single column layout) */
.history-card{ margin-top: 26px; }
.table.events .date{
  width:160px; white-space:nowrap; font-weight:500; color:#111;
  border-right: var(--border); background:#fcfcfc;
}
.table.events .day-col{ padding:10px 8px; text-align:left; vertical-align: middle; }
.table.events tbody tr.ok   { border-left:4px solid #84b183; }
.table.events tbody tr.warn { border-left:4px solid #ff9f00; }
.no-incidents{ color: rgb(17 17 17); font-size:14px; }

/* Event block */
.event{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:3px;
  padding:12px; margin:0 0 12px;
}

.event-head{
  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "ttl  time"
    "tags state";
  gap: 6px 12px;
  align-items: center;
  padding: 0px 0px 10px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  text-align: left;
}
.event-title{ grid-area: ttl; margin:0; font-weight:500; }
.event-tags{ grid-area: tags; display:flex; gap:8px; padding:0; margin:0; }
.event-time { grid-area: time; font-size:14px; color: rgb(24 24 24); text-align:right; white-space:nowrap; }
.event-state{ grid-area: state; font-size:14px; color:#262626; font-weight:500; text-align:right; white-space:nowrap; }

.event-start{ font-size:14px; color:var(--muted); }
.event-end{ font-size:14px; color:#262626; font-weight:500; }

/* Description */
.event-desc{ font-size:14px; color:#333; text-align:left; padding-top: 5px; }

/* Status tags */
.tag{
  display:inline-flex; align-items:center; height:24px; padding:0 8px;
  font-size:12px; border-radius:3px; border:1px solid rgba(0,0,0,.12);
  background:#f6f6f6; color:#111; font-weight:500;
}
.tag.sev-critical{ background:#ffe9e3; border-color:#ffc9ba; color:#a23418; font-weight: 500; font-size: 14px;}
.tag.sev-warn    { background:#fff3db; border-color:#ffe1a8; color:#8a5a00; font-weight: 500; font-size: 14px;}
.tag.sev-maint   { background:#e9f1ff; border-color:#cfe1ff; color:#184a99; font-weight: 500; font-size: 14px;}
.tag.sev-info {
    background: #f1f1f1;
    border-color: #e5e5e5;
    font-weight: 500;
    font-size: 14px;
    color: #262626;
}

/* Updates nested table */
.table.updates{
  margin-top:10px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:3px;
  overflow:hidden;
}
.table.updates thead th{ background:#f7f7f7; font-weight: 500; }
.table.updates td{ background:#fff; }
.update-time{ font-weight:600; font-size:14px; margin-bottom:6px; }
.update-text{ font-size:14px; color:#222; }
.muted{ color:var(--muted); font-weight:500; margin-left:8px; }

.page-title {
    grid-area: title;
    margin: 0;
    line-height: 1.1;
    display: flex;
    align-items: center;
    align-self: stretch;
}

.most-recent {
    color: rgb(38 114 48);
    font-weight: 500;
    margin-left: 8px;
}

/* UPDATES: crisper box + header + rows */
.table.updates{
  margin-top:12px;
  border: 1px solid rgba(0,0,0,.12);   /* stronger outer box */
  border-radius:3px;
  background:#fafafa;
  border-collapse: separate;           /* avoids fuzzy edges */
  border-spacing: 0;
  overflow:hidden;
}

.table.updates thead th{
  background:#f2f2f2;
  font-size:13px;                      /* -1px */
  color: rgb(24 24 24);
  padding:10px 12px;
  border-bottom: 1px solid rgba(0,0,0,.12);  /* crisper divider */
  border-top:    1px solid rgba(255,255,255,0); /* keep radius clean */
}

.table.updates tbody td{
  background: #fdfdfd;
  padding:12px;
}

.table.updates tbody tr + tr td{
  border-top: 1px solid rgba(0,0,0,.12);     /* darker row separators */
}

/* optional: light column guide inside rows */
.table.updates tbody td::before{
  content:"";
  position:absolute; left:0; top:10px; bottom:10px; width:2px;
  background: rgba(0,0,0,.06);
  border-radius:2px;
}