/* ==========================================================================
   WIDGETS — dashboard + profile building blocks (rendered by <x-rz.*>)
   ========================================================================== */

/* ---------- Page header ---------- */
.rz-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.rz-page-head__crumbs { font-size: 0.78125rem; font-weight: 500; color: var(--rz-text-tertiary); margin-bottom: 0.25rem; }
.rz-page-head__crumbs a { color: var(--rz-text-tertiary); }
.rz-page-head__crumbs b { color: var(--rz-text-secondary); font-weight: 600; }
.rz-page-head__title { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--rz-text-primary); letter-spacing: -0.01em; }
.rz-page-head__sub { margin: 0.125rem 0 0; font-size: 0.8125rem; color: var(--rz-text-tertiary); }
.rz-page-head__sub .rz-live:first-child { margin-inline-start: 0; }
.rz-page-head { align-items: center; }
.rz-page-head__actions { margin-inline-start: auto; }
.rz-page-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.rz-live {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--rz-text-tertiary);
  margin-inline-start: 0.625rem;
  vertical-align: middle;
}
.rz-live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rz-success-600);
  box-shadow: 0 0 0 3px var(--rz-success-50);
}

/* Legacy page titles (<h4 class="mb-3"> as the first element on ~70 list/form pages)
   get the same rhythm as .rz-page-head without touching their markup. */
.content-wrapper > .container-p-y > h4:first-child,
.content-wrapper > .container-p-y > .rz-legacy-title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--rz-text-primary);
  margin-bottom: 1.25rem !important;
  padding-top: 0 !important;
}
.content-wrapper > .container-p-y > h4:first-child .text-muted { font-weight: 500; }

/* ---------- KPI tile ---------- */
.rz-kpi { padding: 1rem; height: 100%; }
.rz-kpi__top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 36px; }
.rz-kpi__icon {
  width: 32px;
  height: 32px;
  border-radius: var(--rz-radius);
  display: grid;
  place-items: center;
  font-size: 1.0625rem;
  flex: none;
}
.rz-kpi__spark { width: 90px; min-height: 36px; }
.rz-kpi__label { margin-top: 0.75rem; font-size: 0.75rem; font-weight: 500; color: var(--rz-text-secondary); }
.rz-kpi__value {
  margin-top: 0.125rem;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--rz-text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}
.rz-kpi__value small { font-size: 0.8125rem; font-weight: 600; color: var(--rz-text-tertiary); }
.rz-kpi__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.375rem; font-size: 0.71875rem; color: var(--rz-text-tertiary); }

.rz-delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0 0.375rem;
  border-radius: var(--rz-radius-pill);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.6;
}
.rz-delta--up { background: var(--rz-success-50); color: var(--rz-success-700); }
.rz-delta--down { background: var(--rz-danger-50); color: var(--rz-danger-700); }
.rz-delta--flat { background: var(--rz-surface-sunken); color: var(--rz-text-secondary); }

/* Tone helpers for icon squares / list icons */
.rz-t-primary { background: var(--rz-primary-50); color: var(--rz-primary-700); }
.rz-t-success { background: var(--rz-success-50); color: var(--rz-success-700); }
.rz-t-warning { background: var(--rz-warning-50); color: var(--rz-warning-700); }
.rz-t-danger { background: var(--rz-danger-50); color: var(--rz-danger-700); }
.rz-t-info { background: var(--rz-info-50); color: var(--rz-info-700); }
.rz-t-accent { background: var(--rz-accent-50); color: var(--rz-accent-700); }
.rz-t-neutral { background: var(--rz-surface-sunken); color: var(--rz-text-secondary); }

