/* Диалог24 — слой темы HR: cabinet. Правится отдельно от ядра theme-hr.css.
 *
 * Кабинет и админка — рабочий инструмент, а не витрина. Отсюда правила слоя:
 * прямые углы и границы вместо теней и заливок, красный только на действии и
 * на текущем месте, статусные цвета (жёлтый «нужен человек», зелёный «готово»)
 * остаются различимыми. Всё ограничено `.app` — обёрткой кабинета и админки,
 * чтобы не задевать лендинг: его слой подключается раньше моего.
 */

/* ------------------------- Боковое меню ------------------------------- */
/* Меню строится как список-реестр в духе .role-list на сайте-эталоне: пункты
   во всю ширину колонки, текущий отмечен красной полосой у самого края. */
.app .side-nav { padding: 8px 0; }
.app .nav-group { margin-bottom: 10px; }
.app .nav-group-title {
    padding: 14px 18px 7px;
    font-weight: 800; font-size: .625rem; letter-spacing: .16em; color: var(--ink-4);
}
.app .nav-item {
    padding: 10px 18px; margin: 0;
    border: 0; border-radius: 0;
    font-weight: 700; color: var(--ink-2);
    transition: background .13s, color .13s;
}
.app .nav-item:hover { background: var(--paper-2); color: var(--red); }
.app .nav-item.active {
    background: var(--white); color: var(--red); font-weight: 800;
    box-shadow: inset 3px 0 0 var(--red);
}
.app .nav-item svg { opacity: .6; }
.app .nav-item.active svg,
.app .nav-item:hover svg { opacity: 1; }

