/* ==========================================================================
   USER APPLICATION — FORMS
   File: /user_app/assets/css/forms.css

   Responsibility:
   - Form layout
   - Labels
   - Inputs
   - Selects
   - Textareas
   - Checkboxes / radios
   - Validation states
   - Help / hint / error messages
   - Input groups
   - Search inputs
   - File inputs
   - Form sections
   - Responsive form behavior

   CSS architecture:
   variables.css
        ↓
   reset.css
        ↓
   base.css
        ↓
   layout.css
        ↓
   header.css
   sidebar.css
   navigation.css
        ↓
   forms.css
        ↓
   buttons.css
   cards.css
   tables.css
   modal.css
   alerts.css
        ↓
   feature CSS
   responsive.css
   ========================================================================== */


/* ==========================================================================
   1. FORM ROOT
   ========================================================================== */

.form {
  width: 100%;
  min-width: 0;
}

.form--compact {
  --form-control-height: 2.5rem;
}

.form--large {
  --form-control-height: 3rem;
}

.form__group {
  width: 100%;
  min-width: 0;
}

.form__group + .form__group {
  margin-top: var(--space-5, 1.25rem);
}

.form__row {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: var(--space-5, 1.25rem);

  width: 100%;
}

.form__row--three {
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
}

.form__row--four {
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
}


/* ==========================================================================
   2. FORM SECTION
   ========================================================================== */

