/* ==========================================================================
   PEACE for All — administration console
   Only the few pieces the shared stylesheet (css/styles.css) does not
   already provide. Everything else reuses the existing design system:
   .dash / .dash-side / .dash-nav / .dash-panel / .kpi / .card / .table-wrap
   / .status / .field / .modal / .plain-list / .btn.
   ========================================================================== */

/* ---------- Sidebar counters ---------- */
.dash-nav .nav-count {
  margin-inline-start: auto;
  min-width: 1.5rem;
  padding: .05rem .4rem;
  border-radius: 999px;
  background: var(--sky-100);
  color: var(--sky-700);
  font-size: .72rem;
  font-weight: 800;
  text-align: center;
}

.dash-nav button.is-active .nav-count {
  background: rgba(255, 255, 255, .24);
  color: #fff;
}

.dash-nav .nav-count:empty { display: none; }

/* ---------- KPI accents ---------- */
.kpi--attention { border-top: 3px solid var(--amber); }
.kpi--good { border-top: 3px solid var(--green); }
.kpi--info { border-top: 3px solid var(--sky-500); }

.kpi small {
  display: block;
  margin-top: .35rem;
  font-size: .74rem;
  color: var(--muted);
  font-weight: 650;
}

/* ---------- Tables ---------- */
.table-wrap table { min-width: 720px; }

td .row-actions { justify-content: flex-start; }

.cell-title { font-weight: 750; color: var(--ink); }
.cell-sub { font-size: .8rem; color: var(--muted); }
.cell-clip { max-width: 320px; }

/* Filter rows inside a card sit on the tinted background so they read as
   controls rather than content. */
.card > .grid > .field label { font-size: .8rem; }

/* ---------- Editor modal ---------- */
.modal-card--form { max-width: 640px; }
.modal-card--form .form-grid { gap: .85rem; }
.modal-card--form .form-note { margin-bottom: 1rem; }

/* ---------- Overview attention list ---------- */
.plain-list .attention {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.plain-list .attention .attention-text { display: flex; gap: .6rem; align-items: flex-start; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .dash-nav .nav-count { margin-inline-start: .35rem; }
}

@media (max-width: 560px) {
  .cell-clip { max-width: 180px; }
  .modal-card--form { padding: 1.1rem; }
}