/* ============================================================
   V2 — Forms (formgrid + fields + inputs)
   ============================================================
   Базові примітиви форм для v2-шару.
   Використання поряд з .v2-section-card.

   Структура:
     <div class="v2-formgrid v2-formgrid-3">
       <div class="v2-field">
         <label class="v2-field-label">Прізвище<span class="v2-req">*</span></label>
         <input class="v2-input" type="text">
         <span class="v2-field-hint">Як у паспорті</span>
       </div>
       ...
     </div>
   ============================================================ */

/* === Grid === */
/* П-6: власні контролі успадковують e-Ukraine та компактний розмір. */
.v2-form input,
.v2-form select,
.v2-form textarea,
.v2-formgrid input,
.v2-formgrid select,
.v2-formgrid textarea {
    font: inherit;
    font-size: var(--text-sm);
}

.v2-field-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
}

.v2-field-open {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    white-space: nowrap;
    text-decoration: none;
}

.v2-field-open:hover,
.v2-field-open:focus-visible {
    color: var(--accent);
    text-decoration: underline;
}

.v2-select-search {
    position: relative;
    flex: 1;
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

.v2-select-search > input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

/* The search field keeps the select's chevron; form input rules reset the background shorthand. */
body.v2-shell .v2-select-search > input {
    padding-right: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%238a8a86' stroke-width='1.5' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

body.v2-shell select.v2-select-search-native {
    position: absolute;
    width: 1px;
    min-width: 0;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
}

.v2-select-search-options {
    position: absolute;
    z-index: 50;
    top: calc(100% + var(--s-1));
    left: 0;
    right: 0;
    max-height: 240px;
    overflow: auto;
    padding: var(--s-1);
    border: 1px solid var(--border-default);
    border-radius: var(--r-sm);
    background: var(--bg-card);
    box-shadow: var(--shadow-xs-v2);
    font-size: var(--text-sm);
}

.v2-select-search-option {
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-sm);
    color: var(--text-primary);
    overflow-wrap: anywhere;
    cursor: pointer;
}

.v2-select-search-option:hover,
.v2-select-search-option[aria-selected="true"] {
    background: var(--bg-selected);
    color: var(--accent-text);
}

.v2-select-search-group {
    padding: var(--s-2) var(--s-3);
    color: var(--text-secondary);
    font-size: var(--text-xs);
}

.v2-locked-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    min-height: var(--row-height);
    padding: var(--s-3) var(--s-4);
    border: 1px dashed var(--border-default);
    border-radius: var(--r-sm);
    background: var(--bg-muted);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}

.v2-locked-control {
    position: relative;
}

.v2-locked-control > .v2-i {
    position: absolute;
    right: var(--s-3);
    top: var(--s-3);
    color: var(--text-secondary);
    pointer-events: none;
}

.v2-locked-control > :is(input, select, textarea) {
    padding-right: var(--s-8);
}

.v2-document-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--s-6);
}

.v2-document-layout > *,
.v2-business-document .v2-card-title-group {
    min-width: 0;
    overflow-wrap: anywhere;
}

.v2-business-document .v2-profile-section-title {
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
}

.v2-business-document .v2-formgrid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.v2-business-document [hidden] {
    display: none;
}

.v2-document-preview {
    position: sticky;
    top: var(--s-6);
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border-light);
    border-radius: var(--r-sm);
    padding: var(--s-3);
}

.v2-document-preview iframe {
    display: block;
    width: 100%;
    height: 72vh;
    border: 0;
}

.v2-document-preview img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: auto;
}

.v2-document-preview-actions,
.v2-document-party-control {
    display: flex;
    align-items: center;
    gap: var(--s-3);
}

.v2-document-preview-actions {
    flex-wrap: wrap;
    margin-bottom: var(--s-3);
}

/* Заміна аркуша: панель над переглядом PDF, «Було / Стане» поруч. */
.v2-page-replace {
    display: grid;
    gap: var(--s-3);
    margin-bottom: var(--s-3);
    padding: var(--s-3);
    border: 1px solid var(--border-light);
    border-radius: var(--r-sm);
    background: var(--bg-subtle);
}

