/*
Theme Name: soniq
Author: soniq team
*/

/* --- Подключение шрифтов Proxima Nova --- */
@font-face {
    font-family: 'Proxima Nova';
    src: url('fonts/proximanova_light.otf') format('opentype');
    font-weight: 300; /* Light */
    font-style: normal;
}

@font-face {
    font-family: 'Proxima Nova';
    src: url('fonts/proximanova_regular.ttf') format('truetype');
    font-weight: 400; /* Regular */
    font-style: normal;
}

@font-face {
    font-family: 'Proxima Nova';
    src: url('fonts/proximanova_bold.otf') format('opentype');
    font-weight: 700; /* Bold */
    font-style: normal;
}

@font-face {
    font-family: 'Proxima Nova';
    src: url('fonts/proximanova_extrabold.otf') format('opentype');
    font-weight: 800; /* ExtraBold */
    font-style: normal;
}

@font-face {
    font-family: 'Proxima Nova';
    src: url('fonts/proximanova_black.ttf') format('truetype');
    font-weight: 900; /* Black */
    font-style: normal;
}

/* --- Курсивные начертания --- */
@font-face {
    font-family: 'Proxima Nova';
    src: url('fonts/proximanova_boldit.otf') format('opentype');
    font-weight: 700; /* Bold Italic */
    font-style: italic;
}

@font-face {
    font-family: 'Proxima Nova';
    src: url('fonts/proximanova_blackit.otf') format('truetype');
    font-weight: 900; /* Black Italic */
    font-style: italic;
}
/* --- Конец подключения шрифтов --- */


/* --- Переменные (Цвета и Шрифт) --- */
:root {
    --brand-blue: #1057ff;
    --text-dark: #111111;
    --text-light: #555555;
    --border-color: #dcdfe6;
    --bg-light-gray: #f4f7fa;
    --bg-white: #ffffff;
    --font-family: 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    /* Цвета статусов заявок */
    --status-scheduled: #fffbe6; 
    --status-en-route: #fff0e6; 
    --status-in-progress: #e6f7ff; 
    --status-done: #e6ffed; 
    --status-canceled: #ffe6e6; 
    --status-new: #ffffff; 
}

/* --- Базовые стили --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family);
    background-color: var(--bg-light-gray);
    color: var(--text-dark);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* --- Шапка --- */
.crm-header {
    background-color: var(--bg-white);
    padding: 0 32px; 
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    height: 64px; 
}

.logo-container .logo {
    height: 32px;
    display: block;
}

/* --- Стили Меню навигации --- */
.crm-nav {
    display: flex;
    align-items: center;
}

.crm-nav ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
    
    border: 1px solid var(--border-color); 
    border-radius: 8px; 
    overflow: hidden; 
    flex-shrink: 0; 
}

.crm-nav li {
    margin-left: 0; 
    flex: 1; 
}

/* Разделитель на элементе списка, кроме последнего */
.crm-nav li:not(:last-child) {
    border-right: 1px solid var(--border-color); 
}

.crm-nav a {
    display: block;
    padding: 10px 20px; 
    text-decoration: none;
    font-size: 16px; 
    font-weight: 600;
    color: var(--text-light);
    transition: all 0.2s ease-in-out;
    background-color: transparent;
    text-align: center;
    white-space: nowrap; 
}

.crm-nav a:hover {
    color: var(--text-dark);
    background-color: #f0f4ff; 
}

.crm-nav a.active {
    color: var(--bg-white);
    background-color: var(--brand-blue);
    box-shadow: none; 
}
/* --- Конец стилей меню --- */


/* --- Основная область --- */
.crm-main {
    padding: 40px 24px;
    display: flex;
    justify-content: center;
}

.form-card {
    background-color: var(--bg-white);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
    padding: 32px;
    width: 100%;
    max-width: 600px;
}

h1 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 24px;
    color: var(--text-dark);
}

/* --- Стили Формы: Унификация высоты --- */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-light);
}

input[type="tel"],
input[type="text"], 
input[type="datetime-local"], 
select {
    /* ЖЕСТКАЯ ВЫСОТА И УНИФИКАЦИЯ */
    width: 100%; 
    padding: 7px 16px; /* 7px padding + 1px border = 8px вертикально */
    min-height: 38px; /* Унифицированная высота */
    
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 400;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: #fcfdff;
    transition: all 0.2s ease-in-out;
    margin-top: 8px; /* Глобальный отступ */
    line-height: normal; 
}

textarea {
    width: 100%; 
    padding: 8px 16px; 
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 400;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: #fcfdff;
    transition: all 0.2s ease-in-out;
    margin-top: 8px; 
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
}

