/*
 * Единый визуальный слой CRM «Гирудосистема» — стиль Битрикс24.
 * Голубой акцент, нежно-голубая подложка, панели в тон.
 * Подключается через UNFOLD["STYLES"]. Заменяет unfold-accent.css.
 *
 * Чисто белого фона в интерфейсе нет намеренно: с ним тяжело сидеть весь
 * рабочий день. Подложка, панель и поле ввода — три ступени одного голубого
 * подтона; разделяют их рамка и тень, а не контраст «белое на сером».
 */

/* ===== ТОКЕНЫ ===== */
:root {
    --crm-accent: #2fc6f6;
    --crm-accent-hover: #18a0d4;
    --crm-primary: #2067b0;
    --crm-primary-light: #d3e9f8;
    --crm-success: #9dcf00;
    --crm-success-hover: #8ab800;
    --crm-danger: #ff5752;
    --crm-warn: #ffa900;
    --crm-bg: #c8dbec;
    --crm-surface: #e9f1f9;
    --crm-border: #bed2e4;
    --crm-border-light: #d3e1ee;
    --crm-text: #333b44;
    /* Подписи и мелкий текст: прежний #8b949e давал на панели контраст
       3,0:1 — под конец дня такое не читается. #616b78 даёт 4,74:1
       на углублённой панели. Меняешь --crm-surface — пересчитай и это. */
    --crm-text-muted: #616b78;
    --crm-text-heading: #1e2937;
    --crm-radius: 8px;
    --crm-radius-lg: 12px;
    --crm-field-bg: #d6e6f3;
    /* Подложка под колонками канбана — темнее страницы, чтобы светло-голубые
       карточки на ней выделялись (замечание владельца 2026-09-29: карточка
       цвета панели сливалась со светлой страницей). Отношение яркостей к
       карточке 1,6; заголовок #1e2937 на ней — 7,9:1. */
    --crm-desk: #2e3593;
    /* Фон доски как на снимке Битрикса владельца (2026-09-29): глубокий
       фиолетово-синий. Сплошной --crm-desk — для бегунков у краёв и запаса. */
    --crm-desk-image: linear-gradient(120deg, #2b2878 0%, #3a36a8 45%, #2754b4 100%);
    --crm-shadow: 0 1px 3px rgba(21,40,60,.10);
    --crm-shadow-hover: 0 4px 14px rgba(21,40,60,.14);
}

.dark {
    --crm-accent: #47d4ff;
    --crm-accent-hover: #2fc6f6;
    --crm-primary: #5bb8e8;
    --crm-primary-light: #1a2e3e;
    --crm-bg: #18202b;
    --crm-surface: #232c38;
    --crm-border: #35414f;
    --crm-border-light: #2c3543;
    --crm-text: #d6dbe2;
    --crm-text-muted: #8b949e;
    --crm-text-heading: #f0f3f6;
    --crm-field-bg: #1b2432;
    --crm-desk: #121922;
}

/* ===== ПАНЕЛИ UNFOLD =====
 * Свои панели (шапка, сайдбар, таблицы, дашборд, выпадающие списки, вкладки)
 * Unfold красит классом `bg-white`, а тот раскрывается в
 * `background-color: var(--color-white)`. Поэтому весь белый интерфейса
 * гасится здесь — одним значением, без правки чужих шаблонов и без !important
 * (наш файл вне @layer, а объявление Unfold внутри `@layer theme`).
 *
 * Только светлая тема: в тёмной те же элементы перекрывает вариант
 * `dark:bg-base-900`, а прозрачные подложки вроде `dark:bg-white/[.02]`
 * считаются от белого — сдвинув его, мы бы осветлили тёмную тему. */
html:not(.dark) {
    --color-white: #e9f1f9;
}

/* Обратная сторона того же трюка: из `--color-white` растёт не только
   `bg-white`, но и `text-white` — 26 мест, где белым набран текст поверх
   цветной кнопки или плашки. Подтон там ни к чему: возвращаем чистый белый
   отдельным правилом (специфичность выше, чем у одиночного класса). */
html:not(.dark) .text-white {
    color: #fff;
}
html:not(.dark) .border-white {
    border-color: #fff;
}

/* ===== ОБЩИЙ ФОН КОНТЕНТА (только основная область, не шапка/сайдбар) ===== */
#content > .flex,
#content > div:not([class]) {
    background-color: var(--crm-bg);
}

/* Панели внутри #content — только явные border-блоки дашборда/отчётов */
#content .border.border-base-200 {
    border-color: var(--crm-border);
    border-radius: var(--crm-radius-lg);
    box-shadow: var(--crm-shadow);
}

