/**
 * @file
 * Webform component styles with design token support for light/dark mode.
 * Ensures webform elements follow the global theme system.
 */

@layer components {

/* ========================================
   Webform Container & Wrapper
   ======================================== */

.dialog-off-canvas-main-canvas .webform-submission-form,
.registration-modal .webform-submission-form {
  /* Light grey surface so white inputs/selects stand out (was white-on-white
     in light theme). --color-surface adapts to light/dark automatically. */
  background-color: var(--color-surface);
  color: var(--color-fg);
  padding: 1.5rem;
  border-radius: 8px;
}

/* ========================================
   Fieldsets - The main issue reported
   ======================================== */

/* Target fieldsets with high specificity to override Drupal base styles */
.dialog-off-canvas-main-canvas .webform-submission-form .webform-type-fieldset,
.dialog-off-canvas-main-canvas .webform-submission-form fieldset.webform-container-inline,
.dialog-off-canvas-main-canvas .webform-submission-form fieldset.fieldset,
.dialog-off-canvas-main-canvas .webform-submission-form fieldset.js-webform-type-fieldset,
.dialog-off-canvas-main-canvas .layout-container fieldset,
.dialog-off-canvas-main-canvas .region-content fieldset,
.dialog-off-canvas-main-canvas .webform-submission-form fieldset,
.dialog-off-canvas-main-canvas .webform-submission-form fieldset.form-wrapper,
.dialog-off-canvas-main-canvas .webform-submission-form fieldset.js-form-wrapper,
.dialog-off-canvas-main-canvas .webform-submission-form [data-drupal-selector="edit-complement"],
.dialog-off-canvas-main-canvas .webform-submission-form [data-drupal-selector="edit-etudes"],
.dialog-off-canvas-main-canvas .webform-submission-form [data-drupal-selector="edit-identite"],
.registration-modal .webform-submission-form .webform-type-fieldset,
.registration-modal .webform-submission-form fieldset.webform-container-inline,
.registration-modal .webform-submission-form fieldset.fieldset,
.registration-modal .webform-submission-form fieldset.js-webform-type-fieldset,
.registration-modal .webform-submission-form fieldset,
.registration-modal .webform-submission-form fieldset.form-wrapper,
.registration-modal .webform-submission-form fieldset.js-form-wrapper,
.registration-modal .webform-submission-form [data-drupal-selector="edit-complement"],
.registration-modal .webform-submission-form [data-drupal-selector="edit-etudes"],
.registration-modal .webform-submission-form [data-drupal-selector="edit-identite"] {
  /* Distinct light grey so white inputs/selects clearly stand out (the
     fieldsets cover the form area, so this is the surface the user sees).
     --color-surface (#f9fafb) was nearly indistinguishable from white inputs,
     hence "no visible change". Mix the surface token toward the foreground so
     the grey is clearly perceptible while still adapting to light/dark. */
  background-color: color-mix(in oklab, var(--color-surface) 88%, var(--color-fg) 12%) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  color: var(--color-fg) !important;
}

/* Fieldset wrapper */
.dialog-off-canvas-main-canvas .webform-submission-form .fieldset__wrapper,
.dialog-off-canvas-main-canvas .layout-container .fieldset__wrapper,
.registration-modal .webform-submission-form .fieldset__wrapper {
  background-color: transparent !important;
}

/* Fieldset legends - use BEM classes and element selector */
.dialog-off-canvas-main-canvas .webform-submission-form .fieldset__legend,
.dialog-off-canvas-main-canvas .webform-submission-form .fieldset__legend--visible,
.dialog-off-canvas-main-canvas .webform-type-fieldset legend,
.dialog-off-canvas-main-canvas fieldset legend,
.dialog-off-canvas-main-canvas .layout-container fieldset legend,
.registration-modal .webform-submission-form .fieldset__legend,
.registration-modal .webform-submission-form .fieldset__legend--visible,
.registration-modal .webform-type-fieldset legend,
.registration-modal fieldset legend {
  background-color: var(--color-elevated) !important;
  color: var(--color-fg) !important;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  border: 1px solid var(--color-border) !important;
  font-weight: 600;
}

/* Fieldset label */
.dialog-off-canvas-main-canvas .fieldset__label,
.registration-modal .fieldset__label {
  color: var(--color-fg) !important;
}

/* Nested fieldsets - slightly darker/lighter depending on theme */
.dialog-off-canvas-main-canvas .webform-type-fieldset .webform-type-fieldset,
.dialog-off-canvas-main-canvas fieldset fieldset,
.registration-modal .webform-type-fieldset .webform-type-fieldset,
.registration-modal fieldset fieldset {
  background-color: var(--color-elevated) !important;
}

/* ========================================
   Form Elements (Inputs, Selects, Textareas)
   ======================================== */

.dialog-off-canvas-main-canvas .webform-submission-form input[type="text"],
.dialog-off-canvas-main-canvas .webform-submission-form input[type="email"],
.dialog-off-canvas-main-canvas .webform-submission-form input[type="tel"],
.dialog-off-canvas-main-canvas .webform-submission-form input[type="number"],
.dialog-off-canvas-main-canvas .webform-submission-form input[type="date"],
.dialog-off-canvas-main-canvas .webform-submission-form input[type="time"],
.dialog-off-canvas-main-canvas .webform-submission-form input[type="url"],
.dialog-off-canvas-main-canvas .webform-submission-form input[type="search"],
.dialog-off-canvas-main-canvas .webform-submission-form input[type="password"],
.dialog-off-canvas-main-canvas .webform-submission-form select,
.dialog-off-canvas-main-canvas .webform-submission-form textarea,
.dialog-off-canvas-main-canvas .layout-container .webform-submission-form .form-select,
.dialog-off-canvas-main-canvas .layout-container .webform-submission-form .form-text,
.registration-modal .webform-submission-form input[type="text"],
.registration-modal .webform-submission-form input[type="email"],
.registration-modal .webform-submission-form input[type="tel"],
.registration-modal .webform-submission-form input[type="number"],
.registration-modal .webform-submission-form input[type="date"],
.registration-modal .webform-submission-form input[type="time"],
.registration-modal .webform-submission-form input[type="url"],
.registration-modal .webform-submission-form input[type="search"],
.registration-modal .webform-submission-form input[type="password"],
.registration-modal .webform-submission-form select,
.registration-modal .webform-submission-form textarea,
.registration-modal .webform-submission-form .form-select,
.registration-modal .webform-submission-form .form-text {
  background-color: var(--color-bg) !important;
  color: var(--color-fg) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
}

.dialog-off-canvas-main-canvas .webform-submission-form input:focus,
.dialog-off-canvas-main-canvas .webform-submission-form select:focus,
.dialog-off-canvas-main-canvas .webform-submission-form textarea:focus,
.registration-modal .webform-submission-form input:focus,
.registration-modal .webform-submission-form select:focus,
.registration-modal .webform-submission-form textarea:focus {
  border-color: var(--color-focus);
  outline: 2px solid color-mix(in oklab, var(--color-focus) 20%, transparent);
  outline-offset: 2px;
}

.dialog-off-canvas-main-canvas .webform-submission-form input::placeholder,
.dialog-off-canvas-main-canvas .webform-submission-form textarea::placeholder,
.registration-modal .webform-submission-form input::placeholder,
.registration-modal .webform-submission-form textarea::placeholder {
  color: var(--color-fg-subtle);
}

.dialog-off-canvas-main-canvas .webform-submission-form input:disabled,
.dialog-off-canvas-main-canvas .webform-submission-form select:disabled,
.dialog-off-canvas-main-canvas .webform-submission-form textarea:disabled,
.registration-modal .webform-submission-form input:disabled,
.registration-modal .webform-submission-form select:disabled,
.registration-modal .webform-submission-form textarea:disabled {
  background-color: var(--color-elevated);
  color: var(--color-fg-muted);
  cursor: not-allowed;
  opacity: 0.6;
}

/* ========================================
   Labels & Descriptions
   ======================================== */

.dialog-off-canvas-main-canvas .webform-submission-form label,
.registration-modal .webform-submission-form label {
  color: var(--color-fg);
  font-weight: 500;
}

.dialog-off-canvas-main-canvas .webform-submission-form .description,
.dialog-off-canvas-main-canvas .webform-submission-form .help-block,
.registration-modal .webform-submission-form .description,
.registration-modal .webform-submission-form .help-block {
  color: var(--color-fg-muted);
  font-size: 0.875rem;
}

/* ========================================
   Checkboxes & Radio Buttons
   ======================================== */

.dialog-off-canvas-main-canvas .webform-submission-form input[type="checkbox"],
.dialog-off-canvas-main-canvas .webform-submission-form input[type="radio"],
.registration-modal .webform-submission-form input[type="checkbox"],
.registration-modal .webform-submission-form input[type="radio"] {
  accent-color: var(--color-link);
}

.dialog-off-canvas-main-canvas .webform-submission-form .form-type-checkbox,
.dialog-off-canvas-main-canvas .webform-submission-form .form-type-radio,
.registration-modal .webform-submission-form .form-type-checkbox,
.registration-modal .webform-submission-form .form-type-radio {
  background-color: transparent;
}

/* ========================================
   Webform Buttons
   ======================================== */

.dialog-off-canvas-main-canvas .webform-submission-form .webform-button--submit,
.dialog-off-canvas-main-canvas .webform-submission-form .button--primary,
.dialog-off-canvas-main-canvas .webform-submission-form input[type="submit"].button,
.registration-modal .webform-submission-form .webform-button--submit,
.registration-modal .webform-submission-form .button--primary,
.registration-modal .webform-submission-form input[type="submit"].button {
  background-color: var(--color-link);
  color: var(--color-bg);
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.dialog-off-canvas-main-canvas .webform-submission-form .webform-button--submit:hover,
.dialog-off-canvas-main-canvas .webform-submission-form .button--primary:hover,
.dialog-off-canvas-main-canvas .webform-submission-form input[type="submit"].button:hover,
.registration-modal .webform-submission-form .webform-button--submit:hover,
.registration-modal .webform-submission-form .button--primary:hover,
.registration-modal .webform-submission-form input[type="submit"].button:hover {
  background-color: var(--color-link-hover);
}

/* Hide original submit button when in modal context to avoid confusion */
.registration-modal .webform-submission-form .form-actions,
.ui-dialog-content .webform-submission-form .form-actions {
  display: none !important;
}

.dialog-off-canvas-main-canvas .webform-submission-form .button--secondary {
  background-color: var(--color-surface);
  color: var(--color-link);
  border: 1px solid var(--color-link);
}

.dialog-off-canvas-main-canvas .webform-submission-form .button--secondary:hover {
  background-color: var(--color-link);
  color: var(--color-bg);
}

/* ========================================
   Webform Progress Bar
   ======================================== */

.dialog-off-canvas-main-canvas .webform-progress {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.dialog-off-canvas-main-canvas .webform-progress .webform-progress-tracker {
  background-color: var(--color-elevated);
}

.dialog-off-canvas-main-canvas .webform-progress .webform-progress-tracker .progress-step {
  color: var(--color-fg-muted);
}

.dialog-off-canvas-main-canvas .webform-progress .webform-progress-tracker .is-active {
  color: var(--color-link);
  font-weight: 600;
}

/* ========================================
   Validation Messages
   ======================================== */

.dialog-off-canvas-main-canvas .webform-submission-form .form-item--error-message,
.dialog-off-canvas-main-canvas .webform-submission-form .messages--error,
.registration-modal .webform-submission-form .form-item--error-message,
.registration-modal .webform-submission-form .messages--error {
  background-color: var(--color-danger-bg);
  color: var(--color-danger-fg);
  border-left: 4px solid var(--color-danger-fg);
  padding: 0.75rem 1rem 0.75rem 3rem;
  border-radius: 4px;
  margin-bottom: 1rem;
  position: relative;
  display: flex;
  align-items: flex-start;
}

/* Error icon */
.dialog-off-canvas-main-canvas .webform-submission-form .form-item--error-message::before,
.dialog-off-canvas-main-canvas .webform-submission-form .messages--error::before,
.registration-modal .webform-submission-form .form-item--error-message::before,
.registration-modal .webform-submission-form .messages--error::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 0.875rem;
  width: 20px;
  height: 20px;
  background-color: var(--color-danger-fg);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.dialog-off-canvas-main-canvas .webform-submission-form .messages--warning,
.registration-modal .webform-submission-form .messages--warning {
  background-color: var(--color-warning-bg);
  color: var(--color-warning-fg);
  border-left: 4px solid var(--color-warning-fg);
  padding: 0.75rem 1rem 0.75rem 3rem;
  border-radius: 4px;
  margin-bottom: 1rem;
  position: relative;
  display: flex;
  align-items: flex-start;
}

/* Warning icon */
.dialog-off-canvas-main-canvas .webform-submission-form .messages--warning::before,
.registration-modal .webform-submission-form .messages--warning::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 0.875rem;
  width: 20px;
  height: 20px;
  background-color: var(--color-warning-fg);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.dialog-off-canvas-main-canvas .webform-submission-form .messages--status,
.registration-modal .webform-submission-form .messages--status {
  background-color: var(--color-success-bg);
  color: var(--color-success-fg);
  border-left: 4px solid var(--color-success-fg);
  padding: 0.75rem 1rem 0.75rem 3rem;
  border-radius: 4px;
  margin-bottom: 1rem;
  position: relative;
  display: flex;
  align-items: flex-start;
}

/* Success icon */
.dialog-off-canvas-main-canvas .webform-submission-form .messages--status::before,
.registration-modal .webform-submission-form .messages--status::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 0.875rem;
  width: 20px;
  height: 20px;
  background-color: var(--color-success-fg);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

/* ========================================
   Webform Tables (for composite elements)
   ======================================== */

.dialog-off-canvas-main-canvas .webform-submission-form table {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-collapse: collapse;
}

.dialog-off-canvas-main-canvas .webform-submission-form table th {
  background-color: var(--color-elevated);
  color: var(--color-fg);
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  font-weight: 600;
}

.dialog-off-canvas-main-canvas .webform-submission-form table td {
  background-color: var(--color-surface);
  color: var(--color-fg);
  padding: 0.75rem;
  border: 1px solid var(--color-border);
}

.dialog-off-canvas-main-canvas .webform-submission-form table tr:hover td {
  background-color: var(--color-elevated);
}

/* ========================================
   File Upload Fields
   ======================================== */

.dialog-off-canvas-main-canvas .webform-submission-form .form-managed-file {
  background-color: var(--color-surface);
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

.dialog-off-canvas-main-canvas .webform-submission-form input[type="file"] {
  color: var(--color-fg);
}

/* ========================================
   Webform Details/Accordion
   ======================================== */

.dialog-off-canvas-main-canvas .webform-submission-form details,
.registration-modal .webform-submission-form details {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  margin-bottom: 1rem;
}

.dialog-off-canvas-main-canvas .webform-submission-form details summary,
.registration-modal .webform-submission-form details summary {
  background-color: var(--color-elevated);
  color: var(--color-fg);
  padding: 0.75rem 1rem;
  cursor: pointer;
  font-weight: 600;
  border-radius: 4px 4px 0 0;
}

.dialog-off-canvas-main-canvas .webform-submission-form details[open] summary,
.registration-modal .webform-submission-form details[open] summary {
  border-bottom: 1px solid var(--color-border);
}

.dialog-off-canvas-main-canvas .webform-submission-form details > *:not(summary),
.registration-modal .webform-submission-form details > *:not(summary) {
  padding: 1rem;
}

/* ========================================
   UX Improvements - Details/Accordion Visual Indicators
   ======================================== */

/* Add arrow indicator for collapsible details elements */
.dialog-off-canvas-main-canvas .webform-submission-form details > summary,
.registration-modal .webform-submission-form details > summary {
  position: relative;
  padding-left: 2.5rem;
  list-style: none; /* Remove default marker */
}

/* Remove default details marker */
.dialog-off-canvas-main-canvas .webform-submission-form details > summary::-webkit-details-marker,
.registration-modal .webform-submission-form details > summary::-webkit-details-marker {
  display: none;
}

/* Custom arrow indicator */
.dialog-off-canvas-main-canvas .webform-submission-form details > summary::before,
.registration-modal .webform-submission-form details > summary::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background-color: var(--color-fg);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  transition: transform 0.2s ease;
}

/* Rotate arrow when opened */
.dialog-off-canvas-main-canvas .webform-submission-form details[open] > summary::before,
.registration-modal .webform-submission-form details[open] > summary::before {
  transform: translateY(-50%) rotate(90deg);
}

/* Add "(optionnel)" indicator for details elements */
.dialog-off-canvas-main-canvas .webform-submission-form details > summary::after,
.registration-modal .webform-submission-form details > summary::after {
  content: " (optionnel)";
  font-size: 0.875rem;
  color: var(--color-fg-muted);
  font-weight: 400;
  margin-left: 0.5rem;
}

/* Subtle hover effect for better interactivity */
.dialog-off-canvas-main-canvas .webform-submission-form details > summary:hover,
.registration-modal .webform-submission-form details > summary:hover {
  background-color: var(--color-surface);
}

/* Focus state for keyboard accessibility */
.dialog-off-canvas-main-canvas .webform-submission-form details > summary:focus,
.registration-modal .webform-submission-form details > summary:focus {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* ========================================
   Webform Multiple Elements
   ======================================== */

.dialog-off-canvas-main-canvas .webform-submission-form .webform-multiple-table {
  background-color: var(--color-surface);
}

.dialog-off-canvas-main-canvas .webform-submission-form .webform-multiple-table th {
  background-color: var(--color-elevated);
  color: var(--color-fg);
}

/* ========================================
   Webform Confirmation Page
   ======================================== */

.dialog-off-canvas-main-canvas .webform-confirmation {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 2rem;
  margin: 2rem 0;
}

.dialog-off-canvas-main-canvas .webform-confirmation__message {
  color: var(--color-fg);
}

/* ========================================
   Required Field Indicator
   ======================================== */

.dialog-off-canvas-main-canvas .webform-submission-form .form-required {
  color: var(--color-danger-fg);
}

/* ========================================
   Webform Actions Container
   ======================================== */

.dialog-off-canvas-main-canvas .webform-submission-form .form-actions {
  background-color: transparent;
  padding-top: 1.5rem;
  margin-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

/* ========================================
   Cascade "Autre" Custom Text Fields
   Force visibility when JavaScript shows them
   ======================================== */

.dialog-off-canvas-main-canvas .webform-submission-form .js-form-item input[name$="[ville_autre]"],
.dialog-off-canvas-main-canvas .webform-submission-form .js-form-item input[name$="[etablissement_autre]"],
.dialog-off-canvas-main-canvas .webform-submission-form .js-form-item input[name$="[filiere_autre]"] {
  /* Don't hide with display:none when parent wrapper is shown */
}

/* When JavaScript adds display:block to wrapper, ensure it shows */
.dialog-off-canvas-main-canvas .webform-submission-form .js-form-item[style*="display: block"],
.dialog-off-canvas-main-canvas .webform-submission-form .form-item[style*="display: block"] {
  display: block !important;
}

} /* End @layer components */

/* ========================================
   Hide the "Informations de session" details section in front-end
   Note: The checked_in field is hidden via #access_create_roles in webform config,
   not CSS. This is the proper Drupal security approach.
   ======================================== */

.dialog-off-canvas-main-canvas .webform-submission-form [data-drupal-selector="edit-session-info"],
.registration-modal .webform-submission-form [data-drupal-selector="edit-session-info"] {
  display: none !important;
}

/* ========================================
   Inline inputs for compact fieldsets
   ======================================== */

/* Make Informations complémentaires section compact with inline inputs */
.dialog-off-canvas-main-canvas .webform-submission-form #edit-complement .fieldset__wrapper,
.registration-modal .webform-submission-form #edit-complement .fieldset__wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
}

/* Make Parcours / études section compact with inline inputs */
.dialog-off-canvas-main-canvas .webform-submission-form #edit-etudes .fieldset__wrapper,
.registration-modal .webform-submission-form #edit-etudes .fieldset__wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
}

/* Allow conditional fields (like ville_autre, etablissement_autre) to span full width when visible */
.dialog-off-canvas-main-canvas .webform-submission-form #edit-etudes .fieldset__wrapper .form-item[style*="display: block"],
.registration-modal .webform-submission-form #edit-etudes .fieldset__wrapper .form-item[style*="display: block"] {
  grid-column: 1 / -1;
}

/* On mobile, stack the fields vertically */
@media (max-width: 768px) {
  .dialog-off-canvas-main-canvas .webform-submission-form #edit-complement .fieldset__wrapper,
  .dialog-off-canvas-main-canvas .webform-submission-form #edit-etudes .fieldset__wrapper,
  .registration-modal .webform-submission-form #edit-complement .fieldset__wrapper,
  .registration-modal .webform-submission-form #edit-etudes .fieldset__wrapper {
    grid-template-columns: 1fr;
  }
}

