/* ============================================================
Jobburg UI kit — jobburg-blocks.css
Единый источник стилей всех блоков. Подключается один раз
на весь фронтенд; эталонные страницы и спецификации — в
jobburg-ui-kit.md. Не редактировать значения токенов локально.
Разделы:
1. Токены 2. База и типографика 3. Кнопки
4. Бейджи 5. Формы 6. Таблицы
7. Алерты 8. SectionCard/Collapse 9. PageHeader/Footer
10. ActionBanner 11. StatStrip 12. Funnel/Bars/Chips
13. KeyValueRow 14. ApplicationCard 15. StepsNav
16. AuthScreens 17. Утилиты и адаптив
============================================================ */
/* 1. ТОКЕНЫ ---------------------------------------------------- */
:root {
--jb-blue: #2E5CFF;
--jb-blue-hover: #2149DB;
--jb-blue-active: #1B3DBE;
--jb-blue-bg: #EAF0FF;
--jb-blue-border: #C9D7FF;
--jb-amber: #FFB020; /* декоративный акцент; не для кнопок и ссылок */
--jb-ink: #0F172A;
--jb-text: #0F172A;
--jb-text-secondary: #475569;
--jb-text-muted: #64748B;
--jb-border: #E2E8F0;
--jb-border-strong: #CBD5E1;
--jb-bg: #F4F6FA;
--jb-surface: #FFFFFF;
--jb-success: #16A34A; --jb-success-bg: #E8F7EE; --jb-success-border: #B7E4C7;
--jb-warning: #B45309; --jb-warning-bg: #FFF4DC; --jb-warning-border: #FFDD99;
--jb-danger: #DC2626; --jb-danger-bg: #FDECEC; --jb-danger-border: #F5B5B5;
--jb-info: #2E5CFF; --jb-info-bg: #EAF0FF; --jb-info-border: #C9D7FF;
--jb-radius-sm: 6px;
--jb-radius-md: 10px;
--jb-radius-lg: 14px;
--jb-shadow-sm: 0 1px 3px rgba(15, 23, 42, .07);
--jb-shadow-md: 0 6px 24px rgba(15, 23, 42, .10);
--jb-focus-ring: 0 0 0 3px rgba(46, 92, 255, .35);
--jb-font: 'Montserrat', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
}
/* 2. БАЗА И ТИПОГРАФИКА ---------------------------------------- */
.jb-body,
body.jb {
margin: 0;
font-family: var(--jb-font);
font-size: 15px;
line-height: 1.6;
color: var(--jb-text);
background: var(--jb-bg);
}
/* обязательный резет: без него input/textarea со width:100% вылезают за карточки */
.jb, .jb *, .jb *::before, .jb *::after { box-sizing: border-box; }
.jb h1, .jb-h1 { font-size: 32px; font-weight: 800; letter-spacing: -.5px; line-height: 1.2; }
.jb h2, .jb-h2 { font-size: 24px; font-weight: 700; letter-spacing: -.3px; line-height: 1.25; }
.jb h3, .jb-h3 { font-size: 19px; font-weight: 700; line-height: 1.3; }
.jb a { color: var(--jb-blue); text-decoration: none; }
.jb a:hover { color: var(--jb-blue-hover); text-decoration: underline; }
.jb-num { font-variant-numeric: tabular-nums; }
.jb-tiny { font-size: 13px; color: var(--jb-text-muted); }
.jb-logo { font-weight: 800; letter-spacing: -.5px; }
.jb-logo span { color: var(--jb-blue); }
/* 3. КНОПКИ (Button) ------------------------------------------- */
.jb-btn {
font: 600 15px var(--jb-font);
border-radius: var(--jb-radius-md);
padding: 10px 20px;
border: none;
cursor: pointer;
display: inline-block;
text-decoration: none;
text-align: center;
transition: background .15s, color .15s;
}
.jb-btn:focus-visible { outline: none; box-shadow: var(--jb-focus-ring); }
.jb-btn:disabled { opacity: .45; pointer-events: none; }
.jb-btn--primary { background: var(--jb-blue); color: #fff; }
.jb-btn--primary:hover { background: var(--jb-blue-hover); }
.jb-btn--secondary { background: var(--jb-surface); color: var(--jb-blue); border: 1px solid var(--jb-blue-border); }
.jb-btn--secondary:hover { background: var(--jb-blue-bg); }
.jb-btn--ghost { background: transparent; color: var(--jb-text-secondary); }
.jb-btn--ghost:hover { background: var(--jb-blue-bg); color: var(--jb-blue); }
.jb-btn--danger { background: var(--jb-danger); color: #fff; }
.jb-btn--danger:hover { background: #B91C1C; }
/* danger-outline: отклоняющие, но обратимые действия («Пропустить вакансию») */
.jb-btn--danger-outline { background: var(--jb-surface); color: var(--jb-danger); border: 1px solid var(--jb-danger); }
.jb-btn--danger-outline:hover { background: var(--jb-danger-bg); }
.jb-btn--sm { padding: 8px 14px; font-size: 13px; }
.jb-btn--lg { padding: 13px 26px; font-size: 16px; font-weight: 700; }
.jb-btn--block { display: block; width: 100%; }
/* ссылки-кнопки: побеждаем базовое правило `.jb a` */
.jb a.jb-btn--primary, a.jb-btn--primary,
.jb a.jb-btn--danger, a.jb-btn--danger { color: #fff; }
.jb a.jb-btn--secondary, a.jb-btn--secondary { color: var(--jb-blue); }
.jb a.jb-btn--danger-outline, a.jb-btn--danger-outline { color: var(--jb-danger); }
.jb a.jb-btn--ghost, a.jb-btn--ghost { color: var(--jb-text-secondary); }
.jb a.jb-btn:hover, a.jb-btn:hover { text-decoration: none; }
.jb a.jb-btn--primary:hover { color: #fff; }
.jb a.jb-btn--danger:hover { color: #fff; }
.jb a.jb-btn--secondary:hover, .jb a.jb-btn--ghost:hover { color: var(--jb-blue); }
/* 4. БЕЙДЖИ (Badge) -------------------------------------------- */
.jb-badge {
border-radius: 999px;
font-size: 12px;
font-weight: 600;
padding: 3px 10px;
display: inline-block;
white-space: nowrap;
}
.jb-badge--info { background: var(--jb-info-bg); color: var(--jb-info); }
.jb-badge--success { background: var(--jb-success-bg); color: var(--jb-success); }
.jb-badge--warning { background: var(--jb-warning-bg); color: var(--jb-warning); }
.jb-badge--danger { background: var(--jb-danger-bg); color: var(--jb-danger); }
.jb-badge--amber { background: var(--jb-amber); color: var(--jb-ink); }
.jb-badge--muted { background: var(--jb-bg); color: var(--jb-text-secondary); border: 1px solid var(--jb-border); }
/* 5. ФОРМЫ ------------------------------------------------------ */
.jb-label {
font-size: 13px; font-weight: 600; color: var(--jb-text-secondary);
margin-bottom: 6px; display: block;
}
.jb-input, .jb-select, .jb-textarea {
width: 100%;
padding: 10px 14px;
font: 400 15px var(--jb-font);
color: var(--jb-text);
background: var(--jb-surface);
border: 1px solid var(--jb-border-strong);
border-radius: var(--jb-radius-md);
}
.jb-input::placeholder, .jb-textarea::placeholder { color: var(--jb-text-muted); }
.jb-input:focus, .jb-select:focus, .jb-textarea:focus {
border-color: var(--jb-blue); box-shadow: var(--jb-focus-ring); outline: none;
}
.jb-input.is-error, .jb-textarea.is-error { border-color: var(--jb-danger); }
/* селект: своя стрелка всегда справа (не зависит от резетов фреймворка) */
select.jb-select {
appearance: none;
-webkit-appearance: none;
padding-right: 38px;
cursor: pointer;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 10px 6px;
}
.jb-textarea { min-height: 300px; resize: vertical; line-height: 1.6; }
.jb-hint { font-size: 13px; color: var(--jb-text-muted); margin-top: 5px; }
.jb-error-text { font-size: 13px; color: var(--jb-danger); margin-top: 5px; font-weight: 500; }
.jb-checkbox, .jb-radio { accent-color: var(--jb-blue); width: 17px; height: 17px; }
/* селект-фильтр с кастомной стрелкой (Select) */
.jb-select--filter {
width: auto;
font: 600 13.5px var(--jb-font);
padding: 8px 30px 8px 12px;
appearance: none;
cursor: pointer;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 11px center;
}
/* 6. ТАБЛИЦЫ (DataTable) ---------------------------------------- */
.jb-table {
width: 100%; border-collapse: collapse;
background: var(--jb-surface);
border-radius: var(--jb-radius-lg);
overflow: hidden;
box-shadow: var(--jb-shadow-sm);
}
.jb-table th {
text-align: left; font-size: 12px; font-weight: 700; text-transform: uppercase;
letter-spacing: .05em; color: var(--jb-text-muted); background: var(--jb-bg);
padding: 12px 16px; border-bottom: 1px solid var(--jb-border);
}
.jb-table td { padding: 13px 16px; font-size: 14px; border-bottom: 1px solid var(--jb-border); }
.jb-table tr:last-child td { border-bottom: none; }
.jb-table tbody tr:hover { background: var(--jb-blue-bg); }
.jb-table .r, .jb-table th.r { text-align: right; font-variant-numeric: tabular-nums; }
/* 7. АЛЕРТЫ И ТОСТЫ --------------------------------------------- */
.jb-alert {
border-radius: var(--jb-radius-lg);
padding: 14px 16px; font-size: 14px;
border: 1px solid;
display: flex; gap: 10px; align-items: flex-start;
}
.jb-alert b { display: block; font-weight: 700; }
.jb-alert--info { background: var(--jb-info-bg); border-color: var(--jb-info-border); color: var(--jb-info); }
.jb-alert--success { background: var(--jb-success-bg); border-color: var(--jb-success-border); color: var(--jb-success); }
.jb-alert--warning { background: var(--jb-warning-bg); border-color: var(--jb-warning-border); color: var(--jb-warning); }
.jb-alert--danger { background: var(--jb-danger-bg); border-color: var(--jb-danger-border); color: var(--jb-danger); }
.jb-toast {
background: var(--jb-surface); box-shadow: var(--jb-shadow-md);
border-radius: var(--jb-radius-lg); padding: 14px 16px; font-size: 14px;
border-left: 4px solid var(--jb-blue);
}
.jb-toast--success { border-left-color: var(--jb-success); }
.jb-toast--warning { border-left-color: var(--jb-warning); }
.jb-toast--danger { border-left-color: var(--jb-danger); }
/* 8. SECTIONCARD И COLLAPSE ------------------------------------- */
.jb-section {
background: var(--jb-surface);
border-radius: var(--jb-radius-lg);
padding: 24px;
box-shadow: var(--jb-shadow-sm);
}
.jb-section--amber { border-left: 6px solid var(--jb-amber); } /* только actionable-блоки */
.jb-section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
details.jb-collapse { padding: 0; }
details.jb-collapse summary {
list-style: none; cursor: pointer;
padding: 18px 24px; font-size: 17px; font-weight: 700;
display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
details.jb-collapse summary::-webkit-details-marker { display: none; }
details.jb-collapse summary::after { content: '▾'; color: var(--jb-text-muted); transition: transform .15s; }
details.jb-collapse[open] summary::after { transform: rotate(180deg); }
details.jb-collapse .jb-collapse-inner { padding: 0 24px 22px; }
/* 9. PAGEHEADER И PAGEFOOTER ------------------------------------ */
.jb-pagehead { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.jb-pagehead .jb-logo { font-size: 21px; }
.jb-pagehead h1 { font-size: 28px; font-weight: 800; letter-spacing: -.5px; margin: 10px 0 4px; }
.jb-pagehead .jb-sub { color: var(--jb-text-secondary); font-size: 14px; margin: 0; }
.jb-iconbtn {
width: 38px; height: 38px; border-radius: 50%;
border: 1px solid var(--jb-border); background: var(--jb-surface);
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer; color: var(--jb-text-secondary);
}
.jb-iconbtn:focus-visible { outline: none; box-shadow: var(--jb-focus-ring); }
.jb-pagefoot { color: var(--jb-text-muted); font-size: 13px; }
/* 10. ACTIONBANNER ---------------------------------------------- */
.jb-banner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.jb-banner-title { font-size: 17px; font-weight: 700; }
.jb-banner--hero .jb-banner-title { font-size: 19px; }
.jb-banner-count { font-size: 14px; color: var(--jb-text-secondary); font-weight: 500; margin-left: 10px; }
/* 11. STATSTRIP ------------------------------------------------- */
.jb-statstrip {
display: flex; gap: 14px 28px; flex-wrap: wrap;
background: var(--jb-surface); border-radius: var(--jb-radius-lg);
box-shadow: var(--jb-shadow-sm); padding: 16px 22px;
}
/* flex:none + nowrap-лейбл — метрика не сжимается и не переносит текст внутри;
при нехватке ширины flex-wrap переносит метрику ЦЕЛИКОМ (лейбл не обрезается). */
.jb-stat { display: flex; align-items: baseline; gap: 8px; flex: none; }
.jb-stat-v { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; }
.jb-stat-l { font-size: 13px; color: var(--jb-text-secondary); white-space: nowrap; }
button.jb-stat { background: none; border: none; cursor: pointer; font-family: var(--jb-font); padding: 0; }
button.jb-stat .jb-stat-v { color: var(--jb-blue); } /* кликабельная метрика-фильтр */
button.jb-stat:hover .jb-stat-l { color: var(--jb-blue); }
button.jb-stat.is-active .jb-stat-l { color: var(--jb-blue); font-weight: 600; }
button.jb-stat:focus-visible { outline: none; box-shadow: var(--jb-focus-ring); border-radius: 6px; }
/* 12. FUNNELCHART, BARCHART, CONVERSIONCHIPS -------------------- */
.jb-funnel-row {
display: grid; grid-template-columns: 110px 1fr 46px; gap: 12px;
align-items: center; margin-bottom: 9px;
}
.jb-funnel-label { font-size: 13.5px; font-weight: 600; color: var(--jb-text-secondary); }
.jb-funnel-track { height: 14px; background: var(--jb-bg); border: 1px solid var(--jb-border); border-radius: 8px; overflow: hidden; }
.jb-funnel-fill { height: 100%; background: var(--jb-blue); border-radius: 7px; }
.jb-funnel-value { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.jb-funnel-value--zero { color: var(--jb-text-muted); font-weight: 600; }
.jb-convs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.jb-conv {
font-size: 12.5px; font-weight: 500; padding: 5px 12px; border-radius: 999px;
background: var(--jb-blue-bg); border: 1px solid var(--jb-blue-border); color: var(--jb-ink);
}
.jb-bars { display: flex; gap: 14px; align-items: flex-end; padding-top: 8px; }
.jb-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; }
.jb-bar-v { font-size: 12.5px; font-weight: 700; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.jb-bar-fill { width: 62%; max-width: 46px; background: var(--jb-blue); border-radius: 6px 6px 0 0; }
.jb-bar-l { font-size: 11.5px; color: var(--jb-text-muted); margin-top: 7px; white-space: nowrap; }
/* 13. KEYVALUEROW ----------------------------------------------- */
/* строка «имя · значение · бейдж» (каналы, пробелы) */
.jb-kvrow {
display: flex; justify-content: space-between; align-items: center; gap: 12px;
padding: 12px 2px; border-bottom: 1px solid var(--jb-border); flex-wrap: wrap;
}
.jb-kvrow:last-child { border-bottom: none; }
.jb-kv-name { font-weight: 600; font-size: 14px; }
.jb-kv-value { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; margin-left: auto; }
.jb-kv-value--zero { color: var(--jb-text-secondary); }
/* вариант-ссылка (строка-инструмент на CareerPage) */
a.jb-kvrow, .jb-kvrow--link {
border: 1px solid var(--jb-border); border-radius: var(--jb-radius-md);
padding: 14px 16px; margin-bottom: 10px; text-decoration: none;
color: var(--jb-text); background: var(--jb-surface);
}
a.jb-kvrow:hover, .jb-kvrow--link:hover { background: var(--jb-blue-bg); border-color: var(--jb-blue-border); }
a.jb-kvrow:focus-visible { outline: none; box-shadow: var(--jb-focus-ring); }
a.jb-kvrow .jb-kv-name { font-weight: 700; font-size: 15px; }
.jb-kv-note { font-size: 13px; color: var(--jb-text-muted); margin-top: 2px; }
.jb-kvrow .jb-arr { color: var(--jb-blue); font-weight: 700; flex: none; }
/* 14. APPLICATIONCARD ------------------------------------------- */
.jb-card {
background: var(--jb-surface); border-radius: var(--jb-radius-lg);
box-shadow: var(--jb-shadow-sm); overflow: hidden;
border-left: 6px solid var(--jb-blue); /* рейл: blue — в работе */
}
.jb-card--offer { border-left-color: var(--jb-success); } /* оффер */
.jb-card--archived { border-left-color: var(--jb-border-strong); } /* отказ/архив */
.jb-card-head {
border-bottom: 1px solid var(--jb-border);
padding: 18px 24px; display: flex; gap: 16px;
justify-content: space-between; align-items: center; flex-wrap: wrap;
}
.jb-card-id { font-size: 12px; font-weight: 600; color: var(--jb-text-muted); letter-spacing: .06em; display: flex; gap: 12px; align-items: baseline; }
.jb-card-head h3 { font-size: 19px; font-weight: 800; letter-spacing: -.3px; margin: 2px 0; }
.jb-card-rating { background: var(--jb-amber); color: var(--jb-ink); font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 10px; vertical-align: 2px; margin-left: 8px; }
.jb-card-pos { font-size: 14px; font-weight: 500; color: var(--jb-text-secondary); }
.jb-remind {
display: inline-flex; gap: 8px; align-items: center;
font-size: 13px; font-weight: 600; color: var(--jb-ink);
background: var(--jb-success-bg); border: 1px solid var(--jb-success-border);
border-radius: 999px; padding: 7px 14px;
}
.jb-remind .jb-dot, .jb-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--jb-success); }
.jb-status {
font: 700 13.5px var(--jb-font); color: var(--jb-ink);
background: var(--jb-success-bg); border: 1px solid var(--jb-success-border);
border-radius: 999px; padding: 8px 32px 8px 28px;
appearance: none; cursor: pointer;
background-image:
radial-gradient(circle, var(--jb-success) 4px, transparent 5px),
url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-size: 14px 14px, 10px 6px;
background-position: 9px center, right 12px center;
}
.jb-status:focus-visible { outline: none; box-shadow: var(--jb-focus-ring); }
.jb-card-body { padding: 20px 24px; }
.jb-card-foot {
display: flex; gap: 12px; align-items: center; justify-content: flex-end;
flex-wrap: wrap; border-top: 1px solid var(--jb-border); padding: 16px 24px;
}
/* шкала этапов — горизонтальный режим */
.jb-timeline { list-style: none; margin: 0 0 4px; padding: 0; display: flex; counter-reset: step; }
.jb-timeline li { flex: 1; position: relative; text-align: center; min-width: 0; }
.jb-timeline li::before {
counter-increment: step; content: counter(step);
width: 30px; height: 30px; line-height: 26px; border-radius: 50%;
display: block; margin: 0 auto 7px;
font-size: 13px; font-weight: 700;
background: var(--jb-surface); color: var(--jb-text-muted);
border: 2px solid var(--jb-border-strong);
position: relative; z-index: 1;
}
.jb-timeline li::after {
content: ''; position: absolute; top: 15px;
left: calc(50% + 17px); right: calc(-50% + 17px);
height: 2px; background: var(--jb-border-strong);
}
.jb-timeline li:last-child::after { display: none; }
.jb-timeline li.current::before { content: '●'; background: var(--jb-blue); border-color: var(--jb-blue); color: #fff; font-size: 10px; }
.jb-timeline li.done::before { background: var(--jb-blue-bg); border-color: var(--jb-blue-border); color: var(--jb-blue); }
.jb-timeline .lbl {
font-size: 12.5px; font-weight: 600; color: var(--jb-text-secondary);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; display: block;
}
.jb-timeline li.current .lbl { color: var(--jb-blue); }
/* 15. STEPSNAV (шкала этапов, вертикальный режим; CareerPage) --- */
.jb-steps { list-style: none; margin: 0; padding: 0; }
.jb-steps li {
display: flex; gap: 12px; align-items: flex-start; position: relative;
padding: 7px 8px; border-radius: var(--jb-radius-md); cursor: pointer;
}
.jb-steps li:hover { background: var(--jb-blue-bg); }
.jb-steps .n {
flex: none; width: 28px; height: 28px; line-height: 24px; text-align: center;
border-radius: 50%; font-size: 12.5px; font-weight: 700;
background: var(--jb-surface); color: var(--jb-text-muted);
border: 2px solid var(--jb-border-strong); position: relative; z-index: 1;
}
.jb-steps li:not(:last-child)::after {
content: ''; position: absolute; left: 21px; top: 37px; bottom: -9px;
width: 2px; background: var(--jb-border-strong);
}
.jb-steps .t { font-size: 13.5px; font-weight: 600; color: var(--jb-text-secondary); padding-top: 4px; }
.jb-steps li.current { background: var(--jb-blue-bg); }
.jb-steps li.current .n { background: var(--jb-blue); border-color: var(--jb-blue); color: #fff; }
.jb-steps li.current .t { color: var(--jb-blue); }
.jb-steps li.done .n { background: var(--jb-blue-bg); border-color: var(--jb-blue-border); color: var(--jb-blue); }
/* 16. AUTHSCREENS ----------------------------------------------- */
.jb-auth-logo { font-size: 30px; font-weight: 800; letter-spacing: -1px; text-align: center; }
.jb-auth-slogan { text-align: center; font-size: 26px; font-weight: 800; letter-spacing: -.5px; margin: 10px 0 28px; }
.jb-auth-card {
background: var(--jb-surface); border-radius: var(--jb-radius-lg);
box-shadow: var(--jb-shadow-sm); padding: 36px;
max-width: 560px; margin: 0 auto;
}
.jb-auth-card h2 { font-size: 24px; font-weight: 800; letter-spacing: -.3px; margin: 0 0 20px; }
.jb-auth-aux { text-align: center; font-size: 14px; margin-top: 18px; color: var(--jb-text-secondary); }
.jb-auth-aux + .jb-auth-aux { margin-top: 10px; }
.jb-auth-aux a { color: var(--jb-blue); font-weight: 600; text-decoration: none; }
.jb-auth-aux a:hover { color: var(--jb-blue-hover); text-decoration: underline; }
/* 17. EMPTYSTATE И CHECKROW ------------------------------------- */
/* пустое состояние секции: иконка в голубом круге + заголовок + подсказка */
.jb-empty { text-align: center; padding: 34px 20px; color: var(--jb-text-secondary); }
.jb-empty .jb-empty-ico {
width: 52px; height: 52px; border-radius: 50%;
background: var(--jb-blue-bg); color: var(--jb-blue);
display: inline-flex; align-items: center; justify-content: center;
margin-bottom: 12px;
}
.jb-empty .jb-empty-title { font-weight: 700; font-size: 15px; color: var(--jb-text); }
.jb-empty p { margin: 6px 0 0; font-size: 14px; }
/* строка-настройка: чекбокс + название + бейдж режима справа */
.jb-checkrow {
display: flex; align-items: center; gap: 12px;
padding: 13px 2px; border-bottom: 1px solid var(--jb-border); flex-wrap: wrap;
}
.jb-checkrow:last-of-type { border-bottom: none; }
.jb-checkrow label { display: flex; gap: 11px; align-items: center; font-weight: 700; font-size: 15px; cursor: pointer; }
.jb-checkrow .jb-checkrow-note { font-size: 13px; color: var(--jb-text-muted); font-weight: 500; }
.jb-checkrow .jb-checkrow-side { margin-left: auto; }
/* Switch — тумблер вкл/выкл (настройки); текст состояния чернильный, не цветной */
.jb-switch { position: relative; display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13.5px; font-weight: 600; }
.jb-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.jb-switch .jb-switch-track {
width: 38px; height: 21px; border-radius: 999px;
background: var(--jb-border-strong); position: relative; transition: background .15s; flex: none;
}
.jb-switch .jb-switch-track::after {
content: ''; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px;
border-radius: 50%; background: #fff; transition: left .15s;
box-shadow: 0 1px 2px rgba(15, 23, 42, .2);
}
.jb-switch input:checked + .jb-switch-track { background: var(--jb-blue); }
.jb-switch input:checked + .jb-switch-track::after { left: 19px; }
.jb-switch input:focus-visible + .jb-switch-track { box-shadow: var(--jb-focus-ring); }
.jb-switch .jb-switch-label { color: var(--jb-text-secondary); }
.jb-switch input:checked ~ .jb-switch-label { color: var(--jb-text); }
/* SelectBar — липкая панель массового выбора (поиск, списки) */
.jb-selbar {
display: flex; justify-content: space-between; align-items: center;
gap: 12px; flex-wrap: wrap;
background: var(--jb-blue-bg); border: 1px solid var(--jb-blue-border);
border-radius: var(--jb-radius-md); padding: 10px 14px;
position: sticky; top: 10px; z-index: 5;
}
.jb-selbar label { display: flex; gap: 10px; align-items: center; font-weight: 600; font-size: 14px; cursor: pointer; }
.jb-selbar .jb-selbar-count { font-size: 13px; color: var(--jb-text-secondary); font-variant-numeric: tabular-nums; }
/* выбранная карточка списка: синий рейл + голубая подсветка */
.jb-card--selected { border-left-color: var(--jb-blue); background: var(--jb-blue-bg); }
/* 18. УТИЛИТЫ И АДАПТИВ ----------------------------------------- */
@media (max-width: 640px) {
.jb-section { padding: 18px; }
.jb-banner { align-items: stretch; }
.jb-banner .jb-btn { width: 100%; }
.jb-funnel-row { grid-template-columns: 84px 1fr 40px; }
.jb-bars { gap: 6px; }
.jb-bar-l { font-size: 9.5px; line-height: 1.25; white-space: normal; word-break: break-all; text-align: center; }
.jb-table th, .jb-table td { padding: 8px 7px; font-size: 12.5px; }
/* ApplicationCard: шкала этапов становится вертикальной */
.jb-timeline { flex-direction: column; gap: 12px; }
.jb-timeline li { display: flex; gap: 12px; align-items: center; text-align: left; }
.jb-timeline li::before { margin: 0; }
.jb-timeline li::after { left: 14px; top: 32px; bottom: -14px; right: auto; width: 2px; height: auto; }
.jb-timeline .lbl { white-space: normal; }
.jb-card-foot { flex-direction: column; align-items: stretch; }
}