/* ════════════════════════════════════════════════════════════════════════════
 * WES Design System — Component Atoms
 *
 * SOURCE OF TRUTH for visual primitives across every Drupal module.
 * Every page composes these atoms in markup — no per-feature CSS for visuals.
 *
 * INVARIANT (anh chốt 2026-04-28):
 *   1. New UI MUST compose atoms below. Do NOT create new BEM-prefixed CSS
 *      for visuals (.wes-cwiz-*, .wes-camp-*, .wes-loctax-*, etc. were the
 *      anti-pattern this file replaces).
 *   2. If you need a primitive that doesn't exist here, ADD A NEW ATOM to
 *      this file with rationale comment, then use it. Don't fork into a
 *      per-feature class.
 *   3. Per-feature CSS files are allowed ONLY for irreducible feature glue
 *      (e.g., the iPhone-bezel preview frame, slideshow image positioning).
 *      They MUST stay <100 lines and reference these atoms by name in a
 *      header comment.
 *
 * Loaded by: wes_theme/base library (auto-injected on every Drupal page).
 *
 * Tokens consumed from theme.css:
 *   --wes-red, --wes-red-2, --wes-red-soft
 *   --wes-bg, --wes-bg-alt
 *   --wes-fg, --wes-fg-muted, --wes-fg-soft
 *   --wes-border, --wes-card
 *   --wes-shadow-sm/md/lg
 *
 * Status semantic colors (intentional duplicates with admin.css; safe to share):
 *   --wes-success: #008f4e   --wes-success-soft: rgba(25,167,116,0.08)
 *   --wes-warn:    #b76e00   --wes-warn-soft:    rgba(183,110,0,0.08)
 *   --wes-info:    #1e63d9   --wes-info-soft:    rgba(30,99,217,0.08)
 *   --wes-purple:  #7c3aed   --wes-purple-soft:  rgba(124,58,237,0.08)
 * ════════════════════════════════════════════════════════════════════════════ */

/* Define the semantic-color tokens here (only ones not already in theme.css) */
:root {
  --wes-success:      #008f4e;
  --wes-success-2:    #006e3c;
  --wes-success-soft: rgba(25, 167, 116, 0.08);
  --wes-warn:         #b76e00;
  --wes-warn-2:       #8b5400;
  --wes-warn-soft:    rgba(183, 110, 0, 0.08);
  --wes-info:         #1e63d9;
  --wes-info-soft:    rgba(30, 99, 217, 0.08);
  --wes-purple:       #7c3aed;
  --wes-purple-soft:  rgba(124, 58, 237, 0.08);
}

/* ────────────────────────────────────────────────────────────────────────────
 * 1. CARDS
 * ──────────────────────────────────────────────────────────────────────────── */

