@import 'colors.css';

/* ============================================================
   WattFarmer UI — Design tokens + Bootstrap overrides
   Clean corporate look, compact density. No gradients.
   ============================================================ */

/* ── Design tokens ───────────────────────────────────────────────
   This block is the only place a colour literal may be declared.
   Everything else — global rules and component-scoped .razor.css —
   must reference these variables. A raw hex outside this file means
   a colour that nobody can change centrally.
   ───────────────────────────────────────────────────────────────── */
:root {
  /* Bootstrap variable overrides — utilities like .bg-info use these automatically */
  --bs-info: var(--wf-teal-400);
  --bs-info-rgb: 45, 212, 191;
  --bs-primary: var(--wf-blue-600);
  --bs-secondary: var(--wf-gray-500);
  --bs-success: var(--wf-green-600);
  --bs-danger: var(--wf-red-600);
  --bs-warning: var(--wf-amber-500);

  /* Radii */
  --wf-radius-sm: 4px;
  --wf-radius:    6px;
  --wf-radius-lg: 8px;
  --wf-radius-xl: 12px;

  /* Shadows */
  --wf-shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --wf-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --wf-shadow:    0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.04);
  /* Colour for elevated overlays: sticky action bars, popovers, drag shadows. */
  --wf-shadow-overlay: rgba(15, 23, 42, 0.12);
  /* Halo around the current step or selected item. */
  --wf-ring-primary: rgba(30, 64, 175, 0.12);

  /* Control sizing */
  /* One height for every status chip in the app, so none can be read as "smaller"
     than another. Sits a step below the smallest control. */
  --wf-chip-height: 1.5rem;
  --wf-control-height-sm: 2rem;
  --wf-control-height-md: 2.5rem;
  --wf-control-height-lg: 2.875rem;
  --wf-control-padding-sm: 0.625rem;
  --wf-control-padding-md: 0.75rem;
  --wf-control-padding-lg: 0.875rem;

  /* Interaction */
  --wf-focus-ring: 0 0 0 3px rgba(30, 64, 175, 0.2);
  --wf-transition-fast: 120ms ease;

  /* Spacing scale */
  --wf-space-0:      0;
  --wf-space-1:      0.25rem;
  --wf-space-2:      0.5rem;
  --wf-space-3:      0.75rem;
  --wf-space-4:      1rem;
  --wf-space-5:      1.25rem;
  --wf-space-6:      1.5rem;
  --wf-space-8:      2rem;
  --wf-space-10:     2.5rem;

  /* Font families */
  --wf-font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --wf-font-mono:    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  /* Type scale */
  --wf-font-xxs:     0.6rem;
  --wf-font-xs:      0.6875rem;
  --wf-font-xs-plus: 0.7rem;
  /* Supporting text and status chips. The scale used to stop at 0.7rem, so
     every caption invented its own size and chips ended up smaller than the
     links beside them. One step, one size. */
  --wf-font-caption: 0.75rem;
  --wf-font-sm:      0.8125rem;
  --wf-font-base:    0.875rem;
  --wf-font-base-plus: 0.9rem;
  --wf-font-md:      1rem;
  --wf-font-lg:      1.125rem;
}

/* ── Base ────────────────────────────────────────────────────── */
body {
  font-size: var(--wf-font-base);
  color: var(--wf-text);
  background-color: var(--wf-gray-50);
}

a, .btn-link {
  color: var(--wf-color-primary);
  text-decoration: none;
}
a:hover, .btn-link:hover {
  color: var(--wf-blue-700);
  text-decoration: underline;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  font-size: var(--wf-font-sm);
  font-weight: 500;
  line-height: 1.4;
  border-radius: var(--wf-radius);
  padding: 0.4rem 0.875rem;
  transition: background-color 0.1s ease, border-color 0.1s ease;
  box-shadow: none;
}
.btn:hover    { transform: none; box-shadow: none; }
.btn:active   { transform: none; }
.btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.25);
  outline: none;
}
.btn-sm {
  padding: 0.3rem 0.625rem;
  font-size: var(--wf-font-sm);
  border-radius: var(--wf-radius-sm);
}

