/**
 * @file
 * EP Form Styles - Form field styles
 * 
 * Purpose: Centralized form field styles for all EP modules
 * Location: /themes/custom/occasia_elegant/css/ep/components/ep-forms.css
 * Category: components/ (reusable UI components)
 * 
 * This file contains:
 * - Input field styles (text, email, number, etc.) - square edges
 * - Textarea styles - square edges
 * - Select/dropdown styles - square edges
 * - Checkbox styles (square, white, tick in center) - square edges
 * - Radio button styles - square edges
 * - Form validation styles (error, success)
 * - Form label styles
 * 
 * Reference: Contacts module has largest form file (750 lines) - primary source
 * Requirement: All form fields must have square edges (border-radius: 0)
 * Checkbox: Simple square box, white inside, black tick in center - easy to change site-wide
 * 
 * Decision Rule: If it's a reusable UI component → components/
 * 
 * See: /bitnami/drupal/modules/.cursor/THEME_STRUCTURE.md for structure documentation
 */

/**
 * ========================================
 * BOOTSTRAP BARRIO OVERRIDE SECTION
 * ========================================
 * 
 * CRITICAL: This section MUST override ALL Bootstrap Barrio form styles globally
 * These styles apply to ALL forms on the site, ensuring EP design system styling
 * takes precedence over Bootstrap Barrio defaults.
 * 
 * Bootstrap Barrio uses these classes:
 * - .form-control (all inputs, selects, textareas)
 * - .form-select (select dropdowns)
 * - .form-check (checkboxes/radios container)
 * - .form-check-input (checkbox/radio inputs)
 * - .form-check-label (checkbox/radio labels)
 * - .form-group (form field groups)
 * - .form-label (labels)
 * 
 * We override ALL of these to ensure EP styling wins.
 * Using high specificity and !important to guarantee override.
 */

/* ========================================
   GLOBAL BOOTSTRAP FORM CONTROL OVERRIDES
   ======================================== */

/* Override Bootstrap .form-control class - applies to ALL inputs, selects, textareas */
.form-control,
input.form-control,
textarea.form-control,
select.form-control,
.form-control[type="text"],
.form-control[type="email"],
.form-control[type="tel"],
.form-control[type="url"],
.form-control[type="number"],
.form-control[type="password"],
.form-control[type="search"],
.form-control[type="date"],
.form-control[type="time"],
.form-control[type="datetime-local"],
.form-control[type="month"],
.form-control[type="week"] {
  padding: var(--ep-form-field-padding-y) var(--ep-form-field-padding-x) !important; /* STRICT: consistent padding */
  font-family: var(--ep-font-family-base) !important;
  font-size: var(--ep-font-size-base) !important; /* STRICT: 16px - consistent */
  font-weight: var(--ep-font-weight-normal) !important;
  line-height: var(--ep-line-height-normal) !important;
  color: var(--ep-color-text-primary) !important;
  background-color: var(--ep-color-bg-primary) !important;
  border: var(--ep-border-width) solid var(--ep-color-input-border) !important;
  border-radius: 0 !important; /* FORCE square edges - override Bootstrap's rounded corners */
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  transition: border-color var(--ep-transition-base), box-shadow var(--ep-transition-base) !important;
  box-sizing: border-box !important;
  width: 100% !important; /* STRICT: consistent width */
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: calc(var(--ep-form-field-padding-y) * 2 + var(--ep-font-size-base) * var(--ep-line-height-normal)) !important; /* STRICT: consistent min-height */
}

.form-control:focus {
  outline: none !important;
  border-color: var(--ep-color-input-focus) !important;
  box-shadow: 0 0 0 2px var(--ep-color-primary-light) !important;
}

.form-control:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  background-color: var(--ep-color-bg-secondary) !important;
}

.form-control::placeholder {
  color: var(--ep-color-text-tertiary) !important;
  opacity: 1 !important;
}

/* ========================================
   BOOTSTRAP SELECT OVERRIDES
   ======================================== */

/* Override Bootstrap .form-select class */
.form-select,
select.form-select,
select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right var(--ep-spacing-sm) center !important;
  background-size: 12px !important;
  padding-right: calc(var(--ep-spacing-md) + 12px + var(--ep-spacing-sm)) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  border-radius: 0 !important; /* FORCE square edges */
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
}

.form-select::-ms-expand,
select.form-control::-ms-expand {
  display: none !important;
}

.form-select:focus,
select.form-control:focus {
  outline: none !important;
  border-color: var(--ep-color-input-focus) !important;
  box-shadow: 0 0 0 2px var(--ep-color-primary-light) !important;
}

/* ========================================
   BOOTSTRAP CHECKBOX/RADIO OVERRIDES
   ======================================== */

/* Override Bootstrap .form-check-input class */
.form-check-input,
input.form-check-input[type="checkbox"],
input.form-check-input[type="radio"],
.form-check .form-check-input {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  padding: 0 !important;
  margin: 0 !important;
  margin-right: var(--ep-spacing-sm) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-color: var(--ep-color-checkbox-bg) !important; /* White */
  border: var(--ep-border-width) solid var(--ep-color-checkbox-border) !important; /* Black border */
  border-radius: 0 !important; /* FORCE square edges */
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  cursor: pointer !important;
  position: relative !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
}

/* Checkbox checked state */
.form-check-input[type="checkbox"]:checked,
input.form-check-input[type="checkbox"]:checked {
  background-color: var(--ep-color-checkbox-bg) !important; /* White background */
  border-color: var(--ep-color-checkbox-border) !important; /* Black border */
}

/* Checkbox tick mark */
.form-check-input[type="checkbox"]:checked::after,
input.form-check-input[type="checkbox"]:checked::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) rotate(45deg) !important;
  width: 4px !important;
  height: 10px !important;
  border: solid var(--ep-color-checkbox-tick) !important; /* Black tick */
  border-width: 0 2px 2px 0 !important;
  border-radius: 0 !important;
}

/* Radio button checked state */
.form-check-input[type="radio"]:checked,
input.form-check-input[type="radio"]:checked {
  background-color: var(--ep-color-checkbox-bg) !important; /* White background */
  border-color: var(--ep-color-checkbox-border) !important; /* Black border */
}

/* Radio button dot */
.form-check-input[type="radio"]:checked::after,
input.form-check-input[type="radio"]:checked::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 8px !important;
  height: 8px !important;
  background-color: var(--ep-color-checkbox-tick) !important; /* Black dot */
  border-radius: 0 !important; /* Square dot */
}

.form-check-input:focus,
.form-check-input:focus-visible,
.form-check-input:active,
.form-check-input:checked:focus {
  outline: none !important;
  box-shadow: none !important;
}

.form-check-input:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* Override Bootstrap .form-check-label class */
.form-check-label,
label.form-check-label {
  margin-bottom: 0 !important;
  font-weight: var(--ep-font-weight-normal) !important;
  cursor: pointer !important;
  line-height: var(--ep-line-height-normal) !important;
  font-size: var(--ep-font-size-base) !important;
  color: var(--ep-color-text-primary) !important;
}

/* STEP 6: Checkbox/radio - simple 2-column grid, checkbox and label inline in column 2 */
/* The grid should be simple: column 1 (empty for checkboxes), column 2 (checkbox + label inline) */
/* Checkbox aligns with left edge of column 2 (same as date input field) */
.form-item:has(input[type="checkbox"]),
.form-item:has(input[type="radio"]),
.js-form-item:has(input[type="checkbox"]),
.js-form-item:has(input[type="radio"]),
.form-item.js-form-type-checkbox,
.form-item.js-form-type-radio,
.js-form-item.js-form-type-checkbox,
.js-form-item.js-form-type-radio {
  grid-template-columns: minmax(140px, auto) 1fr !important; /* Simple 2-column grid - matches global grid */
  grid-template-rows: auto !important; /* Single row - no nested grids */
  align-items: center !important;
  gap: var(--ep-spacing-md) var(--ep-spacing-md) !important; /* Same gap as global grid */
  display: grid !important;
}

/* .form-check wrapper goes in column 2 and uses flexbox for inline checkbox + label */
/* CRITICAL: Must align with left edge of column 2 (same as date input field) */
.form-item:has(input[type="checkbox"]) > .form-check,
.form-item:has(input[type="radio"]) > .form-check,
.js-form-item:has(input[type="checkbox"]) > .form-check,
.js-form-item:has(input[type="radio"]) > .form-check,
.form-item.js-form-type-checkbox > .form-check,
.form-item.js-form-type-radio > .form-check {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: flex !important; /* Flex container for inline checkbox + label */
  align-items: center !important;
  gap: var(--ep-spacing-sm) !important;
  margin: 0 !important;
  margin-left: 0 !important; /* CRITICAL: No left margin - align with column 2 start */
  padding: 0 !important;
  padding-left: 0 !important; /* CRITICAL: No left padding - align with column 2 start */
  border: none !important;
  outline: none !important;
  justify-content: flex-start !important; /* Align checkbox to left edge */
  width: 100% !important; /* Match width of other inputs in column 2 */
  box-sizing: border-box !important;
}

/* Override Bootstrap .form-check container - flatten it for non-checkbox cases */
.form-check:not(.form-item > .form-check):not(.js-form-item > .form-check) {
  display: contents !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Checkbox input - goes inside the flex container, aligned to left edge */
.form-item:has(input[type="checkbox"]) input[type="checkbox"],
.form-item:has(input[type="radio"]) input[type="radio"],
.js-form-item:has(input[type="checkbox"]) input[type="checkbox"],
.js-form-item:has(input[type="radio"]) input[type="radio"],
.form-check-input,
.form-item .form-check-input,
.js-form-item .form-check-input,
.form-item input[type="checkbox"],
.form-item input[type="radio"],
.form-item.js-form-type-checkbox input[type="checkbox"],
.form-item.js-form-type-radio input[type="radio"] {
  /* Remove grid positioning - it's inside the flex container now */
  grid-column: auto !important;
  grid-row: auto !important;
  width: auto !important;
  flex-shrink: 0 !important;
  margin-left: 0 !important; /* CRITICAL: No left margin - align with column 2 start */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-right: var(--ep-spacing-sm) !important; /* Always add spacing between checkbox/radio and label */
  padding: 0 !important;
  padding-left: 0 !important; /* CRITICAL: No left padding - align with column 2 start */
}

/* Label - goes inside the flex container, inline with checkbox */
.form-item:has(input[type="checkbox"]) label,
.form-item:has(input[type="radio"]) label,
.js-form-item:has(input[type="checkbox"]) label,
.js-form-item:has(input[type="radio"]) label,
.form-check-label,
.form-item .form-check-label,
.js-form-item .form-check-label,
.form-item.js-form-type-checkbox label,
.form-item.js-form-type-radio label,
.form-item.js-form-type-checkbox .form-item__label,
.form-item.js-form-type-radio .form-item__label {
  /* Remove grid positioning - it's inside the flex container now */
  grid-column: auto !important;
  grid-row: auto !important;
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: normal !important;
}

/* REMOVED: Duplicate .form-check rule - the one above (line 235) handles it correctly */

/* ========================================
   BOOTSTRAP FORM GROUP OVERRIDES
   ======================================== */

/* Override Bootstrap .form-group class */
.form-group {
  margin-bottom: var(--ep-form-group-margin) !important;
}

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

/* ========================================
   BOOTSTRAP LABEL OVERRIDES
   ======================================== */

/* Override Bootstrap .form-label class */
.form-label,
label.form-label {
  margin-bottom: var(--ep-form-label-margin) !important;
  font-family: var(--ep-font-family-base) !important;
  font-size: var(--ep-font-size-base) !important; /* Consistent font size - NOT page title size */
  font-weight: var(--ep-font-weight-medium) !important; /* Medium weight, NOT bold */
  color: var(--ep-color-text-primary) !important;
  line-height: var(--ep-line-height-normal) !important;
}

/* ========================================
   BOOTSTRAP TEXTAREA OVERRIDES
   ======================================== */

textarea.form-control {
  min-height: 100px !important;
  resize: vertical !important;
  border-radius: 0 !important; /* FORCE square edges */
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
}

/* ========================================
   DRUPAL NATIVE FORM CLASS OVERRIDES
   ======================================== */

/* Override Drupal's native form classes globally (not just Bootstrap) */
/* These apply to ALL forms, ensuring EP styling works everywhere */

/* Drupal form text inputs */
.form-text,
.form-email,
.form-tel,
.form-url,
.form-number,
.form-password,
.form-search,
.form-date,
.form-time,
.form-datetime,
.form-textarea,
.form-select,
.form-autocomplete {
  padding: var(--ep-form-field-padding-y) var(--ep-form-field-padding-x) !important; /* STRICT: consistent padding */
  font-family: var(--ep-font-family-base) !important;
  font-size: var(--ep-font-size-base) !important; /* STRICT: 16px - consistent */
  font-weight: var(--ep-font-weight-normal) !important;
  line-height: var(--ep-line-height-normal) !important;
  color: var(--ep-color-text-primary) !important;
  background-color: var(--ep-color-bg-primary) !important;
  border: var(--ep-border-width) solid var(--ep-color-input-border) !important;
  border-radius: 0 !important; /* FORCE square edges */
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  transition: border-color var(--ep-transition-base), box-shadow var(--ep-transition-base) !important;
  box-sizing: border-box !important;
  width: 100% !important; /* STRICT: consistent width */
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: calc(var(--ep-form-field-padding-y) * 2 + var(--ep-font-size-base) * var(--ep-line-height-normal)) !important; /* STRICT: consistent min-height */
}

.form-text:focus,
.form-email:focus,
.form-tel:focus,
.form-url:focus,
.form-number:focus,
.form-password:focus,
.form-search:focus,
.form-date:focus,
.form-time:focus,
.form-datetime:focus,
.form-textarea:focus,
.form-select:focus,
.form-autocomplete:focus {
  outline: none !important;
  border-color: var(--ep-color-input-focus) !important;
  box-shadow: 0 0 0 2px var(--ep-color-primary-light) !important;
}

.form-text:disabled,
.form-email:disabled,
.form-tel:disabled,
.form-url:disabled,
.form-number:disabled,
.form-password:disabled,
.form-search:disabled,
.form-date:disabled,
.form-time:disabled,
.form-datetime:disabled,
.form-textarea:disabled,
.form-select:disabled,
.form-autocomplete:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  background-color: var(--ep-color-bg-secondary) !important;
}

