/* ============================================================
   Reusable components: cards, tables, buttons, badges, forms, modals
   ============================================================ */

/* ===== Cards ===== */
.card-x {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card-x-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--c-border);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.card-x-header h3 { margin: 0; font-size: 14px; font-weight: 600; }
.card-x-header .card-x-sub { font-size: 12px; color: var(--c-text-muted); margin-top: 2px; }
.card-x-body { padding: 20px; }
.card-x-body.compact { padding: 14px 18px; }

/* ===== KPI tiles ===== */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}
.kpi {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.kpi-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--c-text-muted); font-weight: 600;
}
.kpi-value {
  font-size: 28px; font-weight: 600; margin-top: 6px;
  letter-spacing: -0.01em; color: var(--c-text);
}
.kpi-sub { font-size: 12px; color: var(--c-text-muted); margin-top: 4px; }
.kpi-icon {
  position: absolute; right: 16px; top: 16px;
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  font-size: 15px;
}
.kpi-icon.blue   { background: var(--c-primary-50); color: var(--c-primary); }
.kpi-icon.green  { background: var(--c-success-50); color: var(--c-success); }
.kpi-icon.amber  { background: var(--c-warn-50);    color: var(--c-warn); }
.kpi-icon.red    { background: var(--c-danger-50);  color: var(--c-danger); }
.kpi-icon.teal   { background: var(--c-accent-50);  color: var(--c-accent); }

/* ===== Tables ===== */
.tbl-wrap {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  box-shadow: var(--shadow-sm);
}
.tbl {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
  min-width: 640px;
}
.tbl th {
  text-align: left;
  background: var(--c-surface-2);
  color: var(--c-text-muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 11px 16px;
  border-bottom: 1px solid var(--c-border);
  white-space: nowrap;
}
.tbl td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--c-border);
  vertical-align: middle;
}
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: var(--c-surface-2); }
.tbl .td-actions { text-align: right; white-space: nowrap; width: 1%; }
.tbl .td-strong  { font-weight: 600; color: var(--c-text); }
.tbl .td-muted   { color: var(--c-text-muted); }

