/* Monitor admin — pages layer: navigation, tables, flash boxes, small
   buttons. Continues the design language defined in app.css (same tokens);
   layout.html loads both. */

/* ---------- top bar navigation ---------- */

.topbar-left { display: flex; align-items: center; gap: 24px; }

.nav { display: flex; align-items: center; gap: 2px; }

.nav-link {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 6px;
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-link:hover { color: var(--ink-strong); background: rgba(17, 17, 17, 0.03); }
.nav-link-active { color: var(--ink-strong); font-weight: 600; }

.inline-link { color: var(--ink-strong); text-decoration: underline; text-decoration-color: var(--border-strong); }
.inline-link:hover { text-decoration-color: var(--ink-strong); }

/* ---------- page helpers ---------- */

.page.narrow { max-width: 660px; }
.page.wide { max-width: 1180px; }

.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.row-between .section-title { margin-bottom: 0; }

/* ---------- tables ---------- */

.table-card { padding: 6px 0 14px; overflow-x: auto; }

.table { width: 100%; border-collapse: collapse; font-size: 14px; }

.table th {
  padding: 12px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--ink);
}

.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: rgba(17, 17, 17, 0.012); }

.col-actions { text-align: right; white-space: nowrap; }
.col-actions form { display: inline-block; margin-left: 6px; }

.cell-strong { color: var(--ink-strong); font-weight: 600; }
.cell-sub { color: var(--muted); font-size: 11.5px; }

.table-note { padding: 10px 14px 0; }

.badge + .badge { margin-left: 6px; }

/* ---------- buttons (small variants) ---------- */

.btn-xs { padding: 5px 11px; font-size: 13px; }

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink);
  padding-left: 8px;
  padding-right: 8px;
}

.btn-ghost:hover { background: rgba(17, 17, 17, 0.03); border-color: transparent; }

.btn-danger { color: var(--danger-ink); border-color: var(--border-strong); }
.btn-danger:hover { background: var(--danger-bg); border-color: var(--danger-ink); }

.btn-ghost.btn-danger { color: var(--danger-ink); border-color: transparent; }
.btn-ghost.btn-danger:hover { background: var(--danger-bg); border-color: transparent; }

/* ---------- flash (one-time secrets) ---------- */

.flash { padding: 24px 28px; margin-bottom: 20px; }

.flash-label {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--warn-ink);
}

.flash-value {
  display: block;
  padding: 12px 14px;
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--ink-strong);
  word-break: break-all;
}

/* ---------- empty state ---------- */

.empty { padding: 40px 36px; }
.empty-title { margin: 0 0 6px; font-size: 17px; font-weight: 650; color: var(--ink-strong); }
.empty .btn { margin-top: 14px; }

/* ---------- simple lists (dashboard) ---------- */

.list { list-style: none; margin: 0; padding: 0; }

.list-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}

.list-row:last-child { border-bottom: none; }
.list-row .badge { margin-left: auto; }

/* ---------- miscellaneous ---------- */

.section .row-between { margin-bottom: 14px; }
.section .row-between .section-title { margin-bottom: 0; }

.form-foot { margin-top: 22px; }

/* ---------- targets: checks, probe picker, form actions ---------- */

.field-row { display: flex; gap: 16px; flex-wrap: wrap; }
.field-row .field { flex: 1 1 140px; margin-bottom: 0; }
.form-section .field-row { margin-top: 18px; }

.check-inline { display: flex; gap: 24px; align-items: center; }
.check-inline label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-strong); }

.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 14px; }

.check-grid label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
}

.check-grid label:hover { border-color: var(--border-strong); }
.check-grid .badge { margin-left: auto; }

input[type="checkbox"] { accent-color: var(--ink-strong); width: 15px; height: 15px; margin: 0; }

.form-actions { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.form-actions .btn { width: auto; padding-left: 22px; padding-right: 22px; }

/* ---------- target detail (judgement, per-probe results) ---------- */

.row { display: flex; align-items: center; gap: 10px; }

.probe-block { padding: 14px 0 6px; border-top: 1px solid var(--border); }
.probe-block:first-of-type { border-top: none; padding-top: 2px; }
.probe-block .table { margin-top: 10px; }
.probe-block .table th { padding-top: 0; }
.probe-block .cell-sub { font-family: var(--mono); }

/* ---------- alerts filters & pagination (phase 10) ---------- */

.filters {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.filters .field { margin-bottom: 0; min-width: 180px; }
.filters select.input { width: 100%; }
.filters .btn { width: auto; padding-left: 22px; padding-right: 22px; }

.pager {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 14px;
}

.pager .btn { width: auto; padding-left: 20px; padding-right: 20px; }

select.input {
  appearance: none;
  background-image: none;
  cursor: pointer;
}

@media (max-width: 720px) {
  .table th, .table td { padding: 11px 12px; }
  .topbar-left { gap: 12px; flex-wrap: wrap; }
  .filters { flex-direction: column; align-items: stretch; }
}