/* Drupal checkbox/radio classes */
.form-checkbox,
.form-radio,
input.form-checkbox,
input.form-radio {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  padding: 0 !important;
  margin: 0 !important;
  margin-right: var(--ep-spacing-sm) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-color: var(--ep-color-checkbox-bg) !important;
  border: var(--ep-border-width) solid var(--ep-color-checkbox-border) !important;
  border-radius: 0 !important; /* FORCE square edges */
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  cursor: pointer !important;
  position: relative !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
}

.form-checkbox:checked,
input.form-checkbox:checked {
  background-color: var(--ep-color-checkbox-bg) !important;
  border-color: var(--ep-color-checkbox-border) !important;
}

.form-checkbox:checked::after,
input.form-checkbox:checked::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) rotate(45deg) !important;
  width: 4px !important;
  height: 10px !important;
  border: solid var(--ep-color-checkbox-tick) !important;
  border-width: 0 2px 2px 0 !important;
  border-radius: 0 !important;
}

.form-radio:checked,
input.form-radio:checked {
  background-color: var(--ep-color-checkbox-bg) !important;
  border-color: var(--ep-color-checkbox-border) !important;
}

.form-radio:checked::after,
input.form-radio:checked::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 8px !important;
  height: 8px !important;
  background-color: var(--ep-color-checkbox-tick) !important;
  border-radius: 0 !important;
}

.form-checkbox:focus,
.form-radio:focus,
.form-checkbox:focus-visible,
.form-radio:focus-visible,
.form-checkbox:active,
.form-radio:active,
input.form-checkbox:focus,
input.form-radio:focus,
input.form-checkbox:focus-visible,
input.form-radio:focus-visible,
input.form-checkbox:active,
input.form-radio:active {
  outline: none !important;
  box-shadow: none !important;
}

.form-checkbox:disabled,
.form-radio:disabled,
input.form-checkbox:disabled,
input.form-radio:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* ========================================
   GLOBAL FORM GRID SYSTEM - SIMPLE & ROBUST
   ======================================== */
   
/**
 * CRITICAL: Simple, strict grid system for ALL forms
 * Labels ALWAYS in column 1, inputs ALWAYS in column 2
 * No exceptions - works for ALL form structures
 */

/* STEP 1: Make ALL form items use grid layout - ABSOLUTE ENFORCEMENT */
.form-item,
.js-form-item,
.form-wrapper .form-item,
.form-wrapper .js-form-item,
.form-group,
form .form-item,
form .js-form-item,
form > .form-item,
form > .js-form-item,
form > .form-group,
* > .form-item,
* > .js-form-item {
  display: grid !important;
  grid-template-columns: minmax(140px, auto) 1fr !important; /* Label column (140px min) | Input column (flexible) */
  align-items: center !important;
  gap: var(--ep-spacing-md) var(--ep-spacing-md) !important; /* Vertical gap | Horizontal gap */
  margin-bottom: var(--ep-form-group-margin) !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  grid-auto-flow: row !important; /* Force each item into its own row */
}

/* STEP 2: ALL labels go in column 1 - no exceptions */
.form-item label,
.js-form-item label,
.form-group label,
.form-item > label,
.js-form-item > label,
.form-group > label,
.form-item label:first-of-type,
.js-form-item label:first-of-type,
.form-item .form-item__label,
.js-form-item .form-item__label {
  grid-column: 1 !important;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  font-family: var(--ep-font-family-base) !important;
  font-size: var(--ep-font-size-base) !important; /* STRICT: 16px */
  font-weight: var(--ep-font-weight-medium) !important;
  color: var(--ep-color-text-primary) !important;
  line-height: var(--ep-line-height-normal) !important;
  align-self: center !important;
  white-space: nowrap !important;
  display: block !important;
}

/* STEP 3: ALL inputs go in column 2 - EXCEPT checkboxes and radios - STRICT WIDTH ENFORCEMENT */
.form-item input:not([type="checkbox"]):not([type="radio"]),
.js-form-item input:not([type="checkbox"]):not([type="radio"]),
.form-item textarea,
.js-form-item textarea,
.form-item select,
.js-form-item select,
.form-item .form-text,
.js-form-item .form-text,
.form-item .form-email,
.js-form-item .form-email,
.form-item .form-date,
.js-form-item .form-date,
.form-item .form-time,
.js-form-item .form-time,
.form-item .form-textarea,
.js-form-item .form-textarea,
.form-item .form-select,
.js-form-item .form-select,
.form-item .form-control,
.js-form-item .form-control,
.form-item .form-autocomplete,
.js-form-item .form-autocomplete,
.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group textarea,
.form-group select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="search"]:not(.ep-events-search-input),
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
  grid-column: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  font-family: var(--ep-font-family-base) !important;
  font-size: var(--ep-font-size-base) !important; /* STRICT: 16px */
  font-weight: var(--ep-font-weight-normal) !important;
  line-height: var(--ep-line-height-normal) !important;
  padding: var(--ep-form-field-padding-y) var(--ep-form-field-padding-x) !important;
  height: auto !important;
  min-height: calc(var(--ep-form-field-padding-y) * 2 + var(--ep-font-size-base) * var(--ep-line-height-normal)) !important;
  /* Force same width for ALL fields */
  flex: 0 0 100% !important;
}

/* STEP 4: Datetime wrapper goes in column 2 - SAME WIDTH AS OTHER FIELDS */
.form-item .form-datetime-wrapper,
.js-form-item .form-datetime-wrapper,
.form-item .js-form-type-datetime,
.js-form-item .js-form-type-datetime {
  grid-column: 2 !important;
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  align-items: center !important;
  gap: var(--ep-spacing-xs) !important;
  box-sizing: border-box !important;
  flex: 0 0 100% !important; /* Same width as other fields */
}

.form-item .form-datetime-wrapper input,
.js-form-item .form-datetime-wrapper input,
.form-item .js-form-type-datetime input,
.js-form-item .js-form-type-datetime input {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  font-size: var(--ep-font-size-base) !important;
}

.form-item .form-datetime-wrapper .form-item__icon,
.js-form-item .form-datetime-wrapper .form-item__icon,
.form-item .form-datetime-wrapper button,
.js-form-item .form-datetime-wrapper button,
.form-item .js-form-type-datetime .form-item__icon,
.js-form-item .js-form-type-datetime .form-item__icon {
  flex-shrink: 0 !important;
}

/* STEP 5: Textarea - label aligns to top */
.form-item:has(textarea),
.js-form-item:has(textarea),
.form-item:has(.form-textarea),
.js-form-item:has(.form-textarea) {
  align-items: start !important;
}

.form-item:has(textarea) label,
.js-form-item:has(textarea) label,
.form-item:has(.form-textarea) label,
.js-form-item:has(.form-textarea) label {
  align-self: start !important;
  margin-top: var(--ep-form-field-padding-y) !important;
}

/* REMOVED: Duplicate STEP 6 checkbox rules - handled above at lines 244-286 */

/* STEP 7: Last form item - no bottom margin */
.form-item:last-child,
.js-form-item:last-child,
.form-group:last-child {
  margin-bottom: 0 !important;
}

/* STEP 8: Override any nested form-item that might break grid */
.form-item .form-item,
.js-form-item .form-item,
.form-item .js-form-item,
.js-form-item .js-form-item {
  display: contents !important; /* Flatten nested structure */
}

/* EXCEPTION: Don't flatten form-items inside date field form-inline - they need to be visible */
/* Generic selector: targets any datetime field with datetime-default widget (date-only fields) */
/* This must come AFTER the general rule above to override it */
.form-wrapper.field--widget-datetime-default .form-inline .form-item,
.form-wrapper.field--widget-datetime-default .form-inline .js-form-item,
form .form-wrapper.field--widget-datetime-default .form-inline .form-item,
form .form-wrapper.field--widget-datetime-default .form-inline .js-form-item,
.ep-form .form-wrapper.field--widget-datetime-default .form-inline .form-item,
.ep-form .form-wrapper.field--widget-datetime-default .form-inline .js-form-item {
  display: block !important; /* Override the display: contents from STEP 8 */
}

