нижче (:focus-within), не сам . */
table.quote-table td input:focus { outline: none; }
/* Клік виділяє весь текст клітинки (focusQuoteField/wireQuoteModal — el.select()),
щоб Ctrl+C одразу копіював, а друк одразу замінював старий текст — це вже
штатна поведінка браузера для виділеного тексту в полі, коду для цього не
треба. Тут лише колір самого виділення — типовий синій виглядав як "текст
випадково зачепили", тож замінено на легкий зелений, у тон контуру клітинки. */
table.quote-table td input::selection { background: rgba(107, 114, 128, 0.30); color: inherit; }
/* Excel-подібне виділення КОНКРЕТНОЇ клітинки (не всього рядка) — контур саме
по межі самої
(тій самій лінії сітки рядка/колонки), а не навколо
внутрішнього , який менший за клітинку через її padding (з контуром
на самому input між ним і реальною межею клітинки лишався видимий зазор).
:focus-within на td спрацьовує незалежно від того, чи є проміжні обгортки
всередині клітинки. Рядок навколо більше нічим не підсвічується (раніше тут
був tr:focus-within з синім фоном рядка — прибрано на прохання автора,
контур клітинки вже й так показує, де курсор). */
table.quote-table td:focus-within { box-shadow: inset 0 0 0 2px #1e8e3e; }
.quote-col-header { display: flex; align-items: center; gap: 4px; }
.quote-col-header input { flex: 1; min-width: 0; font-weight: 600; }
.quote-subcell { width: 70px; }
.quote-subcell input[type="number"] { width: 100%; }
.quote-select-cell { width: 82px; text-align: right; }
.quote-price-cell, .quote-sum-cell { font-weight: 600; text-align: right; white-space: nowrap; }
.quote-sum-row { display: flex; align-items: center; justify-content: flex-end; gap: 5px; white-space: nowrap; }
.quote-lead-badge { font-size: 10px; color: #92400e; background: #fef3c7; border-radius: 6px; padding: 1px 5px; margin-top: 2px; white-space: nowrap; }
.quote-select-cell.is-selected { background: #ecfdf5; }
.quote-total-row { font-weight: 600; background: #f9fafb; }
.quote-row-number { text-align: center; color: #9ca3af; background: #f9fafb; user-select: none; }
table.quote-table tbody tr:hover { background: #f8fafc; }
table.quote-table, table.quote-table th, table.quote-table td, table.quote-table input {
font-family: Calibri, 'Segoe UI', Arial, sans-serif;
/* "Calibri 11" в Екселі — це 11 ПУНКТІВ (як в самому Екселі/Word), а не
11px: 11pt ≈ 14.7px при звичних 96 DPI. Задане раніше в px виглядало
помітно дрібнішим за реальний Ексель на 100% масштабі. Пункти (pt)
браузер сам коректно переводить у px, тож рахувати вручну не треба. */
font-size: 11pt;
}
/* Заголовок всередині #quoteSelectionCapture — навмисно частина ТОГО САМОГО
div, який захоплюється в буфер для Telegram, тож коли клієнту прилітає
голе зображення без контексту навколо, він одразу бачить, до якого
замовлення воно відноситься. */
.quote-capture-header { font-weight: 700; font-size: 14px; margin-bottom: 8px; text-align: center; }
#loginScreen {
height: 100vh;
align-items: center;
justify-content: center;
background: #1f2937;
}
.lock-box {
background: #fff;
border-radius: 8px;
padding: 28px 32px;
width: 320px;
}
.lock-box h1 { text-align: center; }
.lock-box p { color: #6b7280; font-size: 13px; margin-bottom: 10px; }
.lock-box input { width: 100%; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; }
.lock-box .field { margin-bottom: 10px; }
.lock-box .field label { display: block; font-size: 12px; color: #6b7280; margin-bottom: 4px; }
.tabs {
display: flex;
background: #1f2937;
padding: 0 8px;
}
.tab {
background: none;
border: none;
color: #cbd5e1;
padding: 10px 16px;
cursor: pointer;
font-size: 14px;
white-space: nowrap;
}
.tab:hover { color: #fff; }
.tab.active { color: #fff; border-bottom: 3px solid #3b82f6; font-weight: 600; }
.user-bar { margin-left: auto; display: flex; align-items: center; gap: 10px; color: #94a3b8; font-size: 13px; white-space: nowrap; }
.user-bar button {
background: none;
border: 1px solid #4b5563;
color: #cbd5e1;
border-radius: 6px;
padding: 5px 10px;
font-size: 12px;
cursor: pointer;
}
.user-bar button:hover { color: #fff; border-color: #9ca3af; }
#view { flex: 1; overflow: auto; padding: 20px; }
h1 { font-size: 20px; margin: 0 0 16px; }
h2 { font-size: 17px; margin: 0 0 12px; }
.toolbar { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; flex-wrap: wrap; }
button.btn {
background: #3b82f6; color: #fff; border: none; border-radius: 4px;
padding: 8px 14px; cursor: pointer; font-size: 13px;
}
button.btn:hover { background: #2563eb; }
button.btn.secondary { background: #6b7280; }
button.btn.secondary:hover { background: #4b5563; }
button.btn.danger { background: #dc2626; }
button.btn.danger:hover { background: #b91c1c; }
button.btn.accent { background: #7c3aed; }
button.btn.accent:hover { background: #6d28d9; }
/* Той самий відтінок салатового, що вже є на статусі "На складі" (tr.status-in_stock,
#d9f7d9), лише темніший — той пастельний колір як фон кнопки з білим текстом
був би нечитабельний. */
button.btn.lime { background: #66bb6a; }
button.btn.lime:hover { background: #4f9d53; }
button.btn.yellow { background: #eab308; color: #1f2937; }
button.btn.yellow:hover { background: #ca8a04; }
button.btn.sky { background: #38bdf8; }
button.btn.sky:hover { background: #0ea5e9; }
button.btn.small { padding: 4px 8px; font-size: 12px; }
.filter-group button {
background: #e5e7eb; border: none; padding: 7px 14px; cursor: pointer; border-radius: 4px; margin-right: 4px;
}
.filter-group button.active { background: #3b82f6; color: #fff; }
/* flex-wrap — інакше багато кнопок (напр. довгий список фірм) просто виїжджав
за межі своєї колонки в form-grid замість переносу на другий рядок, і
зʼїдав/зсував усе, що стоїть у наступній колонці (напр. блок "Оплата"). */
.type-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.type-buttons .type-btn {
background: #e5e7eb; border: none; padding: 6px 12px; cursor: pointer;
border-radius: 4px; font-size: 13px;
}
.type-buttons .type-btn.active { background: #3b82f6; color: #fff; }
tr.col-filter-row th { background: #fff; padding: 4px 6px; }
tr.col-filter-row .col-filter {
width: 100%; padding: 4px 6px; border: 1px solid #d1d5db; border-radius: 3px;
font-size: 12px; font-weight: normal; box-sizing: border-box;
}
.dash-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dash-card { background: #fff; border-radius: 6px; padding: 16px; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.dash-label { color: #6b7280; font-size: 13px; margin-bottom: 6px; }
.dash-value { font-size: 24px; font-weight: 700; }
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { padding: 8px 10px; border-bottom: 1px solid #e5e7eb; text-align: left; font-size: 13px; }
th { background: #f9fafb; font-weight: 600; }
tr.clickable { cursor: pointer; }
tr.clickable:hover { background: #f1f5f9; }
/* Рядки замовлень мали різну висоту залежно від кількості кнопок дій (у
завершених/прорахункових заказів кнопок менше, ніж у активних) — фіксуємо
однакову висоту і забороняємо перенос кнопок на другий рядок. */
.row-actions { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; min-height: 26px; }
.badge { padding: 2px 8px; border-radius: 10px; font-size: 12px; display: inline-block; white-space: nowrap; }
.badge.in_progress { background: #fde68a; color: #92400e; }
.badge.completed { background: #bbf7d0; color: #166534; }
.badge.paid { background: #bbf7d0; color: #166534; }
.badge.unpaid { background: #fecaca; color: #991b1b; }
.badge.partial { background: #fde68a; color: #92400e; }
.badge.quote { background: #ede4fb; color: #5b21b6; }
.badge.stale { background: #fecaca; color: #7f1d1d; font-weight: 600; }
.np-status-badge { padding: 2px 8px; border-radius: 10px; font-size: 12px; display: inline-block; white-space: nowrap; margin-top: 2px; }
.np-status-badge.blue { background: #dbeafe; color: #1e40af; }
.np-status-badge.yellow { background: #fde68a; color: #92400e; }
.np-status-badge.lime { background: #d9f99d; color: #3f6212; }
.np-status-badge.green { background: #bbf7d0; color: #166534; }
.np-status-badge.red { background: #fecaca; color: #991b1b; }
.np-status-badge.orange { background: #fed7aa; color: #9a3412; }
.np-status-badge.maroon { background: #e4c9c9; color: #5c1a1a; }
.np-status-badge.cyan { background: #cffafe; color: #155e75; }
.np-status-badge.purple { background: #ede4fb; color: #5b21b6; }
.card { background: #fff; border-radius: 6px; padding: 16px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
/* Позиції замовлення — широка таблиця, часто з горизонтальним скролом (див.
.table-scroll), тож саме цій картці даємо "виїхати" в обидва боки рівно на
величину padding у #view (20px) — вона впритул до краю вікна, а не
всередині ще одного відступу поверх свого власного padding:16px. Інші
картки (форма даних заказу тощо) цей клас не використовують — їм ширина
не критична. */
.card.card-full-width {
margin-left: -20px;
margin-right: -20px;
border-radius: 0;
}
.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 16px; }
.field label { display: block; font-size: 12px; color: #555; margin-bottom: 3px; }
.field input, .field select { width: 100%; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 13px; }
/* Компактний варіант — картка "Дані замовлення" (лейбл над полем + великий
вертикальний відступ займав удвічі більше висоти, ніж треба, особливо на
широкому екрані, де самих колонок і так вистачає впоперек). Лейбл ставимо
зліва, поле займає решту ширини клітинки. Групи кнопок (:has(.type-buttons) —
напрямок/фірма/доставка) свідомо лишаємо як було: підпис + кнопки в один
рядок там банально не влазять по ширині без переносу. */
.form-grid.compact { gap: 6px 16px; }
/* align-items: flex-start (не center) — інакше лейбл поля з високим вмістом
(напр. "Фірма", де під рядком з назвою ще й кнопка реквізитів) центрувався б
по всій висоті свого поля і "спливав" вниз відносно лейблів звичайних
однорядкових полів у тому ж рядку сітки. padding-top на лейблі — щоб текст
лейбла на око збігався по вертикалі з текстом всередині input. */
.form-grid.compact .field { display: flex; align-items: flex-start; gap: 8px; }
.form-grid.compact .field:has(.type-buttons) { display: block; }
.form-grid.compact .field:has(.type-buttons) label { white-space: normal; margin-bottom: 3px; }
.form-grid.compact .field label { flex: 0 0 auto; margin-bottom: 0; white-space: nowrap; padding-top: 6px; }
.form-grid.compact .field > input,
.form-grid.compact .field > select,
.form-grid.compact .field > div { flex: 1; min-width: 0; }
.form-grid.compact .field input, .form-grid.compact .field select { padding: 5px 8px; }
/* Оплата + Напрямок/Видача клієнту/Спосіб доставки — окремі блоки в одному
ряду (не клітинки form-grid, а звичайні flex-елементи всередині одного
поля, тому 3-колонкове обмеження сітки їх не стосується). Тонка лінія
зверху й знизу в кожного — за замовчуванням gap:0 в батьківському ряду, тож
лінії суміжних блоків зливаються в одну наскрізну лінію по всій довжині ряду. */
.field-block { border-top: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; padding: 10px 20px; }
.field-block label { display: block; font-size: 12px; color: #555; margin-bottom: 6px; }
/* Вертикальна лінія між суміжними блоками (крім першого) — той самий колір,
що й горизонтальні лінії зверху/знизу. */
.field-block + .field-block { border-left: 1px solid #e5e7eb; }
tr.status-new { background: #ffffff; }
tr.status-ordered { background: #fff7cc; }
tr.status-in_stock { background: #d9f7d9; }
tr.status-issued { background: #ede4fb; }
.status-checks { display: flex; gap: 8px; align-items: center; white-space: nowrap; }
.status-checks label { display: flex; gap: 3px; align-items: center; font-size: 11px; }
.table-scroll { overflow-x: auto; }
/* width:auto (не 100%, як у звичайних table) — інакше при table-layout:fixed
браузер тримає СУМАРНУ ширину = ширині контейнера і при розтягуванні однієї
колонки просто пропорційно стискає решту (тягне всю таблицю за собою, а не
змінює тільки цю колонку). З width:auto кожна колонка тримає рівно той
пиксельний розмір, що встановлений їй самій, а таблиця росте/скорочується
сумарно — надлишок ховається в горизонтальний скрол .table-scroll. */
table.resizable { table-layout: fixed; width: auto; }
table.resizable th { position: relative; overflow: hidden; white-space: nowrap; }
table.resizable td { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.col-resize-handle {
position: absolute; top: 0; width: 6px; height: 100%; z-index: 2;
cursor: col-resize; user-select: none; background: transparent;
}
.col-resize-handle-right { right: 0; }
.col-resize-handle:hover { background: #93c5fd; }
.row-delete-btn {
background: none; border: none; color: #dc2626; cursor: pointer;
font-size: 13px; padding: 2px 4px; line-height: 1;
}
.row-delete-btn:hover { color: #991b1b; }
.row-edit-btn {
background: none; border: none; cursor: pointer;
font-size: 13px; padding: 2px 4px; line-height: 1;
}
.note-toggle-btn {
background: #e5e7eb; border: none; border-radius: 4px; cursor: pointer;
font-size: 13px; padding: 3px 6px; line-height: 1;
}
.note-toggle-btn.has-note { background: #dc2626; }
.note-toggle-btn:hover { background: #9ca3af; }
.note-toggle-btn.has-note:hover { background: #991b1b; }
.ttn-input { width: 100px; padding: 4px; border: 1px solid #d1d5db; border-radius: 3px; font-size: 12px; }
.num-input { width: 80px; padding: 4px; border: 1px solid #d1d5db; border-radius: 3px; font-size: 12px; }
.name-input { width: 140px; padding: 4px; border: 1px solid #d1d5db; border-radius: 3px; font-size: 12px; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
}
table.resizable .ttn-input, table.resizable .num-input, table.resizable .name-input {
width: 100%; box-sizing: border-box;
}
/* Excel-подібний вигляд полів у таблиці позицій — легка видима рамка на
кожному полі (як лінії сітки в Екселі), а не важка сіра рамка, що була
раніше. Прозору рамку пробували першою — вийшло, що межі полів взагалі не
видно, тож повернули видиму, лише світлішу. Колір рядка (tr.status-*) не
чіпаємо — це усталений спосіб бачити статус позиції з першого погляду,
hover/focus тут накладаються поверх через box-shadow, а не замінюють background. */
/* Реальний Ексель не має ані заокруглених кутів на полях, ані такого
великого відступу навколо них, як стандартний браузерний інпут/клітинка —
звідси й відчуття "це форма, а не таблиця" на скріні. Прибираємо
border-radius і стискаємо відступи і в самій
, і в полі. */
#itemsTable td, #itemsTableCommission td {
padding: 2px 4px;
}
#itemsTable td input, #itemsTable td select, #itemsTableCommission td input, #itemsTableCommission td select {
/* Прозора рамка тут навмисно — сама клітинка (#itemsTable th, td нижче)
вже має видиму рамку-сітку, тож рамка ще й на полі всередині неї давала
"клітинку в клітинці" (додатковий білий прямокутник поверх кольору
статусу рядка) — саме це й муляло око. */
border-color: transparent;
border-radius: 0;
background: transparent;
padding: 2px 4px;
}
/* Навмисно БЕЗ власного фону/рамки навіть у фокусі — той самий принцип, що
й у проценці вище: в Екселі немає окремого "віконця поля" всередині
клітинки, індикатор активної клітинки — зелений контур по межі
нижче. */
#itemsTable td input:focus, #itemsTable td select:focus,
#itemsTableCommission td input:focus, #itemsTableCommission td select:focus {
outline: none;
}
/* Той самий м'який зелений колір виділеного тексту, що й у проценці —
замість типового синього, який виглядав як "текст ненавмисно зачепили". */
#itemsTable td input::selection, #itemsTable td select::selection,
#itemsTableCommission td input::selection, #itemsTableCommission td select::selection {
background: rgba(107, 114, 128, 0.30);
color: inherit;
}
/* Excel-подібне виділення КОНКРЕТНОЇ клітинки — контур по межі самої
(лінія сітки рядка/колонки), не навколо меншого за клітинку —
той самий підхід, що й у проценці (table.quote-table td:focus-within вище). */
#itemsTable td:focus-within, #itemsTableCommission td:focus-within {
box-shadow: inset 0 0 0 2px #1e8e3e;
}
#itemsTable tbody tr:hover { box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.035); }
/* Видимі лінії сітки (рядки й колонки) — те, про що йшлося окремо: не рамки
самих полів, а лінії самої таблиці, щоб рядки/колонки читались як смуги,
як у Екселі. Загальне правило (th, td { border-bottom }) дає лише нижню
лінію — тут повна рамка з усіх боків, помітнішого кольору. */
#itemsTable th, #itemsTable td {
border: 1px solid #d1d5db;
}
#itemsTable, #itemsTable th, #itemsTable td, #itemsTable input, #itemsTable select {
font-family: Calibri, 'Segoe UI', Arial, sans-serif;
/* Те саме, що й у проценці: "11" в Екселі — пункти (pt), не px. 11pt ≈
14.7px при 96 DPI, звідси й відчуття "мілко" з попереднім font-size: 11px. */
font-size: 11pt;
}
/* Список замовлень — та ж логіка Calibri 11pt, що вже стоїть на позиціях і проценці. */
#ordersTable, #ordersTable th, #ordersTable td, #ordersTable input, #ordersTable select {
font-family: Calibri, 'Segoe UI', Arial, sans-serif;
font-size: 11pt;
}
/* Уся картка заказу (.order-detail — обгортка навколо renderOrderDetail) —
Calibri 11pt, як і в позиціях/проценці/списку заказів, окрім кнопок: font
на них НЕ успадковуємо (input/select/textarea за замовчуванням теж не
успадковують font від батьків у браузері — тому їх задаємо явно, а кнопки
свідомо повертаємо до звичного шрифту програми). #itemsTable вже має свої
власні (специфічніші) правила вище — вони пріоритетніші, тут нічого не ламають. */
.order-detail {
font-family: Calibri, 'Segoe UI', Arial, sans-serif;
font-size: 11pt;
}
.order-detail input, .order-detail select, .order-detail textarea, .order-detail label {
font-family: inherit;
font-size: inherit;
}
.order-detail button, .order-detail .btn {
font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
font-size: 13px;
}
/* Нумерація рядків зліва, як в Екселі — та й дає невеликий візуальний відступ
від краю картки/екрана, окремий від решти колонок за кольором. */
.item-row-number { text-align: center; color: #9ca3af; background: #f9fafb; user-select: none; }
/* Автокомпліт міста/відділення Нової пошти (npAutocomplete) — той самий вигляд,
що вже перевірений в ABRA BAZA. */
.np-ac-wrap { position: relative; }
.np-ac-box {
position: absolute; top: 100%; left: 0; right: 0; z-index: 60; background: #fff;
border: 1px solid #d1d5db; border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.14);
max-height: 240px; overflow-y: auto; margin-top: 2px;
}
.np-ac-item { padding: 7px 10px; font-size: 13px; cursor: pointer; border-bottom: 1px solid #f0f1f4; }
.np-ac-item:last-child { border-bottom: none; }
.np-ac-item:hover { background: #eef4ff; }
.np-ac-empty { padding: 8px 10px; font-size: 12px; color: #b0413e; }
.np-settings { background: #f6f8fc; border: 1px solid #e2e8f2; border-radius: 8px; padding: 14px; margin-top: 12px; }
.np-key-status { font-size: 11px; font-weight: 600; margin-left: 6px; }
.np-key-status.ok { color: #166534; }
.np-key-status.no { color: #991b1b; }
.finance-summary { display: flex; gap: 24px; margin-top: 12px; font-size: 13px; }
.finance-summary .label { color: #6b7280; font-size: 12px; }
.finance-summary .value { font-size: 16px; font-weight: 600; }
.estimate-note { color: #b45309; font-size: 12px; margin-top: 4px; }
/* max-width — щоб не розтягувалась на всю клітинку, а трималась розміру суми
(до 999 999 включно), навіть коли навколо є вільне місце. */
.payment-box { flex: 1; max-width: 115px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px 10px; text-align: center; }
.payment-box.payment-box-accent { border-color: #c4b5fd; }
.payment-box-label { font-size: 12px; color: #6b7280; }
.payment-box-value { font-size: 19px; font-weight: 700; margin-top: 2px; }
.back-link { background: none; border: none; color: #3b82f6; cursor: pointer; padding: 0; font-size: 13px; margin-bottom: 10px; }
.day-group { margin-bottom: 20px; }
.day-group h3 { margin-bottom: 6px; }
.day-group.completion-group { border: 2px solid #7c3aed; border-radius: 6px; padding: 10px; background: #f5f3ff; }
.day-group.completion-group h3 { color: #6d28d9; }
.msg { padding: 8px 12px; border-radius: 4px; margin-bottom: 12px; font-size: 13px; }
.msg.ok { background: #d1fae5; color: #065f46; }
.msg.err { background: #fee2e2; color: #991b1b; }