.v2-page-replace-drop {
    grid-column: 1 / -1;
}

/* На сірому тлі панелі звичайна підказка не дотягує до контрасту 4.5. */
.v2-page-replace .v2-field-hint {
    color: var(--text-secondary);
}

.v2-page-replace-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3);
}

.v2-page-replace-compare {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-3);
}

.v2-page-replace-compare figure {
    display: grid;
    gap: var(--s-2);
    min-width: 0;
    margin: 0;
}

.v2-page-replace-compare figcaption {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.v2-page-replace-compare img {
    width: 100%;
    max-height: 48vh;
    object-fit: contain;
    border: 1px solid var(--border-light);
    border-radius: var(--r-sm);
    background: var(--bg-card);
}

.v2-document-counterparties,
.v2-document-party-links {
    display: grid;
    gap: var(--s-3);
}

.v2-document-party-control > select {
    min-width: 0;
    flex: 1;
}

/* Довга назва закладу переноситься, а не залазить у колонку контрагентів. */
.v2-document-party-links .v2-field-open {
    white-space: normal;
    overflow-wrap: anywhere;
}

.v2-document-preview:fullscreen {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border-radius: 0;
}

.v2-document-preview:fullscreen iframe,
.v2-document-preview:fullscreen img {
    flex: 1;
    min-height: 0;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 1100px) {
    .v2-document-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .v2-document-preview {
        position: static;
    }
}

@media (max-width: 720px) {
    .v2-business-document .v2-formgrid-2 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* box-sizing reset для всього всередині v2-formgrid (на випадок використання
   поза .v2-section-card). Без border-box inputs з width:100% + padding
   вилазять за межі клітинок. */
.v2-formgrid,
.v2-formgrid *,
.v2-formgrid *::before,
.v2-formgrid *::after {
    box-sizing: border-box;
}

.v2-formgrid {
    display: grid;
    gap: var(--s-6) var(--s-6);
    /* align-items: start — щоб клітинки з hint/error не розтягували
       сусідні по висоті, інакше label/input у сусідніх клітинках
       візуально "плавають" і відступи з'їдаються. */
    align-items: start;
}

.v2-formgrid-2 { grid-template-columns: 1fr 1fr; }
.v2-formgrid-3 { grid-template-columns: 1fr 1fr 1fr; }
.v2-formgrid-4 { grid-template-columns: repeat(4, 1fr); }

/* Ф-4: shared editable formset table; native table scrolling on narrow screens. */
.v2-line-table {
    min-width: 0;
}
.v2-line-table .v2-tbl td {
    vertical-align: middle;
}
.v2-line-table .v2-field {
    min-width: 100px;
}
.v2-line-table [data-v2-line-wide] {
    min-width: 180px;
}
/* Примітка - найдовше значення рядка; решта колонок за змістом. */
.v2-line-table [data-v2-line-wide]:has([name$="-notes"]) {
    min-width: 240px;
    width: 100%;
}
.v2-line-table-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}
.v2-line-table [data-v2-line-add] {
    margin-top: var(--s-4);
}
.v2-line-table [hidden] {
    display: none;
}

/* Ф-4: «було → стане» - колонка рядка, а не окремий підрядок. */
.v2-line-table .v2-line-table-preview {
    white-space: nowrap;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* Ф-3: блоки форми запису - «хмарки», як «Дані договору» в картці. */
[data-v2-form-frame] .v2-profile-frame {
    padding: var(--s-4) var(--s-5) var(--s-5);
}
[data-v2-form-frame] .v2-profile-section + .v2-profile-section {
    margin-top: var(--s-4);
}

.v2-formgrid .v2-span-2 { grid-column: span 2; }
.v2-formgrid .v2-span-3 { grid-column: span 3; }
.v2-formgrid .v2-span-full { grid-column: 1 / -1; }

/* На вузьких екранах згортаємо в 1 колонку */
@media (max-width: 720px) {
    .v2-formgrid-2,
    .v2-formgrid-3,
    .v2-formgrid-4 { grid-template-columns: 1fr; }
    .v2-formgrid .v2-span-2,
    .v2-formgrid .v2-span-3 { grid-column: auto; }
}

/* === Field wrapper === */
.v2-field {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    min-width: 0; /* щоб довгий input не розштовхував grid */
}

/* B5: обмеження ширини контролу за інформативним навантаженням.
   Клас ставиться на .v2-field — грід-клітинка лишається на місці,
   але контрол не розтягується ширше за розумний максимум для свого вмісту. */
.v2-field-cap-xs input,
.v2-field-cap-xs select { max-width: 120px; }  /* серія, № , індекс */
.v2-field-cap-sm input,
.v2-field-cap-sm select { max-width: 180px; }  /* дата, МФО, код */
.v2-field-cap-md input,
.v2-field-cap-md select { max-width: 280px; }  /* ІПН, телефон */
.v2-field-cap-lg input,
.v2-field-cap-lg select { max-width: 440px; }  /* IBAN, email */

/* Мітка тихіша за значення: у e-Ukraine Medium мітки й уведені дані
   виглядали однаково жирними, і око не бачило, що заповнено. */
.v2-field-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    color: var(--text-secondary);
    line-height: var(--leading-tight);
}

.v2-field-label .v2-req {
    color: var(--danger);
    margin-left: 2px;
}

.v2-field-hint {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    line-height: var(--leading-normal);
}

.v2-field-error {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    color: var(--danger);
    line-height: var(--leading-normal);
}

/* Field у стані помилки — рамка input/select/textarea стає червона */
.v2-field.is-error .v2-input,
.v2-field.is-error .v2-select,
.v2-field.is-error .v2-textarea {
    border-color: var(--danger);
}
.v2-field.is-error .v2-input:focus,
.v2-field.is-error .v2-select:focus,
.v2-field.is-error .v2-textarea:focus {
    box-shadow: 0 0 0 3px rgba(164, 50, 50, 0.18);
}

/* Короткі коди (літера й номер алфавітної книги, серія, індекс) - разом в одній клітинці
   ряду, а не кожен на третину ширини (власник 06.10, П-1). */
.v2-field-combo {
    display: grid;
    grid-template-columns: minmax(64px, 1fr) 2fr;
    align-items: end; /* довга мітка переноситься - поля все одно в один рівень */
    gap: var(--s-4);
    min-width: 0;
}
.v2-field-combo > .v2-field {
    min-width: 0;
}
/* Діапазон «з … по …» в одній клітинці: два однакові поля й слово між ними. */
.v2-field-combo.v2-field-range {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--s-2);
}
.v2-field-range > span { color: var(--text-secondary); }