/* STEP 9: Ensure form containers don't break grid - CRITICAL */
form,
form[class*="form"],
.form-wrapper,
.form-wrapper-inline,
.fieldset-wrapper {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* STEP 10: Force ALL form fields to be same width - override any inline styles or other CSS */
.form-item input[type="text"],
.form-item input[type="email"],
.form-item input[type="date"],
.form-item input[type="time"],
.form-item textarea,
.form-item select,
.js-form-item input[type="text"],
.js-form-item input[type="email"],
.js-form-item input[type="date"],
.js-form-item input[type="time"],
.js-form-item textarea,
.js-form-item select {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* ========================================
   STRICT FONT SIZE ENFORCEMENT
   ======================================== */
   
/**
 * CRITICAL: Enforce consistent 16px font size on ALL form elements
 * This overrides any Bootstrap, Drupal, or theme defaults
 */

/* All form inputs - STRICT 16px font size */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="search"]:not(.ep-events-search-input),
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
textarea,
select {
  font-size: var(--ep-font-size-base) !important; /* STRICT: 16px */
  font-family: var(--ep-font-family-base) !important;
  font-weight: var(--ep-font-weight-normal) !important;
  line-height: var(--ep-line-height-normal) !important;
}

/* All form labels - STRICT 16px font size */
.form-item label,
.js-form-item label,
.form-group label,
.form-label,
label {
  font-size: var(--ep-font-size-base) !important; /* STRICT: 16px - same as inputs */
  font-family: var(--ep-font-family-base) !important;
  font-weight: var(--ep-font-weight-medium) !important;
  line-height: var(--ep-line-height-normal) !important;
}

/* ========================================
   STRICT FIELD SIZING
   ======================================== */
   
/**
 * CRITICAL: Enforce consistent field sizes (width, height, padding)
 * All form fields must have identical dimensions
 */

/* All form inputs - STRICT consistent sizing */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="search"]:not(.ep-events-search-input),
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
select {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: var(--ep-form-field-padding-y) var(--ep-form-field-padding-x) !important; /* STRICT: consistent padding */
  box-sizing: border-box !important;
  height: auto !important;
  min-height: calc(var(--ep-form-field-padding-y) * 2 + var(--ep-font-size-base) * var(--ep-line-height-normal)) !important; /* Consistent min-height */
}

textarea {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: var(--ep-form-field-padding-y) var(--ep-form-field-padding-x) !important; /* STRICT: consistent padding */
  box-sizing: border-box !important;
  min-height: 100px !important;
}

/* ========================================
   END BOOTSTRAP BARRIO OVERRIDE SECTION
   ======================================== */

/**
 * Form Field Base Styles
 * 
 * All form fields start with these base styles - square edges
 */

.ep-form-field {
  display: block;
  width: 100%;
  padding: var(--ep-form-field-padding-y) var(--ep-form-field-padding-x); /* Grid-based spacing */
  font-family: var(--ep-font-family-base);
  font-size: var(--ep-font-size-base);
  line-height: var(--ep-line-height-normal);
  color: var(--ep-color-text-primary);
  background-color: var(--ep-color-bg-primary);
  border: var(--ep-border-width) solid var(--ep-color-input-border);
  border-radius: var(--ep-border-radius); /* Square edges */
  transition: border-color var(--ep-transition-base), box-shadow var(--ep-transition-base);
}

.ep-form-field:focus {
  outline: none;
  border-color: var(--ep-color-input-focus);
  box-shadow: 0 0 0 2px var(--ep-color-primary-light);
}

.ep-form-field:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--ep-color-bg-secondary);
}

.ep-form-field::placeholder {
  color: var(--ep-color-text-tertiary);
  opacity: 1;
}

/**
 * Text Inputs
 */

input[type="text"].ep-form-field,
input[type="email"].ep-form-field,
input[type="number"].ep-form-field,
input[type="tel"].ep-form-field,
input[type="url"].ep-form-field,
input[type="password"].ep-form-field,
input[type="search"].ep-form-field {
  /* Inherits from .ep-form-field */
}

/**
 * Textarea
 */

textarea.ep-form-field {
  min-height: 100px;
  resize: vertical;
}

/**
 * Select/Dropdown
 */

select.ep-form-field {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--ep-spacing-sm) center;
  background-size: 12px;
  padding-right: calc(var(--ep-spacing-md) + 12px + var(--ep-spacing-sm));
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

select.ep-form-field::-ms-expand {
  display: none;
}

/**
 * Checkboxes
 * 
 * Simple square box, white inside, black tick in center
 * Easy to change site-wide via --ep-color-checkbox-tick variable
 */

input[type="checkbox"].ep-form-field {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  padding: 0;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--ep-color-checkbox-bg); /* White */
  border: var(--ep-border-width) solid var(--ep-color-checkbox-border); /* Black border */
  border-left: var(--ep-border-width) solid var(--ep-color-checkbox-border) !important;
  border-right: var(--ep-border-width) solid var(--ep-color-checkbox-border) !important;
  border-top: var(--ep-border-width) solid var(--ep-color-checkbox-border) !important;
  border-bottom: var(--ep-border-width) solid var(--ep-color-checkbox-border) !important;
  border-radius: var(--ep-border-radius); /* Square edges - no rounded corners */
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  flex-shrink: 0;
}

input[type="checkbox"].ep-form-field:checked {
  background-color: var(--ep-color-checkbox-bg); /* White background */
  border-color: var(--ep-color-checkbox-border) !important; /* Black border */
  border-width: var(--ep-border-width) !important;
  border-style: solid !important;
  border-left: var(--ep-border-width) solid var(--ep-color-checkbox-border) !important;
  border-right: var(--ep-border-width) solid var(--ep-color-checkbox-border) !important;
  border-top: var(--ep-border-width) solid var(--ep-color-checkbox-border) !important;
  border-bottom: var(--ep-border-width) solid var(--ep-color-checkbox-border) !important;
}

/* Tick mark - black, centered */
input[type="checkbox"].ep-form-field:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 4px;
  height: 10px;
  border: solid var(--ep-color-checkbox-tick); /* Black tick - easy to change site-wide */
  border-width: 0 2px 2px 0;
  border-radius: 0;
}

/* Remove focus outline on mouse clicks, but keep for keyboard navigation */
input[type="checkbox"].ep-form-field:focus:not(:focus-visible) {
  outline: none !important;
  border-color: var(--ep-color-checkbox-border) !important;
  border-width: var(--ep-border-width) !important;
  border-style: solid !important;
  border-left: var(--ep-border-width) solid var(--ep-color-checkbox-border) !important;
  border-right: var(--ep-border-width) solid var(--ep-color-checkbox-border) !important;
  border-top: var(--ep-border-width) solid var(--ep-color-checkbox-border) !important;
  border-bottom: var(--ep-border-width) solid var(--ep-color-checkbox-border) !important;
  box-shadow: none !important;
}

input[type="checkbox"].ep-form-field:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--ep-color-checkbox-border) !important;
  border-width: var(--ep-border-width) !important;
  border-style: solid !important;
  border-left: var(--ep-border-width) solid var(--ep-color-checkbox-border) !important;
  border-right: var(--ep-border-width) solid var(--ep-color-checkbox-border) !important;
  border-top: var(--ep-border-width) solid var(--ep-color-checkbox-border) !important;
  border-bottom: var(--ep-border-width) solid var(--ep-color-checkbox-border) !important;
}

input[type="checkbox"].ep-form-field:active {
  outline: none !important; /* Remove any outline on click */
  border-color: var(--ep-color-checkbox-border) !important;
  border-width: var(--ep-border-width) !important;
  border-style: solid !important;
  border-left: var(--ep-border-width) solid var(--ep-color-checkbox-border) !important;
  border-right: var(--ep-border-width) solid var(--ep-color-checkbox-border) !important;
  border-top: var(--ep-border-width) solid var(--ep-color-checkbox-border) !important;
  border-bottom: var(--ep-border-width) solid var(--ep-color-checkbox-border) !important;
  box-shadow: none !important;
}

/* When checkbox is both focused and active (clicked) */
input[type="checkbox"].ep-form-field:focus:active:not(:focus-visible) {
  outline: none !important;
  border-color: var(--ep-color-checkbox-border) !important;
  border-width: var(--ep-border-width) !important;
  border-style: solid !important;
  border-left: var(--ep-border-width) solid var(--ep-color-checkbox-border) !important;
  border-right: var(--ep-border-width) solid var(--ep-color-checkbox-border) !important;
  border-top: var(--ep-border-width) solid var(--ep-color-checkbox-border) !important;
  border-bottom: var(--ep-border-width) solid var(--ep-color-checkbox-border) !important;
  box-shadow: none !important;
}

input[type="checkbox"].ep-form-field:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Site-wide: no blue/purple focus ring on checkbox or radio interaction */
input[type="checkbox"]:focus,
input[type="checkbox"]:focus-visible,
input[type="checkbox"]:active,
input[type="checkbox"]:checked:focus,
input[type="radio"]:focus,
input[type="radio"]:focus-visible,
input[type="radio"]:active,
input[type="radio"]:checked:focus,
.task-checkbox:focus,
.task-checkbox:focus-visible,
.task-checkbox:active,
.task-checkbox:checked:focus {
  outline: none !important;
  box-shadow: none !important;
}

/**
 * Radio Buttons
 * 
 * Square radio buttons (or can be made circular if preferred)
 */

input[type="radio"].ep-form-field {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  padding: 0;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--ep-color-checkbox-bg); /* White */
  border: var(--ep-border-width) solid var(--ep-color-checkbox-border); /* Black border */
  border-radius: var(--ep-border-radius); /* Square edges */
  cursor: pointer;
  position: relative;
  vertical-align: middle;
}

input[type="radio"].ep-form-field:checked {
  background-color: var(--ep-color-checkbox-bg); /* White background */
  border-color: var(--ep-color-checkbox-border); /* Black border */
}

/* Radio button dot - black, centered */
input[type="radio"].ep-form-field:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background-color: var(--ep-color-checkbox-tick); /* Black dot - easy to change site-wide */
  border-radius: 0; /* Square dot */
}

input[type="radio"].ep-form-field:focus,
input[type="radio"].ep-form-field:focus-visible,
input[type="radio"].ep-form-field:active {
  outline: none !important;
  box-shadow: none !important;
}

input[type="radio"].ep-form-field:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/**
 * File Upload
 */

input[type="file"].ep-form-field {
  padding: var(--ep-spacing-xs);
  cursor: pointer;
}

input[type="file"].ep-form-field::file-selector-button {
  padding: var(--ep-spacing-sm) var(--ep-spacing-md);
  margin-right: var(--ep-spacing-md);
  font-family: var(--ep-font-family-base);
  font-size: var(--ep-font-size-sm);
  border: var(--ep-border-width) solid var(--ep-color-border-dark);
  border-radius: var(--ep-border-radius); /* Square edges */
  background-color: var(--ep-color-bg-secondary);
  cursor: pointer;
  transition: all var(--ep-transition-base);
}

input[type="file"].ep-form-field::file-selector-button:hover {
  background-color: var(--ep-color-bg-hover);
}

/**
 * Form Labels
 */

.ep-form-label {
  display: block;
  margin-bottom: var(--ep-form-label-margin); /* Grid-based spacing */
  font-family: var(--ep-font-family-base);
  font-size: var(--ep-font-size-base);
  font-weight: var(--ep-font-weight-medium);
  color: var(--ep-color-text-primary);
  line-height: var(--ep-line-height-normal);
}

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

/**
 * Form Groups/Containers
 */

.ep-form-group {
  margin-bottom: var(--ep-form-group-margin); /* Grid-based spacing */
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ep-form-grid-gap); /* Grid-based gap between form elements */
}

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

/**
 * Form Validation Styles
 */

.ep-form-field--error {
  border-color: var(--ep-color-error);
}

.ep-form-field--error:focus {
  border-color: var(--ep-color-error);
  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.1);
}

.ep-form-field--success {
  border-color: var(--ep-color-success);
}

.ep-form-message {
  display: block;
  margin-top: var(--ep-form-label-margin); /* Grid-based spacing */
  font-size: var(--ep-font-size-sm);
  line-height: var(--ep-line-height-normal);
}

.ep-form-message--error {
  color: var(--ep-color-error);
}

.ep-form-message--success {
  color: var(--ep-color-success);
}

.ep-form-message--help {
  color: var(--ep-color-text-tertiary);
}

/**
 * Checkbox/Radio with Label
 */

.ep-form-checkbox,
.ep-form-radio {
  display: flex;
  align-items: flex-start;
  gap: var(--ep-form-grid-gap); /* Grid-based spacing */
  margin-bottom: var(--ep-form-grid-gap); /* Grid-based spacing */
}

.ep-form-checkbox input[type="checkbox"],
.ep-form-radio input[type="radio"] {
  margin-top: 2px; /* Align with label text */
  flex-shrink: 0;
}

