/* nmon2 UI — light theme, AdminLTE-ish. Dark sidebar + green top bar + white
 * content area. Hand-maintained (no build step). */

*,*::before,*::after { box-sizing: border-box; }
html,body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, system-ui, sans-serif;
  background: #f4f6f9;
  color: #1f2937;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
input, button, select, textarea { font: inherit; }
button { cursor: pointer; border: 0; }

/* ============ Shell layout ============ */
.app { display: flex; min-height: 100vh; }
.app-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.content { flex: 1; padding: 1.5rem 1.75rem; max-width: 100%; }
.footer { padding: .75rem 1.75rem; font-size: .75rem; color: #6b7280; border-top: 1px solid #e5e7eb; background: #fff; }

/* ============ Sidebar ============ */
.sidebar {
  width: 240px; min-height: 100vh;
  background: #222d32; color: #b8c7ce;
  display: flex; flex-direction: column;
  flex-shrink: 0;
}
.side-user {
  display: flex; align-items: center; gap: .75rem;
  padding: 1rem; border-bottom: 1px solid #1a2226;
}
.side-user .avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: #27ae60; color: #fff; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  text-transform: uppercase;
}
.side-user .side-name { color: #fff; font-size: .875rem; overflow: hidden; text-overflow: ellipsis; max-width: 150px; white-space: nowrap; }
.side-user .side-online { font-size: .72rem; color: #8aa4b1; display: flex; align-items: center; gap: .3rem; }
.side-user .side-online .dot-ok { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: #27ae60; }

.side-search { padding: .75rem 1rem; }
.side-search input {
  width: 100%; padding: .5rem .65rem;
  background: #374850; border: 1px solid #1a2226; border-radius: 4px;
  color: #cdd8dd; font-size: .825rem;
}
.side-search input::placeholder { color: #8aa4b1; }
.side-search input:disabled { opacity: .5; cursor: not-allowed; }

.side-section {
  padding: .5rem 1rem .25rem; margin-top: .5rem;
  font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  color: #4b646f;
}
.side-nav { display: flex; flex-direction: column; }
.side-nav a {
  display: flex; align-items: center; gap: .65rem;
  padding: .7rem 1rem;
  color: #b8c7ce; font-size: .9rem;
  border-left: 3px solid transparent;
  transition: background .15s;
}
.side-nav a:hover { background: #1a2226; color: #fff; }
.side-nav a.active { background: #1a2226; color: #fff; border-left-color: #27ae60; }
.side-nav a.disabled { opacity: .45; cursor: not-allowed; }
.side-nav a.disabled:hover { background: transparent; color: #b8c7ce; }
.side-nav .nav-ico { display: inline-block; width: 1rem; text-align: center; opacity: .75; font-size: .9rem; }

/* ============ Top bar ============ */
.topbar { background: #27ae60; color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.5rem; height: 50px;
}
.brand { display: flex; align-items: center; gap: .5rem; color: #fff; font-weight: 600; font-size: 1.1rem; }
.brand-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 4px; background: rgba(0,0,0,.2); font-weight: 700; font-size: .85rem;
}
.topbar-user { display: flex; align-items: center; gap: .875rem; font-size: .875rem; }
.topbar-user .email { color: rgba(255,255,255,.9); }
.btn-signout {
  background: rgba(0,0,0,.2); color: #fff;
  padding: .4rem .85rem; border-radius: 4px; font-weight: 500; font-size: .825rem;
}
.btn-signout:hover { background: rgba(0,0,0,.35); }

/* ============ Page header + actions ============ */
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.page-title { margin: 0; font-size: 1.5rem; font-weight: 600; color: #111827; }
.page-sub { color: #6b7280; font-size: .85rem; margin-top: .15rem; }
.btn-add {
  background: #3498db; color: #fff;
  padding: .55rem 1.1rem; border-radius: 4px; font-weight: 600; font-size: .85rem;
  display: inline-block;
}
.btn-add:hover { background: #2a7cb8; }

/* ============ Stat boxes ============ */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.25rem; }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .stats { grid-template-columns: 1fr; } }
.stat { padding: 1rem 1.25rem; border-radius: 4px; color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.stat h3 { margin: 0 0 .1rem; font-size: 1.9rem; font-weight: 600; line-height: 1; }
.stat p { margin: 0; font-size: .9rem; opacity: .92; }
.stat-green  { background: #27ae60; }
.stat-blue   { background: #3498db; }
.stat-amber  { background: #f39c12; }
.stat-red    { background: #e74c3c; }

/* ============ Panel / card ============ */
.panel { background: #fff; border: 1px solid #e5e7eb; border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.04); margin-bottom: 1.25rem; }
.table-wrap { padding: 0; overflow-x: auto; }

/* ============ Server table ============ */
.server-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.server-table thead th {
  text-align: left;
  padding: .7rem .75rem;
  font-size: .72rem; letter-spacing: .03em; text-transform: uppercase;
  color: #6b7280; font-weight: 600;
  border-bottom: 2px solid #e5e7eb; background: #f9fafb;
}
.server-table tbody td {
  padding: .7rem .75rem; vertical-align: middle;
  border-bottom: 1px solid #f1f5f9; color: #1f2937;
}
.server-table tbody tr:hover { background: #fafbfc; }
.server-table th.c, .server-table td.c { text-align: center; }
.server-table .row-link { color: #2176bd; font-weight: 500; }
.server-table .row-link:hover { text-decoration: underline; }
.server-table .row-sub { font-size: .72rem; color: #6b7280; margin-top: .15rem; }

/* status dot */
.status-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid transparent; }
.dot-ok      { background: #27ae60; }
.dot-warn    { background: #f39c12; }
.dot-crit    { background: #e74c3c; }
.dot-nodata  { background: #cbd5e1; }

/* OS icon */
.os-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  color: #fff; font-size: .72rem; font-weight: 700;
  background: #64748b;
}
.os-cloudlinux { background: #e67e22; }
.os-ubuntu     { background: #e95420; }
.os-debian     { background: #a81d33; }
.os-centos     { background: #932279; }
.os-rhel       { background: #ee0000; }
.os-rocky      { background: #10b981; }
.os-almalinux  { background: #0e7a0d; }
.os-alpine     { background: #0d597f; }
.os-fedora     { background: #51a2da; }
.os-opensuse   { background: #73ba25; }
.os-arch       { background: #1793d1; }
.os-unknown    { background: #94a3b8; }

/* Donut chart (inline SVG) */
.donut { display: inline-block; vertical-align: middle; }
.donut text { font-family: -apple-system, system-ui, sans-serif; }

/* Net column */
.server-table td.net { line-height: 1.3; }
.net-rx, .net-tx { display: block; font-size: .78rem; }
.net-rx { color: #3498db; }
.net-tx { color: #27ae60; }

/* Actions column */
.actions { white-space: nowrap; text-align: right; }
.btn-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 4px;
  background: #3498db; color: #fff; margin-left: .25rem; font-size: .9rem;
}
.btn-ico.view { background: #3498db; }
.btn-ico:hover { opacity: .85; }

/* ============ Status pill (for detail page) ============ */
.pill { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 600; letter-spacing: .03em; color: #fff; }
.pill .dot { width: .4rem; height: .4rem; border-radius: 999px; background: rgba(255,255,255,.85); }
.pill-ok { background: #27ae60; }
.pill-warn { background: #f39c12; }
.pill-crit { background: #e74c3c; }
.pill-nodata { background: #94a3b8; }

/* ============ Empty state ============ */
.empty {
  background: #fff; border: 1px dashed #cbd5e1; border-radius: 6px;
  padding: 2.5rem; text-align: center;
}
.empty h3 { margin: 0 0 .5rem; font-size: 1.15rem; color: #111827; }
.empty p  { margin: 0 0 1.25rem; color: #4b5563; }

/* ============ Login page ============ */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; background: linear-gradient(180deg,#eef2f7,#e2e8f0); }
.login-card { width: 100%; max-width: 380px; background: #fff; border-radius: 6px; padding: 2rem; box-shadow: 0 10px 25px rgba(15,23,42,.08); }
.login-card h1 { margin: 0 0 1.25rem; font-size: 1.25rem; display: flex; align-items: center; gap: .625rem; }
.login-card h1 .logo { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 4px; background: #27ae60; color: #fff; font-weight: 700; }
.field { margin-bottom: 1rem; }
.field label { display: block; margin-bottom: .3rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; font-weight: 600; }
.field input {
  width: 100%; padding: .625rem .75rem; border: 1px solid #cbd5e1; border-radius: 4px;
  font-size: .95rem; background: #f8fafc; color: #111827;
}
.field input:focus { outline: none; border-color: #27ae60; background: #fff; box-shadow: 0 0 0 3px rgba(39,174,96,.12); }
.btn-primary {
  width: 100%; padding: .7rem; border-radius: 4px; font-weight: 600; font-size: .95rem;
  background: #27ae60; color: #fff;
}
.btn-primary:hover { background: #229c54; }
.alert-err {
  background: #fdecea; border: 1px solid #f5c2c0; color: #a93226;
  padding: .625rem .875rem; border-radius: 4px; font-size: .85rem; margin-bottom: 1rem;
}

/* ============ Add-server form ============ */
.form-card { max-width: 640px; padding: 1.5rem; }
.field-help { margin-top: .3rem; font-size: .78rem; color: #6b7280; }
.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; margin-top: 1.5rem; }
.btn-cancel { padding: .6rem 1.1rem; border-radius: 4px; font-weight: 500; font-size: .9rem; background: #e5e7eb; color: #374151; }
.btn-cancel:hover { background: #d1d5db; }

/* ============ Setup panel (detail page) ============ */
.setup-panel { border-left: 4px solid #f39c12; padding: 1.25rem 1.5rem; }
.setup-panel h3 { color: #d97706; }
.setup-panel .setup-step { margin: 1.25rem 0 .4rem; font-size: .85rem; font-weight: 600; color: #111827; text-transform: none; letter-spacing: 0; }
.setup-panel pre { background: #0f172a; color: #e2e8f0; padding: .9rem 1.1rem; border-radius: 4px; font-size: .82rem; line-height: 1.55; overflow-x: auto; margin: 0 0 .25rem; }
.setup-panel .setup-note { margin: 1.1rem 0 0; padding: .65rem .9rem; font-size: .8rem; color: #6b7280; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 4px; }
.kv { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 4px; padding: .5rem 1rem; margin: .75rem 0 1.25rem; }
.kv-row { display: flex; align-items: baseline; padding: .4rem 0; border-bottom: 1px solid #f1f5f9; }
.kv-row:last-child { border-bottom: 0; }
.kv-key { width: 110px; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; }
.kv-val { flex: 1; font-size: .88rem; color: #111827; word-break: break-all; }

/* ============ Dashboard page ============ */
.stats-big .stat { position: relative; padding: 1.25rem 1.5rem; min-height: 100px; }
.stats-big .stat h3 { font-size: 2.6rem; font-weight: 600; margin: 0; line-height: 1; }
.stats-big .stat p  { font-size: 1.05rem; margin: .25rem 0 0; opacity: .95; }
.stats-big .stat .stat-foot {
  display: block; margin-top: .9rem; font-size: .78rem; letter-spacing: .02em;
  padding-top: .6rem; border-top: 1px solid rgba(255,255,255,.2); opacity: .95;
}
.stats-big a.stat { cursor: pointer; transition: filter .15s; }
.stats-big a.stat:hover { filter: brightness(1.05); }
.stat-teal { background: #16a2b8; }

.dash-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 1100px) { .dash-grid { grid-template-columns: 1fr; } }
.dash-right { display: flex; flex-direction: column; gap: 1rem; }

.panel-head { padding: .75rem 1rem; border-bottom: 1px solid #e5e7eb; background: #fafbfc; }
.panel-head h3 { margin: 0; font-size: .85rem; letter-spacing: .03em; text-transform: uppercase; color: #2176bd; font-weight: 600; }
.panel > :not(.panel-head) { padding: 1rem; }
.panel table, .panel .healthy, .panel .map-wrap { padding: 0; }

.map-wrap { position: relative; }
.world-map { display: block; width: 100%; height: auto; background: #eef3f6; }
.map-marker { fill: currentColor; stroke: #fff; stroke-width: 1; }
.map-marker-ring { fill: currentColor; stroke: none; }
.map-marker.dot-ok,       .map-marker-ring.dot-ok      { color: #27ae60; }
.map-marker.dot-warn,     .map-marker-ring.dot-warn    { color: #f39c12; }
.map-marker.dot-crit,     .map-marker-ring.dot-crit    { color: #e74c3c; }
.map-marker.dot-nodata,   .map-marker-ring.dot-nodata  { color: #94a3b8; }
.map-note { padding: .5rem 1rem; font-size: .8rem; color: #6b7280; background: #fafbfc; border-top: 1px solid #e5e7eb; }

.overview-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.overview-table thead th { text-align: left; padding: .55rem .75rem; font-size: .7rem; letter-spacing: .03em; text-transform: uppercase; color: #6b7280; font-weight: 600; border-bottom: 1px solid #e5e7eb; }
.overview-table tbody td { padding: .6rem .75rem; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.overview-table tbody tr:last-child td { border-bottom: 0; }

.healthy {
  margin: .75rem; padding: .7rem .9rem; color: #1b7a3f;
  background: #e9f7ef; border: 1px solid #b8e0c4; border-radius: 4px; font-size: .9rem;
}

/* ============ Server detail — two-column layout ============ */
.detail-grid { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 1rem; align-items: start; }
@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } }
.detail-side { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.detail-main { min-width: 0; }

/* breadcrumbs */
.crumbs { font-size: .85rem; color: #6b7280; margin: 0 0 .75rem; }
.crumbs a { color: #3498db; }
.crumbs a:hover { text-decoration: underline; }
.crumbs .sep { margin: 0 .35rem; color: #cbd5e1; }
.crumbs .here { color: #374151; }

/* tabs */
.tabs {
  display: flex; gap: .25rem; margin: 0 0 1rem;
  border-bottom: 1px solid #e5e7eb;
  overflow-x: auto;
}
.tabs .tab {
  padding: .6rem 1rem; font-size: .9rem; color: #6b7280;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  white-space: nowrap;
}
.tabs .tab:hover { color: #374151; }
.tabs .tab.active { color: #2176bd; border-bottom-color: #2176bd; font-weight: 600; }

.kv-table { width: 100%; border-collapse: collapse; font-size: .825rem; }
.kv-table th {
  text-align: left; font-weight: 600; color: #374151;
  padding: .45rem .75rem; vertical-align: top; width: 42%;
  border-bottom: 1px solid #f1f5f9; background: #fafbfc;
  font-size: .78rem;
}
.kv-table td { padding: .45rem .75rem; vertical-align: top; color: #1f2937; border-bottom: 1px solid #f1f5f9; word-break: break-word; }
.kv-table tr:last-child th, .kv-table tr:last-child td { border-bottom: 0; }
.kv-table thead th, .kv-table thead td { background: #f9fafb; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: #6b7280; }
.muted { color: #6b7280; }
.sm { font-size: .72rem; }

/* ============ Misc ============ */
.back-link { font-size: .85rem; color: #3498db; }
.back-link:hover { text-decoration: underline; }
.table-scroll { overflow-x: auto; }