:root {
  --ink: #1f2933;
  --muted: #6b7682;
  --faint: #9aa3ad;
  --paper: #f4f5f7;
  --surface: #ffffff;
  --line: #e1e4e8;
  --line-strong: #cfd4da;
  --steel: #2f3a45;
  --accent: #2f3a45;
  --ok: #2d7a4f;
  --warn: #8a5a12;
  --warn-bg: #fdf7ec;
  --danger: #b3261e;
  --radius: 6px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: #2b5f9e; }
:focus-visible { outline: 2px solid #4a7bd0; outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* шапка */
.env-test { background: #f3c64b; color: var(--ink); text-align: center; font-size: 12px; padding: 1px; }
.top { background: var(--steel); color: #fff; }
.top-in { max-width: 1040px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 16px; min-height: 48px; }
.brand { font-weight: 600; color: #fff; text-decoration: none; font-size: 15px; }
.nav { display: flex; align-items: center; gap: 2px; flex: 1; }
.nav a { white-space: nowrap; color: #cfd6dd; text-decoration: none; padding: 6px 10px; border-radius: var(--radius); font-size: 14px; }
.nav a:hover { color: #fff; }
.nav a.on { color: #fff; background: rgba(255,255,255,.12); }
.who { margin-left: auto; font-size: 13px; color: #aeb7c0; white-space: nowrap; }
.who a { color: #fff; margin-left: 10px; padding: 0; background: none; }
.burger { display: none; }

main { max-width: 1040px; margin: 0 auto; padding: 18px 16px 48px; }
h1 { font-size: 20px; margin: 0 0 4px; font-weight: 600; letter-spacing: -.01em; }
h2 { font-size: 15px; margin: 22px 0 8px; font-weight: 600; }
.sub { color: var(--muted); margin: 0 0 14px; font-size: 13px; }

.flash { padding: 9px 12px; border-radius: var(--radius); margin-bottom: 12px; border: 1px solid var(--line); border-left: 3px solid; background: var(--surface); font-size: 14px; }
.flash.ok { border-left-color: var(--ok); }
.flash.error { border-left-color: var(--danger); color: var(--danger); }

/* кнопки й поля */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 12px; border-radius: var(--radius);
       border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); text-decoration: none;
       font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; line-height: 1.2; }
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.go { background: var(--surface); border-color: var(--ok); color: var(--ok); }
.btn.go:hover { background: var(--ok); color: #fff; }
.btn.small { padding: 5px 10px; font-size: 13px; }
.btn.link { border-color: transparent; background: none; color: var(--muted); padding-left: 6px; padding-right: 6px; }
.btn.link:hover { color: var(--ink); }
.btn.icon { width: 32px; padding: 6px 0; font-size: 16px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
input, select, textarea { font: inherit; font-size: 14px; padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: var(--radius);
                          background: #fff; color: var(--ink); width: 100%; }
input:focus, select:focus, textarea:focus { border-color: #7d9fd6; outline: none; box-shadow: 0 0 0 3px rgba(74,123,208,.12); }
textarea { min-height: 60px; }
label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; font-weight: 500; }
.field { margin-bottom: 12px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.row > .field { flex: 1 1 180px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
fieldset { border: none; padding: 0; margin: 0; }

/* навігація по днях */
.daybar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.daybar h1.date { margin: 0; font-size: 20px; font-variant-numeric: tabular-nums; }
.daybar .wd { color: var(--muted); font-size: 13px; }
.daybar .pick input { width: auto; padding: 5px 8px; }
.spacer { flex: 1; }
.pagebar .search { flex: 1; max-width: 380px; }

/* фільтр за водієм */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.chip { display: inline-flex; gap: 6px; align-items: center; padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: 14px;
        background: var(--surface); color: var(--ink); text-decoration: none; font-size: 13px; }
.chip .num { color: var(--faint); }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip.on .num { color: #b9c2cb; }

/* секції сторінки замовлень */
section { margin-bottom: 18px; }
.sec-head { display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; margin-bottom: 8px; }
.sec-head h2 { margin: 0; }
.sec-head .sub { margin: 0; }
.sec-head form { margin-left: auto; }

.overdue { background: var(--warn-bg); border: 1px solid #efd9b0; border-radius: var(--radius); padding: 12px; }
.overdue h2 { color: var(--warn); }
.due { color: var(--warn); font-weight: 600; }

.plan-tbl { width: auto; min-width: 420px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
            border-collapse: separate; border-spacing: 0; overflow: hidden; }
.plan-tbl th, .plan-tbl td { padding: 7px 14px; border-top: 1px solid var(--line); text-align: left; }
.plan-tbl thead th { border-top: none; font-size: 12px; color: var(--muted); font-weight: 500; background: #fafbfc; }
.plan-tbl .r { text-align: right; }
.plan-tbl tr.plan-done td { color: var(--muted); }
.plan-tbl .plan-ok { color: var(--ok); font-weight: 600; }
.plan-tbl tr.plan-grp td { background: #fafbfc; font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; padding-top: 9px; padding-bottom: 5px; }

/* список замовлень */
.orders { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.order { padding: 12px 14px; border-top: 1px solid var(--line); border-left: 3px solid var(--warn); }
.order:first-child { border-top: none; border-top-left-radius: var(--radius); }
.order:last-child { border-bottom-left-radius: var(--radius); }
.order.st-delivered { border-left-color: var(--ok); }
.order.st-cancelled { border-left-color: var(--line-strong); }
.order.st-cancelled > :not(.o-foot):not(.o-head), .order.st-cancelled .o-info { opacity: .55; }
.order.st-cancelled .client { text-decoration: line-through; color: var(--muted); }
.o-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.o-title { min-width: 0; font-size: 15px; }
.o-no { color: var(--muted); font-weight: 500; margin-right: 4px; font-variant-numeric: tabular-nums; }
.o-title .due { font-size: 12px; margin-left: 6px; white-space: nowrap; }
.client { font-weight: 600; color: var(--ink); text-decoration: none; }
.client:hover { text-decoration: underline; }
.o-where { font-size: 13px; color: var(--muted); margin: 2px 0 8px; }
.o-where a.tel { color: inherit; }
/* «чек»: назва — сума */
.o-bill { display: grid; grid-template-columns: auto auto; justify-content: start; column-gap: 28px; row-gap: 2px; font-size: 14px; }
.bl-sum { text-align: right; white-space: nowrap; }
.bl-name .each { color: var(--muted); font-size: 12px; }
.bl-total { padding-top: 5px; }
.bl-total b { font-size: 15px; }
.o-docs { margin-top: 6px; }
.o-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-top: 8px; }
.o-info { min-width: 0; }
.o-driver { font-size: 14px; }
.o-comment { font-size: 13px; font-style: italic; margin-top: 2px; }
.order .diff { margin-top: 4px; }
/* дії — справжні кнопки */
.o-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center; flex: none; }
.o-acts form { margin: 0; }
.btn.go-solid { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn.go-solid:hover { background: #246541; border-color: #246541; }
.btn { box-shadow: 0 1px 1px rgba(16,24,40,.06); }
.btn.link { box-shadow: none; }
/* статуси — плашки без рамки, на кнопки не схожі */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
  line-height: 18px; white-space: nowrap; letter-spacing: .01em; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge.st-new { background: #eaf1fb; color: #2c5a9a; }
.badge.st-delivered, .badge.ok { background: #e6f3ea; color: var(--ok); }
.badge.st-cancelled { background: #f0f1f3; color: #6b7280; }
.badge.warn { background: var(--warn-bg); color: var(--warn); box-shadow: inset 0 0 0 1px #f0dcb2; }
.st-label { font-size: 12px; color: var(--muted); margin-right: 2px; }
.empty { padding: 22px; text-align: center; color: var(--muted); }
.overdue .orders { border-color: #efd9b0; }

/* підсумки (статистика) */
.totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line);
          border-radius: var(--radius); overflow: hidden; margin-bottom: 18px; }
.totals > div { background: var(--surface); padding: 10px 14px; }
.totals .k { font-size: 12px; color: var(--muted); }
.totals .v { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.totals .v-sm { font-size: 14px; margin-top: 2px; }
.totals .wide { grid-column: span 2; }

/* таблиці */
.tbl-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 12px; text-align: left; border-top: 1px solid var(--line); font-size: 14px; }
thead th { border-top: none; font-size: 12px; color: var(--muted); font-weight: 500; background: #fafbfc; }
td.r, th.r { text-align: right; }
tfoot td { font-weight: 600; background: #fafbfc; }
tr.inactive td { color: var(--faint); }
td input, td select { padding: 5px 8px; }

/* форма замовлення */
.items .item { display: grid; grid-template-columns: 1fr 80px 110px 100px 32px; gap: 8px; align-items: center; margin-bottom: 6px; }
.items .head { font-size: 12px; color: var(--muted); font-weight: 500; }
.items .line-sum { text-align: right; font-variant-numeric: tabular-nums; }
.row.item-adds { gap: 10px; margin-top: 8px; }
/* кнопки «додати рядок»: виділені кольором, щоб було видно, що це кнопки */
.btn.add { gap: 0; background: #eaf2fb; border-color: #a9c4e2; color: #1d4f86; font-weight: 600; }
.btn.add:hover { background: #dbe9f8; border-color: #6f9bcc; }
@media (max-width: 720px) {
  .row.item-adds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .item-adds .btn.add { width: 100%; min-height: 40px; padding: 6px 4px; }
  .add-long { display: none; }
}
.sales { margin-top: 14px; padding: 10px 12px 6px; border: 1px solid var(--line, #e3e6ea); border-radius: 10px; background: #fafbfc; }
.sales-title { font-weight: 600; margin-bottom: 8px; }
.sales .sitem { display: grid; grid-template-columns: 1fr 70px 120px 100px 32px; gap: 8px; align-items: center; margin-bottom: 6px; }
.sales .head { font-size: 12px; color: var(--muted); font-weight: 500; }
.sales.braks .sitem { grid-template-columns: 1fr 70px 32px; }
.sales .line-sum { text-align: right; font-variant-numeric: tabular-nums; }
.order-total { text-align: right; font-size: 17px; font-weight: 600; margin-top: 6px; font-variant-numeric: tabular-nums; }
.order-total .sub { font-size: 13px; font-weight: 400; }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.seg input { position: absolute; opacity: 0; width: 1px; }
.seg label { margin: 0; padding: 7px 14px; color: var(--ink); cursor: pointer; font-size: 14px; font-weight: 400; }
.seg input:checked + label { background: var(--accent); color: #fff; }
.seg input:focus-visible + label { outline: 2px solid #4a7bd0; outline-offset: -2px; }

.presets { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.login { max-width: 340px; margin: 10vh auto; }
.login h1 { margin-bottom: 16px; }

/* журнал змін */
.log { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.log-item { padding: 10px 14px; border-top: 1px solid var(--line); }
.log-item:first-child { border-top: none; }
.log-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 14px; }
.log-what { font-weight: 600; }
.log-meta { color: var(--muted); font-size: 12px; margin-left: auto; font-variant-numeric: tabular-nums; }
.log-lines { margin: 4px 0 0; padding: 0; list-style: none; font-size: 13px; }
.log-lines li { padding: 1px 0; overflow-wrap: anywhere; }

/* меню-бургер: на телефоні й на телефоні, поверненому горизонтально (повне меню не вміщається до ~1000px) */
@media (max-width: 1000px) {
  /* меню-бургер */
  .top-in { position: relative; padding: 0 4px 0 14px; min-height: 48px; }
  .burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; margin-left: auto; width: 44px; height: 44px;
            background: none; border: none; cursor: pointer; padding: 0 11px; }
  .burger span { display: block; height: 2px; background: #fff; border-radius: 1px; transition: transform .15s, opacity .15s; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 20; flex-direction: column; align-items: stretch;
         gap: 0; background: var(--steel); padding: 4px 0 8px; box-shadow: 0 8px 18px rgba(0,0,0,.18); }
  .nav.open { display: flex; }
  .nav a { padding: 11px 16px; border-radius: 0; font-size: 15px; }
  .nav a.on { background: rgba(255,255,255,.1); }
  .who { margin: 6px 0 0; padding: 10px 16px 4px; border-top: 1px solid rgba(255,255,255,.12); font-size: 14px; }
}

/* ================= телефон ================= */
@media (max-width: 720px) {
  main { padding: 12px 12px 72px; }

  .btn { min-height: 38px; }
  .btn.small { min-height: 34px; }

  .daybar { gap: 6px; }
  .daybar .pick { flex: 1 1 120px; }
  .daybar .pick input { width: 100%; }
  .daybar .spacer { display: none; }
  .daybar .new { flex: 1 1 100%; }
  .pagebar h1 { flex: 1; }
  .pagebar .search { flex: 1 1 100%; max-width: none; order: 3; }

  .chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 0 12px; padding: 0; scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { white-space: nowrap; }

  .sec-head form { margin-left: 0; flex-basis: 100%; }
  .sec-head form .btn { width: 100%; }
  .overdue { margin: 0 0 16px; padding: 10px; }
  .plan-tbl { width: 100%; min-width: 0; table-layout: auto; }
  .plan-tbl th, .plan-tbl td { padding: 7px 6px; font-size: 13px; }
  .plan-tbl th:first-child, .plan-tbl td:first-child { padding-left: 10px; }
  .plan-tbl .r { width: 1%; white-space: nowrap; padding-left: 8px; padding-right: 8px; }
  .plan-tbl th:last-child, .plan-tbl td:last-child { padding-right: 10px; }
  .plan-tbl thead th { font-size: 11px; white-space: nowrap; }

  .order { padding: 12px; }
  .o-foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .o-acts { justify-content: stretch; padding-top: 10px; border-top: 1px dashed var(--line); }
  .o-acts > form, .o-acts > a, .o-acts > details { flex: 1 1 0; min-width: 0; }
  .o-acts > .act-move { flex-basis: 100%; }
  .o-acts .btn { width: 100%; padding-left: 0; padding-right: 0; }
  .o-bill { column-gap: 18px; }

  .totals { grid-template-columns: 1fr 1fr; }
  .totals .wide { grid-column: 1 / -1; }

  /* таблиці як картки */
  .tbl-wrap:has(table.stack) { background: none; border: none; overflow: visible; }
  table.stack, table.stack tbody, table.stack tfoot, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack thead { display: none; }
  table.stack tr { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 6px; padding: 6px 12px; }
  table.stack td { border: none; padding: 3px 0; display: flex; justify-content: space-between; gap: 12px; text-align: right; }
  table.stack td::before { content: attr(data-label); color: var(--muted); font-size: 12px; text-align: left; flex: none; }
  table.stack td:empty { display: none; }
  table.stack td:first-child { font-weight: 600; text-align: left; }
  table.stack td:first-child::before { display: none; }
  table.stack tfoot td { background: none; }
  table.stack td.empty { justify-content: center; }
  table.stack td.empty::before { display: none; }
  table.stack.edit td { display: block; text-align: left; }
  table.stack.edit td::before, table.stack.edit td:first-child::before { display: block; margin-bottom: 3px; }
  table.stack.edit td:first-child { font-weight: 400; }
  table.stack.edit td:has(input[type=checkbox]) { display: flex; justify-content: space-between; align-items: center; }
  table.stack.edit td:has(input[type=checkbox])::before { margin: 0; }
  table.stack.edit input[type=checkbox] { width: 20px !important; height: 20px; }
  table.stack.edit input:not([type=checkbox]) { width: 100% !important; }
  table.stack.edit td:last-child { padding-top: 6px; }
  table.stack.edit td:last-child::before { display: none; }
  table.stack.edit td:last-child .btn { width: 100%; }

  .row { gap: 0 10px; }
  .row > .field { flex: 1 1 140px; }
  .row > .field:not([style]) { flex-basis: 100%; }
  .panel { padding: 12px; }
  .seg { display: flex; }
  .seg label { flex: 1; text-align: center; }
  .items .item { grid-template-columns: 1fr 58px 80px 30px; gap: 6px; }
  .items .line-sum, .items .head .hs { display: none; }
  .sales { padding: 8px 8px 4px; }
  .sales .head { display: none; }
  .sales .sitem { grid-template-columns: 1fr 1fr 30px; grid-template-areas: "g g d" "q p s"; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--line, #e3e6ea); }
  .sales .sitem:last-child { border-bottom: 0; }
  .sales .sitem .s-sel { grid-area: g; } .sales .sitem .sdel { grid-area: d; }
  .sales .sitem .s-qty { grid-area: q; } .sales .sitem .s-price { grid-area: p; }
  .sales .sitem .line-sum { display: none; }
  .sales.braks .sitem { grid-template-columns: 1fr 70px 30px; grid-template-areas: "g q d"; }
  .form-actions { position: sticky; bottom: 0; z-index: 5; background: var(--surface); margin: 0 0 -12px; padding: 10px 0 12px;
                  border-top: 1px solid var(--line); box-shadow: 0 -10px 0 -4px var(--surface); }
  .form-actions .btn.primary { flex: 1; }
  .presets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .presets .btn { white-space: nowrap; }
  .log-meta { margin-left: 0; flex-basis: 100%; }
}
@media (max-width: 720px) { input, select, textarea { font-size: 16px; } }

/* сторінка водія */
.drv { max-width: 560px; margin: 0 auto; }
.drv-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.drv-name { font-size: 20px; font-weight: 600; }
.drv-head .sub { margin: 0; }
.drv-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.drv-k { font-size: 12px; color: var(--muted); font-weight: 500; }
.drv-load { font-size: 17px; margin-top: 2px; }
/* переміщення */
.tr-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tr-head h1 { margin: 0; }
.tr-grid { display: grid; grid-template-columns: 170px 1fr 1.6fr; gap: 10px 14px; }
.tr-route-row { display: flex; gap: 6px; align-items: center; }
.tr-route-row select { flex: 1; min-width: 0; }
.tritems { margin-top: 14px; }
.tritems .titem { display: grid; grid-template-columns: 1fr 96px 96px 32px; gap: 8px; align-items: center; margin-bottom: 6px; }
.tritems .head { font-size: 12px; color: var(--muted); font-weight: 500; }
.tritems .tq { display: block; margin: 0; }
.tritems .tq span { display: none; }
.tritems .tq input { width: 100%; }
.tr-total { margin: 8px 0 0; }
.tr-del { margin-top: 14px; text-align: right; }
.tr-sum { margin: 4px 0 10px; }
.tr-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.tr-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.tr-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.tr-route-l { font-weight: 600; text-decoration: none; color: var(--ink); }
.tr-meta { color: var(--muted); font-size: 14px; }
.tr-tbl { margin-top: 6px; font-size: 15px; }
.tr-tbl tfoot td { color: var(--muted); }
.tr-note { font-style: italic; font-size: 14px; margin-top: 6px; }
.tr-by { margin: 6px 0 0; font-size: 12px; }
.day-tr { margin: 14px 0; }
.day-tr-list { list-style: none; padding: 0; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.day-tr-list li { display: grid; grid-template-columns: auto 140px 1fr auto; gap: 6px 14px; padding: 8px 12px; border-top: 1px solid var(--line); align-items: baseline; }
.day-tr-list li:first-child { border-top: 0; }
.day-tr-list a { text-decoration: none; }
.day-tr-drv { color: var(--muted); }
@media (max-width: 720px) {
  .tr-grid { grid-template-columns: 1fr; }
  .tritems .head { display: none; }
  .tritems .titem { grid-template-columns: 1fr 1fr 30px; grid-template-areas: "g g d" "f e e"; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
  .tritems .titem [name=t_gas_id] { grid-area: g; } .tritems .titem .tdel { grid-area: d; }
  .tritems .titem .tq:nth-of-type(1) { grid-area: f; } .tritems .titem .tq:nth-of-type(2) { grid-area: e; }
  .tritems .tq span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
  .tr-route-row { flex-direction: column; align-items: stretch; }
  .tr-route-row select { width: 100%; }
  .tr-route-row .btn.icon { align-self: center; transform: rotate(90deg); }
  .day-tr-list li { grid-template-columns: auto 1fr; }
  .day-tr-items { grid-column: 1 / -1; }
  .day-tr-st { grid-column: 1 / -1; justify-self: start; }
  .daybar .tr-new, .daybar .print-new { flex: 1 1 auto; }
}
.drv-trs { margin-top: 10px; }
.drv-tr { margin-top: 8px; }
.drv-tr + .drv-tr { border-top: 1px dashed var(--line); padding-top: 8px; }
.drv-tr-route { font-weight: 600; font-size: 15px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.drv-tr.tr-done .ld-tbl td { color: var(--muted); }
.drv-tr-form { margin-top: 8px; }
.drv-tr-edit { margin-bottom: 8px; }
.drv-tr-qty { display: grid; gap: 8px; margin-top: 6px; }
.drv-tr-q { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.drv-tr-q > span { grid-column: 1 / -1; font-size: 14px; font-weight: 500; }
.drv-tr-q label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); margin: 0; }
.drv-tr-q input { width: 100%; }
.tr-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: flex-start; }
.tr-acts form { margin: 0; }
.tr-cancel[open] { flex-basis: 100%; }
.tr-cancel-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tr-cancel-form input { flex: 1 1 200px; }
.tr-card.tr-cancelled, .day-tr-list li.tr-cancelled { opacity: .6; }
.tr-badge { margin-left: auto; }
.tr-state { margin-top: 14px; }
.tr-state-row { margin-bottom: 4px; }
.day-tr-st { display: inline-flex; gap: 8px; align-items: center; justify-self: end; }
.day-tr-st form.inline { display: inline; margin: 0; }
.hday-trs { margin: 6px 0 8px; padding: 6px 12px 8px; }
.ld-tbl { width: 100%; border-collapse: collapse; margin-top: 4px; font-size: 16px; }
.ld-tbl td, .ld-tbl th { padding: 6px 0; border-top: 1px solid var(--line); }
.ld-tbl td + td, .ld-tbl th + th { padding-left: 12px; width: 1%; white-space: nowrap; }
.ld-tbl thead th { border-top: 0; padding: 2px 0 4px; font-size: 12px; color: var(--muted); font-weight: 500; }
.ld-tbl thead th + th { padding-left: 14px; }
.ld-tbl .r { text-align: right; }
.ld-tbl b { font-size: 17px; }
.ld-tbl tr.ld-done td { color: var(--muted); }
.ld-tbl tr.ld-done b { color: var(--ok, #2e7d4f); font-weight: 600; }
.ld-tbl tr.ld-grp td { padding-top: 12px; font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; border-top: 0; }
.drv-small { font-size: 14px; }
.drv h2 { font-size: 16px; margin: 20px 0 8px; }
.dcard { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--warn); border-radius: var(--radius);
         padding: 12px 14px; margin-bottom: 10px; scroll-margin-top: 12px; }
.dcard-due { font-size: 12px; font-weight: 600; color: var(--warn); margin-bottom: 4px; }
.dcard-client { font-size: 16px; font-weight: 600; }
.dcard-gas { font-size: 17px; margin: 4px 0; }
.dcard-addr { font-size: 14px; color: var(--muted); }
.dcard-pay { font-size: 15px; margin-top: 8px; }
.dcard-pay.cashless { color: var(--muted); }
.dcard-note { font-size: 14px; font-style: italic; margin-top: 6px; }
.dcard-acts { display: flex; gap: 8px; margin: 12px 0 8px; }
.dcard-acts .btn { flex: 1; min-height: 42px; }
.btn.big { width: 100%; min-height: 48px; font-size: 16px; }
.btn.go.big { background: var(--ok); color: #fff; }
.dcard form { margin: 0; }
.dcard.done { border-left-color: var(--ok); padding: 10px 14px; }
.dcard.done .dcard-client { font-size: 14px; }
.dcard-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.dcard-row { flex-wrap: wrap; }
.dcard-row > div { min-width: 0; flex: 1 1 220px; }
.dcard-row > form { flex: none; margin-left: auto; }
.dcard-row > form .btn { white-space: nowrap; }

/* посилання водія в адмінці */
.link-cell { display: flex; gap: 4px; flex-wrap: wrap; }
@media (max-width: 720px) { table.stack.edit td:empty { display: none; } }

/* форма клієнта: телефони й точки */
label.inline { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink); font-weight: 400; margin: 0; }
label.inline input { width: auto; }
.opt { color: var(--faint); font-weight: 400; }
.phones { display: flex; flex-direction: column; gap: 6px; }
.phone-row { display: grid; grid-template-columns: 190px 1fr 32px; gap: 6px; align-items: center; }
.point { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; margin: 0 0 10px; background: #fbfbfc; }
.point-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.point-title { font-weight: 600; }
@media (max-width: 720px) {
  .phone-row { grid-template-columns: 1fr 32px; }
  .phone-row input[name$="label"], .phone-row input[name^="phl_"] { grid-column: 1; grid-row: 2; }
  .phone-row .del-phone { grid-row: 1 / span 2; grid-column: 2; }
  .point { padding: 10px; }
}
.flash.warn { border-left-color: var(--warn); background: var(--warn-bg); }
.diff { font-size: 12.5px; color: var(--warn); font-weight: 500; }
.point-info { font-size: 13px; color: var(--muted); margin-top: 6px; }

/* водій: дзвінки, фактична кількість */
.dcard-point { font-weight: 400; color: var(--muted); font-size: 14px; }
.dcard-calls { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 4px; }
.dcard-calls .btn { justify-content: space-between; min-height: 42px; }
.dcard-calls .btn .num { color: var(--muted); font-weight: 400; }
.dcard-gen { font-size: 13px; color: var(--muted); margin-top: 4px; }
.dcard-gen a { color: inherit; }
.dform { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.dqty { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.dqty-row { display: grid; grid-template-columns: 1fr 44px 64px 44px; gap: 6px; align-items: center; }
.dqty-gas { font-size: 16px; font-weight: 500; }
.dqty-row input { text-align: center; font-size: 18px; font-weight: 600; padding: 8px 4px; }
.dqty-row .step { min-height: 44px; font-size: 20px; padding: 0; }
.dqty-was { grid-column: 1 / -1; font-size: 12px; color: var(--warn); margin-top: -2px; }
.dqty-was:empty { display: none; }
.dqty-row.changed input { border-color: var(--warn); color: var(--warn); }
.dpay { margin-bottom: 8px; }
.dpay .seg { display: flex; }
.dpay .seg label { flex: 1; text-align: center; padding: 10px 4px; }
.dcard-pay .cashless { color: var(--muted); }
.dcard-pay { margin: 4px 0 10px; }

/* водій: деталі замовлення відкриваються натиском на клієнта */
.dtoggle { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; width: 100%; padding: 0; border: none;
           background: none; font: inherit; font-size: 16px; font-weight: 600; color: var(--ink); text-align: left; cursor: pointer; }
.dtoggle-hint { font-size: 12px; font-weight: 500; color: #2b5f9e; white-space: nowrap; }
.dedit { background: #fafbfc; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; margin-bottom: 10px; }
.dedit-title { font-size: 12px; color: var(--muted); font-weight: 500; margin-bottom: 8px; }
.dchanged { font-size: 13px; color: var(--warn); font-weight: 500; margin-bottom: 6px; }
.dform { border-top: none; padding-top: 0; margin-top: 10px; }

/* автооновлення */
.live-toast { position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 20px); background: var(--steel); color: #fff;
              font-size: 13px; padding: 7px 14px; border-radius: 16px; opacity: 0; pointer-events: none;
              transition: opacity .2s, transform .2s; z-index: 50; }
.live-toast.show { opacity: .92; transform: translate(-50%, 0); }

/* водій: вкладки, завтра, історія, перенос/скасування */
.drv-tabs { display: flex; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 3px; margin-bottom: 12px; }
.drv-tabs a { flex: 1; text-align: center; padding: 8px 4px; border-radius: 4px; color: var(--muted); text-decoration: none; font-weight: 500; font-size: 14px; }
.drv-tabs a.on { background: var(--accent); color: #fff; }
.drv-tabs a { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.drv-tabs .badge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--warn); color: #fff; font-size: 11px; line-height: 18px; font-weight: 600; }
.drv-tabs .badge::before { display: none; }
.drv-tabs a.on .badge { background: #fff; color: var(--accent); }
.drv-next { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 14px;
            background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--ink); text-decoration: none; font-size: 14px; }
.drv-next span { color: #2b5f9e; font-weight: 500; }
.drv-days { margin: 0 0 6px; }
.dcard.plan { border-left-color: var(--line-strong); }
.hday { margin-bottom: 18px; }
.hday-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 16px 0 2px; }
.hday-head h2 { margin: 0; }
.hday-head .sub { margin: 0; }
.hday-load { color: var(--muted); margin-bottom: 8px; }
.dother { display: flex; gap: 8px; }
.dother .btn { flex: 1; min-height: 42px; }
.btn.danger { color: var(--danger); border-color: #e3b5b2; }
.btn.danger.big { background: var(--danger); color: #fff; border-color: var(--danger); }
.dsub { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }

fieldset { min-width: 0; }

/* список клієнтів */
.clist { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.citem { display: grid; grid-template-columns: minmax(180px, 1.2fr) 1.6fr 1.4fr auto; gap: 4px 16px; align-items: start;
         padding: 10px 14px; border-top: 1px solid var(--line); }
.citem:first-child { border-top: none; }
.citem.inactive { opacity: .55; }
.citem-name { font-weight: 600; color: var(--ink); text-decoration: none; }
.citem-name:hover { text-decoration: underline; }
.citem-pay { display: block; font-size: 12px; color: var(--muted); }
.citem-mgr { display: block; font-size: 12px; color: #2b5f9e; margin-top: 2px; }
.citem-points { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.citem-points li { padding: 1px 0; }
.citem-points b { font-weight: 500; }
.citem-phones { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.citem-phones .tel { color: var(--ink); text-decoration: none; }
.citem-phones .tel .num { color: #2b5f9e; }
.tel-label { color: var(--muted); }
.citem-order { justify-self: end; }
@media (max-width: 720px) {
  .clist { background: none; border: none; }
  .citem { grid-template-columns: 1fr; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
           margin-bottom: 8px; padding: 10px 12px; }
  .citem:first-child { border-top: 1px solid var(--line); }
  .citem-main { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
  .citem-name { font-size: 15px; }
  .citem-pay { display: inline; white-space: normal; text-align: right; }
  .citem-points li { padding: 2px 0; }
  .citem-phones { gap: 0; }
  .citem-phones .tel { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 14px; }
  .citem-phones .tel .tel-label { text-align: right; }
  .citem-order { justify-self: stretch; }

  /* телефони у формі клієнта: номер і підпис разом, «видалити» окремо */
  .phones { gap: 8px; }
  .phone-row { grid-template-columns: 1fr; gap: 4px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
  .phone-row input[name$="label"], .phone-row input[name^="phl_"] { grid-column: auto; grid-row: auto; }
  .phone-row .del-phone { grid-row: auto; grid-column: auto; justify-self: end; min-height: 30px; font-size: 13px; }
  .phone-row .del-phone::after { content: " видалити"; }
}

/* водій: кнопки дзвінка у два рядки, номери не розриваються */
.dcard-calls .btn.call { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; text-align: left; padding: 8px 12px; }
.dcard-calls .btn.call .call-who { font-weight: 500; }
.dcard-calls .btn.call .num { font-size: 15px; color: #2b5f9e; }
.gen-ph { display: block; }
.gen-ph a { white-space: nowrap; }
a.tel.num { white-space: nowrap; }
@media (max-width: 720px) {
  .form-actions .btn { white-space: nowrap; }
}
@media (max-width: 720px) {
  /* статистика: компактні рядки — назва і головне число зверху, решта дрібно під ними */
  table.stack.compact tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 8px 12px; }
  table.stack.compact tr::before { content: ""; flex-basis: 100%; order: 1; height: 0; }
  table.stack.compact td { display: inline; width: auto; padding: 0; order: 2; font-size: 12.5px; color: var(--muted); text-align: left; }
  table.stack.compact td::before { content: attr(data-label) " "; font-size: 12.5px; color: var(--muted); }
  table.stack.compact td:first-child { order: 0; flex: 1 1 auto; font-size: 14px; color: var(--ink); font-weight: 600; min-width: 0; }
  table.stack.compact td.key { order: 0; flex: 0 0 auto; font-size: 15px; color: var(--ink); font-weight: 600; }
  table.stack.compact td.key::before { display: none; }
  table.stack.compact td.empty { flex-basis: 100%; text-align: center; order: 0; }
  table.stack.compact tfoot tr { background: #fafbfc; }
  table.stack.compact tr.inactive td:first-child { color: var(--muted); }
  .period-go { flex: 1 1 100% !important; }
  .period-go .btn { width: 100%; }
}
@media (max-width: 720px) { .row > .field { min-width: 0; } input[type=date] { min-width: 0; } }
.pager { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }

/* ===== вибір дати ===== */
/* нативне поле дати: однаковий вигляд в iOS Safari, Android і на комп'ютері */
input[type=date] { -webkit-appearance: none; appearance: none; min-height: 36px; line-height: 1.2; background: #fff; }
input[type=date]::-webkit-date-and-time-value { text-align: left; margin: 0; }
input[type=date]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }

/* навігатор по днях: ‹ [пн 05.10.2026 📅] › — дата сама є кнопкою календаря */
.datenav { display: inline-flex; align-items: stretch; gap: 4px; }
.datenav .btn.icon { width: 36px; font-size: 18px; }
.datepick { position: relative; margin: 0; }
.datepick-face { display: inline-flex; align-items: baseline; gap: 8px; height: 100%; padding: 4px 12px; border: 1px solid var(--line-strong);
                 border-radius: var(--radius); background: var(--surface); }
.datepick-wd { color: var(--muted); font-size: 13px; }
.datepick-date { margin: 0; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.datepick-ico { align-self: center; color: var(--muted); }
.datepick input[type=date] { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; opacity: 0; cursor: pointer;
                             padding: 0; border: 0; z-index: 1; }
.datepick input[type=date]::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.datepick:hover .datepick-face { border-color: var(--muted); }
.datepick:focus-within .datepick-face { border-color: #7d9fd6; box-shadow: 0 0 0 3px rgba(74,123,208,.15); }
.today-tag { font-size: 12px; color: var(--ok); font-weight: 500; padding: 2px 8px; border: 1px solid #b9d9c5; border-radius: 10px; background: #f1f8f4; }

/* ===== форма замовлення: сітка ===== */
.of-grid { display: grid; grid-template-columns: 190px 1fr auto; gap: 0 14px; align-items: start; }
.of-client, .of-point { grid-column: 1 / -1; }
.client-pick { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.4fr) auto; gap: 8px; }
.of-pay .seg { display: inline-flex; }
@media (max-width: 720px) {
  .datenav { flex: 1 1 100%; }
  .datepick { flex: 1; }
  .datepick-face { width: 100%; justify-content: center; padding: 6px 10px; }
  .datepick-date { font-size: 18px; }
  .datenav .btn.icon { width: 44px; }
  .today-tag { display: none; }
  .daybar .btn.link { flex: 1 1 100%; justify-content: center; }

  .of-grid { grid-template-columns: 1fr; }
  .of-date { order: 1; } .of-client { order: 2; } .of-point { order: 3; } .of-driver { order: 4; } .of-pay { order: 5; }
  .client-pick { grid-template-columns: 1fr; }
  .client-pick .btn { justify-self: start; }
  .of-pay .seg { display: flex; }
}

/* три типи оплати */
.seg.pay3 label { white-space: nowrap; }
@media (max-width: 720px) { .seg.pay3 label { padding-left: 6px; padding-right: 6px; } }

/* ціни клієнта */
.cprices { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-bottom: 8px; }
.cprice { display: grid; grid-template-columns: 1fr 100px auto; align-items: center; gap: 8px; margin: 0; padding: 6px 10px;
          border: 1px solid var(--line); border-radius: var(--radius); background: #fbfbfc; font-size: 14px; color: var(--ink); font-weight: 400; }
.cprice.own { border-color: #c9d7ee; background: #f4f8fe; }
.cprice input { text-align: right; padding: 5px 8px; }
.cprice input::placeholder { color: var(--faint); }
.cprice-unit { color: var(--muted); font-size: 12px; }

/* список клієнтів: ціни й дії */
.citem { grid-template-areas: "main points phones acts" "prices prices prices acts"; }
.citem-main { grid-area: main; } .citem-points { grid-area: points; } .citem-phones { grid-area: phones; }
.citem-prices { grid-area: prices; font-size: 12.5px; color: #2b5f9e; }
.citem-acts { grid-area: acts; display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
@media (max-width: 720px) {
  .citem { grid-template-areas: none; }
  .citem-main, .citem-points, .citem-phones, .citem-prices, .citem-acts { grid-area: auto; }
  .citem-acts { flex-direction: row; }
  .citem-acts .btn { flex: 1; }
  .cprices { grid-template-columns: 1fr; }
}

/* пошук клієнта у формі замовлення */
.client-pick { grid-template-columns: 1fr auto; }
.combo { position: relative; }
.combo-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 2px); margin: 0; padding: 4px 0; list-style: none;
              background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius);
              box-shadow: 0 8px 20px rgba(0,0,0,.12); max-height: 340px; overflow-y: auto; }
.combo-list li { padding: 7px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 1px; }
.combo-list li b { font-weight: 600; font-size: 14px; }
.combo-list li span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-list li.on, .combo-list li:hover { background: #eef3fb; }
.combo-list li span.combo-foreign { color: #8a5a00; }
.combo-list li.none { cursor: default; color: var(--muted); font-size: 13px; }
input.invalid { border-color: var(--danger); }
input.own-price { background: #f4f8fe; border-color: #b7cbec; color: #1f4f8a; }

/* повтор попереднього замовлення */
.recent { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.recent-title { font-size: 12px; color: var(--muted); font-weight: 500; }
.recent-item { display: grid; grid-template-columns: auto 1fr; gap: 0 12px; text-align: left; width: 100%; padding: 8px 12px;
               background: #fbfbfc; border: 1px dashed var(--line-strong); border-radius: var(--radius); font: inherit; color: var(--ink); cursor: pointer; }
.recent-item:hover { border-color: #7d9fd6; background: #f4f8fe; }
.recent-item.on { border-style: solid; border-color: var(--ok); background: #f1f8f4; }
.recent-date { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; grid-row: 1 / span 2; align-self: center; }
.recent-gas { font-weight: 600; font-size: 14px; }
.recent-meta { font-size: 12px; color: var(--muted); }
@media (max-width: 720px) {
  .client-pick { grid-template-columns: 1fr; }
  .combo-list { max-height: 50vh; }
  .combo-list li { padding: 10px 12px; }
}

/* швидкий пошук на сторінці замовлень */
.qsearch { position: relative; margin: 0 0 12px; }
.qs-list { position: absolute; z-index: 25; left: 0; right: 0; top: calc(100% + 2px); margin: 0; padding: 4px 0; list-style: none;
           background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 8px 20px rgba(0,0,0,.12);
           max-height: 60vh; overflow-y: auto; }
.qs-list li { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-top: 1px solid var(--line); }
.qs-list li:first-child { border-top: none; }
.qs-list li.none { color: var(--muted); font-size: 13px; }
.qs-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.qs-info b { font-size: 14px; }
.qs-info span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-info .qs-last { color: var(--ink); }
.qs-acts { display: flex; gap: 4px; flex: none; }
@media (max-width: 720px) {
  .qs-list li { flex-wrap: wrap; }
  .qs-info span { white-space: normal; }
  .qs-acts { flex: 1 1 100%; }
  .qs-acts .btn { flex: 1; }
}

/* пошук клієнта на сторінці замовлень: список клієнтів і всі його замовлення */
.qs-list li[data-i] { display: flex; flex-direction: column; align-items: stretch; gap: 1px; cursor: pointer; }
.qs-list li[data-i] b { font-size: 14px; }
.qs-list li[data-i] span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-list li[data-i] .qs-last { color: var(--ink); }
.qs-list li.on, .qs-list li[data-i]:hover { background: #eef3fb; }
.qs-panel { margin: 0 0 18px; padding: 12px; background: #f4f8fe; border: 1px solid #c9d7ee; border-radius: var(--radius); }
.qp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.qp-head > div { flex: 1; min-width: 0; }
.qp-head h2 { margin: 0; font-size: 16px; }
.qp-head .sub { margin: 0; }
.qo-list .none { padding: 14px; color: var(--muted); text-align: center; list-style: none; }
.qo { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); border-left: 3px solid var(--warn); }
.qo:first-child { border-top: none; }
.qo.st-delivered { border-left-color: var(--ok); }
.qo.st-cancelled { border-left-color: var(--line-strong); }
.qo.st-cancelled .qo-main { opacity: .6; }
.qo-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; color: var(--ink); text-decoration: none; }
.qo-main:hover .qo-gas { text-decoration: underline; }
.qo-top { display: flex; justify-content: space-between; gap: 10px; }
.qo-date { font-weight: 600; font-variant-numeric: tabular-nums; }
.qo-sum { font-weight: 600; }
.qo-gas { font-size: 14px; }
.qo-meta { font-size: 12px; color: var(--muted); }
.qo-rep { flex: none; }
.qo-more { margin-top: 8px; width: 100%; }
@media (max-width: 720px) {
  .qs-panel { padding: 10px; }
  .qo { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px; }
  .qo-rep { width: 100%; }
  .qs-list li[data-i] span { white-space: normal; }
}

[hidden] { display: none !important; }

/* підсумки статистики: плитки розтягуються на весь рядок, без порожніх сірих клітинок */
.totals { display: flex; flex-wrap: wrap; }
.totals > div { flex: 1 1 150px; }
@media (max-width: 720px) { .totals > div { flex-basis: 40%; } }

/* ===== користувачі ===== */
.ugroup { margin-bottom: 16px; }
.ulist { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.uitem { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); }
.uitem:first-child { border-top: none; }
.uitem-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; color: var(--ink); text-decoration: none; }
.uitem-main:hover b { text-decoration: underline; }
.uitem-meta { font-size: 12.5px; color: var(--muted); }
.uitem.blocked .uitem-main { opacity: .55; }
.ustatus { font-size: 12px; padding: 2px 8px; border-radius: 10px; border: 1px solid; white-space: nowrap; }
.ustatus.on { color: var(--ok); border-color: #b9d9c5; background: #f1f8f4; }
.ustatus.off { color: var(--danger); border-color: #e3b5b2; background: #fdf3f2; }
.blocked-tag { color: var(--danger); }
.role-seg { display: inline-flex; }
.hint, .hint-static { font-size: 12.5px; color: var(--muted); margin: 6px 0 0; }
.pw-row { display: flex; gap: 8px; }
.pw-row input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .03em; }
.link-cell { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.link-box { flex: 1 1 260px; font-size: 13px; color: var(--muted); }
.danger-zone { border-color: #efd2cf; }
.who-name { color: #cfd6dd !important; text-decoration: none; }
.who-name:hover { color: #fff !important; text-decoration: underline; }
.drv-head-acts { display: flex; gap: 4px; align-items: center; }

/* ===== огляд власника ===== */
.ov-head h1 { margin-bottom: 2px; }
.ov-presets { align-items: flex-start; margin-bottom: 14px; }
.ov-presets .chip { cursor: pointer; }
.ov-custom { flex: 0 0 auto; }
.ov-custom[open] { flex-basis: 100%; }
.ov-custom summary { display: inline-flex; list-style: none; }
.ov-custom summary::-webkit-details-marker { display: none; }
.ov-custom form { margin-top: 10px; }
.ov-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.ov-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.ov-kpi .k { font-size: 12px; color: var(--muted); }
.ov-kpi .v { font-size: 22px; font-weight: 600; margin: 2px 0; white-space: nowrap; }
.ov-kpi.hero .v { font-size: 26px; }
.ov-delta { font-size: 12.5px; }
.dl { font-weight: 600; white-space: nowrap; }
.dl.up { color: var(--ok); } .dl.down { color: var(--danger); } .dl.flat { color: var(--muted); }
.dl.none { color: var(--faint); font-weight: 400; white-space: normal; }
.was { color: var(--muted); white-space: nowrap; }
.ov-chart-card { margin-bottom: 14px; }
.ov-chart-card h2 { margin-top: 0; }
.ov-chart { position: relative; width: 100%; height: 200px; touch-action: pan-y; }
.ov-chart svg { display: block; }
.ov-chart .grid { stroke: #eceef1; stroke-width: 1; }
.ov-chart .base { stroke: #cfd4da; stroke-width: 1; }
.ov-chart .tick { font-size: 11px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.ov-chart .bar { fill: #4a78c2; }
.ov-chart .bar.on { fill: #2c5598; }
.ov-chart .hit { fill: transparent; cursor: default; }
.ov-tip { position: absolute; top: -6px; pointer-events: none; background: var(--steel); color: #fff; padding: 5px 9px; border-radius: 5px;
          font-size: 12px; display: flex; flex-direction: column; white-space: nowrap; box-shadow: 0 4px 10px rgba(0,0,0,.15); }
.ov-tip span { color: #c6ced6; }
.ov-table { margin-top: 8px; }
.ov-table summary { font-size: 13px; color: #2b5f9e; cursor: pointer; }
.ov-table .tbl-wrap { margin-top: 8px; }
.ov-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ov-grid h2 { margin-top: 0; }
.ov-pay { list-style: none; margin: 0; padding: 0; }
.ov-pay li { display: grid; grid-template-columns: 1fr auto 44px; gap: 2px 10px; align-items: baseline; padding: 6px 0; }
.ov-pay-l { font-size: 14px; } .ov-pay-v { font-weight: 600; } .ov-pay-s { color: var(--muted); font-size: 13px; text-align: right; }
.meter { grid-column: 1 / -1; height: 6px; background: #e3ebf7; border-radius: 3px; overflow: hidden; }
.meter span { display: block; height: 100%; background: #4a78c2; border-radius: 3px; }
.ov-tbl { width: 100%; border-collapse: collapse; }
.ov-tbl th, .ov-tbl td { padding: 6px 4px; font-size: 13.5px; border-top: 1px solid var(--line); }
.ov-tbl thead th { border-top: none; font-size: 12px; color: var(--muted); font-weight: 500; background: none; }
.ov-tbl td:first-child { overflow-wrap: anywhere; }
@media (max-width: 860px) {
  .ov-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .ov-kpi { padding: 10px 12px; }
  .ov-kpi .v { font-size: 19px; }
  .ov-kpi.hero .v { font-size: 21px; }
  .ov-tbl th, .ov-tbl td { font-size: 13px; padding: 6px 3px; }
  .pw-row { flex-direction: column; }
  .role-seg { display: flex; } .role-seg label { flex: 1; text-align: center; }
  .uitem { padding: 10px 12px; }
}

/* налаштування: заголовок розділу й вкладки */
.set-head { display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.set-title { font-size: 13px; color: var(--muted); font-weight: 500; }
.set-tabs { display: flex; gap: 4px; }
.set-tabs a { padding: 6px 12px; border-radius: var(--radius); color: var(--ink); text-decoration: none; font-size: 14px; border: 1px solid transparent; }
.set-tabs a:hover { border-color: var(--line-strong); }
.set-tabs a.on { background: var(--accent); color: #fff; }
@media (max-width: 720px) {
  .set-head { flex-direction: column; align-items: stretch; gap: 6px; }
  .set-tabs { overflow-x: auto; scrollbar-width: none; }
  .set-tabs::-webkit-scrollbar { display: none; }
  .set-tabs a { flex: 1; text-align: center; white-space: nowrap; padding: 8px 10px; background: var(--surface); border-color: var(--line); }
  .set-tabs a.on { border-color: var(--accent); }
}

/* гази: одне збереження на всю таблицю */
.gas-tbl td:nth-child(4) input { max-width: 110px; }
.gas-tbl input.gas-l { max-width: 80px; }
.gas-tbl select.gas-form { min-width: 120px; }
.gas-tbl input[type=checkbox] { width: 18px; height: 18px; }
.gas-tbl tr.changed td { background: #fffaf0; }
.gas-tbl tr.gas-new td { background: #fafbfc; }
.save-bar { margin-top: 12px; align-items: center; }
.save-hint { margin: 0; }
.save-hint.warn { color: var(--warn); font-weight: 500; }
@media (min-width: 721px) { .save-bar { position: sticky; bottom: 0; background: var(--paper); padding: 10px 0; } }
@media (max-width: 720px) {
  .save-bar { margin: 12px 0 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); }
  .gas-tbl td:nth-child(4) input { max-width: none; }
  .gas-tbl tr.changed { border-color: #efd9b0; }
  table.stack.edit.gas-tbl td:last-child { flex-direction: row-reverse; justify-content: flex-end; gap: 10px; }
  table.stack.edit.gas-tbl td:last-child::before { display: block; content: "Активний"; font-size: 14px; color: var(--ink); }
  table.stack.edit.svc-tbl td:last-child::before { content: "Активна"; }
}

/* документи для безготівки */
.docs-pick { position: relative; display: inline-block; }
.docs-pick > summary { list-style: none; cursor: pointer; }
.docs-pick > summary::-webkit-details-marker { display: none; }
.docs-pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.12); display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.docs-q { font-size: 13px; color: var(--muted); margin-right: 2px; }
/* значок-перемикач: показує стан і змінює його натиском */
.docs-tg { display: inline-flex; margin: 0; vertical-align: middle; }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 6px; border-radius: 999px; border: 1px solid;
  font: inherit; font-size: 12px; line-height: 18px; cursor: pointer; white-space: nowrap; background: transparent; }
.pill.no { color: var(--warn); border-color: #e6cf9f; background: var(--warn-bg); }
.pill.no:hover { border-color: var(--warn); }
.pill.ok { color: var(--ok); border-color: #b9d8c4; background: #f1f8f3; }
.pill.ok:hover { border-color: var(--ok); }
.pill svg { flex: none; }
.docs-inline { white-space: nowrap; margin-left: 4px; }
.docs-k { font-size: 13px; color: var(--muted); }
.docs-box { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.ddocs { margin: 0 0 10px; }
.ddocs-q { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.ddocs .seg { display: flex; }
.ddocs .seg label { flex: 1; text-align: center; padding: 10px 4px; }
.ddocs.need .seg { border-color: var(--warn); box-shadow: 0 0 0 2px rgba(196,120,20,.25); }
.docs.no { color: var(--warn); font-weight: 500; }
@media (max-width: 720px) {
  .docs-pick { position: static; }
  .o-acts .docs-pick > summary { width: 100%; }
  .o-acts .docs-pick[open] { flex-basis: 100%; order: -1; }
  .docs-pop { position: static; box-shadow: none; margin-top: 6px; flex-wrap: wrap; white-space: normal; }
}

/* «Усі замовлення» */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.page-head h1 { margin: 0; }
.presets .btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 10px; margin-bottom: 6px; }
.filters .field { margin-bottom: 10px; min-width: 0; }
.filters select, .filters input { width: 100%; min-width: 0; }
.filters .f-search { grid-column: span 4; }
.search-go { display: flex; gap: 6px; }
.search-go input { flex: 1; }
.found { margin: 4px 0 12px; font-size: 14px; }
.found-pay { font-size: 13px; margin-top: 2px; }
.all-orders td { vertical-align: top; }
.ao-sub { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.ao-sub.diff { color: var(--warn); }
.ao-client a { font-weight: 600; color: var(--ink); text-decoration: none; }
.ao-client a:hover { text-decoration: underline; }
.all-orders tr.st-cancelled td { color: var(--muted); }
.all-orders tr.st-cancelled td > *:not(.ao-st) { opacity: .7; }
.st-label.st-delivered { color: var(--ok); }
.st-label.st-new { color: var(--ink); font-weight: 500; }
.ao-st { min-width: 120px; }
.ao-st .docs-tg { display: flex; margin-top: 5px; }
.nowrap { white-space: nowrap; }
@media (min-width: 721px) and (max-width: 980px) { .filters { grid-template-columns: repeat(3, minmax(0, 1fr)); } .filters .f-search { grid-column: span 3; } }
@media (max-width: 720px) {
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters .f-search { grid-column: span 2; }
  .page-head .btn { padding: 7px 10px; }
  /* компактна картка: клієнт | сума / гази | статус / дата | водій */
  table.stack.all-orders tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 5px;
    grid-template-areas: "c s" "g g" "st st" "dr dr" "d d"; padding: 10px 12px; }
  table.stack.all-orders td { display: block; padding: 0; min-width: 0; }
  table.stack.all-orders td::before { display: none !important; }
  table.stack.all-orders td:nth-child(1) { grid-area: c; }
  table.stack.all-orders td:nth-child(2) { grid-area: d; font-size: 13px; color: var(--muted); text-align: left; }
  table.stack.all-orders td:nth-child(3) { grid-area: g; text-align: left; }
  table.stack.all-orders td:nth-child(4) { grid-area: s; text-align: right; }
  table.stack.all-orders td:nth-child(5) { grid-area: dr; text-align: left; font-size: 13px; }
  table.stack.all-orders td:nth-child(5) .ao-v::before { content: "Водій: "; color: var(--muted); }
  table.stack.all-orders td:nth-child(2) { border-top: 1px solid var(--line); padding-top: 6px; margin-top: 2px; }
  table.stack.all-orders td:nth-child(5) .ao-sub { display: inline; }
  table.stack.all-orders td:nth-child(5) .ao-sub::before { content: " · "; }
  /* статуси — окремим рядком, з переносом: дві плашки («Доставлено» + «Документи…») не стискають назву клієнта */
  table.stack.all-orders td:nth-child(6) { grid-area: st; text-align: left; min-width: 0; }
  table.stack.all-orders td:nth-child(6) .ao-v { display: flex; flex-wrap: wrap; gap: 6px; }
  table.stack.all-orders td:nth-child(4) .num { font-weight: 600; }
  .ao-st .docs-tg { justify-content: flex-end; margin-top: 4px; }
}

/* заплановано наперед (сторінка «Замовлення») */
.upcoming { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: -4px 0 14px; }
.upcoming .up-label { font-size: 13px; color: var(--muted); margin-right: 2px; }
.o-created { font-size: 12px; color: var(--faint); margin-top: 2px; }
/* історія замовлення (сторінка «Усі замовлення») */
.ao-hist { min-width: 200px; }
.h-row { display: block; font-size: 13px; line-height: 1.45; white-space: nowrap; }
.h-what { display: inline-block; min-width: 98px; color: var(--muted); }
.h-who { color: var(--faint); }
.h-delivered .h-what { color: var(--ok); }
.h-docs .h-what { color: var(--ok); }
.h-cancelled .h-what { color: var(--muted); }
.h-nodocs { color: var(--warn); }
.h-plan { color: var(--ink); }
@media (max-width: 720px) {
  .ao-hist { min-width: 0; }
  .h-row { font-size: 12.5px; }
  .h-what { min-width: 96px; }
}
/* комп'ютер: статус має бути видно без гортання таблиці вбік (10.11.2026). Сторінка «Усі замовлення» ширша за інші
   (таблиця з історією не вміщалась у 1040px); на вужчому екрані позиції й «хто» в історії переносяться */
@media (min-width: 1240px) {
  body:has(form#filters) main, body:has(form#filters) .top-in, body:has(form#filters) .brbar-in { max-width: 1240px; }
  .all-orders td:nth-child(3) .it-row { white-space: nowrap; }
}
@media (min-width: 721px) and (max-width: 1239px) {
  .all-orders .h-row { white-space: normal; }
  .all-orders .h-what, .all-orders .h-row .num, .all-orders .h-who { white-space: nowrap; }
  .all-orders .h-who { display: inline-block; }
}
@media (min-width: 721px) { .all-orders .ao-st { min-width: 0; } }
.it-row { display: block; }
.sale-tag { display: inline-block; font-size: 11px; font-weight: 600; line-height: 1; padding: 3px 6px; border-radius: 999px;
            background: #eef3ff; color: #2f5bb7; vertical-align: 2px; text-transform: lowercase; }

/* маршрут водія */
.route-hint { margin: 0 0 10px; }
.route-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rcard { display: flex; align-items: center; gap: 10px; background: var(--card, #fff); border: 1px solid var(--line-strong); border-radius: 12px;
  padding: 8px 8px 8px 12px; }
.rcard.moved { animation: rflash .6s ease; }
@keyframes rflash { from { background: #e6f0fb; border-color: var(--accent); } to { background: var(--card, #fff); } }
.r-no { min-width: 26px; height: 26px; border-radius: 13px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; flex: none; }
.r-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.r-addr { font-weight: 600; font-size: 15px; line-height: 1.3; }
.r-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.r-due { color: var(--warn); }
.r-btns { display: flex; gap: 6px; flex: none; }
.r-btns .btn { width: 44px; height: 44px; padding: 0; font-size: 20px; }
.rcard:first-child .r-up, .rcard:last-child .r-down { opacity: .35; }
.route-save { position: sticky; bottom: 0; display: flex; gap: 8px; padding: 12px 0; margin-top: 8px;
  background: linear-gradient(to top, var(--bg, #f3f4f6) 70%, transparent); }
.route-save .btn.primary { flex: 1; }
.dcard-new { display: inline-block; font-size: 12px; font-weight: 600; color: #fff; background: var(--accent); border-radius: 10px;
  padding: 2px 9px; margin-bottom: 6px; }
.r-new { align-self: flex-start; font-size: 11px; font-weight: 600; color: #fff; background: var(--accent); border-radius: 9px; padding: 1px 7px; margin: 3px 0 1px; }
/* водій: виконані за період */
.drv-presets { margin-top: 2px; }
.drv-period { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 12px; font-size: 14px; color: var(--muted); }
.drv-period label { display: flex; align-items: center; gap: 6px; margin: 0; }
.drv-period input[type=date] { width: auto; min-width: 0; padding: 6px 8px; }
.drv-stats .st-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.drv-stats .st-v { display: block; font-size: 22px; font-weight: 700; line-height: 1.2; }
.drv-stats .st-l { display: block; font-size: 12px; color: var(--muted); }
.drv-tabs a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 380px) { .drv-tabs a { font-size: 12.5px; padding: 8px 2px; } .drv-tabs .badge { padding: 0 5px; } }

/* філіали */
.brbar { background: var(--surface); border-bottom: 1px solid var(--line); }
.brbar-in { max-width: 1040px; margin: 0 auto; padding: 8px 16px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.brbar-k { font-size: 13px; color: var(--muted); margin-right: 4px; }
.br-tag { display: inline-block; font-size: 11.5px; font-weight: 600; color: #4b5563; background: #eef0f3; border-radius: 9px; padding: 1px 8px; vertical-align: middle; }
.who-br { display: inline-block; margin-left: 6px; font-size: 12px; color: #c8d0d9; }
.br-cols th.br-h, .br-cols td.br-c { text-align: right; }
.pt-branch { display: flex; align-items: center; gap: 8px; }
.pt-branch select { width: auto; }
.point.ro { background: #f7f8fa; }
.point.ro .ro-line { font-size: 14px; color: var(--ink); }
.cprice-grid { display: grid; gap: 4px 12px; align-items: center; }
.cprice-grid .cg-h { font-size: 12px; color: var(--muted); }
.br-1 { --brc: #2b5f9e; --brbg: #eaf2fb; --brline: #c5d9f0; }
.br-2 { --brc: #7a4bb0; --brbg: #f3eefa; --brline: #dccdf0; }
.br-3 { --brc: #1f7a6d; --brbg: #e8f5f2; --brline: #bfe2db; }
.br-4 { --brc: #a5561c; --brbg: #fbf0e7; --brline: #f0d3bb; }
.br-tag[class*="br-"] { color: var(--brc, #4b5563); background: var(--brbg, #eef0f3); }
.form-branch { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 16px; padding: 12px 14px;
  background: var(--brbg, #f1f3f5); border: 1px solid var(--brline, var(--line)); border-left: 4px solid var(--brc, var(--steel)); border-radius: var(--radius); }
.form-branch label { margin: 0; font-size: 14px; font-weight: 600; color: var(--brc, var(--ink)); }
.form-branch .fb-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brc, var(--steel)); flex: none; }
.form-branch select { width: auto; font-weight: 600; color: var(--brc, var(--ink)); border-color: var(--brline, var(--line-strong)); background-color: #fff; }
.form-branch .fb-hint { font-size: 13px; color: var(--muted); }
@media (max-width: 520px) { .form-branch select { flex: 1; min-width: 0; } .form-branch .fb-hint { flex-basis: 100%; } }
.chk-row { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.point-head { flex-wrap: wrap; row-gap: 6px; }
.pt-branch { margin: 0; font-size: 13px; color: var(--muted); }
@media (max-width: 520px) { .point-head .pt-branch { order: 3; flex-basis: 100%; } .pt-branch select { flex: 1; min-width: 0; } }
.set-tabs { overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.set-tabs::-webkit-scrollbar { display: none; }
.set-tabs a { white-space: nowrap; }
@media (max-width: 420px) { .set-tabs a { padding-left: 10px; padding-right: 10px; font-size: 13.5px; } }

/* довгі назви клієнтів не виштовхують плашку статусу за картку (огляд 30.10.2026) */
.o-title { min-width: 0; overflow-wrap: anywhere; }
.o-head .badge { flex: none; }
.order-title-badge { vertical-align: middle; margin-left: 8px; font-size: 13px; }
.gas-locked { color: var(--muted); white-space: nowrap; cursor: help; }
.ro-field { padding: 8px 0; color: var(--ink); }

/* сповіщення водія (31.10.2026) */
.drv-notice { position: sticky; top: 0; z-index: 40; margin: 0 0 12px; padding: 10px 12px; background: #fff6dd; border: 1px solid #ecd27e;
  border-radius: var(--radius); box-shadow: 0 4px 14px rgba(16,24,40,.12); }
.drv-notice-list { list-style: none; margin: 0 0 8px; padding: 0; max-height: 45vh; overflow-y: auto; }
.drv-notice-list li { padding: 6px 0; border-bottom: 1px solid #f1e3b5; font-size: 15px; }
.drv-notice-list li:last-child { border-bottom: 0; }
.drv-notice-list .n-gone b { color: #a33; }
.drv-notice-list .n-sub { color: var(--muted); font-size: 13px; }
.drv-notice-ok { width: 100%; min-height: 44px; font-weight: 600; }
.is-fresh { box-shadow: 0 0 0 2px #e0b23a; position: relative; }
.is-fresh::after { content: "Нове"; position: absolute; top: -9px; right: 10px; background: #e0b23a; color: #fff; font-size: 11px;
  font-weight: 700; padding: 1px 7px; border-radius: 9px; }

/* хрестик на повідомленнях, згорнутий блок водія, маршрут у менеджера (31.10.2026) */
.flash { display: flex; align-items: flex-start; gap: 8px; }
.flash > span { flex: 1; }
.flash-x { flex: none; border: 0; background: none; font-size: 22px; line-height: 1; color: var(--muted); padding: 0 4px; margin: -3px -6px -3px 0; cursor: pointer; min-width: 32px; min-height: 28px; }
.flash-x:hover { color: var(--ink); }
.drv-fold > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; min-height: 28px; }
.drv-fold > summary::-webkit-details-marker { display: none; }
.drv-fold > summary .drv-k b { color: var(--ink); font-size: 14px; }
.drv-fold .fold-hint::after { content: "показати ▾"; font-size: 13px; color: var(--accent); white-space: nowrap; }
.drv-fold[open] .fold-hint::after { content: "сховати ▴"; }
.drv-fold[open] > summary { margin-bottom: 6px; }
.route-note { font-size: 13px; color: var(--muted); background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); padding: 7px 10px; margin: 0 0 10px; }
.off-route { display: inline-block; font-size: 11px; font-weight: 600; color: #fff; background: var(--accent); border-radius: 9px; padding: 1px 7px; }

/* призначення водія з картки замовлення (01.11.2026) */
.dp-chips summary { list-style: none; cursor: pointer; }
.dp-chips summary::-webkit-details-marker { display: none; }
.dp-change { font-size: 13px; color: var(--accent); text-decoration: underline; margin-left: 6px; }
.dp-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dp-row .chip { cursor: pointer; font: inherit; font-size: 14px; min-height: 34px; }
.dp-row .dp-off { color: var(--muted); border-style: dashed; }
.dp-none.dp-chips { background: var(--warn-bg); border: 1px solid var(--warn); border-radius: var(--radius); padding: 6px 8px; }
.dp-warn { color: var(--warn); font-weight: 600; font-size: 14px; }

/* схожий клієнт уже є (01.11.2026) */
.dup-box { border: 1px solid var(--warn); background: var(--warn-bg); border-radius: var(--radius); padding: 10px 12px; margin-top: 16px; }
.dup-head { font-weight: 600; color: var(--warn); margin-bottom: 6px; }
.dup-list { list-style: none; margin: 0; padding: 0; }
.dup-list li { padding: 8px 0; border-top: 1px dashed var(--line-strong); }
.dup-list li:first-child { border-top: 0; }
.dup-list .btn { margin-top: 6px; }
.dup-why { font-size: 12px; color: var(--warn); margin-left: 6px; }
.dup-foot { margin-top: 8px; font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
form.is-sending button[disabled] { opacity: .6; cursor: progress; }
.dup-why.by-phone { font-weight: 600; }
.ph-hint { font-size: 13px; color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn); border-radius: var(--radius); padding: 5px 8px; margin: 4px 0 6px; }
.ph-hint a { color: var(--warn); font-weight: 600; }
.dup-who { font-size: 13px; margin-top: 2px; }
.citem-n b { color: var(--ink); font-weight: 600; }

/* список клієнтів на телефоні: довга назва + «замовлень N» + менеджер не розпирають картку (04.11.2026) */
@media (max-width: 720px) {
  .citem { grid-template-columns: minmax(0, 1fr); }
  .citem-main { flex-wrap: wrap; min-width: 0; }
  .citem-name { flex: 1 1 60%; min-width: 0; overflow-wrap: anywhere; }
  .citem-mgr { flex-basis: 100%; }
  .citem-prices { overflow-wrap: anywhere; }
}
/* оренда тари (024): що робимо + балон + шт + ✕ */
.sales.rents .sitem { grid-template-columns: 190px 1fr 70px 32px; }
.sales.rents .sitem.head span:last-child { display: none; }
@media (max-width: 720px) {
  .sales.rents .sitem { grid-template-columns: 1fr 70px 30px; grid-template-areas: "r r d" "g q q"; }
  .sales.rents .sitem .r-dir { grid-area: r; } .sales.rents .sitem .s-sel { grid-area: g; }
  .sales.rents .sitem .s-qty { grid-area: q; } .sales.rents .sitem .sdel { grid-area: d; }
  .sales.rents .sitem.head { display: none; }
}
/* сторінки в «Усіх замовленнях» */
.ao-pager { flex-wrap: wrap; align-items: center; gap: 6px; }
.ao-pager .pager-gap { color: var(--muted); padding: 0 2px; }
.ao-shown { text-align: center; margin-top: 6px; }
.presets .btn.on, .ao-pager .btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
/* передача замовлення в інший філіал і попередження про дубль (10.11.2026) */
.handover { margin-top: 6px; font-size: 13px; }
.handover summary { cursor: pointer; color: var(--muted); text-decoration: underline dotted; list-style: none; display: inline; }
.handover summary::-webkit-details-marker { display: none; }
.handover[open] summary { color: var(--ink); }
.handover-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0 4px; }
.handover-form select { flex: 0 1 180px; min-width: 0; }
.handover-form input { flex: 1 1 160px; min-width: 0; }
.o-handover-note { font-size: 13px; color: #6b3fa0; margin-top: 3px; }
.dup-orders { margin-bottom: 10px; }
.dup-orders ul { margin: 6px 0; padding-left: 18px; }
.dup-orders .dup-acts { margin-top: 8px; }
.handover-page { margin-top: 12px; font-size: 14px; }
.handover-page summary { font-size: 14px; }
/* помічник (10.11.2026) */
.help-open { margin-left: 8px; background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px; padding: 4px 11px; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.help-open:hover { background: rgba(255,255,255,.2); }
.help-panel { position: fixed; z-index: 60; right: 16px; bottom: 16px; width: 400px; max-width: calc(100vw - 32px);
  height: min(620px, calc(100vh - 90px)); background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18); display: flex; flex-direction: column; overflow: hidden; }
.help-panel[hidden] { display: none; }
.help-top { display: flex; align-items: baseline; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.help-top .sub { font-size: 12px; flex: 1 1 auto; min-width: 0; }
.help-new { background: none; border: 0; color: var(--muted); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }
.help-x { background: none; border: 0; font-size: 22px; line-height: 1; cursor: pointer; color: var(--muted); padding: 0 2px; }
.help-msgs { flex: 1 1 auto; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.help-hint { font-size: 13px; color: var(--muted); }
.help-msg { max-width: 92%; padding: 8px 11px; border-radius: 12px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.help-msg.me { align-self: flex-end; background: var(--accent); color: #fff; white-space: pre-wrap; }
.help-msg.bot { align-self: flex-start; background: #f2f4f7; }
.help-msg.bot p { margin: 0 0 6px; } .help-msg.bot p:last-child { margin-bottom: 0; }
.help-msg.bot ul, .help-msg.bot ol { margin: 4px 0 6px; padding-left: 20px; }
.help-msg.wait { color: var(--muted); font-style: italic; }
.help-msg.err { background: var(--warn-bg); color: var(--ink); }
.help-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); align-items: flex-end; }
.help-form textarea { flex: 1 1 auto; min-width: 0; resize: none; font: inherit; font-size: 15px; }
.help-form.is-busy button { opacity: .6; pointer-events: none; }
.help-log .help-q { font-weight: 600; margin: 4px 0; white-space: pre-wrap; }
.help-log .help-a { font-size: 14px; color: var(--ink); white-space: pre-wrap; }
.help-log .help-err .help-a { color: var(--warn); }
@media (max-width: 720px) {
  .help-panel { inset: 0; width: 100%; max-width: none; height: 100%; border-radius: 0; border: 0; }
  body.help-on { overflow: hidden; }
}
@media (max-width: 1000px) {
  .nav .help-open { align-self: flex-start; margin: 6px 16px 2px; padding: 7px 14px; font-size: 15px; }
}
/* огляд власника на телефоні: шість періодів + «Інший період» — у кілька рядків, без гортання вбік */
@media (max-width: 720px) { .presets.ov-presets { flex-wrap: wrap; overflow-x: visible; } }
/* каса: з чого складається «Разом» */
.totals > .tot-parts { flex: 1 1 100%; grid-column: 1 / -1; padding: 7px 14px; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
/* огляд власника: довга назва клієнта чи позиції не розпирає панель ширше екрана */
.ov-grid > * { min-width: 0; }
.ov-tbl td { overflow-wrap: anywhere; }
.ov-tbl td .sub { white-space: normal; overflow-wrap: normal; }

/* передані між філіалами замовлення (11.11.2026): «Азб → Відр» */
.br-arrow { margin: 0 3px; color: var(--muted); font-size: 12px; }
.ao-handed { display: block; margin-top: 3px; }
.order.is-handed .o-handover-note { font-weight: 600; }
.filters .f-search.with-handed { grid-column: span 3; }
@media (min-width: 721px) and (max-width: 980px) { .filters .f-search.with-handed { grid-column: span 3; } }
@media (max-width: 720px) { .filters .f-search.with-handed { grid-column: span 2; } }
.handed-box { margin-bottom: 10px; }

/* оголошення для користувачів (11.11.2026): вгорі сторінки, доки не натиснуть «Я прочитав(ла)» */
.notice { background: #fff8e1; border: 1px solid #f0c75e; border-left: 5px solid #e0a800; border-radius: 10px;
  padding: 14px 16px; margin: 0 0 16px; }
.notice-t { font-size: 17px; margin: 0 0 8px; }
.notice-b { font-size: 14px; line-height: 1.5; }
.notice-b p { margin: 0 0 6px; }
.notice-b ul { margin: 0 0 12px; padding-left: 20px; }
.notice-b li { margin: 3px 0; }
.notice form { margin: 0; }
.warn-t { color: var(--warn); font-weight: 600; }

/* товарний чек (12.11.2026) */
.o-print { white-space: nowrap; }

/* «Дивитись як» (адмін бачить сайт очима менеджера) */
.viewas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px;
  margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: #fff4d6; border: 1px solid #e8c766; color: #5a4300; }
.viewas form { margin: 0; }
.viewas-f { margin: 0; flex: none; }
.viewas-f .btn { white-space: nowrap; }
@media (max-width: 480px) { .uitem { flex-wrap: wrap; } .viewas-f { order: 3; } }

/* Тара в переміщенні (контейнер, касета): окремий блок, лише кількість */
.tareitems { margin: 10px 0 6px; padding-top: 8px; border-top: 1px dashed var(--line); }
.tareitems .xitem.head { margin-bottom: 2px; font-size: 13px; color: var(--muted); } .tareitems .xitem.head span:first-child { font-weight: 600; color: var(--ink); }
.tareitems .xitem { display: grid; grid-template-columns: 1fr 120px 32px; gap: 8px; align-items: center; margin-bottom: 6px; }
.tareitems .xq { display: block; margin: 0; } .tareitems .xq span { display: none; } .tareitems .xq input { width: 100%; }
@media (max-width: 720px) { .tareitems .xitem { grid-template-columns: 1fr 96px 30px; } }