.ep-form-checkbox label,
.ep-form-radio label {
  margin: 0;
  font-weight: var(--ep-font-weight-normal);
  cursor: pointer;
  line-height: var(--ep-line-height-normal);
}

.ep-form-checkbox input[type="checkbox"]:disabled + label,
.ep-form-radio input[type="radio"]:disabled + label {
  opacity: 0.5;
  cursor: not-allowed;
}

/**
 * Legacy Form Support
 * 
 * Support for existing form classes during migration
 */

.form-item .ep-form-field,
.form-wrapper .ep-form-field {
  /* Ensure compatibility with Drupal form structure */
}

/**
 * EP Form Wrapper
 * 
 * Apply grid spacing system to forms using .ep-form class
 * Higher specificity to override Drupal default styles
 * 
 * CRITICAL: These styles MUST override Drupal's default form styles
 * Using !important and high specificity to ensure they take precedence
 */

/* Target form element directly */
form.ep-form,
.ep-form {
  /* Ensure form wrapper uses EP design system */
}

/* REMOVED: Duplicate grid system for .ep-form - conflicts with Global Grid System */
/* The Global Grid System (lines 440-676) handles ALL forms, including .ep-form forms */
/* This section was causing conflicts - removed to use single unified grid system */

/* REMOVED: Conflicting .ep-form grid rules - Global Grid System handles all forms */
/* These rules had higher specificity and were overriding the global grid system */

/* CRITICAL: Form labels - ensure consistent font size (NOT page title size) */
/* Override Bootstrap Barrio and Drupal defaults */
form.ep-form .form-item label,
.ep-form .form-item label,
form.ep-form .js-form-item label,
.ep-form .js-form-item label,
form.ep-form .form-item > label,
.ep-form .form-item > label,
form.ep-form .js-form-item > label,
.ep-form .js-form-item > label,
form.ep-form .form-item label.form-item__label,
.ep-form .form-item label.form-item__label,
form.ep-form .form-item .form-item__label,
.ep-form .form-item .form-item__label,
form.ep-form .form-group label,
.ep-form .form-group label,
form.ep-form .form-group .form-label,
.ep-form .form-group .form-label,
form.ep-form .form-label,
.ep-form .form-label,
form.ep-form .form-item label[for*="start_time"],
form.ep-form .form-item label[for*="end_time"],
form.ep-form .form-item label[for*="all_day"],
.ep-form .form-item label[for*="start_time"],
.ep-form .form-item label[for*="end_time"],
.ep-form .form-item label[for*="all_day"] {
  margin-bottom: 0 !important; /* No bottom margin for inline labels */
  font-family: var(--ep-font-family-base) !important;
  font-size: var(--ep-font-size-base) !important; /* Consistent font size - 16px (NOT page title size) */
  font-weight: var(--ep-font-weight-medium) !important; /* Medium weight, NOT bold */
  color: var(--ep-color-text-primary) !important;
  line-height: var(--ep-line-height-normal) !important;
  display: block !important; /* Ensure label is block for grid */
}

/* Hide form field descriptions (helper text) - user doesn't want them */
form.ep-form .form-item .description,
.ep-form .form-item .description,
form.ep-form .js-form-item .description,
.ep-form .js-form-item .description,
form.ep-form .form-item__description,
.ep-form .form-item__description,
form.ep-form .form-item .form-item__description,
.ep-form .form-item .form-item__description {
  display: none !important; /* Hide descriptions completely */
}

/* REMOVED: Conflicting .ep-form textarea rules - Global Grid System handles this */
/* The Global Grid System (STEP 5, lines 588-602) handles textarea alignment */

form.ep-form .form-item label.option,
.ep-form .form-item label.option,
form.ep-form .js-form-item label.option,
.ep-form .js-form-item label.option {
  /* Radio/checkbox labels should not have bottom margin */
  margin-bottom: 0 !important;
  font-weight: var(--ep-font-weight-normal) !important;
}

/* REMOVED: Conflicting .ep-form grid column rules - Global Grid System handles this */
/* These rules were redundant and potentially conflicting with the global grid system */

/* Datetime wrapper icon/button should not shrink */
form.ep-form .form-item .form-datetime-wrapper .form-item__icon,
.ep-form .form-item .form-datetime-wrapper .form-item__icon,
form.ep-form .form-item .form-datetime-wrapper button,
.ep-form .form-item .form-datetime-wrapper button {
  flex-shrink: 0 !important;
}

/* Target all input types and Drupal form classes */
/* CRITICAL: Must override Drupal's default rounded corners and ensure consistent font sizes */
form.ep-form .form-item input[type="text"],
form.ep-form .form-item input[type="email"],
form.ep-form .form-item input[type="tel"],
form.ep-form .form-item input[type="url"],
form.ep-form .form-item input[type="number"],
form.ep-form .form-item input[type="password"],
form.ep-form .form-item input[type="search"],
form.ep-form .form-item input[type="date"],
form.ep-form .form-item input[type="time"],
form.ep-form .form-item textarea,
form.ep-form .form-item select,
form.ep-form .form-item .form-text,
form.ep-form .form-item .form-email,
form.ep-form .form-item .form-tel,
form.ep-form .form-item .form-url,
form.ep-form .form-item .form-number,
form.ep-form .form-item .form-password,
form.ep-form .form-item .form-search,
form.ep-form .form-item .form-date,
form.ep-form .form-item .form-time,
form.ep-form .form-item .form-textarea,
form.ep-form .form-item .form-select,
form.ep-form .form-item .form-autocomplete,
form.ep-form .form-item .form-control,
form.ep-form .form-group .form-control,
form.ep-form .form-wrapper input[type="text"],
form.ep-form .form-wrapper input[type="date"],
form.ep-form .form-wrapper input[type="time"],
form.ep-form .form-wrapper textarea,
form.ep-form .form-wrapper select,
form.ep-form .form-item .form-datetime-wrapper input,
.ep-form .form-item input[type="text"],
.ep-form .form-item input[type="email"],
.ep-form .form-item input[type="tel"],
.ep-form .form-item input[type="url"],
.ep-form .form-item input[type="number"],
.ep-form .form-item input[type="password"],
.ep-form .form-item input[type="search"],
.ep-form .form-item input[type="date"],
.ep-form .form-item input[type="time"],
.ep-form .form-item textarea,
.ep-form .form-item select,
.ep-form .form-item .form-text,
.ep-form .form-item .form-email,
.ep-form .form-item .form-tel,
.ep-form .form-item .form-url,
.ep-form .form-item .form-number,
.ep-form .form-item .form-password,
.ep-form .form-item .form-search,
.ep-form .form-item .form-date,
.ep-form .form-item .form-time,
.ep-form .form-item .form-textarea,
.ep-form .form-item .form-select,
.ep-form .form-item .form-autocomplete,
.ep-form .form-item .form-control,
.ep-form .form-group .form-control,
.ep-form .form-wrapper input[type="text"],
.ep-form .form-wrapper input[type="date"],
.ep-form .form-wrapper input[type="time"],
.ep-form .form-wrapper textarea,
.ep-form .form-wrapper select,
.ep-form .form-item .form-datetime-wrapper input {
  padding: var(--ep-form-field-padding-y) var(--ep-form-field-padding-x) !important; /* Grid-based padding */
  font-family: var(--ep-font-family-base) !important;
  font-size: var(--ep-font-size-base) !important; /* Consistent font size - 16px */
  font-weight: var(--ep-font-weight-normal) !important; /* Normal weight for inputs */
  line-height: var(--ep-line-height-normal) !important;
  color: var(--ep-color-text-primary) !important;
  background-color: var(--ep-color-bg-primary) !important;
  border: var(--ep-border-width) solid var(--ep-color-input-border) !important;
  border-radius: 0 !important; /* FORCE square edges - override Drupal AND Bootstrap defaults */
  -webkit-border-radius: 0 !important; /* Safari */
  -moz-border-radius: 0 !important; /* Firefox */
  transition: border-color var(--ep-transition-base), box-shadow var(--ep-transition-base) !important;
  box-sizing: border-box !important; /* Include padding in width calculation */
}

form.ep-form .form-item input:focus,
form.ep-form .form-item textarea:focus,
form.ep-form .form-item select:focus,
form.ep-form .form-item .form-text:focus,
form.ep-form .form-item .form-email:focus,
form.ep-form .form-item .form-date:focus,
form.ep-form .form-item .form-textarea:focus,
form.ep-form .form-item .form-select:focus,
form.ep-form .form-item .form-autocomplete:focus,
.ep-form .form-item input:focus,
.ep-form .form-item textarea:focus,
.ep-form .form-item select:focus,
.ep-form .form-item .form-text:focus,
.ep-form .form-item .form-email:focus,
.ep-form .form-item .form-date:focus,
.ep-form .form-item .form-textarea:focus,
.ep-form .form-item .form-select:focus,
.ep-form .form-item .form-autocomplete:focus {
  outline: none !important;
  border-color: var(--ep-color-input-focus) !important;
  box-shadow: 0 0 0 2px var(--ep-color-primary-light) !important;
}

/**
 * Datetime Fields
 * Ensure datetime time inputs match form field font size and styling
 */

/* CRITICAL: Labels and descriptions within datetime wrappers must have consistent font size */
/* Target ALL possible nested structures within datetime widgets */
form.ep-form .form-item .form-datetime-wrapper label,
form.ep-form .form-item .form-datetime-wrapper .form-item__label,
form.ep-form .form-item .form-datetime-wrapper .form-item label,
form.ep-form .form-item .form-datetime-wrapper .js-form-item label,
form.ep-form .form-item .form-datetime-wrapper .js-form-type-datetime label,
form.ep-form .form-item .form-datetime-wrapper .js-form-type-datetime-time label,
form.ep-form .form-item .form-datetime-wrapper .form-type-datetime label,
form.ep-form .form-item .form-datetime-wrapper .form-type-datetime-time label,
form.ep-form .form-item .form-datetime-wrapper .form-item .form-item__label,
form.ep-form .form-item .form-datetime-wrapper .js-form-item .form-item__label,
form.ep-form .form-item .js-form-type-datetime label,
form.ep-form .form-item .js-form-type-datetime-time label,
form.ep-form .form-item .js-form-type-datetime .form-item__label,
form.ep-form .form-item .js-form-type-datetime-time .form-item__label,
.ep-form .form-item .form-datetime-wrapper label,
.ep-form .form-item .form-datetime-wrapper .form-item__label,
.ep-form .form-item .form-datetime-wrapper .form-item label,
.ep-form .form-item .form-datetime-wrapper .js-form-item label,
.ep-form .form-item .form-datetime-wrapper .js-form-type-datetime label,
.ep-form .form-item .form-datetime-wrapper .js-form-type-datetime-time label,
.ep-form .form-item .form-datetime-wrapper .form-type-datetime label,
.ep-form .form-item .form-datetime-wrapper .form-type-datetime-time label,
.ep-form .form-item .form-datetime-wrapper .form-item .form-item__label,
.ep-form .form-item .form-datetime-wrapper .js-form-item .form-item__label,
.ep-form .form-item .js-form-type-datetime label,
.ep-form .form-item .js-form-type-datetime-time label,
.ep-form .form-item .js-form-type-datetime .form-item__label,
.ep-form .form-item .js-form-type-datetime-time .form-item__label,
.form-item .form-datetime-wrapper label,
.form-item .form-datetime-wrapper .form-item__label,
.form-item .form-datetime-wrapper .form-item label,
.form-item .form-datetime-wrapper .js-form-item label,
.form-item .form-datetime-wrapper .js-form-type-datetime label,
.form-item .form-datetime-wrapper .js-form-type-datetime-time label,
.form-item .form-datetime-wrapper .form-type-datetime label,
.form-item .form-datetime-wrapper .form-type-datetime-time label,
.form-item .form-datetime-wrapper .form-item .form-item__label,
.form-item .form-datetime-wrapper .js-form-item .form-item__label,
.form-item .js-form-type-datetime label,
.form-item .js-form-type-datetime-time label,
.form-item .js-form-type-datetime .form-item__label,
.form-item .js-form-type-datetime-time .form-item__label {
  font-family: var(--ep-font-family-base) !important;
  font-size: var(--ep-font-size-base) !important; /* Consistent font size - 16px (NOT page title size) */
  font-weight: var(--ep-font-weight-medium) !important;
  color: var(--ep-color-text-primary) !important;
  line-height: var(--ep-line-height-normal) !important;
}

