/* =========================================================
   FORMS.CSS
   Bootstrap Form Override Layer
   Load this AFTER bootstrap.min.css
========================================================= */

/* =========================================================
   FORM LABELS
========================================================= */
.form-label {
  margin-bottom: 6px;
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: var(--line-height-tight);
}

.col-form-label {
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

/* =========================================================
   BASE INPUTS
========================================================= */
.form-control,
.form-select,
.form-control-plaintext {
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
  line-height: 1.2;
}

.form-control,
.form-select {
  min-height: var(--input-height);
  padding: 0 var(--space-md);
  color: var(--color-text-primary);
  background-color: var(--color-surface);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-md);
  box-shadow: none;
  transition: var(--transition-fast);
}

.form-control::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.form-control:hover,
.form-select:hover,
.form-control:focus,
.form-select:focus {
  border-color: var(--color-brand-primary);
}

.form-control:focus,
.form-select:focus {
  color: var(--color-text-primary);
  background-color: var(--color-surface);
  box-shadow: var(--focus-ring-brand);
  outline: none;
}

/* =========================================================
   TEXTAREA
========================================================= */
textarea.form-control {
  min-height: 120px;
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
  line-height: var(--line-height-base);
  resize: vertical;
}

/* =========================================================
   SELECT
========================================================= */
.form-select {
  padding-right: 2.5rem;
  background-color: var(--color-surface);
}

/* =========================================================
   SMALL / LARGE SIZES
========================================================= */
.form-control-sm,
.form-select-sm {
  min-height: 40px;
  padding: 0 var(--space-sm);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
}

.form-control-lg,
.form-select-lg {
  min-height: 56px;
  padding: 0 var(--space-lg);
  font-size: var(--font-size-base);
  border-radius: var(--radius-lg);
}

/* =========================================================
   DISABLED / READONLY
========================================================= */
.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
  color: var(--color-text-muted);
  background-color: var(--color-surface-soft);
  border-color: var(--color-line);
  opacity: 1;
  cursor: not-allowed;
}

/* =========================================================
   FILE INPUT
========================================================= */
.form-control[type="file"] {
  padding: 10px 12px;
  min-height: var(--input-height);
}

