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

:root {
  --sidebar-w: 200px;
  --bg:        #0f1117;
  --bg-card:   #1a1d27;
  --bg-hover:  #222535;
  --border:    #2a2d3e;
  --text:      #e2e8f0;
  --text-muted:#8892a4;
  --accent:    #6366f1;
  --accent-h:  #818cf8;
  --ok:        #22c55e;
  --fail:      #ef4444;
  --warn:      #f59e0b;
  --pending:   #64748b;
  --radius:    8px;
  --shadow:    0 1px 3px rgba(0,0,0,.4);
}

html, body { height: 100%; }
body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont,
       'Segoe UI', system-ui, sans-serif; font-size: 14px; line-height: 1.5; display: flex; }

a { color: var(--accent-h); text-decoration: none; }
a:hover { text-decoration: underline; }
code { background: var(--bg-hover); padding: 1px 5px; border-radius: 4px;
       font-size: 12px; font-family: 'SF Mono', 'Fira Code', monospace; }
pre.raw-payload { background: var(--bg-hover); padding: 1rem; border-radius: var(--radius);
                  overflow: auto; font-size: 12px; max-height: 500px; white-space: pre-wrap; }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar { width: var(--sidebar-w); background: var(--bg-card); border-right: 1px solid var(--border);
           display: flex; flex-direction: column; flex-shrink: 0; position: sticky; top: 0;
           height: 100vh; overflow-y: auto; }

.sidebar-logo { padding: 1.25rem 1rem; border-bottom: 1px solid var(--border);
                display: flex; align-items: center; gap: .6rem; }
.logo-icon { font-size: 1.5rem; }
.logo-text  { font-weight: 700; font-size: .85rem; line-height: 1.2; }

.nav-links { list-style: none; padding: .5rem 0; flex: 1; }
.nav-links li a { display: flex; align-items: center; gap: .5rem;
                  padding: .55rem 1rem; color: var(--text-muted);
                  border-left: 3px solid transparent; transition: all .15s; }
.nav-links li a:hover, .nav-links li a.active {
  color: var(--text); background: var(--bg-hover); border-left-color: var(--accent);
  text-decoration: none; }
.nav-icon { font-size: 1rem; width: 1.2rem; text-align: center; }

.sidebar-footer { padding: .75rem 1rem; border-top: 1px solid var(--border);
                  font-size: .8rem; color: var(--text-muted); }

/* ── Main content ────────────────────────────────────────────────────────── */
.main-content { flex: 1; padding: 1.5rem 2rem; overflow-y: auto; max-width: 100%; }

.page-header { display: flex; align-items: center; gap: 1rem;
               margin-bottom: 1.5rem; flex-wrap: wrap; }
.page-header h1 { font-size: 1.4rem; font-weight: 700; flex: 1; }
.header-meta { color: var(--text-muted); font-size: .85rem; }

h2 { font-size: 1.1rem; font-weight: 600; margin: 1.5rem 0 .75rem; }
h3 { font-size: .95rem; font-weight: 600; margin: 1.25rem 0 .5rem; }

.page-desc { color: var(--text-muted); margin-bottom: 1.25rem; }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card { background: var(--bg-card); border: 1px solid var(--border);
        border-radius: var(--radius); padding: 1.25rem; }

/* ── Alerts ──────────────────────────────────────────────────────────────── */
.alert { padding: .75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem;
         font-size: .875rem; }