.app .nav-count {
    border-radius: 0; padding: 1px 7px;
    font-weight: 800; letter-spacing: .04em;
    background: var(--paper-3); color: var(--ink-3);
}
.app .nav-item.active .nav-count { background: var(--red); color: #fff; }
.app .nav-count-hot { background: var(--amber) !important; color: #2a1f02 !important; }

.app .side-head { padding: 20px 18px 12px; }
.app .side-foot { padding: 14px 18px; }

/* ------------------------- Шапка страницы ----------------------------- */
.app .topbar { background: rgba(255,255,255,.96); }
.app .page-title {
    font-size: 1.45rem; font-weight: 850; letter-spacing: -.045em; line-height: 1.05;
}
.app .topbar-sub { font-size: .8125rem; color: var(--ink-3); }
.app .trial-pill, .app .topbar-plan { border-radius: 0; font-weight: 800; }

/* ------------------------- Плитки показателей ------------------------- */
/* Красная полоска над каждой плиткой давала четыре красных штриха в ряд —
   акцент переставал быть акцентом. Разницу держит типографика. */
.app .stat::before { display: none; }
.app .stat { padding: 16px 18px; }
.app .stat-label {
    font-family: var(--sans); font-weight: 800; font-size: .625rem;
    letter-spacing: .13em; color: var(--ink-3); margin-bottom: 10px;
}
.app .stat-value { font-weight: 850; letter-spacing: -.05em; font-size: 2.1rem; }
.app .stat-note { font-size: .78125rem; color: var(--ink-3); }
/* Плитка, которая просит внимания, отмечается рамкой, а не заливкой */
.app .stat.is-hot { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); }

/* Шкалы расхода: прямые, одноцветные */
.app .meter { border-radius: 0; height: 4px; background: var(--paper-3); }
.app .meter-fill { border-radius: 0; background: var(--ink); }
.app .meter-fill.warn { background: var(--amber); }
.app .meter-fill.over { background: var(--red); }

/* ------------------------- Бейджи и точки ----------------------------- */
.app .badge {
    border-radius: 0; padding: 3px 8px;
    font-family: var(--sans); font-weight: 800; letter-spacing: .1em;
}
/* Заливка вместо бледной подложки — но контраст проверен: на жёлтом текст
   тёмный, на зелёном и красном берётся затемнённый оттенок. */
.app .badge-brand { background: var(--ink); color: #fff; }
.app .badge-amber { background: var(--amber); color: #2a1f02; }
.app .badge-green { background: var(--sage-700); color: #fff; }
.app .badge-red   { background: var(--red-700); color: #fff; }
.app .badge-gray  { background: var(--paper-3); color: var(--ink-2); }
.app .dot-green, .app .dot-amber { box-shadow: none; }

/* ------------------------- Уведомления -------------------------------- */
/* Раньше на «Диалогах» подряд шли три сплошь розовых полотна. Теперь фон
   белый или бумажный, а состояние несёт цветная полоса слева и текст. */
.app .alert {
    border-radius: 0; padding: 13px 16px;
    background: var(--white); color: var(--ink);
    border: 1px solid var(--line); border-left-width: 3px;
}
.app .alert-error { border-left-color: var(--red);   border-color: var(--line); }
.app .alert-info  { border-left-color: var(--ink);   border-color: var(--line); }
.app .alert-ok    { border-left-color: var(--sage);  background: var(--sage-50);  border-color: #cfe3d9; }
.app .alert-warn  { border-left-color: var(--amber); background: var(--amber-50); border-color: var(--amber-100); }
.app .alert strong, .app .alert b { color: var(--ink); }
.app .alert-error strong { color: var(--red); }
.app .alert .btn, .app .alert .btn strong, .app .alert .btn b { color: inherit; }
.app .alert .btn-primary, .app .alert .btn-primary strong { color: #fff; }
/* Кнопка внутри плашки остаётся кнопкой — красим только текстовые ссылки */
.app .alert a:not(.btn) { color: var(--red); font-weight: 700; }

/* ------------------------- Таблицы ------------------------------------ */
/* Таблица — главный носитель смысла в кабинете: шапка спокойная и плотная,
   отделена жирной линией, строки различает только тонкая линейка. */
.app .table th {
    font-family: var(--sans); font-weight: 800; font-size: .625rem;
    letter-spacing: .12em; color: var(--ink-3);
    background: var(--paper-2); border-bottom: 2px solid var(--ink);
    padding: 9px 14px;
}
.app .table td { padding: 11px 14px; border-bottom: 1px solid var(--line-2); }
.app .table-hover tbody tr:hover { background: var(--paper-2); }
/* Подсказка «таблица прокручивается» осталась от прежней темы синеватой */
.app .table-wrap {
    border-radius: 0;
    background:
        linear-gradient(to right, var(--white) 40%, rgba(255,255,255,0)) left center / 26px 100% no-repeat local,
        linear-gradient(to left,  var(--white) 40%, rgba(255,255,255,0)) right center / 26px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, rgba(21,21,21,.14), transparent) left center / 11px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgba(21,21,21,.14), transparent) right center / 11px 100% no-repeat scroll;
}

/* ------------------------- Карточки ----------------------------------- */
.app .card, .app .stat, .app .price-card { border-radius: 0; box-shadow: none; }
.app .card-title { font-weight: 800; letter-spacing: -.025em; font-size: 1.05rem; }
.app .card h3 { letter-spacing: -.035em; }
.app .card-soft { background: var(--paper-2); border-color: var(--line); }
.app .card-hover:hover { transform: none; box-shadow: none; border-color: var(--ink); }
/* Служебная плашка внутри карточки — бумажная, не цветная */
.app .icon-tile { border-radius: 0; background: var(--paper-2); color: var(--red); }

/* ------------------------- Переписка ---------------------------------- */
.app .bubble { border-radius: 0; }
.app .bubble-in { border-radius: 0; background: var(--white); border: 1px solid var(--line); }
.app .bubble-out {
    border-radius: 0; background: var(--red); color: #fff; box-shadow: none;
}
.app .bubble-draft { border-radius: 0; border: 1px dashed var(--amber); background: var(--amber-50); }
.app .bubble-meta { font-family: var(--sans); letter-spacing: .04em; color: var(--ink-4); }
.app .typing i { border-radius: 0; background: var(--ink-4); }

.app .dlg-item { border-bottom: 1px solid var(--line-2); }
.app .dlg-item:hover { background: var(--paper-2); }
.app .dlg-item.active { background: var(--paper-2); box-shadow: inset 3px 0 0 var(--red); }
.app .dlg-item.hot { box-shadow: inset 3px 0 0 var(--amber); }
.app .dlg-name { font-weight: 800; letter-spacing: -.015em; }
.app .dlg-last { color: var(--ink-3); }

/* ------------------------- Путь запуска ------------------------------- */
.app .path-count { border-radius: 0; font-family: var(--sans); font-weight: 800; color: var(--ink); }
.app .path-mark { border-radius: 0; font-weight: 800; border-width: 1px; }
.app .path-step.is-current .path-mark { background: var(--red); border-color: var(--red); }
.app .path-step.is-done .path-mark { background: var(--sage-50); border-color: var(--sage); color: var(--sage-700); }
.app .path-step.is-current .path-title { font-weight: 800; letter-spacing: -.02em; }

/* ------------------------- Формы -------------------------------------- */
.app .input, .app .select, .app .textarea,
.app input, .app select, .app textarea {
    border-radius: 0;
}
.app .label {
    font-family: var(--sans); font-weight: 800;
    letter-spacing: .12em; font-size: .625rem; color: var(--ink-3);
}
.app .hint { color: var(--ink-3); }
/* Фокус — красная рамка вместо кольца-подсветки */
.app .input:focus, .app .textarea:focus, .app .select:focus {
    border-color: var(--red); box-shadow: none;
}
/* Стрелка у списков осталась синей от прежней темы — перекрашиваем в чёрную.
   Свойства пишутся полностью: у `.field select` фон задан сокращением, и одна
   только картинка размножилась бы плиткой по всему полю. */
.app .select, .app .field select {
    background-color: var(--white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23151515' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
}
/* Выбор цвета кнопки чата растягивался на всю строку синей полосой —
   ему хватает образца размером с поле ввода. */
.app input[type="color"] {
    width: 64px; height: 40px; padding: 3px;
    border: 1px solid var(--line); background: var(--white); cursor: pointer;
}

/* Кнопки-переключатели: заливка вместо градиента и тени */
.app .tile span { border-radius: 0; font-weight: 700; }
.app .tile span:hover { border-color: var(--ink); color: var(--ink); }
.app .tile input:checked + span {
    background: var(--ink); border-color: var(--ink); color: #fff;
    font-weight: 800; box-shadow: none;
}
.app .tile input:focus-visible + span { box-shadow: 0 0 0 2px var(--red); }
.app .rule, .app .tile-add, .app .rule-btn { border-radius: 0; }
.app .tile-add:hover { border-color: var(--ink); color: var(--ink); }

/* ------------------------- Кнопки в кабинете -------------------------- */
/* Действий на экране много, поэтому красной остаётся одна главная кнопка
   блока, остальные — контурные. Правило про «одну красную» держит разметка;
   слой лишь убирает у контурных всё лишнее. */
.app .btn { border-radius: 0; font-weight: 800; gap: 10px; }
.app .btn-sm { height: 34px; padding: 0 13px; font-size: .8125rem; }
.app .btn-plain, .app .btn-soft {
    background: var(--white); border: 1px solid var(--line); color: var(--ink);
}
.app .btn-plain:hover, .app .btn-soft:hover { border-color: var(--ink); background: var(--white); }
.app .btn-amber { background: var(--amber); color: #fff; border: 0; box-shadow: none; }
.app .btn-amber:hover { background: #9c7209; color: #fff; box-shadow: none; }

/* Полоса фильтров: одинаковой высоты, текущий — сплошной красный */
.app .filter-strip .btn { font-weight: 800; letter-spacing: 0; }

/* ------------------------- Тарифы в кабинете -------------------------- */
.app .price-card.popular { border-color: var(--red); box-shadow: none; }
.app .price-card.popular::before { background: var(--red); }
.app .price-flag { border-radius: 0; background: var(--red); color: #fff; font-family: var(--sans); }
.app .price-name { font-family: var(--sans); font-weight: 800; color: var(--ink); }
.app .price-val { font-weight: 850; letter-spacing: -.05em; }

/* Плашка пробного периода — бумажная рамка, а не пунктирный жёлтый прямоугольник */
.app .trial-band {
    border-radius: 0; border: 1px solid var(--line); border-left: 3px solid var(--amber);
    background: var(--white); padding: 22px 24px;
}
.app .trial-band-title { font-weight: 850; letter-spacing: -.03em; }

/* ------------------------- Тур по кабинету ---------------------------- */
/* Тур и подсказки дорисовываются скриптом в конец страницы, рядом с `.app`,
   поэтому берутся соседним селектором — на лендинге эти правила не сработают. */
.app ~ .tour-box {
    border-radius: 0; box-shadow: 0 0 0 1px var(--line), 0 18px 44px rgba(0,0,0,.28);
}
.app ~ .tour-hole { border-radius: 0; box-shadow: 0 0 0 9999px rgba(21,21,21,.62), 0 0 0 2px var(--red); }
.app ~ .tour-box .tour-step { font-family: var(--sans); font-weight: 800; letter-spacing: .13em; color: var(--red); }
.app ~ .tour-box .tour-title { font-weight: 850; letter-spacing: -.03em; }
.app ~ .term-tip { border-radius: 0; box-shadow: 0 0 0 1px var(--ink); }

/* ------------------------- Инструкции по шагам ------------------------ */
/* Пять розовых квадратов подряд в «Помощи» съедали акцент. Номер шага —
   чёрная цифра в белом квадрате с контуром. */
.app .step-num {
    border-radius: 0; width: 34px; height: 34px;
    font-family: var(--sans); font-weight: 800; font-size: .9375rem;
    background: var(--white); color: var(--ink); border: 1px solid var(--ink);
}

/* ------------------------- Мелочи ------------------------------------- */
.app .material-card { border-radius: 0; box-shadow: none; border: 1px solid var(--line); }
.app .material-card:hover { transform: none; box-shadow: none; border-color: var(--ink); }
.app .case-strip::-webkit-scrollbar-thumb { border-radius: 0; }
.app .divider { border-color: var(--line); }