/* ============================================================
   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 === */
/* 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); }

.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 */

.v2-field-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    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);
}

/* === 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="datetime-local"],
.v2-form input[type="url"],
.v2-form input[type="search"] {
    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);
    min-height: 34px;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
    box-sizing: border-box;
}
.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="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="url"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

.v2-form select {
    width: 100%;
    padding: 7px 28px 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);
    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-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);
    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: 10px;
}

/* Django-стандартний label_tag → робимо v2-стилем */
.v2-form label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    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="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);
}