/**
 * ==========================================================================
 * VERIMUS DESIGN SYSTEM - FORM COMPONENTS
 * ==========================================================================
 * 
 * Consolidated form element styles for consistency across the site.
 * 
 * Form Classes:
 * - .form-group         = Form field wrapper
 * - .form-field         = Alternative field wrapper
 * - .form-label         = Field label
 * - .form-control       = Text inputs, textareas, selects
 * - .form-control-sm    = Small input variant
 * - .form-check         = Checkbox/radio wrapper
 * - .form-check-input   = Checkbox/radio input
 * - .form-check-label   = Checkbox/radio label
 * - .form-switch        = Toggle switch variant
 * - .form-actions       = Button container
 * 
 * Validation:
 * - .is-invalid / .is-valid
 * - .invalid-feedback / .valid-feedback
 * - .was-validated (form-level)
 * 
 * Depends on: _variables.css
 * Note: Button styles have been moved to components/buttons.css
 * ==========================================================================
 */

/* ==========================================================================
   Form Max-Width — standard 650px for all form containers
   ========================================================================== */

/* .content-body form:not(.search-form):not(.filter-form):not(.dataTables_filter):not(.woocommerce-form):not(.gform_wrapper form),
.content-body .form-container {
  max-width: 650px;
} */

/* ==========================================================================
   Form Groups
   ========================================================================== */

.form-group {
  margin-bottom: var(--spacing-md);
}

.form-group:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Labels
   ========================================================================== */

.form-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.form-label.required::after {
  content: " *";
  color: var(--error);
}

/* ==========================================================================
   Text Inputs, Textareas, Selects
   ========================================================================== */

.form-control {
  width: 100%;
  height: var(--input-height);
  padding: var(--input-padding-y) var(--input-padding-x);
  font-family: inherit;
  font-size: var(--input-font-size);
  font-weight: var(--font-weight-normal);
  color: var(--input-text-color);
  background-color: var(--input-bg);
  border: var(--input-border-width) solid var(--input-border-color);
  border-radius: var(--input-border-radius);
  transition: border-color var(--transition-base) var(--ease-in-out),
    box-shadow var(--transition-base) var(--ease-in-out);
}

.form-control:focus {
  outline: none;
  border-color: var(--input-focus-border-color);
  box-shadow: var(--input-focus-shadow), 0px 0px 0px 6px rgba(255, 128, 48, 0.2);
}

/* All placeholders: dark grey for visibility on white backgrounds */
.form-control::placeholder,
input::placeholder,
textarea::placeholder,
select::placeholder {
  color: var(--input-placeholder-color);
  opacity: 1;
}

.form-control:disabled,
.form-control[readonly] {
  background-color: var(--grayscale-100);
  color: var(--text-secondary);
  cursor: not-allowed;
}

/* Small input variant */
.form-control-sm {
  height: var(--input-height-sm);
  padding: var(--spacing-3) var(--input-padding-x);
  font-size: var(--font-size-xs);
}

/* Textarea specific */
textarea.form-control {
  height: auto;
  min-height: 100px;
  resize: vertical;
}

/* ==========================================================================
   Select Elements
   ========================================================================== */

/* Remove native browser arrow from all selects */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

select::-ms-expand {
  display: none;
}

/* Bootstrap .form-select standardization */
.form-select {
  height: var(--input-height);
  background-color: var(--input-bg);
  border: var(--input-border-width) solid var(--input-border-color);
  border-radius: var(--input-border-radius);
  font-size: var(--input-font-size);
  color: var(--input-text-color);
}

/* Non-Select2 selects get a custom arrow via background */
select.form-control {
  background-image: url('../../images/arrow-down.svg');
  background-repeat: no-repeat;
  background-position: right var(--spacing-3) center;
  background-size: 15px;
  padding-right: var(--spacing-10);
  background-color: var(--input-bg);
}

/* ==========================================================================
   Checkboxes and Radio Buttons
   ========================================================================== */

.form-check {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.form-check:last-child {
  margin-bottom: 0;
}

.form-check-input {
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid var(--grayscale-900);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--transition-base) var(--ease-in-out), border-color var(--transition-base) var(--ease-in-out);
}

.form-check-input[type="radio"] {
  border-radius: 50%;
}

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

.form-check-input:focus {
  outline: none;
  box-shadow: var(--input-focus-shadow);
  border-color: var(--main);
}

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

/* Switch/Toggle variant */
.form-switch .form-check-input {
  width: var(--spacing-10);
  height: var(--spacing-6);
  border-radius: var(--spacing-6);
  position: relative;
  background-color: var(--grayscale-200);
  border: none;
}

.form-switch .form-check-input::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: var(--spacing-5);
  height: var(--spacing-5);
  background-color: var(--white);
  border-radius: var(--radius-full);
  transition: transform var(--transition-base) var(--ease-in-out);
}

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

.form-switch .form-check-input:checked::before {
  transform: translateX(16px);
}

/* ==========================================================================
   Validation States
   ========================================================================== */

.form-control.is-invalid {
  border-color: var(--error);
}

.form-control.is-invalid:focus {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2);
}

.form-control.is-valid {
  border-color: var(--success);
}

