@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
:root {
--bg: #12161B;
--panel: #1A2028;
--panel-2: #212933;
--border: #2B333E;
--text: #E7EBEF;
--muted: #8A93A1;
--accent: #D9A441;
--accent-dim: #4A3D22;
--ok: #4FAE7C;
--warn: #E0A030;
--danger: #D9694F;
--radius: 6px;
font-size: 15px;
}
/* ---------- Світла тема (біло-синя) ----------
Перемикається атрибутом data-theme="light" на (див. inline-скрипт
у index.html — застосовує ДО першого рендеру, щоб уникнути
"спалаху" темної теми — та public/settings.js applyTheme()/localStorage
crm_theme, вкладка "Налаштування" → "Вигляд"). Оскільки все верстання
(style.css/new-pages.css/tasks.css) побудоване на цих CSS-змінних,
перевизначення тут покриває майже весь інтерфейс без дублювання правил. */
[data-theme="light"] {
--bg: #F2F6FC;
--panel: #FFFFFF;
--panel-2: #EAF1FB;
--border: #D3DFEC;
--text: #1B2430;
--muted: #62728A;
--accent: #3D7DD8;
--accent-dim: #DCEAFB;
--ok: #1E9E5A;
--warn: #C98A12;
--danger: #D14343;
}
/* Кнопки/бейджі з var(--accent) як фоном використовують темний текст
(#14181D) для контрасту з жовтим акцентом темної теми — у світлій темі
акцент синій, тож текст на ньому має бути білим. */
[data-theme="light"] .btn.primary,
[data-theme="light"] .pw-pill.active,
[data-theme="light"] .proto-sum-tab.active,
[data-theme="light"] .subtab-btn.active,
[data-theme="light"] .stats-ys-btn.active,
[data-theme="light"] .stats-ms-btn.active {
color: #FFFFFF;
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: 'Inter', system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
}
.mono, td[data-mono], input[type="text"], input[type="number"] {
font-family: 'JetBrains Mono', ui-monospace, monospace;
}
/* ---------- Top bar ---------- */
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 24px;
border-bottom: 1px solid var(--border);
background: var(--panel);
}
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand-mark {
font-family: 'JetBrains Mono', monospace;
font-weight: 700;
font-size: 15px;
letter-spacing: 0.08em;
color: var(--accent);
border: 1px solid var(--accent-dim);
padding: 3px 8px;
border-radius: 4px;
}
.brand-sub { color: var(--muted); font-size: 14px; }
.tabs { display: flex; gap: 4px; }
.tab-btn {
background: transparent;
border: 1px solid transparent;
color: var(--muted);
padding: 8px 16px;
border-radius: var(--radius);
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all .15s;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active {
color: var(--bg);
background: var(--accent);
}
/* Іконка налаштувань — та сама поведінка вкладки (клік активує #tab-settings,
як і решта .tab-btn), лише вузька/іконкова + невеликий відступ ліворуч,
щоб візуально відділити її від звичайних вкладок. */
.settings-tab-btn {
margin-left: 10px;
padding: 8px 12px;
font-size: 16px;
}
/* Гамбургер мобільного меню (8-й раунд, п.1) — прихований на десктопі,
з'являється лише в мобільному брейкпоінті нижче. */
.mobile-menu-toggle {
display: none;
background: transparent;
border: 1px solid var(--border);
color: var(--text);
font-size: 18px;
line-height: 1;
padding: 6px 12px;
border-radius: var(--radius);
cursor: pointer;
}
/* ---------- Layout ---------- */
.page { padding: 20px 24px 60px; max-width: 1600px; margin: 0 auto; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.toolbar {
display: flex;
align-items: flex-end;
gap: 20px;
flex-wrap: wrap;
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 14px 16px;
margin-bottom: 16px;
}
.filter-group { display: flex; flex-direction: column; gap: 5px; }
.filter-group label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.check { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); padding-bottom: 8px; }
.spacer { flex: 1; }
select, input[type="date"], input[type="text"], input[type="number"] {
background: var(--panel-2);
border: 1px solid var(--border);
color: var(--text);
padding: 7px 10px;
border-radius: 4px;
font-size: 13px;
outline: none;
}
select:focus, input:focus { border-color: var(--accent); }
.btn {
border: 1px solid var(--border);
background: var(--panel-2);
color: var(--text);
padding: 8px 14px;
border-radius: var(--radius);
cursor: pointer;
font-size: 13px;
font-weight: 500;
font-family: inherit;
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); color: #14181D; border-color: var(--accent); font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; }
.btn.small { padding: 4px 9px; font-size: 12px; }
.btn.danger-txt { color: var(--danger); }
.hint { color: var(--muted); font-size: 12px; margin: -6px 0 14px; }
/* ---------- Table ---------- */
.table-wrap {
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: auto;
background: var(--panel);
}
table { width: 100%; border-collapse: collapse; font-size: 12.5px; white-space: nowrap; }
thead th {
position: sticky; top: 0;
background: var(--panel-2);
text-align: left;
padding: 10px 12px;
font-weight: 600;
color: var(--muted);
text-transform: uppercase;
font-size: 10.5px;
letter-spacing: .04em;
border-bottom: 1px solid var(--border);
}
tbody td { padding: 9px 12px; border-bottom: 1px solid var(--border); }
tbody tr:hover { background: rgba(217, 164, 65, 0.05); }
tbody tr:last-child td { border-bottom: none; }
td.empty { text-align: center; color: var(--muted); padding: 30px; white-space: normal; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
.row-actions { display: flex; gap: 6px; }
.badge-unsold { color: var(--warn); font-size: 11px; border: 1px solid var(--accent-dim); padding: 1px 6px; border-radius: 3px; }
/* ---------- CN report ---------- */
.cn-month {
margin-bottom: 18px;
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
.cn-month-head {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 10px 14px;
background: var(--panel-2);
border-bottom: 1px solid var(--border);
}
.cn-month-head .ym { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--accent); font-size: 14px; }
.cn-badge {
font-size: 11.5px; color: var(--muted);
border: 1px solid var(--border); padding: 2px 8px; border-radius: 10px;
}
.cn-badge.bad { color: var(--warn); border-color: var(--accent-dim); }
.cars-list div { font-size: 12px; color: var(--muted); line-height: 1.6; }
.cars-list strong { color: var(--text); font-family: 'JetBrains Mono', monospace; }
.badge-bad-rate { font-size: 10px; color: var(--warn); border: 1px solid var(--accent-dim); padding: 0 5px; border-radius: 3px; margin-left: 6px; }
/* ---------- Modal ---------- */
.modal-overlay {
display: none;
position: fixed; inset: 0;
background: rgba(0,0,0,.6);
align-items: center; justify-content: center;
z-index: 100;
}
.modal-overlay.open { display: flex; }
.modal {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 8px;
padding: 24px;
width: min(720px, 92vw);
max-height: 88vh;
overflow: auto;
}
.modal h3 { margin: 0 0 16px; font-size: 17px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.form-grid label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); }
.form-grid input, .form-grid select { width: 100%; }
.form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
/* Розділ форми авто на "Покупка"/"Продаж" (7-й раунд, п.2) — форма
#carForm сама є .form-grid (2 колонки), тож .form-section — прямий
елемент, що займає обидві колонки й містить власний вкладений
.form-grid лише для полів своєї секції. */
.form-section {
grid-column: 1 / -1;
border: 1px solid var(--border);
border-left-width: 3px;
border-radius: var(--radius);
padding: 12px 14px 14px;
margin: 2px 0;
}
.form-section .form-grid { gap: 12px 16px; }
.form-section-title {
grid-column: 1 / -1;
margin: 0 0 10px;
font-size: 12.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
}
.form-section-buy { border-left-color: var(--accent); }
.form-section-buy .form-section-title { color: var(--accent); }
.form-section-sell { border-left-color: var(--ok); }
.form-section-sell .form-section-title { color: var(--ok); }
/* ---------- Toast ---------- */
.toast {
position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(20px);
background: var(--panel-2); border: 1px solid var(--border);
color: var(--text); padding: 10px 18px; border-radius: 6px;
font-size: 13px; opacity: 0; pointer-events: none; transition: all .2s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.ok { border-color: var(--ok); }
.toast.err { border-color: var(--danger); }
@media (max-width: 720px) {
.form-grid { grid-template-columns: 1fr; }
.page { padding: 14px; }
/* Мобільне адаптивне меню (8-й раунд, п.1) — .tabs ховається за
гамбургером і розкривається як звичайний блок нижче topbar (не
оверлей/абсолютне позиціонування — просто "розсуває" контент). */
.topbar { flex-wrap: wrap; padding: 10px 14px; }
.mobile-menu-toggle { display: block; }
.tabs {
display: none;
flex-basis: 100%;
flex-direction: column;
gap: 2px;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--border);
}
.tabs.open { display: flex; }
.tabs .tab-btn { width: 100%; text-align: left; }
.settings-tab-btn { margin-left: 0; }
}
/* ============================================================
===== TAB: PROCES (статуси угод) =====
============================================================ */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 8px;
margin-bottom: 16px;
}
.stat-card {
display: block;
text-align: left;
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 10px 12px;
cursor: pointer;
font-family: inherit;
color: var(--text);
transition: border-color .15s, background .15s;
}
.stat-card:hover { border-color: var(--accent); background: rgba(217,164,65,0.06); }
.stat-card .stat-label { display: block; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; }
.stat-card .stat-value { font-family: 'JetBrains Mono', monospace; font-size: 18px; font-weight: 700; color: var(--accent); }
.stat-card .stat-extra { font-size: 11px; color: var(--muted); margin-left: 6px; }
.stat-card.stat-alert .stat-value { color: var(--danger); }
/* row-claim/row-othertask/row-selected — узагальнено на будь-яку таблицю
(не лише #procesTable), щоб те саме підсвічування (клік по рядку, і
рекламація/інші справи авто) працювало у "Авто", "Оплатах", "Протоколах". */
tbody tr.row-claim { background: rgba(224, 160, 48, 0.10); }
tbody tr.row-othertask { background: rgba(79, 148, 227, 0.10); }
tbody tr.row-claim:hover { background: rgba(224, 160, 48, 0.16); }
tbody tr.row-othertask:hover { background: rgba(79, 148, 227, 0.16); }
tbody tr.row-selected { outline: 1px solid var(--accent); outline-offset: -1px; }
/* Оригінал (proces.tpl): td.filled{background:#ecfdf3} для заповнених
дат/локації/дати продажу. Колір адаптовано під темну тему CRM. */
#procesTable td.filled { background: rgba(79, 174, 124, 0.12); }
/* ---------- Процес: таблиця без горизонтального скролу -----------
Оригінал (proces.tpl) покладається на overflow-x:auto для цієї широкої
таблиці (19 колонок). За явною вимогою — таблиця має вміщатися в ширину
вікна без скролу: фіксована розкладка колонок + перенесення тексту
замість nowrap + компактніші шрифт/відступи. */
.proces-table-wrap { overflow-x: hidden; overflow-y: auto; }
#procesTable { table-layout: fixed; width: 100%; font-size: 11.5px; }
/* Перенесення — лише цілими словами, на пробілах/дефісах (8-й раунд,
п.B): overflow-wrap:anywhere (7-й раунд, п.3) розривало текст У
БУДЬ-ЯКОМУ місці, включно з серединою чисел/слів (дати, номери,
назви перевізників) — за явною вимогою користувача повертаємо
стандартний Unicode-перенос (лише пробіл/дефіс/слеш); overflow:hidden
лишається запобіжником для рідкісного по-справжньому нерозривного
токена. VIN — окремий виняток, див. .cell-nowrap нижче. */
#procesTable td, #procesTable th {
white-space: normal;
overflow-wrap: normal;
word-break: normal;
overflow: hidden;
padding: 6px 6px;
}
#procesTable .row-actions .btn.small { padding: 3px 5px; font-size: 10.5px; white-space: normal; text-align: center; }
#procesTable .date-fab { margin-left: 3px; }
/* Дії Процес (7-й раунд, п.4): текстову кнопку "Редагувати" замінено на
іконку, щоб уміщалась у вузькому стовпчику дій; додано другий рядок
іконок — інфо продавця/замовника (відкриває те саме поле "info", що й
у Налаштування → Продавці/Замовники). Два рядки замість одного —
через вкладені .row-actions-row, а не flex-wrap на самій | , щоб
мати повний контроль над розкладкою 2×2. */
#procesTable td.row-actions {
display: flex;
flex-direction: column;
gap: 4px;
align-items: flex-start;
}
.row-actions-row { display: flex; gap: 4px; }
.btn-icon:disabled { opacity: .3; cursor: default; }
.btn-icon:disabled:hover { border-color: var(--border); }
/* ---------- Авто (Склад): таблиця без горизонтального скролу ----------
Той самий підхід, що й для Процес: фіксована розкладка колонок з явними
ширинами (сума ~100%). Перенесення — переважно цілими словами; дати
переносяться по дефісах (стандартна поведінка браузера для білого
простору "normal"). ЗМІНА (7-й раунд, п.3): раніше overflow-wrap
свідомо НЕ виставлявся (перенесення лише по пробілах/дефісах) — але
задовге слово без пробілів (напр. назва продавця) виходило за межі
фіксованої колонки й візуально "налазило" на сусідній стовпчик. Тепер
overflow-wrap:anywhere дозволяє розірвати й таке слово, а overflow:hidden
— запобіжник. VIN не переноситься взагалі (див. .cell-nowrap). */
.avto-table-wrap { overflow-x: hidden; overflow-y: auto; }
#carsTable { table-layout: fixed; width: 100%; font-size: 11.5px; }
#carsTable td, #carsTable th {
white-space: normal;
/* 8-й раунд, п.B: overflow-wrap:anywhere (7-й раунд, п.3) розривало
текст усередині чисел/слів (дати, номери) — за вимогою користувача
повертаємо стандартний перенос лише на пробілах/дефісах/слешах;
overflow:hidden лишається запобіжником для нерозривних токенів. */
overflow-wrap: normal;
word-break: normal;
overflow: hidden;
padding: 6px 8px;
border-right: 1px solid var(--border);
}
#carsTable td:last-child, #carsTable th:last-child { border-right: none; }
#carsTable td.row-actions { display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-start; }
#carsTable .row-actions .btn.small { padding: 3px 6px; font-size: 10.5px; white-space: nowrap; }
/* VIN-код — перенесення заборонено; якщо не влазить, обрізається "…"
(повне значення видно в title/tooltip при наведенні). */
.cell-nowrap {
white-space: nowrap !important;
overflow: hidden;
text-overflow: ellipsis;
}
/* Комірка VIN + кнопка "копіювати" (Авто/Процес): текст VIN обрізається
"…", а кнопка лишається завжди видимою поруч (flex, а не всередині
обрізаного тексту) — інакше вузька колонка ховала б кнопку разом з
переповненим текстом. */
.cell-nowrap-flex {
display: flex;
align-items: center;
gap: 4px;
overflow: hidden;
}
.cell-nowrap-flex .vin-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap !important;
flex: 1 1 auto;
min-width: 0;
}
.cell-nowrap-flex .copy-vin-btn {
flex: 0 0 auto;
padding: 1px 4px;
font-size: 10px;
line-height: 1.3;
}
/* ---------- Сортування колонок кліком по заголовку ---------- */
#carsTable thead th[data-field], #procesTable thead th[data-field] {
cursor: pointer;
user-select: none;
}
#carsTable thead th[data-field]:hover, #procesTable thead th[data-field]:hover { color: var(--text); }
#carsTable thead th.sort-active, #procesTable thead th.sort-active { color: var(--accent); }
#carsTable thead th.sort-active::after, #procesTable thead th.sort-active::after {
content: ' \25B2';
}
#carsTable thead th.sort-active:not(.asc)::after, #procesTable thead th.sort-active:not(.asc)::after {
content: ' \25BC';
}
/* ---------- Модалка вибору/редагування перевізника: без скролу -------- */
.carrier-table-wrap { overflow-x: hidden; }
#carriersTable { table-layout: fixed; width: 100%; font-size: 12px; }
#carriersTable td, #carriersTable th {
white-space: normal;
overflow-wrap: normal;
word-break: normal;
overflow: hidden;
padding: 6px 6px;
}
/* ---------- CN-звіт: таблиці по місяцях — без горизонтального скролу -- */
.cn-table-wrap { overflow-x: hidden; }
.cn-table-wrap table { table-layout: fixed; width: 100%; }
.cn-table-wrap td, .cn-table-wrap th {
white-space: normal;
overflow-wrap: normal;
word-break: normal;
overflow: hidden;
}
/* ---------- Модалка статистики (Процес): без горизонтального скролу --- */
#statModalContent { overflow-x: hidden; }
#statModalContent table { table-layout: fixed; width: 100%; font-size: 11.5px; }
#statModalContent td, #statModalContent th {
white-space: normal;
overflow-wrap: normal;
word-break: normal;
overflow: hidden;
padding: 6px 6px;
}
/* VIN у модалці статистики теж не переноситься. */
#statModalContent td:nth-child(3) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* УВАГА: не ставити display:flex/grid безпосередньо на | — Chromium
вилучає таку клітинку з табличної сітки колонок, і рядок "розсипається"
в стовпчик. Замість цього обгортка всередині | лишається inline. */
/* Дата в date-cell (Процес) переноситься лише по дефісу, як звичайний
текст — білий простір "normal" замість "nowrap". */
.date-cell { white-space: normal; }
.date-val { font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.date-fab {
border: 1px solid var(--border);
background: var(--panel-2);
color: var(--text);
width: 20px; height: 20px;
border-radius: 50%;
cursor: pointer;
font-size: 13px;
line-height: 1;
padding: 0;
display: inline-flex; align-items: center; justify-content: center;
vertical-align: middle;
margin-left: 6px;
}
.date-fab.is-plus:hover { border-color: var(--ok); color: var(--ok); }
.date-fab.is-minus:hover { border-color: var(--danger); color: var(--danger); }
.date-fab:disabled { opacity: .5; cursor: default; }
.btn-icon {
border: 1px solid var(--border);
background: var(--panel-2);
color: var(--text);
border-radius: 4px;
cursor: pointer;
font-size: 13px;
padding: 3px 6px;
line-height: 1;
}
.btn-icon:hover { border-color: var(--accent); }
.btn-plus {
border: 1px dashed var(--border);
background: transparent;
color: var(--muted);
border-radius: 4px;
cursor: pointer;
width: 22px; height: 22px;
font-size: 14px;
}
.btn-plus:hover { border-color: var(--accent); color: var(--accent); }
.docs-count { font-size: 11.5px; color: var(--muted); }
.transport-comment { font-size: 11.5px; color: var(--muted); max-width: 220px; white-space: normal; }
.proces-readonly {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 8px 16px;
background: var(--panel-2);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 12px 14px;
margin-bottom: 16px;
font-size: 12.5px;
}
.proces-readonly div span { display: block; color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 2px; }
.docs-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 12px;
}
.doc-card {
background: var(--panel-2);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 8px;
}
.doc-thumb { width: 100%; height: 120px; object-fit: cover; border-radius: 4px; display: block; background: #0d1116; }
.doc-tag { font-size: 11px; color: var(--accent); margin-top: 6px; font-weight: 600; }
.doc-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.doc-actions a, .doc-actions button {
font-size: 11px;
color: var(--text);
background: var(--panel);
border: 1px solid var(--border);
border-radius: 4px;
padding: 3px 6px;
text-decoration: none;
cursor: pointer;
font-family: inherit;
}
.doc-actions a:hover, .doc-actions button:hover { border-color: var(--accent); }
.doc-actions .doc-delete { color: var(--danger); margin-left: auto; }
@media (max-width: 900px) {
.proces-readonly { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}
/* ============================================================
===== АДАПТИВ ТАБЛИЦЬ: планшет і мобільний =====
За явною вимогою — "повноекранні" таблиці без горизонтального скролу
(усі правила вище: .proces-table-wrap/#procesTable,
.avto-table-wrap/#carsTable, .carrier-table-wrap/#carriersTable,
.cn-table-wrap, #statModalContent — та комбінований набір у
new-pages.css для Оплат/Статистики/Протоколів) — це поведінка ЛИШЕ
для комп'ютера (> 1024px). Нижче — два окремі режими:
• ПЛАНШЕТ (721–1024px): таблиця лишається таблицею, але скролиться
і вертикально, і горизонтально (замість стиснення в ширину екрана).
• МОБІЛЬНИЙ (≤720px, та сама межа, що вже використовується вище
для .form-grid/.pw-grid): рядки складаються в картки, підпис
кожного поля береться з data-th (проставляється applyDataTh() в
app.js при кожному рендері tbody — див. виклики в app.js/proces.js/
payments.js/stats.js; у protocols.js data-th вже проставлений
вручну в rowHtml()).
!important нижче — свідомо: інакше довелось би дублювати специфічність
усіх точкових селекторів вище (в т.ч. у new-pages.css, який
підключається ПІСЛЯ style.css), а тут ідеться про принципову зміну
поведінки за брейкпоінтом, а не про звичайне уточнення стилю.
============================================================ */
/* ---------- ПЛАНШЕТ: таблиця, скрол в обидва боки ---------- */
@media (min-width: 721px) and (max-width: 1024px) {
.table-wrap {
overflow: auto !important;
max-height: 72vh;
}
.table-wrap table {
table-layout: auto !important;
width: max-content !important;
min-width: 100%;
}
.table-wrap td, .table-wrap th {
white-space: nowrap !important;
}
/* Опис у протоколах — свідомо лишаємо перенесення (а не один довжелезний
рядок), інакше колонку неможливо читати навіть зі скролом. */
.protocols-table-wrap td.proto-full,
.protocols-table-wrap td.proto-short {
white-space: normal !important;
}
}
/* ---------- МОБІЛЬНИЙ: рядки таблиці -> картки ---------- */
@media (max-width: 720px) {
.table-wrap {
overflow: visible !important;
max-height: none !important;
border: none;
background: transparent;
}
.table-wrap table {
table-layout: auto !important;
width: 100% !important;
}
.table-wrap thead { display: none; }
.table-wrap tbody, .table-wrap tfoot { display: block; }
.table-wrap tbody tr, .table-wrap tfoot tr {
display: block;
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
margin-bottom: 10px;
padding: 8px 10px;
}
.table-wrap tbody tr:last-child, .table-wrap tfoot tr:last-child { margin-bottom: 0; }
.table-wrap tbody td, .table-wrap tfoot td {
display: block !important;
text-align: left !important;
white-space: normal !important;
padding: 5px 2px;
border-bottom: 1px dashed var(--border);
}
.table-wrap tbody td:last-child, .table-wrap tfoot td:last-child { border-bottom: none; }
.table-wrap tbody td::before, .table-wrap tfoot td::before {
content: attr(data-th);
display: block;
font-weight: 600;
color: var(--muted);
text-transform: uppercase;
font-size: 10px;
letter-spacing: .03em;
margin-bottom: 2px;
}
/* Колонки без заголовка (№, порожній стовпчик дій тощо) — без порожнього
підпису над значенням. */
.table-wrap tbody td:not([data-th])::before,
.table-wrap tfoot td:not([data-th])::before {
content: none;
margin-bottom: 0;
}
/* Рядок-заглушка "Немає записів/даних" — по центру, без картки-рамки на
кожне поле окремо (там всього одна комірка з colspan). */
.table-wrap tbody td.empty {
text-align: center !important;
border-bottom: none;
}
/* Кнопки дій (row-actions/proto-actions) — рядком з переносом, а не
одна під одною, як звичайні поля. */
.table-wrap tbody td.row-actions,
.table-wrap tbody td.proto-actions {
display: flex !important;
flex-wrap: wrap;
gap: 6px;
}
}
|