/* ===================================================================
   System Networks — тема Zammad 6.4.2  (admin.system-networks.ru)
   -------------------------------------------------------------------
   Это не подмена пары акцентов, а полная тема: Zammad 6.4 держит
   оформление в CSS-переменных (101 в :root, 68 в [data-theme='dark']),
   и мы переопределяем их по РОЛЯМ — поверхности, текст, рамки, акцент,
   состояния. Поэтому интерфейс перекрашивается целиком и согласованно,
   а не точечно.

   ПОЧЕМУ ПРЕДЫДУЩАЯ ВЕРСИЯ ВЫГЛЯДЕЛА ПЛОХО: в ней менялись только
   акцентные переменные, а --highlight в Zammad используется и для
   иллюстраций, и для фонов, и для подложки обучающего тура
   (--backdrop-clue-*). Из-за этого дашборд заливало зелёным.

   ПАЛИТРА — та же, что в пульте Remote Help: нейтральный графит,
   синего нет, акцент один (#6BA300). Исключение сделано сознательно
   для цветов СОСТОЯНИЙ заявок и SLA: они несут смысл, поэтому
   остаются различимыми по тону, но приведены в нашу гамму.

   ПОДКЛЮЧЕНИЕ: sub_filter во фронтовом nginx (см. §9ж документации).
   Штатного хука под свой CSS в Docker-сборке Zammad нет: каталог
   app/assets/stylesheets/custom/ существует, но в рантайм-образе нет
   JS-рантайма, и assets:precompile там невозможен — проверено.

   Создано 2026-10-16, переписано полностью 2026-10-17.
   =================================================================== */

/* ---------- палитра ---------- */
:root {
    /* графит, нейтральный: синий канал не выше красного */
    --sn-0:  #080808;   --sn-1:  #0d0d0d;   --sn-2:  #121212;
    --sn-3:  #171717;   --sn-4:  #1c1c1c;   --sn-5:  #232323;
    --sn-6:  #2b2b2b;   --sn-7:  #343434;

    --sn-text:      #e8edf2;
    --sn-text-dim:  #a2a2a2;
    --sn-text-mute: #8a8a8a;

    --sn-accent:     #6BA300;
    --sn-accent-hi:  #85c600;
    --sn-accent-lo:  #4f7a00;
    --sn-on-accent:  #0a1000;

    /* светлая шкала — нейтральная, без синевы */
    --snl-0: #ffffff;  --snl-1: #f7f7f7;  --snl-2: #f0f0f0;
    --snl-3: #e7e7e7;  --snl-4: #dcdcdc;  --snl-5: #c9c9c9;
    --snl-text:      #232323;
    --snl-text-dim:  #5f5f5f;
    --snl-text-mute: #7d7d7d;
}

/* ===================================================================
   ТЁМНАЯ ТЕМА — основная и ЕДИНСТВЕННАЯ активная.
   -------------------------------------------------------------------
   Почему применяется ко всем значениям data-theme, а не только к 'dark':
   Zammad 6.4.2 решает тему сам (серверная настройка «тема по умолчанию»
   отсутствует, localStorage он для этого не читает — проверено), и для
   неавторизованных и для большинства агентов это 'light'. Нецентрализованно
   переключить всех можно было бы только правкой предпочтений пользователей,
   а их трогать нельзя. Поэтому тёмная задаётся принудительно — хелпдеск и
   пульт Remote Help должны выглядеть одинаково.

   ⚠ РАЗВИЛКА ДЛЯ ВЛАДЕЛЬЦА: если решим вернуть переключатель тем, достаточно
   убрать из списка селекторов ниже ':root' и ':root[data-theme=\'light\']' —
   тогда заработает светлый набор, он ниже и уже готов.
   =================================================================== */
