/* ==========================================================================
   Boomi Insights — Data Display Components
   Page header · Section · KPI cards · Tables · Pagination
   ========================================================================== */

/* ---------- Page header -------------------------------------------------- */
.page-head {
  display: flex;
  align-items: flex-start;
  gap: var(--s-7);
  flex-wrap: wrap;
  margin-bottom: var(--s-7);
}
.page-head__main { min-width: 0; flex: 1 1 auto; }
.page-head__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--brand-600);
  margin-bottom: var(--s-3);
}
.page-head__title { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; }
.page-head__desc {
  font-size: var(--fs-md);
  color: var(--fg-muted);
  margin-top: var(--s-3);
  max-width: 92ch;
  line-height: var(--lh-normal);
}
.page-head__actions { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; flex: 0 0 auto; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-muted);
  margin-bottom: var(--s-5);
  padding: 3px 7px 3px 4px;
  border-radius: var(--r-md);
}
.back-link:hover { color: var(--brand-700); background: var(--brand-50); }
.back-link svg { width: 14px; height: 14px; }

/* ---------- Section heading --------------------------------------------- */
.section-head {
  display: flex;
  align-items: flex-end;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin-bottom: var(--s-5);
}
.section-head__main { min-width: 0; }
.section-head__title { display: flex; align-items: center; gap: var(--s-4); }
.section-head__desc { font-size: var(--fs-sm); color: var(--fg-muted); margin-top: 2px; }
.section-head__actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }

.section-divider {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  margin: var(--s-9) 0 var(--s-6);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--fg-faint);
}
.section-divider::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--bd); }

/* ---------- KPI cards ---------------------------------------------------- */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: var(--s-5);
  margin-bottom: var(--s-7);
}
.kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: 14px 15px 13px;
  background: var(--bg-surface);
  border: 1px solid var(--bd);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.kpi:hover { border-color: var(--bd-strong); box-shadow: var(--sh-md); }
.kpi--link { cursor: pointer; }
.kpi--link:hover { border-color: var(--brand-300); }
.kpi::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--brand-400);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
}
.kpi--link:hover::before { opacity: 1; }

.kpi__top { display: flex; align-items: center; gap: var(--s-4); }
.kpi__icon {
  flex: 0 0 30px;
  width: 30px; height: 30px;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--brand-50);
  color: var(--brand-600);
}
.kpi__icon svg { width: 16px; height: 16px; }
.kpi__icon--ok { background: var(--ok-bg); color: var(--ok); }
.kpi__icon--warn { background: var(--warn-bg); color: var(--warn); }
.kpi__icon--crit { background: var(--crit-bg); color: var(--crit); }
.kpi__icon--info { background: var(--info-bg); color: var(--info); }
.kpi__icon--violet { background: var(--violet-bg); color: var(--violet); }

.kpi__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
  min-width: 0;
}
.kpi__value {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--fg-strong);
}
.kpi__value small { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--fg-muted); margin-left: 3px; }
.kpi__foot { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--fg-muted); }
.kpi__delta { display: inline-flex; align-items: center; gap: 3px; font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.kpi__delta svg { width: 13px; height: 13px; }
.kpi__delta--up { color: var(--ok); }
.kpi__delta--down { color: var(--crit); }
.kpi__delta--flat { color: var(--fg-muted); }
.kpi__spark { height: 30px; margin-top: -2px; }
.kpi--compact .kpi__value { font-size: var(--fs-2xl); }

/* Mini stat (used inside panels) */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s-5); }
.stat {
  padding: 10px 12px;
  border: 1px solid var(--bd-soft);
  border-radius: var(--r-lg);
  background: var(--bg-inset);
}
.stat__label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.stat__value { font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: -0.01em; margin-top: 3px; font-variant-numeric: tabular-nums; }
.stat__meta { font-size: var(--fs-xs); color: var(--fg-faint); margin-top: 2px; }


/* ==========================================================================
   Data tables
   ========================================================================== */

.table-wrap { position: relative; width: 100%; overflow-x: auto; border-radius: inherit; }
.table-wrap--scroll { max-height: 640px; overflow-y: auto; }

.table { width: 100%; min-width: 720px; font-size: var(--fs-base); }
.table--fixed { table-layout: fixed; min-width: 0; }

.table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-subtle);
  padding: 0 14px;
  height: 36px;
  text-align: left;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
  border-bottom: 1px solid var(--bd);
  white-space: nowrap;
  vertical-align: middle;
}
.table thead th:first-child { padding-left: 16px; }
.table thead th:last-child { padding-right: 16px; }