.webform-capacity-low {
  color: var(--red-900);
  font-weight: bolder;
}

/* ========================================
   Force visibility override for fields
   when server-side config says to show them
   ======================================== */

/* Override any JS-based hiding for force-visible fields */
.sse-field-force-visible,
.sse-field-force-visible.js-webform-states-hidden,
.form-item.sse-field-force-visible,
.js-form-item.sse-field-force-visible {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ========================================
   UX Improvements - Select Fields with Long Options
   ======================================== */

/* Truncate long option labels to prevent overflow */
.dialog-off-canvas-main-canvas .webform-submission-form select.form-select,
.registration-modal .webform-submission-form select.form-select {
  max-width: 100%;
  text-overflow: ellipsis;
}

/* Ensure select options don't overflow */
.dialog-off-canvas-main-canvas .webform-submission-form select.form-select option,
.registration-modal .webform-submission-form select.form-select option {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* ========================================
   UX Improvements - Mobile Touch Targets & Accessibility
   ======================================== */

/* Ensure minimum 44x44px touch targets and 16px font-size on mobile */
@media (max-width: 768px) {
  /* Minimum touch target size for interactive elements */
  .dialog-off-canvas-main-canvas .webform-submission-form select,
  .dialog-off-canvas-main-canvas .webform-submission-form input[type="text"],
  .dialog-off-canvas-main-canvas .webform-submission-form input[type="email"],
  .dialog-off-canvas-main-canvas .webform-submission-form input[type="tel"],
  .dialog-off-canvas-main-canvas .webform-submission-form input[type="number"],
  .dialog-off-canvas-main-canvas .webform-submission-form input[type="date"],
  .dialog-off-canvas-main-canvas .webform-submission-form textarea,
  .registration-modal .webform-submission-form select,
  .registration-form-wrapper .webform-submission-form select,
  .registration-modal .webform-submission-form input[type="text"],
  .registration-form-wrapper .webform-submission-form input[type="text"],
  .registration-modal .webform-submission-form input[type="email"],
  .registration-form-wrapper .webform-submission-form input[type="email"],
  .registration-modal .webform-submission-form input[type="tel"],
  .registration-form-wrapper .webform-submission-form input[type="tel"],
  .registration-modal .webform-submission-form input[type="number"],
  .registration-form-wrapper .webform-submission-form input[type="number"],
  .registration-modal .webform-submission-form input[type="date"],
  .registration-form-wrapper .webform-submission-form input[type="date"],
  .registration-modal .webform-submission-form textarea,
  .registration-form-wrapper .webform-submission-form textarea {
    min-height: 44px;
    font-size: 16px; /* Prevent iOS zoom on focus */
    padding: 0.625rem 0.75rem; /* Adjusted for larger min-height */
  }
  /* Ensure textarea has reasonable height */
  .dialog-off-canvas-main-canvas .webform-submission-form textarea,
  .registration-modal .webform-submission-form textarea,
  .registration-form-wrapper .webform-submission-form textarea {
    min-height: 88px; /* 2x touch target for better UX */
  }
  /* Increase spacing between form items for better touch experience */
  .dialog-off-canvas-main-canvas .webform-submission-form .form-item,
  .registration-modal .webform-submission-form .form-item,
  .registration-form-wrapper .webform-submission-form .form-item {
    margin-bottom: 1.25rem; /* Increased from 1rem */
  }
  /* Ensure buttons meet touch target requirements */
  .dialog-off-canvas-main-canvas .webform-submission-form .webform-button--submit,
  .dialog-off-canvas-main-canvas .webform-submission-form .button--primary,
  .registration-modal .webform-submission-form .webform-button--submit,
  .registration-form-wrapper .webform-submission-form .webform-button--submit,
  .registration-modal .webform-submission-form .button--primary,
  .registration-form-wrapper .webform-submission-form .button--primary {
    min-height: 44px;
    font-size: 16px;
  }
  /* Checkboxes and radios - ensure larger touch targets */
  .dialog-off-canvas-main-canvas .webform-submission-form input[type="checkbox"],
  .dialog-off-canvas-main-canvas .webform-submission-form input[type="radio"],
  .registration-modal .webform-submission-form input[type="checkbox"],
  .registration-form-wrapper .webform-submission-form input[type="checkbox"],
  .registration-modal .webform-submission-form input[type="radio"],
  .registration-form-wrapper .webform-submission-form input[type="radio"] {
    min-width: 20px;
    min-height: 20px;
    width: 20px;
    height: 20px;
  }
  /* Increase label padding for checkbox/radio for better touch target */
  .dialog-off-canvas-main-canvas .webform-submission-form .form-type-checkbox label,
  .dialog-off-canvas-main-canvas .webform-submission-form .form-type-radio label,
  .registration-modal .webform-submission-form .form-type-checkbox label,
  .registration-form-wrapper .webform-submission-form .form-type-checkbox label,
  .registration-modal .webform-submission-form .form-type-radio label,
  .registration-form-wrapper .webform-submission-form .form-type-radio label {
    padding: 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 44px;
  }
  /* ========================================
     Fine-tuning: Spacing and Readability
     ======================================== */

  /* Improve vertical rhythm between fieldsets on mobile */
  .dialog-off-canvas-main-canvas .webform-submission-form fieldset,
  .dialog-off-canvas-main-canvas .webform-submission-form .webform-type-fieldset,
  .registration-modal .webform-submission-form fieldset,
  .registration-form-wrapper .webform-submission-form fieldset,
  .registration-modal .webform-submission-form .webform-type-fieldset,
  .registration-form-wrapper .webform-submission-form .webform-type-fieldset {
    margin-bottom: 1.5rem; /* Increased from default */
  }
  /* Add more breathing room for labels on mobile */
  .dialog-off-canvas-main-canvas .webform-submission-form label,
  .registration-modal .webform-submission-form label,
  .registration-form-wrapper .webform-submission-form label {
    margin-bottom: 0.5rem; /* Ensure consistent spacing */
    display: block;
  }
  /* Better line-height for labels to improve readability */
  .dialog-off-canvas-main-canvas .webform-submission-form .form-item label,
  .registration-modal .webform-submission-form .form-item label,
  .registration-form-wrapper .webform-submission-form .form-item label {
    line-height: 1.5;
  }
  /* Help text and descriptions with better spacing */
  .dialog-off-canvas-main-canvas .webform-submission-form .description,
  .dialog-off-canvas-main-canvas .webform-submission-form .help-block,
  .registration-modal .webform-submission-form .description,
  .registration-form-wrapper .webform-submission-form .description,
  .registration-modal .webform-submission-form .help-block,
  .registration-form-wrapper .webform-submission-form .help-block {
    margin-top: 0.5rem;
    line-height: 1.5;
  }
  /* Improve select field dropdown height for better option visibility */
  .dialog-off-canvas-main-canvas .webform-submission-form select[size],
  .registration-modal .webform-submission-form select[size],
  .registration-form-wrapper .webform-submission-form select[size] {
    min-height: 200px; /* Better visibility for multiple options */
  }
  /* Better spacing for required indicator */
  .dialog-off-canvas-main-canvas .webform-submission-form .form-required,
  .registration-modal .webform-submission-form .form-required,
  .registration-form-wrapper .webform-submission-form .form-required {
    margin-left: 0.25rem;
  }
  /* Improve fieldset legend spacing on mobile */
  .dialog-off-canvas-main-canvas .webform-submission-form fieldset legend,
  .dialog-off-canvas-main-canvas .webform-submission-form .fieldset__legend,
  .registration-modal .webform-submission-form fieldset legend,
  .registration-form-wrapper .webform-submission-form fieldset legend,
  .registration-modal .webform-submission-form .fieldset__legend,
  .registration-form-wrapper .webform-submission-form .fieldset__legend {
    margin-bottom: 1rem;
  }
  /* Better spacing for form actions (submit buttons) */
  .dialog-off-canvas-main-canvas .webform-submission-form .form-actions,
  .registration-modal .webform-submission-form .form-actions,
  .registration-form-wrapper .webform-submission-form .form-actions {
    margin-top: 2rem; /* More separation from form content */
  }
}

/* ========================================
   Fine-tuning: Long Select Options Display
   ======================================== */

/* Ensure select dropdown shows options properly */
.dialog-off-canvas-main-canvas .webform-submission-form select,
.registration-modal .webform-submission-form select {
  /* Limit maximum width to prevent ultra-wide selects */
  max-width: 100%;
  width: 100%;
  /* Allow text to wrap in browsers that support it (limited browser support) */
  white-space: normal;
  word-wrap: break-word;
}

/* Better line height for select options to improve readability of long text */
.dialog-off-canvas-main-canvas .webform-submission-form select option,
.registration-modal .webform-submission-form select option {
  padding: 0.5rem;
  line-height: 1.4;
  min-height: 2.5rem; /* Ensure touch-friendly option height */
}

/* Specific improvements for the établissement and filière selects with long options */
.dialog-off-canvas-main-canvas .webform-submission-form select[name*="etablissement"],
.dialog-off-canvas-main-canvas .webform-submission-form select[name*="filiere"],
.registration-modal .webform-submission-form select[name*="etablissement"],
.registration-modal .webform-submission-form select[name*="filiere"] {
  /* Slightly larger height to show more context */
  min-height: 48px;
}

/* On tablet and below, give more vertical space to form elements */
@media (max-width: 900px) {
  .dialog-off-canvas-main-canvas .webform-submission-form .form-item,
  .registration-modal .webform-submission-form .form-item {
    margin-bottom: 1.5rem; /* Increased from 1.25rem for better separation */
  }

  /* More prominent fieldset spacing on tablet */
  .dialog-off-canvas-main-canvas .webform-submission-form fieldset,
  .dialog-off-canvas-main-canvas .webform-submission-form .webform-type-fieldset,
  .registration-modal .webform-submission-form fieldset,
  .registration-modal .webform-submission-form .webform-type-fieldset {
    margin-bottom: 2rem;
  }
}

/* ────────────────────────────────────────────────────────────────────
   Responsive form / detail grids (SSE Formation Design System).
   2-up on desktop, stacking to a single full-width column at <=640px.
   Ported as-is from templates/inscription + templates/session.
   ──────────────────────────────────────────────────────────────────── */
.sse-form-grid,
.sse-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp1-5);
}