/* HTML <dialog> — скрывать когда не открыт явно через showModal() */
dialog:not([open]) {
    display: none;
}
dialog::backdrop {
    background: rgba(0, 0, 0, .4);
}
dialog {
    border: none;
    border-radius: var(--crm-radius-lg, 12px);
    padding: 24px;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
}
dialog select,
dialog button {
    margin-top: 8px;
}
dialog menu {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding: 0;
}
dialog button {
    padding: 7px 14px;
    border-radius: var(--crm-radius, 8px);
    border: 1px solid var(--crm-border, #bed2e4);
    background: var(--crm-surface, #e9f1f9);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}
dialog button[value="confirm"] {
    background: var(--crm-primary, #2067b0);
    border-color: var(--crm-primary, #2067b0);
    color: #fff;
}

/* ===== КНОПКА «СОХРАНИТЬ» — голубая в стиле Б24 ===== */
button[name="_save"],
#submit-row button[name="_save"] {
    background-color: var(--crm-accent) !important;
    border-color: var(--crm-accent) !important;
    color: #fff !important;
    font-weight: 600;
}
button[name="_save"]:hover {
    background-color: var(--crm-accent-hover) !important;
    border-color: var(--crm-accent-hover) !important;
}

/* ===== ССЫЛКИ И ТЕКСТ ===== */
a.text-primary-600,
a.text-primary-500 {
    color: var(--crm-primary) !important;
}
a.text-primary-600:hover,
a.text-primary-500:hover {
    color: var(--crm-accent-hover) !important;
}

/* ===== СТАНДАРТНЫЕ ФОРМЫ АДМИНКИ — под вид карточек =====
 * Карточки есть у лида, клиента, сделки, товара и задачи. Остальные разделы
 * (склад, платежи, документы, Василиса, администрирование) остаются на обычной
 * форме Unfold — им кастомная карточка не нужна. Чтобы они не выглядели «другой
 * программой», подтягиваем к карточкам общее: панель со скруглением и тенью,
 * подзаголовок блока с голубой засечкой, утопленные поля и голубой фокус.
 * Раскладку Unfold не трогаем. */

#content-main fieldset.module .form-rows {
    background: var(--crm-surface);
    border-color: var(--crm-border);
    border-radius: var(--crm-radius-lg);
    box-shadow: var(--crm-shadow);
}

/* Заголовок блока полей («Связи», «Метаданные») — как .card-block__label. */
#content-main fieldset.module > h2 {
    background: transparent;
    margin: 0 0 6px 3px;
    padding-left: 0;
    font-size: 12px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--crm-text-heading);
}
#content-main fieldset.module > h2::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 11px;
    margin-right: 7px;
    border-radius: 2px;
    background: var(--crm-accent);
}

/* Поля ввода: утопленная заливка и голубой фокус — как в правке карточки. */
#content-main .field-line input:not([type=checkbox]):not([type=radio]):not([type=file]),
#content-main .field-line select,
#content-main .field-line textarea {
    background-color: var(--crm-field-bg);
    border-color: var(--crm-border);
    border-radius: var(--crm-radius);
}
#content-main .field-line input:not([type=checkbox]):not([type=radio]):not([type=file]):focus,
#content-main .field-line select:focus,
#content-main .field-line textarea:focus {
    background-color: var(--crm-surface);
    border-color: var(--crm-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(47, 198, 246, .15);
}

/* Фото сотрудника вместо буквенного кружка (templates/crm/_avatar.html).
   Размер и скругление задаёт класс места — доска, поиск, плашка карточки;
   здесь только то, что общее для картинки: не растягиваться и не показывать
   цветную подложку из-под прозрачных краёв. */
.crm-ava-photo {
    object-fit: cover;
    /* Кадр берём выше середины: людей снимают стоя, и по центру снимка
       оказывается грудь, а не лицо. Уменьшенной копии (crm/core/avatars.py)
       это уже не нужно — она квадратная, — а вот оригиналу, который
       показывается при её отсутствии, нужно. */
    object-position: 50% 30%;
    background: none;
    padding: 0;
}

/* Значок непрочитанных сообщений в шапке.
 *
 * Стиль лежит здесь, а не в chat.css: шапка стоит на каждой странице админки,
 * а chat.css подключён только на страницах раздела «Общение». Скрипт значка
 * (chat/badge.js) прячет ссылку, пока непрочитанного нет, — поэтому в шапке
 * она появляется молча и так же молча уходит.
 */
.chat-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-left: 12px;
  flex: 0 0 auto;
  border-radius: var(--crm-radius);
  color: var(--crm-text-muted);
  background: var(--crm-field-bg);
  transition: color .15s, background .15s;
}

.chat-badge:hover {
  color: var(--crm-primary);
  background: var(--crm-primary-light);
}

/* Цифра сидит на углу конверта, а не рядом: в шапке места нет, а «сколько
 * именно» читается вторым взглядом — первым важен сам факт. */
.chat-badge__count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--crm-danger);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 17px;
  text-align: center;
}

/* Местное время клиента в неурочный час: звонок разбудит человека. Красный
   тот же, что у плашки «Просрочено» на доске, — смысловой сигнал один. */
.crm-localtime--odd { color: #b02a26; font-weight: 600; }