.btn-primary {
  background: var(--wf-color-primary);
  border-color: var(--wf-color-primary);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus-visible {
  background: #1e3a8a;
  border-color: #1e3a8a;
  color: #fff;
}

.btn-secondary {
  background: var(--wf-gray-100);
  border-color: var(--wf-border);
  color: var(--wf-text);
}
.btn-secondary:hover {
  background: var(--wf-gray-200);
  border-color: var(--wf-border-hover);
  color: var(--wf-text);
}

.btn-outline-primary {
  background: transparent;
  border-color: var(--wf-color-primary);
  color: var(--wf-color-primary);
}
.btn-outline-primary:hover {
  background: var(--wf-blue-50);
  border-color: var(--wf-color-primary);
  color: var(--wf-color-primary);
}

.btn-outline-secondary {
  background: transparent;
  border-color: var(--wf-border);
  color: var(--wf-text-secondary);
}
.btn-outline-secondary:hover {
  background: var(--wf-gray-100);
  border-color: var(--wf-border-hover);
  color: var(--wf-text);
}

.btn-outline-danger {
  background: transparent;
  border-color: var(--wf-color-danger);
  color: var(--wf-color-danger);
}
.btn-outline-danger:hover { background: #fef2f2; }

.btn-danger {
  background: var(--wf-color-danger);
  border-color: var(--wf-color-danger);
  color: #fff;
}
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; }

.btn-success {
  background: var(--wf-color-success);
  border-color: var(--wf-color-success);
  color: #fff;
}
.btn-success:hover { background: #15803d; border-color: #15803d; }

.btn-link {
  color: var(--wf-color-primary);
  text-decoration: none;
  padding-left: 0;
  padding-right: 0;
  border-color: transparent;
  background: transparent;
}
.btn-link:hover { text-decoration: underline; color: var(--wf-blue-700); }

/* ── Focus ring — shared ─────────────────────────────────────── */
.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.2);
  outline: none;
}

/* ── Form controls ───────────────────────────────────────────── */
.form-control, .form-select {
  font-size: var(--wf-font-sm);
  border-color: var(--wf-border);
  border-radius: var(--wf-radius);
  background-color: #fff;
  color: var(--wf-text);
  box-shadow: none;
  padding: 0.375rem 0.625rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--wf-border-focus);
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.12);
}
.form-control:not(:focus):hover,
.form-select:not(:focus):hover {
  border-color: var(--wf-border-hover);
}
.form-control-sm, .form-select-sm {
  font-size: var(--wf-font-sm);
  padding: 0.25rem 0.5rem;
  border-radius: var(--wf-radius-sm);
}
.form-control::placeholder, .form-select::placeholder { color: var(--wf-text-muted); }

.form-label {
  font-size: var(--wf-font-sm);
  font-weight: 500;
  color: var(--wf-text-secondary);
  margin-bottom: 0.25rem;
}
.form-text { font-size: var(--wf-font-xs); color: var(--wf-text-muted); }

.input-group-text {
  border-color: var(--wf-border);
  background-color: var(--wf-gray-50);
  color: var(--wf-text-muted);
  font-size: var(--wf-font-sm);
}

/* ── Cards ───────────────────────────────────────────────────── */
.card {
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius-lg);
  box-shadow: var(--wf-shadow-xs);
  background-color: var(--wf-surface);
  transition: none;
}
.card:hover { box-shadow: var(--wf-shadow-xs); }

.card-header {
  background-color: var(--wf-surface);
  border-bottom: 1px solid var(--wf-border);
  padding: 0.75rem 1rem;
  font-size: var(--wf-font-sm);
  font-weight: 600;
  color: var(--wf-text);
}
.card-body   { padding: 1rem; }
.card-footer {
  background-color: var(--wf-surface);
  border-top: 1px solid var(--wf-border);
  padding: 0.75rem 1rem;
}

.shadow-sm { box-shadow: var(--wf-shadow-xs) !important; }

