/* ============================================================
   COMMON FORM CONTROLS & COMPONENTS — Leva Shubhyog
   File: css/components/forms.css
   Consolidates: inputs, selects, date, time, select2, textarea,
   labels, validation, and form card sections.
   ============================================================ */

/* ------------------------------------------------------------
   1. FORM DESIGN TOKENS & VARIABLES
   ------------------------------------------------------------ */
:root {
  --form-input-height: 44px;
  --form-input-bg: #ffffff;
  --form-input-border: var(--ls-border, #e2e8f0);
  --form-input-border-hover: #cbd5e1;
  --form-input-border-focus: var(--ls-primary, #8b1d24);
  --form-input-ring-focus: rgba(139, 29, 36, 0.18);
  --form-input-radius: var(--ls-radius-md, 10px);
  --form-input-font-size: 14px;
  --form-input-color: var(--ls-text-main, #0f172a);
  --form-input-placeholder: #94a3b8;
  --form-label-color: #475569;
}

/* ------------------------------------------------------------
   2. LABELS & REQUIRED ASTERISKS
   ------------------------------------------------------------ */
.app-form-label,
label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--form-label-color) !important;
  margin-bottom: 7px !important;
  display: block !important;
  letter-spacing: 0.2px !important;
  text-transform: none !important;
}

.valider,
.validate,
.required-mark {
  color: #dc2626 !important;
  font-weight: 700;
  margin-left: 2px;
}

.form-text-muted,
.form-help-text {
  font-size: 12px;
  color: var(--ls-text-muted, #64748b);
  margin-top: 5px;
  display: block;
}

/* ------------------------------------------------------------
   3. STANDARD FORM INPUTS & TEXT CONTROLS
   ------------------------------------------------------------ */
.app-form-control,
.form-control:not(.select2-search__field) {
  display: block !important;
  width: 100% !important;
  height: var(--form-input-height) !important;
  padding: 10px 14px !important;
  font-size: var(--form-input-font-size) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--form-input-color) !important;
  background-color: var(--form-input-bg) !important;
  background-clip: padding-box !important;
  border: 1px solid var(--form-input-border) !important;
  border-radius: var(--form-input-radius) !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03) !important;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease !important;
  outline: none !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
}

.app-form-control::placeholder,
.form-control:not(.select2-search__field)::placeholder {
  color: var(--form-input-placeholder) !important;
  opacity: 1;
}

.app-form-control:hover,
.form-control:not(.select2-search__field):hover {
  border-color: var(--form-input-border-hover) !important;
}

.app-form-control:focus,
.form-control:not(.select2-search__field):focus {
  border-color: var(--form-input-border-focus) !important;
  box-shadow: 0 0 0 3px var(--form-input-ring-focus) !important;
  background-color: #ffffff !important;
  outline: none !important;
}

/* Disabled and Readonly States */
.app-form-control:disabled,
.form-control:disabled,
.app-form-control[readonly],
.form-control[readonly] {
  background-color: #f8fafc !important;
  color: #64748b !important;
  border-color: #e2e8f0 !important;
  cursor: not-allowed;
  opacity: 0.9;
}

/* ------------------------------------------------------------
   4. DATE & TIME INPUTS NORMALIZATION
   ------------------------------------------------------------ */
input[type="date"].form-control,
input[type="date"].app-form-control,
input[type="time"].form-control,
input[type="time"].app-form-control,
input[type="datetime-local"].form-control,
input[type="datetime-local"].app-form-control {
  height: var(--form-input-height) !important;
  line-height: 1.5 !important;
  display: inline-flex !important;
  align-items: center !important;
  position: relative;
  cursor: pointer;
}

/* Customized calendar & clock picker icons */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
  padding: 4px;
  margin-right: -4px;
  filter: invert(0.25);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  transform: scale(1.1);
}

input[type="date"]::-moz-focus-inner,
input[type="time"]::-moz-focus-inner {
  border: 0;
}

/* ------------------------------------------------------------
   5. NATIVE SELECT DROPDOWNS (NON-SELECT2)
   ------------------------------------------------------------ */
select.form-control:not(.select-2):not([multiple]),
select.app-form-control:not([multiple]) {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  padding-right: 38px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px 16px !important;
  cursor: pointer !important;
}

/* ------------------------------------------------------------
   6. SELECT2 INTEGRATION (SINGLE & MULTI-SELECT)
   ------------------------------------------------------------ */
.select2-container {
  width: 100% !important;
}

/* Single-Select Box */
.select2-container--default .select2-selection--single {
  height: var(--form-input-height) !important;
  background-color: var(--form-input-bg) !important;
  border: 1px solid var(--form-input-border) !important;
  border-radius: var(--form-input-radius) !important;
  padding: 0 14px !important;
  display: flex !important;
  align-items: center !important;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease !important;
  outline: none !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03) !important;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  line-height: calc(var(--form-input-height) - 2px) !important;
  color: var(--form-input-color) !important;
  font-size: var(--form-input-font-size) !important;
  font-weight: 500 !important;
  padding-left: 0 !important;
  padding-right: 24px !important;
  display: block !important;
  width: 100% !important;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__placeholder {
  color: var(--form-input-placeholder) !important;
  font-weight: 400 !important;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  height: calc(var(--form-input-height) - 2px) !important;
  right: 12px !important;
  width: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__arrow
  b {
  border-color: #64748b transparent transparent transparent !important;
  border-width: 5px 4px 0 4px !important;
  margin-top: -2px !important;
}

.select2-container--default.select2-container--open
  .select2-selection--single
  .select2-selection__arrow
  b {
  border-color: transparent transparent #64748b transparent !important;
  border-width: 0 4px 5px 4px !important;
}

/* Multi-Select Box */
.select2-container--default .select2-selection--multiple {
  min-height: var(--form-input-height) !important;
  background-color: var(--form-input-bg) !important;
  border: 1px solid var(--form-input-border) !important;
  border-radius: var(--form-input-radius) !important;
  padding: 5px 10px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease !important;
  outline: none !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03) !important;
}

