/* ==========================================================================
   HygieneTech — Modern Form Design System
   =========================================================================
   Built on Bootstrap 5.3.2 + Mofi Admin template.
   Uses .ht-* prefix to avoid template conflicts.
   Provides: floating labels, clean spacing, RTL-ready, dark mode ready.
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS VARIABLES — Single source of truth for all form theming
   -------------------------------------------------------------------------- */
:root {
  /* Borders & Radius */
  --ht-input-radius: 0.5rem;
  --ht-input-border: #d1d5db;
  --ht-input-border-focus: #7366ff;
  --ht-input-bg: #fff;

  /* Focus ring */
  --ht-focus-ring: 0 0 0 3px rgba(115, 102, 255, 0.15);

  /* Typography */
  --ht-label-color: #6b7280;
  --ht-label-focus-color: #7366ff;
  --ht-help-color: #9ca3af;
  --ht-error-color: #ef4444;
  --ht-input-color: #1f2937;
  --ht-input-font-size: 0.9375rem; /* 15px */

  /* Spacing */
  --ht-field-gap: 1rem;

  /* Card */
  --ht-card-radius: 0.75rem;
  --ht-card-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);

  /* Transitions */
  --ht-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark mode overrides */
body.dark-only {
  --ht-input-border: #374151;
  --ht-input-bg: #1f2937;
  --ht-input-color: #e5e7eb;
  --ht-label-color: #9ca3af;
  --ht-help-color: #6b7280;
  --ht-card-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* --------------------------------------------------------------------------
   FORM CONTAINER — .ht-form
   -------------------------------------------------------------------------- */
.ht-form {
  font-size: var(--ht-input-font-size);
}

/* --------------------------------------------------------------------------
   FLOATING LABEL INPUTS — .ht-field
   -------------------------------------------------------------------------- */

/* Base field: all form-control / form-select within .ht-field or .ht-form */
.ht-form .form-control,
.ht-form .form-select,
.ht-field .form-control,
.ht-field .form-select {
  border: 1.5px solid var(--ht-input-border);
  border-radius: var(--ht-input-radius);
  background-color: var(--ht-input-bg);
  color: var(--ht-input-color);
  font-size: var(--ht-input-font-size);
  padding: 0.75rem 1rem;
  min-height: calc(3.5rem + 2px); /* match BS5 form-floating height */
  transition: border-color var(--ht-transition), box-shadow var(--ht-transition);
  box-shadow: none;
}

/* Textarea auto-size */
.ht-form textarea.form-control,
.ht-field textarea.form-control {
  min-height: 6rem;
}

/* Focus state */
.ht-form .form-control:focus,
.ht-form .form-select:focus,
.ht-field .form-control:focus,
.ht-field .form-select:focus {
  border-color: var(--ht-input-border-focus);
  box-shadow: var(--ht-focus-ring);
  outline: none;
}

/* Floating label color */
.ht-form .form-floating > label,
.ht-field.form-floating > label {
  color: var(--ht-label-color);
  font-weight: 450;
  padding-left: 1rem;
  padding-right: 1rem;
  transition: all var(--ht-transition);
}

/* Label on focus */
.ht-form .form-floating > .form-control:focus ~ label,
.ht-form .form-floating > .form-select:focus ~ label,
.ht-field.form-floating > .form-control:focus ~ label,
.ht-field.form-floating > .form-select:focus ~ label {
  color: var(--ht-label-focus-color);
}

/* Autofill fix */
.ht-form .form-floating > .form-control:-webkit-autofill ~ label,
.ht-field.form-floating > .form-control:-webkit-autofill ~ label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

/* RTL Autofill fix */
[dir="rtl"] .ht-form .form-floating > .form-control:-webkit-autofill ~ label,
[dir="rtl"] .ht-field.form-floating > .form-control:-webkit-autofill ~ label {
  transform: scale(0.85) translateY(-0.5rem) translateX(-0.15rem);
  transform-origin: top right;
}

/* --------------------------------------------------------------------------
   INPUT GROUP — prepend/append badges
   -------------------------------------------------------------------------- */
.ht-form .input-group-text,
.ht-field .input-group-text {
  background-color: #f9fafb;
  border: 1.5px solid var(--ht-input-border);
  border-radius: var(--ht-input-radius);
  color: var(--ht-label-color);
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
  transition: border-color var(--ht-transition);
}

body.dark-only .ht-form .input-group-text,
body.dark-only .ht-field .input-group-text {
  background-color: #374151;
  color: #9ca3af;
}

/* Remove double borders */
.ht-form .input-group > .form-floating:not(:first-child) > .form-control,
.ht-field .input-group > .form-floating:not(:first-child) > .form-control {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

[dir="rtl"] .ht-form .input-group > .form-floating:not(:first-child) > .form-control,
[dir="rtl"] .ht-field .input-group > .form-floating:not(:first-child) > .form-control {
  border-top-left-radius: var(--ht-input-radius);
  border-bottom-left-radius: var(--ht-input-radius);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.ht-form .input-group > .input-group-text:first-child,
.ht-field .input-group > .input-group-text:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
}

[dir="rtl"] .ht-form .input-group > .input-group-text:first-child,
[dir="rtl"] .ht-field .input-group > .input-group-text:first-child {
  border-top-right-radius: var(--ht-input-radius);
  border-bottom-right-radius: var(--ht-input-radius);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-right: 1.5px solid var(--ht-input-border);
  border-left: 0;
}

/* Focus highlight on input-group-text */
.ht-form .input-group:focus-within > .input-group-text,
.ht-field .input-group:focus-within > .input-group-text {
  border-color: var(--ht-input-border-focus);
  color: var(--ht-input-border-focus);
}

/* Icon prepend styling */
.ht-icon-prepend {
  min-width: 2.75rem;
  justify-content: center;
}

.ht-icon-prepend i {
  font-size: 1.125rem;
}

/* Language badge in bilingual inputs */
.ht-lang-badge {
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  min-width: 2.5rem;
  justify-content: center;
  color: var(--ht-input-border-focus);
  background-color: rgba(115, 102, 255, 0.08);
  border-color: var(--ht-input-border);
}

/* --------------------------------------------------------------------------
   VALIDATION — Error states
   -------------------------------------------------------------------------- */
.ht-form .form-control.is-invalid,
.ht-form .form-select.is-invalid,
.ht-field .form-control.is-invalid,
.ht-field .form-select.is-invalid {
  border-color: var(--ht-error-color);
  box-shadow: none;
}

.ht-form .form-control.is-invalid:focus,
.ht-form .form-select.is-invalid:focus,
.ht-field .form-control.is-invalid:focus,
.ht-field .form-select.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.ht-form .invalid-feedback,
.ht-field .invalid-feedback {
  font-size: 0.8125rem;
  font-weight: 450;
  margin-top: 0.375rem;
  color: var(--ht-error-color);
}

/* --------------------------------------------------------------------------
   HELP TEXT — .form-text
   -------------------------------------------------------------------------- */
.ht-form .form-text,
.ht-field .form-text {
  font-size: 0.8125rem;
  color: var(--ht-help-color);
  margin-top: 0.375rem;
  line-height: 1.4;
}

.ht-form .form-text i,
.ht-field .form-text i {
  font-size: 0.875rem;
  vertical-align: -0.1em;
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   FORM LABELS — non-floating (for checkboxes, radios, file inputs)
   -------------------------------------------------------------------------- */
.ht-form .form-label,
.ht-field .form-label {
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--ht-input-color);
  margin-bottom: 0.5rem;
}

body.dark-only .ht-form .form-label,
body.dark-only .ht-field .form-label {
  color: #e5e7eb;
}

/* --------------------------------------------------------------------------
   CHECKBOX / RADIO / SWITCH
   -------------------------------------------------------------------------- */
.ht-form .form-check,
.ht-field.form-check {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.ht-form .form-check-input,
.ht-field .form-check-input {
  border: 1.5px solid var(--ht-input-border);
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.15rem;
  transition: all var(--ht-transition);
  cursor: pointer;
}

.ht-form .form-check-input:checked,
.ht-field .form-check-input:checked {
  background-color: var(--ht-input-border-focus);
  border-color: var(--ht-input-border-focus);
}

.ht-form .form-check-input:focus,
.ht-field .form-check-input:focus {
  box-shadow: var(--ht-focus-ring);
  border-color: var(--ht-input-border-focus);
}

.ht-form .form-check-label,
.ht-field .form-check-label {
  cursor: pointer;
  font-size: var(--ht-input-font-size);
  color: var(--ht-input-color);
  padding-left: 0.25rem;
}

/* Switch specific */
.ht-form .form-switch .form-check-input,
.ht-field.form-switch .form-check-input {
  width: 2.5rem;
  height: 1.25rem;
  border-radius: 2rem;
}

/* --------------------------------------------------------------------------
   FILE INPUT
   -------------------------------------------------------------------------- */
.ht-form input[type="file"].form-control,
.ht-field input[type="file"].form-control {
  padding: 0.5rem 0.75rem;
  min-height: auto;
  font-size: 0.875rem;
  cursor: pointer;
}

.ht-form input[type="file"].form-control::file-selector-button,
.ht-field input[type="file"].form-control::file-selector-button {
  border-radius: calc(var(--ht-input-radius) - 3px);
  padding: 0.375rem 0.75rem;
  margin-right: 0.75rem;
  background-color: #f3f4f6;
  border: 1px solid var(--ht-input-border);
  font-weight: 500;
  font-size: 0.8125rem;
  transition: all var(--ht-transition);
}

.ht-form input[type="file"].form-control::file-selector-button:hover,
.ht-field input[type="file"].form-control::file-selector-button:hover {
  background-color: #e5e7eb;
}

body.dark-only .ht-form input[type="file"].form-control::file-selector-button,
body.dark-only .ht-field input[type="file"].form-control::file-selector-button {
  background-color: #374151;
  border-color: #4b5563;
  color: #e5e7eb;
}

/* File preview */
.ht-file-preview {
  display: inline-block;
  padding: 4px;
  background: #f9fafb;
  border: 1px solid var(--ht-input-border);
  border-radius: var(--ht-input-radius);
}

body.dark-only .ht-file-preview {
  background: #374151;
}

/* --------------------------------------------------------------------------
   SECTION HEADERS — .ht-form-section
   -------------------------------------------------------------------------- */
.ht-form-section {
  position: relative;
}

.ht-form-section h6 {
  font-size: 0.9375rem;
  color: var(--ht-input-color);
  display: flex;
  align-items: center;
}

.ht-form-section h6 i {
  font-size: 1.125rem;
}

/* --------------------------------------------------------------------------
   BUTTONS — inside .ht-form
   -------------------------------------------------------------------------- */
.ht-form .btn-primary,
.ht-form-actions .btn-primary {
  background-color: #7366ff;
  border-color: #7366ff;
  border-radius: var(--ht-input-radius);
  font-weight: 500;
  padding: 0.625rem 1.5rem;
  font-size: var(--ht-input-font-size);
  box-shadow: 0 1px 3px rgba(115, 102, 255, 0.3);
  transition: all var(--ht-transition);
}

.ht-form .btn-primary:hover,
.ht-form-actions .btn-primary:hover {
  background-color: #5a4fdb;
  border-color: #5a4fdb;
  box-shadow: 0 4px 12px rgba(115, 102, 255, 0.35);
  transform: translateY(-1px);
}

.ht-form .btn-primary:active,
.ht-form-actions .btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(115, 102, 255, 0.3);
}

.ht-form .btn-outline-secondary,
.ht-form-actions .btn-outline-secondary {
  border-radius: var(--ht-input-radius);
  font-weight: 450;
  padding: 0.625rem 1.25rem;
  font-size: var(--ht-input-font-size);
  transition: all var(--ht-transition);
}

/* --------------------------------------------------------------------------
   CARD WRAPPERS — cleaner card appearance for forms
   -------------------------------------------------------------------------- */
.ht-form .card,
.page-body .ht-form .card {
  border: none;
  border-radius: var(--ht-card-radius);
  box-shadow: var(--ht-card-shadow);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   ALERT INSIDE FORMS
   -------------------------------------------------------------------------- */
.ht-form .alert {
  border-radius: var(--ht-input-radius);
  font-size: 0.875rem;
  line-height: 1.5;
}

.ht-form .alert i {
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   COLLAPSIBLE SECTIONS
   -------------------------------------------------------------------------- */
.ht-form-collapsible .collapse .card-body {
  border-radius: var(--ht-input-radius);
}

.ht-form-collapsible .btn-outline-secondary {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  border-radius: 0.375rem;
}

/* --------------------------------------------------------------------------
   RTL — Right-to-Left support
   -------------------------------------------------------------------------- */
[dir="rtl"] .ht-form .form-floating > label,
[dir="rtl"] .ht-field.form-floating > label {
  left: auto;
  right: 0;
  padding-left: 1rem;
  padding-right: 1rem;
  transform-origin: top right;
}

[dir="rtl"] .ht-form .form-text i,
[dir="rtl"] .ht-field .form-text i {
  margin-left: 0.25rem;
  margin-right: 0;
}

[dir="rtl"] .ht-form .form-check,
[dir="rtl"] .ht-field.form-check {
  padding-left: 0;
  padding-right: 1.5em;
}

[dir="rtl"] .ht-form .form-check-input,
[dir="rtl"] .ht-field .form-check-input {
  float: right;
  margin-left: 0;
  margin-right: -1.5em;
}

[dir="rtl"] .ht-form .form-check-label,
[dir="rtl"] .ht-field .form-check-label {
  padding-left: 0;
  padding-right: 0.25rem;
}

[dir="rtl"] .ht-form input[type="file"].form-control::file-selector-button,
[dir="rtl"] .ht-field input[type="file"].form-control::file-selector-button {
  margin-right: 0;
  margin-left: 0.75rem;
}

[dir="rtl"] .ht-form-actions {
  flex-direction: row-reverse;
}

/* --------------------------------------------------------------------------
   LEGACY FORM UPGRADES — apply modern styles to EXISTING forms too
   Targets .page-body forms that don't use .ht-form yet
   -------------------------------------------------------------------------- */

/* Soften ALL form inputs sitewide */
.page-body .form-control,
.page-body .form-select {
  border: 1.5px solid var(--ht-input-border);
  border-radius: var(--ht-input-radius);
  font-size: var(--ht-input-font-size);
  transition: border-color var(--ht-transition), box-shadow var(--ht-transition);
}

.page-body .form-control:focus,
.page-body .form-select:focus {
  border-color: var(--ht-input-border-focus);
  box-shadow: var(--ht-focus-ring);
  outline: none;
}

/* Remove the oversized .form-control-lg that legacy forms use */
.page-body .form-control.form-control-lg {
  font-size: var(--ht-input-font-size);
  padding: 0.625rem 1rem;
  border-radius: var(--ht-input-radius);
}

/* Soften labels sitewide */
.page-body .form-label {
  font-weight: 500;
  font-size: 0.875rem;
  margin-bottom: 0.375rem;
}

/* Better help text everywhere */
.page-body small.text-muted,
.page-body .form-text {
  font-size: 0.8125rem;
  line-height: 1.4;
}

/* Better submit buttons */
.page-body .btn-primary {
  border-radius: var(--ht-input-radius);
  font-weight: 500;
  transition: all var(--ht-transition);
}

.page-body .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(115, 102, 255, 0.25);
}

.page-body .btn-primary:active {
  transform: translateY(0);
}

/* Better cards */
.page-body .card {
  border-radius: var(--ht-card-radius);
  border: none;
  box-shadow: var(--ht-card-shadow);
}

.page-body .card-header {
  border-bottom: 1px solid #f3f4f6;
  background-color: transparent;
  padding: 1rem 1.25rem;
}

body.dark-only .page-body .card-header {
  border-bottom-color: #374151;
}

.page-body .card-body {
  padding: 1.25rem;
}

/* Remove the ugly double-border card-wrapper */
.page-body .card-wrapper.border.rounded-3 {
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* Better error messages sitewide */
.page-body .invalid-feedback {
  font-size: 0.8125rem;
  font-weight: 450;
  margin-top: 0.375rem;
}

/* input-group-text globally */
.page-body .input-group-text {
  background-color: #f9fafb;
  border: 1.5px solid var(--ht-input-border);
  border-radius: var(--ht-input-radius);
  font-size: 0.875rem;
}

body.dark-only .page-body .input-group-text {
  background-color: #374151;
  border-color: #4b5563;
}

/* Select arrows — clean appearance */
.page-body .form-select {
  background-position: right 0.75rem center;
  padding-right: 2.25rem;
}

[dir="rtl"] .page-body .form-select {
  background-position: left 0.75rem center;
  padding-right: 1rem;
  padding-left: 2.25rem;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .ht-form .form-floating > .form-control,
  .ht-form .form-floating > .form-select,
  .ht-field .form-control,
  .ht-field .form-select {
    font-size: 1rem; /* slightly larger touch targets */
  }

  .ht-form-actions {
    flex-direction: column;
    gap: 0.5rem !important;
  }

  .ht-form-actions .btn {
    width: 100%;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   ANIMATION — subtle entrance for form fields
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .ht-field {
    animation: htFieldIn 0.3s ease-out both;
  }

  @keyframes htFieldIn {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Stagger animation for multiple fields */
  .ht-field:nth-child(1) { animation-delay: 0.02s; }
  .ht-field:nth-child(2) { animation-delay: 0.04s; }
  .ht-field:nth-child(3) { animation-delay: 0.06s; }
  .ht-field:nth-child(4) { animation-delay: 0.08s; }
  .ht-field:nth-child(5) { animation-delay: 0.10s; }
  .ht-field:nth-child(6) { animation-delay: 0.12s; }
  .ht-field:nth-child(7) { animation-delay: 0.14s; }
  .ht-field:nth-child(8) { animation-delay: 0.16s; }
}