/* Hide descriptions within datetime wrappers - target ALL nested structures */
form.ep-form .form-item .form-datetime-wrapper .description,
form.ep-form .form-item .form-datetime-wrapper .form-item__description,
form.ep-form .form-item .form-datetime-wrapper .form-item .description,
form.ep-form .form-item .form-datetime-wrapper .js-form-item .description,
form.ep-form .form-item .form-datetime-wrapper .js-form-type-datetime .description,
form.ep-form .form-item .form-datetime-wrapper .js-form-type-datetime-time .description,
form.ep-form .form-item .js-form-type-datetime .description,
form.ep-form .form-item .js-form-type-datetime-time .description,
.ep-form .form-item .form-datetime-wrapper .description,
.ep-form .form-item .form-datetime-wrapper .form-item__description,
.ep-form .form-item .form-datetime-wrapper .form-item .description,
.ep-form .form-item .form-datetime-wrapper .js-form-item .description,
.ep-form .form-item .form-datetime-wrapper .js-form-type-datetime .description,
.ep-form .form-item .form-datetime-wrapper .js-form-type-datetime-time .description,
.ep-form .form-item .js-form-type-datetime .description,
.ep-form .form-item .js-form-type-datetime-time .description,
.form-item .form-datetime-wrapper .description,
.form-item .form-datetime-wrapper .form-item__description,
.form-item .form-datetime-wrapper .form-item .description,
.form-item .form-datetime-wrapper .js-form-item .description,
.form-item .form-datetime-wrapper .js-form-type-datetime .description,
.form-item .form-datetime-wrapper .js-form-type-datetime-time .description,
.form-item .js-form-type-datetime .description,
.form-item .js-form-type-datetime-time .description {
  display: none !important;
}

/* CRITICAL: Style fieldset legends as labels for datetime fields */
/* This fixes the "From Time" and "To Time" fields that are rendered as legends */
form.ep-form .form-item fieldset legend,
form.ep-form .form-item fieldset .fieldset-legend,
form.ep-form .form-item fieldset .fieldset__legend,
.ep-form .form-item fieldset legend,
.ep-form .form-item fieldset .fieldset-legend,
.ep-form .form-item fieldset .fieldset__legend,
.form-item fieldset legend,
.form-item fieldset .fieldset-legend,
.form-item fieldset .fieldset__legend,
form.ep-form .form-item[data-drupal-selector*="start_time"] fieldset legend,
form.ep-form .form-item[data-drupal-selector*="end_time"] fieldset legend,
form.ep-form .form-item[data-drupal-selector*="start_time"] fieldset .fieldset-legend,
form.ep-form .form-item[data-drupal-selector*="end_time"] fieldset .fieldset-legend,
.ep-form .form-item[data-drupal-selector*="start_time"] fieldset legend,
.ep-form .form-item[data-drupal-selector*="end_time"] fieldset legend,
.ep-form .form-item[data-drupal-selector*="start_time"] fieldset .fieldset-legend,
.ep-form .form-item[data-drupal-selector*="end_time"] fieldset .fieldset-legend {
  font-family: var(--ep-font-family-base) !important;
  font-size: var(--ep-font-size-base) !important; /* 16px - same as labels, NOT page title size */
  font-weight: var(--ep-font-weight-medium) !important; /* Medium weight, NOT bold */
  color: var(--ep-color-text-primary) !important;
  line-height: var(--ep-line-height-normal) !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  display: block !important; /* Display as block like labels */
  width: auto !important;
  float: none !important;
  position: static !important;
}

form.ep-form .form-item input[type="time"],
form.ep-form .form-item .form-datetime-wrapper input[type="text"],
form.ep-form .form-item .form-datetime-wrapper input[type="time"],
form.ep-form .form-item .form-datetime-wrapper input[type="date"],
.ep-form .form-item input[type="time"],
.ep-form .form-item input[type="date"],
.ep-form .form-item .form-datetime-wrapper input[type="text"],
.ep-form .form-item .form-datetime-wrapper input[type="time"],
.ep-form .form-item .form-datetime-wrapper input[type="date"],
.form-item input[type="time"],
.form-item input[type="date"],
.form-item .form-datetime-wrapper input[type="text"],
.form-item .form-datetime-wrapper input[type="time"],
.form-item .form-datetime-wrapper input[type="date"] {
  font-size: var(--ep-font-size-base) !important; /* Consistent font size - 16px */
  font-family: var(--ep-font-family-base) !important;
  font-weight: var(--ep-font-weight-normal) !important;
  padding: var(--ep-form-field-padding-y) var(--ep-form-field-padding-x) !important; /* Grid-based padding */
  border: var(--ep-border-width) solid var(--ep-color-input-border) !important;
  border-radius: 0 !important; /* FORCE square edges */
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
}

form.ep-form .form-item .form-datetime-wrapper input:focus,
.ep-form .form-item .form-datetime-wrapper input:focus,
.form-item .form-datetime-wrapper input:focus {
  outline: none !important;
  border-color: var(--ep-color-input-focus) !important;
  box-shadow: 0 0 0 2px var(--ep-color-primary-light) !important;
}

/**
 * Form Buttons
 * 
 * Form buttons are styled in ep-buttons.css
 * Drupal's .button class within .ep-form automatically gets EP button styles
 */

/**
 * Checkbox styling for EP forms
 * Ensure checkboxes use EP design system styling - matches .ep-form-field checkbox styles
 */

form.ep-form .form-item input[type="checkbox"],
.ep-form .form-item input[type="checkbox"],
form.ep-form .form-item .form-checkbox,
.ep-form .form-item .form-checkbox,
form.ep-form .form-item label input[type="checkbox"],
.ep-form .form-item label input[type="checkbox"],
form.ep-form .form-item label .form-checkbox,
.ep-form .form-item label .form-checkbox {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  padding: 0 !important;
  margin: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-color: var(--ep-color-checkbox-bg) !important; /* White */
  border: var(--ep-border-width) solid var(--ep-color-checkbox-border) !important; /* Black border */
  border-radius: 0 !important; /* Square edges - FORCE square */
  -webkit-border-radius: 0 !important; /* Safari */
  -moz-border-radius: 0 !important; /* Firefox */
  cursor: pointer !important;
  position: relative !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important; /* Don't shrink in flex container */
}

form.ep-form .form-item input[type="checkbox"]:checked,
.ep-form .form-item input[type="checkbox"]:checked,
form.ep-form .form-item .form-checkbox:checked,
.ep-form .form-item .form-checkbox:checked,
form.ep-form .form-item label input[type="checkbox"]:checked,
.ep-form .form-item label input[type="checkbox"]:checked,
form.ep-form .form-item label .form-checkbox:checked,
.ep-form .form-item label .form-checkbox:checked {
  background-color: var(--ep-color-checkbox-bg) !important; /* White background */
  border-color: var(--ep-color-checkbox-border) !important; /* Black border */
  border-width: var(--ep-border-width) !important;
  border-style: solid !important;
}

/* Checkbox tick - black, centered (border-based) */
form.ep-form .form-item input[type="checkbox"]:checked::after,
.ep-form .form-item input[type="checkbox"]:checked::after,
form.ep-form .form-item .form-checkbox:checked::after,
.ep-form .form-item .form-checkbox:checked::after,
form.ep-form .form-item label input[type="checkbox"]:checked::after,
.ep-form .form-item label input[type="checkbox"]:checked::after,
form.ep-form .form-item label .form-checkbox:checked::after,
.ep-form .form-item label .form-checkbox:checked::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) rotate(45deg) !important;
  width: 4px !important;
  height: 10px !important;
  border: solid var(--ep-color-checkbox-tick) !important; /* Black tick - easy to change site-wide */
  border-width: 0 2px 2px 0 !important;
  border-radius: 0 !important;
  display: block !important;
}

/**
 * ============================================================================
 * REMOVED: ContentEntityForm Grid System (CONFLICTED WITH GLOBAL GRID)
 * ============================================================================
 * 
 * This section was removed because it conflicted with the Global Form Grid System.
 * The Global Grid System (lines 440-676) handles ALL forms, including ContentEntityForm.
 * 
 * The removed section was trying to make the FORM a grid container and use display:contents
 * on form-items, which broke the global grid system that needs form-items to be grids.
 * 
 * The Global Form Grid System now handles all form layouts consistently.
 */

/* ========================================
   DATE FIELD STRUCTURE FIX
   ======================================== */

/**
 * CRITICAL: Fix date field structure to match standard form field structure
 * 
 * Problem: Drupal's datetime widget creates:
 *   form-wrapper > label + form-inline > form-item > input
 * 
 * Solution: Restructure to match standard:
 *   form-wrapper > form-item > label + input
 * 
 * This CSS works with DateFieldStructureFixer service to ensure consistent padding
 * and alignment across all date fields.
 */

/* CRITICAL: Style form-inline wrapper in date fields */
/* Title field: form-wrapper > form-item > label + input (direct) */
/* Date field: form-wrapper > label + form-inline > form-item > input */
/* Keep form-inline visible but position it correctly in grid - MUST match form-item width from title field */
/* Override Bootstrap's form-inline flex display which can constrain width */
.form-wrapper.field--name-date .form-inline,
.form-wrapper.field--name-date #edit-date-0-value.form-inline,
.form-wrapper.field--name-date #edit-date-0-value,
.form-wrapper.field--name-date .form-date.form-inline,
form .form-wrapper.field--name-date .form-inline,
form .form-wrapper.field--name-date #edit-date-0-value.form-inline,
form .form-wrapper.field--name-date #edit-date-0-value,
form .form-wrapper.field--name-date .form-date.form-inline,
.ep-form .form-wrapper.field--name-date .form-inline,
.ep-form .form-wrapper.field--name-date #edit-date-0-value.form-inline,
.ep-form .form-wrapper.field--name-date #edit-date-0-value,
.ep-form .form-wrapper.field--name-date .form-date.form-inline {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: block !important; /* Override Bootstrap's flex display - use block like title field's form-item */
  box-sizing: border-box !important;
  /* Remove any default form-inline styling that might constrain width */
  padding: 0 !important;
  margin: 0 !important;
}

