/* ==================================================================
   Modern Form Styles — Ari Solar
   Single source of truth for all form UI across the application.
   Covers: Auth forms, Admin Metronic forms, AJAX CRUD forms.
   ================================================================== */

/* --- Google Font: Inter (modern, clean) --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ==================================================================
   1. BASE FORM ELEMENTS
   ================================================================== */
.form-control,
.auth-input,
.form-control.form-control-solid,
.form-control.form-control-lg {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  padding: 0.625rem 0.875rem !important;
  border-radius: 0.5rem !important;
  border: 1.5px solid #d1d5db !important;
  background-color: #f9fafb !important;
  color: #111827 !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.form-control:hover,
.auth-input:hover,
.form-control.form-control-solid:hover {
  border-color: #9ca3af !important;
  background-color: #ffffff !important;
}

.form-control:focus,
.auth-input:focus,
.form-control.form-control-solid:focus {
  outline: none !important;
  border-color: #6366f1 !important;
  background-color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12) !important;
}

.form-control::placeholder,
.auth-input::placeholder {
  color: #9ca3af !important;
  font-weight: 400 !important;
}

/* Fix Metronic's form-control-solid overrides */
.form-control.form-control-solid {
  background-color: #f9fafb !important;
}
.form-control.form-control-solid:focus {
  background-color: #ffffff !important;
}

/* Select inputs */
.form-select,
.form-select.form-select-solid {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif !important;
  font-size: 0.875rem !important;
  padding: 0.625rem 2.25rem 0.625rem 0.875rem !important;
  border-radius: 0.5rem !important;
  border: 1.5px solid #d1d5db !important;
  background-color: #f9fafb !important;
  background-position: right 0.75rem center !important;
  background-size: 16px !important;
  color: #111827 !important;
  transition: all 0.2s ease !important;
  min-height: 2.75rem !important;
}

.form-select:hover,
.form-select.form-select-solid:hover {
  border-color: #9ca3af !important;
  background-color: #ffffff !important;
}

.form-select:focus,
.form-select.form-select-solid:focus {
  outline: none !important;
  border-color: #6366f1 !important;
  background-color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12) !important;
}

/* Textarea */
textarea.form-control {
  min-height: 6rem !important;
  resize: vertical !important;
}

/* ==================================================================
   2. FORM LABELS
   ================================================================== */
.form-label,
label.form-label,
label:not(.form-check-label):not(.btn):not(.auth-link) {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #374151 !important;
  margin-bottom: 0.375rem !important;
  letter-spacing: 0.01em !important;
}

/* Metronic's fw-bolder label override */
.form-label.fw-bolder {
  font-weight: 600 !important;
}

/* ==================================================================
   3. FORM LAYOUT / ROWS
   ================================================================== */
.fv-row,
.row.fv-row {
  margin-bottom: 1.25rem !important;
}

.fv-row > [class*="col-"],
.row.fv-row > [class*="col-"],
.row.gy-4 > [class*="col-"] {
  margin-bottom: 0.5rem;
}

.row.gy-4 {
  --bs-gutter-y: 1.25rem !important;
}

/* ==================================================================
   4. ERROR / VALIDATION STYLES
   ================================================================== */
.form-control.is-invalid,
.auth-input.is-invalid,
.form-control.form-control-solid.is-invalid {
  border-color: #dc2626 !important;
  background-color: #fef2f2 !important;
}

.form-control.is-invalid:focus,
.auth-input.is-invalid:focus,
.form-control.form-control-solid.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
  border-color: #dc2626 !important;
}

.invalid-feedback,
.fv-plugins-message-container,
.text-danger[id$="_error"] {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: #dc2626 !important;
  margin-top: 0.25rem !important;
  display: block !important;
}

/* ==================================================================
   5. BUTTONS
   ================================================================== */
.btn {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  padding: 0.5rem 1.25rem !important;
  border-radius: 0.5rem !important;
  transition: all 0.2s ease !important;
  letter-spacing: 0.01em !important;
}

.btn-primary {
  background: #4f46e5 !important;
  border-color: #4f46e5 !important;
  color: #ffffff !important;
}

.btn-primary:hover {
  background: #4338ca !important;
  border-color: #4338ca !important;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3) !important;
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0) !important;
  box-shadow: none !important;
}

.btn-primary:focus {
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2) !important;
}

.btn-secondary {
  background: #f3f4f6 !important;
  border-color: #e5e7eb !important;
  color: #374151 !important;
}

.btn-secondary:hover {
  background: #e5e7eb !important;
  border-color: #d1d5db !important;
}

.btn-danger {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
}

.btn-danger:hover {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
  transform: translateY(-1px);
}

.btn-success {
  background: #10b981 !important;
  border-color: #10b981 !important;
}

.btn-success:hover {
  background: #059669 !important;
  border-color: #059669 !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
  transform: translateY(-1px);
}

.btn-light {
  background: #f9fafb !important;
  border-color: #e5e7eb !important;
  color: #374151 !important;
}

.btn-light:hover {
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
}

.btn-lg {
  padding: 0.625rem 1.5rem !important;
  font-size: 0.9375rem !important;
}

/* ==================================================================
   6. AUTH-SPECIFIC OVERRIDES (login, register, password reset)
   ================================================================== */

/* Auth cards — cleaner spacing */
.login-card,
.auth-card {
  padding: 2rem 2rem !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04) !important;
  border: 1px solid #f3f4f6 !important;
}

.login-card:hover,
.auth-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
}

/* Auth headings */
.login-header h1,
.auth-title {
  font-family: 'Poppins', sans-serif !important;
  font-size: 1.375rem !important;
  font-weight: 700 !important;
  color: #111827 !important;
}

