/* ── Reset & base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --c-bg: #0f1117;
  --c-surface: #1a1d27;
  --c-border: #2e3244;
  --c-text: #e2e8f0;
  --c-muted: #8892a4;
  --c-primary: #4f8ef7;
  --c-healthy: #22c55e;
  --c-running: #3b82f6;
  --c-warning: #eab308;
  --c-unknown: #f59e0b;
  --c-offline: #6b7280;
  --c-error: #ef4444;
  --radius: 8px;
  --font: system-ui, -apple-system, sans-serif;
}

body { background: var(--c-bg); color: var(--c-text); font-family: var(--font); line-height: 1.6; }
a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: monospace; background: var(--c-border); padding:1px 5px; border-radius:4px; font-size:.9em; }

/* ── Layout ─────────────────────────────────────────────────────────────────── */
.container { max-width: 1200px; margin: 0 auto; padding: 1.5rem 1rem; }

/* ── Navbar ──────────────────────────────────────────────────────────────────── */
.navbar { display:flex; align-items:center; gap:1.5rem; background:var(--c-surface); border-bottom:1px solid var(--c-border); padding:.75rem 1.5rem; }
.navbar__brand { font-weight:700; font-size:1.1rem; color:var(--c-primary); }
.navbar__links { display:flex; list-style:none; gap:1rem; flex:1; }
.navbar__user { display:flex; align-items:center; gap:.75rem; font-size:.9rem; color:var(--c-muted); }

/* ── Page header ─────────────────────────────────────────────────────────────── */
.page-title { font-size:1.6rem; font-weight:700; margin-bottom:1.25rem; }
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; }
.page-header .page-title { margin-bottom:0; }

