/* ==========================================================================
   Empovio — Shared Form, Drawer & Modal System
   Dashboard Part G. Every create/edit screen in the product uses this.
   Only the fields change — never the layout, the validation or the buttons.

   Builds on .input and .btn from components.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Form layout — grouped sections, two columns on desktop
   -------------------------------------------------------------------------- */

.form {
  display: flex;
  flex-direction: column;
}

/* Sections are <fieldset> elements for grouping semantics, so the browser's
   default border and padding have to be cleared before ours apply. */
.form__section {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.form__section + .form__section {
  margin-top: var(--sp-32);
  padding-top: var(--sp-32);
  border-top: 1px solid var(--border);
}

/* A <legend> is not a normal block by default — make it one. */
.form__section-head {
  display: block;
  width: 100%;
  float: none;
  padding: 0;
  margin-bottom: var(--sp-16);
}

.form__section-title {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.form__section-desc {
  margin-top: 2px;
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
  line-height: var(--lh-snug);
}

.form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-16) var(--sp-24);
}

/* A field that needs the full row (textarea, upload, long text). */
.form__grid > .field--full {
  grid-column: 1 / -1;
}

/* --------------------------------------------------------------------------
   Field — label always visible, never placeholder-only (Part G)
   -------------------------------------------------------------------------- */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.field__label {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
}

.field__required {
  color: var(--danger-600);
  margin-left: 2px;
}

.field__optional {
  margin-left: var(--sp-8);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  color: var(--text-disabled);
}

.field__help {
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
  line-height: var(--lh-snug);
}

/* Validation messages sit below the field and are linked to it by id. */
.field__message {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
  animation: fade-in var(--t-micro) var(--ease-out) both;
}

.field__message svg {
  flex: none;
  margin-top: 1px;
}

.field--error .field__message {
  color: var(--danger-700);
}

.field--success .field__message {
  color: var(--success-700);
}

/* Errors show only after the user has interacted (Part G: empty fields). */
.field--error .input,
.field--error .select,
.field--error .textarea {
  border-color: var(--danger-500);
}

.field--error .input:focus,
.field--error .select:focus,
.field--error .textarea:focus {
  box-shadow: 0 0 0 3px var(--danger-100);
}

.field--success .input,
.field--success .select,
.field--success .textarea {
  border-color: var(--success-500);
}

.field--success .input:focus {
  box-shadow: 0 0 0 3px var(--success-100);
}

/* Input control variants -------------------------------------------------- */

.input:disabled,
.select:disabled,
.textarea:disabled {
  background-color: var(--n-50);
  color: var(--text-disabled);
  cursor: not-allowed;
}

.input[readonly] {
  background-color: var(--n-25);
  color: var(--text-secondary);
}

/* 16px to match .input and .textarea: a select stacked with them in the same
   form column was starting its text 4px further left than its neighbours. */
.select {
  width: 100%;
  height: 44px;
  padding-inline: var(--sp-16) var(--sp-32);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-input);
  background-color: var(--n-0);
  font-size: var(--fs-small);
  color: var(--text-primary);
  cursor: pointer;
  appearance: none;
  /* Chevron drawn with a gradient-free inline SVG so there is no extra request. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2378818f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-12) center;
  background-size: 16px;
  transition: border-color var(--t-hover) var(--ease),
    box-shadow var(--t-hover) var(--ease);
}

.select:focus {
  outline: none;
  border-color: var(--primary-600);
  box-shadow: 0 0 0 3px var(--primary-100);
}

.textarea {
  width: 100%;
  min-height: 96px;
  padding: var(--sp-12) var(--sp-16);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-input);
  background-color: var(--n-0);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text-primary);
  resize: vertical;
  transition: border-color var(--t-hover) var(--ease),
    box-shadow var(--t-hover) var(--ease);
}

.textarea:focus {
  outline: none;
  border-color: var(--primary-600);
  box-shadow: 0 0 0 3px var(--primary-100);
}

.textarea::placeholder,
.select::placeholder {
  color: var(--text-disabled);
}

/* Input with a leading or trailing affix (currency, percentage, units). */
.field__control {
  position: relative;
  display: flex;
  align-items: center;
}