input[type="tel"]::placeholder,
input[type="text"]::placeholder, 
textarea::placeholder {
    color: #a0a0a0;
}

/* КРИТИЧЕСКИЙ ФИКС ДЛЯ DATETIME-LOCAL */
input[type="datetime-local"] {
    padding: 7px 16px !important; 
    line-height: normal !important; 
    min-height: 38px; 
}

/* Стили для SELECT: ФИНАЛЬНЫЙ ФИКС ВЫСОТЫ */
select {
    appearance: none;
    padding: 7px 16px; 
    min-height: 38px;
    
    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='%23333' 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 16px center;
    background-size: 16px;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(16, 87, 255, 0.1);
}

/* Стили для полей адреса (для index.html) */
.address-fieldset {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

.address-fieldset legend {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-light);
    padding: 0 8px; 
    margin-left: 8px; 
}

.address-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 16px; 
    grid-template-areas: 
        "city street"
        "house apartment";
}

.address-grid .city { grid-area: city; }
.address-grid .street { grid-area: street; }
.address-grid .house { grid-area: house; }
.address-grid .apartment { grid-area: apartment; }

.address-grid .form-group {
    margin-bottom: 0;
}

/* --- Переключатель провайдера (Для index.html) --- */
.provider-toggle {
    display: flex;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.provider-toggle input[type="radio"] {
    display: none;
}

.provider-toggle label {
    flex: 1;
    text-align: center;
    padding: 10px 16px; 
    margin: 0;
    font-size: 16px; 
    font-weight: 600;
    color: var(--text-light); 
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    background-color: transparent; 
}

.provider-toggle label:first-of-type {
    border-right: 1px solid var(--border-color);
}

.provider-toggle input[type="radio"]:checked + label {
    background-color: var(--brand-blue);
    color: var(--bg-white);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}


/* --- Кнопки (ОДИНАКОВАЯ ВЫСОТА С ПОЛЯМИ ВВОДА) --- */

/* ОБЩИЙ СТИЛЬ КНОПОК ДЛЯ УНИФИКАЦИИ ВЫСОТЫ */
.btn-submit,
.btn-secondary,
.btn-cancel,
a.js-log-call {
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 600; 
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    
    /* ЖЕСТКАЯ ВЫСОТА И ЦЕНТРИРОВАНИЕ */
    min-height: 38px; 
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none; 
}

/* Главная кнопка (8px padding + 0 border) */
.btn-submit {
    width: 100%; 
    padding: 0 20px; /* Только горизонтальный padding */
    font-weight: 700;
    color: var(--bg-white);
    background-color: var(--brand-blue);
    border: none;
    margin-top: 16px;
}

.btn-submit:hover {
    background-color: #0048e6;
    box-shadow: 0 4px 10px rgba(16, 87, 255, 0.2);
}

/* Универсальный стиль для дополнительных кнопок (0 padding + 1px border) */
.btn-secondary {
    padding: 0 18px; 
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    color: var(--text-dark);
}

.btn-secondary:hover {
    background-color: #f0f4ff;
    border-color: var(--brand-blue);
    color: var(--brand-blue);
}

/* Красная кнопка отмены (0 padding + 0 border) */
.btn-cancel {
    padding: 0 18px; 
    background-color: #ff3333;
    color: var(--bg-white);
    border: none;
    font-weight: 700;
}

.btn-cancel:hover {
    background-color: #cc0000;
}

/* --- Стили для валидации --- */
input:required:invalid,
select:required:invalid {
    border-color: #ffcccc; 
}

input:focus:invalid,
select:focus:invalid {
    border-color: #ff8080; 
    box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.1);
}


/* ----------------------------------------------------- */
/* --- СТИЛИ ДЛЯ СПИСКА ЗАЯВОК (КАРТОЧКИ) --- */
/* ----------------------------------------------------- */

.active-requests-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.request-list {
    display: flex;
    flex-direction: column;
    gap: 16px; 
}

.request-card {
    background-color: var(--bg-white); 
    border-radius: 12px;
    border: 1px solid var(--border-color);
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: background-color 0.3s;
}

/* Цвета статусов */
.status-scheduled { background-color: var(--status-scheduled); border-left: 5px solid #ffcc00; }
.status-en-route { background-color: var(--status-en-route); border-left: 5px solid #ff9900; }
.status-in-progress { background-color: var(--status-in-progress); border-left: 5px solid #0099ff; }
.status-done { background-color: var(--status-done); border-left: 5px solid #00b33c; }
.status-canceled { background-color: var(--status-canceled); border-left: 5px solid #ff3333; }
.status-new { background-color: var(--bg-white); border-left: 5px solid var(--brand-blue); } 


.request-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--border-color);
}

.request-type-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--brand-blue); 
    background-color: transparent; 
}

.request-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
    font-size: 15px;
    margin-bottom: 15px;
}

