/* ═══════════════════════════════════════════════════════════════════
   COMPONENTS.CSS — переиспользуемые UI-компоненты

   Компонент = самостоятельный кусок интерфейса со своими стилями.
   Один и тот же компонент используется в разных местах страницы.
   Например .btn применяется к десяткам кнопок по всему сайту.

   Порядок: от простых к сложным.
   ═══════════════════════════════════════════════════════════════════ */


/* ── КНОПКИ ──────────────────────────────────────────────────────
   Система кнопок построена через модификаторы:
   базовый класс .btn + один из .btn-primary, .btn-danger и т.д.

   display: inline-flex — кнопка ведёт себя как строчный элемент,
   но внутри — flexbox (чтобы иконка и текст выровнялись).

   transition: all .12s — плавное изменение при ховере.
   .12s = 120мс — достаточно быстро чтобы не раздражать.

   white-space: nowrap — текст кнопки не переносится на новую строку.
── */
button { font-family: var(--font); cursor: pointer; outline: none; }

/* Базовая кнопка — нейтральная, без заливки */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  transition: all .12s;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--text2);
  white-space: nowrap;
}
.btn:hover { background: var(--bg3); color: var(--text); }
.btn i     { font-size: 15px; } /* иконки чуть крупнее текста */

/* Модификаторы размера */
.btn-icon { padding: 7px; }                      /* только иконка, квадратная */
.btn-sm   { padding: 5px 10px; font-size: 12px;} /* маленькая */
.btn-full { width: 100%; justify-content: center; padding: 11px; font-size: 13px; font-weight: 600; }

/* Модификаторы цвета */
.btn-primary { background: var(--accent);    color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent2); border-color: var(--accent2); }

.btn-danger  { background: var(--danger-bg); color: var(--danger); border-color: transparent; }
.btn-danger:hover  { background: var(--danger); color: #fff; }

.btn-ghost   { border-color: transparent; } /* невидимая граница */
.btn-ghost:hover   { background: var(--bg3); border-color: var(--border); }


/* ── ФИЛЬТР-ЧИПЫ ─────────────────────────────────────────────────
   Маленькие кнопки-переключатели для фильтрации.
   border-radius: 20px — скруглённые как «таблетки».
   Используются: фильтры записей, категории FAQ, вкладки логов.

   .chip.active — активный чип (текущий выбранный фильтр).
   Класс добавляется/убирается через JavaScript.
── */
.chip {
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  transition: all .12s;
}
.chip:hover,
.chip.active {
  background: var(--accent-bg);
  color: var(--accent);
  border-color: var(--accent);
}


/* ── ПОЛЯ ВВОДА ──────────────────────────────────────────────────
   Единый стиль для input, select, textarea.
   outline: none — убираем стандартный синий ободок браузера,
   заменяем на border-color при фокусе (красивее).

   ::placeholder — стиль текста-подсказки внутри пустого поля.
── */
input, select, textarea {
  font-family: var(--font);
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
  outline: none;
  transition: border-color .12s;
  width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
input::placeholder { color: var(--text3); }
input.error        { border-color: var(--danger); } /* красная граница при ошибке */
select option      { background: var(--bg3); } /* фон вариантов в выпадающем списке */
textarea           { resize: vertical; line-height: 1.5; } /* только вертикальное изменение размера */

/* Группа поля: label + input + подсказка */
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label { font-size: 12px; font-weight: 500; color: var(--text2); }
.form-hint  { font-size: 11px; color: var(--text3); }


/* ── ПЕРЕКЛЮЧАТЕЛЬ (Toggle) ──────────────────────────────────────
   Кастомный checkbox в виде переключателя.
   Реализован без <input type="checkbox"> — через div с псевдоэлементом ::after.

   Как работает:
   .toggle        → зелёный фон = включено
   .toggle.off    → серый фон = выключено
   .toggle::after → белый кружок (ползунок)

   При .off кружок сдвигается влево через right/left:
     right: 3px → прижат к правому краю (включено)
     left: 3px  → прижат к левому краю (выключено)

   transition на ::after — кружок скользит плавно.
   Клик обрабатывается через onclick="this.classList.toggle('off')" в HTML.
── */
.toggle {
  width: 38px;
  height: 22px;
  border-radius: 22px;
  background: var(--accent);  /* зелёный = включено */
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s;
}
.toggle.off { background: var(--bg4); } /* серый = выключено */

.toggle::after {
  content: '';
  position: absolute;
  top: 3px; right: 3px;       /* включено: кружок справа */
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: all .15s;
}
.toggle.off::after { right: auto; left: 3px; } /* выключено: кружок слева */

/* Строка с переключателем: текст слева, toggle справа */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text2);
}
.toggle-row:last-child { border-bottom: none; padding-bottom: 0; }
.toggle-label { display: flex; flex-direction: column; gap: 3px; }
.toggle-desc  { font-size: 11px; color: var(--text3); }