.table tbody td {
  padding: 0 14px;
  height: var(--row-h);
  border-bottom: 1px solid var(--bd-soft);
  vertical-align: middle;
  color: var(--fg);
  min-width: 0;
}
.table tbody td:first-child { padding-left: 16px; }
.table tbody td:last-child { padding-right: 16px; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background var(--dur-1) var(--ease); }
.table tbody tr:hover { background: var(--bg-hover); }
.table tbody tr.is-selected { background: var(--brand-50); box-shadow: inset 3px 0 0 var(--brand-500); }
.table tbody tr.is-clickable { cursor: pointer; }
.table tbody tr.is-clickable:focus-visible { outline: 2px solid var(--brand-500); outline-offset: -2px; }
.table tbody tr.is-new { animation: row-flash 1.4s var(--ease); }
@keyframes row-flash { from { background: var(--brand-100); } to { background: transparent; } }

.table--zebra tbody tr:nth-child(even) { background: var(--table-zebra); }
.table--zebra tbody tr:hover { background: var(--bg-hover); }
.table--dense tbody td { height: 34px; }
.table--rows td { height: auto; padding-top: 7px; padding-bottom: 7px; }

.table th.is-sortable { cursor: pointer; user-select: none; }
.table th.is-sortable:hover { color: var(--fg); background: var(--bg-muted); }
.th-sort { display: inline-flex; align-items: center; gap: 4px; }
.th-sort__icons { display: inline-flex; flex-direction: column; }
.th-sort svg { width: 11px; height: 11px; opacity: 0.3; }
.th-sort svg.is-on { opacity: 1; color: var(--brand-600); }

.cell-stack { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cell-stack__main { font-weight: var(--fw-semibold); color: var(--fg); }
.cell-stack__sub { font-size: var(--fs-xs); color: var(--fg-muted); }
.cell-inline { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.cell-actions { display: flex; align-items: center; gap: var(--s-2); justify-content: flex-end; }
.cell-actions .icon-btn { opacity: 0; transition: opacity var(--dur-2) var(--ease); }
tr:hover .cell-actions .icon-btn, tr:focus-within .cell-actions .icon-btn { opacity: 1; }

.link-cell { color: var(--brand-700); font-weight: var(--fw-semibold); }
.link-cell:hover { text-decoration: underline; text-underline-offset: 2px; }
button.link-cell { appearance: none; background: transparent; border: 0; padding: 0; font: inherit; text-align: left; cursor: pointer; }
.link-quiet { color: var(--fg); font-weight: var(--fw-semibold); }
.link-quiet:hover { color: var(--brand-700); text-decoration: underline; text-underline-offset: 2px; }

.mono-cell { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--fg-secondary); }

.dot-indicator { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--n-400); flex: 0 0 auto; }
.dot-indicator--ok { background: var(--ok); }
.dot-indicator--warn { background: var(--warn); }
.dot-indicator--crit { background: var(--crit); }
.dot-indicator--info { background: var(--info); }
.dot-indicator--running { background: var(--info); animation: pulse 1.8s var(--ease) infinite; }
.dot-indicator--idle { background: var(--n-400); }

.table-foot {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: 9px 16px;
  border-top: 1px solid var(--bd);
  background: var(--bg-subtle);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  flex-wrap: wrap;
}
.table-foot:last-child { border-radius: 0 0 var(--r-xl) var(--r-xl); }
.table-foot__count { font-variant-numeric: tabular-nums; }
.table-foot__count strong { color: var(--fg); font-weight: var(--fw-semibold); }

/* ---------- Pagination --------------------------------------------------- */
.pagination { display: flex; align-items: center; gap: var(--s-3); margin-left: auto; flex-wrap: wrap; }
.pagination__size { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-sm); }
.pagination__size .select { height: 28px; width: auto; padding-right: 26px; background-size: 12px; font-size: var(--fs-sm); }
.pagination__pages { display: flex; align-items: center; gap: 2px; }
.page-btn {
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--bd);
  border-radius: var(--r-md);
  background: var(--bg-surface);
  color: var(--fg-secondary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  display: inline-grid;
  place-items: center;
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.page-btn:hover:not([disabled]) { background: var(--bg-hover); border-color: var(--bd-strong); color: var(--fg); }
.page-btn.is-active { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.page-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.page-btn svg { width: 14px; height: 14px; }
.page-btn--dots { border-color: transparent; background: transparent; cursor: default; }
.pagination__label { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: var(--fs-sm); }
.pagination__label strong { color: var(--fg); }