/* Ensure date field wrapper uses grid layout like other fields when label is at wrapper level */
/* Generic selector: targets any datetime field with datetime-default widget when label is at wrapper level */
/* This handles the case where Drupal puts the label at wrapper level instead of inside form-item */
.form-wrapper.field--widget-datetime-default:has(> label),
form .form-wrapper.field--widget-datetime-default:has(> label),
.ep-form .form-wrapper.field--widget-datetime-default:has(> label) {
  display: grid !important;
  grid-template-columns: minmax(140px, auto) 1fr !important;
  align-items: center !important;
  gap: var(--ep-spacing-md) var(--ep-spacing-md) !important;
  margin-bottom: var(--ep-form-group-margin) !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Date field label at wrapper level goes in column 1 */
/* Generic selector: targets any datetime field with datetime-default widget */
.form-wrapper.field--widget-datetime-default:has(> label) > label.label,
.form-wrapper.field--widget-datetime-default:has(> label) > label,
form .form-wrapper.field--widget-datetime-default:has(> label) > label.label,
form .form-wrapper.field--widget-datetime-default:has(> label) > label,
.ep-form .form-wrapper.field--widget-datetime-default:has(> label) > label.label,
.ep-form .form-wrapper.field--widget-datetime-default:has(> label) > label {
  grid-column: 1 !important;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  font-family: var(--ep-font-family-base) !important;
  font-size: var(--ep-font-size-base) !important; /* 16px - same as other form labels */
  font-weight: var(--ep-font-weight-medium) !important;
  color: var(--ep-color-text-primary) !important;
  line-height: var(--ep-line-height-normal) !important;
}

/* Date field input wrapper goes in column 2 */
/* Generic selector: targets any datetime field with datetime-default widget */
.form-wrapper.field--widget-datetime-default:has(> label) > .form-inline,
.form-wrapper.field--widget-datetime-default:has(> label) > .form-item,
form .form-wrapper.field--widget-datetime-default:has(> label) > .form-inline,
form .form-wrapper.field--widget-datetime-default:has(> label) > .form-item,
.ep-form .form-wrapper.field--widget-datetime-default:has(> label) > .form-inline,
.ep-form .form-wrapper.field--widget-datetime-default:has(> label) > .form-item {
  grid-column: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: block !important; /* Ensure visible */
}

/* Hide descriptions in date fields */
.form-wrapper.field--widget-datetime-default .description,
.form-wrapper.field--widget-datetime-default small.description,
form .form-wrapper.field--widget-datetime-default .description,
form .form-wrapper.field--widget-datetime-default small.description,
.ep-form .form-wrapper.field--widget-datetime-default .description,
.ep-form .form-wrapper.field--widget-datetime-default small.description {
  display: none !important;
}

/* CRITICAL: Handle simple forms (FormBase) where label and form-inline are siblings */
/* Simple forms don't have .form-wrapper containers, so we need different CSS */
/* Target label + form-inline pattern for date fields in simple forms */
.ep-form > label.label:has(+ .form-inline input[type="date"]),
.ep-form > label.label:has(+ .form-inline .form-date),
form.ep-form > label.label:has(+ .form-inline input[type="date"]),
form.ep-form > label.label:has(+ .form-inline .form-date) {
  display: inline-block;
  width: auto;
  min-width: 140px;
  margin-right: var(--ep-spacing-md);
  vertical-align: middle;
}

.ep-form > label.label:has(+ .form-inline input[type="date"]) + .form-inline,
.ep-form > label.label:has(+ .form-inline .form-date) + .form-inline,
form.ep-form > label.label:has(+ .form-inline input[type="date"]) + .form-inline,
form.ep-form > label.label:has(+ .form-inline .form-date) + .form-inline {
  display: inline-block;
  width: auto;
  flex: 1;
  vertical-align: middle;
}

/* Better approach: Wrap label + form-inline in a grid container using CSS */
/* Use a wrapper div approach - but we need the service to add it */
/* For now, use flexbox on the form to align label + form-inline */
.ep-form:has(> label.label + .form-inline input[type="date"]),
.ep-form:has(> label.label + .form-inline .form-date),
form.ep-form:has(> label.label + .form-inline input[type="date"]),
form.ep-form:has(> label.label + .form-inline .form-date) {
  /* Don't make form a grid - that breaks other fields */
}

/* Instead, wrap each date field group in a container using CSS Grid subgrid or wrapper */
/* The service should add a wrapper container for simple forms */

/* CRITICAL: Remove grid layout from date field's form-item - it should NOT be a grid */
/* The grid is on the wrapper level (.form-wrapper.field--widget-datetime-default), not on the form-item */
/* The form-item-date-0-value-date should be a simple block container like title field's form-item */
/* This must override the global grid system (line 540) which applies grid to ALL .form-item elements */
.form-wrapper.field--widget-datetime-default .form-item-date-0-value-date,
.form-wrapper.field--widget-datetime-default .form-item-test-date-date,
.form-wrapper.field--name-date .form-inline .form-item-date-0-value-date,
.form-wrapper.field--name-date #edit-date-0-value .form-item-date-0-value-date,
.form-wrapper.field--name-date .form-inline .form-item,
.form-wrapper.field--name-date #edit-date-0-value .form-item,
form .form-wrapper.field--name-date .form-item-date-0-value-date,
form .form-wrapper.field--name-date .form-inline .form-item-date-0-value-date,
form .form-wrapper.field--name-date #edit-date-0-value .form-item-date-0-value-date,
form .form-wrapper.field--name-date .form-inline .form-item,
form .form-wrapper.field--name-date #edit-date-0-value .form-item,
.ep-form .form-wrapper.field--name-date .form-item-date-0-value-date,
.ep-form .form-wrapper.field--name-date .form-inline .form-item-date-0-value-date,
.ep-form .form-wrapper.field--name-date #edit-date-0-value .form-item-date-0-value-date,
.ep-form .form-wrapper.field--name-date .form-inline .form-item,
.ep-form .form-wrapper.field--name-date #edit-date-0-value .form-item {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-bottom: 0 !important;
  display: block !important; /* CRITICAL: Override global grid system - simple block container */
  grid-template-columns: none !important; /* Remove grid */
  grid-column: auto !important; /* Remove grid column positioning */
  box-sizing: border-box !important;
  /* Ensure input inside takes full width like title field */
  padding: 0 !important;
  gap: 0 !important;
  align-items: unset !important; /* Remove grid alignment */
  grid-auto-flow: unset !important; /* Remove grid flow */
}

/* Remove form-no-label class styling */
.form-wrapper.field--name-date .form-item.form-no-label,
form .form-wrapper.field--name-date .form-item.form-no-label,
.ep-form .form-wrapper.field--name-date .form-item.form-no-label {
  margin-bottom: 0 !important;
}

/* Ensure date input takes full width - override size attribute and any other width constraints */
/* CRITICAL: Must match title field width exactly - use same selectors and rules */
.form-wrapper.field--name-date input[type="date"],
.form-wrapper.field--name-date .form-date,
.form-wrapper.field--name-date .form-inline input[type="date"],
.form-wrapper.field--name-date #edit-date-0-value input[type="date"],
.form-wrapper.field--name-date .form-item input[type="date"],
.form-wrapper.field--name-date .form-item-date-0-value-date input[type="date"],
.form-wrapper.field--name-date #edit-date-0-value-date,
form .form-wrapper.field--name-date input[type="date"],
form .form-wrapper.field--name-date .form-date,
form .form-wrapper.field--name-date .form-inline input[type="date"],
form .form-wrapper.field--name-date #edit-date-0-value input[type="date"],
form .form-wrapper.field--name-date .form-item input[type="date"],
form .form-wrapper.field--name-date .form-item-date-0-value-date input[type="date"],
form .form-wrapper.field--name-date #edit-date-0-value-date,
.ep-form .form-wrapper.field--name-date input[type="date"],
.ep-form .form-wrapper.field--name-date .form-date,
.ep-form .form-wrapper.field--name-date .form-inline input[type="date"],
.ep-form .form-wrapper.field--name-date #edit-date-0-value input[type="date"],
.ep-form .form-wrapper.field--name-date .form-item input[type="date"],
.ep-form .form-wrapper.field--name-date .form-item-date-0-value-date input[type="date"],
.ep-form .form-wrapper.field--name-date #edit-date-0-value-date {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  /* Force width calculation - size attribute is overridden by width: 100% */
  flex: 0 0 100% !important; /* Same as title field */
}

/* ========================================
   ALL DAY EVENT CHECKBOX FIELD GRID FIX
   ======================================== */

/**
 * CRITICAL: Fix "All Day Event" checkbox field to use grid layout like other fields
 * 
 * Problem: Checkbox field doesn't have a grid wrapper, so label doesn't align with other fields
 * 
 * Solution: Apply grid to the form-wrapper level, similar to date field
 * Structure: form-wrapper > form-item (checkbox + label)
 * Grid: Column 1 (empty for alignment), Column 2 (checkbox + label inline)
 * 
 * TODO: Make this generic for all checkbox fields (currently field-name-specific)
 */