/* Перехід до проблеми (П-7): поле, до якого привела помилка чи посилання, коротко
   світиться - око одразу знаходить місце. */
@keyframes v2-field-flash {
    0% { box-shadow: 0 0 0 0 var(--danger-bg); background-color: var(--danger-bg); }
    100% { box-shadow: 0 0 0 10px transparent; background-color: transparent; }
}
.v2-field.is-flash,
.v2-profile-section.is-flash,
.v2-section-card.is-flash {
    border-radius: var(--r-sm);
    animation: v2-field-flash 1s ease-out 2;
}
@media (prefers-reduced-motion: reduce) {
    .v2-field.is-flash,
    .v2-profile-section.is-flash,
    .v2-section-card.is-flash {
        animation: none;
        outline: 2px solid var(--danger);
        outline-offset: 2px;
    }
}

/* === Inputs === */
.v2-input,
.v2-select,
.v2-textarea {
    width: 100%;
    padding: 7px 10px;
    font-family: inherit;
    font-size: var(--text-md);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--r-sm);
    box-sizing: border-box;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.v2-input,
.v2-select {
    min-height: 34px;
}

.v2-input:hover,
.v2-select:hover,
.v2-textarea:hover {
    border-color: var(--border-strong);
}

.v2-input:focus,
.v2-select:focus,
.v2-textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

.v2-input::placeholder,
.v2-textarea::placeholder {
    color: var(--text-muted);
}

.v2-input[readonly],
.v2-textarea[readonly] {
    background: var(--bg-subtle);
    color: var(--text-secondary);
    cursor: default;
}

