/* ============================================
   form-group.css — стили для форм
   Базовая стилизация: .form-group — это блок с фоном, границей и внутренними отступами,
   внутри которого label и поле ввода (без собственной обводки)
   ============================================ */

/* ---------- Базовый контейнер (карточка) ---------- */
.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--space-xs);
    /* background: #f6f9ff; */
    border: 1px solid var(--text-light);
    border-radius: var(--radius-lg);
    padding: var(--space-xs) var(--space-md) var(--space-xs) var(--space-md);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Ховер для контейнера */
.form-group:hover {
    border-color: var(--text-light);
    background-color: var(--primary-light);
}

/* Фокус на любом поле внутри контейнера */
.form-group:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-hover);
    /* сохраняем border, чтобы не было скачка */
    border: 1px solid var(--text-light);
}

/* ---------- Метки внутри контейнера ---------- */
.form-group label {
    font-size: 0.6rem;
    text-transform: uppercase;
    font-weight: 700;
    /* color: var(--text-muted); */
    color: #0070b6;
    letter-spacing: 0.02em;
    padding: 2px 10px 0 10px;
    margin: 0;
    margin-bottom: 0.25rem;
    line-height: 1.2;
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
    white-space: nowrap;
}

/* ---------- Поля ввода, select, textarea (без собственной обводки, с прозрачным фоном) ---------- */
.form-group input,
.form-group select {
    width: 100%;
    border: none;
    background: transparent;
    /* background: #f6f9ff; */
    padding: 5px 5px 0.25px 10px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text);
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
    outline: none;
    transition: all 0.2s ease;
    border-radius: var(--radius-lg);
}

.form-group textarea, .form-group ::placeholder {
    width: 100%;
    border: none;
    background: transparent;
    /* background: #f6f9ff; */
    padding: 5px 5px 0.25px 15px;
    border-radius: var(--radius);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
    outline: none;
    transition: all 0.2s ease;
}

/* Фокус на поле — не добавляем обводку, так как контейнер уже подсвечен */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    box-shadow: none;
}

/* Специальный ховер для полей (опционально) */
.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
    /* можно оставить пустым или добавить легкий эффект */
}

/* Невалидное поле — только меняем цвет текста или иконку, но не границу (граница у контейнера) */
.form-group input:invalid {
    /* border-color у контейнера меняется через :has, если нужно, но для простоты оставим так */
}

/* ---------- Кастомный select (стрелка) ---------- */
.form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1.2rem;
    padding-right: 2rem;
}

.form-group select option {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---------- Убираем стрелки у number ---------- */
.form-group input[type="number"] {
    -moz-appearance: textfield;
}

.form-group input[type="number"]::-webkit-outer-spin-button,
.form-group input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ---------- Модификатор .compact (компактная форма) ---------- */
.form-group.compact {
    margin-bottom: 0.8rem;
    padding: var(--space-xs) var(--space-sm);
}

.form-group.compact label {
    font-size: 0.75rem;
    margin-bottom: 0.3rem;
    padding-left: 10px;
}

.form-group.compact input,
.form-group.compact select {
    padding: 0.4rem 0.6rem 0.4rem 10px;
    font-size: 0.8rem;
}

/* ---------- Модификатор .card-field (поля внутри карточек) ---------- */
/* Переопределяем базовые стили для card-field */
.form-group.card-field {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
}

.form-group.card-field label {
    display: flex;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding-left: 0;
}

.form-group.card-field label::before {
    content: '•';
    color: var(--primary);
    font-size: 1.2rem;
    line-height: 1;
    margin-right: 4px;
}

.form-group.card-field input,
.form-group.card-field select,
.form-group.card-field textarea {
    width: 100%;
    padding: var(--space-md) var(--space-lg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    /* возвращаем обводку для card-field, так как контейнер не имеет рамки */
}

.form-group.card-field input:focus,
.form-group.card-field select:focus,
.form-group.card-field textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
    background: var(--surface);
}

.form-group.card-field input:hover,
.form-group.card-field select:hover,
.form-group.card-field textarea:hover {
    border-color: var(--primary-light);
}

/* Валидация для card-field */
.form-group.card-field.invalid label {
    color: var(--error);
}

.form-group.card-field.invalid label::before {
    color: var(--error);
}

.form-group.card-field.invalid input,
.form-group.card-field.invalid select,
.form-group.card-field.invalid textarea {
    border-color: var(--error);
    background: var(--error-light);
}

.form-group.card-field.invalid input:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 20%, transparent);
}

/* Readonly для card-field */
.form-group.card-field.readonly input,
.form-group.card-field.readonly select,
.form-group.card-field.readonly textarea {
    background: var(--background-alt);
    color: var(--text-muted);
    cursor: not-allowed;
    border-color: var(--border);
}

.form-group.card-field.readonly label {
    color: var(--text-light);
}

/* ---------- Сетка .form-grid.compact ---------- */
.form-grid.compact .form-group {
    padding: var(--space-xs) var(--space-sm);
}

/* Специфичное поле (плотность) */
.form-group.density-area {
    background: var(--background-alt);
    border-color: var(--border-light);
}

/* ---------- Утилиты ---------- */
.form-group .field-hint {
    display: none;
}

/* Курсор-указатель для контейнеров с полями */
.form-group:has(input, select, textarea),
.modal-body .form-group:has(input, select, textarea) {
    cursor: pointer;
}

.form-group.select-container {
    cursor: pointer;
}

.trigger-text {
    padding: 5px 10px 5px 0px;
}

/* ---------- Адаптивность ---------- */
@media (max-width: 480px) {
    .form-group.card-field input,
    .form-group.card-field select,
    .form-group.card-field textarea {
        padding: 0.6rem 0.9rem;
        font-size: 0.85rem;
    }
}

/* ---------- Поддержка модальных окон ---------- */
.modal,
.modal * {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
}

.modal .form-group select,
.modal .form-group select option {
    font-family: 'Nunito', sans-serif !important;
}