:root {
  --ink:#1B2A41; --ink-soft:#3A4B63; --rust:#C9622B;
  --paper:#F3EFE7; --paper-dim:#E7E1D3; --line:#D8D0BE; --ok:#3F7A57; --done:#6B7280;
  box-sizing:border-box;
}
* { box-sizing:border-box; }
html,body { height:100%; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Space Grotesk', system-ui, sans-serif;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
.mono { font-family:'JetBrains Mono', monospace; }
a { color:inherit; }

/* App shell */
.shell { display:flex; min-height:100vh; }
.rail {
  width:230px; flex:0 0 230px; background:var(--ink); color:var(--paper);
  padding:28px 20px; position:sticky; top:0; height:100vh; overflow-y:auto;
  display:flex; flex-direction:column;
}
.rail-title { font-size:1.05rem; font-weight:700; letter-spacing:.01em; }
.rail-sub { font-size:.75rem; color:#9DAFC7; margin-top:2px; }
.rail nav { margin-top:36px; display:flex; flex-direction:column; gap:4px; }
.rail nav a {
  padding:10px 12px; border-radius:6px; font-size:.92rem; text-decoration:none;
  color:#C9D3E2; transition:background .15s, color .15s;
}
.rail nav a.active { background:var(--rust); color:#fff; }
.rail nav a:not(.active):hover { background:#2A3B54; color:#fff; }
.rail .logout {
  margin-top:auto; font-size:.8rem; color:#9DAFC7; text-decoration:none; padding-top:24px;
}
.rail .logout:hover { color:#fff; }

main { flex:1; padding:36px 44px; max-width:1080px; }
header.page h1 { font-size:1.7rem; margin:0 0 4px; font-weight:700; }
header.page p { margin:0 0 28px; color:var(--ink-soft); font-size:.95rem; }
.sub-h { font-size:1.1rem; margin:32px 0 14px; }

/* Forms */
.toolbar { display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap; align-items:center; }
.toolbar select, .toolbar input[type=text] {
  font-family:inherit; font-size:.88rem; padding:9px 12px; border:1px solid var(--line);
  border-radius:6px; background:#fff; color:var(--ink);
}
.field { margin-bottom:14px; }
.field label { display:block; font-size:.8rem; color:var(--ink-soft); margin-bottom:5px; }
.field input, .field select, .field textarea {
  width:100%; font-family:inherit; font-size:.92rem; padding:10px 12px;
  border:1px solid var(--line); border-radius:6px; background:var(--paper);
}
.field textarea { resize:vertical; min-height:64px; }
.checkbox-line { display:flex; align-items:center; gap:8px; font-size:.88rem; padding:4px 0; }
.checkbox-line input { width:auto; }
.field-hint { font-size:.72rem; color:var(--ink-soft); margin-top:5px; }

.btn {
  display:inline-block; cursor:pointer; font-family:inherit; font-size:.9rem; font-weight:600;
  padding:10px 18px; border-radius:6px; background:var(--ink); color:#fff; border:none;
  text-decoration:none; text-align:center;
}
.btn:hover { background:var(--ink-soft); }
.btn.ghost { background:transparent; color:var(--ink); border:1px solid var(--line); margin-left:8px; }
.btn.ghost:hover { background:var(--paper-dim); }

.submit-card { background:#fff; border-radius:10px; padding:26px; max-width:520px; margin-bottom:10px; }

.alert { background:#FDEDE2; color:var(--rust); padding:11px 14px; border-radius:6px; font-size:.88rem; margin-bottom:18px; }
.alert.success { background:#EAF1E9; color:var(--ok); }

/* Tables */
table { width:100%; border-collapse:collapse; background:#fff; border-radius:8px; overflow:hidden; }
thead th {
  text-align:left; font-size:.72rem; color:var(--ink-soft); font-weight:600;
  padding:11px 14px; border-bottom:1px solid var(--line); background:var(--paper-dim);
}
tbody td { padding:12px 14px; border-bottom:1px solid var(--line); font-size:.87rem; vertical-align:top; }
tbody tr:last-child td { border-bottom:none; }
tbody tr:hover { background:#FBF9F4; }
.note-sub { font-size:.74rem; color:var(--ink-soft); margin-top:3px; }
.empty { text-align:center; padding:40px 20px; color:var(--ink-soft); }

.tag { display:inline-block; padding:3px 9px; border-radius:20px; font-size:.72rem; font-weight:600; }
.tag.approval { background:#FFF3C4; color:#8A5A00; border:1px dashed #D9A400; }
.tag.new { background:#FDEDE2; color:var(--rust); }
.tag.progress { background:#FFF4D6; color:#8A6200; }
.tag.payment { background:#F1E6F7; color:#6B3D8C; }
.tag.ordered { background:#E3ECF8; color:#2F5B94; }
.tag.delivered { background:#EAF1E9; color:var(--ok); }
.tag.done { background:#EDEDEE; color:var(--done); }
.tag.rejected { background:#F6E1E1; color:#A33A3A; }
.tag.cancelled { background:#EDEDEE; color:var(--done); text-decoration:line-through; }
header.page h1 .tag { vertical-align:middle; font-size:.8rem; margin-left:6px; }

.rowbtn {
  background:none; border:none; cursor:pointer; font-size:.78rem; color:var(--ink-soft);
  text-decoration:underline; text-underline-offset:2px; padding:0; font-family:inherit;
}
.rowbtn:hover { color:var(--rust); }

/* Auth pages */
.auth-body { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.auth-card {
  background:#fff; border-radius:10px; padding:34px; width:100%; max-width:360px;
}
.auth-card h1 { margin:0 0 4px; font-size:1.4rem; }
.auth-sub { color:var(--ink-soft); font-size:.9rem; margin:0 0 22px; }

/* ---------- v2 ---------- */
.muted { color:var(--ink-soft); }
.small { font-size:.8rem; }
.nowrap { white-space:nowrap; }
.right { text-align:right; }
.back { margin:0 0 10px; font-size:.85rem; }
.back a { color:var(--ink-soft); text-decoration:none; }
.back a:hover { color:var(--rust); }
a.plain { text-decoration:none; font-weight:500; }
a.plain:hover { color:var(--rust); }
form.inline { display:inline; margin-left:8px; }
.btn.small { padding:7px 12px; font-size:.82rem; }
.btn.danger { background:#A33A3A; }
.btn.danger:hover { background:#872D2D; }
.btn.ghost + .btn.ghost { margin-left:8px; }

.submit-card.wide { max-width:none; margin-bottom:18px; }
details.submit-card > summary { cursor:pointer; list-style:none; }
details.submit-card > summary::-webkit-details-marker { display:none; }
.card-summary { font-weight:600; font-size:1rem; }
details[open] > .card-summary { margin-bottom:18px; }
.danger-zone .card-summary { color:#A33A3A; font-size:.9rem; }
.card-title { font-size:1rem; margin:0 0 16px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.checkbox-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:0 12px; }

/* Позиції */
.items-editor { background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:10px; }
.items-head, .item-row { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,1fr) minmax(0,1fr) 28px; gap:8px; align-items:center; }
.items-editor[data-with-price="1"] .items-head, .items-editor[data-with-price="1"] .item-row { grid-template-columns:minmax(0,3fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr) 28px; }
.items-head { font-size:.72rem; color:var(--ink-soft); padding:0 2px 6px; }
.item-row { margin-bottom:8px; }
.item-row input { width:100%; font-family:inherit; font-size:.9rem; padding:9px 10px; border:1px solid var(--line); border-radius:6px; background:#fff; }
.item-del { font-size:.9rem; text-decoration:none; }
.items-table { margin-bottom:10px; }
.items-table tfoot td { padding:10px 14px; background:var(--paper-dim); font-size:.9rem; }

/* Картка фактів заявки */
.facts { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:10px; margin-bottom:18px; }
.facts > div { background:#fff; border-radius:8px; padding:12px 14px; font-size:.9rem; }
.facts span { display:block; font-size:.72rem; color:var(--ink-soft); margin-bottom:3px; }
.note-box { background:#fff; border-left:3px solid var(--rust); border-radius:6px; padding:12px 16px; font-size:.9rem; margin-bottom:10px; }

/* Прострочення */
tr.overdue td:first-child { box-shadow:inset 3px 0 0 #C23B3B; }
.overdue-label { display:inline-block; font-size:.7rem; font-weight:600; color:#C23B3B; text-transform:uppercase; letter-spacing:.03em; }
div.overdue-label { display:block; margin-top:2px; }
tr.inactive td { color:var(--ink-soft); }
table.clickable tbody tr[data-href] { cursor:pointer; }

/* Фільтри, вкладки, сторінки */
.quick-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.quick-tabs a { text-decoration:none; font-size:.85rem; padding:7px 12px; border-radius:20px; background:#fff; border:1px solid var(--line); }
.quick-tabs a b { font-weight:600; margin-left:4px; color:var(--ink-soft); }
.quick-tabs a.active { background:var(--ink); color:#fff; border-color:var(--ink); }
.quick-tabs a.active b { color:#C9D3E2; }
.quick-tabs a.warn b { color:#C23B3B; }
.toolbar input[type=search], .toolbar input[type=date] { font-family:inherit; font-size:.88rem; padding:9px 12px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--ink); }
.toolbar input[type=search] { min-width:240px; flex:1; }
.toolbar .inline-date { font-size:.82rem; color:var(--ink-soft); display:flex; align-items:center; gap:6px; }
.toolbar .btn.ghost { margin-left:0; }
.toolbar-row { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.toolbar-row .toolbar { margin:0; }
.pager { display:flex; gap:16px; align-items:center; justify-content:center; margin:18px 0; font-size:.88rem; }
.pager a { text-decoration:none; padding:7px 12px; border:1px solid var(--line); border-radius:6px; background:#fff; }

/* Коментарі й файли */
.comments { max-width:760px; }
.comment { background:#fff; border-radius:8px; padding:12px 16px; margin-bottom:10px; }
.comment.staff { border-left:3px solid var(--ink); }
.comment-meta { font-size:.75rem; color:var(--ink-soft); margin-bottom:4px; }
.comment-body { font-size:.9rem; line-height:1.45; word-wrap:break-word; }
.comment-form { display:flex; gap:10px; align-items:flex-end; margin-top:10px; }
.comment-form textarea { flex:1; font-family:inherit; font-size:.9rem; padding:10px 12px; border:1px solid var(--line); border-radius:6px; min-height:56px; resize:vertical; }
.file-list { list-style:none; padding:0; margin:0 0 12px; }
.file-list li { background:#fff; border-radius:6px; padding:9px 14px; margin-bottom:6px; font-size:.88rem; word-break:break-word; }
.upload-form { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.upload-form .btn.ghost { margin-left:0; }
.upload-form .field-hint { width:100%; }
table.history td { font-size:.84rem; }
.log-list { font-size:.85rem; padding-left:18px; }


/* ---------- Текст заявки ---------- */
.body-box { background:#fff; border-radius:8px; padding:14px 18px; font-size:.95rem; line-height:1.55; white-space:normal; margin-bottom:10px; max-width:760px; }
.body-more { color:var(--ink-soft); font-size:.78rem; margin:2px 0; }

/* ---------- Задачі ---------- */
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0 16px; }
.btn-row { display:flex; flex-wrap:wrap; gap:8px; }
.btn-row .btn.ghost { margin-left:0; }
.btn.danger-text { color:#A33A3A; }
.nav-badge { display:inline-block; min-width:20px; padding:1px 6px; border-radius:10px; background:#fff; color:var(--rust); font-size:.72rem; font-weight:700; text-align:center; margin-left:4px; }
.rail nav a.active .nav-badge { color:var(--rust); }
.prio { display:inline-block; font-size:.72rem; font-weight:600; padding:2px 8px; border-radius:4px; }
.prio.high { background:#F6E1E1; color:#A33A3A; }
.prio.normal { color:var(--ink-soft); }
.prio.low { color:var(--done); }
header.page h1 .prio { vertical-align:middle; font-size:.75rem; margin-left:4px; }
.tag.t-new { background:#FDEDE2; color:var(--rust); }
.tag.t-progress { background:#FFF4D6; color:#8A6200; }
.tag.t-review { background:#E3ECF8; color:#2F5B94; }
.tag.t-done { background:#EAF1E9; color:var(--ok); }
.tag.t-cancelled { background:#EDEDEE; color:var(--done); text-decoration:line-through; }

@media (max-width:720px){
  .shell { flex-direction:column; }
  .rail { width:100%; flex:none; height:auto; position:relative; padding:16px 18px; }
  .rail nav { flex-direction:row; overflow-x:auto; margin-top:14px; }
  .rail .logout { position:absolute; top:16px; right:18px; padding:0; margin:0; }
  main { padding:22px 18px; }
  table, thead, tbody, tr, td, th { display:block; }
  thead { display:none; }
  tbody tr { margin-bottom:10px; border:1px solid var(--line); border-radius:8px; padding:6px 4px; }
  tbody td { border:none; padding:6px 14px; }
  tfoot { display:block; }
  .grid-2, .grid-3 { grid-template-columns:1fr; }
  .items-head { display:none; }
  .item-row { grid-template-columns:1fr 1fr 28px; }
  .items-editor[data-with-price="1"] .item-row { grid-template-columns:1fr 1fr 1fr 28px; }
  .item-row { padding-bottom:8px; border-bottom:1px dashed var(--line); }
  .item-row input:first-child { grid-column:1 / -1; }
  .toolbar input[type=search] { min-width:0; width:100%; }
  .comment-form { flex-direction:column; align-items:stretch; }
  .btn.ghost { margin-left:0; margin-top:8px; }
}

/* Прев'ю фото і перегляд на весь екран */
.thumbs { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; }
.thumb { display:block; width:110px; height:110px; border-radius:8px; overflow:hidden; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.12); }
.thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .15s; }
.thumb:hover img { transform:scale(1.05); }
.file-list audio { display:block; margin-top:6px; max-width:100%; height:36px; }
.lightbox { position:fixed; inset:0; background:rgba(15,20,30,.92); display:flex; align-items:center; justify-content:center; z-index:1000; }
.lightbox img { max-width:92vw; max-height:84vh; border-radius:4px; box-shadow:0 4px 30px rgba(0,0,0,.5); }
.lightbox .lb-cap { position:absolute; bottom:14px; left:0; right:0; text-align:center; color:#dde; font-size:.85rem; padding:0 60px; }
.lightbox button { position:absolute; background:rgba(255,255,255,.12); color:#fff; border:0; border-radius:50%; width:46px; height:46px; font-size:1.6rem; line-height:1; cursor:pointer; }
.lightbox button:hover { background:rgba(255,255,255,.25); }
.lightbox .lb-close { top:14px; right:14px; }
.lightbox .lb-prev { left:14px; top:50%; transform:translateY(-50%); }
.lightbox .lb-next { right:14px; top:50%; transform:translateY(-50%); }
.lightbox .lb-open { top:14px; right:70px; font-size:1rem; width:auto; border-radius:23px; padding:0 16px; text-decoration:none; color:#fff; background:rgba(255,255,255,.12); display:flex; align-items:center; position:absolute; height:46px; }
@media (max-width:640px) { .thumb { width:84px; height:84px; } .lightbox .lb-prev, .lightbox .lb-next { top:auto; bottom:50px; transform:none; } }

.page-with-action { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.danger-zone { margin:32px 0 8px; border:1px solid #e3c2c2; border-radius:8px; background:#fff; padding:12px 16px; }
.danger-zone summary { cursor:pointer; color:#A33A3A; font-weight:600; font-size:.9rem; }
.danger-zone form { margin-top:10px; }

/* Пошуковий вибір (select[data-combo]) */
.combo { position:relative; }
.combo input { width:100%; padding-right:32px; }
.combo-clear { position:absolute; right:6px; top:50%; transform:translateY(-50%); border:0; background:none; font-size:18px; color:var(--ink-soft); cursor:pointer; padding:2px 6px; }
.combo-list { position:absolute; z-index:30; left:0; right:0; top:calc(100% + 2px); background:#fff; border:1px solid #d9d2c3; border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,.12); max-height:280px; overflow-y:auto; }
.combo-item { padding:8px 12px; cursor:pointer; font-size:.92rem; }
.combo-item.on, .combo-item:hover { background:#f3ede2; }
.combo-empty { padding:8px 12px; color:var(--ink-soft); font-size:.88rem; }

/* Український календар */
.uadate { position:relative; display:inline-block; width:100%; }
.inline-date .uadate { width:auto; }
.uadate input[type=text] { width:100%; }
.inline-date .uadate input[type=text] { width:120px; }
.uadate-pop { position:absolute; z-index:40; top:calc(100% + 4px); left:0; background:#fff; border:1px solid #d9d2c3; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.14); padding:10px; width:260px; }
.uadate-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.uadate-head b { font-size:.92rem; }
.uadate-head button { border:0; background:#f3ede2; border-radius:6px; width:30px; height:28px; font-size:18px; cursor:pointer; }
.uadate-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:2px; text-align:center; }
.uadate-grid .dow { font-size:.72rem; color:var(--ink-soft); padding:4px 0; }
.uadate-grid .dow.we { color:#A33A3A; }
.uadate-grid button { border:0; background:none; border-radius:6px; padding:6px 0; font:inherit; font-size:.85rem; cursor:pointer; }
.uadate-grid button:hover { background:#f3ede2; }
.uadate-grid button.today { outline:1px solid var(--rust); }
.uadate-grid button.sel { background:var(--rust); color:#fff; }
.uadate-foot { display:flex; justify-content:space-between; margin-top:8px; }
.uadate-foot button { border:0; background:none; color:var(--rust); font:inherit; font-size:.82rem; cursor:pointer; padding:4px 6px; }

/* Розділення заявки на частини */
.split-table td, .split-table th { padding:8px 10px; border-bottom:1px solid #eee; text-align:left; }
.split-table .c, .split-table th:not(:first-child) { text-align:center; width:56px; }
.split-table input[type=radio] { width:18px; height:18px; }
.split-part { border:1px solid #e6e0d6; border-radius:10px; padding:10px 14px 4px; margin:0 0 12px; }
.split-part legend { font-weight:700; padding:0 6px; }
.parts-box { border:1px solid #e6e0d6; border-radius:10px; padding:12px 14px; margin:0 0 16px; background:#fff; }
.parts-box h3 { margin:0 0 8px; font-size:1rem; }
.parts-box ul { list-style:none; margin:0; padding:0; }
.parts-box li { padding:8px 0; border-top:1px solid #f0ebe3; display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center; }
.parts-box li:first-child { border-top:0; }
.parts-box .pno { font-weight:700; }
.parts-box .pbody { flex-basis:100%; color:#555; font-size:.88rem; white-space:pre-line; }
.part-of { display:inline-block; background:#E3ECF8; color:#2F5B94; border-radius:6px; padding:2px 8px; font-size:.8rem; margin-left:6px; }

/* Акти звірки */
.recon-bar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 12px; }
.recon-bar select, .recon-bar input[type=search] { width:auto; min-width:180px; flex:0 1 auto; }
.recon-bar input[type=search] { flex:1 1 220px; }
.recon-send { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:12px 0; }
.recon-send .alert { flex-basis:100%; margin:0; }
.recon-send .btn { width:auto; }
.recon-table td, .recon-table th { padding:7px 10px; vertical-align:middle; }
.recon-table .c { text-align:center; }
.recon-table input[type=checkbox] { width:17px; height:17px; }
.recon-table .em { width:100%; min-width:170px; padding:5px 8px; font-size:.84rem; border:1px solid transparent; background:transparent; border-radius:6px; }
.recon-table .em:hover, .recon-table .em:focus { border-color:var(--line); background:#fff; }
.recon-table .em.saved { border-color:#2e7d32; background:#EAF1E9; }
.recon-table tr.not-ours td { color:var(--ink-soft); }
.rc { display:inline-block; padding:4px 10px; border-radius:6px; font-size:.8rem; font-weight:600; white-space:nowrap; }
.rc.green { background:#2fa84f; color:#fff; }
.rc.yellow { background:#f5b800; color:#3b2a00; }
.rc.red { background:#e53935; color:#fff; }
.recon-table .err { color:#c62828; font-size:.78rem; }
.x-btn { border:0; background:none; color:var(--ink-soft); font-size:18px; cursor:pointer; padding:0 4px; }
.x-btn:hover { color:#c62828; }
.new-period { position:relative; }
.new-period > summary { list-style:none; cursor:pointer; }
.new-period > summary::-webkit-details-marker { display:none; }
.new-period[open] > form { position:absolute; right:0; top:calc(100% + 8px); z-index:20; width:340px; box-shadow:0 8px 30px rgba(0,0,0,.15); }
.recon-bar select, .recon-bar input[type=search] { padding:9px 10px; border:1px solid var(--line); border-radius:8px; background:#fff; font:inherit; font-size:.88rem; }
.recon-bar .btn { width:auto; }
.co-tabs { display:flex; gap:0; margin:0 0 12px; border-bottom:2px solid var(--line); }
.co-tabs a { padding:10px 18px; font-weight:700; color:var(--ink-soft); text-decoration:none; border-bottom:3px solid transparent; margin-bottom:-2px; }
.co-tabs a.active { color:var(--ink); border-bottom-color:var(--rust); }
.import-upload { margin:6px 0 4px; }
.import-upload > summary { cursor:pointer; font-weight:600; color:var(--ink); padding:6px 0; }
.import-upload form { display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:10px 0; }
.import-upload form .btn { width:auto; }
.import-upload form p { flex-basis:100%; margin:0; }
.import-box { background:#fff; border:2px solid var(--rust); border-radius:10px; padding:14px 16px; margin:10px 0 14px; }
.import-box h3 { margin:0 0 8px; font-size:1rem; }
.import-stats { margin:0 0 8px; padding-left:18px; }
.import-box details summary { cursor:pointer; font-size:.88rem; margin:4px 0; }
.import-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:10px; }
.import-actions .btn { width:auto; }
.import-actions .checkbox-line { flex-basis:100%; }
.tpl-form { border-top:1px solid var(--line); padding-top:12px; margin-top:12px; }
.tpl-form h4 { margin:0 0 10px; font-size:.92rem; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* Перевірка пошти: відповіді й повернення */
.mailbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px 14px; margin:10px 0 12px; font-size:.9rem; }
.mailbar .dot { width:9px; height:9px; border-radius:50%; background:#2fa84f; display:inline-block; margin-right:5px; }
.mailbar .dot.bad { background:#e53935; }
.mailbar .btn { width:auto; }
.mailbar .err { color:#b3261e; font-size:.82rem; }
.pill { display:inline-block; padding:3px 10px; border-radius:20px; font-size:.8rem; font-weight:600; text-decoration:none; }
.pill.new { background:#e3ecf8; color:#2f5b94; }
.pill.bad { background:#fbe3e3; color:#b3261e; }
.quick-tabs a.tab-reply { border-color:#9db8e0; }
.quick-tabs a.tab-bounce { border-color:#e8a6a6; }
.ev { margin-top:6px; border-radius:8px; padding:7px 9px; font-size:.8rem; line-height:1.4; max-width:320px; }
.ev.bounce { background:#fdecec; border-left:3px solid #e53935; color:#7a1d17; }
.ev.reply { background:#eaf1fb; border-left:3px solid #2f5b94; color:#1f3d66; }
.ev q { font-style:italic; }
.ev .tech { color:#9a5a55; font-size:.72rem; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ev .acts { margin-top:6px; display:flex; flex-wrap:wrap; gap:6px; }
.ev .btn { width:auto; padding:4px 10px; font-size:.76rem; }
.recon-table .em.bad { border-color:#e53935; background:#fff; color:#b3261e; }

/* Сортування кліком по заголовку колонки */
thead th.sortable a { color:inherit; text-decoration:none; white-space:nowrap; display:inline-block; }
thead th.sortable a:hover { color:var(--ink); text-decoration:underline; }
thead th.sortable .arr { opacity:.45; font-size:.9em; }
thead th.sortable.on a { color:var(--rust); }
thead th.sortable.on .arr { opacity:1; }

/* Вибір об'єкта: список + будинок */
.obj-pick { display:flex; gap:8px; }
.obj-pick select { flex:0 0 46%; min-width:0; }
.obj-pick input { flex:1 1 auto; min-width:0; }

/* Дата + час доставки */
.due-pick { display:flex; gap:8px; }
.due-pick > * { min-width:0; }
.due-pick > :first-child { flex:1 1 60%; }
.due-pick input.time24 { flex:0 0 150px; }
.due-pick input.time24.bad { border-color:#e53935; }

/* Перевірка Telegram-сповіщень */
.tg-check { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:14px 0 12px; }
.tg-check .btn { width:auto; }
.tgc { font-size:.78rem; margin-top:2px; }
.tgc.ok { color:var(--ok); } .tgc.bad { color:#b3261e; font-weight:600; } .tgc.none { color:var(--ink-soft); }

/* ---- Бетон / розчин: позиції, прайс, приймання, звіт ---- */
.r { text-align:right; }
.table-scroll { overflow-x:auto; }
.seg-radio { display:inline-flex; background:#fff; border:1px solid var(--line); border-radius:8px; padding:3px; gap:2px; }
.seg-radio label { margin:0; cursor:pointer; }
.seg-radio input { position:absolute; opacity:0; pointer-events:none; }
.seg-radio span { display:block; padding:8px 16px; border-radius:6px; font-size:.9rem; color:var(--ink); }
.seg-radio input:checked + span { background:var(--ink); color:#fff; font-weight:600; }
.seg-radio input:focus-visible + span { outline:2px solid var(--rust); }
.concrete-box { border:1px solid var(--line); border-radius:8px; padding:14px 16px 10px; margin-bottom:14px; background:#FBF9F4; }
.track-box { background:#FBF9F4; border:1px solid var(--line); border-radius:8px; padding:10px 14px; }

.pos-box { border:1px solid var(--line); border-radius:8px; padding:14px 16px; margin-bottom:16px; background:#FBF9F4; }
.pos-box-head { display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; }
.pos-box h3 { margin:0 0 4px; font-size:1rem; }
.pos-accept-info { margin:10px 0 0; color:var(--ink-soft); }
.pos-row { display:flex; gap:8px; align-items:flex-end; padding:8px 0; border-top:1px solid #EEE8DC; flex-wrap:wrap; }
.pos-row:first-child { border-top:0; }
.pos-mark { flex:1 1 220px; min-width:200px; display:flex; flex-direction:column; gap:6px; }
.pos-mark select, .pos-mark input { width:100%; }
.pos-num { flex:0 0 112px; margin:0; }
.pos-num span, .pos-sum span { display:block; font-size:.68rem; color:var(--ink-soft); margin-bottom:3px; white-space:nowrap; }
.pos-num input { width:100%; text-align:right; }
.pos-num input.diff { border-color:var(--rust); background:#FDF1E9; }
.pos-sum { flex:0 0 110px; text-align:right; padding-bottom:9px; }
.pos-sum b { font-variant-numeric:tabular-nums; }
.pos-row .pos-del { margin-bottom:8px; }
.pos-foot { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:8px; }
.pos-total { margin-left:auto; font-weight:600; font-size:.88rem; font-variant-numeric:tabular-nums; }
.pos-editor:not(.staff) .pos-num { flex-basis:130px; }

.pos-table { max-width:760px; background:#fff; border-radius:8px; margin-bottom:10px; }
.pos-table td, .pos-table th { font-variant-numeric:tabular-nums; }
.pos-table tfoot td { font-weight:700; border-top:2px solid var(--ink); }
.pos-diff { color:var(--rust); font-weight:600; font-size:.82rem; }

.accept-box { max-width:760px; margin-bottom:14px; }
.accept-box details > summary { list-style:none; display:inline-block; cursor:pointer; }
.accept-box details > summary::-webkit-details-marker { display:none; }
.accept-done { margin:0 0 8px; color:var(--ok); font-weight:600; }
.accept-form { background:#fff; border-radius:8px; padding:14px 16px; margin-top:10px; }
.accept-row { display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid #EEE8DC; margin:0; }
.accept-row:first-of-type { border-top:0; }
.accept-row > span { flex:1; font-weight:600; }
.accept-row small { display:block; font-weight:400; color:var(--ink-soft); font-size:.76rem; }
.accept-row input { width:110px; text-align:right; font-size:1rem; }
.accept-row em { font-style:normal; color:var(--ink-soft); }

.price-add { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.price-add .field { margin-bottom:0; flex:0 0 200px; }
.price-add .field.grow { flex:1 1 280px; }
.price-table tr.off td { opacity:.55; }
.price-edit > summary { list-style:none; cursor:pointer; display:inline-block; }
.price-edit > summary::-webkit-details-marker { display:none; }
.price-edit[open] { background:#FBF9F4; border:1px solid var(--line); border-radius:8px; padding:10px 12px; min-width:300px; }
.price-hist { font-size:.8rem; color:var(--ink-soft); margin-top:8px; display:flex; flex-direction:column; gap:2px; }

.kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; margin:0 0 16px; }
.kpi { background:#fff; border-radius:8px; padding:12px 14px; }
.kpi span { display:block; font-size:.72rem; color:var(--ink-soft); margin-bottom:2px; }
.kpi b { font-size:1.15rem; font-variant-numeric:tabular-nums; }
.kpi small { display:block; color:var(--ink-soft); font-size:.74rem; }
.rep-table td, .rep-table th { font-variant-numeric:tabular-nums; }
.rep-table tr.total td { font-weight:700; border-top:2px solid var(--ink); background:#FBF9F4; }
.rep-table td.nofact { color:var(--ink-soft); }
.rep-warn { background:#FFF3C4; border:1px dashed #D9A400; color:#6b4e00; border-radius:8px; padding:8px 12px; font-size:.86rem; margin:0 0 14px; }
@media (max-width:640px) {
  .pos-num { flex:1 1 40%; }
  .pos-sum { flex:1 1 40%; text-align:left; }
  .price-add .field { flex:1 1 45%; }
}
.pos-editor input[type=text], .pos-editor select, .accept-row input {
  font-family:inherit; font-size:.9rem; padding:9px 10px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--ink);
}
.pos-editor select { padding-right:6px; }
.field .pos-num span { text-transform:none; }
.field .pos-editor label.pos-num { margin-bottom:0; }
.rep-table td.r, .rep-table th.r, .price-table td.r, .price-table th, .pos-table td.r { white-space:nowrap; }
.price-table td:first-child { white-space:nowrap; }
.rep-table td { vertical-align:top; }
.kpi b { white-space:nowrap; font-size:1.05rem; }
@media (max-width:640px) { .price-table td:first-child { white-space:normal; min-width:150px; } }
/* На телефоні ці таблиці лишаються таблицями (гортаються вбік), а не розсипаються на картки. */
@media (max-width:720px) {
  table.rep-table, table.pos-table, table.price-table { display:table; }
  table.rep-table { min-width:560px; } table.price-table { min-width:440px; }
  .rep-table thead, .pos-table thead, .price-table thead { display:table-header-group; }
  .rep-table tbody, .pos-table tbody, .price-table tbody { display:table-row-group; }
  .pos-table tfoot { display:table-footer-group; }
  .rep-table tr, .pos-table tr, .price-table tr { display:table-row; margin:0; border:0; border-radius:0; padding:0; }
  .rep-table th, .pos-table th, .price-table th, .rep-table td, .pos-table td, .price-table td { display:table-cell; padding:8px 10px; border-bottom:1px solid var(--line); font-size:.82rem; }
  .pos-table tfoot td { border-bottom:0; }
  .price-edit[open] { min-width:260px; }
}
.rep-table td.gname { min-width:170px; }
@media (max-width:720px) { table.rep-table { min-width:600px; } }

.pos-num.pos-time { flex:0 0 84px; }
.pos-num.pos-time input { text-align:center; }
.pos-editor input.bad { border-color:#C23B3B; }
@media (max-width:640px) { .pos-num.pos-time { flex:1 1 40%; } }

.pos-delivery { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-top:10px; padding-top:10px; border-top:1px solid #EEE8DC; }
.pos-delivery label { margin:0; flex:0 0 190px; }
.pos-delivery label span { display:block; font-size:.72rem; color:var(--ink-soft); margin-bottom:3px; }
.pos-delivery input[type=text] { width:100%; text-align:right; font-family:inherit; font-size:.9rem; padding:9px 10px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--ink); }
.pos-delivery > span { flex:1 1 260px; padding-bottom:8px; }
.delivery-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:10px 14px; }
.delivery-grid .field { margin-bottom:0; }

/* «Доставка буде» — планова дата доставки від менеджера */
.eta-sub { display:inline-block; margin-top:3px; font-size:.78rem; font-weight:600; color:#1F7A4D; white-space:nowrap; }
div.eta-sub { display:block; }
.facts > div.eta-fact { background:#E8F5EC; font-weight:600; color:#14532D; }
.facts > div.eta-fact span { color:#1F7A4D; }
.eta-field .due-pick { max-width:520px; }

/* Оплата: позначки «Подано на оплату» / «Оплачено» (окремо від статусу) */
.pay-chip { display:inline-block; margin:3px 0 0 4px; padding:2px 8px; border-radius:999px; font-size:.72rem; font-weight:600; white-space:nowrap; vertical-align:middle; }
.pay-chip.sent { background:#F1E6F7; color:#6B3D8C; }
.pay-chip.paid { background:#E3F4E8; color:#1F7A4D; }
.pay-chip.warn { background:#FDECEC; color:#B42323; }
td .pay-chip { display:block; width:max-content; margin-left:0; }
h1 .pay-chip { font-size:.8rem; }
.pay-box { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; background:#fff; border-radius:10px; padding:12px 16px; margin-bottom:16px; }
.pay-box.warn { box-shadow:inset 3px 0 0 #C23B3B; }
.pay-box form { display:flex; align-items:center; gap:8px; margin:0; }
.pay-title { font-weight:700; font-size:.9rem; }
.pay-btn { font:inherit; font-size:.88rem; font-weight:600; padding:9px 14px; border-radius:8px; border:1.5px solid #CFC8BA; background:#fff; color:var(--ink); cursor:pointer; }
.pay-btn:hover { border-color:#8E8676; }
.pay-btn.sent.on { background:#6B3D8C; border-color:#6B3D8C; color:#fff; }
.pay-btn.paid.on { background:#1F7A4D; border-color:#1F7A4D; color:#fff; }
.pay-when { font-size:.76rem; color:var(--ink-soft); }
.pay-note { font-size:.8rem; }
.pay-box.warn .pay-note { color:#B42323; font-weight:600; }

/* Реєстр оплат (тестова версія) */
.test-tag { display:inline-block; font-size:.7rem; font-weight:600; background:#FFF1C9; color:#7A5B00; border-radius:999px; padding:2px 9px; vertical-align:middle; margin-left:8px; letter-spacing:0; }
.nav-badge.test { background:#FFF1C9; color:#7A5B00; font-weight:600; font-size:.64rem; }
.rail nav a.active .nav-badge.test { color:#7A5B00; }
.reg-upload { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
.reg-file { display:flex; align-items:center; gap:14px; background:#fff; border-radius:10px; padding:14px 18px; margin-bottom:14px; flex-wrap:wrap; }
.reg-file b { font-size:.95rem; }
.reg-ico { font-size:1.5rem; }
.reg-table td { vertical-align:top; padding:12px 14px; }
.reg-sup { font-weight:700; }
.reg-sum { font-weight:600; white-space:nowrap; }
.reg-com { font-size:.78rem; color:var(--ink-soft); margin-top:3px; max-width:360px; }
.reg-no, .reg-why { font-size:.76rem; color:var(--ink-soft); margin-top:2px; }
.reg-req { font-size:.86rem; }
.reg-req + .reg-req { margin-top:8px; }
.reg-req a, .reg-req b { font-family:ui-monospace, Menlo, Consolas, monospace; font-weight:600; }
.reg-req small { display:block; color:var(--ink-soft); font-size:.76rem; margin-top:2px; }
.reg-pick label { display:flex; gap:8px; align-items:flex-start; padding:7px 8px; border-radius:6px; cursor:pointer; }
.reg-pick label.sel { background:#F3EEF8; }
.reg-pick label input { margin-top:3px; }
.reg-pick .best { font-size:.68rem; font-weight:600; color:#6B3D8C; background:#F1E6F7; border-radius:999px; padding:1px 7px; white-space:nowrap; margin-left:auto; }
.reg-pick-btns { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.reg-pick-btns .btn.ghost { margin-left:0; }
.reg-alias { margin-top:6px; max-width:420px; }
.res { display:inline-block; font-size:.76rem; font-weight:600; border-radius:999px; padding:3px 10px; white-space:nowrap; }
.res.ok { background:#E3F4E8; color:#1F7A4D; } .res.pick { background:#F1E6F7; color:#6B3D8C; } .res.none { background:#EEE9DF; color:#6B6558; }
.res.skip { background:#EEE9DF; color:#9A927F; } .res.bad { background:#FDECEC; color:#B42323; }
.reg-table tr.dim td { opacity:.62; }
.reg-foot { display:flex; align-items:center; gap:16px; margin-top:16px; flex-wrap:wrap; }
.reg-foot form { margin:0; }
.btn[disabled] { opacity:.45; cursor:default; }
.inline-form { display:inline; margin:0; }
.linklike { background:none; border:0; padding:0; font:inherit; font-size:.76rem; color:var(--ink); text-decoration:underline; cursor:pointer; }
@media (max-width:720px) { .reg-table { display:block; overflow-x:auto; } .reg-table td { min-width:150px; } }

/* Сторінка на всю ширину екрана + колонки, ширину яких користувач тягне сам */
main.wide { max-width:none; }
table[data-resize] thead th { position:relative; }
table[data-resize].cols-fixed { table-layout:fixed; }
table[data-resize].cols-fixed td, table[data-resize].cols-fixed th { overflow:hidden; overflow-wrap:anywhere; }
table[data-resize].cols-fixed td.nowrap { white-space:normal; }
.col-grip { position:absolute; top:0; right:0; width:10px; height:100%; cursor:col-resize; z-index:2; touch-action:none; user-select:none; }
.col-grip::after { content:''; position:absolute; top:22%; bottom:22%; right:0; width:1px; background:#CFC8BA; }
.col-grip:hover::after, .col-grip.drag::after { width:3px; background:var(--rust); top:0; bottom:0; }
body.col-resizing { cursor:col-resize; user-select:none; }
.col-hint { color:var(--ink-soft); }
.col-hint button { background:none; border:0; padding:0; font:inherit; color:var(--ink); text-decoration:underline; cursor:pointer; }
@media (max-width:720px) { .col-grip, .col-hint { display:none; } }

/* Оновлення СРМ */
.upd-code { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; margin-top:14px; }
.upd-code label { display:flex; flex-direction:column; gap:4px; font-size:.82rem; color:var(--ink-soft); }
.upd-code input { font:inherit; font-size:1.3rem; letter-spacing:.3em; width:10em; padding:8px 12px; border:1px solid var(--line); border-radius:6px; }