.v2-input:disabled,
.v2-select:disabled,
.v2-textarea:disabled {
    background: var(--bg-muted);
    color: var(--text-muted);
    cursor: not-allowed;
}

.v2-textarea {
    min-height: 72px;
    resize: vertical;
}

.v2-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%238a8a86' stroke-width='1.5' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
    cursor: pointer;
}

/* Зменшений варіант — для toolbar реєстру щоб збігатися висотою з .v2-searchinput
   і .v2-filterchip (28-30px) замість стандартних 36px. */
.v2-select-sm {
    min-height: 30px;
    /* padding-right ≥ arrow_position (10px) + arrow_width (10px) + safe gap (10px) */
    padding: 3px 32px 3px 10px;
    font-size: var(--text-sm);
    background-position: right 10px center;
}

/* === Checkbox / Radio === */
.v2-checkbox,
.v2-radio {
    display: inline-flex;
    align-items: center;
    gap: var(--s-4);
    cursor: pointer;
    font-size: var(--text-md);
    color: var(--text-primary);
    line-height: var(--leading-normal);
    user-select: none;
}

.v2-checkbox input,
.v2-radio input {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.v2-checkbox.is-disabled,
.v2-radio.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.v2-checkbox.is-disabled input,
.v2-radio.is-disabled input {
    cursor: not-allowed;
}

/* === Auto-save indicator (для використання поза .v2-section-card-head) === */
.v2-autosave {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    }

.v2-autosave .v2-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
    display: inline-block;
}

.v2-autosave.is-saving .v2-dot {
    background: var(--warning);
    animation: v2-section-card-pulse 1.2s ease-in-out infinite;
}

.v2-autosave.is-error .v2-dot {
    background: var(--danger);
}

/* ============================================================
   .v2-form — автоматичне стилювання native Django-widgets
   ============================================================
   Стандартні Django-форми рендерять `<input>`, `<select>`, `<textarea>` без
   класів. Замість того щоб модифікувати кожну форму, обгортаємо весь
   form-блок у .v2-form і застосовуємо v2-input/v2-select/v2-textarea
   стилі через element-selectors.

   Підтримує також native checkbox/radio з тими ж padding/border-radius.
*/
.v2-form input[type="text"],
.v2-form input[type="email"],
.v2-form input[type="tel"],
.v2-form input[type="number"],
.v2-form input[type="password"],
.v2-form input[type="date"],
.v2-form input[type="month"],
.v2-form input[type="datetime-local"],
.v2-form input[type="url"],
.v2-form input[type="search"] {
    width: 100%;
    padding: 7px 10px;
    font: inherit;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--r-sm);
    min-height: 34px;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
    box-sizing: border-box;
}
.v2-form input[type="date"],
.v2-form input[type="month"],
.v2-form input[type="datetime-local"] {
    height: calc(1lh + 16px);
}

