/* ========================
   ОБЩИЕ СТИЛИ ДЛЯ ВСЕХ ОПРОСНИКОВ
   ======================== */

/* 1. Базовые */
body { 
    font-family: 'Segoe UI', sans-serif; 
    background: white; 
    margin: 0; 
    padding: 0; 
    color: #333; 
    overflow-x: hidden; 
}

h2, .field-group, .add-field-btn { 
    padding-left: 0; 
    padding-right: 0; 
}

h2 { 
    margin-top: 0; 
    color: #211e1e; 
    border-bottom: 2px solid #3b3535; 
    padding-bottom: 8px; 
    font-size: 18px;
    text-transform: uppercase; 
    margin-bottom: 15px;
}

/* 2. Секции (объединены hover и open) */
.section-block { margin-bottom: 4px; }

.section-header { 
    background: #e8f5e9;
    color: #2e7d32; 
    padding: 7px 10px; 
    cursor: pointer; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    font-weight: bold; 
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    user-select: none;
    border: 1px solid #4caf50;
    border-radius: 6px; 
    margin: 4px;
}

.section-header .section-toggle {
    align-self: center;
}

.section-toggle {
    width: 8px;
    height: 8px;
    border-right: 2px solid #2e7d32;
    border-bottom: 2px solid #2e7d32;
    transform: rotate(45deg);
    margin-top: -2px;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.section-block.open .section-toggle { transform: rotate(-135deg); }
.section-block.open .section-content { display: block; }
.section-content { padding: 8px; display: none; background: white; }

/* 3. Поля ввода */
.field-group { 
    margin-bottom: 15px; 
    border-bottom: 1px solid #f0f0f0; 
    padding-bottom: 8px; 
}

label { 
    display: block; 
    font-weight: 700;
    margin-bottom: 2px; 
    font-size: 13px; 
    color: #263238; 
    text-decoration: underline; 
}

input, textarea { 
    width: 100%; 
    padding: 8px 10px; 
    border: 1px solid #cfd8dc; 
    border-radius: 6px; 
    box-sizing: border-box; 
    font-size: 16px;
    font-family: 'Segoe UI', sans-serif;
    background: #fafafa; 
    display: block; 
    outline: none; 
    transition: all 0.2s; 
}

input:focus, textarea:focus { 
    border-color: #4caf50; 
    background: #fff; 
}

textarea { resize: none; min-height: 60px; overflow: hidden; }

/* Плейсхолдеры */
input::placeholder, textarea::placeholder { color: #999; opacity: 1; }
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #999; }
input::-moz-placeholder, textarea::-moz-placeholder { color: #999; opacity: 1; }

/* 4. Подсказки */
.hint { 
    font-size: 12px; 
    color: #2e7d32; 
    margin-bottom: 4px; 
    display: block; 
    line-height: 1.3; 
    background: #f1f8e9; 
    padding: 4px 10px; 
    border-left: 3px solid #4caf50; 
}

/* 5. Ссылки (объединены remove-btn и task-remove-link) */
.add-field-btn { 
    font-size: 11px; 
    color: #1976d2; 
    cursor: pointer; 
    text-decoration: none; 
    display: inline-block; 
    margin-top: 5px; 
    font-weight: bold; 
}

.remove-btn, .task-remove-link { 
    color: #f44336; 
    cursor: pointer; 
    font-weight: bold; 
    font-size: 20px; 
    padding: 0 5px; 
    user-select: none; 
    line-height: 1;
}

.remove-btn:hover, .task-remove-link:hover { color: #d32f2f; }
.task-remove-link { font-size: 13px; text-decoration: underline; }

/* 6. Поля в строку */
.row-fields { display: flex; gap: 10px; }
.row-fields .field-group { flex: 1; }

/* ========================
   NPCR (Карточка группы)
   ======================== */

.member-row { margin-bottom: 8px; }

.member-fields {
    display: flex;
    align-items: center;
    height: 38px;
    overflow: hidden;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fafafa;
    font-size: 16px;
    line-height: 38px;
}

.member-number {
    font-weight: 700;
    color: #333;
    min-width: 30px;
    text-align: center;
    font-size: 16px;
    line-height: 38px;
    border-right: 1px solid #eee;
}

/* Внутренние поля участников (без рамок) */
.member-fields input {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 16px !important;
    padding: 0 8px !important;
    line-height: normal !important;
}

.member-fields input:focus { background: #fff !important; }
.member-fields input.member-name { flex: 2; }
.member-fields input.member-phone { flex: 1.5; border-left: 1px solid #eee !important; }
.member-fields .remove-btn { line-height: 38px; }
.member-fields .remove-btn:hover { background: #ffebee; }

/* Старший группы */
.senior-fields { border-color: #90a4ae !important; background: #eceff1 !important; }
.senior-fields .member-number { color: #546e7a !important; border-right: 1px solid #cfd8dc; }
.senior-fields input { flex: 1 !important; border: none !important; background: transparent !important; }
.senior-fields input:focus { background: #fff !important; }

/* ========================
   222222 (Опросник)
   ======================== */

/* Переключатель М/Ж */
.gender-toggle { display: flex; height: 30px; border: 1px solid #ccc; border-radius: 4px; overflow: hidden; margin-top: 5px; }
.gender-btn { border: none; background: #eceff1; color: #546e7a; cursor: pointer; padding: 0 10px; font-weight: bold; font-size: 12px; transition: all 0.2s; }
.gender-btn.active { background: #4caf50; color: white; }
.gender-btn:first-child { border-right: 1px solid #ccc; }

/* Динамические поля */
.dynamic-field-wrapper { position: relative; margin-top: 8px; display: flex; align-items: center; gap: 8px; }
.dynamic-field { border-left: 3px dashed #1976d2 !important; background: #f9fbe7 !important; flex-grow: 1; }

/* Заголовки секций */
.section-title { background: #ffffff; color: #333; padding: 6px 0; border-top: 3px solid #545454; border-bottom: 1px solid #eee; font-size: 15px; font-weight: bold; margin: 15px 0 0 0; display: block; }

/* Editable field */
.editable-field { 
    min-height: 33px; 
    line-height: 1.4; 
    white-space: pre-wrap; 
    overflow-wrap: break-word; 
    cursor: text; 
    width: 100%; 
    padding: 8px 10px; 
    border: 1px solid #cfd8dc; 
    border-radius: 6px; 
    box-sizing: border-box; 
    font-size: 16px;
    background: #fafafa; 
    display: block; 
    outline: none; 
    transition: all 0.2s; 
}
.editable-field:focus { border-color: #4caf50; background: #fff; }
.editable-field:empty:before { content: attr(placeholder); color: #999; }