.form__section {
  width: 100%;

  padding: var(--space-6, 1.5rem) 0;

  border-top: 1px solid var(--color-border, #e2e8f0);
}

.form__section:first-child {
  padding-top: 0;
  border-top: 0;
}

.form__section:last-child {
  padding-bottom: 0;
}

.form__section-header {
  margin-bottom: var(--space-5, 1.25rem);
}

.form__section-title {
  margin: 0;

  color: var(--color-text-primary, #0f172a);

  font-size: var(--font-size-lg, 1.125rem);
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.4;
}

.form__section-description {
  max-width: 60rem;

  margin: var(--space-1, 0.25rem) 0 0;

  color: var(--color-text-muted, #64748b);

  font-size: var(--font-size-sm, 0.875rem);
  line-height: 1.55;
}


/* ==========================================================================
   3. FORM LABEL
   ========================================================================== */

.form__label {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;

  margin-bottom: var(--space-2, 0.5rem);

  color: var(--color-text-primary, #0f172a);

  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  line-height: 1.4;

  cursor: pointer;
}

.form__label--required::after,
.form__required {
  content: "*";

  color: var(--color-danger, #dc2626);

  font-weight: var(--font-weight-bold, 700);
}

.form__label--optional::after {
  content: "Optional";

  margin-left: 0.25rem;

  color: var(--color-text-muted, #64748b);

  font-size: var(--font-size-xs, 0.75rem);
  font-weight: var(--font-weight-normal, 400);
}


/* ==========================================================================
   4. FORM CONTROL BASE
   ========================================================================== */

.form__control,
.form input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
.form select,
.form textarea {
  display: block;

  width: 100%;
  min-width: 0;

  min-height: var(--form-control-height, 2.75rem);

  padding:
    0.625rem
    0.75rem;

  border:
    1px solid
    var(--color-input-border, var(--color-border, #cbd5e1));

  border-radius:
    var(--radius-md, 0.625rem);

  color:
    var(--color-input-text, var(--color-text-primary, #0f172a));

  background:
    var(--color-input-background, var(--color-surface, #ffffff));

  font-family: inherit;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-normal, 400);
  line-height: 1.5;

  outline: none;

  transition:
    border-color var(--transition-fast, 150ms ease),
    background-color var(--transition-fast, 150ms ease),
    box-shadow var(--transition-fast, 150ms ease),
    color var(--transition-fast, 150ms ease);
}

.form__control::placeholder,
.form input::placeholder,
.form textarea::placeholder {
  color: var(--color-text-placeholder, #94a3b8);
  opacity: 1;
}

.form__control:hover,
.form input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):hover,
.form select:hover,
.form textarea:hover {
  border-color:
    var(--color-input-border-hover, #94a3b8);
}

.form__control:focus,
.form input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus,
.form select:focus,
.form textarea:focus {
  border-color:
    var(--color-primary, #2563eb);

  box-shadow:
    0 0 0 3px
    var(--color-focus-ring, rgba(37, 99, 235, 0.16));
}


/* ==========================================================================
   5. TEXTAREA
   ========================================================================== */

.form textarea,
.form__textarea {
  min-height: 7rem;

  resize: vertical;

  line-height: 1.55;
}

.form__textarea--small {
  min-height: 5rem;
}

.form__textarea--large {
  min-height: 12rem;
}

.form__textarea--fixed {
  resize: none;
}


/* ==========================================================================
   6. SELECT
   ========================================================================== */

.form select,
.form__select {
  appearance: none;

  padding-right: 2.5rem;

  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);

  background-position:
    calc(100% - 1.05rem) 50%,
    calc(100% - 0.75rem) 50%;

  background-size:
    0.3rem 0.3rem,
    0.3rem 0.3rem;

  background-repeat: no-repeat;

  cursor: pointer;
}

.form select:disabled {
  cursor: not-allowed;
}


/* ==========================================================================
   7. MULTISELECT / LIST SELECT
   ========================================================================== */

.form select[multiple],
.form__select--multiple {
  min-height: 8rem;

  padding: 0.5rem;

  background-image: none;

  overflow-y: auto;
}

.form select[multiple] option {
  padding: 0.5rem 0.625rem;

  border-radius: var(--radius-sm, 0.375rem);
}


/* ==========================================================================
   8. INPUT SIZES
   ========================================================================== */

.form__control--sm {
  min-height: 2.375rem;

  padding:
    0.5rem
    0.625rem;

  font-size: var(--font-size-xs, 0.75rem);
}

.form__control--lg {
  min-height: 3rem;

  padding:
    0.75rem
    0.875rem;

  font-size: var(--font-size-base, 1rem);
}


/* ==========================================================================
   9. DISABLED / READONLY
   ========================================================================== */

.form__control:disabled,
.form input:disabled,
.form select:disabled,
.form textarea:disabled {
  color: var(--color-text-disabled, #94a3b8);

  background:
    var(--color-background-muted, #f1f5f9);

  border-color:
    var(--color-border, #e2e8f0);

  cursor: not-allowed;

  opacity: 0.75;
}

.form__control[readonly],
.form input[readonly],
.form textarea[readonly] {
  background:
    var(--color-background-muted, #f8fafc);

  cursor: default;
}


/* ==========================================================================
   10. HELP / HINT TEXT
   ========================================================================== */

.form__help {
  display: block;

  margin-top: var(--space-1, 0.25rem);

  color: var(--color-text-muted, #64748b);

  font-size: var(--font-size-xs, 0.75rem);
  line-height: 1.5;
}

.form__help--info {
  color: var(--color-info, #0284c7);
}

.form__help--success {
  color: var(--color-success, #16a34a);
}

.form__help--warning {
  color: var(--color-warning, #d97706);
}


/* ==========================================================================
   11. ERROR MESSAGE
   ========================================================================== */

.form__error {
  display: none;

  margin-top: var(--space-1, 0.25rem);

  color: var(--color-danger, #dc2626);

  font-size: var(--font-size-xs, 0.75rem);
  line-height: 1.5;
}

.form__group.is-invalid .form__error,
.form__group.has-error .form__error,
.form__error.is-visible {
  display: block;
}

.form__group.is-invalid .form__control,
.form__group.has-error .form__control,
.form__group.is-invalid input,
.form__group.has-error input,
.form__group.is-invalid select,
.form__group.has-error select,
.form__group.is-invalid textarea,
.form__group.has-error textarea,
.form__control.is-invalid,
.form__control[aria-invalid="true"] {
  border-color:
    var(--color-danger, #dc2626);
}

.form__group.is-invalid .form__control:focus,
.form__group.has-error .form__control:focus,
.form__control.is-invalid:focus,
.form__control[aria-invalid="true"]:focus {
  box-shadow:
    0 0 0 3px
    var(--color-danger-ring, rgba(220, 38, 38, 0.14));
}


/* ==========================================================================
   12. SUCCESS STATE
   ========================================================================== */

.form__group.is-valid .form__control,
.form__group.has-success .form__control,
.form__control.is-valid,
.form__control[aria-invalid="false"] {
  border-color:
    var(--color-success, #16a34a);
}

.form__group.is-valid .form__control:focus,
.form__group.has-success .form__control:focus,
.form__control.is-valid:focus {
  box-shadow:
    0 0 0 3px
    var(--color-success-ring, rgba(22, 163, 74, 0.14));
}

.form__success {
  display: block;

  margin-top: var(--space-1, 0.25rem);

  color: var(--color-success, #16a34a);

  font-size: var(--font-size-xs, 0.75rem);
  line-height: 1.5;
}


/* ==========================================================================
   13. INPUT WITH ICON
   ========================================================================== */

.form__field {
  position: relative;

  width: 100%;
}

.form__field--icon-left .form__control,
.form__field--icon-left input {
  padding-left: 2.5rem;
}

.form__field--icon-right .form__control,
.form__field--icon-right input {
  padding-right: 2.5rem;
}

.form__icon {
  position: absolute;

  top: 50%;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 1.125rem;
  height: 1.125rem;

  color: var(--color-text-muted, #64748b);

  pointer-events: none;

  transform: translateY(-50%);
}

.form__icon--left {
  left: 0.75rem;
}

.form__icon--right {
  right: 0.75rem;
}

.form__icon svg {
  width: 100%;
  height: 100%;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ==========================================================================
   14. INPUT GROUP
   ========================================================================== */

.form__input-group {
  display: flex;
  align-items: stretch;

  width: 100%;
}

.form__input-group > .form__control,
.form__input-group > input,
.form__input-group > select {
  position: relative;

  flex: 1 1 auto;

  min-width: 0;
}

.form__input-group > .form__control:not(:first-child),
.form__input-group > input:not(:first-child),
.form__input-group > select:not(:first-child) {
  margin-left: -1px;
}

.form__input-group > :first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.form__input-group > :last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.form__input-group > :not(:first-child):not(:last-child) {
  border-radius: 0;
}


/* ==========================================================================
   15. INPUT GROUP ADDON
   ========================================================================== */

.form__addon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  min-height: var(--form-control-height, 2.75rem);

  padding:
    0.625rem
    0.75rem;

  border:
    1px solid
    var(--color-border, #cbd5e1);

  color:
    var(--color-text-secondary, #475569);

  background:
    var(--color-background-muted, #f8fafc);

  font-size: var(--font-size-sm, 0.875rem);
  white-space: nowrap;
}


/* ==========================================================================
   16. SEARCH FIELD
   ========================================================================== */

.form__search {
  position: relative;

  width: 100%;
}

.form__search input {
  padding-right: 2.75rem;
}

.form__search-button {
  position: absolute;

  top: 50%;
  right: 0.375rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 2.125rem;
  height: 2.125rem;

  padding: 0;

  border: 0;
  border-radius: var(--radius-md, 0.625rem);

  color: var(--color-text-muted, #64748b);
  background: transparent;

  cursor: pointer;

  transform: translateY(-50%);

  transition:
    color var(--transition-fast, 150ms ease),
    background-color var(--transition-fast, 150ms ease);
}

.form__search-button:hover {
  color: var(--color-primary, #2563eb);
  background: var(--color-primary-soft, rgba(37, 99, 235, 0.08));
}

.form__search-button:focus-visible {
  outline: none;

  box-shadow:
    0 0 0 3px
    var(--color-focus-ring, rgba(37, 99, 235, 0.16));
}


/* ==========================================================================
   17. CHECKBOX / RADIO
   ========================================================================== */

.form__choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2, 0.5rem);

  width: fit-content;
  max-width: 100%;

  margin: 0;

  color: var(--color-text-secondary, #475569);

  font-size: var(--font-size-sm, 0.875rem);
  line-height: 1.5;

  cursor: pointer;
}

.form__choice + .form__choice {
  margin-top: var(--space-2, 0.5rem);
}

.form__choice input[type="checkbox"],
.form__choice input[type="radio"] {
  flex: 0 0 auto;

  width: 1.125rem;
  height: 1.125rem;

  margin: 0.125rem 0 0;

  accent-color:
    var(--color-primary, #2563eb);

  cursor: pointer;
}

.form__choice input[type="checkbox"]:focus-visible,
.form__choice input[type="radio"]:focus-visible {
  outline: none;

  box-shadow:
    0 0 0 3px
    var(--color-focus-ring, rgba(37, 99, 235, 0.16));

  border-radius: var(--radius-sm, 0.375rem);
}

.form__choice-label {
  min-width: 0;
}

.form__choice-description {
  display: block;

  margin-top: 0.125rem;

  color: var(--color-text-muted, #64748b);

  font-size: var(--font-size-xs, 0.75rem);
}


/* ==========================================================================
   18. CHECKBOX / RADIO GROUP
   ========================================================================== */

.form__choice-group {
  display: flex;
  flex-direction: column;

  gap: var(--space-2, 0.5rem);

  width: 100%;
}

.form__choice-group--inline {
  flex-direction: row;
  flex-wrap: wrap;

  column-gap: var(--space-5, 1.25rem);
  row-gap: var(--space-2, 0.5rem);
}

.form__choice-group--grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: var(--space-3, 0.75rem);
}


/* ==========================================================================
   19. CUSTOM CHECKBOX / RADIO WRAPPER
   ========================================================================== */

.form__option {
  position: relative;

  display: flex;
  align-items: flex-start;

  width: 100%;
}

.form__option input {
  position: absolute;

  width: 1px;
  height: 1px;

  opacity: 0;
  pointer-events: none;
}

.form__option-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3, 0.75rem);

  width: 100%;

  padding: var(--space-3, 0.75rem);

  border:
    1px solid
    var(--color-border, #e2e8f0);

  border-radius:
    var(--radius-md, 0.625rem);

  color: var(--color-text-secondary, #475569);
  background: var(--color-surface, #ffffff);

  cursor: pointer;

  transition:
    border-color var(--transition-fast, 150ms ease),
    background-color var(--transition-fast, 150ms ease),
    box-shadow var(--transition-fast, 150ms ease);
}

.form__option-label:hover {
  border-color:
    var(--color-border-strong, #cbd5e1);

  background:
    var(--color-surface-hover, #f8fafc);
}

.form__option input:checked + .form__option-label {
  border-color:
    var(--color-primary, #2563eb);

  background:
    var(--color-primary-soft, rgba(37, 99, 235, 0.06));
}

.form__option input:focus-visible + .form__option-label {
  outline: none;

  box-shadow:
    0 0 0 3px
    var(--color-focus-ring, rgba(37, 99, 235, 0.16));
}

.form__option input:disabled + .form__option-label {
  opacity: 0.6;

  cursor: not-allowed;
}


/* ==========================================================================
   20. FILE UPLOAD
   ========================================================================== */

.form__file {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 8rem;

  padding: var(--space-6, 1.5rem);

  border:
    1.5px dashed
    var(--color-border-strong, #cbd5e1);

  border-radius:
    var(--radius-lg, 0.75rem);

  color: var(--color-text-secondary, #475569);
  background:
    var(--color-background-muted, #f8fafc);

  text-align: center;

  cursor: pointer;

  transition:
    border-color var(--transition-fast, 150ms ease),
    background-color var(--transition-fast, 150ms ease);
}

.form__file:hover,
.form__file.is-dragover {
  border-color:
    var(--color-primary, #2563eb);

  background:
    var(--color-primary-soft, rgba(37, 99, 235, 0.05));
}

.form__file-input {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  opacity: 0;

  cursor: pointer;
}

.form__file-content {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: var(--space-2, 0.5rem);
}

.form__file-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 2.5rem;
  height: 2.5rem;

  color: var(--color-primary, #2563eb);

  background:
    var(--color-primary-soft, rgba(37, 99, 235, 0.08));

  border-radius:
    var(--radius-full, 999px);
}

.form__file-title {
  color: var(--color-text-primary, #0f172a);

  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-semibold, 600);
}

.form__file-description {
  color: var(--color-text-muted, #64748b);

  font-size: var(--font-size-xs, 0.75rem);
}


/* ==========================================================================
   21. FILE PREVIEW
   ========================================================================== */

.form__file-preview {
  display: grid;

  grid-template-columns:
    repeat(auto-fill, minmax(8rem, 1fr));

  gap: var(--space-3, 0.75rem);

  margin-top: var(--space