@media (max-width: 640px) {
  .sse-form-grid,
  .sse-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Lieu de naissance: select next to its radio option ───────────────────
   JS moves .js-form-item-departement-naissance and .js-form-item-pays-naissance
   inside their matching radio wrapper. Drupal renders both radio wrappers with
   the same class (.js-form-item-lieu-naissance), so we make each one a flex
   row: [radio label] [select].
   ────────────────────────────────────────────────────────────────────────── */
.webform-submission-form .js-form-item-lieu-naissance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

/* Hide the label of the injected select (the radio label is enough context) */
.webform-submission-form .js-form-item-lieu-naissance .js-form-item-departement-naissance > label,
.webform-submission-form .js-form-item-lieu-naissance .js-form-item-pays-naissance > label {
  display: none;
}

.webform-submission-form .js-form-item-departement-naissance,
.webform-submission-form .js-form-item-pays-naissance {
  margin: 0;
  flex: 1 1 220px;
  max-width: 320px;
}

@media (max-width: 600px) {
  .webform-submission-form .js-form-item-lieu-naissance {
    flex-direction: column;
    align-items: flex-start;
  }
  .webform-submission-form .js-form-item-departement-naissance,
  .webform-submission-form .js-form-item-pays-naissance {
    max-width: 100%;
    width: 100%;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Views exposed filters (thematic filter) — strip the fieldset chrome.
   These broad webform fieldset rules above add a surface bg + border to
   ANY fieldset in region-content, which also hits the exposed filter. We
   only want the DS pills, so reset bg/border/padding here. Re-opening
   @layer components keeps these layered (so their !important beats both the
   earlier rules — via source order — and any unlayered !important override).
   ════════════════════════════════════════════════════════════════════ */
@layer components {
  .dialog-off-canvas-main-canvas .views-exposed-form fieldset,
  .dialog-off-canvas-main-canvas .region-content .views-exposed-form fieldset,
  .dialog-off-canvas-main-canvas .views-exposed-form .fieldset__wrapper,
  .registration-modal .views-exposed-form fieldset {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 1rem !important;
  }
  .dialog-off-canvas-main-canvas .views-exposed-form legend,
  .dialog-off-canvas-main-canvas .region-content .views-exposed-form legend,
  .dialog-off-canvas-main-canvas .views-exposed-form .fieldset__legend,
  .dialog-off-canvas-main-canvas .region-content .views-exposed-form .fieldset__legend {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 10px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Registration form — layout bugfixes + mobile spacing

   Unlayered on purpose: the fieldset/form rules above live in
   @layer components, so a plain declaration here already wins without
   having to escalate to !important.
   ════════════════════════════════════════════════════════════════════ */

/*
 * The UA stylesheet gives every <fieldset> `min-inline-size: min-content`.
 * The FriendlyCaptcha widget declares min-width: 250px, so its fieldset
 * refused to shrink below ~300px and punched out of the form card on
 * narrow screens. Let fieldsets shrink with their container.
 */
.dialog-off-canvas-main-canvas fieldset,
.dialog-off-canvas-main-canvas .webform-submission-form fieldset,
.registration-modal .webform-submission-form fieldset {
  min-width: 0;
}

/* …and let the captcha widget itself follow the available width. */
.dialog-off-canvas-main-canvas .captcha .frc-captcha,
.registration-modal .captcha .frc-captcha {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/*
 * Field help text spans the field's width. Olivero caps
 * .form-item__description at 60ch (core CSS is unlayered, so this override
 * must stay unlayered too), which wrapped the short staff notice under
 * "Profil" at mid-width on desktop although the select is full width.
 */
.dialog-off-canvas-main-canvas .webform-submission-sse-registration-form .form-item__description,
.registration-modal .webform-submission-sse-registration-form .form-item__description {
  max-width: none;
}

/*
 * Checkbox / radio rows.
 *
 * Drupal renders the input and its label as siblings, so making the *label*
 * a flex block (as the mobile touch-target rules above do) dropped it onto
 * its own line under the box and turned the trailing required marker into a
 * stray flex item floating at the far right. Lay the row out on the wrapper
 * instead, and leave the label as normal flow text.
 */
.dialog-off-canvas-main-canvas .webform-submission-form .form-type-checkbox,
.dialog-off-canvas-main-canvas .webform-submission-form .form-type-radio,
.registration-modal .webform-submission-form .form-type-checkbox,
.registration-modal .webform-submission-form .form-type-radio {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.dialog-off-canvas-main-canvas .webform-submission-form .form-type-checkbox > input,
.dialog-off-canvas-main-canvas .webform-submission-form .form-type-radio > input,
.registration-modal .webform-submission-form .form-type-checkbox > input,
.registration-modal .webform-submission-form .form-type-radio > input {
  flex: 0 0 auto;
  margin: 0.2rem 0 0;
}

.dialog-off-canvas-main-canvas .webform-submission-form .form-type-checkbox > label,
.dialog-off-canvas-main-canvas .webform-submission-form .form-type-radio > label,
.registration-modal .webform-submission-form .form-type-checkbox > label,
.registration-modal .webform-submission-form .form-type-radio > label {
  display: block;
  min-height: 0;
  margin: 0;
  padding: 0;
  line-height: 1.45;
}

/* ────────────────────────────────────────────────────────────────────
   Mobile: stop the nested cards from eating the screen width, and
   tighten the vertical rhythm.
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 48rem) {

  /* The form card sits inside the session's registration card, which sits
     inside the node's own padding — three sets of 1.5–2rem left barely half
     the viewport for the fields themselves. */
  .dialog-off-canvas-main-canvas .webform-submission-form,
  .registration-modal .webform-submission-form,
  .registration-form-wrapper .webform-submission-form {
    padding: 0.875rem;
  }

  .dialog-off-canvas-main-canvas .webform-submission-form fieldset,
  .dialog-off-canvas-main-canvas .webform-submission-form .webform-type-fieldset,
  .registration-modal .webform-submission-form fieldset,
  .registration-modal .webform-submission-form .webform-type-fieldset,
  .registration-form-wrapper .webform-submission-form fieldset,
  .registration-form-wrapper .webform-submission-form .webform-type-fieldset {
    padding: 0.75rem;
    margin-bottom: 1rem;
  }

  /* The wrapper adds another 18px ring inside the fieldset's own padding —
     on a 375px screen that is a quarter of the width for nothing. */
  .dialog-off-canvas-main-canvas .webform-submission-form .fieldset__wrapper,
  .registration-modal .webform-submission-form .fieldset__wrapper {
    padding: 0;
  }

  .dialog-off-canvas-main-canvas .webform-submission-form fieldset legend,
  .dialog-off-canvas-main-canvas .webform-submission-form .fieldset__legend,
  .registration-modal .webform-submission-form fieldset legend,
  .registration-modal .webform-submission-form .fieldset__legend {
    margin-bottom: 0.75rem;
  }

  /* Vertical rhythm: form items carried ~18px top + 24px bottom margin plus a
     9px label offset, which stacked into ~58px of dead space between fields —
     and the same margins on display:none'd conditional fields left large
     unexplained gaps in the middle of a fieldset. */
  .dialog-off-canvas-main-canvas .webform-submission-form .form-item,
  .registration-modal .webform-submission-form .form-item,
  .registration-form-wrapper .webform-submission-form .form-item {
    margin-top: 0;
    margin-bottom: 1rem;
  }

  .dialog-off-canvas-main-canvas .webform-submission-form .form-item > label,
  .dialog-off-canvas-main-canvas .webform-submission-form .form-item__label,
  .registration-modal .webform-submission-form .form-item > label,
  .registration-modal .webform-submission-form .form-item__label {
    margin-top: 0;
    margin-bottom: 0.35rem;
  }

  /* Checkbox/radio rows keep a comfortable target without a 44px label box. */
  .dialog-off-canvas-main-canvas .webform-submission-form .form-type-checkbox,
  .dialog-off-canvas-main-canvas .webform-submission-form .form-type-radio,
  .registration-modal .webform-submission-form .form-type-checkbox,
  .registration-modal .webform-submission-form .form-type-radio {
    padding-block: 0.3rem;
  }

  .dialog-off-canvas-main-canvas .webform-submission-form .captcha,
  .registration-modal .webform-submission-form .captcha {
    padding: 0.6rem;
  }

  .dialog-off-canvas-main-canvas .webform-submission-form .form-actions,
  .registration-modal .webform-submission-form .form-actions,
  .registration-form-wrapper .webform-submission-form .form-actions {
    margin-top: 1.25rem;
    padding-top: 1rem;
  }

  /* Full-width primary action — easier to hit, and it reads as the end of
     the form rather than a small button floating at the left edge. */
  .dialog-off-canvas-main-canvas .webform-submission-form .webform-button--submit,
  .registration-modal .webform-submission-form .webform-button--submit,
  .registration-form-wrapper .webform-submission-form .webform-button--submit {
    width: 100%;
  }
}