:root, :root[data-theme='dark'], :root[data-theme='light'] {
    /* --- поверхности --- */
    --background-quaternary:        var(--sn-0);
    --background-quaternary-alt:    var(--sn-5);
    --background-tertiary:          var(--sn-1);
    --background-primary:           var(--sn-2);
    --background-primary-alt:       var(--sn-3);
    --background-secondary:         var(--sn-3);
    --background-secondary-hover:   var(--sn-4);
    --background-popover:           var(--sn-4);
    /* ВНИМАНИЕ: сплошной акцент здесь не годится — Zammad кладёт на этот
       фон обычный светлый текст (получалось 1.5:1). Берём приглушённую
       заливку, читаемость сохраняется, акцент остаётся заметен. */
    --background-active:            rgba(107, 163, 0, 0.18);
    --background-highlight:         rgba(107, 163, 0, 0.16);

    --background-modifier-hover:        rgba(255, 255, 255, 0.06);
    --background-modifier-accent:       rgba(255, 255, 255, 0.05);
    --background-modifier-accent-light: rgba(255, 255, 255, 0.03);
    --background-modifier-accent-dark:  rgba(0, 0, 0, 0.35);
    --background-modifier-border:       rgba(255, 255, 255, 0.10);
    --background-modifier-lighter:      rgba(255, 255, 255, 0.07);

    /* --- рамки --- */
    --border:            var(--sn-5);
    --border-alt:        var(--sn-6);
    --border-highlight:  var(--sn-accent);
    --shadow-highlight:  rgba(107, 163, 0, 0.30);

    /* --- текст --- */
    --text-normal:        var(--sn-text);
    --text-muted:         var(--sn-text-dim);
    --text-muted-alt:     var(--sn-text-mute);
    --text-link:          var(--sn-accent-hi);
    --text-nav:           var(--sn-text);
    --header-primary:     var(--sn-text);
    --header-secondary:   var(--sn-text-dim);
    --interactive-primary: var(--sn-text);
    --interactive-muted:        var(--sn-text-mute);
    --interactive-muted-alt:    var(--sn-6);
    --interactive-muted-active: var(--sn-6);
    --interactive-muted-alt-selected: var(--sn-text-dim);
    --nav-icon:           var(--sn-text-dim);
    --ghost-color:        var(--sn-text-mute);
    --highlight:          var(--sn-accent);

    /* --- кнопки --- */
    --button-background:         rgba(255, 255, 255, 0.04);
    --button-background-active:  rgba(255, 255, 255, 0.02);
    --button-active:             rgba(255, 255, 255, 0.10);
    --button-active-active:      rgba(255, 255, 255, 0.07);
    --button-action-color:       var(--sn-text-dim);

    /* --- статьи заявки --- */
    --background-article-meta:          var(--sn-2);
    --background-article-customer:      var(--sn-4);
    --background-article-customer-meta: var(--sn-3);
    --border-article-customer:          var(--sn-6);
    --border-article-customer-selected: var(--sn-accent-lo);
    /* штриховка «только для своих» у внутренних заметок: приглушённая, иначе
       рамка читается как золотая деревянная рама (правка 17.10 по скрину) */
    --border-internal:                  #3a3119;
    --border-internal-stripe:           #262114;

    /* --- мелочи --- */
    --tag-background:       var(--sn-5);
    --tag-text:             var(--sn-text);
    --file-icon-background: var(--sn-5);
    --file-icon-color:      var(--sn-text-dim);

    /* тени — нейтрально-чёрные, без синевы */
    --elevation-low:     0 1px 5px rgba(0, 0, 0, 0.45);
    --elevation-high:    0 1px 14px rgba(0, 0, 0, 0.55);
    --elevation-stroke:  0 1px rgba(255, 255, 255, 0.06);

    /* подложка обучающего тура: штатно синяя на 90% — из-за неё
       дашборд заливало цветом. Делаем нейтральное затемнение. */
    --backdrop-clue-start: rgba(8, 8, 8, 0.10);
    --backdrop-clue-end:   rgba(8, 8, 8, 0.88);
}

/* ===================================================================
   СВЕТЛАЯ ТЕМА — ГОТОВА, НО СЕЙЧАС НЕ АКТИВНА.
   Тот же бренд на нейтральных светлых поверхностях (не штатный синий
   Zammad). Чтобы включить: см. развилку выше — убрать ':root' и
   ':root[data-theme=\'light\']' из тёмного блока, и заменить селектор
   ниже на ':root[data-theme=\'light\']'.
   =================================================================== */
.sn-light-theme-disabled {
    --background-quaternary:        var(--sn-0);
    --background-quaternary-alt:    var(--snl-3);
    --background-tertiary:          var(--sn-1);
    --background-primary:           var(--snl-1);
    --background-primary-alt:       var(--snl-2);
    --background-secondary:         var(--snl-0);
    --background-secondary-hover:   var(--snl-2);
    --background-popover:           var(--snl-0);
    --background-active:            var(--sn-accent);
    --background-highlight:         rgba(107, 163, 0, 0.14);

    --background-modifier-hover:        rgba(0, 0, 0, 0.06);
    --background-modifier-accent:       rgba(0, 0, 0, 0.04);
    --background-modifier-accent-light: rgba(0, 0, 0, 0.02);
    --background-modifier-accent-dark:  rgba(0, 0, 0, 0.30);
    --background-modifier-border:       rgba(0, 0, 0, 0.12);
    --background-modifier-lighter:      rgba(255, 255, 255, 0.06);

    --border:            var(--snl-3);
    --border-alt:        var(--snl-4);
    --border-highlight:  var(--sn-accent);
    --shadow-highlight:  rgba(107, 163, 0, 0.22);

    --text-normal:        var(--snl-text);
    --text-muted:         var(--snl-text-dim);
    --text-muted-alt:     var(--snl-text-mute);
    --text-link:          var(--sn-accent-lo);
    --text-nav:           var(--sn-accent-lo);
    --text-muted-highlight: var(--sn-accent-lo);
    --header-primary:     var(--snl-text);
    --header-secondary:   var(--snl-text-mute);
    --interactive-primary: var(--snl-text);
    --interactive-muted:        var(--snl-text-mute);
    --interactive-muted-alt:    var(--snl-4);
    --interactive-muted-active: var(--snl-4);
    --interactive-muted-alt-selected: var(--snl-text-dim);
    --nav-icon:           var(--snl-text-mute);
    --ghost-color:        var(--snl-5);
    --highlight:          var(--sn-accent);

    --button-background:         var(--snl-0);
    --button-background-active:  var(--snl-1);
    --button-active:             var(--snl-3);
    --button-active-active:      rgba(0, 0, 0, 0.45);
    --button-action-color:       var(--snl-text-mute);

    --background-article-meta:          var(--snl-1);
    --background-article-customer:      var(--snl-2);
    --background-article-customer-meta: var(--snl-1);
    --border-article-customer:          var(--snl-4);
    --border-article-customer-selected: var(--sn-accent-lo);
    --border-internal:                  #f0d9bf;
    --border-internal-stripe:           #fbeee0;

    --tag-background:       var(--snl-3);
    --tag-text:             var(--snl-text-dim);
    --file-icon-background: var(--snl-0);
    --file-icon-color:      var(--snl-4);

    --elevation-low:     0 1px 5px rgba(0, 0, 0, 0.10);
    --elevation-high:    0 1px 14px rgba(0, 0, 0, 0.14);
    --elevation-stroke:  0 1px var(--snl-3);

    --backdrop-clue-start: rgba(8, 8, 8, 0.08);
    --backdrop-clue-end:   rgba(8, 8, 8, 0.80);
}

