/* ========================================================================== Courier CRM — дизайн-система в стиле recruit-free.ru Палитра, шрифт и токены перенесены из recruit-free.ru/assets/css/main.css. ========================================================================== */ :root { --ink: #1f2421; --muted: #57534e; --brown: #92400e; --orange: #f97316; --orange-d: #ea580c; --orange-bg: #fff7ed; --orange-br: #fed7aa; --teal: #0d9488; --teal-l: #5eead4; --teal-bg: #f0fdfa; --teal-br: #99f6e4; --cream: #fffdf9; --soft: #faf6f0; --line: #f0e6d8; --grid: #e2d2bb; --ok: #15803d; --ok-bg: #f0fdf4; --ok-br: #bbf7d0; --warn: #9a6300; --warn-bg: #fff4e0; --warn-br: #fde68a; --err: #b42318; --err-bg: #fef2f2; --err-br: #fecaca; --radius: 12px; --radius-sm: 10px; --font: 'Mulish', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --shadow-sm: 0 1px 2px rgba(31, 36, 33, .06), 0 1px 3px rgba(31, 36, 33, .08); --shadow-card: 0 2px 6px rgba(31, 36, 33, .07), 0 10px 24px rgba(31, 36, 33, .10); --shadow-md: 0 10px 30px rgba(31, 36, 33, .10); --shadow-orange: 0 4px 10px rgba(249, 115, 22, .30); } * { box-sizing: border-box; } body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--soft); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: var(--orange-d); } h1 { font-size: 24px; font-weight: 800; margin: 0 0 4px; } h2 { font-size: 18px; font-weight: 700; margin: 0 0 8px; } h3 { font-size: 15px; font-weight: 700; margin: 0 0 6px; } .muted { color: var(--muted); } /* ---- Кнопки --------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-weight: 700; font-size: 13px; padding: 6px 13px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform .08s ease, box-shadow .15s ease, background .15s ease; } .btn:active { transform: translateY(1px); } /* Значок слева в кнопке. Рисуем маской по currentColor — иконка сама принимает цвет кнопки и одинаково читается на оранжевом и на белом. Класс задаёт только картинку: .btn.btn-ico-save и т.д. */ [class*="btn-ico-"]::before { content: ""; width: 14px; height: 14px; flex: none; background-color: currentColor; -webkit-mask: var(--btn-ico) no-repeat center / contain; mask: var(--btn-ico) no-repeat center / contain; } /* Сохранить / применить — галочка */ .btn-ico-save { --btn-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } /* Добавить / создать — плюс */ .btn-ico-add { --btn-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); } /* Правка — карандаш */ .btn-ico-edit { --btn-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E"); } /* Поиск — лупа */ .btn-ico-find { --btn-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); } /* Обновить / пересчитать — круговая стрелка */ .btn-ico-sync { --btn-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-2.6-6.4'/%3E%3Cpath d='M21 3v6h-6'/%3E%3C/svg%3E"); } /* Отправить / запросить — стрелка */ .btn-ico-send { --btn-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); } /* Загрузить — стрелка вверх в лоток */ .btn-ico-upload { --btn-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5'/%3E%3Cpath d='M4 17v2a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-2'/%3E%3C/svg%3E"); } /* Копировать — два листа */ .btn-ico-copy { --btn-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M5 15V5a2 2 0 0 1 2-2h8'/%3E%3C/svg%3E"); } /* Вход — стрелка в дверь */ .btn-ico-login { --btn-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1h-4'/%3E%3Cpath d='M10 17l5-5-5-5M15 12H3'/%3E%3C/svg%3E"); } .btn-primary { background: var(--orange); color: #fff; box-shadow: var(--shadow-orange); } .btn-primary:hover { background: var(--orange-d); } .btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); } .btn-ghost:hover { border-color: var(--orange-br); color: var(--orange-d); } .btn-danger { background: var(--err-bg); color: var(--err); border-color: var(--err-br); } .btn-danger:hover { background: var(--err); color: #fff; } .btn-sm { padding: 6px 12px; font-size: 13px; } /* ---- Поля ввода ----------------------------------------------------------- */ input, select, textarea { font: inherit; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: var(--ink); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(249, 115, 22, .15); } /* Своя стрелка у select — чтобы управлять её положением (нативную сдвинуть нельзя). */ select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='none' stroke='%2357534e' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; } label { font-weight: 600; font-size: 13px; color: var(--muted); display: block; margin-bottom: 4px; } /* ---- Карточки ------------------------------------------------------------- */ .card { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 20px; } /* ---- Бейджи статусов ------------------------------------------------------ */ .badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--muted); white-space: nowrap; } .badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .badge-teal { color: var(--teal); background: var(--teal-bg); border-color: var(--teal-br); } .badge-orange { color: var(--orange-d); background: var(--orange-bg); border-color: var(--orange-br); } .badge-brown { color: var(--brown); background: var(--orange-bg); border-color: var(--orange-br); } .badge-warn { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-br); } .badge-ok { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-br); } .badge-err { color: var(--err); background: var(--err-bg); border-color: var(--err-br); } .badge-muted { color: var(--muted); background: var(--soft); border-color: var(--line); } /* ---- Панель кандидатов: поиск + кнопка «Фильтры» + ⚙ колонки -------------- */ /* Тулбар (поиск/Найти/Фильтры/⚙) — на всю ширину, в одну строку, низкий. */ .cand-panel { padding: 12px 16px; } .cand-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-right: 48px; } .cand-search { display: flex; gap: 8px; align-items: center; } /* Панель фильтров — выезжает справа (drawer) поверх затемнения. */ .drawer-backdrop { position: fixed; inset: 0; background: rgba(31, 36, 33, .35); z-index: 59; opacity: 0; pointer-events: none; transition: opacity .2s ease; } .drawer-backdrop.open { opacity: 1; pointer-events: auto; } .filters-drawer { position: fixed; top: 0; right: 0; height: 100vh; width: 380px; max-width: 92vw; background: var(--cream); box-shadow: var(--shadow-md); z-index: 60; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .22s ease; } .filters-drawer.open { transform: translateX(0); } .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--grid); } .drawer-body { flex: 1; overflow: auto; padding: 18px 20px; display: grid; gap: 14px; align-content: start; } .drawer-body select, .drawer-body input { width: 100%; } .drawer-foot { display: flex; gap: 8px; padding: 16px 20px; border-top: 1px solid var(--grid); } .cols-dd { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); } /* Иконочная кнопка (как иконки в меню): без рамки, 20px-глиф, цвет ink → orange на hover. */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; border-radius: var(--radius-sm); } .icon-btn:hover { color: var(--orange-d); background: var(--soft); } .icon-btn svg { width: 20px; height: 20px; } .cols-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 240px; max-height: 360px; overflow: auto; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); padding: 10px; } .cols-menu-head { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin-bottom: 6px; } .cols-menu-list { display: grid; gap: 2px; } .cols-menu-item { display: flex; align-items: center; gap: 8px; font-weight: 600; padding: 6px 7px; border-radius: 8px; cursor: pointer; margin: 0; } .cols-menu-item:hover { background: var(--soft); } .cols-menu-item input { width: auto; } /* ---- Таблица -------------------------------------------------------------- */ .table { width: 100%; border-collapse: collapse; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); } .table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); padding: 7px 12px; border-bottom: 1px solid var(--grid); background: var(--soft); } .table td { padding: 6px 12px; border-bottom: 1px solid var(--grid); } .table tr:last-child td { border-bottom: none; } .table tr:hover td { background: var(--orange-bg); } /* Таблица кандидатов: липкие первые столбцы (чекбокс, ID, Кандидат) при горизонтальной прокрутке. border-collapse:separate обязателен — с collapse браузеры игнорируют position:sticky на ячейках. */ .ctable { border-collapse: separate; border-spacing: 0; overflow: visible; } .ctable .c-check, .ctable .c-id, .ctable .c-name { position: sticky; z-index: 1; background: var(--cream); } .ctable thead .c-check, .ctable thead .c-id, .ctable thead .c-name { background: var(--soft); z-index: 2; } .ctable tr:hover .c-check, .ctable tr:hover .c-id, .ctable tr:hover .c-name { background: var(--orange-bg); } .ctable .c-check { left: 0; width: 44px; min-width: 44px; max-width: 44px; text-align: center; vertical-align: middle; padding-left: 0; padding-right: 0; } .ctable .c-check input { margin: 0; vertical-align: middle; } .ctable .c-id { left: 44px; width: 56px; min-width: 56px; max-width: 56px; color: var(--muted); font-variant-numeric: tabular-nums; } .ctable .c-name { left: 100px; min-width: 230px; white-space: nowrap; border-right: 1px solid var(--grid); } .ctable .row-check, .ctable #check-all { cursor: pointer; } /* Узкие строки: содержимое ячеек в одну строку, без переносов; вертикальные разделители колонок (сетка). */ .ctable td, .ctable th { white-space: nowrap; border-right: 1px solid var(--grid); } .ctable td:last-child, .ctable th:last-child { border-right: none; } /* Вакансия: длинные названия обрезаем многоточием (полное — в подсказке title при наведении). */ .ctable .col-vacancy { max-width: 220px; } .ctable .col-vacancy a { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } /* Горизонтальная прокрутка широкой таблицы. Скроллбар делаем ВСЕГДА видимым: на macOS оверлейный скроллбар прячется, и таблица выглядит «обрезанной». */ /* Числовая колонка: прижата вправо, цифры одной ширины — столбик читается сверху вниз. */ .table th.t-num, .table td.t-num { text-align: right; font-variant-numeric: tabular-nums; width: 1%; white-space: nowrap; } .table td.muted { color: var(--muted); } .table-scroll { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--grid) transparent; } .table-scroll::-webkit-scrollbar { height: 10px; } .table-scroll::-webkit-scrollbar-track { background: transparent; } .table-scroll::-webkit-scrollbar-thumb { background: var(--grid); border-radius: 999px; border: 2px solid var(--soft); } .table-scroll::-webkit-scrollbar-thumb:hover { background: var(--muted); } /* Тулбар над таблицей: подсказка слева, выбор размера страницы справа. */ .table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 10px; flex-wrap: wrap; } .per-page { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; white-space: nowrap; margin: 0; } .per-page select { width: auto; padding: 6px 30px 6px 10px; font-size: 13px; background-position: right 10px center; } /* Пагинатор под таблицей. */ .pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; flex-wrap: wrap; } .pager-nav { display: inline-flex; align-items: center; gap: 10px; } /* «Подключить новый кабинет» — раскрывашка-кнопка под таблицей OAuth-кабинетов Авито. */ .connect-new > summary { list-style: none; cursor: pointer; display: inline-flex; } .connect-new > summary::-webkit-details-marker { display: none; } .connect-new[open] > summary { margin-bottom: 10px; } /* ---- Раскрывающийся выбор статуса в таблице ------------------------------ */ .stage-dd { position: relative; display: inline-block; } .stage-dd-toggle { cursor: pointer; font-family: inherit; position: relative; top: -3px; } .stage-dd-caret { font-size: 9px; line-height: 1; transition: transform .15s; } .stage-dd.open .stage-dd-caret { transform: rotate(180deg); } .stage-dd-menu { position: fixed; z-index: 50; display: none; min-width: 220px; padding: 6px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); /* Видно ~7 пунктов (строка 34px + 12px паддинги меню), остальные — прокруткой. */ max-height: 250px; overflow-y: auto; } .stage-dd.open .stage-dd-menu { display: block; } .stage-dd-item { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13px; line-height: 18px; color: var(--ink); cursor: pointer; white-space: nowrap; } .stage-dd-item:hover { background: var(--soft); } .stage-dd-item.is-current { background: var(--teal-bg); color: var(--teal); font-weight: 700; } .stage-dd-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: middle; } /* ---- Флеш-сообщения ------------------------------------------------------- */ .flash { padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 14px; font-weight: 600; border: 1px solid; } .flash-success { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-br); } .flash-error { background: var(--err-bg); color: var(--err); border-color: var(--err-br); } /* ========================================================================== Каркас приложения ========================================================================== */ .app { display: flex; min-height: 100vh; } .sidebar { width: 232px; flex-shrink: 0; background: var(--cream); border-right: 1px solid var(--line); padding: 22px 16px; display: flex; flex-direction: column; transition: width .15s ease, padding .15s ease; } /* Кнопка свернуть/развернуть боковую панель (живёт в самой панели). */ .sidebar-toggle { align-self: flex-end; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-bottom: 6px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--cream); color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; } .sidebar-toggle:hover { border-color: var(--orange-br); color: var(--orange-d); } .sidebar-toggle::before { content: '\00AB'; } /* « — свернуть */ /* Свёрнутое состояние: узкая полоска с иконками; подписи, подменю, логотип и футер скрыты. */ html.sidebar-collapsed .sidebar { width: 64px; padding-left: 10px; padding-right: 10px; } html.sidebar-collapsed .brand, html.sidebar-collapsed .subnav, html.sidebar-collapsed .sidebar-foot, html.sidebar-collapsed .nav-label { display: none; } html.sidebar-collapsed .nav { margin-top: 12px; } html.sidebar-collapsed .nav a { justify-content: center; padding-left: 0; padding-right: 0; } html.sidebar-collapsed .sidebar-toggle { align-self: center; margin-bottom: 0; } html.sidebar-collapsed .sidebar-toggle::before { content: '\00BB'; } /* » — развернуть */ html.sidebar-collapsed .main { max-width: 1400px; } /* Список кандидатов — во всю доступную ширину (таблица широкая, узкий .main её резал). min-width:0 обязателен: иначе flex-элемент .main растягивается под широкую таблицу шире вьюпорта (ловушка min-width:auto) и горизонтально скроллится вся страница, а не сама таблица. */ .main.main-wide { max-width: 1700px; min-width: 0; } .brand { font-size: 18px; font-weight: 800; color: var(--ink); display: flex; align-items: center; gap: 8px; } .brand b { color: var(--orange); } .nav { display: flex; flex-direction: column; gap: 4px; margin-top: 24px; } .nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-weight: 600; } .nav a:hover { background: var(--soft); } .nav a.active { background: var(--orange-bg); color: var(--orange-d); } .nav-ico { width: 20px; height: 20px; flex: none; } /* Стрелка раздела-аккордеона: вниз = раскрыто, поворот при свёрнутом. */ .nav-caret { margin-left: auto; font-size: 11px; color: var(--muted); transition: transform .15s ease; } .nav a[aria-expanded="false"] .nav-caret { transform: rotate(-90deg); } html.sidebar-collapsed .nav-caret { display: none; } .subnav { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 6px 10px; padding-left: 10px; border-left: 1px solid var(--line); } /* Аккордеон меню прячет подменю атрибутом hidden — правило .subnav{display:flex} перебивает браузерный [hidden]{display:none}, поэтому скрытие задаём явно. */ .subnav[hidden] { display: none; } .subnav a { display: block; padding: 7px 12px; border-radius: var(--radius-sm); color: var(--muted); text-decoration: none; font-weight: 600; font-size: 14px; } .subnav a:hover { background: var(--soft); } .subnav a.active { background: var(--orange-bg); color: var(--orange-d); } .sidebar-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); } .sidebar-user { font-size: 13px; color: var(--muted); margin: 0 0 10px; } .main { flex: 1; padding: 28px 32px; max-width: 1060px; } .page-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 22px; } .page-head .actions { display: flex; align-items: center; gap: 10px; } /* ========================================================================== Мастер-детейл: слева список сущностей, справа редактор выбранной (Настройки → Голосовой робот) ========================================================================== */ .split { display: grid; grid-template-columns: 250px 1fr; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--cream); box-shadow: var(--shadow-card); } .split-list { border-right: 1px solid var(--line); background: #fff; padding: 12px; } .split-list h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 4px 8px 8px; margin: 0; } .split-body { padding: 20px 22px; min-width: 0; } .split-item { display: block; padding: 10px 11px; border-radius: var(--radius-sm); text-decoration: none; color: var(--ink); border: 1px solid transparent; } .split-item:hover { background: var(--soft); } .split-item.active { background: var(--orange-bg); border-color: var(--orange-br); } .split-item .n { font-weight: 700; font-size: 13.5px; display: flex; align-items: center; gap: 7px; } .split-item .s { font-size: 12px; color: var(--muted); margin-top: 2px; padding-left: 14px; } /* Состояние сценария: работает / выключен / нет движка. */ .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: #c9c4bb; } .dot.on { background: var(--teal); } .dot.warn { background: var(--warn); } .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; flex-wrap: wrap; } .tabs a { padding: 9px 14px; font-size: 14px; font-weight: 700; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; } .tabs a:hover { color: var(--ink); } .tabs a.active { color: var(--orange-d); border-bottom-color: var(--orange); } /* Ряд полей: колонки одной ширины, поля ввода выровнены по нижнему краю — иначе подпись в две строки роняет своё поле ниже соседних. */ .field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px 16px; } .field-row > label { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 600; } .field-row > label > input, .field-row > label > select { margin-top: auto; } /* Сетка флажков: одинаковые колонки вместо «рваного» переноса по ширине текста. */ .check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px 16px; } .check-grid label { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; } .check-grid input[type="checkbox"] { width: 16px; height: 16px; flex: none; accent-color: var(--orange); } .kpis { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; } .kpi { flex: 1; min-width: 120px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; } .kpi .l { font-size: 12.5px; color: var(--muted); } .kpi .v { font-size: 22px; font-weight: 800; } @media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split-list { border-right: 0; border-bottom: 1px solid var(--line); } } /* ========================================================================== Страница входа ========================================================================== */ .auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .auth-card { width: 100%; max-width: 380px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 30px; } .auth-card .brand { justify-content: center; margin-bottom: 6px; } .auth-sub { text-align: center; color: var(--muted); margin: 0 0 22px; font-size: 14px; } .auth-card form { display: grid; gap: 12px; } .auth-card .btn-primary { justify-content: center; margin-top: 4px; } /* ---- Шапка карточки кандидата --------------------------------------------- Имя с инициалами и датой создания, статус — выпадающим списком прямо здесь: выбор сразу отправляет форму, отдельная кнопка не нужна. */ .cc-head { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin-bottom: 8px; } .cc-ava { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; } .cc-head-main { flex: 1; min-width: 200px; } .cc-head-main h1 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; } .cc-created { color: var(--muted); font-size: 12px; margin-top: 1px; } .cc-head-acts { display: flex; gap: 8px; flex-wrap: wrap; } /* Статус: свой выпадающий список. Нативный