/* ===== STATUS PAGE ===== */

.statuspage{
  max-width:1100px;
  margin:80px auto;
  padding:0 20px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto;
  color:#e5e7eb;
}

/* ===== GLOBAL STATUS ===== */

.statuspage-global{
  display:flex;
  align-items:center;
  gap:14px;
  padding:20px 24px;
  border-radius:16px;
  margin-bottom:32px;
  font-weight:600;
  font-size:18px;
}

.statuspage-global.ok{
  background:rgba(16,185,129,.12);
  color:#34d399;
}

.statuspage-global.warn{
  background:rgba(245,158,11,.12);
  color:#fbbf24;
}

.statuspage-global.down{
  background:rgba(239,68,68,.12);
  color:#f87171;
}

.statuspage-icon{
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#10b981;
  color:#000;
  font-size:14px;
}

/* ===== SERVICES ===== */

.service{
  padding:22px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}

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

.service-left{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:16px;
}

.service-right{
  display:flex;
  align-items:center;
  gap:16px;
  font-size:14px;
}

/* ===== DOT / STATE ===== */

.dot{
  width:10px;
  height:10px;
  border-radius:50%;
}

.dot.up{ background:#10b981; }
.dot.down{ background:#ef4444; }
.dot.maintenance{ background:#f59e0b; }

.state{
  font-weight:600;
}

.state.up{ color:#34d399; }
.state.down{ color:#f87171; }
.state.maintenance{ color:#fbbf24; }

.uptime{
  color:#34d399;
}

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

.bars{
  display:grid;
  grid-template-columns:repeat(90,1fr);
  gap:2px;
  margin:10px 0 6px;
}

.bar{
  height:22px;
  border-radius:3px;
  background:#10b981;
  position:relative;            /* ⬅ potrzebne do tooltipa */
  cursor:pointer;               /* ⬅ UX */
}

.bar.up{ background:#10b981; }
.bar.down{ background:#ef4444; }
.bar.maintenance{ background:#f59e0b; }
.bar.unknown{ background:#6b7280; }

/* ===== TOOLTIP (DODATEK – NIE ZMIENIA WYGLĄDU) ===== */

.bar::after{
  content: attr(data-tooltip);
  position:absolute;
  left:50%;
  bottom:calc(100% + 8px);
  transform:translateX(-50%) translateY(4px);

  background:rgba(10,10,15,.95);
  color:#fff;
  font-size:12px;
  padding:6px 8px;
  border-radius:8px;
  white-space:nowrap;

  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
  z-index:50;
}

.bar::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:100%;
  transform:translateX(-50%);
  border:6px solid transparent;
  border-top-color:rgba(10,10,15,.95);

  opacity:0;
  transition:opacity .15s ease;
  z-index:49;
}

.bar:hover::after,
.bar:hover::before{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* ===== RANGE ===== */

.range{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:rgba(255,255,255,.45);
}

/* ===== ERROR ===== */

.status-error{
  padding:18px;
  background:rgba(239,68,68,.12);
  border-radius:14px;
  color:#f87171;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 768px){
  .service-head{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }

  .service-right{
    gap:10px;
  }
  
  .bars{
    width: 85%;
    grid-template-columns: repeat(35, minmax(0, 1fr));
    gap: 3px;
  }

}