.wes-card {
  background: var(--wes-card, #fff);
  border: 1px solid var(--wes-border, #e6e9f0);
  border-radius: 12px;
  padding: 22px;
  box-shadow: var(--wes-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.04));
  font-family: 'UTM Avo', system-ui, sans-serif;
  color: var(--wes-fg, #1a1a1a);
}

/* Sub-card variant (lower-contrast for nested groups, e.g., quote summary) */
.wes-card.wes-card--inset {
  background: var(--wes-bg-alt, #fafbfd);
  box-shadow: none;
  padding: 14px;
}

/* Sticky card for sidebar previews */
.wes-card.wes-card--sticky {
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 100px);
  overflow: auto;
}

/* Tighter card padding */
.wes-card.wes-card--compact { padding: 14px; }

/* Card head row — title + CTA on opposite ends */
.wes-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--wes-border, #e6e9f0);
  margin-bottom: 14px;
}

/* Section title (use for card heads or top-of-page H2) */
.wes-section-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  color: var(--wes-fg, #1a1a1a);
  letter-spacing: 0.01em;
}

/* ────────────────────────────────────────────────────────────────────────────
 * 2. BUTTONS
 * ──────────────────────────────────────────────────────────────────────────── */

.wes-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--wes-fg, #1a1a1a);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
  white-space: nowrap;
}
.wes-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.wes-btn--primary {
  background: var(--wes-red, #DC1C1C);
  color: #fff;
}
.wes-btn--primary:not(:disabled):hover { background: var(--wes-red-2, #B01010); }

.wes-btn--secondary {
  background: #e5e7eb;
  color: #374151;
}
.wes-btn--secondary:not(:disabled):hover { background: #d1d5db; }

.wes-btn--ghost {
  background: #fff;
  border-color: var(--wes-border, #e6e9f0);
  color: var(--wes-fg-muted, #666);
}
.wes-btn--ghost:not(:disabled):hover {
  color: var(--wes-fg, #1a1a1a);
  border-color: var(--wes-fg-soft, #888);
}

.wes-btn--danger-outline {
  background: #fff;
  border-color: var(--wes-red, #DC1C1C);
  color: var(--wes-red, #DC1C1C);
}
.wes-btn--danger-outline:not(:disabled):hover {
  background: var(--wes-red-soft, rgba(220,28,28,0.08));
}

.wes-btn--success {
  background: var(--wes-success);
  color: #fff;
}
.wes-btn--success:not(:disabled):hover { background: var(--wes-success-2); }

.wes-btn--warning {
  background: var(--wes-warn);
  color: #fff;
}
.wes-btn--warning:not(:disabled):hover { background: var(--wes-warn-2); }

.wes-btn--icon {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--wes-border, #e6e9f0);
  background: #fff;
  color: var(--wes-fg-muted, #666);
}
.wes-btn--icon:not(:disabled):hover {
  color: var(--wes-red, #DC1C1C);
  border-color: var(--wes-red, #DC1C1C);
}

.wes-btn--sm { padding: 5px 12px; font-size: 0.78rem; }
.wes-btn--lg { padding: 12px 28px; font-size: 1rem; }
.wes-btn--block { width: 100%; }

/* ────────────────────────────────────────────────────────────────────────────
 * 3. FORMS
 * ──────────────────────────────────────────────────────────────────────────── */

.wes-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.wes-field--inline {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.wes-field--full { grid-column: 1 / -1; }

.wes-field-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.wes-field-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
@media (max-width: 720px) {
  .wes-field-grid-2,
  .wes-field-grid-3 { grid-template-columns: 1fr; }
}

.wes-label {
  font-size: 0.78rem;
  color: var(--wes-fg-muted, #666);
  font-weight: 600;
}
.wes-label small {
  color: var(--wes-fg-soft, #888);
  font-weight: 400;
  margin-left: 4px;
}

.wes-input,
.wes-textarea,
.wes-select {
  width: 100%;
  padding: 9px 12px;
  background: #fff;
  border: 1px solid var(--wes-border, #e6e9f0);
  border-radius: 8px;
  color: var(--wes-fg, #1a1a1a);
  font-family: inherit;
  font-size: 0.9rem;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s;
}
.wes-textarea { resize: vertical; min-height: 70px; }
.wes-input:focus,
.wes-textarea:focus,
.wes-select:focus { border-color: var(--wes-red, #DC1C1C); }

.wes-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--wes-red, #DC1C1C);
  cursor: pointer;
}

.wes-help-text {
  color: var(--wes-fg-soft, #888);
  font-size: 0.74rem;
  line-height: 1.4;
}

.wes-meta {
  color: var(--wes-fg-muted, #666);
  font-size: 0.85rem;
}
.wes-meta strong { color: var(--wes-fg, #1a1a1a); }

.wes-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--wes-border, #e6e9f0);
}

/* Input with prefix/suffix wrap (e.g., amount input + "WES" suffix) */
.wes-input-wrap { position: relative; }
.wes-input-wrap .wes-input { padding-right: 44px; }
.wes-input-wrap__suffix {
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--wes-fg-soft, #888);
  font-size: 0.8rem;
  pointer-events: none;
}

/* ────────────────────────────────────────────────────────────────────────────
 * 4. TABLES
 * ──────────────────────────────────────────────────────────────────────────── */

.wes-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.wes-table thead th {
  text-align: left;
  color: var(--wes-fg-muted, #666);
  font-weight: 600;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 12px;
  border-bottom: 1px solid var(--wes-border, #e6e9f0);
}
.wes-table tbody td {
  padding: 12px;
  color: var(--wes-fg, #1a1a1a);
  border-bottom: 1px solid var(--wes-border, #e6e9f0);
  vertical-align: middle;
}
.wes-table tbody tr:hover { background: var(--wes-red-soft, rgba(220,28,28,0.08)); }
.wes-table tbody tr.is-archived td { opacity: 0.5; }

.wes-table--compact thead th { padding: 6px 10px; font-size: 0.7rem; }
.wes-table--compact tbody td { padding: 8px 10px; font-size: 0.82rem; }

.wes-table-wrap { overflow-x: auto; }

.wes-table-loading {
  color: var(--wes-fg-soft, #888);
  text-align: center;
  padding: 40px !important;
}
.wes-table-loading.is-error { color: var(--wes-red, #DC1C1C); }

/* Inline code within table cells */
.wes-table code,
.wes-code {
  background: var(--wes-bg-alt, #fafbfd);
  border: 1px solid var(--wes-border, #e6e9f0);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.78rem;
  color: var(--wes-fg-muted, #666);
  font-family: 'SF Mono', Consolas, monospace;
}

/* Cell action button group */
.wes-cell-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Read-only label inside cell (small italic muted) */
.wes-readonly {
  color: var(--wes-fg-soft, #888);
  font-size: 0.78rem;
  font-style: italic;
}

/* ────────────────────────────────────────────────────────────────────────────
 * 5. CHIPS (multi-select pills)
 * ──────────────────────────────────────────────────────────────────────────── */

.wes-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.wes-chip {
  padding: 5px 12px;
  background: #fff;
  border: 1px solid var(--wes-border, #e6e9f0);
  border-radius: 999px;
  color: var(--wes-fg-muted, #666);
  font-size: 0.78rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.wes-chip:hover { color: var(--wes-fg, #1a1a1a); border-color: var(--wes-fg-soft, #888); }
.wes-chip.is-active {
  background: var(--wes-red-soft, rgba(220,28,28,0.08));
  border-color: var(--wes-red, #DC1C1C);
  color: var(--wes-red, #DC1C1C);
  font-weight: 600;
}
.wes-chip small {
  color: var(--wes-fg-soft, #888);
  margin-left: 3px;
  font-size: 0.68rem;
}

/* Larger card-style chip (e.g., creative-kind selector) */
.wes-chip--card {
  flex: 1;
  padding: 12px;
  border-radius: 8px;
  background: var(--wes-bg-alt, #fafbfd);
  text-align: left;
  font-size: 0.85rem;
}
.wes-chip--card.is-active {
  background: var(--wes-red-soft, rgba(220,28,28,0.08));
}
.wes-chip--card small {
  color: var(--wes-fg-soft, #888);
  display: block;
  margin-top: 2px;
  font-size: 0.72rem;
  font-weight: 400;
}

/* Stacked-layout chip for duration buttons (label + sub-label) */
.wes-chip--stack {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--wes-bg-alt, #fafbfd);
}
.wes-chip__label   { font-weight: 600; font-size: 0.82rem; }
.wes-chip__sublabel { font-size: 0.72rem; color: var(--wes-success); }

/* ────────────────────────────────────────────────────────────────────────────
 * 6. TABS
 * ──────────────────────────────────────────────────────────────────────────── */

.wes-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--wes-border, #e6e9f0);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.wes-tab {
  padding: 10px 18px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--wes-fg-muted, #666);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.wes-tab:hover { color: var(--wes-fg, #1a1a1a); }
.wes-tab.is-active {
  color: var(--wes-red, #DC1C1C);
  border-bottom-color: var(--wes-red, #DC1C1C);
}

.wes-tab-panel { display: none; }
.wes-tab-panel.is-active { display: block; }

/* Compact tabs (e.g., device picker phone/tablet/laptop) */
.wes-tabs--compact { border: none; gap: 4px; margin-bottom: 8px; }
.wes-tabs--compact .wes-tab {
  flex: 1;
  padding: 6px 10px;
  border-radius: 6px;
  margin-bottom: 0;
  background: var(--wes-bg-alt, #fafbfd);
  border: 1px solid var(--wes-border, #e6e9f0);
  font-size: 0.72rem;
}
.wes-tabs--compact .wes-tab.is-active {
  background: var(--wes-red-soft, rgba(220,28,28,0.08));
  border-color: var(--wes-red, #DC1C1C);
}

/* ────────────────────────────────────────────────────────────────────────────
 * 7. STATUS BADGES (pill-shaped, color-coded)
 * ──────────────────────────────────────────────────────────────────────────── */

.wes-status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: #f1f3f5;
  color: var(--wes-fg-muted, #666);
}
.wes-status--draft           { background: #f1f3f5;        color: #666; }
.wes-status--review,
.wes-status--awaiting-review { background: var(--wes-warn-soft);   color: var(--wes-warn); }
.wes-status--approved,
.wes-status--running         { background: var(--wes-success-soft);color: var(--wes-success); }
.wes-status--suspended       { background: var(--wes-purple-soft); color: var(--wes-purple); }
.wes-status--completed       { background: var(--wes-info-soft);   color: var(--wes-info); }
.wes-status--rejected,
.wes-status--error           { background: var(--wes-red-soft);    color: var(--wes-red); }
.wes-status--unknown         { background: #f1f3f5;        color: #888; }

/* ────────────────────────────────────────────────────────────────────────────
 * 8. STEP INDICATOR (multi-step wizards)
 * ──────────────────────────────────────────────────────────────────────────── */

.wes-steps {
  display: flex;
  gap: 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--wes-border, #e6e9f0);
  margin-bottom: 16px;
}
.wes-step {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--wes-bg-alt, #fafbfd);
  border: 1px solid var(--wes-border, #e6e9f0);
  border-radius: 8px;
  color: var(--wes-fg-muted, #666);
  font-size: 0.82rem;
  font-weight: 500;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.wes-step.is-done {
  color: var(--wes-red, #DC1C1C);
  border-color: var(--wes-red, #DC1C1C);
}
.wes-step.is-active {
  color: #fff;
  background: var(--wes-red, #DC1C1C);
  border-color: var(--wes-red, #DC1C1C);
}
.wes-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--wes-border, #e6e9f0);
  color: var(--wes-fg, #1a1a1a);
  font-size: 0.75rem;
  font-weight: 700;
}
.wes-step.is-done   .wes-step__num { background: var(--wes-red, #DC1C1C); color: #fff; }
.wes-step.is-active .wes-step__num { background: #fff; color: var(--wes-red, #DC1C1C); }

/* ────────────────────────────────────────────────────────────────────────────
 * 9. OVERLAYS / MODALS / LIGHTBOXES
 * ──────────────────────────────────────────────────────────────────────────── */

.wes-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 46, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}
.wes-overlay--lightbox { background: rgba(26, 26, 46, 0.80); }
.wes-overlay--scroll {
  /* `safe center` keeps the card vertically centred while content fits, and
   * falls back to top-align only when the card is taller than the viewport
   * (so the head doesn't get clipped above the scroll origin). */
  align-items: safe center;
  padding: 30px 20px;
  overflow-y: auto;
}

.wes-overlay__card {
  background: var(--wes-card, #fff);
  border: 1px solid var(--wes-border, #e6e9f0);
  border-radius: 12px;
  max-width: 480px;
  width: 100%;
  color: var(--wes-fg, #1a1a1a);
  box-shadow: var(--wes-shadow-lg, 0 12px 48px rgba(0, 0, 0, 0.10));
  display: flex;
  flex-direction: column;
}
.wes-overlay__card.is-success { border-color: var(--wes-success); }
.wes-overlay__card.is-error   { border-color: var(--wes-red, #DC1C1C); }
.wes-overlay__card--wide   { max-width: 1100px; }
.wes-overlay__card--xwide  { max-width: 1300px; }

.wes-overlay__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--wes-border, #e6e9f0);
}
.wes-overlay__head h3 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--wes-fg, #1a1a1a);
}
.wes-overlay__body { padding: 22px; }
.wes-overlay__body p { color: var(--wes-fg-muted, #666); font-size: 0.9rem; line-height: 1.5; }

.wes-overlay__close {
  background: #fff;
  border: 1px solid var(--wes-border, #e6e9f0);
  color: var(--wes-fg-muted, #666);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wes-overlay__close:hover {
  color: var(--wes-red, #DC1C1C);
  border-color: var(--wes-red, #DC1C1C);
}

.wes-overlay__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 16px 24px;
  border-top: 1px solid var(--wes-border, #e6e9f0);
}

/* Inline danger / muted text helpers (use on <strong>, <small>, <span>) */
.wes-bad   { color: var(--wes-red, #DC1C1C); }
.wes-tbd   { color: var(--wes-warn); font-style: italic; font-weight: 400; font-size: 0.78rem; }

/* Definition list inside overlays (e.g., quote summary, success card) */
.wes-deflist {
  background: var(--wes-bg-alt, #fafbfd);
  border-radius: 8px;
  padding: 12px;
  margin: 14px 0;
}
.wes-deflist > div {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 0.85rem;
  border-bottom: 1px dotted var(--wes-border, #e6e9f0);
}
.wes-deflist > div:last-child { border-bottom: none; }
.wes-deflist span { color: var(--wes-fg-muted, #666); }
.wes-deflist strong { color: var(--wes-fg, #1a1a1a); }
.wes-deflist .wes-bad { color: var(--wes-red, #DC1C1C); }

/* ────────────────────────────────────────────────────────────────────────────
 * 10. DROP ZONES (file upload)
 * ──────────────────────────────────────────────────────────────────────────── */

.wes-dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  min-height: 160px;
  padding: 22px 14px;
  background: var(--wes-bg-alt, #fafbfd);
  border: 1.5px dashed var(--wes-border, #e6e9f0);
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  color: var(--wes-fg-muted, #666);
  font-size: 0.85rem;
  transition: border-color 0.15s, background 0.15s;
}
.wes-dropzone:hover { border-color: var(--wes-red, #DC1C1C); }
.wes-dropzone.is-filled {
  border-color: var(--wes-success);
  border-style: solid;
  cursor: default;
}
.wes-dropzone__icon { font-size: 2rem; margin-bottom: 6px; }
.wes-dropzone small {
  color: var(--wes-fg-soft, #888);
  font-size: 0.72rem;
  display: block;
  margin-top: 4px;
}

/* Image-grid drop slots (4-image slideshow etc.) */
.wes-dropslot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.wes-dropslot {
  aspect-ratio: 16 / 9;
  background-color: var(--wes-bg-alt, #fafbfd);
  background-size: cover;
  background-position: center;
  border: 1.5px dashed var(--wes-border, #e6e9f0);
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wes-fg-soft, #888);
  font-size: 0.85rem;
  text-align: center;
  position: relative;
  transition: border-color 0.15s;
}
.wes-dropslot:hover { border-color: var(--wes-red, #DC1C1C); }
.wes-dropslot.is-filled {
  border-color: var(--wes-success);
  border-style: solid;
}
.wes-dropslot__num { font-weight: 600; color: var(--wes-fg-muted, #666); }
.wes-dropslot__name {
  position: absolute;
  bottom: 4px; left: 4px; right: 4px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--wes-success);
  font-size: 0.65rem;
  padding: 3px 6px;
  border-radius: 4px;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: 1px solid rgba(25, 167, 116, 0.2);
}

/* ────────────────────────────────────────────────────────────────────────────
 * 11. QR / ADDRESS DISPLAY
 * ──────────────────────────────────────────────────────────────────────────── */

.wes-qr-wrap {
  background: var(--wes-bg-alt, #fafbfd);
  padding: 14px;
  border-radius: 8px;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.wes-qr {
  background: #fff;
  padding: 8px;
  border-radius: 6px;
  box-shadow: var(--wes-shadow-sm, 0 1px 3px rgba(0,0,0,0.04));
}
.wes-addr {
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 0.75rem;
  color: var(--wes-fg, #1a1a1a);
  background: #fff;
  border: 1px solid var(--wes-border, #e6e9f0);
  padding: 6px 10px;
  border-radius: 4px;
  word-break: break-all;
  text-align: center;
}

/* ────────────────────────────────────────────────────────────────────────────
 * 12. STATUS ROW (inline result feedback below forms)
 * ──────────────────────────────────────────────────────────────────────────── */

.wes-status-row {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.83rem;
  color: var(--wes-success);
  background: var(--wes-success-soft);
  min-height: 1.4em;
}
.wes-status-row.is-error {
  color: var(--wes-red, #DC1C1C);
  background: var(--wes-red-soft, rgba(220,28,28,0.08));
}
.wes-status-row.is-warn {
  color: var(--wes-warn);
  background: var(--wes-warn-soft);
}
.wes-status-row.is-info {
  color: var(--wes-info);
  background: var(--wes-info-soft);
}