/* ── КАРТОЧКИ ────────────────────────────────────────────────────
   Базовый контейнер с рамкой и скруглёнными углами.
   overflow: hidden — дочерние элементы не выходят за скруглённые углы.
   margin-bottom: 16px — стандартный отступ снизу.

   .card-header — полоса заголовка с разделителем снизу.
   .card-body   — контент с padding со всех сторон.
   .card-hover  — карточка подсвечивается при наведении (для кликабельных).
── */
.card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 16px;
}
.card-header {
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-title  { font-size: 13px; font-weight: 600; color: var(--text); }
.card-body   { padding: 16px 18px; }
.card-hover  { transition: border-color .12s; }
.card-hover:hover { border-color: var(--border2); }


/* ── ТАБЛИЦЫ ─────────────────────────────────────────────────────
   border-collapse: collapse — убирает двойные границы между ячейками.
   .table-wrap с overflow-x: auto — горизонтальный скролл на мобильных.

   Строки таблицы подсвечиваются при наведении (.td-primary, .td-muted
   и т.д. — утилиты для стилизации отдельных ячеек).
── */
.table-wrap { overflow-x: auto; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
th {
  padding: 10px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--text3);
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}
td {
  padding: 12px 16px;
  color: var(--text2);
  border-bottom: 1px solid var(--border);
  vertical-align: middle; /* содержимое ячейки по центру по вертикали */
}
tr:last-child td { border-bottom: none; } /* у последней строки нет нижней границы */
tbody tr { transition: background .1s; }
tbody tr:hover td { background: var(--bg3); }

/* Утилиты для ячеек таблицы */
.td-primary { color: var(--text); font-weight: 500; }  /* имя клиента */
.td-muted   { color: var(--text3); font-size: 12px; }  /* номер записи */
.td-tg      { color: var(--accent); font-size: 12px; } /* Telegram @username */


/* ── БЕЙДЖИ СТАТУСОВ ─────────────────────────────────────────────
   Маленькие цветные плашки для статусов записей.
   Используются в таблицах и логах.

   .badge-status — базовый класс
   .s-confirmed / .s-pending / .s-cancelled / .s-done — цвет статуса

   .badge-dot — точка-индикатор цвета текста (currentColor).
   Nav-badge — счётчик в боковом меню (зелёный кружок с цифрой).
── */
.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.badge-dot    { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.s-confirmed  { background: var(--accent-bg2); color: var(--accent); }
.s-pending    { background: var(--warn-bg);    color: var(--warn);   }
.s-cancelled  { background: var(--danger-bg);  color: var(--danger); }
.s-done       { background: var(--bg4);        color: var(--text3);  }
.s-info       { background: var(--info-bg);    color: var(--info);   }
.s-purple     { background: var(--purple-bg);  color: var(--purple); }

/* Счётчик в боковом меню */
.nav-badge {
  margin-left: auto; /* прижимает к правому краю nav-item */
  background: var(--accent-bg2);
  color: var(--accent);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
  min-width: 20px;
  text-align: center;
}


/* ── МОДАЛЬНЫЕ ОКНА ──────────────────────────────────────────────
   Модал = всплывающее окно поверх контента.
   Состоит из двух слоёв:
   1. .modal-overlay — полупрозрачный тёмный фон (весь экран)
   2. .modal        — белая карточка по центру

   display: none → display: flex при добавлении класса .open.
   Переключение делается в app.js через classList.add/remove('open').

   position: fixed + inset: 0 — фон занимает весь экран
   и не прокручивается вместе со страницей.

   max-height + overflow-y: auto — длинный модал не выходит за экран,
   внутри появляется прокрутка.
── */
.modal-overlay {
  position: fixed;
  inset: 0; /* top:0; right:0; bottom:0; left:0 — сокращение */
  background: rgba(0, 0, 0, .65);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 500; /* поверх всего контента */
}
.modal-overlay.open { display: flex; } /* JS добавляет этот класс */

.modal {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-xl);
  padding: 24px;
  width: 480px;
  max-width: 95vw;     /* на мобильных не выходит за экран */
  max-height: 90vh;    /* не выше 90% высоты окна */
  overflow-y: auto;    /* внутренняя прокрутка */
}
.modal-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-close {
  background: none; border: none;
  color: var(--text3); font-size: 18px; cursor: pointer;
  transition: color .12s;
}
.modal-close:hover { color: var(--text); }
.modal-footer { display: flex; gap: 8px; margin-top: 20px; justify-content: flex-end; }


/* ── УВЕДОМЛЕНИЕ (Toast) ─────────────────────────────────────────
   Всплывающее сообщение в правом нижнем углу.
   Появляется через transform + opacity, а не display —
   это позволяет анимировать появление через CSS transition.

   Без .show: translateY(80px) + opacity:0 → элемент невидим и сдвинут вниз.
   С .show:   translateY(0) + opacity:1    → виден на своём месте.
   Переход происходит за .3s — плавно выезжает снизу.

   pointer-events: none — не перехватывает клики когда скрыт.
── */
.notif {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 900;
  background: var(--bg2);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 13px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  transform: translateY(80px); /* начальное положение — ниже экрана */
  opacity: 0;
  transition: all .3s;
  pointer-events: none;
}
.notif.show  { transform: translateY(0); opacity: 1; } /* JS добавляет */
.notif.error { border-color: var(--danger); }          /* красная рамка при ошибке */
.notif-icon  { color: var(--accent); font-size: 16px; }
.notif.error .notif-icon { color: var(--danger); }


/* ── ПОИСК ───────────────────────────────────────────────────────
   Строка поиска с иконкой внутри.
   Иконка — не часть input, а отдельный элемент в flex-контейнере.
   input без border и background — сливается с контейнером .searchbar.
── */
.searchbar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 7px 12px;
  margin-bottom: 16px;
}
.searchbar i     { color: var(--text3); font-size: 15px; flex-shrink: 0; }
.searchbar input {
  background: none; border: none; outline: none;
  font-size: 13px; color: var(--text); flex: 1;
}