.info-item {
    display: flex;
    align-items: flex-start;
}
.info-item strong {
    font-weight: 600;
    color: var(--text-dark);
    min-width: 100px; 
    margin-right: 5px; 
}
.info-item span {
    color: var(--text-light);
    word-break: break-word; 
}


/* ФИКС ОТОБРАЖЕНИЯ КОММЕНТАРИЕВ В ACTIVE И MONTAZHNIK */
.comments-section {
    padding-top: 15px;
    border-top: 1px dashed var(--border-color); 
    margin-bottom: 0; 
}

/* Блок, содержащий один комментарий */
.comment-block {
    margin-bottom: 25px; /* Явный отступ между комментариями и в конце секции */
}
.comments-section .comment-block:last-of-type {
    margin-bottom: 0;
}

/* Метаданные (Автор, Дата) */
.comment-meta {
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 4px; /* Небольшой отступ от текста */
    line-height: 1.2; 
}

/* Текст комментария */
.last-comment {
    font-size: 15px;
    color: var(--text-dark);
    margin-top: 0; 
    margin-bottom: 0; /* Убираем лишний отступ, он будет в .comment-block */
}

/* Действия с комментарием (кнопки) */
.comment-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px; /* Отступ после последнего комментария */
    padding-top: 0; 
    border-top: none; 
}
.comment-actions .btn-secondary {
    flex-grow: 1; 
}


/* --- БЛОК ДЕЙСТВИЙ В ACTIVE.HTML: ФИНАЛЬНЫЙ ФИКС ВЫРАВНИВАНИЯ И ВЫСОТЫ --- */
.request-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 25px; 
    padding-top: 0; 
    border-top: none; 
    align-items: flex-end; /* CRITICAL: Выравнивает все элементы по нижнему краю */
}

/* Блок График + Монтажник: делаем горизонтальным */
.data-entry-form {
    display: flex;
    gap: 10px;
    flex-grow: 1; 
    min-width: 300px; 
}

/* Группа формы внутри блока действий: убираем растяжение */
.data-entry-form .form-group {
    flex-grow: 1;
    margin-bottom: 0; /* CRITICAL: Убираем стандартный отступ 20px */
    display: flex; /* Используем Flexbox */
    flex-direction: column; 
    justify-content: flex-end; /* CRITICAL: Прижимаем содержимое к низу группы */
    height: auto; 
}

/* Точная настройка отступов, чтобы поле было внизу группы */
.data-entry-form .form-group label {
    margin-bottom: 4px; /* Прижимаем Label к полю ввода */
}

.data-entry-form .form-group input,
.data-entry-form .form-group select {
    margin-top: 0; /* CRITICAL FIX: Удаляем 8px верхний отступ, чтобы поле ввода поднялось и выровнялось */
}

/* Кнопки: прижимаем к низу (уже сделано в .request-actions) и предотвращаем растяжение */
.request-actions .btn-submit,
.request-actions .btn-secondary,
.request-actions .btn-cancel {
    align-self: flex-end; 
    flex-shrink: 0;
    width: auto;
    margin-top: 0; 
}
/* ----------------------------------------------------- */


/* БЛОК ПРОВАЙДЕРА + КНОПКА "СЕТЕВЫЕ ДАННЫЕ" (для montazhnik.html) */
.provider-network-block {
    display: flex;
    flex-direction: column; 
    align-items: flex-start; 
}
.provider-label-value {
    display: flex;
    align-items: baseline;
    margin-bottom: 0; 
    width: 100%; 
}
.provider-network-block .btn-secondary {
    padding: 0 18px; /* Используем унифицированный стиль кнопки */
    font-size: 16px;
    width: fit-content; 
    margin-top: 15px; 
}


/* КНОПКА "ПОЗВОНИТЬ АБОНЕНТУ" (для montazhnik.html) */
a.js-log-call {
    width: 100%; 
    margin-top: 15px; 
    background-color: var(--brand-blue); 
    padding: 0 20px; 
    font-weight: 700;
    color: var(--bg-white);
    border: none;
}

a.js-log-call:hover {
    background-color: #0048e6;
}


/* ----------------------------------------------------- */
/* --- СТИЛИ ДЛЯ МОДАЛЬНЫХ ОКОН (МОДАЛЫ) --- */
/* ----------------------------------------------------- */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none; 
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background: var(--bg-white);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 500px;
    position: relative;
    max-height: 90vh; 
    overflow-y: auto; 
}

.modal-content h3 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 20px;
    color: var(--brand-blue);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