/* ---------- Hero (health) ---------- */
.rz-hero-ring { display: flex; align-items: center; gap: 0.5rem; }
.rz-hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; margin-top: 0.375rem; }
.rz-hero-stat { padding: 0.5rem 0.625rem; }
.rz-hero-stat b { display: block; font-size: 0.9375rem; color: #fff; font-variant-numeric: tabular-nums; }
.rz-hero-stat span { font-size: 0.6875rem; color: rgba(255, 255, 255, 0.7); }
.rz-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--rz-radius-pill);
  font-size: 0.6875rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.12);
  color: var(--rz-primary-200);
}
.rz-hero-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- Legend tiles ---------- */
.rz-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; }
.rz-legend__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--rz-border-subtle);
  border-radius: var(--rz-radius);
  min-width: 0;
}
.rz-legend__swatch { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.rz-legend__label { font-size: 0.75rem; color: var(--rz-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rz-legend__value { margin-inline-start: auto; font-size: 0.8125rem; font-weight: 700; color: var(--rz-text-primary); font-variant-numeric: tabular-nums; }

/* ---------- Progress bar (inline) ---------- */
.rz-bar { height: 6px; border-radius: var(--rz-radius-pill); background: var(--rz-surface-sunken); overflow: hidden; min-width: 60px; flex: 1; }
.rz-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--rz-primary); }
.rz-prog { display: flex; align-items: center; gap: 0.5rem; }
.rz-prog em { font-style: normal; font-size: 0.71875rem; color: var(--rz-text-tertiary); min-width: 42px; font-variant-numeric: tabular-nums; }

.rz-flow { display: flex; flex-direction: column; gap: 0.875rem; }
.rz-flow__row { display: grid; grid-template-columns: 110px 1fr 96px; align-items: center; gap: 0.625rem; font-size: 0.8125rem; }
.rz-flow__row .rz-bar { height: 10px; }
.rz-flow__row b { text-align: end; color: var(--rz-text-primary); font-variant-numeric: tabular-nums; }

/* ---------- List rows (alerts, documents, sessions) ---------- */
.rz-list { display: flex; flex-direction: column; }
.rz-list__item { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.6875rem 1.25rem; border-top: 1px solid var(--rz-border-subtle); }
.rz-list__item:first-child { border-top: 0; }
.rz-list__icon { width: 30px; height: 30px; border-radius: var(--rz-radius); display: grid; place-items: center; font-size: 1rem; flex: none; }
.rz-list__body { flex: 1; min-width: 0; }
.rz-list__title { font-weight: 600; font-size: 0.8125rem; color: var(--rz-text-primary); }
.rz-list__meta { font-size: 0.71875rem; color: var(--rz-text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rz-list__end { font-size: 0.6875rem; color: var(--rz-text-tertiary); white-space: nowrap; }

/* ---------- Activity feed ---------- */
.rz-feed { position: relative; padding: 0.25rem 1.25rem 1rem; }
.rz-feed::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(1.25rem + 6px);
  top: 0.75rem;
  bottom: 1.25rem;
  width: 1px;
  background: var(--rz-border-subtle);
}
.rz-feed__item { position: relative; display: flex; gap: 0.75rem; padding: 0.5rem 0; }
.rz-feed__dot { width: 13px; height: 13px; border-radius: 50%; border: 3px solid var(--rz-surface-raised); flex: none; margin-top: 3px; z-index: 1; background: var(--rz-primary); }
.rz-feed__text { margin: 0; font-size: 0.78125rem; color: var(--rz-text-secondary); }
.rz-feed__text b { color: var(--rz-text-primary); font-weight: 600; }
.rz-feed__time { font-size: 0.6875rem; color: var(--rz-text-tertiary); }

/* ---------- Heatmap ---------- */
.rz-heat { display: grid; gap: 4px; font-size: 0.65625rem; }
.rz-heat__label { color: var(--rz-text-tertiary); display: flex; align-items: center; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rz-heat__head { color: var(--rz-text-tertiary); text-align: center; font-weight: 500; white-space: nowrap; overflow: hidden; font-size: 0.625rem; }
.rz-heat__cell { height: 26px; border-radius: 3px; background: var(--rz-primary); }
.rz-heat__scale { display: flex; align-items: center; gap: 0.375rem; margin-top: 0.75rem; font-size: 0.6875rem; color: var(--rz-text-tertiary); }
.rz-heat__scale span { width: 18px; height: 8px; border-radius: 2px; background: var(--rz-primary); }

/* ---------- Network map (Leaflet) ---------- */
.rz-map { height: 340px; border-top: 1px solid var(--rz-border-subtle); z-index: 0; }
.rz-map .leaflet-control-attribution { font-size: 10px; }
.rz-map__legend { display: flex; flex-wrap: wrap; gap: 1rem; padding: 0.625rem 1.25rem; border-top: 1px solid var(--rz-border-subtle); font-size: 0.71875rem; color: var(--rz-text-tertiary); }
.rz-map__legend span { display: inline-flex; align-items: center; gap: 0.375rem; }
.rz-map__dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(30, 33, 31, 0.2); }
.rz-map__dot--dc { background: var(--rz-primary); border-radius: 3px; }
.rz-map__dot--live { background: var(--rz-accent-500); }
.rz-map__dot--stale { background: var(--rz-neutral-400); }
.rz-map-pin { display: block; width: 14px; height: 14px; border-radius: 3px; background: var(--rz-primary); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); }
.rz-map-pin--live { border-radius: 50%; background: var(--rz-accent-500); box-shadow: 0 0 0 4px rgba(232, 131, 15, 0.25); }
.rz-map-pin--stale { border-radius: 50%; background: var(--rz-neutral-400); }
.leaflet-popup-content { font-family: var(--rz-font-sans); font-size: 0.78125rem; margin: 0.625rem 0.75rem; }
.leaflet-popup-content-wrapper { border-radius: var(--rz-radius); box-shadow: var(--rz-shadow-lg); }

/* ---------- Avatar stack ---------- */
.rz-stack { display: flex; }
.rz-stack > * { margin-inline-start: -8px; border: 2px solid var(--rz-surface-raised); }
.rz-stack > *:first-child { margin-inline-start: 0; }
.rz-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #fff;
  background: var(--rz-primary);
  flex: none;
  object-fit: cover;
}
.rz-avatar--0 { background: var(--rz-avatar-0); }
.rz-avatar--1 { background: var(--rz-avatar-1); }
.rz-avatar--2 { background: var(--rz-avatar-2); }
.rz-avatar--3 { background: var(--rz-avatar-3); }
.rz-avatar--4 { background: var(--rz-avatar-4); }
.rz-avatar--5 { background: var(--rz-avatar-5); }
.rz-avatar--6 { background: var(--rz-avatar-6); }
.rz-avatar--7 { background: var(--rz-avatar-7); }