/* ── АВАТАРЫ ─────────────────────────────────────────────────────
   Круглые иконки с инициалами для карточек клиентов.
   Цветовые варианты (.av-green, .av-blue и т.д.) — соответствуют
   цветам из палитры переменных.
── */
.avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
  flex-shrink: 0;
}
.av-green  { background: var(--accent-bg2); color: var(--accent); }
.av-blue   { background: var(--info-bg);    color: var(--info);   }
.av-yellow { background: var(--warn-bg);    color: var(--warn);   }
.av-red    { background: var(--danger-bg);  color: var(--danger); }
.av-purple { background: var(--purple-bg);  color: var(--purple); }


/* ── ЦВЕТОВОЙ ПИКЕР ──────────────────────────────────────────────
   Ряд цветных кружков для выбора цвета метки услуги.
   .color-dot.selected — выбранный: белая обводка + увеличение.
   transform: scale(1.15) — эффект «поднятия» при выборе.
── */
.color-picker { display: flex; gap: 8px; flex-wrap: wrap; padding: 4px 0; }
.color-dot {
  width: 20px; height: 20px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all .15s;
  flex-shrink: 0;
}
.color-dot.selected {
  border-color: #fff;
  transform: scale(1.15);
}


/* ── СЕКЦИЯ НАСТРОЕК ─────────────────────────────────────────────
   Контейнер для группы настроек на странице Настроек.
   Каждая секция = отдельная карточка с заголовком.
   .settings-title — заголовок секции с иконкой.
── */
.settings-section {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin-bottom: 14px;
}
.settings-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.settings-title i { color: var(--text3); font-size: 16px; }