/* Kivo modal chrome (replaces the old .modal-* rules previously in assets/app.css)
   Reuses the app-wide design tokens defined in assets/boot.css / layout <style> blocks
   (--c-primary-*, --c-background-*, --c-border, --c-text-*, --c-success/--c-error)
   so it automatically follows the current theme (light/dark, per-role palette). */

.modal.is-dark-overlay {
  background: var(--c-text-primary-70);
}

/* Simple red caption instead of the old yellow badge (was inlined in
   _MainLayout.cshtml, only applied there - now global via this file).
   .error is jQuery Validate's own default errorClass (used by forms that
   call $.validate() directly instead of going through unobtrusive validation)
   - same plain-caption look, no separate badge chrome. */
.field-validation-error,
.error {
  display: block;
  margin-top: 4px;
  padding: 0;
  background: none;
  border-radius: 0;
  color: var(--c-error);
  font-size: 11px;
  font-weight: 600;
  max-width: 100%;
}

/* jquery.validate.unobtrusive adds this class to the invalid input itself -
   app.css never styled it, so invalid fields had no visual cue besides the
   caption below them. */
input.input-validation-error,
select.input-validation-error,
textarea.input-validation-error {
  border-color: var(--c-error) !important;
  box-shadow: 0 0 0 2px var(--c-error-20) !important;
}

/* Add ".is-required" to a field's Class param (alongside the usual xs-*/md-*
   tokens) to mark it required; only apply it where the model actually has
   [Required] - don't add it blindly to every field. */
.is-required > label::after {
  content: " *";
  color: var(--c-error);
  font-weight: 700;
}

.modal-box {
  border-radius: 18px;
  border: 1px solid var(--c-border);
  box-shadow: 0 24px 64px var(--c-text-primary-30);
}

.modal-header {
  gap: 14px;
  padding: 16px 24px;
  background: var(--c-background-dark);
}

/* .modal-header-text can optionally hold a .modal-header-icon badge followed
   by the title/subtitle block, e.g. via ModalModel.Header raw html; falls back
   to a plain single-item flex row when only a Title/h2 is provided. */
.modal-header-text {
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal-header-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--c-primary-light-10);
  color: var(--c-primary-dark);
}

.modal-header-icon svg {
  width: 20px;
  height: 20px;
}

.modal-header-text h2 {
  margin: 0 0 3px;
  font-size: 17px;
  letter-spacing: -0.02em;
}

.modal-header-text p {
  margin: 0;
  color: var(--c-text-secondary);
  font-size: 11px;
}

.modal-header-close {
  border-radius: 9px;
  padding: 6px;
  transition: background 0.12s ease, color 0.12s ease;
}

.modal-header-close:hover {
  background: var(--c-background-dark);
  color: var(--c-text-primary);
}

.modal-content {
  background: var(--c-background-dark);
  padding: 18px 24px;
}

.modal-footer {
  padding: 14px 24px;
  background: var(--c-background-dark);
}

/* Reusable "form section" card used to group related fields inside a modal or
   inline edit form (account add/edit, and any other multi-section form). */
.kivo-form-section {
  padding: 16px;
  margin-bottom: 14px;
  background: var(--c-background-light);
  border: 1px solid var(--c-border);
  border-radius: 14px;
}

.kivo-form-section:last-child {
  margin-bottom: 0;
}

.kivo-form-section__head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 14px;
}

.kivo-form-section__icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--c-primary-light-10);
  color: var(--c-primary-dark);
}

.kivo-form-section__icon svg {
  width: 16px;
  height: 16px;
}

.kivo-form-section__title h3 {
  margin: 0 0 2px;
  font-size: 12px;
  color: var(--c-text-primary);
}

.kivo-form-section__title p {
  margin: 0;
  color: var(--c-text-secondary);
  font-size: 9px;
}