/* ФИКС КОММЕНТАРИЕВ В МОДАЛЕ */
#all-comments-list .comment-block:last-of-type {
    margin-bottom: 0; 
}
#all-comments-list .comment-block {
    margin-bottom: 15px;
}
/* КОНЕЦ ФИКСА */


.close-modal {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-light);
    line-height: 1;
    transition: color 0.2s;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

/* Убираем верхний отступ у кнопок внутри .modal-actions */
.modal-actions .btn-submit,
.modal-actions .btn-secondary,
.modal-actions .btn-cancel {
    margin-top: 0;
}

/* СТИЛИ ДЛЯ КОПИРОВАНИЯ */
.copyable-value {
    cursor: pointer;
    text-decoration: underline dotted var(--brand-blue); 
    transition: color 0.1s;
}

#copy-notification {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(50px);
    background-color: #00b33c; 
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    z-index: 1001;
}
#copy-notification.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ----------------------------------------------------- */
/* --- МЕДИА-ЗАПРОСЫ ДЛЯ АДАПТИВНОСТИ --- */
/* ----------------------------------------------------- */

/* 1. Адаптация для экранов меньше 768px */
@media (max-width: 768px) {
    
    .crm-main {
        padding: 20px 15px;
    }
    
    /* Адаптация карточки заявки */
    .request-info {
        grid-template-columns: 1fr; 
    }

    /* Навигация становится вертикальной */
    .crm-nav ul {
        flex-direction: column;
        border: 1px solid var(--border-color); 
        border-radius: 8px;
        width: 100%;
        overflow: hidden;
    }
    .crm-nav li {
        width: 100%;
        margin-left: 0; 
    }
    .crm-nav li:not(:last-child) {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }
    .crm-nav a {
        padding: 12px 18px; 
    }
    .crm-nav li:last-child a {
        border-bottom: none; 
    }

    /* На мобильных кнопка "Сетевые данные" занимает всю ширину */
    .provider-network-block .btn-secondary {
        width: 100%; 
        padding: 0 18px; 
        font-size: 16px;
    }
    
    /* Адаптация блока График + Монтажник: Снова делаем вертикальным на узких экранах */
    .data-entry-form {
        flex-direction: column;
        gap: 0; 
    }
    /* Восстанавливаем вертикальное отображение и отступы для form-group */
    .data-entry-form .form-group {
        margin-bottom: 15px; 
        display: block; /* Убираем flex */
        height: auto; 
    }
    .data-entry-form .form-group:last-child {
         margin-bottom: 0;
    }
    
    /* Восстанавливаем стандартные отступы для полей */
    .data-entry-form .form-group label {
        margin-bottom: 8px;
    }
    .data-entry-form .form-group input,
    .data-entry-form .form-group select {
        margin-top: 8px; /* Восстанавливаем верхний отступ на мобильных, так как поле под label */
        padding: 7px 16px; 
        min-height: 38px;
    }
    
    /* Кнопка "Назначить/Обновить" на мобильных снова с верхним отступом */
    .request-actions .btn-submit,
    .request-actions .btn-secondary,
    .request-actions .btn-cancel {
        margin-top: 15px; 
        align-self: auto;
        width: 100%; /* Устанавливаем 100% ширину для кнопок в мобильной раскладке */
        padding: 0 20px; 
    }
    .request-actions .btn-submit:first-child,
    .request-actions .btn-secondary:first-child,
    .request-actions .btn-cancel:first-child {
        margin-top: 0; /* Первая кнопка/элемент в блоке не должен иметь верхнего отступа */
    }
    
}


/* 2. Адаптация для экранов меньше 500px (Телефоны) */
@media (max-width: 500px) {
    
    .crm-header {
        flex-direction: column; 
        height: auto; 
        padding: 15px 15px;
        align-items: center; 
    }
    
    .logo-container {
        width: 100%; 
        text-align: center; 
        margin-bottom: 10px;
    }

    /* Адаптация кнопок в карточке заявки */
    .request-actions,
    .comment-actions,
    .modal-actions {
        flex-direction: column; 
        gap: 8px;
    }
    
    .btn-secondary,
    .btn-submit,
    .modal-actions button {
        width: 100%; 
    }
    
    /* Адаптация переключателя провайдера (вертикальный вид) */
    .provider-toggle {
        flex-direction: column;
        border: none; 
        border-radius: 0;
    }

    .provider-toggle label {
        border: 1px solid var(--border-color); 
        margin-bottom: 8px; 
        border-radius: 8px;
        border-right: 1px solid var(--border-color);
    }

    .provider-toggle input[type="radio"]:checked + label {
        border: 1px solid var(--brand-blue); 
    }
}