:root {
  --bs-primary: var(--teal-700);
  --bs-primary-rgb: 21, 69, 95;
  --bs-secondary: var(--gold-500);
  --bs-secondary-rgb: 183, 135, 58;
  --bs-success: var(--leaf-600);
  --bs-danger:  var(--henna-500);
  --bs-warning: var(--saffron-500);
  --bs-info:    var(--teal-500);
  --bs-body-color: var(--ink-900);
  --bs-body-color-rgb: 27, 37, 48;
  --bs-body-bg: var(--surface-page);
  --bs-body-bg-rgb: 251, 246, 236;
  --bs-border-color: var(--border-default);
  --bs-border-color-translucent: rgba(14, 43, 60, 0.12);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-link-color: var(--teal-700);
  --bs-link-hover-color: var(--teal-900);
  --bs-font-sans-serif: var(--font-body);
  --bs-body-font-family: var(--font-body);
  --bs-font-monospace: var(--font-mono);
}

.btn {
  --bs-btn-padding-x: 18px;
  --bs-btn-padding-y: 9px;
  --bs-btn-border-radius: var(--radius-sm);
  --bs-btn-font-weight: 500;
  font-family: var(--font-body);
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn-lg { --bs-btn-padding-x: 22px; --bs-btn-padding-y: 12px; }
.btn-sm { --bs-btn-padding-x: 12px; --bs-btn-padding-y: 5px; font-size: var(--fs-body-sm); }
.btn .ph,
.btn .ph-fill,
.btn .ph-bold,
.btn .ph-duotone { font-size: var(--icon-md); line-height: 1; }

.btn-primary {
  --bs-btn-bg: var(--teal-900);
  --bs-btn-border-color: var(--teal-900);
  --bs-btn-hover-bg: var(--teal-700);
  --bs-btn-hover-border-color: var(--teal-700);
  --bs-btn-active-bg: var(--teal-700);
  --bs-btn-active-border-color: var(--teal-700);
  --bs-btn-disabled-bg: var(--mist-300);
  --bs-btn-disabled-border-color: var(--mist-300);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { box-shadow: var(--shadow-md); }

.btn-outline-primary {
  --bs-btn-color: var(--teal-700);
  --bs-btn-border-color: var(--gold-400);
  --bs-btn-hover-bg: var(--ivory-200);
  --bs-btn-hover-color: var(--teal-900);
  --bs-btn-hover-border-color: var(--gold-500);
  --bs-btn-active-bg: var(--gold-50);
  --bs-btn-active-color: var(--teal-900);
  background: var(--surface-card);
}

.btn-secondary {
  --bs-btn-bg: var(--gold-500);
  --bs-btn-border-color: var(--gold-500);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--gold-700);
  --bs-btn-hover-border-color: var(--gold-700);
  --bs-btn-hover-color: #fff;
}

.btn-ghost {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-color: var(--teal-700);
  --bs-btn-hover-bg: var(--ivory-200);
  --bs-btn-hover-color: var(--teal-900);
}

.btn-danger {
  --bs-btn-bg: transparent;
  --bs-btn-color: var(--henna-500);
  --bs-btn-border-color: var(--henna-500);
  --bs-btn-hover-bg: var(--henna-500);
  --bs-btn-hover-color: #fff;
}

.form-control, .form-select {
  border-radius: var(--radius-sm);
  border-color: var(--border-default);
  background-color: var(--surface-card);
  color: var(--ink-900);
  padding: 10px 14px;
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.form-control {
  background-image: none;
}
.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231b2530' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px 10px;
  padding-right: 36px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.form-select.form-select-sm {
  background-position: right 10px center;
  background-size: 12px 9px;
  padding-right: 30px;
}
.form-control:focus, .form-select:focus {
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px rgba(30, 100, 131, 0.15);
}
.form-control::placeholder { color: var(--ink-300); }
.form-label { font-weight: 500; color: var(--ink-700); margin-bottom: 6px; font-size: var(--fs-body-sm); }
.form-text { color: var(--ink-500); font-size: var(--fs-caption); }

.wv-required {
  margin-left: 2px;
  color: var(--henna-500);
}

/* Inline field validation — the look used by every add/edit modal in v2.
 * Bootstrap's `.is-invalid` rule only styles `.form-control` elements, but our
 * forms use bare inputs/selects/textareas inside `.wv-form__field`. These
 * rules ensure the red border, warning icon, and inline message render the
 * same on every form (see assets/js/common/form-errors.js). */
.wv-form__field input.is-invalid,
.wv-form__field select.is-invalid,
.wv-form__field textarea.is-invalid,
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--henna-500);
  background-color: var(--henna-100);
}
.wv-form__field input[type="text"].is-invalid,
.wv-form__field input[type="email"].is-invalid,
.wv-form__field input[type="tel"].is-invalid,
.wv-form__field input[type="number"].is-invalid,
.wv-form__field input[type="password"].is-invalid,
.wv-form__field input[type="search"].is-invalid,
.wv-form__field input[type="url"].is-invalid,
.wv-form__field input:not([type]).is-invalid,
.wv-form__field textarea.is-invalid {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23a0432d'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23a0432d' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px 14px;
  padding-right: 36px;
}
.wv-form__field input.is-invalid:focus,
.wv-form__field select.is-invalid:focus,
.wv-form__field textarea.is-invalid:focus,
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  border-color: var(--henna-500);
  outline: 2px solid var(--henna-300, var(--henna-500));
  outline-offset: 1px;
  box-shadow: 0 0 0 3px rgba(160, 67, 45, 0.15);
}
.wv-form__field .invalid-feedback,
.invalid-feedback.wv-field-feedback {
  display: none;
  margin-top: 4px;
  font-size: var(--fs-caption);
  color: var(--henna-700);
}
.wv-form__field .is-invalid ~ .invalid-feedback,
.is-invalid ~ .invalid-feedback.wv-field-feedback {
  display: block;
}

