/* =========================================================================
   RotFront - Component primitives
   Buttons, tags, badges, fields, tables, cards, meters
   Requires colors_and_type.css to be loaded first.
   ========================================================================= */

/* --- Card / Panel ------------------------------------------------------- */
.rf-panel {
  background: var(--rf-bg-1);
  border: 1px solid var(--rf-line-2);
  border-radius: var(--rf-r-3);
  box-shadow: var(--rf-shadow-2);
}
.rf-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rf-sp-3);
  padding: var(--rf-sp-3) var(--rf-sp-4);
  border-bottom: 1px solid var(--rf-line-1);
}
.rf-panel-title {
  font-family: var(--rf-font-sans);
  font-size: var(--rf-fs-md);
  font-weight: var(--rf-fw-semi);
  color: var(--rf-fg-0);
  letter-spacing: var(--rf-ls-tight);
}
.rf-panel-body { padding: var(--rf-sp-4); }

/* --- Buttons ------------------------------------------------------------ */
.rf-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--rf-sp-2);
  height: 28px;
  padding: 0 var(--rf-sp-3);
  border-radius: var(--rf-r-2);
  font-family: var(--rf-font-sans);
  font-size: var(--rf-fs-base);
  font-weight: var(--rf-fw-med);
  letter-spacing: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--rf-fg-1);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
  user-select: none;
  white-space: nowrap;
}
.rf-btn--lg { height: 34px; padding: 0 var(--rf-sp-4); font-size: var(--rf-fs-md); }
.rf-btn--sm { height: 22px; padding: 0 var(--rf-sp-2); font-size: var(--rf-fs-sm); }

.rf-btn--primary {
  background: var(--rf-crimson);
  color: #fff;
  border-color: var(--rf-crimson);
  box-shadow: var(--rf-inset);
}
.rf-btn--primary:hover  { background: var(--rf-crimson-hi); border-color: var(--rf-crimson-hi); }
.rf-btn--primary:active { background: var(--rf-crimson-lo); border-color: var(--rf-crimson-lo); }

.rf-btn--secondary {
  background: var(--rf-bg-2);
  color: var(--rf-fg-0);
  border-color: var(--rf-line-2);
}
.rf-btn--secondary:hover  { background: var(--rf-bg-3); border-color: var(--rf-line-3); }
.rf-btn--secondary:active { background: var(--rf-bg-4); }

.rf-btn--ghost { color: var(--rf-fg-2); }
.rf-btn--ghost:hover  { background: var(--rf-bg-2); color: var(--rf-fg-0); }
.rf-btn--ghost:active { background: var(--rf-bg-3); }

.rf-btn--danger {
  background: transparent;
  color: var(--rf-danger);
  border-color: var(--rf-danger-line);
}
.rf-btn--danger:hover  { background: var(--rf-danger-bg); }
.rf-btn:disabled, .rf-btn[aria-disabled="true"] {
  opacity: .45; cursor: not-allowed;
}

/* --- Fields ------------------------------------------------------------- */
.rf-field {
  display: flex;
  align-items: center;
  gap: var(--rf-sp-2);
  height: 30px;
  padding: 0 var(--rf-sp-3);
  background: var(--rf-bg-2);
  border: 1px solid var(--rf-line-2);
  border-radius: var(--rf-r-2);
  color: var(--rf-fg-0);
  font-family: var(--rf-font-sans);
  font-size: var(--rf-fs-base);
  width: 100%;
  transition: border-color .12s, box-shadow .12s;
}
.rf-field:focus-within { border-color: var(--rf-line-focus); box-shadow: var(--rf-ring); }
.rf-field input,
.rf-field select {
  flex: 1; background: transparent; border: 0; color: inherit; font: inherit; outline: none; min-width: 0;
}
.rf-field input::placeholder { color: var(--rf-fg-3); }
.rf-field .rf-field-icon { color: var(--rf-fg-3); display: inline-flex; }

.rf-label {
  display: block;
  font-family: var(--rf-font-sans);
  font-size: var(--rf-fs-sm);
  font-weight: var(--rf-fw-med);
  color: var(--rf-fg-2);
  margin-bottom: var(--rf-sp-2);
}

/* --- Tags / Badges ------------------------------------------------------ */
.rf-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--rf-r-1);
  font-family: var(--rf-font-mono);
  font-size: 10px;
  font-weight: var(--rf-fw-med);
  letter-spacing: var(--rf-ls-wide);
  text-transform: uppercase;
  background: var(--rf-mute-bg);
  color: var(--rf-fg-1);
  border: 1px solid var(--rf-mute-line);
  white-space: nowrap;
}
.rf-tag--ok    { background: var(--rf-ok-bg);    color: var(--rf-ok);    border-color: var(--rf-ok-line); }
.rf-tag--warn  { background: var(--rf-warn-bg);  color: var(--rf-warn);  border-color: var(--rf-warn-line); }
.rf-tag--danger{ background: var(--rf-danger-bg);color: var(--rf-danger);border-color: var(--rf-danger-line); }
.rf-tag--info  { background: var(--rf-info-bg);  color: var(--rf-info);  border-color: var(--rf-info-line); }
.rf-tag--brand { background: var(--rf-crimson-wash); color: var(--rf-crimson-hi); border-color: rgba(200,37,58,.35); }