/* ---------- Table cells ---------- */
.rz-who { display: flex; align-items: center; gap: 0.625rem; min-width: 0; }
.rz-who b { display: block; font-weight: 600; color: var(--rz-text-primary); }
.rz-who small { display: block; color: var(--rz-text-tertiary); font-size: 0.71875rem; }
.rz-mono { font-family: var(--rz-font-mono); font-size: 0.75rem; font-weight: 600; }

/* ---------- Empty state ---------- */
.rz-empty { text-align: center; padding: 2rem 1rem; color: var(--rz-text-tertiary); }
.rz-empty__icon { width: 44px; height: 44px; margin: 0 auto 0.75rem; border-radius: var(--rz-radius); display: grid; place-items: center; font-size: 1.375rem; background: var(--rz-surface-sunken); color: var(--rz-text-tertiary); }
.rz-empty__title { font-weight: 600; color: var(--rz-text-primary); font-size: 0.875rem; }
.rz-empty__text { font-size: 0.78125rem; margin-top: 0.25rem; }

/* ---------- 7.5 Profile ---------- */
.rz-profile-hero__main { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1.25rem; }
.rz-profile-hero__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 3px var(--rz-surface-raised), 0 0 0 4px var(--rz-border-subtle);
  flex: none;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
}
.rz-profile-hero__name { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--rz-text-primary); display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.rz-profile-hero__role { font-size: 0.8125rem; color: var(--rz-text-secondary); margin-top: 0.125rem; }
.rz-profile-hero__meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0.875rem; margin-top: 0.375rem; font-size: 0.78125rem; color: var(--rz-text-tertiary); }
.rz-profile-hero__meta i { font-size: 0.875rem; margin-inline-end: 0.25rem; }
.rz-profile-hero__actions { margin-inline-start: auto; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.rz-profile-hero__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); border-top: 1px solid var(--rz-border-subtle); }
.rz-profile-hero__stat { padding: 0.875rem 1.25rem; border-inline-start: 1px solid var(--rz-border-subtle); }
.rz-profile-hero__stat:first-child { border-inline-start: 0; }
.rz-profile-hero__stat b { display: block; font-size: 1.125rem; font-weight: 700; color: var(--rz-text-primary); font-variant-numeric: tabular-nums; }
.rz-profile-hero__stat span { font-size: 0.71875rem; color: var(--rz-text-tertiary); }

.rz-kv { display: grid; grid-template-columns: repeat(var(--rz-kv-cols, 2), minmax(0, 1fr)); gap: 1rem 1.25rem; }
.rz-kv__label { font-size: 0.75rem; color: var(--rz-text-tertiary); }
.rz-kv__value { font-size: 0.84375rem; font-weight: 500; color: var(--rz-text-primary); word-break: break-word; }

.rz-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; }

.rz-setting-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.25rem; border-top: 1px solid var(--rz-border-subtle); }
.rz-setting-row:first-child { border-top: 0; }
.rz-setting-row__label { flex: 1; min-width: 0; font-size: 0.8125rem; font-weight: 600; color: var(--rz-text-primary); }
.rz-setting-row__label small { display: block; font-weight: 400; font-size: 0.71875rem; color: var(--rz-text-tertiary); }

@media (max-width: 767.98px) {
  .rz-kv { grid-template-columns: 1fr; }
  .rz-flow__row { grid-template-columns: 90px 1fr 80px; }
  .rz-kpi__value { font-size: 1.3125rem; }
  .rz-profile-hero__actions { margin-inline-start: 0; width: 100%; }
  .rz-profile-hero__stat { border-inline-start: 0; border-top: 1px solid var(--rz-border-subtle); }
}