/*
=========================================================================
HIP EFP Mixed AF — Webform styles

1. Контейнер секцій   2. Заголовки секцій   3. Іконки та кольори секцій
4. Поля та описи      5. Таблиці            6. Критерії (тумблери)
7. Завантаження файлів 8. Кнопки            9. Household members
10. Мобільна версія (≤ 640px)
=========================================================================
*/
/* --- 1. Контейнер секцій ----------------------------------------------- */
.webform-submission-form .webform-type-fieldset {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  margin-bottom: 1.75rem;
  background-color: #ffffff;
  padding: 1.25rem 1.5rem 1.5rem;
  transition: box-shadow 0.2s ease;
}

.webform-submission-form .webform-type-fieldset:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

/* --- 2. Заголовок секції (legend) -------------------------------------- */
.webform-submission-form .webform-type-fieldset > legend {
  width: 100%;
  margin-bottom: 1rem;
}

.webform-submission-form .webform-type-fieldset > legend span {
  display: block;
  position: relative;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #1f2937;
  background-color: #f7f8fa;
  padding: 0.75rem 1rem 0.75rem 2.75rem;
  margin: -1.25rem -1.5rem 1rem;
  border-radius: 10px 10px 0 0;
  border-bottom: 1px solid #e5e7eb;
  border-left: 5px solid #5F6F94;
}

/* --- 3. Іконки та кольори секцій ---------------------------------------- */
/* Кожна section-* має ОБИДВА правила: іконку (::before) і колір рамки. */
.webform-submission-form .webform-type-fieldset > legend span::before {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1rem;
  opacity: 0.85;
}