/* Dot indicator */
.rf-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; background: var(--rf-mute); }
.rf-dot--ok    { background: var(--rf-ok); }
.rf-dot--warn  { background: var(--rf-warn); }
.rf-dot--danger{ background: var(--rf-danger); }
.rf-dot--info  { background: var(--rf-info); }
.rf-dot--brand { background: var(--rf-crimson); }
.rf-dot--pulse { box-shadow: 0 0 0 0 currentColor; animation: rf-pulse 1.6s infinite; }
@keyframes rf-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(200,37,58,.6); }
  70%  { box-shadow: 0 0 0 6px rgba(200,37,58,0); }
  100% { box-shadow: 0 0 0 0 rgba(200,37,58,0); }
}

/* --- Tables (compact, data-dense) --------------------------------------- */
.rf-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--rf-font-sans);
  font-size: var(--rf-fs-sm);
  color: var(--rf-fg-1);
}
.rf-table thead th {
  text-align: left;
  font-weight: var(--rf-fw-med);
  font-size: var(--rf-fs-xs);
  letter-spacing: var(--rf-ls-wide);
  text-transform: uppercase;
  color: var(--rf-fg-3);
  padding: 8px 12px;
  border-bottom: 1px solid var(--rf-line-2);
  background: var(--rf-bg-1);
  white-space: nowrap;
}
.rf-table tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--rf-line-1);
  vertical-align: middle;
}
.rf-table tbody tr:hover { background: var(--rf-bg-2); }
.rf-table tbody tr:last-child td { border-bottom: 0; }
.rf-table td.num, .rf-table th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--rf-font-mono); }
.rf-table td.mono { font-family: var(--rf-font-mono); color: var(--rf-fg-2); font-size: 11px; }

/* --- Meters (confidence / evidence strength) ---------------------------- */
.rf-meter {
  position: relative;
  height: 4px;
  background: var(--rf-bg-3);
  border-radius: 999px;
  overflow: hidden;
}
.rf-meter > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--rf-ev-2), var(--rf-ev-5));
  border-radius: inherit;
}
.rf-meter--danger > span { background: var(--rf-danger); }
.rf-meter--warn   > span { background: var(--rf-warn); }
.rf-meter--ok     > span { background: var(--rf-ok); }

/* Segmented evidence bar (5 cells) */
.rf-evbar { display: inline-flex; gap: 2px; }
.rf-evbar > span {
  width: 8px; height: 12px;
  background: var(--rf-bg-3);
  border-radius: 1px;
}
.rf-evbar > span.on { background: var(--rf-ev-5); }
.rf-evbar > span.med{ background: var(--rf-ev-3); }

/* --- KPI ---------------------------------------------------------------- */
.rf-kpi { display: flex; flex-direction: column; gap: var(--rf-sp-2); }
.rf-kpi-label { color: var(--rf-fg-2); font-size: var(--rf-fs-xs); text-transform: uppercase; letter-spacing: var(--rf-ls-wide); font-weight: var(--rf-fw-semi); }
.rf-kpi-value { color: var(--rf-fg-0); font-size: var(--rf-fs-3xl); font-weight: var(--rf-fw-light); line-height: 1; font-variant-numeric: tabular-nums; }
.rf-kpi-delta { font-size: var(--rf-fs-xs); font-family: var(--rf-font-mono); }
.rf-kpi-delta.up   { color: var(--rf-ok); }
.rf-kpi-delta.down { color: var(--rf-danger); }

/* --- Sidebar nav -------------------------------------------------------- */
.rf-nav-item {
  display: flex; align-items: center; gap: var(--rf-sp-3);
  padding: 7px 10px;
  border-radius: var(--rf-r-2);
  color: var(--rf-fg-2);
  font-size: var(--rf-fs-base);
  cursor: pointer;
  border-left: 2px solid transparent;
}
.rf-nav-item:hover   { background: var(--rf-bg-2); color: var(--rf-fg-0); }
.rf-nav-item.active  { background: var(--rf-bg-2); color: var(--rf-fg-0); border-left-color: var(--rf-crimson); }
.rf-nav-item.locked  { opacity: .5; cursor: not-allowed; }

/* --- Code & key paths --------------------------------------------------- */
.rf-code {
  font-family: var(--rf-font-mono);
  font-size: var(--rf-fs-xs);
  background: var(--rf-bg-2);
  border: 1px solid var(--rf-line-2);
  border-radius: var(--rf-r-1);
  padding: 1px 5px;
  color: var(--rf-fg-1);
}

/* --- Page chrome -------------------------------------------------------- */
.rf-app { background: var(--rf-bg-0); color: var(--rf-fg-1); font-family: var(--rf-font-sans); font-size: var(--rf-fs-base); }

/* Utility */
.rf-divider-h { height: 1px; background: var(--rf-line-1); }
.rf-divider-v { width: 1px; background: var(--rf-line-1); align-self: stretch; }