.v2-form input[type="text"]:hover,
.v2-form input[type="email"]:hover,
.v2-form input[type="tel"]:hover,
.v2-form input[type="number"]:hover,
.v2-form input[type="password"]:hover,
.v2-form input[type="date"]:hover,
.v2-form input[type="month"]:hover,
.v2-form input[type="url"]:hover {
    border-color: var(--border-strong);
}
.v2-form input[type="text"]:focus,
.v2-form input[type="email"]:focus,
.v2-form input[type="tel"]:focus,
.v2-form input[type="number"]:focus,
.v2-form input[type="password"]:focus,
.v2-form input[type="date"]:focus,
.v2-form input[type="month"]:focus,
.v2-form input[type="url"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

.v2-form select {
    width: 100%;
    padding: 7px 28px 7px 10px;
    font: inherit;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--r-sm);
    min-height: 34px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%238a8a86' stroke-width='1.5' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    box-sizing: border-box;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.v2-form select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

.v2-form textarea {
    width: 100%;
    padding: 7px 10px;
    font: inherit;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--r-sm);
    min-height: 72px;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.v2-form textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

.v2-form input[readonly],
.v2-form textarea[readonly] {
    background: var(--bg-subtle);
    color: var(--text-secondary);
}

.v2-form input:disabled,
.v2-form select:disabled,
.v2-form textarea:disabled {
    background: var(--bg-muted);
    color: var(--text-muted);
    cursor: not-allowed;
}

.v2-form .v2-readonly-fieldset {
    min-inline-size: 0;
    border: 0;
    margin: 0;
    padding: 0;
}

.v2-form .v2-readonly-fieldset input:disabled,
.v2-form .v2-readonly-fieldset select:disabled,
.v2-form .v2-readonly-fieldset textarea:disabled {
    background: var(--bg-card);
    border-color: var(--border-subtle);
    color: var(--text-primary);
    cursor: default;
    opacity: 1;
    -webkit-text-fill-color: var(--text-primary);
}

.v2-form .v2-readonly-fieldset input[type="checkbox"]:disabled,
.v2-form .v2-readonly-fieldset input[type="radio"]:disabled {
    opacity: 1;
    cursor: default;
}

.v2-form .v2-empty-field {
    background-color: var(--v2-empty-field-bg, color-mix(in srgb, var(--bg-subtle) 44%, var(--bg-card)));
    border-color: var(--v2-empty-field-border, color-mix(in srgb, var(--border-subtle) 88%, var(--text-tertiary)));
    box-shadow: none;
}

.v2-form .v2-empty-field:focus {
    background-color: var(--bg-card);
}

.v2-form .errorlist {
    list-style: none;
    padding: var(--s-2) var(--s-3);
    margin: var(--s-1) 0 0 0;
    background: color-mix(in srgb, var(--danger) 8%, transparent);
    border-left: 3px solid var(--danger);
    border-radius: var(--r-sm);
    color: var(--danger);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    box-sizing: border-box;
}
.v2-form .errorlist li {
    display: flex;
    align-items: center;
    gap: var(--s-1);
}
.v2-form .errorlist li::before {
    content: "⚠️";
    font-size: var(--text-xs);
}

/* Django-стандартний label_tag → робимо v2-стилем */
.v2-form label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    color: var(--text-secondary);
    margin-bottom: var(--s-3);
    line-height: var(--leading-tight);
}
/* Inline checkbox label не повторює стиль (compact) */
.v2-form .v2-checkbox label,
.v2-form label.v2-checkbox-label {
    display: inline-flex;
    margin: 0;
    font-weight: normal;
    color: var(--text-primary);
    font-size: var(--text-md);
}

/* Wrapping: в Django форма часто рендерить помилки під полем + helptext */
.v2-form .helptext {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-top: 4px;
    display: block;
}

/* Поле з помилкою — червоний бордер на input */
.v2-form .field-with-errors input,
.v2-form .field-with-errors select,
.v2-form .field-with-errors textarea {
    border-color: var(--danger);
}

/* === Density overrides === */
[data-v2-density="compact"] .v2-input,
[data-v2-density="compact"] .v2-textarea {
    padding: 5px 8px;
    font-size: var(--text-sm);
}
[data-v2-density="compact"] .v2-input {
    min-height: 30px;
}
/* НЕ перекриваємо .v2-select padding у compact-режимі, бо .v2-select потребує
   місця для стрілки. .v2-select-sm уже має повноцінні compact-розміри. */
[data-v2-density="compact"] .v2-select {
    padding: 5px 28px 5px 8px;
    min-height: 30px;
    font-size: var(--text-sm);
}
/* .v2-select-sm зберігає свої власні значення в compact-режимі */
[data-v2-density="compact"] .v2-select-sm {
    padding: 3px 32px 3px 10px;
    min-height: 30px;
    background-position: right 10px center;
}

[data-v2-density="compact"] .v2-form input[type="text"],
[data-v2-density="compact"] .v2-form input[type="email"],
[data-v2-density="compact"] .v2-form input[type="tel"],
[data-v2-density="compact"] .v2-form input[type="number"],
[data-v2-density="compact"] .v2-form input[type="password"],
[data-v2-density="compact"] .v2-form input[type="date"],
[data-v2-density="compact"] .v2-form input[type="month"],
[data-v2-density="compact"] .v2-form input[type="datetime-local"],
[data-v2-density="compact"] .v2-form input[type="url"],
[data-v2-density="compact"] .v2-form input[type="search"],
[data-v2-density="compact"] .v2-form select {
    min-height: 30px;
    font-size: var(--text-sm);
}

