@import url('../vars.css');

/* ============================================================================
   CRM TOOLS — блок быстрого доступа к контрагенту (.contragent_crm_tools)
   ----------------------------------------------------------------------------
   Разметка (js/Ts/ts_workplace.js -> ToolPanel.Controls.CRMPanel):
     <div class="contragent_crm_tools">
       <div class="button icon sip_call_icon">        📞  вызов IP-телефонии
       <div class="button icon comments_open_icon">   📆  комментарии/задачи
       <div class="button icon nto_icon">             🛒  покупки (картинка cart.png)
       <div class="button icon workeruseds_icon">     🏋  сеансы и чеки
     </div>
   используется в: ячейке таблицы (data-contragent_crm_tools), анкете, ордере,
   карточке воронки. Размеры/цвета/позиционирование по контекстам — site.css,
   здесь — общие правила и эмодзи-иконки.

   ЭМОДЗИ НЕ МЕНЯЕМ: пользователи привыкли к 📞 📆 🛒 🏋 — их остаётся видеть
   на кнопке одного и того же места. Меняется только подача: плотная «панель
   инструментов» вместо отдельных кружков с большими отступами.
   ========================================================================== */

.contragent_crm_tools {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    vertical-align: middle;
    user-select: none;
    line-height: 1;
}

/* Кнопка-иконка: квадрат по центру, без «пузыря» (перебиваем базовый .button и ширину
   кнопок из анкеты .form_contragent .panel1 .button_container .button = 130px).
   Обводка тонкая, в ОБЕИХ темах — от токена --line (в тёмной теме светлее фона,
   в светлой — темнее), поэтому видна и там, и там. */
.contragent_crm_tools .button.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 6px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
    color: var(--fore-color);
    font-size: 14px;
    line-height: 1;
    text-align: center;
    position: relative;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.contragent_crm_tools .button.icon:hover {
    background-color: var(--surface-hover);
    border-color: var(--line-strong);
    box-shadow: none;
}

/* Сам эмодзи — псевдоэлемент, по центру кнопки (абсолют + translate = без ручных left/top) */
.contragent_crm_tools .icon::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    line-height: 1;
}

/*------------------------------------------------------ эмодзи-иконки */

/* комментарии и задачи */
.contragent_crm_tools .comments_open_icon::before {
    content: "📆";
}

/* IP телефония */
.contragent_crm_tools .sip_call_icon::before {
    content: "📞";
    color: var(--fore-color);
}

.contragent_crm_tools .sip_call_icon.called::before {
    content: "📞";
    color: var(--color-green);
}

/* совместимость: класс "called" раньше ставился на родителя ячейки */
.called .contragent_crm_tools .sip_call_icon::before {
    color: var(--color-green);
}

/* диаграммы (сейчас не выводится, оставлено для совместимости) */
.contragent_crm_tools .diagram_icon::before {
    content: "📈";
}

/* оплаты (сейчас не выводится) */
.contragent_crm_tools .pays_icon::before {
    content: "💰";
}

/* сеансы и чеки */
.contragent_crm_tools .workeruseds_icon::before {
    content: "🏋";
    font-size: 14px;
}

/*------------------------------------------------------ ячейка таблицы */

/* Базовые размеры кнопок в таблице задаёт site.css (.table_container td > .contragent_crm_tools);
   здесь — только плотность эмодзи, чтобы колонка не «распухала» */
.table_container td .contragent_crm_tools .sip_call_icon::before,
.datagrid_table td .contragent_crm_tools .sip_call_icon::before {
    font-size: 15px;
}

.table_container td .contragent_crm_tools .workeruseds_icon::before,
.datagrid_table td .contragent_crm_tools .workeruseds_icon::before {
    font-size: 14px;
}

/* Воронки: кнопка-«чип» с ОБВОДКОЙ из темы (--line). Раньше рамку в тёмной теме
   не было видно: кнопки шли без border и сливались с карточкой. */
.form_crm_funnels .contragent_crm_tools .icon {
    border-radius: 6px;
    border: 1px solid var(--line);
    background-color: var(--surface-hover);
}

    .form_crm_funnels .contragent_crm_tools .icon:hover {
        border-color: var(--theme-color-1);
        background-color: var(--accent-soft);
    }

/*------------------------------------------------------ адаптив */

@media (max-width: 560px) {
    .contragent_crm_tools .icon {
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .contragent_crm_tools .icon {
        transition: none !important;
    }
}