.form-control[type="file"]::-webkit-file-upload-button {
  margin-right: var(--space-sm);
  padding: 8px 12px;
  color: var(--color-text-inverse);
  background-color: var(--color-brand-primary);
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.form-control[type="file"]::file-selector-button {
  margin-right: var(--space-sm);
  padding: 8px 12px;
  color: var(--color-text-inverse);
  background-color: var(--color-brand-primary);
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

/* =========================================================
   INPUT GROUP
========================================================= */
.input-group {
  border-radius: var(--radius-md);
}

.input-group > .form-control,
.input-group > .form-select,
.input-group > .form-floating,
.input-group > .btn {
  position: relative;
}

.input-group-text {
  min-height: var(--input-height);
  padding: 0 var(--space-md);
  color: var(--color-text-muted);
  background-color: var(--color-surface-soft);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.input-group .form-control,
.input-group .form-select {
  min-height: var(--input-height);
}

.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n + 3),
.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control,
.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* =========================================================
   FORM TEXT / HELPERS
========================================================= */
.form-text {
  margin-top: 6px;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-base);
}

/* =========================================================
   VALIDATION STATES
========================================================= */
.valid-feedback {
  color: var(--color-success);
  font-size: var(--font-size-xs);
  font-weight: 500;
}

.invalid-feedback {
  color: var(--color-danger);
  font-size: var(--font-size-xs);
  font-weight: 500;
}

.was-validated .form-control:valid,
.form-control.is-valid,
.was-validated .form-select:valid,
.form-select.is-valid {
  border-color: var(--color-success);
  background-image: none;
  box-shadow: none;
}

.was-validated .form-control:valid:focus,
.form-control.is-valid:focus,
.was-validated .form-select:valid:focus,
.form-select.is-valid:focus {
  border-color: var(--color-success);
  box-shadow: 0 0 0 0.2rem rgba(31, 138, 76, 0.18);
}

.was-validated .form-control:invalid,
.form-control.is-invalid,
.was-validated .form-select:invalid,
.form-select.is-invalid {
  border-color: var(--color-danger);
  background-image: none;
  box-shadow: none;
}

.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus,
.was-validated .form-select:invalid:focus,
.form-select.is-invalid:focus {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 0.2rem rgba(var(--color-brand-primary-rgb), 0.18);
}

/* =========================================================
   CHECKBOX / RADIO
========================================================= */
.form-check {
  margin-bottom: var(--space-xs);
}

.form-check-input {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.18em;
  background-color: var(--color-surface);
  border: 1px solid var(--color-line-strong);
  box-shadow: none;
  cursor: pointer;
}

.form-check-input:focus {
  border-color: var(--color-brand-primary);
  box-shadow: var(--focus-ring-brand);
}

.form-check-input:checked {
  background-color: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
}

.form-check-input[type="checkbox"] {
  border-radius: 6px;
}

.form-check-label {
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

/* =========================================================
   SWITCH
========================================================= */
.form-switch .form-check-input {
  width: 2.3rem;
  height: 1.2rem;
  border-radius: var(--radius-pill);
  background-color: #fff;
}

.form-switch .form-check-input:checked {
  background-color: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
}

/* =========================================================
   RANGE
========================================================= */
.form-range:focus {
  outline: none;
}

.form-range::-webkit-slider-thumb {
  background: var(--color-brand-primary);
}

.form-range::-moz-range-thumb {
  background: var(--color-brand-primary);
  border: 0;
}

.form-range::-webkit-slider-runnable-track {
  background: var(--color-brand-soft);
}

.form-range::-moz-range-track {
  background: var(--color-brand-soft);
}

/* =========================================================
   FLOATING LABELS
========================================================= */
.form-floating > .form-control,
.form-floating > .form-select {
  min-height: var(--input-height);
  height: var(--input-height);
  padding: 1rem var(--space-md) 0.25rem;
}

.form-floating > label {
  padding: 0.85rem var(--space-md);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
  color: var(--color-brand-primary);
}

/* =========================================================
   SEARCH / FILTER STYLE HELPERS
========================================================= */
.form-control.form-control-search {
  padding-left: 42px;
  background-repeat: no-repeat;
  background-position: 14px center;
}

.form-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.form-filter-row .form-control,
.form-filter-row .form-select {
  min-width: 180px;
}

/* =========================================================
   CUSTOM FORM WRAPPERS
========================================================= */
.form-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-field-inline {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

/* =========================================================
   MODAL / CARD FORM REFINEMENT
========================================================= */
.card .form-control,
.card .form-select,
.modal .form-control,
.modal .form-select {
  background-color: var(--color-surface);
}

.card .form-label,
.modal .form-label {
  margin-bottom: 6px;
}

/* =========================================================
   PLACEHOLDER + AUTOFILL
========================================================= */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--color-text-primary);
  -webkit-box-shadow: 0 0 0 1000px var(--color-surface) inset;
  transition: background-color 9999s ease-out 0s;
}

/* =========================================================
   MOBILE REFINEMENT
========================================================= */
@media (max-width: 767.98px) {
  .form-control,
  .form-select {
    min-height: var(--input-height);
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
    font-size: var(--font-size-sm);
    border-radius: var(--radius-sm);
  }

  textarea.form-control {
    min-height: 100px;
  }

  .input-group-text {
    min-height: var(--input-height);
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
    font-size: var(--font-size-xs);
    border-radius: var(--radius-sm);
  }

  .form-label,
  .form-check-label,
  .form-floating > label {
    font-size: var(--font-size-xs);
  }

  .form-actions {
    justify-content: stretch;
  }

  .form-actions .btn {
    width: 100%;
  }
}