.input-group-text {
  background: var(--ivory-200);
  border-color: var(--border-default);
  color: var(--ink-600);
}

.form-check-input {
  border-color: var(--border-strong);
}
.form-check-input:checked { background-color: var(--teal-700); border-color: var(--teal-700); }

.modal-content {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  background: var(--surface-card);
  box-shadow: var(--shadow-lg);
}

.dropdown-menu {
  border-radius: var(--radius-md);
  border-color: var(--border-default);
  box-shadow: var(--shadow-md);
  padding: 6px;
  background: var(--surface-card);
}
.dropdown-item {
  border-radius: var(--radius-xs);
  padding: 8px 12px;
  font-size: var(--fs-body-sm);
  color: var(--ink-700);
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--ivory-200); color: var(--ink-900); }

.nav-tabs {
  border-bottom-color: var(--border-default);
  gap: 4px;
}
.nav-tabs .nav-link {
  color: var(--ink-500);
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 14px;
  font-weight: 500;
  background: transparent;
}
.nav-tabs .nav-link:hover { color: var(--ink-900); border-bottom-color: var(--mist-300); }
.nav-tabs .nav-link.active {
  color: var(--teal-900);
  border-bottom-color: var(--gold-500);
  background: transparent;
}

.badge {
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: var(--radius-pill);
  padding: 4px 10px;
}

.progress {
  background: var(--mist-200);
  border-radius: var(--radius-pill);
  height: 8px;
  overflow: hidden;
}
.progress-bar {
  background: linear-gradient(90deg, var(--teal-500), var(--gold-500));
}

.table {
  --bs-table-bg: transparent;
  color: var(--ink-700);
}
.table thead th {
  background: var(--ivory-200);
  color: var(--ink-600);
  font-weight: 600;
  font-size: var(--fs-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-default);
  padding: 14px 16px;
}
.table tbody td {
  padding: 14px 16px;
  vertical-align: middle;
  border-bottom: 1px solid var(--border-subtle);
}
.table tbody tr:hover { background: var(--ivory-200); }

.alert {
  border-radius: var(--radius-md);
  border: 1px solid transparent;
}
.alert-info {
  background: var(--teal-50);
  border-color: var(--teal-100);
  color: var(--teal-900);
}
.alert-warning {
  background: var(--saffron-100);
  border-color: var(--gold-200);
  color: var(--henna-700);
}