.field__affix {
  position: absolute;
  font-size: var(--fs-small);
  color: var(--text-tertiary);
  pointer-events: none;
}

/* 16px, the same inset as the text in every other control, so a currency sign
   lines up with the labels and values in the fields above and below it. */
.field__affix--lead {
  left: var(--sp-16);
}

.field__affix--trail {
  right: var(--sp-16);
}

.field__control--lead .input {
  padding-left: var(--sp-32);
}

.field__control--trail .input {
  padding-right: var(--sp-32);
}

/* Choice controls --------------------------------------------------------- */

.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-12);
  min-height: 44px;
  padding: var(--sp-8) 0;
  cursor: pointer;
}

.choice__body {
  min-width: 0;
}

.choice__title {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}

.choice__desc {
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
  line-height: var(--lh-snug);
}

.radio {
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background-color: var(--n-0);
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  flex: none;
  transition: border-color var(--t-micro) var(--ease);
}

.radio::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--n-0);
  transform: scale(0);
  transition: transform var(--t-micro) var(--ease);
}

.radio:checked {
  border-color: var(--primary-600);
  background-color: var(--primary-600);
}

.radio:checked::before {
  transform: scale(1);
}

.toggle {
  appearance: none;
  position: relative;
  width: 40px;
  height: 24px;
  flex: none;
  border-radius: var(--r-pill);
  background-color: var(--n-300);
  cursor: pointer;
  transition: background-color var(--t-hover) var(--ease);
}

.toggle::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--n-0);
  box-shadow: var(--shadow-1);
  transition: transform var(--t-hover) var(--ease);
}

.toggle:checked {
  background-color: var(--primary-600);
}

.toggle:checked::before {
  transform: translateX(16px);
}

/* File upload — drag & drop, browse, preview, remove ----------------------- */

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  padding: var(--sp-24);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-input);
  background-color: var(--n-25);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--t-hover) var(--ease),
    background-color var(--t-hover) var(--ease);
}

.dropzone:hover,
.dropzone.is-dragging {
  border-color: var(--primary-500);
  background-color: var(--primary-25);
}

.dropzone__title {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}

.dropzone__hint {
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
}

.file-item {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-12);
  border: 1px solid var(--border);
  border-radius: var(--r-button);
  background-color: var(--n-0);
}

.file-item__body {
  flex: 1;
  min-width: 0;
}

.file-item__name {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-item__meta {
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
}

/* --------------------------------------------------------------------------
   Form footer — buttons stay reachable on long forms
   -------------------------------------------------------------------------- */

.form__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-12);
  margin-top: var(--sp-32);
  padding-top: var(--sp-24);
  border-top: 1px solid var(--border);
}

.form__foot-note {
  margin-right: auto;
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Autosave / unsaved-change status. */
.form__status--saved {
  color: var(--success-700);
}

.form__status--unsaved {
  color: var(--warning-700);
}

/* --------------------------------------------------------------------------
   Stepper — multi-step wizards (Create Camp, onboarding)
   -------------------------------------------------------------------------- */

.stepper {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: var(--sp-4);
}

.stepper::-webkit-scrollbar {
  display: none;
}

.step {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  flex: none;
  font-size: var(--fs-small);
  color: var(--text-tertiary);
}

.step__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  flex: none;
}

.step.is-current {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}

.step.is-current .step__index {
  border-color: var(--primary-600);
  background-color: var(--primary-600);
  color: var(--n-0);
}

.step.is-done {
  color: var(--text-secondary);
}

.step.is-done .step__index {
  border-color: var(--success-600);
  background-color: var(--success-600);
  color: var(--n-0);
}

.step__rail {
  width: 32px;
  height: 1px;
  background-color: var(--border);
  flex: none;
}

