/* ── Palette ──────────────────────────────────────────────── */
:root {
  --bg:          #0d1117;
  --surface:     #161b27;
  --surface-2:   #1c2235;
  --border:      #2a3050;
  --border-soft: #222840;
  --text:        #e2e8f0;
  --text-muted:  #7d8fad;
  --accent:      #6366f1;
  --accent-dim:  rgba(99,102,241,.15);
  --success:     #22c55e;
  --danger:      #ef4444;
  --warning:     #f59e0b;
}

/* ── Base ─────────────────────────────────────────────────── */
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: .9375rem;
  min-height: 100vh;
}

/* ── Navbar ───────────────────────────────────────────────── */
.navbar {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: .75rem 1.5rem;
}
.navbar-brand {
  color: var(--text) !important;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -.01em;
}
.navbar-brand .bi { color: var(--accent); }
.nav-link {
  color: var(--text-muted) !important;
  font-size: .875rem;
  padding: .35rem .6rem !important;
  border-radius: .375rem;
  transition: color .15s, background .15s;
}
.nav-link:hover { color: var(--text) !important; background: var(--surface-2); }
.nav-link.active, .nav-link.fw-semibold { color: var(--text) !important; font-weight: 600 !important; }
.nav-link.text-danger { color: #f87171 !important; }
.nav-link.text-danger:hover { color: var(--danger) !important; background: rgba(239,68,68,.1); }

/* ── Cards ────────────────────────────────────────────────── */
.card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: .75rem !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
  transition: border-color .2s, box-shadow .2s;
}
.card:hover {
  border-color: #3d4a72 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
}
.card-body { padding: 1.5rem; }
.card-title {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 1rem;
}

/* ── Typography ───────────────────────────────────────────── */
h2.fw-bold { font-size: 1.375rem; color: var(--text); letter-spacing: -.02em; }
h5.fw-bold { font-size: 1rem; }
.text-muted, .text-secondary { color: var(--text-muted) !important; }
.small { font-size: .8125rem !important; }

/* ── Form controls ────────────────────────────────────────── */
.form-label {
  font-size: .8rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: .35rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.form-control,
.form-select {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: .5rem !important;
  font-size: .875rem;
  padding: .5rem .75rem;
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-dim) !important;
  outline: none;
  background: var(--surface-2) !important;
  color: var(--text) !important;
}
.form-control::placeholder { color: #4a566e; }
.form-select option { background: var(--surface-2); color: var(--text); }
.form-text { color: var(--text-muted) !important; font-size: .775rem; }

/* Form check (checkbox) */
.form-check-input {
  background-color: var(--surface-2);
  border-color: var(--border);
  width: 1rem;
  height: 1rem;
}
.form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}
.form-check-input:focus { box-shadow: 0 0 0 3px var(--accent-dim); }
.form-check-label { color: var(--text); font-size: .875rem; cursor: pointer; }

/* Toggle switch */
.form-switch .form-check-input { width: 2rem; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  border-radius: .5rem;
  font-size: .84rem;
  font-weight: 500;
  padding: .4rem .9rem;
  transition: filter .15s, box-shadow .15s;
}
.btn:hover { filter: brightness(1.1); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: #5153d9; border-color: #5153d9; }
.btn-success { background: #16a34a; border-color: #16a34a; }
.btn-danger  { background: #dc2626; border-color: #dc2626; }
.btn-warning { background: var(--warning); border-color: var(--warning); color: #111; }
.btn-outline-secondary {
  border-color: var(--border);
  color: var(--text-muted);
}
.btn-outline-secondary:hover { background: var(--surface-2); color: var(--text); border-color: #3d4a72; }
.btn-outline-light { border-color: var(--border); color: var(--text-muted); }
.btn-outline-light:hover { background: var(--surface-2); color: var(--text); }
.btn-outline-danger { border-color: rgba(239,68,68,.4); color: #f87171; }
.btn-outline-danger:hover { background: rgba(239,68,68,.1); color: var(--danger); border-color: var(--danger); }

/* ── Badges ───────────────────────────────────────────────── */
.badge {
  font-weight: 500;
  letter-spacing: .02em;
  border-radius: .4rem;
  padding: .35em .65em;
}
.bg-success { background: rgba(34,197,94,.18) !important; color: #4ade80 !important; border: 1px solid rgba(34,197,94,.3); }
.bg-danger  { background: rgba(239,68,68,.18) !important; color: #f87171 !important; border: 1px solid rgba(239,68,68,.3); }
.bg-secondary { background: var(--surface-2) !important; color: var(--text-muted) !important; border: 1px solid var(--border); }

/* ── Tabs ─────────────────────────────────────────────────── */
.nav-tabs {
  border-bottom: 1px solid var(--border) !important;
  gap: .25rem;
}
.nav-tabs .nav-link {
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  color: var(--text-muted) !important;
  font-size: .875rem;
  padding: .6rem 1rem !important;
  background: transparent !important;
}
.nav-tabs .nav-link:hover { color: var(--text) !important; background: transparent !important; }
.nav-tabs .nav-link.active {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
  background: transparent !important;
  font-weight: 600 !important;
}

/* ── Tables ───────────────────────────────────────────────── */
.table {
  color: var(--text);
  border-color: var(--border-soft);
  font-size: .875rem;
  margin-bottom: 0;
}
.table > :not(caption) > * > * { background: transparent; border-color: var(--border-soft); padding: .6rem .75rem; }
.table thead th { color: var(--text-muted); font-size: .775rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.table-dark, .table-dark > :not(caption) > * > * { background: transparent !important; }

/* ── Alert ────────────────────────────────────────────────── */
.alert-warning { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.3); color: #fcd34d; }

/* ── Log box ──────────────────────────────────────────────── */
.log-box {
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  font-size: .775rem;
  line-height: 1.55;
  background: #090d14 !important;
  color: #7dd3a8 !important;
  border: 1px solid var(--border) !important;
  border-radius: .5rem;
  padding: 1rem !important;
  height: 420px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ── Day picker (toggle buttons) ─────────────────────────── */
.btn-check + .btn-outline-secondary {
  border-color: var(--border);
  color: var(--text-muted);
  font-size: .8rem;
  padding: .3rem .65rem;
}
.btn-check:checked + .btn-outline-secondary {
  background: var(--accent-dim) !important;
  border-color: var(--accent) !important;
  color: #a5b4fc !important;
}

/* ── Page header ──────────────────────────────────────────── */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-soft);
}
.page-header h2 { margin-bottom: 0; }

/* ── Status indicator ─────────────────────────────────────── */
.status-dot {
  display: inline-block;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  margin-right: .4rem;
}
.status-dot.active  { background: var(--success); box-shadow: 0 0 6px var(--success); }
.status-dot.inactive { background: var(--danger); }

/* ── Info row (port/detail chips) ────────────────────────── */
.info-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .775rem;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 99px;
  padding: .2rem .65rem;
}

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #3d4a72; }