.section-consent > legend span::before { content: "\2714\FE0F"; }
.section-consent > legend span { border-left-color: #70676A; }

.section-applicant > legend span::before { content: "\1F464"; }
.section-applicant > legend span { border-left-color: #7F8CAB; }

.section-location > legend span::before { content: "\1F4CD"; }
.section-location > legend span { border-left-color: #9FABC9; }

.section-displacement > legend span::before { content: "\1F3D8\FE0F"; }
.section-displacement > legend span { border-left-color: #E35176; }

.section-shelling > legend span::before { content: "\1F4A5"; }
.section-shelling > legend span { border-left-color: #C0392B; }

.section-household > legend span::before { content: "\1F3E0"; }
.section-household > legend span { border-left-color: #A1BAC7; }

.section-members > legend span::before { content: "\1F465"; }
.section-members > legend span { border-left-color: #C1D0D8; }

.section-activity > legend span::before { content: "\1F33E"; }
.section-activity > legend span { border-left-color: #5F6F94; }

.section-assets > legend span::before { content: "\1F9FE"; }
.section-assets > legend span { border-left-color: #7F8CAB; }

.section-market > legend span::before { content: "\1F4C8"; }
.section-market > legend span { border-left-color: #9FABC9; }

.section-transfer > legend span::before { content: "\1F4B3"; }
.section-transfer > legend span { border-left-color: #A1BAC7; }

/* --- 5. Таблиці (webform_table: поголів'я тощо) ------------------------ */
.webform-submission-form .webform-table td {
  padding: 0.5rem 0.75rem;
  vertical-align: middle;
}

.webform-submission-form .webform-table td:last-child {
  width: 140px;
}

.webform-submission-form .webform-table td:last-child input {
  width: 100%;
  margin: 0;
}

.webform-submission-form .webform-table .form-item {
  margin: 0;
}

.webform-submission-form .webform-table tbody tr:nth-child(odd) > td {
  background-color: #fbfcfd;
}

/* --- 6. Критерії вразливості: тумблери --------------------------------- */
.erc-criteria-block {
  margin-bottom: 1.75rem;
}

.erc-criteria-block .form-checkboxes,
.erc-criteria-block .webform-options-display-one-column {
  padding: 0;
  margin: 0.5rem 0 0 0;
}

.erc-criteria-block .form-checkboxes .form-item {
  position: relative;
  display: block;
  margin: 0 0 0.9rem 0;
  padding: 0 0 0 60px;
  min-height: 26px;
}

.erc-criteria-block .form-checkboxes input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 0;
  width: 46px;
  height: 26px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.erc-criteria-block .form-checkboxes input[type="checkbox"] + label {
  position: static;
  display: block;
  margin: 0;
  padding: 0;
  cursor: pointer;
  line-height: 1.5;
  font-weight: 400;
}

.erc-criteria-block .form-checkboxes input[type="checkbox"] + label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 46px;
  height: 26px;
  border-radius: 13px;
  background: #8a8f98;
  transition: background 0.15s ease;
}

.erc-criteria-block .form-checkboxes input[type="checkbox"] + label::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.15s ease;
}

.erc-criteria-block .form-checkboxes input[type="checkbox"]:checked + label::before {
  background: #5F6F94;
}

.erc-criteria-block .form-checkboxes input[type="checkbox"]:checked + label::after {
  left: 23px;
}

.erc-criteria-block .form-checkboxes input[type="checkbox"]:focus + label::before {
  box-shadow: 0 0 0 3px rgba(95, 111, 148, 0.35);
}

/* --- 7. Завантаження файлів: підсвітка успішного стану ------------------ */
.webform-submission-form .form-managed-file:has(.file),
.webform-submission-form .js-form-managed-file:has(.file) {
  padding: 10px 12px;
  background: #e7f4ea;
  border: 1px solid #52a56a;
  border-radius: 6px;
}

.webform-submission-form .form-managed-file .file a,
.webform-submission-form .js-form-managed-file .file a {
  font-weight: 600;
  color: #1e6b34;
}

.webform-submission-form .form-managed-file .file {
  position: relative;
  padding-left: 24px;
}

.webform-submission-form .form-managed-file .file::before {
  content: "\2714";
  position: absolute;
  left: 0;
  top: 0;
  color: #2f9e51;
  font-weight: 700;
}

.webform-submission-form td .form-managed-file:has(.file),
.webform-submission-form td .js-form-managed-file:has(.file) {
  padding: 6px 8px;
}

.webform-submission-form .erc-upload-success {
  display: block;
  margin-top: 2px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #2f9e51;
}

/* --- 8. Кнопки --------------------------------------------------------- */

/* --- 9. Household members ---------------------------------------------- */
/* Опис блоку household_members не має обрізатися по ширині — на всю ширину секції. */
.webform-submission-form .form-item-household-members > .description,
.webform-submission-form .js-form-item-household-members > .description,
.webform-submission-form [id^="edit-household-members"] > .description,
.webform-submission-form #edit-household-members--description,
.webform-submission-form #edit-household-members--wrapper > .description {
  max-width: none;
  width: 100%;
}

/*
=========================================================================
--- 10. Мобільна версія (≤ 640px) --------------------------------------

A. Заголовки секцій — компактніший шрифт/відступи, іконка до верху.
B. Household members — підписи (label) переносяться, а не обрізаються
   (тема ставить їм white-space:nowrap → на вузькому екрані виліт).
C. custom_composite (assets_list / livestock_other / household_members) —
   примусово блокова розкладка на всю ширину, таргет за data-drupal-selector
   (надійніше за клас .webform-multiple-table, який може не збігатися).

JS не змінюється — CSS перекриває інлайн-ширини через !important.
========================================================================= */
@media (max-width: 640px) {

  /* --- Загальний захист від горизонтального виливу --------------------- */
  .webform-submission-form,
  .webform-submission-form * {
    max-width: 100%;
  }

  .webform-submission-form input:not([type="checkbox"]):not([type="radio"]):not([type="image"]),
  .webform-submission-form select,
  .webform-submission-form textarea {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* B. Будь-які підписи/описи ПЕРЕНОСЯТЬСЯ, а не обрізаються ------------ */
  .webform-submission-form label,
  .webform-submission-form .description,
  .webform-submission-form .household-member-header {
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* --- A. Секції: менші відступи + компактніший заголовок -------------- */
  .webform-submission-form .webform-type-fieldset {
    padding: 1rem 1rem 1.25rem;
  }

  .webform-submission-form .webform-type-fieldset > legend {
    margin-bottom: 0.75rem;
  }

  .webform-submission-form .webform-type-fieldset > legend span {
    font-size: 1.05rem !important;
    line-height: 1.35;
    padding: 0.6rem 0.85rem 0.6rem 2.4rem;
    margin: -1rem -1rem 1rem;            /* збігається з новим padding секції */
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .webform-submission-form .webform-type-fieldset > legend span::before {
    top: 0.7rem;
    transform: none;
  }

  /* --- C. Composite-таблиці: примусовий стек у стовпчик ----------------
     Таргет за data-drupal-selector — той самий шаблон, що використовує
     робочий JS (edit-<field_key>-items). Клас .webform-multiple-table
     у цій версії/темі не влучає, тому не покладаємось на нього. --------- */
  .webform-submission-form table[data-drupal-selector="edit-household-members-items"],
  .webform-submission-form table[data-drupal-selector="edit-assets-list-items"],
  .webform-submission-form table[data-drupal-selector="edit-livestock-other-items"],
  .webform-submission-form table[data-drupal-selector="edit-household-members-items"] > tbody,
  .webform-submission-form table[data-drupal-selector="edit-assets-list-items"] > tbody,
  .webform-submission-form table[data-drupal-selector="edit-livestock-other-items"] > tbody,
  .webform-submission-form table[data-drupal-selector="edit-household-members-items"] > tbody > tr,
  .webform-submission-form table[data-drupal-selector="edit-assets-list-items"] > tbody > tr,
  .webform-submission-form table[data-drupal-selector="edit-livestock-other-items"] > tbody > tr {
    display: block;
    width: 100% !important;
    max-width: 100%;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  .webform-submission-form table[data-drupal-selector="edit-household-members-items"] > tbody > tr > td,
  .webform-submission-form table[data-drupal-selector="edit-assets-list-items"] > tbody > tr > td,
  .webform-submission-form table[data-drupal-selector="edit-livestock-other-items"] > tbody > tr > td {
    display: block;
    width: 100% !important;
    max-width: 100%;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  /* Інпути/селекти/textarea всередині composite — рівно по ширині картки.
     ВАЖЛИВО: виключаємо кнопки-іконки (type="image"/submit/button) та
     checkbox/radio, інакше кнопки "+"/"−" (додати/видалити рядок) роздуває
     на всю ширину. */
  .webform-submission-form table[data-drupal-selector="edit-household-members-items"] input:not([type="image"]):not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
  .webform-submission-form table[data-drupal-selector="edit-household-members-items"] select,
  .webform-submission-form table[data-drupal-selector="edit-household-members-items"] textarea,
  .webform-submission-form table[data-drupal-selector="edit-assets-list-items"] input:not([type="image"]):not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
  .webform-submission-form table[data-drupal-selector="edit-assets-list-items"] select,
  .webform-submission-form table[data-drupal-selector="edit-assets-list-items"] textarea,
  .webform-submission-form table[data-drupal-selector="edit-livestock-other-items"] input:not([type="image"]):not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
  .webform-submission-form table[data-drupal-selector="edit-livestock-other-items"] select {
    width: 100% !important;
    max-width: 100%;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  /* Кнопки-іконки рядків (додати/видалити/сортувати) — природний розмір,
     ніколи не тягнуться на всю ширину. */
  .webform-submission-form table[data-drupal-selector="edit-household-members-items"] input[type="image"],
  .webform-submission-form table[data-drupal-selector="edit-household-members-items"] .webform-multiple-table--operations input,
  .webform-submission-form table[data-drupal-selector="edit-assets-list-items"] input[type="image"],
  .webform-submission-form table[data-drupal-selector="edit-assets-list-items"] .webform-multiple-table--operations input,
  .webform-submission-form table[data-drupal-selector="edit-livestock-other-items"] input[type="image"],
  .webform-submission-form table[data-drupal-selector="edit-livestock-other-items"] .webform-multiple-table--operations input {
    width: auto !important;
    max-width: 28px !important;
    height: auto !important;
    display: inline-block;
  }

  /* Обгортки полів (у т.ч. бордовані блоки завантаження файлів) --------- */
  .webform-submission-form table[data-drupal-selector="edit-household-members-items"] .form-item,
  .webform-submission-form table[data-drupal-selector="edit-household-members-items"] .js-form-item,
  .webform-submission-form table[data-drupal-selector="edit-household-members-items"] .form-managed-file,
  .webform-submission-form table[data-drupal-selector="edit-household-members-items"] .js-form-managed-file {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Вкладені таблиці всередині картки household — не ширші за картку ---- */
  .webform-submission-form table[data-drupal-selector="edit-household-members-items"] table {
    width: 100% !important;
    max-width: 100%;
    table-layout: fixed;
  }

  /* --- Поля з суфіксом (грн / UAH) ------------------------------------
     Інпут на 100% ширини виштовхував суфікс "грн" за екран. Замість
     тендітного flex-підходу просто ЛИШАЄМО МІСЦЕ під суфікс, звужуючи
     інпут через calc(). Два рівні, щоб спрацювало за будь-якої розмітки:
     1) селективно — інпути в .form-item, де є .field-suffix;
     2) ГАРАНТОВАНО — усі числові поля доходу в картці household (усі вони
        мають суфікс "грн"), незалежно від назви класу суфікса. */

  .webform-submission-form .field-suffix,
  .webform-submission-form .field-prefix {
    white-space: nowrap;
    flex: 0 0 auto;
  }

  .webform-submission-form .form-item:has(.field-suffix) input[type="number"],
  .webform-submission-form .form-item:has(.field-suffix) input[type="text"] {
    width: calc(100% - 3.4rem) !important;
    min-width: 0 !important;
  }

  /* ГАРАНТОВАНИЙ backstop для картки household: числові поля доходу
     (Місячний дохід / пенсія / соц. виплати / інші) мають суфікс "грн".
     Ланцюжок :not(...) піднімає специфічність ВИЩЕ за composite-правило
     width:100% !important — інакше воно перебивало calc. */
  .webform-submission-form table[data-drupal-selector="edit-household-members-items"] input[type="number"]:not([type="image"]):not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]) {
    width: calc(100% - 3.6rem) !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  /* --- Блок завантаження файлу (і порожній, і з файлом) --------------
     У Claro file-input і кнопка "Викласти"/"Вилучити" лежать у
     внутрішньому flex-рядку .form-managed-file__main. На вузькому екрані
     вони накладались одна на одну. Розкладаємо ВЕСЬ блок вертикально. */
  .webform-submission-form .form-managed-file,
  .webform-submission-form .js-form-managed-file,
  .webform-submission-form .form-managed-file__main {
    display: block !important;
    width: 100%;
    max-width: 100%;
  }

  /* Прямі діти блоку — кожен своїм рядком, без float/absolute --------- */
  .webform-submission-form .form-managed-file > *,
  .webform-submission-form .js-form-managed-file > *,
  .webform-submission-form .form-managed-file__main > * {
    display: block;
    float: none !important;
    position: static !important;
    max-width: 100%;
  }

  /* Native file-input ("Выбрать файл") — окремим рядком */
  .webform-submission-form input[type="file"] {
    display: block;
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 0 8px 0;
  }

  /* Імʼя файлу + розмір переносяться (по словах) і не вилітають за рамку.
     white-space:normal !important перебиває nowrap теми; break-word (а не
     anywhere) не рве по літерах і не колапсує ширину. */
  .webform-submission-form .form-managed-file .file,
  .webform-submission-form .js-form-managed-file .file {
    display: block !important;
    width: 100%;
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: normal;
  }

  .webform-submission-form .form-managed-file .file a,
  .webform-submission-form .js-form-managed-file .file a {
    display: inline !important;
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: normal;
  }

  .webform-submission-form .erc-upload-success {
    display: block;
    width: 100%;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
  }

  /* Кнопки "Викласти" / "Вилучити" — окремим рядком під текстом,
     авто-ширина, нічого не накладається */
  .webform-submission-form .form-managed-file input[type="submit"],
  .webform-submission-form .js-form-managed-file input[type="submit"],
  .webform-submission-form .form-managed-file .button,
  .webform-submission-form .js-form-managed-file .button,
  .webform-submission-form .form-managed-file__main input[type="submit"],
  .webform-submission-form .form-managed-file__main .button {
    display: block !important;
    width: auto !important;
    max-width: 100%;
    margin: 4px 0 0 0 !important;
    float: none !important;
    position: static !important;
  }

  /* Кнопка "Викласти" (Upload) у Drupal прихована класом js-hide, бо файл
     вантажиться автоматично при виборі (як на десктопі). Наші display:block
     !important її випадково показали — повертаємо приховування. Вища
     специфічність (html.js + .webform-submission-form) перекриває їх. */
  html.js .webform-submission-form .form-managed-file .js-hide,
  html.js .webform-submission-form .js-form-managed-file .js-hide,
  html.js .webform-submission-form .form-managed-file__main .js-hide,
  html.js .webform-submission-form .js-hide {
    display: none !important;
  }

  /* --- Нативний file-input: компактніша кнопка + менший padding обгортки,
     щоб лишалось більше місця під статус-текст ("файл не вибрано") ------ */
  .webform-submission-form input[type="file"] {
    max-width: 100%;
    font-size: 0.85rem;
  }

  .webform-submission-form input[type="file"]::-webkit-file-upload-button,
  .webform-submission-form input[type="file"]::file-selector-button {
    font-size: 0.85rem;
    padding: 0.35rem 0.6rem;
  }

  /* Бордовані блоки завантаження мають інлайн padding:15px — на мобільному
     трохи зменшуємо, щоб додати ширину під кнопку/текст. */
  .webform-submission-form .form-managed-file[style],
  .webform-submission-form td .form-managed-file,
  .webform-submission-form .js-form-item [style*="padding: 15px"] {
    padding: 10px !important;
  }
}