.select2-container--default
  .select2-selection--multiple
  .select2-selection__rendered {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice {
  background: rgba(139, 29, 36, 0.08) !important;
  color: #8b1d24 !important;
  border: 1px solid rgba(139, 29, 36, 0.2) !important;
  border-radius: 6px !important;
  padding: 3px 10px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  margin: 2px 4px 2px 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice__remove {
  color: #8b1d24 !important;
  margin-right: 4px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  border: none !important;
  background: transparent !important;
}

.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice__remove:hover {
  color: #70141a !important;
}

.select2-container--default .select2-search--inline .select2-search__field {
  margin-top: 0 !important;
  height: 32px !important;
  font-size: 14px !important;
  color: #0f172a !important;
  padding: 0 4px !important;
  font-family: inherit !important;
}

.select2-container--default
  .select2-search--inline
  .select2-search__field::placeholder {
  color: var(--form-input-placeholder) !important;
}

/* Focus & Open States */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus
  .select2-selection--multiple,
.select2-container--default.select2-container--open
  .select2-selection--multiple {
  border-color: var(--form-input-border-focus) !important;
  box-shadow: 0 0 0 3px var(--form-input-ring-focus) !important;
  outline: none !important;
}

/* Floating Dropdown Popup */
.select2-dropdown {
  border: 1px solid var(--form-input-border) !important;
  border-radius: var(--form-input-radius) !important;
  box-shadow: var(
    --ls-shadow-dropdown,
    0 12px 28px rgba(15, 23, 42, 0.12),
    0 4px 10px rgba(15, 23, 42, 0.04)
  ) !important;
  overflow: hidden !important;
  background: #ffffff !important;
  z-index: 1050 !important;
  margin-top: 4px !important;
}

.select2-search--dropdown {
  padding: 10px 12px !important;
  background-color: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.select2-search--dropdown .select2-search__field {
  height: 38px !important;
  padding: 8px 12px !important;
  background-color: #ffffff !important;
  border: 1px solid var(--form-input-border) !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  outline: none !important;
  box-sizing: border-box !important;
  width: 100% !important;
  font-family: inherit !important;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease !important;
}

.select2-search--dropdown .select2-search__field:focus {
  border-color: var(--form-input-border-focus) !important;
  box-shadow: 0 0 0 2px var(--form-input-ring-focus) !important;
}

.select2-results__option {
  padding: 9px 14px !important;
  font-size: 13.5px !important;
  color: var(--form-input-color) !important;
  transition: background 0.12s ease !important;
}

.select2-container--default
  .select2-results__option--highlighted[aria-selected] {
  background-color: var(--form-input-border-focus) !important;
  color: #ffffff !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: rgba(139, 29, 36, 0.08) !important;
  color: #8b1d24 !important;
  font-weight: 600 !important;
}

/* ------------------------------------------------------------
   7. TEXTAREA
   ------------------------------------------------------------ */
textarea.form-control,
textarea.app-form-control {
  height: auto !important;
  min-height: 90px !important;
  line-height: 1.5 !important;
  padding: 10px 14px !important;
  resize: vertical !important;
}

/* ------------------------------------------------------------
   8. FORM GROUPS & CARD SECTIONS
   ------------------------------------------------------------ */
.form-group,
.app-form-group {
  margin-bottom: 18px;
}

/* Card Section for Multi-step & Profile forms */
.form-section {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  padding: 24px 28px;
  margin-bottom: 24px;
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.form-section:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  border-color: #cbd5e1;
}

.form-section h3 {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  gap: 10px;
}

.form-section h3 i.material-icons {
  color: #8b1d24;
  font-size: 22px;
}

.form-section .col-md-3,
.form-section .col-md-4,
.form-section .col-md-6,
.form-section .col-md-12 {
  margin-bottom: 18px;
}

/* ------------------------------------------------------------
   9. INPUT GROUPS & ADORNMENTS
   ------------------------------------------------------------ */
.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}

.input-group-text {
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: #64748b;
  background-color: #f8fafc;
  border: 1px solid var(--form-input-border);
  border-radius: var(--form-input-radius);
}

.input-group > .form-control:not(:first-child),
.input-group > .app-form-control:not(:first-child) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.input-group > .input-group-prepend > .input-group-text {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: none;
}

/* Password Toggle Icon */
.password-toggle-wrap {
  float: right;
  margin-top: -32px;
  right: 12px;
  position: relative;
  z-index: 3;
  cursor: pointer;
  color: #64748b;
  user-select: none;
  transition: color 0.15s ease;
}

.password-toggle-wrap:hover {
  color: #0f172a;
}

/* ------------------------------------------------------------
   10. VALIDATION STATES & FEEDBACK
   ------------------------------------------------------------ */
.form-control.is-invalid,
.app-form-control.is-invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

.form-control.is-valid,
.app-form-control.is-valid {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
}

.invalid-feedback,
.error-text {
  color: #ef4444;
  font-size: 12px;
  font-weight: 500;
  margin-top: 5px;
  display: block;
}

.valid-feedback {
  color: #10b981;
  font-size: 12px;
  font-weight: 500;
  margin-top: 5px;
  display: block;
}

/* ------------------------------------------------------------
   11. CHECKBOXES & RADIOS
   ------------------------------------------------------------ */
input[type="checkbox"],
input[type="radio"] {
  accent-color: #8b1d24;
  cursor: pointer;
}