.alert-error   { background: #2d1515; border: 1px solid var(--fail);   color: #fca5a5; }
.alert-success { background: #0f2d1b; border: 1px solid var(--ok);     color: #86efac; }
.alert-warning { background: #2d200a; border: 1px solid var(--warn);   color: #fde68a; }

/* ── Summary bar ─────────────────────────────────────────────────────────── */
.summary-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
               gap: 1rem; margin-bottom: 2rem; }
.summary-card { background: var(--bg-card); border: 1px solid var(--border);
                border-radius: var(--radius); padding: 1rem 1.25rem; text-align: center; }
.summary-ok     { border-left: 3px solid var(--ok); }
.summary-failed { border-left: 3px solid var(--fail); }
.summary-pending{ border-left: 3px solid var(--pending); }
.summary-number { font-size: 2rem; font-weight: 700; line-height: 1; }
.summary-label  { font-size: .75rem; color: var(--text-muted); margin-top: .25rem; }

/* ── Server grid ─────────────────────────────────────────────────────────── */
.server-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
               gap: 1rem; margin-bottom: 2rem; }
.server-card { background: var(--bg-card); border: 1px solid var(--border);
               border-radius: var(--radius); padding: 1rem 1.25rem;
               transition: background .15s, border-color .15s; display: block; }
.server-card:hover { background: var(--bg-hover); border-color: var(--accent);
                     text-decoration: none; }
.server-card-ok    { border-left: 3px solid var(--ok); }
.server-card-error { border-left: 3px solid var(--fail); }
.server-name  { font-weight: 600; margin-bottom: .5rem; }
.server-stats { display: flex; gap: 1rem; font-size: .9rem; margin-bottom: .25rem; }
.server-meta  { font-size: .75rem; color: var(--text-muted); }
.stat-ok      { color: var(--ok); }
.stat-fail    { color: var(--fail); }
.stat-total   { color: var(--text-muted); }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.table-wrapper { overflow-x: auto; border-radius: var(--radius); margin-bottom: 1.5rem; }
.data-table { width: 100%; border-collapse: collapse; background: var(--bg-card);
              border: 1px solid var(--border); border-radius: var(--radius);
              font-size: .85rem; }
.data-table th { background: var(--bg-hover); padding: .6rem .75rem;
                 text-align: left; font-weight: 600; color: var(--text-muted);
                 border-bottom: 1px solid var(--border); white-space: nowrap; }
.data-table td { padding: .55rem .75rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--bg-hover); }
.error-row td { background: #1a0d0d !important; color: #fca5a5; font-size: .8rem; }
.row-inactive td { opacity: .5; }

/* ── Status classes (applied to <tr> or <td>) ────────────────────────────── */
.status-ok      { color: var(--ok) !important; }
.status-failed  { color: var(--fail) !important; }
.status-partial, .status-warning { color: var(--warn) !important; }
.status-pending, .status-unknown { color: var(--pending); }
.status-running { color: var(--accent-h); }

/* ── Badges ──────────────────────────────────────────────────────────────── */
.badge { background: var(--bg-hover); border: 1px solid var(--border);
         border-radius: 100px; padding: 1px 8px; font-size: .7rem;
         color: var(--text-muted); margin-left: .4rem; }
.source-badge { background: rgba(99,102,241,.15); border: 1px solid rgba(99,102,241,.3);
                border-radius: 100px; padding: 1px 8px; font-size: .75rem;
                color: var(--accent-h); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: .3rem;
       padding: .45rem .9rem; border-radius: 6px; font-size: .85rem;
       font-weight: 500; cursor: pointer; border: 1px solid transparent;
       background: var(--accent); color: #fff; transition: background .15s; }
.btn:hover { background: var(--accent-h); text-decoration: none; color: #fff; }
.btn-secondary { background: var(--bg-hover); color: var(--text);
                 border-color: var(--border); }
.btn-secondary:hover { background: var(--border); color: var(--text); }
.btn-sm { padding: .3rem .6rem; font-size: .78rem; }
.btn-active { background: var(--accent-h); }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: .85rem; }
.form-group label { display: block; font-size: .8rem; color: var(--text-muted);
                    margin-bottom: .25rem; font-weight: 500; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

input[type=text], input[type=email], input[type=password], input[type=url],
input[type=number], input[type=datetime-local], select, textarea {
  width: 100%; padding: .45rem .7rem; background: var(--bg);
  border: 1px solid var(--border); border-radius: 6px; color: var(--text);
  font-size: .875rem; font-family: inherit; transition: border-color .15s; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); }
textarea { resize: vertical; }

/* ── Filters ─────────────────────────────────────────────────────────────── */
.filters { margin-bottom: 1rem; }
.filter-form { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.filter-form select { width: auto; min-width: 140px; }
.filter-count { color: var(--text-muted); font-size: .85rem; }

/* ── Detail layout (two-column) ──────────────────────────────────────────── */
.detail-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
                 align-items: start; }
.detail-left, .detail-right { display: flex; flex-direction: column; gap: 1.5rem; }

/* ── Info list ───────────────────────────────────────────────────────────── */
.info-list { display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem;
             font-size: .875rem; }
.info-list dt { color: var(--text-muted); font-weight: 500; white-space: nowrap; }
.info-list dd { word-break: break-word; }

/* ── Pagination ──────────────────────────────────────────────────────────── */
.pagination { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: 1rem; }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.empty { color: var(--text-muted); padding: 1.5rem; text-align: center; font-size: .875rem; }

/* ── Login page ──────────────────────────────────────────────────────────── */
.login-page { display: flex; align-items: center; justify-content: center;
              min-height: 100vh; background: var(--bg); }
.login-card { background: var(--bg-card); border: 1px solid var(--border);
              border-radius: var(--radius); padding: 2rem; width: 320px;
              box-shadow: var(--shadow); text-align: center; }
.login-logo { font-size: 2.5rem; margin-bottom: .5rem; }
.login-card h1 { font-size: 1.2rem; margin-bottom: 1.5rem; }
.login-card input { margin-bottom: .75rem; }
.login-card button { width: 100%; padding: .6rem; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .detail-layout { grid-template-columns: 1fr; }
  .form-row      { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .sidebar { width: 50px; }
  .logo-text, .nav-links li a span:not(.nav-icon),
  .sidebar-footer { display: none; }
  .main-content { padding: 1rem; }
}