/* ── Buttons ─────────────────────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:.4rem; padding:.5rem 1rem; border-radius:var(--radius); border:none; cursor:pointer; font-size:.9rem; font-family:inherit; text-decoration:none; }
.btn--primary { background:var(--c-primary); color:#fff; }
.btn--secondary { background:var(--c-surface); color:var(--c-text); border:1px solid var(--c-border); }
.btn--link { background:transparent; color:var(--c-primary); padding:0; }
.btn--danger { color:var(--c-error); }
.btn--full { width:100%; justify-content:center; }
.btn:hover { opacity:.87; }

/* ── Alerts & flash ──────────────────────────────────────────────────────────── */
.alert { padding:.75rem 1rem; border-radius:var(--radius); margin-bottom:1rem; border:1px solid transparent; }
.alert--success { background:#14532d33; border-color:#22c55e55; color:#86efac; }
.alert--error   { background:#7f1d1d33; border-color:#ef444455; color:#fca5a5; }
.alert--warning { background:#78350f33; border-color:#f59e0b55; color:#fcd34d; }

/* ── Status badges ───────────────────────────────────────────────────────────── */
.badge { display:inline-block; padding:.2rem .6rem; border-radius:999px; font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.badge--status-healthy { background:#14532d; color:#86efac; }
.badge--status-running { background:#172554; color:#93c5fd; }
.badge--status-warning { background:#713f12; color:#fde68a; }
.badge--status-unknown { background:#78350f; color:#fcd34d; }
.badge--status-offline { background:#1f2937; color:#9ca3af; }
.badge--status-error   { background:#7f1d1d; color:#fca5a5; }

/* ── Services grid ───────────────────────────────────────────────────────────── */
.services-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1rem; }
.service-card { display:block; background:var(--c-surface); border:2px solid var(--c-border); border-radius:var(--radius); padding:1rem; transition:border-color .15s; color:var(--c-text); text-decoration:none; }
.service-card:hover { border-color:var(--c-primary); }
.service-card--status-healthy { border-left:4px solid var(--c-healthy); }
.service-card--status-running { border-left:4px solid var(--c-running); }
.service-card--status-warning { border-left:4px solid var(--c-warning); }
.service-card--status-unknown { border-left:4px solid var(--c-unknown); }
.service-card--status-offline { border-left:4px solid var(--c-offline); }
.service-card--status-error   { border-left:4px solid var(--c-error); }
.service-icon { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; border-radius:8px; }
.service-icon--font { color:var(--c-primary); background:rgba(79, 142, 247, 0.14); }
.service-icon--font i { color:inherit; }
.service-icon--placeholder { background:var(--c-border); }
.service-card__header { display:flex; align-items:center; gap:.75rem; margin-bottom:.5rem; }
.service-card__icon { width:32px; height:32px; object-fit:contain; border-radius:4px; }
.service-card__icon i { font-size:1rem; }
.service-card__name { flex:1; font-weight:600; }
.service-card__message { color:var(--c-muted); font-size:.88rem; margin-bottom:.4rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.service-card__meta { color:var(--c-muted); font-size:.8rem; }

/* ── Service detail ──────────────────────────────────────────────────────────── */
.service-detail__header { display:flex; align-items:flex-start; gap:1rem; margin-bottom:1.5rem; }
.service-detail__icon { width:56px; height:56px; object-fit:contain; border-radius:8px; }
.service-detail__icon i { font-size:1.65rem; }
.service-detail__meta { color:var(--c-muted); font-size:.88rem; margin-top:.3rem; }
.service-detail__current { background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius); padding:1rem; margin-bottom:1.5rem; line-height:2; }
.service-detail__actions { display:flex; gap:.75rem; margin-bottom:1.5rem; }

/* ── Table ───────────────────────────────────────────────────────────────────── */
.table { width:100%; border-collapse:collapse; font-size:.9rem; }
.table th { text-align:left; padding:.6rem .75rem; border-bottom:2px solid var(--c-border); color:var(--c-muted); font-weight:600; }
.table td { padding:.6rem .75rem; border-bottom:1px solid var(--c-border); vertical-align:middle; }
.table .actions { display:flex; gap:.6rem; align-items:center; }
.service-list__icon { width:20px; height:20px; margin-right:6px; vertical-align:middle; }
.service-list__icon i { font-size:.85rem; }
.nowrap { white-space:nowrap; }

/* ── Pagination ──────────────────────────────────────────────────────────────── */
.pagination { display:flex; align-items:center; gap:1rem; margin-top:1rem; color:var(--c-muted); font-size:.9rem; }

/* ── Forms ───────────────────────────────────────────────────────────────────── */
.form-page { max-width:600px; }
.form-group { margin-bottom:1.1rem; }
.form-group label { display:block; margin-bottom:.35rem; font-weight:500; font-size:.9rem; }
.form-group small { display:block; margin-top:.35rem; color:var(--c-muted); line-height:1.5; }
.form-control { width:100%; background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius); padding:.5rem .75rem; color:var(--c-text); font-size:.95rem; font-family:inherit; }
.form-control:focus { outline:none; border-color:var(--c-primary); }
.checkbox-label { display:block; margin-bottom:.4rem; font-weight:normal; cursor:pointer; }
.service-edit__icon-preview { display:flex; align-items:center; min-height:40px; margin-bottom:8px; }
.service-edit__icon { width:40px; height:40px; }
.service-edit__icon i { font-size:1.25rem; }

/* ── Login page ──────────────────────────────────────────────────────────────── */
.login-page { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-box { background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius); padding:2.5rem; width:100%; max-width:380px; }
.login-box__title { text-align:center; font-size:1.6rem; font-weight:700; color:var(--c-primary); margin-bottom:1.5rem; }

/* ── Error page ──────────────────────────────────────────────────────────────── */
.error-page { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.error-box { text-align:center; max-width:580px; padding:2rem; }
.error-box h1 { font-size:1.8rem; margin-bottom:1rem; }

/* ── Dependency list (service-down page) ─────────────────────────────────────── */
.dependency-list { list-style:none; text-align:left; margin:1.5rem 0; border:1px solid var(--c-border); border-radius:var(--radius); overflow:hidden; }
.dependency-list__item { padding:.75rem 1rem; border-bottom:1px solid var(--c-border); }
.dependency-list__item:last-child { border-bottom:none; }
.dependency-list__item--up   { background:#14532d22; color:#86efac; }
.dependency-list__item--down { background:#7f1d1d22; color:#fca5a5; }