* { box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  margin: 0;
  background: #f5f7fa;
  color: #2c3e50;
}

/* Login page */
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-box {
  background: #fff; padding: 2rem; border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,.08); width: 320px;
}
.login-box h1 { margin-top: 0; font-size: 1.3rem; color: #2c3e50; }
.login-box label { display: block; margin: 0.75rem 0; font-size: 0.9rem; }
.login-box input {
  width: 100%; padding: 0.6rem; margin-top: 0.25rem;
  border: 1px solid #d0d7de; border-radius: 4px;
}
.login-box button {
  width: 100%; padding: 0.7rem; margin-top: 1rem;
  background: #2c3e50; color: #fff; border: 0; border-radius: 4px;
  font-size: 1rem; cursor: pointer;
}
.login-box button:hover { background: #1e2b3a; }
.error {
  padding: 0.6rem; background: #fee; color: #c0392b;
  border-radius: 4px; margin-bottom: 0.75rem; font-size: 0.9rem;
}

/* Topbar */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.5rem; background: #2c3e50; color: #fff;
}
.topbar h1 { margin: 0; font-size: 1.1rem; font-weight: 500; }
.topbar h1 a { color: #ecf0f1; text-decoration: none; }
.topbar h1 a:hover { color: #fff; }
.user-info { display: flex; align-items: center; gap: 1rem; font-size: 0.9rem; }
.btn-sm {
  padding: 0.3rem 0.7rem; background: #34495e;
  color: #fff; border-radius: 3px; text-decoration: none; font-size: 0.85rem;
}
.btn-sm:hover { background: #1e2b3a; }

/* Main */
main { max-width: 1200px; margin: 1.5rem auto; padding: 0 1.5rem; }

/* Summary KPI */
.summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem; }
.kpi {
  background: #fff; padding: 1.2rem; border-radius: 6px; text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.06); border-left: 4px solid #95a5a6;
}
.kpi .num { display: block; font-size: 2rem; font-weight: 600; }
.kpi .lbl { display: block; font-size: 0.85rem; color: #7f8c8d; margin-top: 0.25rem; }
.kpi.ok { border-left-color: #27ae60; } .kpi.ok .num { color: #27ae60; }
.kpi.warn { border-left-color: #f39c12; } .kpi.warn .num { color: #f39c12; }
.kpi.crit { border-left-color: #e74c3c; } .kpi.crit .num { color: #e74c3c; }
.kpi.unkn { border-left-color: #95a5a6; } .kpi.unkn .num { color: #7f8c8d; }

/* Cards grid */
.hosts h2 { font-size: 1.1rem; margin-bottom: 1rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.card {
  background: #fff; border-radius: 6px; padding: 1rem; text-decoration: none;
  color: inherit; box-shadow: 0 1px 3px rgba(0,0,0,.06);
  border-left: 4px solid #95a5a6;
  display: block; transition: transform 0.1s, box-shadow 0.1s;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.card.status-ok { border-left-color: #27ae60; }
.card.status-warn { border-left-color: #f39c12; }
.card.status-crit { border-left-color: #e74c3c; }
.card.status-unkn { border-left-color: #95a5a6; }
.card-head { display: flex; align-items: center; gap: 0.5rem; }
.card-head .dot { width: 10px; height: 10px; border-radius: 50%; background: #95a5a6; }
.card.status-ok .dot { background: #27ae60; }
.card.status-warn .dot { background: #f39c12; }
.card.status-crit .dot { background: #e74c3c; }
.card.status-unkn .dot { background: #95a5a6; }
.card-head .name { flex: 1; font-weight: 600; }
.card-head .state { font-size: 0.75rem; padding: 0.15rem 0.5rem; border-radius: 3px; background: #ecf0f1; color: #7f8c8d; }
.card.status-ok .state { background: #d4f4e0; color: #27ae60; }
.card.status-warn .state { background: #fdebd0; color: #f39c12; }
.card.status-crit .state { background: #fadbd8; color: #e74c3c; }
.card-body { margin-top: 0.5rem; }
.card-body .alias { font-size: 0.85rem; color: #7f8c8d; margin-bottom: 0.5rem; }
.svc-stats { display: flex; gap: 0.4rem; flex-wrap: wrap; font-size: 0.75rem; }
.svc-stats span { padding: 0.15rem 0.4rem; border-radius: 3px; }
.svc-stats .ok { background: #d4f4e0; color: #27ae60; }
.svc-stats .warn { background: #fdebd0; color: #f39c12; }
.svc-stats .crit { background: #fadbd8; color: #e74c3c; }
.svc-stats .unkn { background: #ecf0f1; color: #7f8c8d; }

/* Detail page */
.status-banner {
  padding: 1.2rem 1.5rem; border-radius: 6px; margin-bottom: 1.5rem;
  background: #ecf0f1; color: #2c3e50;
  display: flex; align-items: center; gap: 1rem;
}
.status-banner.status-ok { background: #d4f4e0; color: #1e8449; }
.status-banner.status-warn { background: #fdebd0; color: #c66606; }
.status-banner.status-crit { background: #fadbd8; color: #a82e23; }
.status-banner .state { font-size: 1.1rem; font-weight: 600; padding: 0.3rem 0.7rem; background: rgba(255,255,255,.5); border-radius: 4px; }
.status-banner .meta { font-size: 0.9rem; }

table.services { width: 100%; border-collapse: collapse; background: #fff; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
table.services th, table.services td { padding: 0.7rem 1rem; text-align: left; border-bottom: 1px solid #ecf0f1; }
table.services th { background: #f7f9fb; font-size: 0.85rem; color: #7f8c8d; text-transform: uppercase; letter-spacing: 0.5px; }
table.services tr.status-ok td.svc-state { color: #27ae60; font-weight: 600; }
table.services tr.status-warn td.svc-state { color: #f39c12; font-weight: 600; }
table.services tr.status-crit td.svc-state { color: #e74c3c; font-weight: 600; }
table.services tr.status-unkn td.svc-state { color: #7f8c8d; font-weight: 600; }
table.services .svc-name { font-weight: 500; }
table.services .svc-info { color: #5a6c7d; font-size: 0.9rem; max-width: 500px; }
table.services .svc-time { color: #7f8c8d; font-size: 0.85rem; }

footer {
  text-align: center; padding: 1.5rem; color: #95a5a6; font-size: 0.85rem;
}