/* ── Tables ──────────────────────────────────────────────────── */
.table {
  font-size: var(--wf-font-sm);
  color: var(--wf-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--wf-gray-100);
}
.table thead th, .table thead td {
  font-size: var(--wf-font-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  color: var(--wf-text-secondary);
  background-color: var(--wf-gray-100);
  border-bottom: 1px solid var(--wf-border);
  padding: 0.5rem 0.875rem;
  white-space: nowrap;
}
.table tbody td {
  padding: 0.55rem 0.875rem;
  vertical-align: middle;
}
.table-hover > tbody > tr:hover > * {
  background-color: var(--wf-blue-50);
  --bs-table-accent-bg: var(--wf-blue-50);
}
.table-light { --bs-table-bg: var(--wf-gray-50); }

/* ── Badges ──────────────────────────────────────────────────── */
.badge {
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: var(--wf-radius-sm);
  padding: 0.275em 0.55em;
  letter-spacing: 0.03em;
}
.text-bg-success { background-color: #dcfce7 !important; color: #166534 !important; }
.text-bg-danger  { background-color: #fee2e2 !important; color: #991b1b !important; }
.text-bg-warning { background-color: #fef3c7 !important; color: #92400e !important; }
.text-bg-primary { background-color: var(--wf-blue-100) !important; color: #1e40af !important; }
.text-bg-secondary { background-color: var(--wf-gray-200) !important; color: var(--wf-gray-700) !important; }

.badge.bg-info { color: #134e4a; }

/* ── Semantic badge system ─────────────────────────────────────── */
/*
   Badge types:
   - badge-count  : numeric counts (e.g. "5 vendors", "3 proposals")
   - badge-status-*: status indicators

   Status colors:
   - badge-status-success : positive/complete (accepted, published, active)
   - badge-status-warning : attention needed (pending, in progress)
   - badge-status-danger  : critical (rejected, expired, cancelled)
   - badge-status-info   : informational (submitted, viewed, sent)
   - badge-status-neutral: secondary/internal (private, draft, not applicable)
*/

.badge-count {
    background-color: var(--wf-gray-100) !important;
    color: var(--wf-gray-700) !important;
    font-size: 0.7rem;
    font-weight: 600;
}

.badge-status-success {
    background-color: #dcfce7 !important;
    color: #166534 !important;
}

.badge-status-warning {
    background-color: #fef3c7 !important;
    color: #92400e !important;
}

.badge-status-danger {
    background-color: #fee2e2 !important;
    color: #991b1b !important;
}

.badge-status-info {
    background-color: #cffafe !important;
    color: #134e4a !important;
}

.badge-status-neutral {
    background-color: var(--wf-gray-200) !important;
    color: var(--wf-gray-700) !important;
}

/* Aliases for common patterns */
.badge-published,
.badge-accepted,
.badge-active { background-color: #dcfce7 !important; color: #166534 !important; }

.badge-pending,
.badge-in-progress { background-color: #fef3c7 !important; color: #92400e !important; }

.badge-rejected,
.badge-expired,
.badge-cancelled { background-color: #fee2e2 !important; color: #991b1b !important; }

.badge-submitted,
.badge-viewed,
.badge-sent { background-color: #cffafe !important; color: #134e4a !important; }

.badge-private,
.badge-draft,
.badge-na { background-color: var(--wf-gray-200) !important; color: var(--wf-gray-700) !important; }

/* ── Alerts ──────────────────────────────────────────────────── */
.alert {
  font-size: var(--wf-font-sm);
  border-radius: var(--wf-radius);
  border-left-width: 3px;
}
.alert-success {
  background-color: #f0fdf4;
  border-color: #86efac;
  color: #166534;
}
.alert-danger {
  background-color: #fef2f2;
  border-color: #fca5a5;
  color: #991b1b;
}
.alert-warning {
  background-color: #fffbeb;
  border-color: #fcd34d;
  color: #92400e;
}
.alert-info {
  background-color: var(--wf-blue-50);
  border-color: #93c5fd;
  color: #1e40af;
}

/* ── Listing cell primitives ─────────────────────────────────────
   Shared by every listing screen so a row looks the same everywhere.
   These live here, not in a per-page .razor.css, because they encode
   the shared reading hierarchy rather than one screen's layout.
   ───────────────────────────────────────────────────────────────── */

/* The value the reader is looking for. */
.wf-cell-primary {
  display: block;
  color: var(--wf-text);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

a.wf-cell-primary:hover,
a.wf-cell-primary:focus {
  color: var(--wf-color-primary);
  text-decoration: underline;
}

.wf-table__row--navigable:hover a.wf-cell-primary {
  text-decoration: underline;
}

/* Supporting detail under the primary value: identifiers, relative dates. */
.wf-cell-secondary {
  display: block;
  margin-top: 0.125rem;
  font-size: var(--wf-font-sm);
  color: var(--wf-text-subtle);
  font-weight: 400;
}

/* Digits that should line up column-wise. */
.wf-numeric { font-variant-numeric: tabular-nums; }

.wf-text-danger { color: var(--wf-color-danger) !important; }

/* A missing value is an absence, not the word "N/A". */
.wf-empty-value { color: var(--wf-text-placeholder); }

/* Counts: a zero should recede rather than shout. */
.wf-count {
  display: inline-block;
  min-width: 1.75rem;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background-color: var(--wf-blue-50);
  color: var(--wf-blue-800);
  font-size: var(--wf-font-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.wf-count--zero {
  background-color: transparent;
  color: var(--wf-text-placeholder);
  font-weight: 400;
}

/* Row actions stay out of the way until the row is hovered or focused. */
.wf-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.wf-row-actions .btn {
  opacity: 0;
  transition: opacity var(--wf-transition-fast);
}

tr:hover .wf-row-actions .btn,
tr:focus-within .wf-row-actions .btn,
.wf-row-actions .btn:focus-visible {
  opacity: 1;
}

.wf-row-actions__chevron {
  color: var(--wf-text-placeholder);
  opacity: 0;
  transform: translateX(-0.25rem);
  transition: opacity var(--wf-transition-fast), transform var(--wf-transition-fast);
}

tr:hover .wf-row-actions__chevron,
tr:focus-within .wf-row-actions__chevron {
  opacity: 1;
  transform: translateX(0);
}

/* A row that needs attention, e.g. past its due date. */
.wf-row-attention td:first-child {
  box-shadow: inset 3px 0 0 0 var(--wf-color-danger);
}

/* Touch devices have no hover, so affordances must always be visible. */
@media (hover: none) {
  .wf-row-actions .btn,
  .wf-row-actions__chevron {
    opacity: 1;
    transform: none;
  }
}

/* ── Typography ──────────────────────────────────────────────── */
.text-muted     { color: var(--wf-text-muted) !important; }
.text-secondary { color: var(--wf-text-secondary) !important; }
small, .small   { font-size: var(--wf-font-sm); }

.fs-xxs       { font-size: var(--wf-font-xxs) !important; }
.fs-xs-plus   { font-size: var(--wf-font-xs-plus) !important; }
.fs-sm-minus  { font-size: 0.8rem !important; }
.fs-base-plus { font-size: var(--wf-font-base-plus) !important; }
.text-pre-wrap { white-space: pre-wrap !important; }
.wf-min-width-250 { min-width: 250px !important; }
.wf-width-120 { width: 120px !important; }
.opacity-80 { opacity: 0.8 !important; }

/* ── Modal ───────────────────────────────────────────────────── */
.modal-content {
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius-xl);
  box-shadow: var(--wf-shadow);
}
.modal-header { border-bottom: 1px solid var(--wf-border); padding: 1rem 1.25rem; }
.modal-footer { border-top:    1px solid var(--wf-border); padding: 0.75rem 1.25rem; }

/* ── Dropdown ────────────────────────────────────────────────── */
.dropdown-menu {
  font-size: var(--wf-font-sm);
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius-lg);
  box-shadow: var(--wf-shadow);
  padding: 0.25rem;
}
.dropdown-item {
  border-radius: var(--wf-radius-sm);
  padding: 0.4rem 0.75rem;
  color: var(--wf-text);
}
.dropdown-item:hover { background-color: var(--wf-gray-100); }

/* ── Pagination ──────────────────────────────────────────────── */
.page-link {
  font-size: var(--wf-font-sm);
  color: var(--wf-text-secondary);
  border-color: var(--wf-border);
  padding: 0.3rem 0.6rem;
}
.page-link:hover {
  color: var(--wf-color-primary);
  background-color: var(--wf-gray-50);
  border-color: var(--wf-border);
}
.page-item.active .page-link {
  background-color: var(--wf-color-primary);
  border-color: var(--wf-color-primary);
}

/* ── Inline button system (wf-btn-*) ─────────────────────────── */
.wf-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.6rem;
  border-radius: var(--wf-radius);
  border: 1px solid var(--wf-border);
  background: var(--wf-surface);
  color: var(--wf-text);
  font-size: var(--wf-font-sm);
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}
.wf-btn:hover { filter: brightness(0.97); text-decoration: none; }
.wf-btn:active { transform: translateY(1px); }
.wf-btn-sm { padding: 0.25rem 0.5rem; font-size: var(--wf-font-xs); }
.wf-btn-primary  { background: var(--wf-color-primary);  color: #fff; border-color: var(--wf-color-primary); }
.wf-btn-success  { background: var(--wf-color-success);  color: #fff; border-color: var(--wf-color-success); }
.wf-btn-outline-primary   { background: transparent; color: var(--wf-color-primary);   border-color: var(--wf-color-primary); }
.wf-btn-outline-primary:hover { background: var(--wf-blue-50); }
.wf-btn-outline-secondary { background: transparent; color: var(--wf-text-secondary); border-color: var(--wf-border); }
.wf-btn-outline-secondary:hover { background: var(--wf-gray-100); }
.wf-btn-link { background: transparent; border-color: transparent; padding-left: 0; padding-right: 0; }
.wf-btn-link:hover { text-decoration: underline; filter: none; }

/* ============================================================
   Header icon buttons (navbar notification / email icons)
   ============================================================ */
.hdr-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    color: #6b7280;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.hdr-icon-btn:hover {
    background: #f3f4f6;
    color: #111827;
    text-decoration: none;
}
.hdr-icon-btn .bi { font-size: 1.125rem; }
.hdr-icon-badge {
    position: absolute;
    top: 0.1rem;
    right: 0.1rem;
    border-radius: 999px;
    font-size: 0.58rem;
    font-weight: 700;
    min-width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.2rem;
    line-height: 1;
    border: 1.5px solid var(--wf-surface);
    background: var(--wf-amber-400);
    color: var(--wf-gray-900);
    pointer-events: none;
}

/* ============================================================
   WattFarmer component primitives
   Use semantic variants and shared sizes instead of page-level
   colors or dimensions. Theme customization belongs in tokens.
   ============================================================ */

.wf-control--small {
  --wf-component-height: var(--wf-control-height-sm);
  --wf-component-padding-inline: var(--wf-control-padding-sm);
  --wf-component-font-size: var(--wf-font-sm);
}

.wf-control--medium {
  --wf-component-height: var(--wf-control-height-md);
  --wf-component-padding-inline: var(--wf-control-padding-md);
  --wf-component-font-size: var(--wf-font-base);
}

.wf-control--large {
  --wf-component-height: var(--wf-control-height-lg);
  --wf-component-padding-inline: var(--wf-control-padding-lg);
  --wf-component-font-size: var(--wf-font-md);
}

/* ── Form stack ──────────────────────────────────────────────────────
   Standard vertical rhythm for forms built from wf-field controls.
   Apply to the <EditForm>/<form> element (global class — scoped CSS
   rules never match component-rendered elements like EditForm). */
.wf-form {
  display: grid;
  gap: 0.9rem;
}

.wf-field { display: block; }

.wf-field__label {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--wf-text);
  font-size: var(--wf-font-sm);
  font-weight: 600;
  line-height: 1.35;
}

.wf-field__required { color: var(--wf-color-danger); }

.wf-input-frame {
  position: relative;
  display: flex;
  min-height: var(--wf-component-height, var(--wf-control-height-md));
  overflow: hidden;
  align-items: stretch;
  border: 1px solid var(--wf-border-hover);
  border-radius: var(--wf-radius);
  background: var(--wf-surface);
  transition:
    border-color var(--wf-transition-fast),
    box-shadow var(--wf-transition-fast);
}

.wf-input-frame:hover { border-color: var(--wf-gray-400); }

.wf-input-frame:focus-within {
  border-color: var(--wf-border-focus);
  box-shadow: var(--wf-focus-ring);
}

.wf-input-frame:has(.wf-input.invalid) {
  border-color: var(--wf-color-danger);
}

.wf-input-frame:has(.wf-input.invalid):focus-within {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wf-color-danger) 15%, transparent);
}

.wf-input {
  min-width: 0;
  flex: 1 1 auto;
  min-height: calc(var(--wf-component-height, var(--wf-control-height-md)) - 2px);
  padding: 0.5rem var(--wf-component-padding-inline, var(--wf-control-padding-md));
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--wf-text);
  font: inherit;
  font-size: var(--wf-component-font-size, var(--wf-font-base));
  line-height: 1.35;
}

.wf-input.valid.modified:not([type=checkbox]),
.wf-input.invalid {
  outline: 0;
}

.wf-input::placeholder { color: var(--wf-text-muted); }
.wf-input:disabled { cursor: not-allowed; background: var(--wf-gray-50); }

.wf-input-frame--with-action .wf-input {
  padding-inline-end: calc(var(--wf-component-height, var(--wf-control-height-md)) + 0.25rem);
}

.wf-input-frame__action {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  display: inline-grid;
  width: var(--wf-component-height, var(--wf-control-height-md));
  min-width: var(--wf-component-height, var(--wf-control-height-md));
  place-items: center;
  border: 0;
  border-inline-start: 1px solid var(--wf-border);
  background: var(--wf-surface);
  color: var(--wf-text-secondary);
  cursor: pointer;
}

.wf-input-frame__action:hover { background: var(--wf-gray-50); color: var(--wf-text); }
.wf-input-frame__action:focus-visible { outline: 2px solid var(--wf-color-primary); outline-offset: -3px; }

.wf-field__help,
.wf-field__error {
  display: block;
  margin-top: 0.3rem;
  font-size: var(--wf-font-xs-plus);
  line-height: 1.45;
}

.wf-field__help { color: var(--wf-text-muted); }
.wf-field__error { color: var(--wf-red-700); }
.wf-field__error:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .wf-input-frame { transition: none; }
}