/* styl/cluster1.css — Cluster 1 (Review Cycle Management) page styles. PER-785.
 *
 * Loaded after perf-extras.css in k2.html. Cluster 1 renders with K2 SDK admin
 * components (k2-data-table, k2-dialog, k2-drawer, k2-badge, k2-stat,
 * k2-progress-bar, k2-search-input) — the same vocabulary the kc-lms-3 admin
 * app uses — so this file only adds the small bits the SDK does not cover:
 * the filter row layout, the inline row-action cluster, and the drawer body
 * grids. All colors come from KCDS / --im-* bridge tokens — no hardcoded hex. */

/* ── Filter bar ──────────────────────────────────────────────────────────── */
.c1-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
  margin-bottom: 16px;
}
.c1-filter {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.c1-filter > label {
  font-size: 0.78rem;
  color: var(--im-text-secondary, #6b7280);
}
.c1-filter .c1-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ── Inline row actions (rendered inside k2-data-table cells) ─────────────── */
/* NB: the row-action container is cloned INTO the k2-data-table shadow DOM, so
 * this rule does not actually reach it — the layout is set via an inline style
 * in cycles-list-page.js #actionsHtml. Kept here for light-DOM parity. */
.c1-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

/* ── Overflow [⋯] action menu (rendered in page light DOM, fixed-positioned) ─ */
.c1-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
}
.c1-action-menu {
  z-index: 51;
  min-width: 184px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--k2-color-surface-default, var(--im-surface, #fff));
  border: 1px solid var(--k2-color-border-default, var(--im-border, #e5e7eb));
  border-radius: var(--k2-radius-8, 8px);
  box-shadow: var(--k2-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.18));
}
.c1-menu-item {
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  width: 100%;
  text-align: start;
  padding: 7px 10px;
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  color: var(--k2-color-text-primary, var(--im-text, #111827));
}
.c1-menu-item:hover {
  background: var(--k2-color-surface-subtle, rgba(0, 0, 0, 0.05));
}
.c1-menu-item.is-danger {
  color: var(--k2-color-status-error-fill, #dc2626);
}

/* ── Progress drawer body ────────────────────────────────────────────────── */
.c1-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.c1-desc {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 16px;
  margin: 12px 0 20px;
}
.c1-desc .c1-desc-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-block-end: 1px solid var(--im-border, #e5e7eb);
}
.c1-desc .c1-desc-label {
  color: var(--im-text-secondary, #6b7280);
}
.c1-section-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 16px 0 10px;
}

/* ── Cycle wizard (perf-cycle-wizard-page) ──────────────────────────────────── */
/* Step rail is the K2 <k2-stepper> component (renders its own dots + connector
   track in shadow DOM); no manual step markup/CSS here. */

/* Step body + footer */
.c1-wiz-body {
  padding: 20px;
}
.c1-wiz-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
}
.c1-wiz-grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.c1-wiz-body .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.c1-wiz-body .field > label {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--im-text-secondary, #6b7280);
}
.c1-wiz-body select,
.c1-wiz-body input[type='date'] {
  padding: 8px 10px;
  border: 1px solid var(--im-border, #e5e7eb);
  border-radius: var(--k2-radius-8, 8px);
  background: var(--im-surface, #fff);
  color: var(--im-text, #111827);
  font: inherit;
  font-size: 0.9rem;
}
.c1-wiz-body select[multiple] {
  padding: 4px;
}
.c1-wiz-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 12px;
}
.c1-wiz-row.card {
  padding: 12px;
  border: 1px solid var(--im-border, #e5e7eb);
  border-radius: var(--k2-radius-8, 8px);
}
.c1-wiz-row .field {
  margin-bottom: 0;
}
.c1-switch-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 0.9rem;
}
.c1-divider {
  border: 0;
  border-top: 1px solid var(--im-border, #e5e7eb);
  margin: 20px 0;
}
.c1-cal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 320px;
  margin-bottom: 8px;
}
.c1-cal-ok {
  color: var(--k2-color-status-success-fill, #16a34a);
  font-weight: 600;
}
.c1-desc-1col {
  grid-template-columns: 1fr;
}
.c1-wiz-body .err {
  color: var(--k2-color-status-error-fill, #dc2626);
  font-size: 0.8rem;
  margin: 2px 0 0;
}
.c1-wiz-body .small {
  font-size: 0.78rem;
}

/* ── Templates view-config snapshot ─────────────────────────────────────────── */
.c1-snap-pre {
  max-height: 320px;
  overflow: auto;
  background: var(--im-surface-subtle, rgba(0, 0, 0, 0.04));
  border-radius: 8px;
  padding: 12px;
  font-size: 0.78rem;
  white-space: pre-wrap;
}

/* ── Distribution policy: dept selector, tabs, bands, histogram ─────────────── */
.c1-dept-selector {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
}
.c1-dept-selector select {
  padding: 8px 10px;
  border: 1px solid var(--im-border, #e5e7eb);
  border-radius: var(--k2-radius-8, 8px);
  background: var(--im-surface, #fff);
  color: var(--im-text, #111827);
  font: inherit;
  font-size: 0.9rem;
  min-width: 240px;
}
.c1-dept-selector .small {
  flex-basis: 100%;
  margin: 0;
}

.c1-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--im-border, #e5e7eb);
  margin-bottom: 20px;
}
.c1-tab {
  appearance: none;
  border: 0;
  background: none;
  padding: 10px 16px;
  font: inherit;
  font-size: 0.9rem;
  color: var(--im-text-secondary, #6b7280);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.c1-tab.is-active {
  color: var(--k2-color-primary, var(--im-primary, #4f46e5));
  border-bottom-color: var(--k2-color-primary, var(--im-primary, #4f46e5));
  font-weight: 600;
}

.c1-policy-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 16px;
}
.c1-policy-actions {
  display: flex;
  gap: 8px;
  margin-inline-start: auto;
}
.c1-status-tags {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.c1-bands-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 20px;
}
.c1-bands-table th,
.c1-bands-table td {
  text-align: start;
  padding: 8px 10px;
  border-bottom: 1px solid var(--im-border, #e5e7eb);
  font-size: 0.88rem;
}
.c1-bands-table th {
  color: var(--im-text-secondary, #6b7280);
  font-weight: 500;
}
.c1-bands-table k2-input {
  max-width: 110px;
}

/* CSS-bar histogram */
.c1-histogram {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  height: 220px;
  padding: 12px 8px 0;
  border-bottom: 1px solid var(--im-border, #e5e7eb);
}
.c1-hist-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 0;
  height: 100%;
  justify-content: flex-end;
  gap: 6px;
}
.c1-hist-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 100%;
  width: 100%;
  justify-content: center;
}
.c1-hist-bar {
  width: 22px;
  border-radius: 3px 3px 0 0;
  min-height: 2px;
}
.c1-hist-target {
  background: var(--k2-color-primary, var(--im-primary, #4f46e5));
}
.c1-hist-actual.c1-hist-success {
  background: var(--k2-color-status-success-fill, #16a34a);
}
.c1-hist-actual.c1-hist-danger {
  background: var(--k2-color-status-error-fill, #dc2626);
}
.c1-hist-actual.c1-hist-warning {
  background: var(--k2-color-status-warning-fill, #d97706);
}
.c1-hist-actual.c1-hist-neutral {
  background: var(--im-text-secondary, #6b7280);
}
.c1-hist-prev {
  background: var(--im-text-secondary, #6b7280);
  opacity: 0.45;
}
.c1-hist-legend {
  display: flex;
  gap: 16px;
  margin-top: 10px;
}
.c1-hist-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  margin-inline-end: 4px;
  vertical-align: middle;
}
.c1-report-export {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.c1-export-link {
  text-decoration: none;
}

/* ── Approval review (perf-approval-review-page) ───────────────────────────── */
/* NB: this foundation defines only --k2-color-* tokens; the --im-* bridge is
 * absent (resolves empty), so every color leads with --k2-color-* and keeps
 * --im-* + a literal as nested fallbacks — same pattern as .c1-action-menu.
 * A bare var(--im-surface, #fff) would paint a white card in dark mode. */
.c1-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  margin-bottom: 12px;
}
.c1-breadcrumb a {
  color: var(--k2-color-text-link, var(--k2-color-primary, var(--im-primary, #4f46e5)));
  text-decoration: none;
}
.c1-breadcrumb a:hover {
  text-decoration: underline;
}
.c1-bc-sep {
  color: var(--k2-color-text-secondary, var(--im-text-secondary, #6b7280));
}
.c1-appr-subhead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
/* Reusable section card (light DOM, so external CSS reaches it). */
.c1-card {
  padding: 16px;
  border: 1px solid var(--k2-color-border-default, var(--im-border, #e5e7eb));
  border-radius: var(--k2-radius-8, 8px);
  background: var(--k2-color-surface-default, var(--im-surface, #fff));
  color: var(--k2-color-text-primary, var(--im-text, #111827));
  margin-bottom: 16px;
}
.c1-card .c1-desc {
  margin: 0;
}

/* Pipeline step-rail (K2 has no k2-stepper). */
.c1-appr-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.c1-appr-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.c1-appr-step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex: none;
  background: var(--k2-color-surface-subtle, var(--im-border, #e5e7eb));
  color: var(--k2-color-text-primary, var(--im-text, #111827));
  font-size: 0.78rem;
  font-weight: 600;
}
.c1-appr-step.is-approved .c1-appr-step-no {
  background: var(--k2-color-status-success-fill, #16a34a);
  color: #fff;
}
.c1-appr-step.is-rejected .c1-appr-step-no {
  background: var(--k2-color-status-error-fill, #dc2626);
  color: #fff;
}
.c1-appr-step.is-changes_requested .c1-appr-step-no {
  background: var(--k2-color-status-warning-fill, #d97706);
  color: #fff;
}
.c1-appr-step.is-pending .c1-appr-step-no {
  background: var(--k2-color-primary, var(--im-primary, #4f46e5));
  color: #fff;
}
.c1-appr-step-body {
  flex: 1;
}
.c1-appr-step-name {
  font-weight: 500;
}
.c1-appr-step-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.c1-appr-step-comment {
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--k2-color-text-primary, var(--im-text, #111827));
}

/* Review content — per-section self/manager columns. */
.c1-appr-section {
  border: 1px solid var(--k2-color-border-default, var(--im-border, #e5e7eb));
  border-radius: var(--k2-radius-8, 8px);
  padding: 10px 14px;
  margin-bottom: 10px;
}
.c1-appr-section > summary {
  cursor: pointer;
  font-weight: 600;
}
.c1-appr-q {
  padding: 10px 0;
  border-top: 1px solid var(--k2-color-border-default, var(--im-border, #e5e7eb));
}
.c1-appr-q:first-of-type {
  border-top: 0;
}
.c1-appr-q-text {
  margin-bottom: 8px;
}
.c1-req {
  color: var(--k2-color-status-error-fill, #dc2626);
  margin-inline-start: 4px;
}
.c1-appr-q-cols {
  display: flex;
  gap: 24px;
}
.c1-appr-q-col {
  flex: 1;
}
.c1-appr-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* ── Cycle reports (perf-cycle-completion-page / perf-performance-distribution) ─ */
.c1-report-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.c1-report-select {
  padding: 8px 10px;
  border: 1px solid var(--k2-color-border-default, var(--im-border, #e5e7eb));
  border-radius: var(--k2-radius-8, 8px);
  background: var(--k2-color-surface-default, var(--im-surface, #fff));
  color: var(--k2-color-text-primary, var(--im-text, #111827));
  font: inherit;
  font-size: 0.9rem;
  min-width: 220px;
}
.c1-report-select[multiple] {
  padding: 4px;
}
/* Stat-tile grids (override the 3-col .c1-stats default). */
.c1-stats-4 {
  grid-template-columns: repeat(4, 1fr);
}
.c1-stats-5 {
  grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 880px) {
  .c1-stats-4,
  .c1-stats-5 {
    grid-template-columns: repeat(2, 1fr);
  }
}
.c1-tab-body {
  padding-top: 4px;
}

/* CSS-bar chart (K2 has no chart component; recharts in React). */
.c1-barchart {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 240px;
  padding: 8px 4px 0;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--k2-color-border-default, var(--im-border, #e5e7eb));
}
.c1-barchart-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  flex: 1 1 0;
  height: 100%;
  gap: 6px;
  min-width: 0;
}
.c1-barchart-track {
  display: flex;
  align-items: flex-end;
  width: 60%;
  max-width: 56px;
  flex: 1;
}
.c1-barchart-fill {
  width: 100%;
  border-radius: 4px 4px 0 0;
  background: var(--k2-color-primary, var(--im-primary, #4f46e5));
  min-height: 2px;
}
.c1-barchart-val {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--k2-color-text-primary, var(--im-text, #111827));
}
.c1-barchart-label {
  font-size: 0.75rem;
  color: var(--k2-color-text-secondary, var(--im-text-secondary, #6b7280));
  text-align: center;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Report data tables (plain — these are static report grids, not k2-data-table). */
.c1-report-table {
  width: 100%;
  border-collapse: collapse;
  margin: 4px 0;
}
.c1-report-table th,
.c1-report-table td {
  text-align: start;
  padding: 8px 10px;
  border-bottom: 1px solid var(--k2-color-border-default, var(--im-border, #e5e7eb));
  font-size: 0.88rem;
  vertical-align: middle;
}
.c1-report-table th {
  color: var(--k2-color-text-secondary, var(--im-text-secondary, #6b7280));
  font-weight: 500;
}
.c1-dev-up {
  color: var(--k2-color-status-success-fill, #16a34a);
}
.c1-dev-down {
  color: var(--k2-color-status-error-fill, #dc2626);
}

/* ── Calibration (perf-calibration-* pages) ────────────────────────────────── */
.c1-stats-3 {
  grid-template-columns: repeat(3, 1fr);
}
.c1-desc-2col {
  grid-template-columns: repeat(2, 1fr);
}
.c1-cal-grid {
  display: grid;
  grid-template-columns: minmax(280px, 2fr) 3fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 1024px) {
  .c1-cal-grid {
    grid-template-columns: 1fr;
  }
}
.c1-cal-grid-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

/* Bell-curve distribution (CSS bars + dashed target marker; no chart lib). */
.c1-bellcurve {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 180px;
  padding: 8px 4px 0;
}
.c1-bellcurve-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  flex: 1 1 0;
  height: 100%;
  gap: 6px;
  min-width: 0;
}
.c1-bellcurve-track {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 70%;
  max-width: 48px;
  flex: 1;
}
.c1-bellcurve-fill {
  width: 100%;
  border-radius: 4px 4px 0 0;
  background: var(--k2-color-primary, var(--im-primary, #4f46e5));
  opacity: 0.85;
  min-height: 2px;
}
.c1-bellcurve-target {
  position: absolute;
  left: -3px;
  right: -3px;
  height: 0;
  border-top: 2px dashed var(--k2-color-text-secondary, var(--im-text-secondary, #6b7280));
  opacity: 0.8;
}

/* Plain textarea (K2 has no multiline input component). */
.c1-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--k2-color-border-default, var(--im-border, #e5e7eb));
  border-radius: var(--k2-radius-8, 8px);
  background: var(--k2-color-surface-default, var(--im-surface, #fff));
  color: var(--k2-color-text-primary, var(--im-text, #111827));
  font: inherit;
  font-size: 0.9rem;
  resize: vertical;
}