.form-control.is-valid:focus {
  border-color: var(--success);
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.2);
}

.invalid-feedback {
  display: none;
  font-size: var(--font-size-xs);
  color: var(--error);
  margin-top: var(--spacing-xs);
}

.valid-feedback {
  display: none;
  font-size: var(--font-size-xs);
  color: var(--success);
  margin-top: var(--spacing-xs);
}

.form-control.is-invalid~.invalid-feedback,
.was-validated .form-control:invalid~.invalid-feedback {
  display: block;
}

.form-control.is-valid~.valid-feedback,
.was-validated .form-control:valid~.valid-feedback {
  display: block;
}

/* ==========================================================================
   Form Actions (Button Container)
   ========================================================================== */

.form-actions {
  display: flex;
  gap: var(--spacing-4);
  margin-top: var(--spacing-6);
}

.form-actions-right {
  justify-content: flex-end;
}

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

.form-actions-between {
  justify-content: space-between;
}

/* Stack on mobile */
@media screen and (max-width: 767px) {
  .form-actions {
    flex-direction: column;
  }

  .form-actions>* {
    width: 100%;
  }
}

/* ==========================================================================
   File Input
   ========================================================================== */

input[type="file"].form-control {
  height: auto;
  padding: var(--spacing-3);
}

input[type="file"].form-control::file-selector-button {
  padding: var(--spacing-2) var(--spacing-4);
  margin-right: var(--spacing-3);
  background-color: var(--gray-100);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--transition-base) var(--ease-in-out);
}

input[type="file"].form-control::file-selector-button:hover {
  background-color: var(--gray-200);
}

/* ==========================================================================
   Input Groups
   ========================================================================== */

.input-group {
  display: flex;
  position: relative;
}

.input-group>.form-control {
  flex: 1;
}

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

.input-group>.form-control:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group-text {
  display: flex;
  align-items: center;
  padding: var(--spacing-2) var(--spacing-4);
  background-color: var(--gray-100);
  border: 1px solid var(--input-border-color);
  color: var(--text-secondary);
}

.input-group-text:first-child {
  border-right: 0;
  border-radius: var(--input-border-radius) 0 0 var(--input-border-radius);
  height: var(--input-height);
}

.input-group-text:last-child {
  border-left: 0;
  border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0;
}

/* ==========================================================================
   Help Text
   ========================================================================== */

.form-text {
  display: block;
  margin-top: var(--spacing-1);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* ==========================================================================
   Form Field (Alternative wrapper)
   ========================================================================== */

.form-field {
  margin-bottom: var(--spacing-4);
}

.form-field:last-child {
  margin-bottom: 0;
}

/* Required indicator */
.required {
  color: var(--color-error);
}

/* ==========================================================================
   Dark Mode Overrides
   ========================================================================== */

.dark-mode .form-control {
  background-color: var(--dark-bg-tertiary);
  border-color: var(--dark-border);
  color: var(--dark-text-primary);
}

.dark-mode .form-control::placeholder,
.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
  color: var(--dark-text-muted);
}

.dark-mode .form-control:focus {
  border-color: var(--color-primary);
}

.dark-mode .form-control:disabled,
.dark-mode .form-control[readonly] {
  background-color: var(--dark-bg-secondary);
  color: var(--dark-text-secondary);
}

.dark-mode .form-label {
  color: var(--dark-text-primary);
}

.dark-mode .form-check-label {
  color: var(--dark-text-primary);
}

.dark-mode .form-check-input {
  border-color: var(--dark-text-secondary);
  background-color: var(--dark-bg-tertiary);
}

.dark-mode .form-switch .form-check-input {
  background-color: var(--gray-600);
}

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

.dark-mode .input-group-text {
  background-color: var(--dark-bg-secondary);
  border-color: var(--dark-border);
  color: var(--dark-text-secondary);
}

.dark-mode .form-text {
  color: var(--dark-text-muted);
}

.dark-mode select.form-control {
  background-image: url('../images/arrow-down-white.svg');
}

/* ==========================================================================
   UPLOAD/FILE COMPONENTS
   Moved to components/uploads.css during 2026-02-05 reorganization.
   ========================================================================== */

/* ==========================================================================
   HIDDEN ELEMENTS (for JS toggle)
   ========================================================================== */

.js-hidden {
  display: none;
}

.js-visible {
  display: block;
}

/* ==========================================================================
   DOCUMENT TABLE COMPONENTS
   ========================================================================== */

/* Grouped accordion items */
.documents-accordion .accordion-item {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.documents-accordion .accordion-button {
  background: var(--white);
  border: none;
  text-align: left;
}

.documents-accordion .accordion-button .template-name {
  font-size: var(--font-size-lg);
  color: var(--gray-700);
}

.documents-accordion .accordion-body {
  background: var(--gray-100);
}

.documents-accordion .sub-search {
  max-width: 300px;
}

/* PDF icon colors */
.pdf-download-link .icon-verimus-2 {
  color: var(--success);
}

.pdf-processing-status .icon-verimus-2 {
  color: var(--grayscale-500);
}

/* ==========================================================================
   FILE INPUT UTILITIES
   Moved to components/uploads.css during 2026-02-05 reorganization.
   ========================================================================== */