/* --------------------------------------------------------------------------
   Drawer — 560px, slides from the right, background stays visible (Part G)
   -------------------------------------------------------------------------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background-color: rgba(19, 22, 28, 0.4);
  animation: fade-in var(--t-hover) var(--ease-out) both;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 101;
  width: 560px;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background-color: var(--n-0);
  box-shadow: var(--shadow-3);
  animation: drawer-in var(--t-drawer) var(--ease-out) both;
}

@keyframes drawer-in {
  from {
    transform: translateX(100%);
  }
  to {
    transform: none;
  }
}

.drawer__head,
.modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-16);
  padding: var(--sp-24);
  border-bottom: 1px solid var(--border);
  flex: none;
}

.drawer__title,
.modal__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-heading);
}

.drawer__desc,
.modal__desc {
  margin-top: var(--sp-4);
  font-size: var(--fs-small);
  color: var(--text-secondary);
  line-height: var(--lh-snug);
}

.drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-24);
}

.drawer__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-12);
  padding: var(--sp-16) var(--sp-24);
  border-top: 1px solid var(--border);
  background-color: var(--n-25);
  flex: none;
}

/* Inside a drawer the form is single column — 560px is not two-column width. */
.drawer .form__grid {
  grid-template-columns: minmax(0, 1fr);
}

.drawer .form__foot {
  display: none; /* the drawer supplies its own sticky footer */
}

/* --------------------------------------------------------------------------
   Modal — confirmation only. Long forms belong in drawers or pages.
   -------------------------------------------------------------------------- */

.modal-scrim {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-24);
  background-color: rgba(19, 22, 28, 0.4);
  animation: fade-in var(--t-hover) var(--ease-out) both;
}

.modal {
  width: 100%;
  max-width: 460px;
  border-radius: var(--r-modal);
  background-color: var(--n-0);
  box-shadow: var(--shadow-3);
  animation: modal-in 200ms var(--ease-out) both;
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.modal__head {
  border-bottom: 0;
  padding-bottom: 0;
}

.modal__body {
  padding: var(--sp-16) var(--sp-24) 0;
  font-size: var(--fs-small);
  color: var(--text-secondary);
  line-height: var(--lh-body);
}

.modal__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-12);
  padding: var(--sp-24);
}

/* Destructive dialogs read danger before the user clicks anything. */
.modal__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex: none;
}

.modal__icon--danger {
  background-color: var(--danger-50);
  color: var(--danger-600);
}

.modal__icon--warning {
  background-color: var(--warning-50);
  color: var(--warning-600);
}

.modal__icon--info {
  background-color: var(--info-50);
  color: var(--info-600);
}

/* --------------------------------------------------------------------------
   Responsive — Part I
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  /* Tablet: full-height drawer, mixed form layout. */
  .drawer {
    width: 480px;
  }
}

@media (max-width: 767px) {
  .form__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Mobile: full-screen drawer, full-width buttons, sticky save. */
  .drawer {
    width: 100vw;
  }

  .drawer__foot,
  .modal__foot,
  .form__foot {
    flex-wrap: wrap;
  }

  .drawer__foot .btn,
  .modal__foot .btn,
  .form__foot .btn {
    flex: 1;
  }

  .form__foot {
    position: sticky;
    bottom: 0;
    background-color: var(--surface-page);
    padding-bottom: var(--sp-16);
    margin-bottom: calc(var(--sp-16) * -1);
  }

  .form__foot-note {
    width: 100%;
    margin-right: 0;
    margin-bottom: var(--sp-8);
  }

  /* Modals become a bottom sheet. */
  .modal-scrim {
    align-items: flex-end;
    padding: 0;
  }

  .modal {
    max-width: none;
    border-radius: var(--r-modal) var(--r-modal) 0 0;
    animation: sheet-in var(--t-modal) var(--ease-out) both;
  }

  @keyframes sheet-in {
    from {
      transform: translateY(16px);
      opacity: 0;
    }
    to {
      transform: none;
      opacity: 1;
    }
  }
}