/* ============================================================
   workflow.css
   Stage 9.3 — Submission Workflow UI styling
   Safe: CSS only (CSP friendly)
   Namespaced: subwf-*
   ============================================================ */

/* ---------- Meta + latest ---------- */
.subwf-meta {
  display: grid;
  gap: 6px;
}

.subwf-meta__row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.subwf-meta__value { }

.subwf-latest {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: baseline;
}

.subwf-latest__label { }
.subwf-latest__action { }
.subwf-latest__actor { }
.subwf-latest__time { }

.subwf-latest-note {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.subwf-divider {
  margin: 12px 0;
  opacity: 0.25;
}

/* ---------- Alerts ---------- */
.subwf-alert {
  border: 1px solid rgba(255, 0, 0, 0.35);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
}

.subwf-alert__text {
  display: inline-block;
}

/* ---------- Actions ---------- */
.subwf-actions { }
.subwf-actions__title { margin: 0 0 8px; }

.subwf-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.subwf-action-form {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin: 0;
}

.subwf-note-input {
  min-width: 220px;
}

/* Make workflow buttons feel consistent even if global .btn changes */
.subwf-btn {
  white-space: nowrap;
}

/* ---------- Timeline table ---------- */
.subwf-timeline { }
.subwf-timeline__title { margin: 0 0 8px; }

.subwf-timeline__table-wrap {
  overflow: auto;
}

.subwf-table {
  width: 100%;
}

.subwf-table__cell--when { width: 180px; }
.subwf-table__cell--action { width: 140px; }
.subwf-table__cell--actor { width: 180px; }
.subwf-table__cell--role  { width: 120px; }

/* Improve long notes without breaking layout */
.subwf-table__cell--note {
  word-break: break-word;
}

.subwf-action-code {
  font-size: 0.95em;
}

/* ---------- State styling hooks (subtle) ---------- */
/* These do NOT assume a theme color; they just add a tiny cue.
   You can later add real colors to match your theme. */
.subwf-submission--state-closed .subwf-submission__title::after {
  content: "• Closed";
  font-size: 0.85em;
  opacity: 0.75;
}

.subwf-submission--state-flagged .subwf-submission__title::after {
  content: "• Flagged";
  font-size: 0.85em;
  opacity: 0.75;
}

.subwf-submission--state-reviewed .subwf-submission__title::after {
  content: "• Reviewed";
  font-size: 0.85em;
  opacity: 0.75;
}

.subwf-submission--state-reopened .subwf-submission__title::after {
  content: "• Reopened";
  font-size: 0.85em;
  opacity: 0.75;
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .subwf-note-input { min-width: 160px; width: 100%; }
  .subwf-action-form { flex-wrap: wrap; }
  .subwf-table__cell--when,
  .subwf-table__cell--actor { width: auto; }
}

/* ---------- Button polish (scoped to workflow only) ---------- */
.subwf-panel .subwf-btn {
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  padding: 8px 12px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: transform 120ms ease, opacity 120ms ease, box-shadow 120ms ease;
  box-shadow: 0 1px 0 rgba(0,0,0,0.25);
}

/* Hover/active feel without relying on theme colors */
.subwf-panel .subwf-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.22);
}

.subwf-panel .subwf-btn:active {
  transform: translateY(0px);
  opacity: 0.92;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

/* Keyboard accessibility */
.subwf-panel .subwf-btn:focus-visible {
  outline: 2px solid rgba(255,255,255,0.45);
  outline-offset: 2px;
}

/* Optional “meaning” styling via subtle borders (still theme-safe) */
.subwf-panel .subwf-btn--reviewed     { border-style: solid; }
.subwf-panel .subwf-btn--acknowledged { border-style: solid; }
.subwf-panel .subwf-btn--flagged      { border-style: dashed; }
.subwf-panel .subwf-btn--closed       { border-style: solid; opacity: 0.98; }
.subwf-panel .subwf-btn--reopened     { border-style: solid; }
.subwf-panel .subwf-btn--review_note  { border-style: dotted; }

/* Tighten note input to match button height */
.subwf-panel .subwf-note-input {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18);
}

/* ============================================================
   Hard / Clinical button styling (workflow only)
   ============================================================ */

.subwf-panel .subwf-btn {
  border: 1px solid rgba(0,0,0,0.35);
  border-radius: 6px;
  padding: 8px 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  cursor: pointer;

  /* clinical: flat + crisp */
  box-shadow: none;
  transition: background-color 120ms ease, border-color 120ms ease, transform 80ms ease;
}

/* hover: slightly sharper, no “glow” */
.subwf-panel .subwf-btn:hover {
  border-color: rgba(0,0,0,0.55);
}

/* press: tiny mechanical feedback */
.subwf-panel .subwf-btn:active {
  transform: translateY(1px);
}

/* keyboard: strict, visible */
.subwf-panel .subwf-btn:focus-visible {
  outline: 2px solid rgba(0,0,0,0.65);
  outline-offset: 2px;
}

/* “meaning” cues: border style only (theme-neutral, clinical) */
.subwf-panel .subwf-btn--reviewed     { border-left-width: 4px; }
.subwf-panel .subwf-btn--acknowledged { border-left-width: 4px; }
.subwf-panel .subwf-btn--flagged      { border-left-style: dashed; border-left-width: 4px; }
.subwf-panel .subwf-btn--closed       { border-left-width: 4px; }
.subwf-panel .subwf-btn--reopened     { border-left-width: 4px; }
.subwf-panel .subwf-btn--review_note  { border-left-style: dotted; border-left-width: 4px; }

/* note input to match the same “clinical” shape */
.subwf-panel .subwf-note-input {
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.35);
}