/* ===================================================================
   АКЦЕНТ И СОСТОЯНИЯ — общее для обеих тем
   =================================================================== */
:root, :root[data-theme='dark'], :root[data-theme='light'] {
    /* главная кнопка */
    --button-primary-background:        var(--sn-accent);
    --button-primary-background-active: var(--sn-accent-lo);
    --button-primary-text:              var(--sn-on-accent);
    --text-button-primary:              var(--sn-accent-lo);
    --text-button-primary-active:       var(--sn-accent-lo);
    --text-button-secondary:            var(--sn-text-dim);

    /* Состояния заявок и SLA. Смысл сохраняем: они обязаны отличаться
       друг от друга, поэтому красим не «всё зелёным», а раскладываем
       по тону внутри нашей тёплой гаммы. Синего тут нет.
         ok        — открыта / в работе      -> янтарный
         good      — скоро закроется         -> жёлто-зелёный
         supergood — закрыта, всё хорошо     -> наш зелёный
         bad       — близко к эскалации      -> оранжевый
         superbad  — эскалация               -> кирпичный
         danger    — удаление/ошибка         -> красный
         pending   — ожидание                -> серый                */
    --ok-color:        #d9a400;
    --good-color:      #9ab52e;
    --supergood-color: #6BA300;
    --bad-color:       #d9762a;
    --superbad-color:  #cf5a45;
    --danger-color:    #d04a38;
    --pending-color:   #8a8a8a;
}

/* ===================================================================
   ЛЕВОЕ МЕНЮ
   --menu-* определены только в :root, поэтому действуют в обеих темах.
   Панель навигации в Zammad тёмная всегда — делаем её нашим графитом.
   =================================================================== */
:root, :root[data-theme='dark'], :root[data-theme='light'] {
    --menu-background-primary:        var(--sn-1);
    --menu-background-primary-hover:  rgba(255, 255, 255, 0.06);
    --menu-background-secondary:      var(--sn-0);
    --menu-background-active:         rgba(107, 163, 0, 0.18);
    --menu-border:                    none;
    --menu-border-secondary:          none;
    --menu-text:                      var(--sn-text-dim);
    --menu-text-active:               var(--sn-accent-hi);
    --menu-text-open:                 var(--sn-text);
    --menu-text-closed:               var(--sn-text);
    --menu-text-escalating:           #ffffff;
    --menu-icon:                      var(--sn-text-dim);
    --menu-icon-secondary:            var(--sn-text-dim);
    --menu-icon-secondary-hover-background: rgba(255, 255, 255, 0.10);
    --menu-switch-background:         var(--sn-0);
    --menu-switch-pointer:            var(--sn-5);
    --menu-switch-pointer-active:     var(--sn-accent);
    --menu-close-tab-background:      var(--sn-1);
    --menu-close-tab-opacity:         0.45;
    --text-active:                    var(--sn-text);
    --text-inverted:                  #ffffff;
    --fullscreen-background:          var(--sn-1);
    --fullscreen-text:                var(--sn-text-dim);
    --fullscreen-text-muted:          var(--sn-text-mute);
    --fullscreen-text-link:           var(--sn-accent-hi);
    --fullscreen-drop-shadow:         0 8px 17px rgba(0, 0, 0, 0.5);
}

/* ===================================================================
   ТИПОГРАФИКА — Inter, как в пульте и на сайте.
   Файлы локальные (/sn-brand/fonts/), внешних CDN нет.
   Штатный Fira Sans остаётся запасным.
   =================================================================== */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/sn-brand/fonts/inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/sn-brand/fonts/inter-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/sn-brand/fonts/inter-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/sn-brand/fonts/inter-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/sn-brand/fonts/inter-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/sn-brand/fonts/inter-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/sn-brand/fonts/inter-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/sn-brand/fonts/inter-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }

body, .content, input, textarea, select, button,
.js-textarea, .richtext-content, .ticket-article-item,
.sidebar, .tabsSidebar, .modal, .popover, .dropdown-menu {
    font-family: 'Inter', 'Fira Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
code, pre, .js-tokens, .token {
    font-family: 'JetBrains Mono', ui-monospace, Consolas, 'Courier New', monospace;
}

/* ===================================================================
   ЗНАК ZAMMAD В ПОДВАЛЕ СТРАНИЦЫ ВХОДА
   -------------------------------------------------------------------
   «Powered by Zammad» с птицей — это #icon-logo и #icon-logotype из
   штатного спрайта icons.svg. Владелец просил убрать дефолтный знак.
   Прячем ЦЕЛИКОМ весь блок, а не подменяем птицу своим логотипом:
   «Powered by <наш логотип> Zammad» было бы бессмыслицей, да и знак
   чужого продукта своим подменять неправильно.

   ⚠ Это вопрос к владельцу (атрибуция / товарный знак), развилка
   записана в документации. Откат — убрать это правило.
   =================================================================== */
.login .footer .poweredby,
.login-footer .poweredby,
a[href*="zammad.com"] .icon-logotype,
.poweredby { display: none !important; }

/* ===================================================================
   ЗНАКИ ПРОДУКТА
   -------------------------------------------------------------------
   Штатный логотип Zammad (птица) рисуется из спрайта icons.svg и
   встречается в трёх местах. Спрайт НЕ правим — он общий на все
   иконки интерфейса; подменяем только в этих точках.
   =================================================================== */

/* 1. Логотип в левой навигации. Это ещё и кнопка уведомлений
      (.js-toggleNotifications), поэтому элемент НЕ прячем — убираем
      только штатную картинку и рисуем наш знак фоном. */
#navigation .logo > svg.icon-logo,
.navigation .logo > svg.icon-logo { visibility: hidden !important; }
#navigation .logo, .navigation .logo {
    background-image: url('/sn-brand/sn-helpdesk-mark.svg') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 26px 26px !important;
}

/* 2. Экран загрузки */
.splash > svg.icon-logo { visibility: hidden !important; }
.splash {
    background-image: url('/sn-brand/sn-helpdesk-mark.svg') !important;
    background-repeat: no-repeat !important;
    background-position: center 38% !important;
    background-size: 64px 64px !important;
}

/* 3. «Powered by Zammad» в подвале страницы входа.
      Прячем блок целиком, а не подменяем птицу своим логотипом:
      «Powered by <наш знак> Zammad» было бы бессмыслицей, и подменять
      знак чужого продукта своим неправильно.
      ⚠ Вопрос атрибуции — развилка для владельца, см. документацию.
      Откат: убрать это правило. */
.poweredBy { display: none !important; }

/* ===================================================================
   СТРАНИЦА ВХОДА
   -------------------------------------------------------------------
   Красим ТОКЕНАМИ, а не жёсткими цветами: тогда страница следует за
   активной темой (тёмной или светлой), а не ломается в одной из них.
   .hero-unit — та самая карточка, которая в стоке белая.
   =================================================================== */
.login.fullscreen, .login .fullscreen-body {
    background-color: var(--background-primary) !important;
}
.login .hero-unit {
    background-color: var(--background-secondary) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    box-shadow: var(--elevation-low) !important;
}
.login form#login, .login .js-form { background-color: transparent !important; }
.login label, .login .form-group label { color: var(--text-muted) !important; }
.login input.form-control, .login input[type=text], .login input[type=password] {
    background-color: var(--background-primary) !important;
    color: var(--text-normal) !important;
    border: 1px solid var(--border-alt) !important;
    border-radius: 5px !important;
}
.login input.form-control:focus {
    border-color: var(--sn-accent) !important;
    box-shadow: 0 0 0 2px rgba(107, 163, 0, 0.18) !important;
}
.login .company-logo, img.company-logo {
    max-width: 240px !important; height: auto !important; border-radius: 6px !important;
}
.login a, .login .text-muted a { color: var(--text-link) !important; }

/* ===================================================================
   КОМПОНЕНТЫ
   =================================================================== */

/* --- активный пункт левого меню ---
   Штатно (и в первой версии темы) он заливался акцентом целиком —
   ярко-зелёная полоса на пол-экрана. Делаем спокойнее: приглушённая
   подложка, зелёный текст и акцентная полоса слева. Заодно снимается
   риск светлого текста на зелёном (было 2.6:1). */
#navigation .menu-item.is-active,
#navigation .menu .is-active,
.navigation .menu-item.is-active {
    background-color: rgba(107, 163, 0, 0.16) !important;
    color: var(--sn-accent-hi) !important;
    box-shadow: inset 3px 0 0 var(--sn-accent) !important;
}
#navigation .menu-item.is-active *,
.navigation .menu-item.is-active * { color: var(--sn-accent-hi) !important; }
#navigation .menu-item.is-active .icon,
.navigation .menu-item.is-active .icon { fill: var(--sn-accent-hi) !important; }
#navigation .menu-item:hover { background-color: rgba(255, 255, 255, 0.06) !important; }

/* --- счётчик уведомлений ---
   штатный #e15151 с белым текстом давал 3.82:1. Берём глубже. */