[data-v2-density="compact"] .v2-formgrid {
    gap: var(--s-5) var(--s-5);
}

[data-v2-density="spacious"] .v2-input,
[data-v2-density="spacious"] .v2-select,
[data-v2-density="spacious"] .v2-textarea {
    padding: 9px 12px;
}

[data-v2-density="spacious"] .v2-formgrid {
    gap: var(--s-6) var(--s-7);
}

/* справа компенсації — отримувач, документи пакета і журнал */
body.v2-shell.page-compensation-case-v2 .v2-main #compensation-step-1-form .comp-picker-field > label {
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
}

/* Обране значення вже видно в полі - рядок під полем лише дублював би його
   (рішення ітерації 7б). Видно тільки попередження «Отримувача ще не обрано». */
body.v2-shell.page-compensation-case-v2 .v2-main #compensation-step-1-form .comp-picker-selected {
    display: none;
    margin: 0;
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    overflow-wrap: anywhere;
    white-space: normal;
}

body.v2-shell.page-compensation-case-v2 .v2-main #compensation-step-1-form .comp-picker-selected:not(.has-value) {
    display: none;
}

body.v2-shell.page-compensation-case-v2 .v2-main #compensation-step-1-form [data-picker-selected="guardian"]:not(.has-value) {
    display: block;
    color: var(--warning-text, var(--warning));
    font-weight: var(--weight-regular);
}

body.v2-shell.page-compensation-case-v2 .v2-main #compensation-step-1-form .comp-picker-selected strong {
    font-weight: inherit;
}

body.v2-shell.page-compensation-case-v2 .v2-main #compensation-step-1-form .comp-picker-option {
    overflow-wrap: anywhere;
    white-space: normal;
}

body.v2-shell.page-compensation-case-v2 .v2-main .v2-comp-case-documents {
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

body.v2-shell.page-compensation-case-v2 .v2-main .v2-comp-case-documents .comp-doc-list,
body.v2-shell.page-compensation-case-v2 .v2-main .v2-comp-case-documents .comp-doc-row {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

body.v2-shell.page-compensation-case-v2 .v2-main .v2-comp-case-documents .comp-doc-row {
    padding: var(--s-3) 0;
}

body.v2-shell.page-compensation-case-v2 .v2-main .v2-comp-case-documents .comp-disclosure-title span {
    overflow: visible;
    white-space: normal;
}

body.v2-shell.page-compensation-case-v2 .v2-main .v2-comp-case-documents .v2-comp-case-document-name {
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}

body.v2-shell.page-compensation-case-v2 .v2-main .v2-comp-case-attention {
    color: var(--warning-text, var(--warning));
}

body.v2-shell.page-compensation-case-v2 .v2-main .v2-comp-case-empty {
    margin: var(--s-3) 0;
    font-size: var(--text-sm);
}

body.v2-shell.page-compensation-case-v2 .v2-main .v2-comp-case-documents .comp-doc-date span {
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
}

/* Наявність файла не означає застарілість: контекст кроку її не передає. */
body.v2-shell.page-compensation-case-v2 .v2-main .v2-comp-case-documents .v2-btn.is-document-refresh {
    border-color: transparent;
    background: transparent;
    color: var(--text-secondary);
    box-shadow: none;
}

body.v2-shell.page-compensation-case-v2 .v2-main .v2-comp-case-documents .v2-btn.is-document-refresh:hover:not(:disabled):not(.is-disabled) {
    border-color: transparent;
    background: var(--bg-hover);
    color: var(--text-primary);
}

body.v2-shell.page-compensation-case-v2 .v2-main .comp-doc-history {
    border: 0;
    box-shadow: none;
}

body.v2-shell.page-compensation-case-v2 .v2-main .comp-doc-history .v2-section-card-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}

body.v2-shell.page-compensation-case-v2 .v2-main .comp-history-table td {
    overflow-wrap: anywhere;
    white-space: normal;
}

body.v2-shell.page-compensation-case-v2 .v2-main .comp-history-table td:first-child {
    font-weight: var(--weight-medium);
}