/* ===== Badges ===== */
.bdg {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.6;
}
.bdg-gray   { background: #eef2f7; color: #475569; }
.bdg-blue   { background: var(--c-primary-50); color: var(--c-primary-700); }
.bdg-green  { background: var(--c-success-50); color: #166534; }
.bdg-amber  { background: var(--c-warn-50);    color: #92400e; }
.bdg-red    { background: var(--c-danger-50);  color: #991b1b; }
.bdg-teal   { background: var(--c-accent-50);  color: #0a8978; }
.bdg-purple { background: #f3e8ff; color: #6b21a8; }

.bdg-sev-low      { background: #f1f5f9; color: #475569; }
.bdg-sev-medium   { background: var(--c-warn-50);    color: #92400e; }
.bdg-sev-high     { background: var(--c-danger-50);  color: #991b1b; }
.bdg-sev-critical { background: #f3e8ff; color: #6b21a8; }

.bdg-st-active    { background: var(--c-success-50); color: #166534; }
.bdg-st-degraded  { background: var(--c-warn-50);    color: #92400e; }
.bdg-st-planned   { background: var(--c-info-50);    color: #075985; }
.bdg-st-retired   { background: #eef2f7;             color: #475569; }
.bdg-st-draft     { background: #eef2f7;             color: #475569; }
.bdg-st-disabled  { background: var(--c-danger-50);  color: #991b1b; }

/* ===== Buttons ===== */
.btn {
  font-weight: 500; font-size: 13px;
  border-radius: 8px;
  padding: 7px 14px;
  border: 1px solid transparent;
  display: inline-flex; align-items: center; gap: 7px;
  transition: background .12s, border .12s, color .12s, box-shadow .12s;
}
.btn:focus { box-shadow: 0 0 0 3px var(--c-primary-50); outline: none; }
.btn-primary {
  background: var(--c-primary); border-color: var(--c-primary); color: white;
}
.btn-primary:hover { background: var(--c-primary-700); border-color: var(--c-primary-700); color: white; }
.btn-secondary {
  background: var(--c-surface); border-color: var(--c-border-strong); color: var(--c-text);
}
.btn-secondary:hover { background: var(--c-surface-2); color: var(--c-text); }
.btn-danger { background: var(--c-danger); border-color: var(--c-danger); color: white; }
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; color: white; }
.btn-ghost { background: transparent; color: var(--c-text-muted); border-color: transparent; }
.btn-ghost:hover { background: var(--c-surface-2); color: var(--c-text); }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-icon {
  padding: 6px; width: 32px; height: 32px; justify-content: center;
  border-radius: 6px;
}

/* ===== Forms ===== */
.form-label { font-weight: 500; font-size: 12px; color: var(--c-text); margin-bottom: 5px; }
.form-control, .form-select {
  font-size: 13px;
  border-color: var(--c-border-strong);
  border-radius: 7px;
  padding: 7px 11px;
  background-color: var(--c-surface);
}
.form-control:focus, .form-select:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-50);
}
.form-text-small { font-size: 11px; color: var(--c-text-muted); margin-top: 4px; }

/* ===== Toasts ===== */
.toast-host {
  position: fixed; top: 20px; right: 20px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 10000; pointer-events: none;
}
.toast-x {
  background: white;
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-primary);
  border-radius: 8px;
  padding: 12px 16px 12px 14px;
  font-size: 13px;
  box-shadow: var(--shadow-lg);
  min-width: 260px; max-width: 380px;
  display: flex; gap: 10px; align-items: flex-start;
  pointer-events: auto;
  animation: toast-in .25s ease-out;
}
.toast-x.toast-success { border-left-color: var(--c-success); }
.toast-x.toast-error   { border-left-color: var(--c-danger); }
.toast-x.toast-warn    { border-left-color: var(--c-warn); }
.toast-x.toast-info    { border-left-color: var(--c-info); }
.toast-x i.toast-icon { font-size: 16px; margin-top: 1px; }
.toast-x.toast-success i.toast-icon { color: var(--c-success); }
.toast-x.toast-error   i.toast-icon { color: var(--c-danger); }
.toast-x.toast-warn    i.toast-icon { color: var(--c-warn); }
.toast-x.toast-info    i.toast-icon { color: var(--c-info); }
.toast-x-body { flex: 1; color: var(--c-text); line-height: 1.4; }
.toast-x-title { font-weight: 600; margin-bottom: 2px; }
@keyframes toast-in {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* ===== Modals ===== */
.modal-backdrop-x {
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.5);
  z-index: 5000;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 80px 20px 20px;
  animation: fade-in .15s ease-out;
}
.modal-x {
  background: white;
  border-radius: 12px;
  width: 100%; max-width: 540px;
  box-shadow: var(--shadow-lg);
  animation: modal-in .2s ease-out;
  max-height: calc(100vh - 100px);
  display: flex; flex-direction: column;
}
.modal-x.wide { max-width: 720px; }
.modal-x-header {
  padding: 18px 22px;
  border-bottom: 1px solid var(--c-border);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.modal-x-header h3 { margin: 0; font-size: 16px; font-weight: 600; }
.modal-x-close {
  border: 0; background: transparent;
  color: var(--c-text-muted);
  width: 30px; height: 30px; border-radius: 6px;
  display: grid; place-items: center;
  cursor: pointer;
}
.modal-x-close:hover { background: var(--c-surface-2); color: var(--c-text); }
.modal-x-body { padding: 22px; overflow-y: auto; flex: 1; }
.modal-x-footer {
  padding: 14px 22px;
  border-top: 1px solid var(--c-border);
  display: flex; justify-content: flex-end; gap: 8px;
  flex-shrink: 0;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== Coverage heatmap ===== */
.heatmap {
  display: grid;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.hm-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 8px;
  align-items: center;
}
.hm-label {
  font-size: 12px; font-weight: 500; color: var(--c-text);
  padding: 6px 10px;
  background: var(--c-surface-2);
  border-radius: 6px;
  border: 1px solid var(--c-border);
}
.hm-cells {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 3px;
}
.hm-cell {
  height: 36px;
  border-radius: 4px;
  background: #eef2f7;
  display: grid; place-items: center;
  font-size: 9px;
  color: var(--c-text-dim);
  cursor: pointer;
  transition: transform .1s;
  border: 1px solid transparent;
  text-align: center;
  padding: 2px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hm-cell:hover { transform: scale(1.06); border-color: var(--c-primary); }
.hm-cell.cov-0 { background: #f1f5f9; color: #94a3b8; }
.hm-cell.cov-1 { background: #fef3c7; color: #92400e; }
.hm-cell.cov-2 { background: #d1f5db; color: #166534; }
.hm-cell.cov-3 { background: #2f5bea; color: white; font-weight: 600; }

.hm-legend {
  display: flex; gap: 14px; align-items: center; margin-top: 12px; font-size: 11px; color: var(--c-text-muted); flex-wrap: wrap;
}
.hm-legend span { display: inline-flex; align-items: center; }
.hm-legend-sq {
  width: 14px; height: 14px; border-radius: 3px; display: inline-block; margin-right: 4px; vertical-align: middle;
}

/* ===== Coverage heatmap — tile grid ===== */
.hm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.hm-tile {
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 14px 14px 12px;
  background: var(--c-surface);
  position: relative;
  transition: transform .1s, box-shadow .12s;
  border-left-width: 4px;
}
.hm-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.hm-tile-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 6px;
}
.hm-tile-id {
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--c-text-muted); text-transform: uppercase;
}
.hm-tile-count {
  font-size: 13px; font-weight: 700;
  min-width: 24px; height: 24px; border-radius: 999px;
  display: grid; place-items: center; padding: 0 7px;
}
.hm-tile-name { font-size: 13.5px; font-weight: 600; color: var(--c-text); margin-bottom: 8px; line-height: 1.3; }
.hm-tile-src { display: flex; flex-wrap: wrap; gap: 4px; }
.hm-tile-chip {
  font-size: 10px; font-weight: 500;
  padding: 2px 7px; border-radius: 999px;
  background: var(--c-surface-2); color: var(--c-text-muted);
  border: 1px solid var(--c-border);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hm-tile-more { font-size: 10px; font-weight: 600; color: var(--c-text-muted); align-self: center; }
.hm-tile-empty { font-size: 11px; color: var(--c-text-muted); font-style: italic; }

/* strength colors */
.hm-tile.hm-none   { border-left-color: #cbd5e1; }
.hm-tile.hm-none   .hm-tile-count { background: #f1f5f9; color: #94a3b8; }
.hm-tile.hm-weak   { border-left-color: var(--c-warn); background: linear-gradient(0deg, var(--c-warn-50), var(--c-surface) 60%); }
.hm-tile.hm-weak   .hm-tile-count { background: var(--c-warn-50); color: #92400e; }
.hm-tile.hm-ok     { border-left-color: var(--c-success); background: linear-gradient(0deg, var(--c-success-50), var(--c-surface) 60%); }
.hm-tile.hm-ok     .hm-tile-count { background: var(--c-success-50); color: #166534; }
.hm-tile.hm-strong { border-left-color: var(--c-primary); background: linear-gradient(0deg, var(--c-primary-50), var(--c-surface) 55%); }
.hm-tile.hm-strong .hm-tile-count { background: var(--c-primary); color: white; }

/* legend swatches (tile variant) */
.hm-swatch {
  width: 14px; height: 14px; border-radius: 3px; display: inline-block; margin-right: 6px; vertical-align: middle;
  border: 1px solid var(--c-border);
}
.hm-swatch.hm-none   { background: #f1f5f9; }
.hm-swatch.hm-weak   { background: var(--c-warn-50); border-color: var(--c-warn); }
.hm-swatch.hm-ok     { background: var(--c-success-50); border-color: var(--c-success); }
.hm-swatch.hm-strong { background: var(--c-primary); border-color: var(--c-primary); }

/* ===== Bench bars ===== */
.bench-row {
  display: grid;
  grid-template-columns: 220px 1fr 80px;
  gap: 14px; align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--c-border);
  min-width: 560px;
}
.bench-row:last-child { border-bottom: 0; }
.bench-label { font-size: 13px; font-weight: 500; }
.bench-label small { display: block; color: var(--c-text-muted); font-weight: normal; font-size: 11px; margin-top: 2px; }
.bench-bar {
  position: relative; height: 22px;
  background: var(--c-surface-2);
  border-radius: 4px;
  overflow: visible;
}
.bench-fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  background: linear-gradient(90deg, var(--c-primary), #6b8aff);
  border-radius: 4px;
  transition: width .4s;
}
.bench-marker {
  position: absolute; top: -3px; bottom: -3px;
  width: 2px;
  background: var(--c-text);
}
.bench-marker.p50 { background: #64748b; }
.bench-marker.p90 { background: var(--c-danger); }
.bench-marker::after {
  content: attr(data-label);
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  font-size: 9px; color: var(--c-text-muted); font-weight: 600;
  white-space: nowrap;
}
.bench-value { text-align: right; font-weight: 600; font-size: 13px; }

/* ===== Recommendations list ===== */
.rec-item {
  padding: 14px 18px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  margin-bottom: 10px;
  background: var(--c-surface);
  display: flex; align-items: flex-start; gap: 12px;
}
.rec-icon {
  width: 36px; height: 36px; border-radius: 8px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.rec-icon.warn { background: var(--c-warn-50); color: var(--c-warn); }
.rec-icon.crit { background: var(--c-danger-50); color: var(--c-danger); }
.rec-icon.info { background: var(--c-info-50); color: var(--c-info); }
.rec-icon.ok   { background: var(--c-success-50); color: var(--c-success); }
.rec-body { flex: 1; }
.rec-title { font-weight: 600; font-size: 14px; margin-bottom: 3px; }
.rec-desc  { color: var(--c-text-muted); font-size: 13px; line-height: 1.5; }
.rec-meta  { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }

/* ===== Chip selector ===== */
.chip-pick {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px; border: 1px solid var(--c-border-strong); border-radius: 7px;
  background: var(--c-surface); min-height: 42px;
}
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--c-primary-50); color: var(--c-primary-700);
  font-size: 12px; font-weight: 500;
}
.chip .chip-x {
  cursor: pointer; opacity: 0.7;
}
.chip .chip-x:hover { opacity: 1; }
.chip-add-list {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.chip-opt {
  padding: 4px 10px; border-radius: 999px;
  background: var(--c-surface-2); color: var(--c-text-muted);
  font-size: 12px; cursor: pointer; border: 1px solid var(--c-border);
}
.chip-opt:hover { background: var(--c-primary-50); color: var(--c-primary-700); border-color: var(--c-primary); }
.chip-opt.picked { background: var(--c-primary); color: white; border-color: var(--c-primary); }

/* ===== Tabs (catalog page) ===== */
.cat-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--c-border);
  margin-top: 4px;
}
.cat-tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 10px 16px;
  margin-bottom: -1px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 6px 6px 0 0;
  transition: color .12s, background .12s, border-color .12s;
}
.cat-tab i { font-size: 13px; }
.cat-tab:hover { color: var(--c-text); background: var(--c-surface-2); }
.cat-tab.active {
  color: var(--c-primary);
  border-bottom-color: var(--c-primary);
  background: transparent;
}
.cat-tab.active i { color: var(--c-primary); }

/* ===== Shell Access (server command runner) ===== */
.shell-warning {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--c-danger-50);
  border: 1px solid var(--c-danger);
  color: #991b1b;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 16px;
}
.shell-warning i { font-size: 16px; margin-top: 1px; color: var(--c-danger); }

.shell-console {
  background: #0b1120;
  border: 1px solid #1e293b;
  border-radius: 10px 10px 0 0;
  padding: 14px 16px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.55;
  color: #e2e8f0;
  height: 460px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.shell-line { margin: 0; }
.shell-cmd { color: #93c5fd; font-weight: 600; margin-top: 8px; }
.shell-muted { color: #64748b; }
.shell-ok { color: #4ade80; }
.shell-fail { color: #f87171; }
.shell-blocked { color: #fca5a5; font-weight: 600; }
.shell-output {
  margin: 2px 0 4px;
  font-family: inherit;
  font-size: inherit;
  white-space: pre-wrap;
  word-break: break-word;
  color: #cbd5e1;
  background: transparent;
  border: 0;
  padding: 0;
}
.shell-output.shell-stderr { color: #fca5a5; }

.shell-inputbar {
  display: flex; align-items: center; gap: 10px;
  background: #0b1120;
  border: 1px solid #1e293b;
  border-top: 0;
  border-radius: 0 0 10px 10px;
  padding: 10px 14px;
}
.shell-prompt { color: #4ade80; font-family: monospace; font-size: 14px; }
.shell-input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  color: #e2e8f0;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 13px;
}
.shell-input::placeholder { color: #475569; }
.shell-input:disabled { opacity: 0.5; }

/* ===== JSON import modal ===== */
.import-help {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--c-info-50, #e0f2fe);
  border: 1px solid var(--c-info, #0ea5e9);
  color: #075985;
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 12.5px;
  line-height: 1.5;
}
.import-help i { margin-top: 2px; color: var(--c-info, #0ea5e9); }
.import-help code {
  background: rgba(2,132,199,0.12);
  color: #075985;
  padding: 1px 5px; border-radius: 4px;
  font-size: 11.5px;
}
.code-area {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}
.import-summary {
  display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.imp-stat {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 8px;
  font-size: 13px; font-weight: 500;
  border: 1px solid var(--c-border);
}
.imp-stat strong { font-size: 15px; }
.imp-stat.imp-ok   { background: var(--c-success-50); color: #166534; border-color: var(--c-success); }
.imp-stat.imp-skip { background: var(--c-surface-2); color: var(--c-text-muted); }
.import-errors {
  border: 1px solid var(--c-warn, #f59e0b);
  background: var(--c-warn-50, #fef3c7);
  border-radius: 8px;
  padding: 12px 14px;
}
.imp-err-title {
  font-size: 12.5px; font-weight: 600; color: #92400e; margin-bottom: 8px;
  display: flex; align-items: center; gap: 7px;
}
.import-errors ul { margin: 0; padding-left: 20px; }
.import-errors li { font-size: 12px; color: #92400e; line-height: 1.6; }

/* ===== Sortable / filterable table ===== */
.tbl-interactive th.th-sortable {
  cursor: pointer;
  user-select: none;
  transition: color .12s, background .12s;
}
.tbl-interactive th.th-sortable:hover { color: var(--c-text); background: var(--c-border); }
.tbl-interactive th.th-active { color: var(--c-primary); }
.th-sort { font-size: 10px; margin-left: 4px; opacity: 0.4; }
.th-sort-active { opacity: 1; color: var(--c-primary); }

.tbl-filter-row th {
  background: var(--c-surface);
  padding: 8px 12px;
  border-bottom: 1px solid var(--c-border);
}
.tbl-filter {
  width: 100%;
  font-size: 12px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--c-text);
  border: 1px solid var(--c-border-strong);
  border-radius: 6px;
  padding: 5px 9px;
  background: var(--c-surface);
  transition: border .12s, box-shadow .12s;
}
.tbl-filter::placeholder { color: var(--c-text-dim); }
.tbl-filter:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-50);
}
.tbl-filter-select { cursor: pointer; }
.tbl-no-match {
  text-align: center;
  color: var(--c-text-muted);
  padding: 28px 16px !important;
  font-size: 13px;
}
.tbl-no-match i { margin-right: 7px; color: var(--c-text-dim); }

/* ===== Reliability badge ===== */
.rel-badge {
  display: inline-block;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  letter-spacing: 0.02em;
  line-height: 1.6;
  white-space: nowrap;
}
.rel-badge.rel-high         { background: var(--c-success-50); color: #166534; }
.rel-badge.rel-medium       { background: var(--c-warn-50);    color: #92400e; }
.rel-badge.rel-low          { background: var(--c-danger-50);  color: #991b1b; }
.rel-badge.rel-not_measured { background: #eef2f7;             color: #64748b; }

/* ===== Placeholder-style help hint (free-text fields) ===== */
textarea.field-hint.is-hint::placeholder {
  color: var(--c-text-muted);
  font-style: italic;
  opacity: 0.85;
}
textarea.field-hint::placeholder {
  color: var(--c-text-dim);
}
.field-help {
  font-size: 11px;
  color: var(--c-text-muted);
  margin-top: 4px;
}

/* ===== Inline alert (contextual warnings inside forms/modals) ===== */
.alert-inline {
  display: flex; gap: 10px; align-items: flex-start;
  border-radius: 8px;
  padding: 10px 13px;
  font-size: 12.5px;
  line-height: 1.5;
  border: 1px solid var(--c-border);
  background: var(--c-surface-2);
  color: var(--c-text);
}
.alert-inline i { margin-top: 2px; font-size: 14px; }
.alert-inline-warn {
  background: var(--c-warn-50, #fef3c7);
  border-color: var(--c-warn, #f59e0b);
  color: #92400e;
}
.alert-inline-warn i { color: var(--c-warn, #f59e0b); }

/* ===== Inline checkbox (label + checkbox on one line) ===== */
.checkbox-inline {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--c-text); cursor: pointer;
  user-select: none;
}
.checkbox-inline input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--c-primary); cursor: pointer;
}

/* ===== Login org picker (multi-org selection at login) ===== */
.org-pick-list {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 18px;
}
.org-pick-card {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  border: 1px solid var(--c-border-strong);
  border-radius: 10px;
  background: var(--c-surface);
  cursor: pointer;
  transition: border .12s, box-shadow .12s, transform .1s, background .12s;
}
.org-pick-card:hover:not(:disabled) {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-50);
  transform: translateY(-1px);
}
.org-pick-card:disabled { opacity: 0.6; cursor: default; }
.org-pick-card.is-loading { opacity: 0.7; }
.org-pick-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center; flex-shrink: 0;
  background: var(--c-primary-50); color: var(--c-primary);
  font-size: 16px;
}
.org-pick-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.org-pick-name { font-size: 14px; font-weight: 600; color: var(--c-text); }
.org-pick-role {
  font-size: 11px; font-weight: 600; color: var(--c-text-muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.org-pick-arrow { color: var(--c-text-muted); font-size: 14px; }
.org-pick-card:hover:not(:disabled) .org-pick-arrow { color: var(--c-primary); }

/* ===== Sidebar org switcher (switch org without logging out) ===== */
.sb-org { position: relative; }
.sb-org-main { display: flex; align-items: center; gap: 8px; }
.sb-org-text { flex: 1; min-width: 0; }
.sb-org-switch .sb-org-name,
.sb-org-switch .sb-org-label,
.sb-org-switch .sb-org-role { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-org-caret {
  flex-shrink: 0;
  border: 1px solid var(--c-border-strong);
  background: var(--c-surface);
  color: var(--c-text-muted);
  width: 28px; height: 28px; border-radius: 7px;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .12s, color .12s, border .12s, transform .12s;
}
.sb-org-caret:hover { background: var(--c-surface-2); color: var(--c-text); border-color: var(--c-primary); }
.sb-org.is-open .sb-org-caret { transform: rotate(180deg); color: var(--c-primary); border-color: var(--c-primary); }
.sb-org-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0; right: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 4000;
  max-height: 320px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
  animation: modal-in .15s ease-out;
}
.sb-org-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 9px 10px;
  border: 0; border-radius: 7px;
  background: transparent;
  cursor: pointer;
  transition: background .12s;
}
.sb-org-item:hover:not(:disabled) { background: var(--c-surface-2); }
.sb-org-item:disabled { opacity: 0.6; cursor: default; }
.sb-org-item.is-current { background: var(--c-primary-50); }
.sb-org-item.is-loading { opacity: 0.7; }
.sb-org-item-icon {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--c-surface-2); color: var(--c-text-muted);
  font-size: 13px;
}
.sb-org-item.is-current .sb-org-item-icon { background: var(--c-primary-50); color: var(--c-primary); }
.sb-org-item-body { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sb-org-item-name { font-size: 13px; font-weight: 600; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-org-item-role { font-size: 10px; font-weight: 600; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.sb-org-item-check { color: var(--c-primary); font-size: 12px; flex-shrink: 0; }

/* ===== Sidebar user widget (account menu: change password / switch org / sign out) ===== */
.sb-user { position: relative; }
.sb-user-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  transition: background .12s, border .12s;
}
.sb-user-btn:hover { background: var(--c-surface-2); }
.sb-user.is-open .sb-user-btn { background: var(--c-surface-2); border-color: var(--c-border); }
.sb-user-caret {
  flex-shrink: 0;
  color: var(--c-text-muted);
  width: 22px; height: 28px;
  display: grid; place-items: center;
  transition: color .12s;
}
.sb-user-btn:hover .sb-user-caret,
.sb-user.is-open .sb-user-caret { color: var(--c-text); }
.sb-user-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0; right: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 4000;
  display: flex; flex-direction: column; gap: 2px;
  animation: modal-in .15s ease-out;
}
.sb-user-menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 9px 11px;
  border: 0; border-radius: 7px;
  background: transparent;
  color: var(--c-text);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.sb-user-menu-item i { width: 16px; text-align: center; color: var(--c-text-muted); font-size: 13px; }
.sb-user-menu-item:hover { background: var(--c-surface-2); }
.sb-user-menu-item.is-danger { color: var(--c-danger); }
.sb-user-menu-item.is-danger i { color: var(--c-danger); }
.sb-user-menu-item.is-danger:hover { background: var(--c-danger-50); }
.sb-user-menu-sep { height: 1px; background: var(--c-border); margin: 4px 2px; }

/* ===== Switch-organization modal list ===== */
.org-switch-list {
  display: flex; flex-direction: column; gap: 8px;
}
.org-switch-row {
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: left;
  padding: 13px 15px;
  border: 1px solid var(--c-border-strong);
  border-radius: 10px;
  background: var(--c-surface);
  cursor: pointer;
  transition: border .12s, box-shadow .12s, transform .1s, background .12s;
}
.org-switch-row:hover:not(:disabled):not(.is-current) {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-50);
  transform: translateY(-1px);
}
.org-switch-row:disabled { cursor: default; }
.org-switch-row.is-current { background: var(--c-primary-50); border-color: var(--c-primary); }
.org-switch-row.is-loading { opacity: 0.7; }
.org-switch-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center; flex-shrink: 0;
  background: var(--c-surface-2); color: var(--c-text-muted);
  font-size: 16px;
}
.org-switch-row.is-current .org-switch-icon { background: var(--c-primary-50); color: var(--c-primary); }
.org-switch-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.org-switch-name { font-size: 14px; font-weight: 600; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-switch-role {
  font-size: 11px; font-weight: 600; color: var(--c-text-muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.org-switch-arrow { color: var(--c-text-muted); font-size: 14px; flex-shrink: 0; }
.org-switch-row:hover:not(:disabled) .org-switch-arrow { color: var(--c-primary); }
.org-switch-badge {
  font-size: 10px; font-weight: 700; color: var(--c-primary);
  text-transform: uppercase; letter-spacing: 0.05em;
  background: var(--c-surface); border: 1px solid var(--c-primary);
  padding: 2px 8px; border-radius: 999px; flex-shrink: 0;
}

/* ===== Team toolbar (filters) ===== */
.team-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 20px;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface);
}
.team-search {
  position: relative;
  flex: 1 1 260px;
  min-width: 200px;
}
.team-search i {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--c-text-dim); font-size: 12px; pointer-events: none;
}
.team-search-input {
  width: 100%;
  font-size: 13px;
  border: 1px solid var(--c-border-strong);
  border-radius: 7px;
  padding: 7px 11px 7px 32px;
  background: var(--c-surface);
  color: var(--c-text);
  transition: border .12s, box-shadow .12s;
}
.team-search-input::placeholder { color: var(--c-text-dim); }
.team-search-input:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-50);
}
.team-filter-select {
  width: auto; min-width: 130px;
  font-size: 12px; padding: 6px 28px 6px 10px;
  cursor: pointer;
}

/* ===== Disabled-user name treatment (Team) ===== */
.tbl tr.row-disabled { background: repeating-linear-gradient(45deg, transparent, transparent 9px, var(--c-surface-2) 9px, var(--c-surface-2) 10px); }
.td-user-disabled .td-user-name {
  color: var(--c-text-dim);
  text-decoration: line-through;
  text-decoration-color: var(--c-text-dim);
  font-weight: 500;
}
.td-user-lock {
  color: var(--c-danger);
  font-size: 11px;
  margin-right: 6px;
}

/* ===== Benchmarking: percentile markers, scope bar & modals ===== */
.bench-marker.p25 { background: #94a3b8; }
.bench-marker.p75 { background: #f59e0b; }
/* p50 & p90 colours already defined above */

/* percentile labels above bars: nudge alternate markers so they don't overlap */
.bench-marker.p25::after,
.bench-marker.p75::after { top: -30px; }

.bench-value-missing { color: var(--c-text-dim); font-weight: 500; }

/* Category block groups a category line + its product sub-lines */
.bench-catblock {
  padding: 6px 0;
  border-bottom: 1px solid var(--c-border);
}
.bench-catblock:last-child { border-bottom: 0; }
.bench-catblock .bench-row { border-bottom: 0; }

.bench-row-category .bench-label { font-weight: 600; font-size: 13.5px; }
.bench-row-product {
  padding: 7px 0 7px 0;
}
.bench-row-product .bench-label {
  font-weight: 500; font-size: 12.5px; color: var(--c-text-muted);
  padding-left: 18px;
}
.bench-sub-icon { color: var(--c-text-dim); font-size: 10px; margin-right: 4px; }
.bench-row-product .bench-bar { height: 16px; }

/* Missing-capability styling — a category the org has NO sources in */
.bench-catblock.bench-missing {
  background: repeating-linear-gradient(45deg,
    var(--c-danger-50) 0, var(--c-danger-50) 10px,
    rgba(254, 226, 226, 0.4) 10px, rgba(254, 226, 226, 0.4) 20px);
  border: 1px dashed var(--c-danger);
  border-radius: 10px;
  margin: 8px 0;
  padding: 6px 12px;
}
.bench-row-missing .bench-label { color: #991b1b; }
.bench-bar-missing { opacity: 0.55; }
.bench-bar-missing .bench-fill { display: none; }
.bench-gap-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #991b1b; background: var(--c-surface);
  border: 1px solid var(--c-danger);
  padding: 1px 8px; border-radius: 999px;
  margin-left: 8px;
}
.bench-gap-badge i { font-size: 9px; }

.bench-n {
  color: var(--c-primary-700) !important;
  font-weight: 600 !important;
}

/* Scope bar */
.bench-scopebar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.bench-scope-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--c-border-strong);
  border-radius: 999px;
  background: var(--c-surface);
  color: var(--c-text);
  font-size: 13px; cursor: pointer;
  transition: border .12s, box-shadow .12s, background .12s;
}
.bench-scope-chip:hover { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-50); }
.bench-scope-chip > i:first-child { color: var(--c-primary); }
.bench-scope-label { color: var(--c-text-muted); font-weight: 500; }
.bench-scope-val { font-weight: 600; }
.bench-scope-caret { font-size: 10px; color: var(--c-text-muted); margin-left: 2px; }

.bench-legend {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-left: auto;
  font-size: 11px; color: var(--c-text-muted);
}
.bench-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.bench-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.bench-dot-you { background: var(--c-primary); }
.bench-dot-p25 { background: #94a3b8; }
.bench-dot-p50 { background: #64748b; }
.bench-dot-p75 { background: #f59e0b; }
.bench-dot-p90 { background: var(--c-danger); }

/* Scope modal option list */
.bench-scope-list { display: flex; flex-direction: column; gap: 10px; }
.bench-scope-opt {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--c-border-strong);
  border-radius: 10px;
  cursor: pointer;
  transition: border .12s, box-shadow .12s, background .12s;
}
.bench-scope-opt:hover { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-50); }
.bench-scope-opt.active { border-color: var(--c-primary); background: var(--c-primary-50); }
.bench-scope-opt input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.bench-scope-opt-icon {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--c-surface-2); color: var(--c-text-muted); font-size: 16px;
}
.bench-scope-opt.active .bench-scope-opt-icon { background: var(--c-primary-50); color: var(--c-primary); }
.bench-scope-opt-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bench-scope-opt-title { font-size: 14px; font-weight: 600; color: var(--c-text); }
.bench-scope-opt-sub { font-size: 12px; color: var(--c-text-muted); line-height: 1.4; }
.bench-scope-opt-check {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 999px;
  display: grid; place-items: center;
  border: 2px solid var(--c-border-strong);
  color: transparent; font-size: 11px;
  transition: all .12s;
}
.bench-scope-opt.active .bench-scope-opt-check {
  border-color: var(--c-primary); background: var(--c-primary); color: white;
}

/* change-password modal inline error */
.cp-error {
  margin-top: 12px;
  font-size: 12.5px;
  color: #991b1b;
  background: var(--c-danger-50);
  border: 1px solid var(--c-danger);
  border-radius: 8px;
  padding: 9px 12px;
  line-height: 1.4;
}

/* ===== MITRE coverage — per-tile technique metrics ===== */
.hm-tile.hm-clickable { cursor: pointer; }
.hm-tile.hm-clickable:hover { box-shadow: 0 0 0 3px var(--c-primary-50), var(--shadow-sm); }
.hm-tech-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 4px 0 10px;
}
.hm-metric {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: 7px;
  padding: 5px 8px;
}
.hm-metric-val { font-size: 15px; font-weight: 700; color: var(--c-text); line-height: 1.1; }
.hm-metric-val.hm-metric-cov { color: var(--c-primary-700); }
.hm-metric-lbl {
  font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--c-text-muted); white-space: nowrap;
}

/* ===== MITRE coverage — technique drill-down modal ===== */
.tc-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
@media (max-width: 560px) { .tc-summary { grid-template-columns: repeat(2, 1fr); } }
.tc-sum-item {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: 9px;
  padding: 10px 12px;
}
.tc-sum-val { font-size: 22px; font-weight: 700; color: var(--c-text); line-height: 1; }
.tc-sum-val.tc-cov { color: var(--c-primary-700); }
.tc-sum-lbl { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--c-text-muted); line-height: 1.3; }

.tc-list { display: flex; flex-direction: column; gap: 8px; }
.tc-row {
  border: 1px solid var(--c-border);
  border-radius: 9px;
  padding: 11px 13px;
  background: var(--c-surface);
  border-left-width: 4px;
}
.tc-row.tc-row-covered { border-left-color: var(--c-success); }
.tc-row.tc-row-gap { border-left-color: #cbd5e1; }
.tc-row-head {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.tc-tid {
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  background: var(--c-surface-2); color: var(--c-text);
  border: 1px solid var(--c-border);
  padding: 2px 8px; border-radius: 6px;
}
.tc-tid.tc-tid-sub { background: var(--c-primary-50); color: var(--c-primary-700); border-color: var(--c-primary); }
.tc-tname { font-size: 13px; font-weight: 600; color: var(--c-text); flex: 1; min-width: 120px; }
.tc-subtag {
  font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--c-text-muted); background: var(--c-surface-2);
  border: 1px solid var(--c-border); padding: 1px 7px; border-radius: 999px;
}
.tc-cov-dot { font-size: 15px; margin-left: auto; }
.tc-cov-dot.tc-cov-yes { color: var(--c-success); }
.tc-cov-dot.tc-cov-no { color: #cbd5e1; }

.tc-rules { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.tc-rule-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 500;
  padding: 4px 11px; border-radius: 999px;
  background: var(--c-primary-50); color: var(--c-primary-700);
  border: 1px solid transparent; text-decoration: none;
  transition: border .12s, background .12s;
}
.tc-rule-link:hover { border-color: var(--c-primary); background: var(--c-primary-50); color: var(--c-primary-700); }
.tc-rule-link i { font-size: 11px; }
.tc-norule { font-size: 12px; color: var(--c-text-muted); font-style: italic; }

.rule-status {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 1px 6px; border-radius: 999px;
}
.rule-status-ok { background: var(--c-success-50); color: #166534; }
.rule-status-warn { background: var(--c-warn-50); color: #92400e; }
.rule-status-muted { background: #eef2f7; color: #64748b; }

/* ===== Data table (sortable + filterable pages: admin users / orgs / audit) ===== */
.dt-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.dt-filter {
  position: relative;
  flex: 1 1 320px;
  min-width: 220px;
  max-width: 460px;
}
.dt-filter-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--c-text-dim); font-size: 13px; pointer-events: none;
}
.dt-filter-input {
  width: 100%;
  padding-left: 34px;
}
.dt-toolbar-right {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.dt-count {
  font-size: 12px; color: var(--c-text-muted); font-weight: 500;
  white-space: nowrap;
}
.dt-card { overflow: hidden; }
.dt-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

th.th-sort {
  cursor: pointer;
  user-select: none;
  transition: color .12s, background .12s;
}
th.th-sort:hover { color: var(--c-text); background: var(--c-border); }
th.th-sort.is-sorted { color: var(--c-primary); }
.th-sort-inner { display: inline-flex; align-items: center; gap: 6px; }
.th-sort-caret { font-size: 10px; opacity: 0.45; }
th.th-sort.is-sorted .th-sort-caret { opacity: 1; color: var(--c-primary); }

.td-orgnames {
  display: inline-block;
  max-width: 340px;
  vertical-align: bottom;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--c-text-dim);
  font-size: 12px;
  margin-left: 6px;
}

/* ===== Platform toggle group (telemetry sources) ===== */
.plat-toggle-group {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.plat-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--c-border-strong);
  border-radius: 999px;
  background: var(--c-surface);
  color: var(--c-text-muted);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: border .12s, background .12s, color .12s, box-shadow .12s;
}
.plat-toggle i { font-size: 14px; }
.plat-toggle:hover {
  border-color: var(--c-primary);
  color: var(--c-text);
  background: var(--c-surface-2);
}
.plat-toggle.active {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: white;
  box-shadow: 0 0 0 3px var(--c-primary-50);
}
.plat-toggle.active i { color: white; }

/* Platform badges in the sources table */
.plat-badge-wrap {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.plat-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  color: var(--c-text-muted);
  font-size: 11px; font-weight: 600;
  white-space: nowrap;
}
.plat-badge i { font-size: 11px; color: var(--c-text); }

/* ===== Admin overview entry cards ===== */
.admin-entry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 4px;
}
.admin-entry-card {
  display: flex; align-items: center; gap: 16px;
  padding: 20px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: border .12s, box-shadow .12s, transform .1s;
}
.admin-entry-card:hover {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-50);
  transform: translateY(-2px);
  color: inherit;
}
.admin-entry-icon {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 18px;
}
.admin-entry-icon.blue  { background: var(--c-primary-50); color: var(--c-primary); }
.admin-entry-icon.teal  { background: var(--c-accent-50);  color: var(--c-accent); }
.admin-entry-icon.amber { background: var(--c-warn-50);    color: var(--c-warn); }
.admin-entry-body { flex: 1; min-width: 0; }
.admin-entry-title { font-size: 15px; font-weight: 600; color: var(--c-text); }
.admin-entry-sub { font-size: 12.5px; color: var(--c-text-muted); margin-top: 3px; line-height: 1.45; }
.admin-entry-arrow { color: var(--c-text-dim); font-size: 14px; transition: color .12s, transform .12s; }
.admin-entry-card:hover .admin-entry-arrow { color: var(--c-primary); transform: translateX(3px); }