.activity-counter, .js-notificationsCounter {
    background-color: #b8402c !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* --- бейджи на вкладках (штатно бывает белое по белому) --- */
.tab-badge, .js-counter {
    background-color: var(--sn-5) !important;
    color: var(--sn-text) !important;
}
.tab-badge.is-active, .tasks .is-active .tab-badge {
    background-color: var(--sn-accent) !important; color: var(--sn-on-accent) !important;
}

/* --- обучающий тур («Показатели 1/5») --- */
.clue, .clues, .clue-content, .modal-clue, .js-clue, .clue .box {
    background-color: var(--background-popover) !important;
    color: var(--text-normal) !important;
    border: 1px solid var(--border-alt) !important;
    border-radius: 8px !important;
    box-shadow: var(--elevation-high) !important;
}
.clue h1, .clue h2, .clue h3, .clue strong { color: var(--text-normal) !important; }
.clue .btn, .clue a { color: var(--sn-accent-hi) !important; }

/* --- модальные окна, поповеры, выпадающие списки --- */
.modal-content, .modal-body, .modal-header, .modal-footer,
.popover, .popover-inner, .popover-content, .popover-title,
.dropdown-menu, .js-dropdown, .ui-autocomplete {
    background-color: var(--background-popover) !important;
    color: var(--text-normal) !important;
    border-color: var(--border-alt) !important;
}
.modal-header, .popover-title { border-bottom: 1px solid var(--border) !important; }
.modal-backdrop, .modal.in .modal-backdrop { background-color: rgba(8, 8, 8, 0.72) !important; }
.dropdown-menu > li > a:hover, .ui-menu-item:hover, .js-dropdown li:hover {
    background-color: rgba(107, 163, 0, 0.22) !important;
    color: var(--text-normal) !important;
}
.popover .arrow, .popover .arrow:after { border-top-color: var(--border-alt) !important; }

/* --- формы --- */
input[type=text], input[type=email], input[type=password], input[type=search],
input[type=number], input[type=tel], input[type=url], textarea, select,
.form-control, .js-input, .token-input, .searchfield input {
    background-color: var(--background-primary) !important;
    color: var(--text-normal) !important;
    border-color: var(--border-alt) !important;
}
input::placeholder, textarea::placeholder { color: var(--text-muted-alt) !important; opacity: 1 !important; }
.form-control:focus, input:focus, textarea:focus, select:focus {
    border-color: var(--sn-accent) !important;
    box-shadow: 0 0 0 2px rgba(107, 163, 0, 0.18) !important;
    outline: none !important;
}
input[type=checkbox], input[type=radio] { accent-color: var(--sn-accent) !important; }
:root { color-scheme: dark; }

/* --- кнопки --- */
.btn { border-radius: 5px !important; }
.btn--primary, .btn.btn--primary {
    background-color: var(--sn-accent) !important;
    color: var(--sn-on-accent) !important;
    border-color: var(--sn-accent) !important;
    font-weight: 600 !important;
}
.btn--primary:hover { background-color: var(--sn-accent-hi) !important; }
.btn--secondary, .btn:not(.btn--primary) {
    background-color: var(--button-background) !important;
    color: var(--text-normal) !important;
    border-color: var(--border-alt) !important;
}
.btn:not(.btn--primary):hover { background-color: var(--background-modifier-hover) !important; }
.btn--danger { background-color: #b8402c !important; color: #fff !important; border-color: #b8402c !important; }

/* --- таблицы и списки --- */
.table, table.table, .table > thead > tr > th, .settings-list {
    background-color: transparent !important; color: var(--text-normal) !important;
}
.table > thead > tr > th, .table-column-title, th {
    color: var(--text-muted) !important;
    border-bottom: 1px solid var(--border) !important;
    font-weight: 600 !important;
}
.table > tbody > tr > td, td { border-top: 1px solid var(--border) !important; color: var(--text-normal) !important; }
.table > tbody > tr:hover, tr.item:hover { background-color: var(--background-modifier-hover) !important; }
.table > tbody > tr.is-active, tr.is-active {
    background-color: rgba(107, 163, 0, 0.16) !important;
}

/* --- прокрутка и выделение --- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--sn-0); }
::-webkit-scrollbar-thumb { background: var(--sn-6); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--sn-accent-lo); }
* { scrollbar-color: var(--sn-6) var(--sn-0); scrollbar-width: thin; }
::selection { background: rgba(107, 163, 0, 0.30); color: var(--sn-text); }

/* ссылки — см. 06-residual-blue.css: общий a{} намеренно не красим */

/* Внутренняя заметка: штатная рамка Zammad — полосатая «зебра» в 5 px.
   На тёмном фоне такая толщина даёт эффект рамы, поэтому делаем её тоньше.
   Сам приём оставляем: это общепринятый в Zammad знак «клиент этого не видит». */
.internal-border { padding: 2px !important; margin: -2px !important; border-radius: 7px !important; }

/* Аватары пользователей. Zammad раздаёт каждому свой цвет (подложка-спрайт на
   `.avatar--unique`) — это опознавательный знак, а не оформление, поэтому цвета
   не выравниваем. Но на тёмном фоне они кричали, и мы гасим подложку умножением:
   оттенок различим, инициалы остаются белыми. Фильтром нельзя — он приглушает
   и текст вместе с фоном. */
.avatar.avatar--unique {
    background-color: #8a8a8a !important;
    background-blend-mode: multiply !important;
}

/* --- выделенные элементы списков и подменю ---
   Везде, где Zammad заливал элемент сплошным акцентом и клал поверх
   светлый текст (1.5:1), переходим на приглушённую заливку + зелёный
   текст. Ловим и те места, что красятся инлайном через --background-active. */
.nav-tab.is-active, .nav-tab--active, .tabs .is-active,
.sidebar-tab.is-active, .js-tab.is-active, li.active > a, .list-item.is-active {
    background-color: rgba(107, 163, 0, 0.18) !important;
    color: var(--sn-accent-hi) !important;
}
.nav-tab.is-active *, .tabs .is-active *, li.active > a * { color: var(--sn-accent-hi) !important; }
.badge, .badge--text {
    background-color: var(--sn-5) !important;
    color: var(--sn-text) !important;
}
.is-active .badge, .is-active .badge--text {
    background-color: rgba(107, 163, 0, 0.30) !important;
    color: var(--sn-text) !important;
}

/* счётчик на вкладках правой панели заявки: штатно сливался с фоном (1.27:1) */
.tabsSidebar-tab-count, .js-tabCounter {
    background-color: var(--sn-accent) !important;
    color: var(--sn-on-accent) !important;
    font-weight: 700 !important;
}

/* ===================================================================
   ОСТАТОЧНЫЙ СИНИЙ, ЗАШИТЫЙ В КОМПЛЕКТНЫЕ БИБЛИОТЕКИ
   -------------------------------------------------------------------
   В application.css приезжают Bootstrap 3, jQuery UI и CodeMirror со
   своими синими. Статическая проверка нашла 73 таких места. Токенами
   они не перекрываются — только прямыми правилами.
   =================================================================== */

/* --- приоритет заявки: штатно низкий приоритет красится голубым --- */
.item--low-priority a, .item--low-priority,
td.item--low-priority a { color: var(--text-muted) !important; }
.item--high-priority a, .item--high-priority { color: #e06a52 !important; }

/* --- Bootstrap 3: primary / info --- */
.text-primary, a.text-primary { color: var(--sn-accent-hi) !important; }
a.text-primary:hover { color: var(--sn-accent) !important; }
.text-info, .alert-info, .alert-info .alert-link,
.list-group-item-info, a.list-group-item-info { color: var(--sn-accent-hi) !important; }
.bg-primary, a.bg-primary:hover { background-color: var(--sn-accent) !important; color: var(--sn-on-accent) !important; }
.alert-info { background-color: rgba(107, 163, 0, 0.12) !important; border-color: var(--sn-accent-lo) !important; }
.panel-primary, .panel-info { border-color: var(--sn-accent-lo) !important; }
.panel-primary > .panel-heading, .panel-info > .panel-heading {
    background-color: rgba(107, 163, 0, 0.16) !important;
    color: var(--text-normal) !important;
    border-color: var(--sn-accent-lo) !important;
}
.progress-bar, .progress-bar-info { background-color: var(--sn-accent) !important; }
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus,
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover,
.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
    background-color: rgba(107, 163, 0, 0.22) !important;
    border-color: var(--sn-accent-lo) !important;
    color: var(--text-normal) !important;
}
.list-group-item.active .list-group-item-text { color: var(--text-muted) !important; }
a.thumbnail:hover, a.thumbnail:focus, a.thumbnail.active { border-color: var(--sn-accent) !important; }
.table-hover > tbody > tr:hover > .info, .table-hover > tbody > tr > .info {
    background-color: var(--background-modifier-hover) !important;
}

/* --- jQuery UI (датапикер, автодополнение) --- */
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    background: rgba(107, 163, 0, 0.25) !important;
    border: 1px solid var(--sn-accent) !important;
    color: var(--text-normal) !important;
}
.ui-widget-content, .ui-widget-header, .ui-datepicker {
    background: var(--background-popover) !important;
    color: var(--text-normal) !important;
    border-color: var(--border-alt) !important;
}
.ui-state-hover, .ui-widget-content .ui-state-hover {
    background: var(--background-modifier-hover) !important; border-color: var(--border-alt) !important;
}

/* --- поле в фокусе (Bootstrap красил #66afe9) --- */
.form-control:focus { border-color: var(--sn-accent) !important; box-shadow: 0 0 0 2px rgba(107,163,0,.18) !important; }

/* --- CodeMirror: подсветка синтаксиса ---
   Это редактор кода (макросы, шаблоны). Красить всё одним зелёным
   нельзя — подсветка нужна читаемой, поэтому раскладываем по тёплым
   тонам нашей гаммы. Синего здесь не остаётся. */
.CodeMirror, .cm-s-default {
    background: var(--sn-1) !important; color: var(--sn-text) !important;
}
.CodeMirror-gutters { background: var(--sn-0) !important; border-right: 1px solid var(--border) !important; }
.CodeMirror-linenumber { color: var(--sn-text-mute) !important; }
.CodeMirror-cursor { border-left-color: var(--sn-accent-hi) !important; }
.CodeMirror-selected { background: rgba(107, 163, 0, 0.22) !important; }
.cm-s-default .cm-keyword   { color: #c9d16a !important; }
.cm-s-default .cm-atom      { color: #d9a400 !important; }
.cm-s-default .cm-number    { color: #d9a400 !important; }
.cm-s-default .cm-def       { color: var(--sn-text) !important; }
.cm-s-default .cm-variable,
.cm-s-default .cm-variable-2,
.cm-s-default .cm-variable-3 { color: #b6c77a !important; }
.cm-s-default .cm-builtin   { color: var(--sn-accent-hi) !important; }
.cm-s-default .cm-attribute { color: var(--sn-accent-hi) !important; }
.cm-s-default .cm-string    { color: #9ab52e !important; }
.cm-s-default .cm-comment   { color: var(--sn-text-mute) !important; font-style: italic !important; }
.cm-s-default .cm-tag       { color: #d98324 !important; }
.cm-s-default .cm-link      { color: var(--sn-accent-hi) !important; }
.cm-s-default .cm-error     { color: #e06a52 !important; }

/* --- ссылки: НЕ красим всё подряд ---
   В хелпдеске «ссылка» — это и тема заявки, и имя пользователя, и
   название представления. Если красить все <a> акцентом, интерфейс
   становится сплошь зелёным. Поэтому цвет ссылки отдаём токену
   --text-link только там, где Zammad сам считает это ссылкой. */
a { color: inherit; }
a.link, .js-link, .text-link, a[href^="http"]:not(.menu-item):not(.nav-tab) { color: var(--text-link); }

/* ===== Добавлено 17.10 по итогам перепроверки =====
   Разбор скомпилированного application.css дал 81 правило с синим; выше закрыты
   те, что видно в обычной работе. Ниже — то, что всплывает только в отдельных
   состояниях (загрузка файла, обрезка аватара, подсветка кода, графики) и
   поэтому не попадает в прогон по разделам. Критерий тот же: синий канал не
   выше красного и зелёного одновременно. Фирменные цвета чужих сервисов
   (.auth-provider--facebook и т.п.) и цвета-идентификаторы аватаров не трогаем:
   это не оформление, а опознавательные знаки. */

/* полоса прогресса при загрузке вложений — была синим градиентом */
.qq-progress-bar, .js-attachmentUpload .qq-progress-bar {
    background: linear-gradient(to bottom, var(--sn-accent-hi) 0%, var(--sn-accent) 100%) !important;
}
/* обрезка аватара в профиле: рамка и маркеры */
.cropper-view-box { outline-color: rgba(107, 163, 0, 0.75) !important; }
.cropper-line, .cropper-point { background-color: var(--sn-accent) !important; }
/* заявки низкого приоритета: значок (цвет текста уже переопределён выше) */
.u-low-priority-color { fill: var(--sn-text-mute) !important; }
/* столбики в виджетах статистики — был серо-голубой #a9bcc4 */
.stat-bars .stat-bar, .stat-bars .stat-bar--outbound {
    color: var(--sn-text-mute) !important; background: var(--sn-text-mute) !important;
}
/* нажатая половинка составной кнопки */
.btn--split--last:active,
.buttonDropdown .dropdown-menu-accessories .btn--split--last:active {
    background-color: rgba(107, 163, 0, 0.35) !important;
}
/* подсветка кода highlight.js (в базе знаний и в заметках) — тёплая гамма,
   как и в CodeMirror выше: подсветка должна оставаться различимой */
.hljs-class .hljs-title, .hljs-type, .vhdl .hljs-literal, .tex .hljs-command { color: #b6c77a !important; }
.hljs-tag, .hljs-tag .hljs-title, .hljs-rule .hljs-property, .django .hljs-tag .hljs-keyword { color: #c9d16a !important; }
.hljs-built_in { color: var(--sn-accent-hi) !important; }
.diff .hljs-change { background: rgba(107, 163, 0, 0.22) !important; }

/* --- второй проход 17.10: состояния, которые не видно без действия пользователя.
   Найдено разбором скомпилированного application.css; каждое проверено подстановкой
   элемента в живую страницу и чтением вычисленного стиля. --- */

/* подсветка совпадений в поиске — была синей заливкой rgba(61,168,245,.75) */
.section-inner em { background: rgba(107, 163, 0, 0.35) !important; color: inherit !important; }
/* выпадающая подсказка в полях с поиском (клиент, группа, исполнитель) */
.searchableSelect .searchableSelect-autocomplete-visible {
    color: var(--sn-text) !important; background: rgba(107, 163, 0, 0.25) !important;
}
/* календарь: подсвеченный день */
.datepicker .day.focused, .datepicker .month.focused, .datepicker .year.focused {
    box-shadow: 0 0 0 1px var(--sn-accent) inset !important;
}
/* перетаскивание файла в заявку и полоса загрузки вложения */
.dropArea { border-color: var(--sn-accent) !important; color: var(--sn-accent-hi) !important; }
.attachmentUpload-progressBar { background: var(--sn-accent) !important; }
/* метки статей базы знаний */
.knowledge-base-article-tags--container .tag {
    background: var(--sn-5) !important; color: var(--sn-text) !important;
}
.knowledge-base-article-tags--container .tag:hover { background: var(--sn-accent) !important; color: var(--sn-on-accent) !important; }
/* полоса «вы работаете от имени другого пользователя»: остаётся заметной,
   поэтому не акцент, а янтарный — тот же, что у состояния «открыта» */
.switchBackToUser { background: var(--ok-color) !important; color: #140e00 !important; border-bottom-color: #a87f00 !important; }
/* CodeMirror: активная строка и выделение текста */
.CodeMirror-activeline-background { background: rgba(255, 255, 255, 0.04) !important; }
.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection,
.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection {
    background: rgba(107, 163, 0, 0.3) !important;
}
/* утилита Bootstrap .bg-info (светло-голубая плашка) */
.bg-info { background-color: var(--sn-4) !important; }
a.bg-info:hover { background-color: var(--sn-5) !important; }

/* ===================================================================
   ЧУЖОЙ ЗЕЛЁНЫЙ И ХОЛОДНЫЙ СЕРЫЙ
   -------------------------------------------------------------------
   Предыдущие проходы искали синий (b > r и b > g). Из-за этого мимо
   прошли два семейства:
     1) штатный изумруд Zammad #38AD69 — он зелёный, но не наш: рядом
        с #6BA300 читается как вторая, «чужая» марка;
     2) холодные серые #A9BCC4 / #DEE5E8 / #454A4F — формально серые,
        но с синим подтоном, и на графите это видно.
   Найдено статическим проходом по application.css 17.10 после скрина
   владельца (панель «Показатели»).
   =================================================================== */

/* --- кнопки действия: «создать», «отправить», «сохранить» --- */
/* селектор с двумя классами намеренно: в 04-components.css есть
   .btn:not(.btn--primary) — он специфичнее одиночного .btn--create
   и перебивал бы заливку */
.btn.btn--positive, .btn.btn--create, .btn.btn--success {
    background: var(--sn-accent) !important; color: var(--sn-on-accent) !important;
}
.btn.btn--positive:hover, .btn.btn--create:hover, .btn.btn--success:hover {
    background: var(--sn-accent-hi) !important; color: var(--sn-on-accent) !important;
}
.btn.btn--positive.btn--secondary, .btn.btn--create.btn--secondary, .btn.btn--success.btn--secondary {
    background: var(--sn-2) !important; color: var(--sn-accent-hi) !important;
}
.btn.btn--text.btn--positive { color: var(--sn-accent-hi) !important; background: none !important; }
.btn.btn--text.btn--positive:active { color: var(--sn-accent-lo) !important; }
a.create { color: var(--sn-accent-hi) !important; }

/* --- «плюс» в нижней панели (создать заявку) и прочие изумрудные иконки --- */
.user-menu-icon.icon-plus { fill: var(--sn-accent) !important; }

/* --- индикатор загрузки --- */
.loading.icon { background: var(--sn-accent) !important; }

/* --- счётчик «успех» на вкладках боковой панели --- */
.tabsSidebar-tab-count.tabsSidebar-tab-count--success,
.tabsSidebar-tab.active .tabsSidebar-tab-count.tabsSidebar-tab-count--success {
    background: var(--sn-accent) !important;
}
.tabsSidebar-tab-count.tabsSidebar-tab-count--success::after,
.tabsSidebar-tab.active .tabsSidebar-tab-count.tabsSidebar-tab-count--success::after {
    border-right-color: var(--sn-accent) !important;
}

/* --- пункт «создать» в выпадающих меню и аватар нового получателя --- */
.dropdown-menu > li.create:hover, .dropdown-menu > li.create.is-active {
    background: var(--sn-accent) !important; color: var(--sn-on-accent) !important;
}
.recipientList--new, .avatar--new { background: var(--sn-accent) !important; }

/* --- цвета групп в аватарах: штатно голубой/изумруд/горчица.
       Это опознавательные цвета, поэтому не сводим к одному, а
       раскладываем по нашей тёплой гамме — три различимых тона. --- */
.avatar--group-color-0 { background: #4f7a00 !important; }
.avatar--group-color-1 { background: #6BA300 !important; }
.avatar--group-color-2 { background: #8a6f00 !important; }

/* --- стопка заявок на «Показатели»: штатно синевато-белая --- */
.total-tickets, [data-theme='dark'] .total-tickets { fill: var(--sn-text-dim) !important; }

/* --- циферблат «время ожидания» рисуется в <canvas> из JS
       (supergood = "#38AE6A" зашит в application.js), CSS туда не
       достаёт. Поэтому доворачиваем готовую картинку фильтром:
       #38AE6A -> rgb(108,163,0), то есть ровно наш #6BA300.
       Числа подобраны по матрицам фильтров W3C и проверены замером. --- */
.stat-dial { filter: hue-rotate(-62deg) saturate(3.1) brightness(0.9); }

/* --- холодные серые в служебных экранах --- */
.action--placeholder { color: var(--sn-text-mute) !important; }
.section-title { color: var(--sn-text-dim) !important; }
.batch-overlay-circle { background: var(--sn-3) !important; }
.batch-overlay-macro-entry { background: var(--sn-2) !important; border-color: var(--sn-5) !important; }