/* Ensure all_day field wrapper uses grid layout like other fields */
.form-wrapper.field--name-all-day,
form .form-wrapper.field--name-all-day,
.ep-form .form-wrapper.field--name-all-day {
  display: grid !important;
  grid-template-columns: minmax(140px, auto) 1fr !important;
  align-items: center !important;
  gap: var(--ep-spacing-md) var(--ep-spacing-md) !important;
  margin-bottom: var(--ep-form-group-margin) !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* All Day Event form-item goes in column 2 */
/* CRITICAL: Don't stretch form-item - let checkbox be natural size */
.form-wrapper.field--name-all-day > .form-item,
.form-wrapper.field--name-all-day > .js-form-item,
form .form-wrapper.field--name-all-day > .form-item,
form .form-wrapper.field--name-all-day > .js-form-item,
.ep-form .form-wrapper.field--name-all-day > .form-item,
.ep-form .form-wrapper.field--name-all-day > .js-form-item {
  grid-column: 2 !important;
  width: auto !important; /* Don't stretch - natural width */
  min-width: 0 !important;
  max-width: none !important;
  margin-bottom: 0 !important;
  display: flex !important; /* Flex container for inline checkbox + label */
  align-items: center !important;
  gap: var(--ep-spacing-sm) !important;
  padding: 0 !important;
  margin-left: 0 !important; /* Align with column 2 start */
  box-sizing: border-box !important;
  justify-content: flex-start !important; /* Align checkbox to left edge of column 2 */
}

/* CRITICAL: Ensure checkbox has normal size - not stretched */
/* Must explicitly set 18px to match global checkbox size and prevent stretching */
.form-wrapper.field--name-all-day .form-check-input,
.form-wrapper.field--name-all-day .form-checkbox,
.form-wrapper.field--name-all-day input[type="checkbox"],
form .form-wrapper.field--name-all-day .form-check-input,
form .form-wrapper.field--name-all-day .form-checkbox,
form .form-wrapper.field--name-all-day input[type="checkbox"],
.ep-form .form-wrapper.field--name-all-day .form-check-input,
.ep-form .form-wrapper.field--name-all-day .form-checkbox,
.ep-form .form-wrapper.field--name-all-day input[type="checkbox"] {
  width: 18px !important; /* Explicit size - matches global checkbox size */
  height: 18px !important; /* Explicit size */
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important; /* Prevent stretching */
  max-height: 18px !important;
  margin: 0 !important;
  margin-right: var(--ep-spacing-sm) !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important; /* Don't grow - keep natural size */
  box-sizing: border-box !important;
}

.form-wrapper.field--name-all-day .form-check-label,
form .form-wrapper.field--name-all-day .form-check-label,
.ep-form .form-wrapper.field--name-all-day .form-check-label {
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important; /* Don't grow - natural width */
  width: auto !important;
}

/* ========================================
   TIME FIELD STRUCTURE FIX
   ======================================== */

/**
 * CRITICAL: Fix time field structure to match standard form field structure
 * 
 * Problem: Drupal's datetime widget creates a complex structure for time-only fields
 * Structure: wrapper.field--widget-datetime-time-only > form-inline > form-item > (label + input)
 * 
 * Solution: Apply grid layout to wrapper, flatten nested structure, position label/input correctly
 * 
 * This applies to ALL time-only datetime fields automatically - uses .field--widget-datetime-time-only class
 * Extracted from ep-calendar.css and made generic for reuse across all forms
 */

/* Ensure time field wrapper uses grid layout like other fields */
/* CRITICAL: Override .form-wrapper { display: block !important; } with higher specificity */
/* Use the EXACT same grid rules as .form-item (from ep-forms.css lines 538-559) */
form.ep-form .field--widget-datetime-time-only.form-wrapper,
form.ep-form .field--widget-datetime-time-only,
.ep-form .field--widget-datetime-time-only.form-wrapper,
.ep-form .field--widget-datetime-time-only {
  display: grid !important; /* Override .form-wrapper { display: block !important; } */
  grid-template-columns: minmax(140px, auto) 1fr !important; /* Same as .form-item */
  align-items: center !important; /* Same as .form-item */
  gap: var(--ep-spacing-md) var(--ep-spacing-md) !important; /* Same as .form-item */
  margin-bottom: var(--ep-form-group-margin) !important; /* Same as .form-item */
  width: 100% !important; /* Same as .form-item */
  max-width: 100% !important; /* Same as .form-item */
  box-sizing: border-box !important; /* Same as .form-item */
  grid-auto-flow: row !important; /* Same as .form-item */
}

/* All Day checked: hide time fields when .js-hide is set by JS (event + calendar forms) */
#edit-start-time-wrapper.js-hide,
#edit-end-time-wrapper.js-hide,
.form-wrapper.field--widget-datetime-time-only.js-hide,
.ep-form .field--widget-datetime-time-only.js-hide {
  display: none !important;
}

/* Time field labels go in column 1 (inline with inputs) */
/* CRITICAL: After form-item and form-inline use display: contents, label becomes direct child of wrapper */
/* Must target label AFTER flattening happens - use direct descendant selector */
/* Use EXACT same rules as .form-item label (from ep-forms.css lines 562-583) */
form.ep-form .field--widget-datetime-time-only label,
.ep-form .field--widget-datetime-time-only label {
  grid-column: 1 !important; /* Same as .form-item label */
  margin-bottom: 0 !important; /* Same as .form-item label */
  margin-top: 0 !important; /* Same as .form-item label */
  font-family: var(--ep-font-family-base) !important; /* Same as .form-item label */
  font-size: var(--ep-font-size-base) !important; /* Same as .form-item label */
  font-weight: var(--ep-font-weight-medium) !important; /* Same as .form-item label */
  color: var(--ep-color-text-primary) !important; /* Same as .form-item label */
  line-height: var(--ep-line-height-normal) !important; /* Same as .form-item label */
  align-self: center !important; /* Same as .form-item label */
  white-space: nowrap !important; /* Same as .form-item label */
  display: block !important; /* Same as .form-item label */
}

/* Time field input wrapper goes in column 2 */
/* Use EXACT same rules as .form-item input (from ep-forms.css lines 585-620) */
form.ep-form .field--widget-datetime-time-only.form-wrapper > .form-inline,
form.ep-form .field--widget-datetime-time-only > .form-inline,
.ep-form .field--widget-datetime-time-only.form-wrapper > .form-inline,
.ep-form .field--widget-datetime-time-only > .form-inline,
form.ep-form .field--widget-datetime-time-only.form-wrapper > .form-date,
form.ep-form .field--widget-datetime-time-only > .form-date,
.ep-form .field--widget-datetime-time-only.form-wrapper > .form-date,
.ep-form .field--widget-datetime-time-only > .form-date {
  grid-column: 2 !important; /* Same as .form-item input */
  width: 100% !important; /* Same as .form-item input */
  min-width: 0 !important; /* Same as .form-item input */
  max-width: 100% !important; /* Same as .form-item input */
  box-sizing: border-box !important; /* Same as .form-item input */
}

/* CRITICAL: Force labels to be visible even if visually-hidden class is applied */
/* Target the ACTUAL rendered structure from datetime widget */
/* Use highest specificity to override Drupal's default styles */
.ep-form .field--widget-datetime-time-only label.visually-hidden,
.ep-form .field--widget-datetime-time-only .visually-hidden,
.ep-form .field--widget-datetime-time-only .form-item label.visually-hidden,
.ep-form .field--widget-datetime-time-only .js-form-item label.visually-hidden,
.ep-form .field--widget-datetime-time-only .form-item-label.visually-hidden,
.ep-form .field--widget-datetime-time-only .field__label.visually-hidden,
.ep-form .field--widget-datetime-time-only .field-label.visually-hidden,
.ep-form .field--widget-datetime-time-only .widget label.visually-hidden,
.ep-form .field--widget-datetime-time-only .datetime-widget label.visually-hidden,
.ep-form .field--widget-datetime-time-only .form-item__label.visually-hidden,
/* Also target ANY label inside these fields */
.ep-form .field--widget-datetime-time-only label,
.ep-form .field--widget-datetime-time-only .form-item label {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 0 var(--ep-spacing-xs) 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  border: 0 !important;
  white-space: normal !important;
  word-wrap: normal !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.ep-form .field--widget-datetime-time-only label,
.ep-form .field--widget-datetime-time-only .form-item label,
.ep-form .field--widget-datetime-time-only .js-form-item label,
.ep-form .field--widget-datetime-time-only .form-item-label {
  /* Ensure time field labels display correctly */
  font-family: var(--ep-font-family-base);
  font-size: var(--ep-font-size-base);
  font-weight: var(--ep-font-weight-medium);
  color: var(--ep-color-text-primary);
  /* CRITICAL: Force labels to be visible - override visually-hidden class */
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 0 var(--ep-spacing-xs) 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  border: 0 !important;
  white-space: normal !important;
  word-wrap: normal !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Time input fields - ensure consistent styling and width */
.ep-form .field--widget-datetime-time-only input[type="time"],
.ep-form .field--widget-datetime-time-only .form-time,
.ep-form .field--widget-datetime-time-only .form-item input[type="time"] {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  font-family: var(--ep-font-family-base);
  font-size: var(--ep-font-size-base);
  flex: 1 1 auto !important;
}

/* Ensure form-item inside time fields also uses grid layout */
.ep-form .field--widget-datetime-time-only .form-item,
.ep-form .field--widget-datetime-time-only .js-form-item {
  display: contents !important; /* Let parent grid handle layout */
  width: 100% !important;
}

/* CRITICAL: Flatten form-inline wrapper in time fields to match title field structure */
/* Title field: form-item > label + input (direct) */
/* Time field: wrapper > form-inline > form-item > (label + input) */
/* After flattening: wrapper > (label + input) */
/* Make form-inline use display: contents so label/input become direct children of wrapper */
.ep-form .field--widget-datetime-time-only .form-inline,
.ep-form .field--widget-datetime-time-only .form-date.form-inline {
  display: contents !important; /* Flatten wrapper - children become direct children of wrapper */
  width: 100% !important;
}

/* Ensure inputs inside form-inline go to column 2 */
/* CRITICAL: After form-item and form-inline use display: contents, input becomes direct child of wrapper */
/* Must target input AFTER flattening happens */
.ep-form .field--widget-datetime-time-only input[type="time"] {
  grid-column: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* ========================================
   TIME FIELD STRUCTURE FIX
   ======================================== */

/**
 * CRITICAL: Fix time field structure to match standard form field structure
 * 
 * Problem: Drupal's datetime widget creates a complex structure for time-only fields
 * 
 * Solution: Apply grid layout to time field wrappers and ensure labels are visible
 * 
 * This applies to ALL time-only datetime fields automatically - no field-name-specific selectors needed
 * Targets fields by widget class (.field--widget-datetime-time-only) and structure
 */

/* Ensure time field wrapper uses grid layout like other fields */
/* Generic selector: targets any datetime field with time-only widget */
/* CRITICAL: Must have higher specificity than global .form-wrapper rule */
/* Match both widget class and field type class for better compatibility */
.form-wrapper.field--type-datetime.field--widget-datetime-time-only,
.form-wrapper.field--widget-datetime-time-only,
.form-wrapper.field--type-datetime:has(input[type="time"]),
.form-wrapper:has(input[type="time"]),
form .form-wrapper.field--type-datetime.field--widget-datetime-time-only,
form .form-wrapper.field--widget-datetime-time-only,
form .form-wrapper.field--type-datetime:has(input[type="time"]),
form .form-wrapper:has(input[type="time"]),
.ep-form .form-wrapper.field--type-datetime.field--widget-datetime-time-only,
.ep-form .form-wrapper.field--widget-datetime-time-only,
.ep-form .form-wrapper.field--type-datetime:has(input[type="time"]),
.ep-form .form-wrapper:has(input[type="time"]),
form.ep-form .form-wrapper.field--type-datetime.field--widget-datetime-time-only,
form.ep-form .form-wrapper.field--widget-datetime-time-only,
form.ep-form .form-wrapper.field--type-datetime:has(input[type="time"]),
form.ep-form .form-wrapper:has(input[type="time"]) {
  display: grid !important;
  grid-template-columns: minmax(140px, auto) 1fr !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  gap: var(--ep-spacing-md) var(--ep-spacing-md) !important;
  margin-bottom: var(--ep-form-group-margin) !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  grid-auto-flow: row !important;
}

/* Time field labels go in column 1 */
/* CRITICAL: Only target direct child labels of wrapper (wrapper-level labels) */
.form-wrapper.field--type-datetime.field--widget-datetime-time-only > label,
.form-wrapper.field--widget-datetime-time-only > label,
.form-wrapper.field--type-datetime:has(input[type="time"]) > label,
.form-wrapper:has(input[type="time"]) > label,
form .form-wrapper.field--type-datetime.field--widget-datetime-time-only > label,
form .form-wrapper.field--widget-datetime-time-only > label,
form .form-wrapper.field--type-datetime:has(input[type="time"]) > label,
form .form-wrapper:has(input[type="time"]) > label,
.ep-form .form-wrapper.field--type-datetime.field--widget-datetime-time-only > label,
.ep-form .form-wrapper.field--widget-datetime-time-only > label,
.ep-form .form-wrapper.field--type-datetime:has(input[type="time"]) > label,
.ep-form .form-wrapper:has(input[type="time"]) > label,
form.ep-form .form-wrapper.field--type-datetime.field--widget-datetime-time-only > label,
form.ep-form .form-wrapper.field--widget-datetime-time-only > label,
form.ep-form .form-wrapper.field--type-datetime:has(input[type="time"]) > label,
form.ep-form .form-wrapper:has(input[type="time"]) > label {
  grid-column: 1 !important;
  grid-row: 1 !important;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  font-family: var(--ep-font-family-base) !important;
  font-size: var(--ep-font-size-base) !important;
  font-weight: var(--ep-font-weight-medium) !important;
  color: var(--ep-color-text-primary) !important;
  line-height: var(--ep-line-height-normal) !important;
  align-self: center !important;
  white-space: nowrap !important;
  display: block !important;
}

/* Time field input wrapper goes in column 2 */
/* CRITICAL: Target the form-inline wrapper that contains the time input */
.form-wrapper.field--type-datetime.field--widget-datetime-time-only > .form-inline,
.form-wrapper.field--widget-datetime-time-only > .form-inline,
.form-wrapper.field--type-datetime:has(input[type="time"]) > .form-inline,
.form-wrapper:has(input[type="time"]) > .form-inline,
form .form-wrapper.field--type-datetime.field--widget-datetime-time-only > .form-inline,
form .form-wrapper.field--widget-datetime-time-only > .form-inline,
form .form-wrapper.field--type-datetime:has(input[type="time"]) > .form-inline,
form .form-wrapper:has(input[type="time"]) > .form-inline,
.ep-form .form-wrapper.field--type-datetime.field--widget-datetime-time-only > .form-inline,
.ep-form .form-wrapper.field--widget-datetime-time-only > .form-inline,
.ep-form .form-wrapper.field--type-datetime:has(input[type="time"]) > .form-inline,
.ep-form .form-wrapper:has(input[type="time"]) > .form-inline,
form.ep-form .form-wrapper.field--type-datetime.field--widget-datetime-time-only > .form-inline,
form.ep-form .form-wrapper.field--widget-datetime-time-only > .form-inline,
form.ep-form .form-wrapper.field--type-datetime:has(input[type="time"]) > .form-inline,
form.ep-form .form-wrapper:has(input[type="time"]) > .form-inline {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* CRITICAL: Force labels to be visible even if visually-hidden class is applied */
/* Generic selector: targets any time field label */
.form-wrapper.field--widget-datetime-time-only label.visually-hidden,
.form-wrapper:has(input[type="time"]) label.visually-hidden,
.form-wrapper.field--widget-datetime-time-only .form-item label.visually-hidden,
.form-wrapper:has(input[type="time"]) .form-item label.visually-hidden,
form .form-wrapper.field--widget-datetime-time-only label.visually-hidden,
form .form-wrapper:has(input[type="time"]) label.visually-hidden,
.ep-form .form-wrapper.field--widget-datetime-time-only label.visually-hidden,
.ep-form .form-wrapper:has(input[type="time"]) label.visually-hidden,
.ep-form .form-wrapper.field--widget-datetime-time-only .form-item label.visually-hidden,
.ep-form .form-wrapper:has(input[type="time"]) .form-item label.visually-hidden {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 0 var(--ep-spacing-xs) 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  border: 0 !important;
  white-space: normal !important;
  word-wrap: normal !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Time field label styling - only for nested labels, not wrapper-level labels */
/* Wrapper-level labels are handled by the grid system above */
.form-wrapper.field--widget-datetime-time-only .form-item label,
.form-wrapper:has(input[type="time"]) .form-item label,
form .form-wrapper.field--widget-datetime-time-only .form-item label,
form .form-wrapper:has(input[type="time"]) .form-item label,
.ep-form .form-wrapper.field--widget-datetime-time-only .form-item label,
.ep-form .form-wrapper:has(input[type="time"]) .form-item label {
  font-family: var(--ep-font-family-base) !important;
  font-size: var(--ep-font-size-base) !important;
  font-weight: var(--ep-font-weight-medium) !important;
  color: var(--ep-color-text-primary) !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 0 var(--ep-spacing-xs) 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  border: 0 !important;
  white-space: normal !important;
  word-wrap: normal !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Time input fields - ensure consistent styling and width */
.form-wrapper.field--widget-datetime-time-only input[type="time"],
.form-wrapper:has(input[type="time"]) input[type="time"],
form .form-wrapper.field--widget-datetime-time-only input[type="time"],
form .form-wrapper:has(input[type="time"]) input[type="time"],
.ep-form .form-wrapper.field--widget-datetime-time-only input[type="time"],
.ep-form .form-wrapper:has(input[type="time"]) input[type="time"] {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  font-family: var(--ep-font-family-base) !important;
  font-size: var(--ep-font-size-base) !important;
  flex: 1 1 auto !important;
  vertical-align: middle !important;
  line-height: var(--ep-line-height-normal) !important;
  align-self: center !important;
}

/* Fix vertical alignment for time input fields when they have values */
/* Ensures hours and minutes are aligned properly within the input */
/* CRITICAL: Set explicit height and padding to prevent browser rendering differences */
input[type="time"].form-time,
input[type="time"].form-control,
.ep-form input[type="time"],
form.ep-form input[type="time"],
.form-wrapper:has(input[type="time"]) input[type="time"],
.ep-form .field--widget-datetime-time-only input[type="time"],
form.ep-form .field--widget-datetime-time-only input[type="time"] {
  vertical-align: middle !important;
  line-height: var(--ep-line-height-normal) !important;
  align-self: center !important;
  height: calc(var(--ep-form-field-padding-y) * 2 + var(--ep-font-size-base) * var(--ep-line-height-normal)) !important;
  padding-top: var(--ep-form-field-padding-y) !important;
  padding-bottom: var(--ep-form-field-padding-y) !important;
  display: inline-block !important;
  box-sizing: border-box !important;
}

/* CRITICAL: Fix internal alignment of time input fields */
/* Ensures hours and minutes are vertically aligned within the input */
/* This fixes the issue where minutes appear lower than hours */
input[type="time"],
input[type="time"].form-time,
input[type="time"].form-control,
.ep-form input[type="time"],
form.ep-form input[type="time"],
.form-wrapper:has(input[type="time"]) input[type="time"],
.ep-form .field--widget-datetime-time-only input[type="time"],
form.ep-form .field--widget-datetime-time-only input[type="time"] {
  font-family: var(--ep-font-family-base) !important;
  font-size: var(--ep-font-size-base) !important;
  line-height: 1.5 !important; /* Explicit line-height for consistent internal rendering */
  padding: var(--ep-form-field-padding-y) var(--ep-form-field-padding-x) !important;
  height: auto !important;
  min-height: calc(var(--ep-form-field-padding-y) * 2 + var(--ep-font-size-base) * 1.5) !important;
  vertical-align: baseline !important; /* Use baseline instead of middle for internal alignment */
  display: inline-block !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important; /* Remove browser-specific styling */
  -moz-appearance: textfield !important; /* Remove browser-specific styling */
}

/* Additional fix: Ensure consistent rendering for all time inputs */
/* Target webkit internal pseudo-elements for hour/minute fields */
input[type="time"]::-webkit-datetime-edit-hour-field,
input[type="time"]::-webkit-datetime-edit-minute-field {
  padding: 0 !important;
  margin: 0 !important;
  vertical-align: baseline !important;
}

/* Target moz internal pseudo-elements for hour/minute fields */
input[type="time"]::-moz-datetime-edit-hour-field,
input[type="time"]::-moz-datetime-edit-minute-field {
  padding: 0 !important;
  margin: 0 !important;
  vertical-align: baseline !important;
}

/* Ensure form-item inside time fields uses display: contents to flatten structure */
.form-wrapper.field--widget-datetime-time-only .form-item,
.form-wrapper:has(input[type="time"]) .form-item,
.form-wrapper.field--widget-datetime-time-only .js-form-item,
.form-wrapper:has(input[type="time"]) .js-form-item,
form .form-wrapper.field--widget-datetime-time-only .form-item,
form .form-wrapper:has(input[type="time"]) .form-item,
.ep-form .form-wrapper.field--widget-datetime-time-only .form-item,
.ep-form .form-wrapper:has(input[type="time"]) .form-item {
  display: contents !important; /* Let parent grid handle layout */
  width: 100% !important;
}

/* Flatten form-inline wrapper in time fields */
.form-wrapper.field--widget-datetime-time-only .form-item .form-inline,
.form-wrapper:has(input[type="time"]) .form-item .form-inline,
form .form-wrapper.field--widget-datetime-time-only .form-item .form-inline,
form .form-wrapper:has(input[type="time"]) .form-item .form-inline,
.ep-form .form-wrapper.field--widget-datetime-time-only .form-item .form-inline,
.ep-form .form-wrapper:has(input[type="time"]) .form-item .form-inline {
  display: contents !important; /* Flatten wrapper */
  width: 100% !important;
}

/* Ensure inputs inside form-inline go to column 2 */
.form-wrapper.field--widget-datetime-time-only .form-item .form-inline input[type="time"],
.form-wrapper:has(input[type="time"]) .form-item .form-inline input[type="time"],
form .form-wrapper.field--widget-datetime-time-only .form-item .form-inline input[type="time"],
form .form-wrapper:has(input[type="time"]) .form-item .form-inline input[type="time"],
.ep-form .form-wrapper.field--widget-datetime-time-only .form-item .form-inline input[type="time"],
.ep-form .form-wrapper:has(input[type="time"]) .form-item .form-inline input[type="time"] {
  grid-column: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* ========================================
   ENTITY AUTOCOMPLETE FIELD STYLING
   ========================================
   Global styles for entity autocomplete fields across all EP forms
   - Hide autocomplete throbber (spinner icon)
   - Remove background image used for throbber
   ======================================== */

/* Hide autocomplete throbber for all entity autocomplete fields */
.ep-form .form-item input.form-autocomplete ~ .autocomplete,
.ep-form .form-item input.form-autocomplete ~ .ajax-progress-throbber,
.ep-form .form-item input.form-autocomplete::after,
.ep-form .js-form-item input.form-autocomplete ~ .autocomplete,
.ep-form .js-form-item input.form-autocomplete ~ .ajax-progress-throbber,
.ep-form .js-form-item input.form-autocomplete::after,
form.ep-form .form-item input.form-autocomplete ~ .autocomplete,
form.ep-form .form-item input.form-autocomplete ~ .ajax-progress-throbber,
form.ep-form .form-item input.form-autocomplete::after,
form.ep-form .js-form-item input.form-autocomplete ~ .autocomplete,
form.ep-form .js-form-item input.form-autocomplete ~ .ajax-progress-throbber,
form.ep-form .js-form-item input.form-autocomplete::after {
  display: none !important;
}

/* Hide autocomplete throbber icon (background image) for all entity autocomplete fields */
.ep-form .form-item input.form-autocomplete,
.ep-form .js-form-item input.form-autocomplete,
form.ep-form .form-item input.form-autocomplete,
form.ep-form .js-form-item input.form-autocomplete {
  background-image: none !important;
  padding-right: var(--ep-spacing-md) !important; /* Remove extra padding for throbber */
}

/* ========================================
   EP TIME PICKER (compact popup)
   ========================================
   Replaces native input[type="time"] and select.timeline-time-input UI.
   One compact field; hour/minute columns open in a popup on click.
   ======================================== */

.ep-time-picker {
  position: relative;
  display: inline-block;
  width: auto !important;
  max-width: 220px;
  vertical-align: middle;
}

.ep-form .form-item .ep-time-picker,
.ep-form .js-form-item .ep-time-picker,
form.ep-form .form-item .ep-time-picker {
  grid-column: 2;
  width: auto !important;
  max-width: 220px !important;
}

.ep-time-picker__trigger {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100% !important;
  min-width: 160px;
  max-width: 220px !important;
  padding-right: 10px !important;
  text-align: left;
  cursor: pointer;
}

.ep-time-picker__trigger:focus {
  outline: none;
  border-color: var(--ep-color-primary, #0d6efd);
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.ep-time-picker__trigger.is-invalid {
  border-color: #dc3545;
}

.ep-time-picker__display {
  flex: 1 1 auto;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.ep-time-picker__icon {
  flex: 0 0 auto;
  font-size: 0.95rem;
  line-height: 1;
  opacity: 0.75;
}

.ep-time-picker__popup {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 1200;
  min-width: 112px;
  padding: 0;
  background: #fff;
  border: 1px solid var(--ep-color-border, #ced4da);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.ep-time-picker__popup[hidden] {
  display: none !important;
}

.ep-time-picker__columns {
  display: flex;
  align-items: stretch;
}

.ep-time-picker__column {
  flex: 1 1 0;
  width: 56px;
  min-width: 56px;
  max-height: 168px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 0;
  border-radius: 0;
  padding: 4px 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.ep-time-picker__column::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.ep-time-picker__column--hour {
  border-right: 1px solid var(--ep-color-border-light, #e9ecef);
}

.ep-time-picker__option {
  display: block;
  width: 100%;
  min-height: 32px;
  padding: 6px 4px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  scroll-snap-align: center;
}

.ep-time-picker__option:hover {
  background: var(--ep-color-background-hover, #f8f9fa);
}

.ep-time-picker__option.is-selected {
  background: var(--ep-color-primary, #0d6efd);
  color: #fff;
}

.ep-time-picker__option.is-selected:hover {
  background: var(--ep-color-primary, #0d6efd);
  color: #fff;
}

.ep-timeline-item-time .ep-time-picker,
.ep-time-picker--timeline {
  width: 100%;
  max-width: 140px !important;
}

.ep-timeline-item-time .ep-time-picker__trigger,
.ep-time-picker--timeline .ep-time-picker__trigger {
  min-width: 120px;
  max-width: 140px !important;
}