.login-header p,
.auth-subtitle {
  font-size: 0.8125rem !important;
  color: #6b7280 !important;
}

/* Auth buttons */
.btn-login,
.auth-btn {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: 0.5rem !important;
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
  border: none !important;
  color: #ffffff !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  width: 100% !important;
  letter-spacing: 0.01em !important;
}

.btn-login:hover,
.auth-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.35) !important;
  background: linear-gradient(135deg, #4338ca 0%, #4f46e5 100%) !important;
}

.btn-login:active,
.auth-btn:active {
  transform: translateY(0) !important;
}

/* Forgot link */
.forgot-link {
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  color: #4f46e5 !important;
}

.forgot-link:hover {
  color: #4338ca !important;
}

/* Error/success messages in auth */
.error-message,
.success-message {
  font-size: 0.8125rem !important;
  border-radius: 0.5rem !important;
  padding: 0.75rem 1rem !important;
}

/* Auth form groups */
.form-group {
  margin-bottom: 1.25rem !important;
}

/* ==================================================================
   7. CARD COMPONENTS (admin)
   ================================================================== */
.card {
  border-radius: 0.75rem !important;
  border: 1px solid #f3f4f6 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03) !important;
  overflow: hidden;
}

.card-header {
  padding: 1rem 1.5rem !important;
  background: #ffffff !important;
  border-bottom: 1px solid #f3f4f6 !important;
}

.card-header h1,
.card-header h4,
.card-header .card-title h4 {
  font-family: 'Poppins', sans-serif !important;
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  color: #111827 !important;
}

.card-body {
  padding: 1.5rem !important;
}

.card-footer {
  padding: 1rem 1.5rem !important;
  background: #f9fafb !important;
  border-top: 1px solid #f3f4f6 !important;
}

/* ==================================================================
   8. MODAL FORMS
   ================================================================== */
.modal-content {
  border-radius: 0.75rem !important;
  border: none !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.12) !important;
}

.modal-header {
  padding: 1.25rem 1.5rem !important;
  border-bottom: 1px solid #f3f4f6 !important;
}

.modal-header .modal-title {
  font-family: 'Poppins', sans-serif !important;
  font-size: 1.0625rem !important;
  font-weight: 600 !important;
}

.modal-body {
  padding: 1.5rem !important;
}

.modal-footer {
  padding: 1rem 1.5rem !important;
  border-top: 1px solid #f3f4f6 !important;
}

/* ==================================================================
   9. CHECKBOXES / RADIOS
   ================================================================== */
.form-check-input {
  width: 1.125em !important;
  height: 1.125em !important;
  margin-top: 0.15em !important;
  border: 1.5px solid #d1d5db !important;
  border-radius: 0.25em !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
}

.form-check-input:checked {
  background-color: #4f46e5 !important;
  border-color: #4f46e5 !important;
}

.form-check-input:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12) !important;
}

.form-check-label {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif !important;
  font-size: 1rem !important;
  color: #374151 !important;
  cursor: pointer !important;
}

/* Radio buttons */
input[type="radio"].form-check-input {
  border-radius: 50% !important;
}

/* ==================================================================
   10. BREADCRUMB
   ================================================================== */
.breadcrumb {
  padding: 0.5rem 0 !important;
  margin-bottom: 1rem !important;
}

.breadcrumb-item {
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
}

.breadcrumb-item a {
  color: #4f46e5 !important;
  text-decoration: none !important;
}

.breadcrumb-item.active {
  color: #6b7280 !important;
}

/* ==================================================================
   11. SECTION HEADINGS (within forms)
   ================================================================== */
h5.text-primary.fw-medium {
  font-family: 'Poppins', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #4f46e5 !important;
}

/* ==================================================================
   12. SELECT2 OVERRIDES (used in many admin forms)
   ================================================================== */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border: 1.5px solid #d1d5db !important;
  border-radius: 0.5rem !important;
  min-height: 2.75rem !important;
  background-color: #f9fafb !important;
}

.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--multiple:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 2.75rem !important;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif !important;
  font-size: 0.875rem !important;
  color: #111827 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 2.75rem !important;
}

.select2-container--default .select2-search--dropdown {
  padding: 0.5rem !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1.5px solid #d1d5db !important;
  border-radius: 0.375rem !important;
  padding: 0.375rem 0.625rem !important;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif !important;
  font-size: 0.8125rem !important;
  outline: none !important;
  transition: border-color 0.2s ease !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12) !important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: #eef2ff !important;
  color: #4338ca !important;
}

.select2-container--default .select2-results__option--selected {
  background-color: #f3f4f6 !important;
}

.select2-dropdown {
  border: 1.5px solid #e5e7eb !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* ==================================================================
   13. FIELD SETS (inward/outward material forms)
   ================================================================== */
fieldset.material-item {
  border: 1px solid #e5e7eb !important;
  border-radius: 0.75rem !important;
  padding: 1.25rem !important;
  background: #fafbfc !important;
  transition: border-color 0.2s ease !important;
}

fieldset.material-item:hover {
  border-color: #d1d5db !important;
}

fieldset.material-item legend {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: #4f46e5 !important;
  width: auto !important;
  padding: 0 0.5rem !important;
}

/* ==================================================================
   14. RESPONSIVE TWEAKS
   ================================================================== */
@media (max-width: 767.98px) {
  .card-body {
    padding: 1.25rem !important;
  }

  .login-card,
  .auth-card {
    padding: 1.5rem !important;
  }

  .fv-row > [class*="col-"],
  .row.fv-row > [class*="col-"],
  .row.gy-4 > [class*="col-"] {
    margin-bottom: 0.75rem;
  }
}

.action_btn {
    padding: 1.3rem 1rem !important;
}