:root {
  --bg: #f4f6f9; --surface: #fff; --text: #1b2430; --muted: #66727f; --line: #dde3ea;
  --primary: #1f3a5f; --primary-text: #fff; --accent: #f4b400;
  --ok: #1e8e3e; --warn: #b26a00; --danger: #c5221f; --lock: #7b3fb5;
  --radius: 8px;
  font-family: "Segoe UI", Arial, sans-serif; font-size: 15px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; border: 1px solid var(--line); background: var(--surface); border-radius: 6px; padding: 6px 12px; }
button:hover { border-color: var(--primary); }
button.primary { background: var(--primary); color: var(--primary-text); border-color: var(--primary); }
button.danger { color: var(--danger); }
button.small { padding: 2px 8px; font-size: 13px; }
button.icon { border: none; background: none; padding: 2px 4px; font-size: 15px; }
button:disabled { opacity: .5; cursor: default; }
input, select, textarea { border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; background: var(--surface); color: var(--text); width: 100%; }
input:disabled, select:disabled, textarea:disabled { background: #eef0f3; color: var(--muted); }
input[type=checkbox] { width: auto; }

/* ---------- shell ---------- */
header.top { display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: var(--primary); color: var(--primary-text); flex-wrap: wrap; }
header.top h1 { font-size: 18px; margin: 0; }
header.top .spacer { flex: 1; }
header.top button { background: transparent; color: inherit; border-color: rgba(255,255,255,.4); }
.conn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; background: rgba(255,255,255,.12); padding: 3px 10px; border-radius: 99px; }
.conn .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--danger); }
.conn.online .dot { background: #4cd964; }
nav.tabs { display: flex; gap: 4px; padding: 8px 16px 0; background: var(--surface); border-bottom: 1px solid var(--line); overflow-x: auto; }
nav.tabs button { border: none; border-bottom: 3px solid transparent; border-radius: 0; background: none; padding: 8px 12px; white-space: nowrap; }
nav.tabs button.active { border-bottom-color: var(--accent); font-weight: 600; }
main { padding: 16px; }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.toolbar input, .toolbar select { width: auto; }
.toolbar h2 { margin: 0 0 0 auto; font-size: 18px; }
.muted { color: var(--muted); }
.empty { color: var(--muted); padding: 16px; text-align: center; }

/* ---------- board ---------- */
.plants { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.column { background: #e9edf2; border-radius: var(--radius); padding: 8px; min-height: 120px; }
.column h3 { margin: 4px 4px 8px; font-size: 16px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px; cursor: grab; }
.plants { overflow-x: auto; }
.plant-title { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.plant-title .icon { font-size: 14px; color: var(--muted); }
.plant-title .icon:hover { color: var(--primary); }
/* A plant with no orders that day shrinks to a narrow column. */
.column.narrow { background: #eef1f5; }
.column.narrow h3 { font-size: 14px; flex-direction: column; }
.column.narrow .plant-sum { white-space: normal; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; margin-bottom: 8px; }
.card.locked { border-color: var(--lock); box-shadow: inset 4px 0 0 var(--lock); }
.card.cancelled { opacity: .55; }
.card-head { display: flex; align-items: center; gap: 6px; }
.card-head .time { font-weight: 700; font-size: 16px; }
.card-head .grow { flex: 1; font-weight: 600; }
.card .line { font-size: 14px; margin-top: 3px; }
.card .actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.badge { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 99px; background: #e8eef7; color: var(--primary); white-space: nowrap; }
.badge.s-בוצעה { background: #e3f4e8; color: var(--ok); }
.badge.s-בביצוע { background: #fff3d6; color: var(--warn); }
.badge.s-בוטלה { background: #fde7e7; color: var(--danger); }
.status-select { width: auto; padding: 2px 6px; font-size: 13px; border-radius: 99px; background: #e8eef7; color: var(--primary); }
.status-select.s-בוצעה { background: #e3f4e8; color: var(--ok); }
.status-select.s-בביצוע { background: #fff3d6; color: var(--warn); }
.status-select.s-בוטלה { background: #fde7e7; color: var(--danger); }
.progress { height: 6px; background: #e6e9ee; border-radius: 3px; margin-top: 6px; overflow: hidden; }
.progress > div { height: 100%; background: var(--ok); }
.progress.over > div { background: var(--danger); }
table.assign { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 13px; }
table.assign td { padding: 3px 2px; border-top: 1px solid var(--line); vertical-align: middle; }
table.assign tr.slot-empty td { background: #fafbfc; border-top: 1px dashed var(--line); font-size: 12px; }
table.assign tr.slot-empty.drop-hover td { background: #fff3d6; outline: none; }
table.assign .slot-no { width: 18px; text-align: center; color: var(--muted); font-weight: 700; }
table.assign tr.locked td { background: #f5effa; }
table.assign input { padding: 2px 4px; font-size: 13px; width: 90px; }

.bank { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); padding: 6px 10px; margin-bottom: 12px; font-size: 14px; }
.truck-chip { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.2; padding: 3px 10px; font-size: 13px; font-weight: 600; cursor: grab; }
.truck-chip.external { border-style: dashed; background: #f6f8fb; }
.truck-chip.assigned { background: #eef4ec; }
.plant-tag { font-size: 11px; font-weight: 600; color: #fff; background: var(--primary); border-radius: 99px; padding: 0 6px; margin-top: 2px; }
.obank { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; background: #fffaf0; border: 1px dashed var(--accent); border-radius: var(--radius); padding: 6px 10px; margin-bottom: 8px; font-size: 14px; }
.obank-title { flex-basis: 100%; display: flex; gap: 10px; align-items: baseline; }
.obank-day { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 8px 6px; min-width: 160px; }
.obank-day.current { border-color: var(--accent); box-shadow: 0 0 0 2px #f4b40044; }
.obank-day.nodate { background: #fdf5e6; }
.obank-day.later { background: #f6f8fb; }
.status-filter button { border-radius: 99px; }
.status-filter .muted-on { font-size: 12px; opacity: .75; margin-inline-start: 4px; }
.view-switch { display: flex; gap: 4px; margin-top: 4px; }
/* Keep the bank compact so the plants stay visible below it. */
.obank-chips { max-height: 190px; overflow-y: auto; }
.day-total { font-size: 12px; margin-bottom: 4px; }
.day-total .progress { height: 4px; margin-top: 2px; }
.obank.view-day .obank-day:not(.nodate):not(.later) { flex: 1; }
.obank.view-day .obank-chips { flex-direction: row; flex-wrap: wrap; max-height: 130px; }
.obank.view-day .obank-day.nodate { flex: 0 0 auto; min-width: 120px; }
.obank { overflow-x: auto; flex-wrap: nowrap; }
.obank-title { position: sticky; inset-inline-start: 0; }
.obank > .obank-title { flex-basis: auto; flex-direction: column; min-width: 120px; }
.obank-day-head { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; margin-bottom: 4px; }
.obank-chips { display: flex; flex-direction: column; gap: 4px; }
.badge.split { background: #efe6fa; color: var(--lock); cursor: help; }
.par-toggle { display: flex; gap: 6px; align-items: center; margin-top: 10px; font-size: 14px; font-weight: 600; }
.par-plant { display: inline-flex; gap: 4px; align-items: center; border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; }
.shared-line { background: #eef4ff; border-radius: 6px; padding: 2px 6px; }
.remain { margin: 6px 0 2px; padding: 4px 8px; border-radius: 6px; background: #fff3d6; color: #6b4200; font-size: 14px; }
.remain b { font-size: 16px; }
.remain { display: flex; align-items: flex-start; gap: 6px; }
.remain-text { flex: 1; }
.qty-edit { font-size: 12px; white-space: nowrap; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
.remain-here { font-weight: 600; margin-top: 2px; }
.remain.over { background: #fde7e7; color: var(--danger); font-weight: 700; }
.remain.done { background: #e3f4e8; color: var(--ok); font-weight: 600; }
.plant-sum { font-size: 12px; font-weight: 400; }
.next-tag { font-size: 11px; background: #eef4ff; color: var(--primary); border-radius: 4px; padding: 0 4px; white-space: nowrap; }
.route-gap td { font-size: 12px; color: var(--muted); background: #f6f8fb; padding: 2px 10px; }
.route-gap.over td { color: var(--danger); background: #fde7e7; }
.trip-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.split-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.split-row select { width: auto; min-width: 140px; }
.split-row input[type=number] { width: 80px; }
.split-row input[type=time] { width: auto; }
.split-label { font-size: 12px; font-weight: 600; min-width: 40px; }
.split-row[data-auto="yes"] { background: #fffaf0; border-radius: 6px; padding: 2px 4px; }
.rest-ask { font-size: 13px; font-weight: 700; color: var(--danger); }
.split-row[data-auto="yes"] select:invalid, .split-row select:invalid { border-color: var(--danger); box-shadow: 0 0 0 2px #c5221f33; }
.split-sum { font-size: 13px; }
.linklike { border: none; background: none; padding: 0; font-weight: 700; color: var(--primary); text-decoration: underline; }
.order-chip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: right; padding: 4px 10px; font-size: 13px; cursor: grab; max-width: 260px; }
.fixed-statuses { margin-bottom: 4px; }
.fixed-statuses .badge { background: #e6e9ee; color: var(--muted); }
.order-chip-wrap { display: flex; flex-direction: column; border-radius: 8px; border-inline-start: 4px solid #b0b8c4; background: var(--surface); }
.order-chip-wrap .order-chip { border-radius: 0 6px 0 0; }
.bank-status { font-size: 11px; padding: 1px 4px; border-radius: 0 0 6px 0; border-top: none; background: #f6f8fb; }
.order-chip-wrap.bs-ok { border-inline-start-color: var(--ok); }
.order-chip-wrap.bs-ok .bank-status { background: #e3f4e8; color: var(--ok); }
.order-chip-wrap.bs-phone { border-inline-start-color: var(--warn); }
.order-chip-wrap.bs-phone .bank-status { background: #fff3d6; color: var(--warn); }
.order-chip-wrap.bs-changed { border-inline-start-color: var(--lock); }
.order-chip-wrap.bs-changed .bank-status { background: #efe6fa; color: var(--lock); font-weight: 700; }
.order-chip-wrap.bs-closed { border-inline-start-color: #1a73e8; }
.order-chip-wrap.bs-closed .bank-status { background: #e8f0fe; color: #1a73e8; font-weight: 700; }
.order-chip-wrap.bs-no { border-inline-start-color: var(--danger); opacity: .7; }
.order-chip-wrap.bs-no .bank-status { background: #fde7e7; color: var(--danger); }
.order-chip small { color: var(--muted); font-size: 11px; }
.plant-trucks { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.plant-trucks .small-title { flex-basis: 100%; }
.truck-chip.plant { border-bottom-width: 4px; }
/* ---------- plant loading schedule ---------- */
.sched-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 6px; }
.sched-stat { background: #f6f8fb; border-radius: 10px; padding: 8px 10px; text-align: center; }
.sched-stat b { display: block; font-size: 20px; color: var(--primary); }
.sched-stat span { font-size: 12px; color: var(--muted); }
.sched-stat.warn { background: #fff3d6; } .sched-stat.warn b { color: var(--warn); }
.sched-stat.ok { background: #e3f4e8; } .sched-stat.ok b { color: var(--ok); }
.sched-hint { font-size: 12px; color: var(--muted); margin: 4px 0 10px; }
.sched-list { display: flex; flex-direction: column; gap: 6px; }
.sched-row { display: grid; grid-template-columns: 110px 1fr 230px; gap: 12px; align-items: center; background: var(--surface);
  border: 1px solid var(--line); border-inline-start: 4px solid var(--primary); border-radius: 10px; padding: 8px 12px; }
.sched-row.open { border-inline-start-color: var(--accent); background: #fffdf6; border-style: dashed; border-inline-start-style: solid; }
.sched-when { display: flex; flex-direction: column; gap: 2px; }
.sched-when small, .sched-what small { font-size: 12px; color: var(--muted); }
.sched-what { display: flex; flex-direction: column; min-width: 0; }
.sched-what b { font-size: 15px; }
.sched-what span { font-size: 13px; color: var(--text); }
.sched-who { display: flex; flex-direction: column; gap: 3px; }
.sched-wait { color: var(--warn) !important; font-weight: 600; font-size: 12px; }
.sched-time { width: 100%; padding: 4px 6px; font-weight: 700; font-size: 16px; border-radius: 8px; }
.sched-truck { width: 100%; padding: 5px 6px; font-size: 13px; border-radius: 8px; }
.sched-gap { align-self: center; font-size: 12px; color: var(--muted); background: #eef1f5; border-radius: 99px; padding: 2px 12px; }
.sched-gap.over { color: var(--danger); background: #fde7e7; font-weight: 600; }
.sched-pending { margin-top: 18px; border-top: 2px dashed var(--line); padding-top: 10px; }
.sched-pending h3 { margin: 0 0 8px; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.sched-count { font-size: 12px; background: var(--accent); color: #1b2430; border-radius: 99px; padding: 1px 9px; }
.sched-group { background: #f6f8fb; border-radius: 10px; padding: 8px 10px; margin-bottom: 10px; }
.sched-group h4 { margin: 0 0 6px; font-size: 13px; color: var(--muted); font-weight: 600; }
.sched-pend { display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; align-items: center; background: var(--surface);
  border-radius: 8px; padding: 6px 10px; margin-bottom: 6px; }
.sched-clock { font-weight: 700; font-size: 16px; color: var(--primary); }
.sched-done { color: var(--ok); font-weight: 600; }
@media (max-width: 700px) {
  .sched-stats { grid-template-columns: repeat(3, 1fr); }
  .sched-row, .sched-pend { grid-template-columns: 1fr; }
}
.notify-btn { background: #e7f8ee; border-color: #25d366; }
.badge.reply-ok { background: #e3f4e8; color: var(--ok); font-weight: 700; }
.badge.reply-bad { background: #fde7e7; color: var(--danger); font-weight: 700; white-space: normal; }
.badge.reply-wait { background: #fff3d6; color: var(--warn); }
.immediate { color: #c5221f; font-size: 14px; white-space: nowrap; }
.nav-link { font-size: 12px; background: #e8f0fe; color: #1a73e8; border-radius: 4px; padding: 0 5px; text-decoration: none; white-space: nowrap; }
.badge.request { background: #e6f4ea; color: var(--ok); font-weight: 600; }
.request-note { background: #e6f4ea; border-radius: 6px; padding: 6px 10px; }
.fifo-on { background: #1a73e8 !important; color: #fff !important; border-color: #1a73e8 !important; }
table.assign tr.slot-empty.fifo td { background: #eef4ff; }
.arrival-truck { font-size: 14px; }
.arrive-btn { color: var(--ok); font-weight: 700; white-space: nowrap; }
.queue-no { display: inline-block; min-width: 16px; font-size: 11px; color: #fff; background: var(--primary); border-radius: 99px; text-align: center; margin-inline-end: 2px; }
.plant-chip-wrap { display: inline-flex; align-items: stretch; }
.plant-chip-wrap .truck-chip { border-start-end-radius: 0; border-end-end-radius: 0; }
.chip-route { border-radius: 0; border-inline-start: none; padding: 0 5px; font-size: 12px; }
.plant-chip-wrap .chip-route:last-child { border-start-end-radius: 6px; border-end-end-radius: 6px; }
dialog.wide { width: min(1100px, calc(100vw - 24px)); }
.route-driver { border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 10px; margin-bottom: 8px; }
.route-driver summary { cursor: pointer; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.chip-x { border-start-start-radius: 0; border-end-start-radius: 0; border-inline-start: none; padding: 0 6px; font-size: 11px; color: var(--danger); }
.truck-chip.plant.locked { box-shadow: inset 0 0 0 2px var(--lock); }
.sb-0 { border-bottom-color: #5f6b7a; } .sb-1 { border-bottom-color: #b26a00; } .sb-2 { border-bottom-color: #1a73e8; }
.sb-3 { border-bottom-color: #7b3fb5; } .sb-4 { border-bottom-color: #1e8e3e; }
.truck-chip small { font-weight: 400; color: var(--muted); font-size: 11px; }
.plant-trucks { background: var(--surface); border-radius: var(--radius); padding: 6px 8px; margin-bottom: 8px; }
.small-title { font-size: 12px; margin-bottom: 2px; }
.ptruck { display: flex; align-items: center; gap: 6px; padding: 3px 0; border-top: 1px solid var(--line); font-size: 13px; cursor: grab; }
.ptruck:first-of-type { border-top: none; }
.ptruck select { width: auto; max-width: 110px; padding: 1px 4px; font-size: 12px; flex: 1; }
.drop-hover { outline: 2px dashed var(--accent); outline-offset: 2px; }
.status-chip { font-size: 12px; padding: 2px 8px; border-radius: 99px; border: none; color: #fff; }
.st-0 { background: #5f6b7a; } .st-1 { background: #b26a00; } .st-2 { background: #1a73e8; } .st-3 { background: #7b3fb5; } .st-4 { background: #1e8e3e; }

/* ---------- tables ---------- */
table.list { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
table.list th, table.list td { padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--line); }
table.list th { background: #eef1f5; font-weight: 600; font-size: 14px; }
table.list tr.clickable:hover td { background: #f6f8fb; cursor: pointer; }
.table-wrap { overflow-x: auto; }

/* ---------- dialogs & forms ---------- */
dialog { border: none; border-radius: 10px; padding: 0; width: min(720px, calc(100vw - 24px)); max-height: calc(100vh - 32px); box-shadow: 0 10px 40px rgba(0,0,0,.25); }
dialog::backdrop { background: rgba(10, 20, 35, .45); }
.dlg-head { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); gap: 8px; }
.dlg-head h2 { margin: 0; font-size: 18px; flex: 1; }
.dlg-body { padding: 16px; overflow-y: auto; max-height: calc(100vh - 160px); }
.dlg-foot { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); justify-content: flex-start; }
.dlg-foot .spacer { flex: 1; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.form-grid .wide { grid-column: 1 / -1; }
.field label { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.field label .lock { margin-inline-start: auto; }
.field.is-locked input, .field.is-locked select { border-color: var(--lock); }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; margin: 0; }
legend { font-size: 13px; color: var(--muted); padding: 0 6px; }
.lock-on { color: var(--lock); }
.history td { font-size: 13px; }

/* ---------- login ---------- */
.login { max-width: 360px; margin: 10vh auto; background: var(--surface); padding: 24px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,.08); }
.login h1 { margin-top: 0; font-size: 22px; }
.login .field { margin-bottom: 12px; }
.login button { width: 100%; }

#toasts { position: fixed; bottom: 16px; left: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 10; }
.toast { background: #1b2430; color: #fff; padding: 10px 14px; border-radius: 8px; max-width: 360px; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.toast.error { background: var(--danger); }

@media (max-width: 900px) {
  main { padding: 12px; }
}

/* ---------- load progress on truck rows ---------- */
.trip-state { white-space: nowrap; }
.trip-btn { background: #fff3d6; border-color: #e8c27a; color: var(--warn); font-weight: 600; }
.trip-btn.done { background: #e3f4e8; border-color: #9fd3ae; color: var(--ok); }
.badge.trip-road { background: #fff3d6; color: var(--warn); }
.badge.trip-done { background: #e3f4e8; color: var(--ok); }

/* ---------- shared sites picker ---------- */
.site-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; align-items: center; }
.site-chip { display: inline-flex; align-items: center; gap: 4px; background: #e8f0fe; color: var(--primary); border-radius: 99px; padding: 3px 10px; font-size: 13px; }
.site-chip button { border: none; background: none; padding: 0 2px; cursor: pointer; color: var(--muted); font-size: 11px; }

[data-action="customer-agreements"] { white-space: nowrap; }

/* ---------- agreement dialog (step by step) ---------- */
.ag-step { background: #f6f8fb; border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.ag-step h4 { margin: 0 0 8px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.ag-no { width: 24px; height: 24px; border-radius: 50%; background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.ag-item { display: grid; grid-template-columns: 1fr 130px auto; gap: 8px; align-items: end; background: var(--surface); border-radius: 8px; padding: 8px; margin-bottom: 6px; }
.ag-item .field { margin: 0; }
.ag-empty { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.ag-yesno { display: inline-flex; gap: 4px; align-items: center; font-weight: 600; cursor: pointer; }
.ag-more summary { cursor: pointer; color: var(--muted); margin: 4px 0 8px; }
@media (max-width: 700px) { .ag-item { grid-template-columns: 1fr 1fr; } }

.ag-pick { display: flex; gap: 6px; }
.ag-pick button { white-space: nowrap; }

/* ---------- settings sub-tabs ---------- */
.subtabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 2px solid var(--line); margin-bottom: 14px; }
.subtabs button { border: none; background: none; padding: 8px 14px; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer;
  border-bottom: 3px solid transparent; margin-bottom: -2px; border-radius: 0; }
.subtabs button:hover { color: var(--primary); }
.subtabs button.active { color: var(--primary); border-bottom-color: var(--primary); }

.plant-tabs button { font-size: 14px; }


/* ---------- delivery notes (תעודות) ---------- */
.ticket-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
.ticket-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 14px; background: #f6f8fb; border-bottom: 1px solid var(--line); }
.ticket-head b { font-size: 16px; }
.ticket-date { background: var(--primary); color: #fff; border-radius: 99px; padding: 2px 10px; font-size: 13px; font-weight: 600; }
.ticket-table td, .ticket-table th { vertical-align: middle; }
.ticket-table input { padding: 4px 6px; }
.ticket-table tr.ticket-closed { background: #f3faf5; }
.ticket-table tr.ticket-closed td { color: var(--muted); }
.ok-text { color: var(--ok); font-weight: 600; }
.warn-text { color: var(--warn); font-weight: 600; }

/* ---------- plant manager screen ---------- */
.pm-layout { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; margin-top: 10px; }
.pm-side { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; position: sticky; top: 8px; }
.pm-side h3 { margin: 0 0 8px; font-size: 15px; }
.pm-orders { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; align-content: start; }
.pm-orders .card { margin: 0; }
.pm-upcoming { display: flex; flex-direction: column; gap: 4px; max-height: 360px; overflow-y: auto; }
.pm-up { display: flex; flex-direction: column; align-items: flex-start; text-align: right; font-size: 13px; padding: 4px 8px; }
.pm-up small { color: var(--muted); }
@media (max-width: 800px) { .pm-layout { grid-template-columns: 1fr; } .pm-side { position: static; } }

/* ---------- QR for a user ---------- */
.qr-box { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.qr-box [data-qr] img, .qr-box [data-qr] canvas { display: block; margin: 0 auto; }
.qr-name { font-weight: 700; font-size: 16px; margin: 6px 0 0; }

/* ---------- "truck should be back" pop-ups ---------- */
#return-alerts { position: fixed; top: 70px; inset-inline-start: 50%; transform: translateX(50%); z-index: 1000; display: flex; flex-direction: column; gap: 8px; width: min(560px, calc(100vw - 32px)); }
.return-alert { display: flex; align-items: center; gap: 10px; background: #fff; border: 2px solid var(--warn); border-radius: 14px; padding: 12px 14px;
  box-shadow: 0 10px 30px rgba(20, 30, 50, .25); animation: ra-pop .25s ease-out; }
.ra-icon { font-size: 28px; }
.ra-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ra-text small { color: var(--muted); }
@keyframes ra-pop { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- dispatcher card: clickable customer name / remaining line, truck day-left ---------- */
.cust-link { font-weight: 600; text-decoration: none; color: var(--text); font-size: inherit; }
.cust-link:hover { text-decoration: underline; color: var(--primary); }
.remain-click[data-action] { cursor: pointer; }
.remain-click[data-action]:hover .remain { outline: 2px solid #1f3a5f33; }
.day-left { font-size: 11px; font-weight: 600; color: var(--ok); margin-top: 2px; }
.day-left.low { color: var(--warn); }
.day-left.done { color: var(--muted); }
.badge.s-משובצת, .status-select.s-משובצת { background: #e8eef7; color: var(--primary); }
.badge.st-placed { background: #e8eef7; color: var(--primary); }
.badge.st-approved { background: #fff3d6; color: var(--warn); }
.badge.st-done { background: #e3f4e8; color: var(--ok); }
.badge.st-cancelled { background: #fde7e7; color: var(--danger); }

/* ---------- truck on/off per day + day capacity ---------- */
.plant-chip-wrap { position: relative; }
.truck-onoff { border: none; background: none; padding: 0 2px; font-size: 13px; line-height: 1; color: #b3bac6; vertical-align: top; }
.truck-onoff.on { color: var(--ok); }
.truck-off .truck-chip { opacity: .45; background: #f1f2f4; }
.capacity { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; padding: 8px 12px; border-radius: var(--radius); margin-bottom: 8px; font-size: 14px; }
.capacity.ok { background: #e3f4e8; color: #14532d; }
.capacity.tight { background: #fff3d6; color: #6b4200; }
.capacity.over { background: #fde7e7; color: #7f1d1d; }
.notify-btn.reply-ok { background: #e3f4e8; color: var(--ok); border-color: #9fd3ae; }
.notify-btn.reply-bad { background: #fde7e7; color: var(--danger); border-color: #f1a9a7; }
.notify-btn.reply-wait { background: #fff3d6; color: var(--warn); border-color: #e8c27a; }
.notify-state { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 10px; margin-bottom: 12px; font-weight: 600; }
.notify-state.ok { background: #e3f4e8; color: #14532d; }
.notify-state.bad { background: #fde7e7; color: #7f1d1d; }
.notify-state.wait { background: #fff3d6; color: #6b4200; }
.off-select { width: auto; font-size: 13px; padding: 3px 6px; color: var(--muted); }
.day-off-row td { background: #fafafa; color: var(--muted); }
.day-status.on { color: var(--ok); font-weight: 600; }
.day-status.off { color: var(--danger); font-weight: 600; }

.order-chip-wrap.bs-cancelled { border-inline-start-color: var(--danger); opacity: .8; }
.order-chip-wrap.bs-cancelled .order-chip { text-decoration: none; background: #fdf3f3; }


/* ---------- required fields before placing an order ---------- */
.req-block { border: 2px solid #f1a9a7; background: #fff7f7; border-radius: 12px; padding: 10px 14px 4px; margin-bottom: 14px; }
.req-block legend { color: var(--danger); font-weight: 700; padding: 0 6px; }
.req-field label { color: var(--danger); font-weight: 700; }
.req-field input, .req-field select { border: 2px solid #e57373; background: #fff; }
.req-field.req-ok label { color: var(--ok); }
.req-field.req-ok input, .req-field.req-ok select { border-color: #9fd3ae; }
.req-shake { animation: req-shake .4s; }
@keyframes req-shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
.outlaw { background: #2b2b2b; color: #fff; border-color: #2b2b2b; }
.outlaw.on { background: var(--danger); border-color: var(--danger); }
.req-star { color: var(--danger); font-weight: 700; }
[data-price-box] .outlaw { margin-top: 6px; display: block; }
[data-price-box].req-missing input[name="price"] { border: 2px solid #e57373; }
[data-price-box][data-outlaw="yes"] input[name="price"] { text-decoration: line-through; opacity: .5; }

/* ---------- ✖ choices + emergency suspension ---------- */
.x-choices { display: flex; flex-direction: column; gap: 8px; }
.x-choices > button { display: flex; flex-direction: column; align-items: flex-start; text-align: right; gap: 2px; padding: 10px 14px; border-radius: 10px; }
.x-choices > button small { color: var(--muted); font-weight: 400; }
.x-choices > button.danger b { color: var(--danger); }
.x-suspend { border-color: #e8c27a; background: #fffaf0; }
.x-suspend b { color: #8a4b00; }
.card.suspended { border: 2px solid var(--danger); background: #fff5f5; }
.suspend-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; padding: 6px 10px; border-radius: 8px; background: var(--danger); color: #fff; font-weight: 700; }
.suspend-bar small { font-weight: 400; opacity: .85; flex: 1; }
.suspend-bar button { background: #fff; color: var(--danger); border: none; }

/* ---------- sites × plants table ---------- */
.sites-table th.plant-head { text-align: center; border-bottom: 2px solid var(--primary); }
.sites-table input { width: 70px; padding: 3px 6px; }
.sites-table tr.site-empty td:first-child b { color: var(--warn); }

/* ---------- group messages ---------- */
.bulk-list { max-height: 360px; overflow-y: auto; }
.bulk-list .bulk-preview { font-size: 12px; color: var(--muted); max-width: 320px; }
.bulk-list tr.bulk-sent td { background: #f3faf5; }
.bulk-list tr.bulk-sent .bulk-preview { color: var(--ok); font-weight: 600; }

.pump-notify { margin-top: 8px; border-color: #e8c27a; background: #fffaf0; border-radius: 10px; }

.pm-other-head { margin: 14px 0 6px !important; font-size: 14px !important; color: var(--muted); border-top: 1px solid var(--line); padding-top: 10px; }
.pm-other { display: flex; flex-wrap: wrap; gap: 4px; }
.pm-truck { display: inline-flex; flex-direction: column; background: #f6f8fb; border-radius: 8px; padding: 3px 8px; font-size: 13px; line-height: 1.2; }
.pm-truck small { color: var(--muted); font-size: 11px; }
/* Required inputs with the "required" attribute turn green once valid. */
.req-field:has(input[required]:valid) label { color: var(--ok); }
.req-field:has(input[required]:valid) input { border-color: #9fd3ae; }
.progress.two { display: flex; }
.progress.two > .p-out { background: var(--ok); }
.progress.two > .p-plan { background: #b9c6d8; }
.progress.two.over > .p-plan { background: var(--danger); }
.remain.planned { background: #e8eef7; color: var(--primary); }

button.pm-truck { border: none; cursor: pointer; text-align: right; }
button.pm-truck:hover { background: #e6ebf3; }


.time-btn { font-size: inherit; font-weight: 700; text-decoration: none; color: inherit; }
.time-btn:hover { text-decoration: underline; color: var(--primary); }


.shift-blocked { color: var(--danger) !important; font-weight: 600; margin: 4px 0 0; }


table.assign tr.before-start td { background: #fde7e7; }
table.assign tr.before-start td:nth-child(2) { color: var(--danger); font-weight: 700; }


.pace-warn { margin: 6px 0; padding: 6px 10px; border-radius: 8px; background: #fde7e7; color: #7f1d1d; font-size: 13px; font-weight: 600; }


table.assign tr.load-row { cursor: grab; }
table.assign tr.load-row.drop-hover td, table.assign tr[data-load-row].drop-hover td { background: #fff3d6; }


/* ---------- driver's day when changing a round's hour ---------- */
.lt-table input[type=time] { width: auto; padding: 3px 6px; }
.lt-table tr.lt-main td { background: #fff3d6; font-weight: 600; }
.lt-table tr.lt-before td, .lt-table tr.lt-done td { color: var(--muted); }
.lt-table tr.lt-released td { text-decoration: line-through; color: var(--danger); background: #fdf3f3; }
.ticket-bill { min-width: 170px; }
.ticket-bill select, .ticket-bill input { width: 100%; padding: 3px 6px; font-size: 13px; margin-bottom: 2px; }
.ticket-bill small { display: block; font-size: 11px; }
.ticket-table select.req-missing { border: 2px solid #e57373; color: var(--danger); }
.ticket-table td select { font-size: 12px; padding: 2px 4px; margin-top: 3px; width: 100%; }

.lt-table select { font-size: 12px; padding: 3px 4px; max-width: 230px; }
.lt-table tr.lt-conflict td { background: #fde7e7; }
.lt-table .lt-clash { color: var(--danger); font-weight: 600; font-size: 12px; white-space: nowrap; }


/* ---------- intake: new customer orders before the bank ---------- */
.intake { background: #fff7f7; border: 2px solid #f1a9a7; border-radius: var(--radius); padding: 8px 12px; margin-bottom: 10px; }
.intake-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; color: var(--danger); }
.intake-head .muted { color: var(--muted); font-size: 13px; }
.intake-list { display: flex; gap: 8px; flex-wrap: wrap; }
.intake-card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: right; max-width: 320px; padding: 8px 12px; border-radius: 10px; background: #fff; }
.intake-card.fresh { border: 2px solid var(--danger); animation: intake-pulse 2s infinite; }
.intake-top { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.intake-summary { background: #f6f8fb; border-radius: 10px; padding: 10px 12px; line-height: 1.7; }
@keyframes intake-pulse { 50% { box-shadow: 0 0 0 4px #c5221f22; } }
.return-alert.problem-alert { border-color: var(--danger); background: #fff5f5; }
.return-alert.problem-alert.urgent { background: var(--danger); color: #fff; animation: ra-pop .25s ease-out, problem-flash 1.2s infinite; }
.return-alert.problem-alert.urgent .ra-text small { color: #fff; }
.return-alert.problem-alert.urgent button:not(.primary) { background: #fff; color: var(--danger); }
@keyframes problem-flash { 50% { box-shadow: 0 0 0 6px #c5221f55; } }

/* ---------- customer orderers table ---------- */
.contacts-table input { padding: 4px 6px; }
.contacts-table select[multiple] { width: 100%; min-width: 140px; font-size: 13px; }
.contacts-table td { vertical-align: top; }

.optimize-on { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; background: #e8eef7; color: var(--primary); border-radius: 99px; padding: 2px 10px; font-size: 13px; font-weight: 600; }


/* automatic assignment (🤖) */
.auto-btn { border-radius: 99px; }
.auto-btn.on { background: #1e8e3e; color: #fff; border-color: #1e8e3e; }
.auto-badge { background: #e6f4ea; color: #1e6b34; }
.auto-line { margin: 4px 0 6px; padding: 4px 10px; border-radius: 8px; background: #e6f4ea; color: #1e6b34; font-size: 12.5px; font-weight: 600; }
.auto-line.warn { background: #fff4e0; color: #8a4b00; }
/* 📊 לוח סידור 2 — summary on top, the plants one under the other */
.b2-sum tfoot td { border-top: 2px solid #c9d3e3; background: #f4f7fb; }
.b2-bar { display: inline-block; width: 60px; height: 6px; background: #e3e8ef; border-radius: 3px; vertical-align: middle; margin-inline-start: 6px; overflow: hidden; }
.b2-bar i { display: block; height: 100%; background: #2e9d57; }
.b2-round { font-size: 12.5px; color: #2b4a7a; }
.b2-round small { color: #777; }
.b2-sec { margin: 0 0 12px; }
.b2-sec-bar { display: flex; align-items: center; gap: 4px; font-size: 12px; margin: 0 0 2px; }
.b2-sec-bar .icon, .b2-move .icon { padding: 0 5px; font-size: 12px; }
.b2-sec-bar[draggable] { cursor: grab; }
.b2-sec.sec-drop { outline: 2px dashed #3b6fd8; outline-offset: 2px; border-radius: 8px; }
.b2-fold { background: none; border: 0; padding: 2px 4px; font-size: 12.5px; color: #555; cursor: pointer; font-weight: 600; }
.b2-sec.folded .b2-sec-bar { background: #eef2f8; border: 1px solid #d6deea; border-radius: 8px; padding: 4px 6px; }
.b2-sec.folded .b2-fold { color: #1d3d78; font-size: 14px; }
.b2-move { display: inline-flex; gap: 2px; }
/* The customer's name on an intake card opens the order for editing (the rest of the card opens the intake window). */
.intake-name { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.intake-name:hover { color: #1d4fb8; }
.b2-trucks { margin-top: 4px; font-size: 12.5px; border: 1px solid #dfe5ee; border-radius: 8px; padding: 4px 8px; background: #f8fafd; }
.b2-tbtn { white-space: nowrap; }
.b2-tbtn.on { background: #e8efff; }
.b2-truck { white-space: nowrap; padding: 1px 0; }
.b2-truck.out { color: #1e6b34; }
.b2-msg { float: left; font-size: 15px; padding: 0 4px; }
.b2-unload { font-size: 12.5px; color: #555; }
.pb-warn td { background: #fff7ec; }
.pb-none { border-color: #f0b46a; }
.b2-pump { white-space: nowrap; font-weight: 600; color: #7a4b00; }
.b2-plant { margin: 0 0 18px; border: 1px solid #dfe5ee; border-radius: 10px; padding: 8px 10px; background: #fff; }
.b2-plant h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 16px; }
.b2-plant h3 .muted { font-size: 13px; font-weight: 400; }
.b2-orders tr.b2-done td { color: #888; }
/* 👤 super user: work as another user */
.switch-user { width: auto; max-width: 170px; padding: 3px 6px; font-size: 13px; }
.switch-back { background: #fff4e0; border-color: #e3b45c; color: #7a4b00; font-weight: 700; }
/* phone: the mixers under an order card, and the next 4 of every plant */
.m-mix-toggle { display: block; width: 100%; text-align: start; margin: -4px 0 8px; padding: 4px 10px; font-size: 13px; background: #f3f6fb; border: 1px solid #dfe5ee; border-top: 0; border-radius: 0 0 10px 10px; }
.m-mix-toggle.on { background: #e8efff; }
.m-mixers { margin: -6px 0 10px; border: 1px solid #dfe5ee; border-top: 0; border-radius: 0 0 10px 10px; background: #fff; padding: 4px 8px; }
.m-mixer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px; padding: 4px 0; border-bottom: 1px solid #eef1f5; font-size: 13px; }
.m-mixer:last-child { border-bottom: 0; }
.m-mixer.out { color: #1e6b34; }
.m-next { background: #f7f9fc; border: 1px solid #dfe5ee; border-radius: 10px; padding: 6px 8px; margin: 0 0 10px; }
.m-next-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.m-slot { display: flex; align-items: center; gap: 6px; padding: 6px; margin: 3px 0; background: #fff; border: 1px solid #dfe5ee; border-radius: 8px; font-size: 13px; width: 100%; text-align: start; }
.m-slot.empty { border-style: dashed; color: #5b6b85; justify-content: center; }
.m-slot-body { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.m-pick-list .m-card { width: 100%; }
.m-switch { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 6px 10px; background: #f7f9fc; border-bottom: 1px solid #dfe5ee; font-size: 13px; }
.as-user { background: #fff4e0; color: #7a4b00; padding: 2px 8px; border-radius: 8px; font-weight: 700; }
/* 🏭 לוח סידור מפעל */
.pd-h { margin: 14px 0 6px; font-size: 16px; }
.pd-next { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.pd-card { border: 1px solid #dfe5ee; border-radius: 10px; padding: 8px 10px; background: #fff; display: flex; flex-direction: column; gap: 3px; }
.pd-card.first { border: 2px solid #3b6fd8; background: #f5f8ff; }
.pd-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pd-n { background: #3b6fd8; color: #fff; border-radius: 50%; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.pd-hour { font-size: 18px; }
.pd-cust { font-size: 15px; font-weight: 700; }
.pd-act { margin-top: 4px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pd-ticket { width: 110px; }
.coord-sel { width: auto; max-width: 220px; font-size: 13px; padding: 2px 4px; border-radius: 6px; }
.coord-sel.coord-ok { background: #e6f4ea; } .coord-sel.coord-plant, .coord-sel.coord-wait { background: #fff4e0; }
.coord-sel.coord-problem { background: #fdecea; } .coord-sel.coord-none { background: #f3f3f3; } .coord-sel.coord-custom { background: #eef3fb; }
.coord-who { font-size: 11.5px; margin-top: 2px; }
.coord-who .badge { font-size: 11px; }
.pd-gone { margin-top: 12px; }
.pd-card.out { border-color: #9fd3b0; background: #f3fbf5; }
.pd-card.lo-over { outline: 2px solid #3b6fd8; background: #e8efff; }
.pd-sub { margin: 0 0 6px; font-size: 12.5px; }
.pd-trucks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.pd-truck { border: 1px solid #dfe5ee; border-radius: 8px; padding: 5px 8px; background: #fff; font-size: 13px; cursor: grab; display: flex; flex-direction: column; gap: 3px; }
.pd-truck.off { opacity: .6; cursor: default; background: #f6f6f6; }
.pd-truck.here { border-color: #b9cbe8; background: #f5f8ff; }
.pd-gone summary { cursor: pointer; font-weight: 600; }
/* ▥ תפריטי צד: 4 הבאים | the board | active trucks — each side column scrolls on its own and stays in view */
.pd-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr) 230px; gap: 12px; align-items: start; }
.pd-side { position: sticky; top: 8px; max-height: calc(100vh - 16px); overflow-y: auto; background: #f7f9fc; border: 1px solid #dfe5ee; border-radius: 10px; padding: 6px; }
.pd-side .pd-next, .pd-side .pd-trucks { grid-template-columns: 1fr; }
.pd-side .b2-sec { margin: 0; }
.pd-col-bar { display: flex; align-items: center; gap: 6px; padding: 3px 6px; margin-bottom: 6px; background: #e9eef6; border-radius: 7px; cursor: grab; font-size: 13px; }
.pd-col.lo-over { outline: 2px dashed #3b6fd8; outline-offset: 2px; }
.pd-card.pd-empty { border-style: dashed; color: #888; flex-direction: row; align-items: center; gap: 8px; min-height: 48px; background: #fbfcfe; }
.pd-card[draggable="true"] { cursor: grab; }
.pd-card.lo-over { outline: 2px solid #3b6fd8; }
tr.lo-over td { background: #e8efff !important; }
.lo-compact td { white-space: nowrap; padding-top: 3px; padding-bottom: 3px; }
.lo-compact .coord-sel { max-width: 210px; }
tr.lo-empty td { border-top: 1px dashed #c9d3e3; height: 34px; }
tr[draggable="true"] { cursor: grab; }
@media (max-width: 1100px) { .pd-layout { grid-template-columns: 1fr !important; } .pd-side { position: static; max-height: none; } }
.b3-focus { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 0 0 8px; padding: 5px 8px; background: #f3f6fb; border: 1px solid #dfe5ee; border-radius: 10px; }
/* לוח סידור 3 — side panel: the next 4 of every plant */
.b3-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 12px; align-items: start; }
.b3-main { min-width: 0; }
.b3-side { position: sticky; top: 8px; max-height: calc(100vh - 16px); overflow: auto; background: #f7f9fc; border: 1px solid #dfe5ee; border-radius: 10px; padding: 8px; }
.b3-side h3 { margin: 0 0 4px; font-size: 15px; }
.b3-side > p { font-size: 12px; margin: 0 0 8px; }
.b3s-plant { margin: 0 0 12px; }
.b3s-plant h4 { margin: 0 0 4px; font-size: 14px; }
.b3s-slot { display: flex; gap: 6px; align-items: stretch; margin: 0 0 4px; border-radius: 8px; }
.b3s-n { flex: 0 0 22px; display: flex; align-items: center; justify-content: center; background: #3b6fd8; color: #fff; border-radius: 6px; font-weight: 700; }
.b3s-card { flex: 1; background: #fff; border: 1px solid #dfe5ee; border-radius: 8px; padding: 4px 6px; font-size: 12.5px; cursor: grab; }
.b3s-card.set { border-color: #b9cbe8; }
.b3s-cust { font-weight: 700; font-size: 13px; }
.b3s-empty { flex: 1; border: 1px dashed #c3ccd8; border-radius: 8px; padding: 10px 6px; color: #8a94a3; font-size: 12px; text-align: center; }
.b3s-drop-end { border: 1px dashed transparent; border-radius: 8px; padding: 2px 4px; }
.lo-dragging [data-lo-slot] .b3s-empty, .lo-dragging .b3s-drop-end { border-color: #3b6fd8; }
[data-lo-slot].lo-over { outline: 2px solid #3b6fd8; outline-offset: 1px; background: #e8efff; }
tr[data-lo-key], tr[data-lo-order] { cursor: grab; }
@media (max-width: 900px) { .b3-layout { grid-template-columns: 1fr; } .b3-side { position: static; max-height: none; } }
/* 📋 לוח סידור 3 — one orders table */
.b3-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 6px; }
.b3-filters select { width: auto; }
.b3-mode { display: inline-flex; gap: 2px; }
.b3-msec { margin: 0 0 16px; }
.b3-msec > table { margin-bottom: 2px; }
.b3-more { margin: 4px 0; }
.b3-fold { margin: 4px 0; }
.b3-fold > summary { cursor: pointer; font-weight: 600; font-size: 13px; padding: 3px 0; }
tr.li-dup td { background: #fdecea; }
.mix-id { font-family: ui-monospace, Consolas, monospace; font-weight: 700; background: #f1f3f7; border: 1px solid #dfe3ea; border-radius: 6px; padding: 0 5px; white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.lo-ticket { background: #e8efff; color: #1d3d78; font-weight: 700; }
.b3-table tr.b3-plant > td { background: #e9f0fb; border-top: 2px solid #b9cbe8; padding: 6px 8px; }
.b3-plant-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.b3-table tr.b3-order.open > td { background: #f6f9ff; }
.b3-table tr.b3-sub > td { background: #fbfcfe; padding: 2px 8px 8px 8px; }
.b3-mixers { width: auto; border-collapse: collapse; font-size: 12.5px; }
.b3-mixers td { padding: 2px 10px; border-bottom: 1px solid #eef1f5; white-space: nowrap; }
.b3-mixers tr.out td { color: #1e6b34; }
/* 🧾 סדר העמסה */
.lo-table td { vertical-align: middle; }
.lo-part { margin: 10px 0 6px; font-size: 15px; }
.lo-table tr.lo-served td { background: #f4f5f7; color: #777; }
tr.lo-wait td { background: #fff8e6; }
.lo-part.lo-wait { margin-top: 18px; padding-top: 10px; border-top: 2px dashed #d8dee8; }
.lo-waiting td { color: #666; background: #fafafa; }
.lo-part [data-lo-move] { margin-inline-start: 8px; }
.lo-table tr[draggable] { cursor: grab; }
.lo-table tr.lo-fresh td { background: #fffbe6; }
.lo-table td[data-col="n"] { white-space: nowrap; }
.lo-table td[data-col="n"] button { padding: 0 6px; margin-inline-start: 2px; }
.lo-strip { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; width: 100%; text-align: start; margin: 4px 0; padding: 5px 8px;
  border: 1px dashed #c9a24a; border-radius: 8px; background: #fffaf0; font-size: 12.5px; cursor: pointer; }
.lo-strip.ok { border: 1px solid #b9cbe8; background: #f3f7fe; }
.lo-stage { white-space: nowrap; font-weight: 600; }
.lo-stage.wait { color: #8a6d00; } .lo-stage.set { color: #2b4a7a; } .lo-stage.out { color: #1e6b34; } .lo-stage.loading { color: #b35c00; } .lo-stage.done { color: #555; }
.lo-chip.done { opacity: .55; }
.lo-chip { background: #fff; border: 1px solid #dde3ec; border-radius: 10px; padding: 0 7px; white-space: nowrap; }
.lo-next { margin: 4px 0 6px; padding: 5px 10px; border-radius: 8px; background: #eef4ff; color: #1d3d78; font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* Order window of the automatic assignment: drag / ▲▼ rows, 🔗 joins a row to the one above (side by side). */
.ao-table td { vertical-align: middle; }
.ao-move { white-space: nowrap; }
.ao-move button { padding: 0 6px; margin-inline-start: 2px; }
.ao-grip { cursor: grab; color: #888; font-size: 16px; padding: 0 4px; }
.ao-n { display: inline-block; min-width: 1.2em; text-align: center; }
.ao-join { white-space: nowrap; font-size: 12.5px; }
.ao-table tr.ao-lead td, .ao-table tr.ao-joined td { background: #eef4ff; }
.ao-table tr.ao-joined td:first-child, .ao-table tr.ao-lead td:first-child { box-shadow: inset -4px 0 0 #3b6fd8; }
.ao-table tr.ao-drag { opacity: .45; }
.ao-table input[name=w]:disabled { opacity: .35; }
.auto-mark { margin-inline-end: 4px; font-size: 12px; }

/* 🔔 alerts */
.bell { position: relative; font-size: 18px; padding: 4px 10px; background: transparent; border: 1px solid rgba(255,255,255,.35); border-radius: 99px; color: inherit; cursor: pointer; }
.bell-count { position: absolute; top: -6px; inset-inline-start: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: #66727f; color: #fff; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }
.bell-count.high { background: #e37400; }
.bell-count.urgent { background: #c5221f; animation: bell-pulse 1s infinite; }
@keyframes bell-pulse { 50% { transform: scale(1.15); } }
.alerts-list { display: flex; flex-direction: column; gap: 6px; min-width: min(560px, 90vw); }
.alert-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #f4f6f9; border-inline-start: 4px solid #9aa5b1; }
.alert-item.lvl-2 { background: #fff4e0; border-color: #e37400; }
.alert-item.lvl-3 { background: #fde7e7; border-color: #c5221f; }
.alert-icon { font-size: 20px; }
.alert-text { flex: 1; display: flex; flex-direction: column; }
.alert-text small { color: #66727f; }

/* 💡 preferred plant */
.badge.suggest { background: #fff8d6; color: #6b5300; }
.suggest-line { margin: 6px 0 10px; padding: 6px 10px; border-radius: 8px; background: #fff8d6; color: #6b5300; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 14px; }
.bulk-nophone td { color: #8a95a1; }

/* orders screen: editable cells */
.orders-grid td { padding: 3px 4px; }
.orders-grid .cell { font: inherit; font-size: 13px; padding: 3px 5px; border: 1px solid transparent; border-radius: 6px; background: transparent; max-width: 160px; }
.orders-grid .cell:hover:not(:disabled) { border-color: #c9d2dc; background: #fff; }
.orders-grid .cell:focus { border-color: var(--primary, #1f3a5f); background: #fff; outline: none; }
.orders-grid .cell:disabled { color: inherit; opacity: .75; }
.orders-grid .cell-product { font-size: 13px; text-align: start; }
.orders-grid select.cell { min-width: 110px; }
.orders-grid input.cell[type=date] { min-width: 120px; }
.orders-grid input.cell[type=time] { min-width: 80px; }

/* orders screen: stages + sorting */
.orders-grid th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.orders-grid th.sortable:hover { text-decoration: underline; }
.orders-grid th.sorted { color: var(--primary, #1f3a5f); }
.stage { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; background: #eef1f5; color: #3b4652; }
.stage-intake, .stage-quote { background: #e8eef7; color: #1f3a5f; }
.stage-asked { background: #fff4e0; color: #8a4b00; }
.stage-change, .stage-problem, .stage-nosupply { background: #fde7e7; color: #a11b18; }
.stage-agreed, .stage-ready { background: #e6f4ea; color: #1e6b34; }
.stage-placed, .stage-notified { background: #e8f0fe; color: #1a4fa0; }
.stage-onway { background: #d2f0dc; color: #12572a; }
.stage-done { background: #e9ecef; color: #495057; }
.stage-cancelled, .stage-suspended { background: #f1f1f1; color: #7a7a7a; text-decoration: line-through; }
.stage-suspended { text-decoration: none; }
.stage-filter button { font-size: 13px; }

/* customer-update dropdown on the order card */
.notify-select { width: auto; max-width: 190px; padding: 2px 6px; border: 1px solid #25d366; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }

/* new order — in the customer form's format */
.nf { display: flex; flex-direction: column; gap: 12px; width: min(620px, 92vw); }
.nf-card { background: #fff; border: 1px solid #e3e8ee; border-radius: 12px; padding: 12px 14px; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.nf-card h3 { margin: 0 0 8px; font-size: 16px; color: var(--primary, #1f3a5f); }
.nf-card .field { margin-bottom: 8px; }
.nf-card .req { color: #c5221f; }
.nf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .nf-row { grid-template-columns: 1fr; } }
.nf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nf-chips button { flex: 1; min-width: 90px; padding: 8px 10px; border: 1px solid #d5dce4; border-radius: 8px; background: #fff; font: inherit; cursor: pointer; }
.nf-chips button.on { background: var(--primary, #1f3a5f); color: #fff; border-color: var(--primary, #1f3a5f); }
.nf-qty { display: flex; gap: 6px; align-items: center; max-width: 260px; }
.nf-qty button { width: 40px; height: 40px; font-size: 20px; border: 1px solid #d5dce4; border-radius: 8px; background: #fff; cursor: pointer; }
.nf-qty input { text-align: center; font-size: 18px; font-weight: 700; }
.nf-extra { background: #f7f9fb; }

/* time mode: free slot */
.free-slot { color: #5b3fa0; font-weight: 700; font-size: 13px; white-space: nowrap; }

/* map picker & location fields */
.map-box { width: min(760px, 90vw); height: min(460px, 60vh); border-radius: 10px; border: 1px solid #d5dce4; margin-top: 8px; }
.loc-hint { font-size: 13px; margin-top: 4px; }
.loc-ok { color: #1e8e3e; font-weight: 600; }

/* intake: approve with a new time */
.intake-time { display: flex; gap: 8px; align-items: stretch; }
.intake-time > button { flex: 1; }
.intake-time > input { width: 120px; font-size: 16px; }

.site-map-link { text-align: start; color: inherit; }
.site-map-link:hover b { text-decoration: underline; }

.map-box .leaflet-control-layers { direction: rtl; text-align: right; font-size: 13px; }
.map-box .leaflet-control-layers label { margin: 2px 0; }
.map-box { max-width: 100%; }

/* Settings → ⏱ זמנים */
.tm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.tm-card h3 { margin: 0 0 8px; font-size: 16px; color: var(--primary, #1f3a5f); }
.tm-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px dashed #e3e8ee; font-size: 14px; }
.tm-row:last-child { border-bottom: none; }
.tm-input { display: flex; align-items: center; gap: 6px; }
.tm-input input { width: 90px; text-align: center; }
.tm-input span { color: #66727f; font-size: 13px; min-width: 34px; }
.tm-calc { margin-top: 12px; }
.tm-out { margin-top: 8px; }
.tm-table td:last-child { text-align: left; font-weight: 600; white-space: nowrap; }
.tm-total td { border-top: 2px solid var(--primary, #1f3a5f); font-weight: 700; color: var(--primary, #1f3a5f); }
.tm-total-row { border-top: 2px solid var(--primary, #1f3a5f); margin-top: 4px; padding-top: 6px; color: var(--primary, #1f3a5f); }
.rounds-cell { text-align: center; white-space: nowrap; }
.rounds-cell b { font-size: 15px; }

/* contacts: an orderer's sites as chips */
.ct-sites { min-width: 180px; }
.ct-chip { display: inline-flex; align-items: center; gap: 4px; margin: 2px; padding: 2px 8px; border-radius: 99px; background: #e8eef7; color: #1f3a5f; font-size: 13px; }
.ct-chip button { border: none; background: none; cursor: pointer; font-size: 11px; color: #66727f; padding: 0; }
.ct-add { display: block; margin-top: 4px; max-width: 170px; font-size: 13px; }
.day-name { margin-top: 4px; font-weight: 700; color: var(--primary, #1f3a5f); font-size: 14px; }
.sites-table input.km-map { background: #eef7ee; border-color: #9fd3ae; }

/* Settings → 📝 הודעות לאישור */
.terms-list { padding-inline-start: 22px; margin: 0 0 10px; }
.terms-list li { margin-bottom: 8px; }
.terms-list li > textarea { width: calc(100% - 136px); vertical-align: middle; font-size: 15px; }
.terms-list .term-grip { cursor: grab; color: var(--muted, #64748b); font-size: 18px; padding: 0 4px; vertical-align: middle; user-select: none; }
.terms-list li.dragging { opacity: .45; }
.terms-list li.drop-on { outline: 2px dashed var(--primary, #2563eb); outline-offset: 2px; border-radius: 6px; }
.split-btn { font-weight: 700; color: var(--primary, #2563eb); }
.nums-btn { white-space: nowrap; }
.ticket-in { width: 74px; padding: 2px 6px; font-size: 13px; }
.sys-no { font-family: ui-monospace, Consolas, monospace; font-weight: 600; color: var(--primary, #1f3a5f); white-space: nowrap; }
.nums-btn.empty { color: var(--muted, #64748b); border-style: dashed; }
.nums-table td, .nums-table th { padding: 6px 8px; }
.terms-tools { display: inline-flex; gap: 2px; vertical-align: middle; }

/* reply time limit in the send windows */
.reply-window .nf-chips button { flex: 0 0 auto; min-width: 70px; }
.reply-free { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: #66727f; }
.reply-free input { width: 70px; text-align: center; }

/* "📱 כך הלקוח מקבל" — the message as a phone bubble */
.phone-msg { background: #e5ddd5; border-radius: 12px; padding: 14px; max-width: 460px; }
.phone-msg .bubble { background: #dcf8c6; border-radius: 10px 0 10px 10px; padding: 10px 12px; line-height: 1.55; font-size: 14.5px; box-shadow: 0 1px 1px rgba(0,0,0,.12); word-break: break-word; }
.phone-msg .bubble a { color: #1a4fa0; }

/* new orders: a long list scrolls inside its box */
.intake-list { max-height: 330px; overflow-y: auto; }

/* orders screen: ticked rows + one change for all */
.bulk-bar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 12px; margin: 6px 0; border-radius: 10px; background: #e8eef7; border: 1px solid #b9c8de; }
.bulk-bar label { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.orders-grid tr.row-picked td { background: #f0f5ff; }
.auto-group { display: inline-flex; gap: 2px; align-items: center; }
/* 🚚 one switch: green = automatic assignment, gray = manual */
.truck-switch { display: inline-flex; align-items: center; gap: 3px; border-radius: 99px; padding: 1px 8px 1px 6px; font-size: 15px; line-height: 1.4;
  border: 1px solid var(--border, #cbd5e1); background: #eef1f4; color: #6b7280; filter: grayscale(1); cursor: pointer; }
.truck-switch small { font-size: 11px; font-weight: 600; }
.truck-switch.on { background: #1e8e3e; border-color: #1e8e3e; color: #fff; filter: none; }
/* plant state: a small green dot when OK; a red pill with the fix estimate on a fault */
.plant-state { border: none; background: none; cursor: pointer; padding: 0 2px; font-size: 12px; vertical-align: middle; }
.plant-state.ok { color: #1e8e3e; font-size: 13px; }
.plant-state.fault { background: #fde8e8; color: #b42318; border: 1px solid #f5b5b0; border-radius: 99px; padding: 1px 8px; font-weight: 600; }
.ps-choice { display: flex; gap: 8px; margin-bottom: 12px; }
.ps-choice button { flex: 1; padding: 10px; border-radius: 10px; border: 1px solid var(--border, #cbd5e1); background: var(--surface, #fff); font-weight: 600; cursor: pointer; }
.ps-choice .ps-ok.on { background: #1e8e3e; border-color: #1e8e3e; color: #fff; }
.ps-choice .ps-fault.on { background: #b42318; border-color: #b42318; color: #fff; }
.ps-eta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.auto-off { border-radius: 99px; padding: 2px 7px; }
.stage-filter .waiting-btn:not(.primary) { background: #fde7e7; border-color: #f1a9a7; color: #a11b18; font-weight: 700; }

/* order finished (supplied) = blue; supply in progress = blue strip on the side */
.card.order-done { background: #e3eefc; border-color: #7aa7e0; }
.card.order-done .card-head { color: #1a4fa0; }
.card.order-supplying { border-inline-start: 5px solid #3b7ddd; }
.order-close-btn { background: #3b7ddd; color: #fff; border-color: #3b7ddd; }

/* Agreements: one row per concrete item; a thicker line where the next agreement starts */
table.ag-lines tr.ag-first td { border-top: 2px solid var(--border, #cbd5e1); }

table.ag-lines td { white-space: nowrap; }
table.ag-lines td.muted { white-space: normal; min-width: 140px; }

table.ag-lines td.muted { white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }

/* Recipes: category header row, all-plants view (a recipe title row, then one row per plant) */
table.recipe-table tr.cat-row th { background: var(--surface-2, #eef2f7); text-align: center; font-size: 12px; }
table.recipe-table th.cat-head { border-inline: 2px solid var(--border, #cbd5e1); }
table.recipe-all tr.recipe-head td { background: var(--surface-2, #eef2f7); border-top: 2px solid var(--border, #94a3b8); padding-top: 8px; }
table.recipe-all tr.no-mix td:nth-child(n+3) { color: var(--muted, #94a3b8); }
button.act-switch { padding: 0 2px; border: 0; background: none; }
.mix-cat { margin: 10px 0 4px; font-size: 14px; }
section.mat-cat { margin-bottom: 18px; }
/* Recipes: headers stay on top while scrolling the table; sortable column titles; water/cement column */
.recipe-wrap { max-height: 70vh; overflow: auto; }
table.recipe-table tr.cat-row th { position: sticky; top: 0; z-index: 2; height: 24px; }
table.recipe-table tr.col-row th { position: sticky; top: 24px; z-index: 2; background: var(--surface, #fff); box-shadow: 0 1px 0 var(--border, #cbd5e1); }
table.recipe-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
table.recipe-table th.sortable.sorted { color: var(--primary, #1d4ed8); }
table.recipe-table td.wc { font-weight: 600; }
.recipe-filter { flex-wrap: wrap; gap: 6px; }
table.recipe-table td.mix-total { font-weight: 600; }
table.recipe-table td.mix-total.ok { color: #15803d; }
table.recipe-table td.mix-total.off { color: #c2410c; background: #fff7ed; }

/* Admixtures: kg and % of the cement side by side */
.pct { color: #6d28d9; font-weight: 600; margin-inline-start: 4px; white-space: nowrap; }
td.admix { white-space: nowrap; }
.mix-sum b.ok { color: #15803d; } .mix-sum b.off { color: #c2410c; }

/* Recipe corrections (winter / summer): corrected cells, markers, the recipe window list, SKU builder */
table.recipe-table td.corr { background: #eff6ff; color: #1d4ed8; font-weight: 700; }
.badge.corr-badge { background: #dbeafe; color: #1e40af; margin-inline-start: 4px; }
.recipe-corr { margin: 8px 0; padding: 8px; border: 1px dashed var(--border, #cbd5e1); border-radius: 8px; }
.corr-hint { color: #1d4ed8; font-weight: 600; }
.sku-builder { margin-bottom: 8px; }
.clash { color: #b91c1c; font-weight: 600; min-height: 1em; margin: 4px 0; }
.copy-note { background: #fef9c3; padding: 6px 8px; border-radius: 6px; }
/* Corrections: whole-plant rows, the no-compensation warning */
table.corr-table tr.plant-corr td { background: #f0f9ff; }
.no-comp { color: #b45309; background: #fffbeb; border-radius: 6px; padding: 2px 6px; margin-top: 3px; font-size: 12px; font-weight: 600; }
.badge.no-comp-badge { background: #fef3c7; color: #92400e; }
.corr-chip { display: inline-block; margin: 1px 0; font-size: 12px; }
td.nowrap { white-space: nowrap; }
/* Corrections: marked recipes, bulk bar, the plant manager's notice on the order card */
table.corr-table tr.picked td { background: #eef2ff; }
.corr-bulk { position: sticky; top: 0; z-index: 3; background: var(--surface, #fff); padding: 6px 0; }
.corr-bulk.on { background: #eef2ff; border-radius: 8px; padding: 6px 8px; }
.corr-notice { margin-top: 4px; padding: 4px 8px; border-radius: 6px; background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; font-size: 13px; }
/* Exposure class (SI 118) */
.badge.expo-badge { background: #ecfeff; color: #155e75; border: 1px solid #a5f3fc; white-space: nowrap; }
td.expo.off .badge { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.on-now { color: #15803d; }

/* Material replacement preview */
.rep-preview { margin-top: 8px; }

/* The super user's shell: worlds row, overview dashboard, "under construction" cards */
nav.worlds { display: flex; gap: 4px; flex-wrap: wrap; padding: 6px 12px 0; background: var(--surface-2, #eef2f7); border-bottom: 1px solid var(--border, #cbd5e1); }
nav.worlds button { border: 0; background: none; padding: 8px 14px; border-radius: 10px 10px 0 0; font-weight: 600; display: flex; gap: 6px; align-items: center; }
nav.worlds button.active { background: var(--surface, #fff); box-shadow: 0 -1px 0 var(--border, #cbd5e1) inset; color: var(--primary, #1d4ed8); }
.dash-h { margin: 18px 0 8px; font-size: 15px; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.dash-card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px; border: 1px solid var(--border, #cbd5e1); border-radius: 12px; background: var(--surface, #fff); text-align: start; cursor: pointer; }
.dash-card b { font-size: 24px; }
.dash-card span { font-size: 12px; color: var(--muted, #64748b); }
.dash-card.ok b { color: #15803d; } .dash-card.warn { border-color: #fdba74; background: #fff7ed; } .dash-card.warn b { color: #c2410c; }
.dash-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.bar { height: 8px; background: #e2e8f0; border-radius: 4px; overflow: hidden; } .bar span { display: block; height: 100%; background: #16a34a; }
.dash-chart { display: flex; gap: 6px; align-items: flex-end; height: 160px; padding: 8px; border: 1px solid var(--border, #cbd5e1); border-radius: 12px; background: var(--surface, #fff); }
.dash-chart .col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.dash-chart .stack { position: relative; flex: 1; width: 70%; }
.dash-chart .stack span { position: absolute; bottom: 0; inset-inline: 0; border-radius: 4px 4px 0 0; }
.dash-chart .ord { background: #bfdbfe; } .dash-chart .sup { background: #1d4ed8; inset-inline: 20%; }
.dash-chart small { font-size: 10px; color: var(--muted, #64748b); }
.soon-card { max-width: 640px; margin: 24px auto; padding: 18px 22px; border: 2px dashed #cbd5e1; border-radius: 14px; background: var(--surface, #fff); }
/* Permission templates */
.perm-tpls { flex-wrap: wrap; gap: 6px; }
.perm-head { margin: 8px 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
table.perm-table tr.perm-world td { background: var(--surface-2, #eef2f7); }
table.perm-table td.perm-tab { padding-inline-start: 28px; }
table.perm-table tr.perm-none td.perm-tab { color: #94a3b8; }
table.perm-table tr.perm-edit td.perm-tab { color: #15803d; font-weight: 600; }

/* Message center */
table.msg-table td { font-size: 13px; vertical-align: top; }
table.msg-table tr.msg-planned td { color: #64748b; background: #f8fafc; }

/* Credit & obligo */
td.obligo { white-space: nowrap; }
td.obligo.over { color: #b91c1c; font-weight: 700; }
.obligo-box { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: #f0f9ff; border: 1px solid #bae6fd; display: grid; gap: 4px; }
.obligo-box.over { background: #fef2f2; border-color: #fecaca; }

/* Customer filters, agreement window */
.cust-filter { flex-wrap: wrap; gap: 6px; }
.ag-active { margin-bottom: 8px; padding: 6px 10px; background: #f0fdf4; border-radius: 8px; display: flex; gap: 10px; align-items: center; }
.ag-contacts { display: flex; flex-wrap: wrap; gap: 4px 14px; }
table.ag-points input { width: 100%; }

/* Customers: column chooser, credit rows, invoice email */
.cols-panel { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 8px 10px; margin-bottom: 8px; border: 1px solid var(--border, #cbd5e1); border-radius: 10px; background: var(--surface, #fff); }
.col-row-item { display: flex; align-items: center; gap: 2px; border: 1px solid #e2e8f0; border-radius: 8px; padding: 2px 6px; }
table.cust-table tr.row-over td { background: #fef2f2; }
table.cust-table .over { color: #b91c1c; font-weight: 700; }
.contacts-table input.need { border-color: #f97316; background: #fff7ed; }

/* Drag worlds / tabs to reorder */
[data-drag-world], [data-drag-tab] { cursor: grab; }
.dragging { opacity: .4; }
.drop-on { outline: 2px dashed var(--primary, #1d4ed8); outline-offset: -2px; }

/* Customer row → section under it (contacts + agreements) */
table.cust-table tr.row-open td { background: #eff6ff; font-weight: 600; }
table.cust-table tr.cust-detail > td { background: #f8fafc; padding: 8px 12px 14px; border-bottom: 2px solid var(--primary, #1d4ed8); }
.cust-panel h4 { margin: 10px 0 4px; }
table.list.mini td, table.list.mini th { padding: 3px 6px; font-size: 13px; }
table.list.mini input { padding: 2px 4px; }
.ag-prices span { display: inline-block; margin: 1px 6px 1px 0; white-space: nowrap; }
.open-mark { color: var(--primary, #1d4ed8); }

/* Agreements edited inline in the customer's section */
table.ag-inline .ag-price { display: inline-flex; align-items: center; gap: 2px; margin: 1px 8px 1px 0; white-space: nowrap; }
table.ag-inline .ag-price input { width: 64px; }
table.ag-inline input[type=date] { width: 128px; }
table.ag-inline select.ag-add { width: 90px; }
table.ag-inline input.need { border-color: #f97316; background: #fff7ed; }

/* Every table: move / resize / hide columns */
table.cols-enhanced th { position: relative; cursor: grab; }
table.cols-enhanced th .col-grip { position: absolute; top: 0; bottom: 0; inset-inline-end: -3px; width: 7px; cursor: col-resize; z-index: 2; }
table.cols-enhanced th .col-grip:hover, body.col-resizing .col-grip { background: rgba(29, 78, 216, .25); }
body.col-resizing { cursor: col-resize; user-select: none; }
table.cols-enhanced td { text-overflow: ellipsis; }
.col-menu { position: fixed; z-index: 1000; display: flex; flex-direction: column; gap: 2px; padding: 6px; background: var(--surface, #fff); border: 1px solid var(--border, #cbd5e1); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18); min-width: 200px; }
.col-menu button { text-align: start; border: 0; background: none; padding: 6px 8px; border-radius: 6px; }
.col-menu button:hover { background: #eff6ff; }
.cols-hidden-bar { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 12px; margin: 4px 0; color: var(--muted, #64748b); }
/* Cells edited in the table */
select.cell-edit, input.cell-edit { padding: 2px 4px; font-size: 13px; max-width: 100%; border-color: transparent; background: transparent; }
select.cell-edit:hover, input.cell-edit:hover, select.cell-edit:focus, input.cell-edit:focus { border-color: var(--border, #cbd5e1); background: var(--surface, #fff); }

/* Lists & statuses: cards with ☑ active per value */
.list-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.list-card { border: 1px solid var(--border, #cbd5e1); border-radius: 12px; padding: 8px 10px; background: var(--surface, #fff); }
.list-card h4 { margin: 0 0 6px; font-size: 13px; }
.lv-row { display: flex; align-items: center; gap: 4px; padding: 1px 0; }
.lv-row.off .lv-name { color: #94a3b8; text-decoration: line-through; }
.lv-row .lv-name { flex: 1; padding: 2px 4px; border-color: transparent; background: transparent; }
.lv-row .lv-name:not(:disabled):hover, .lv-row .lv-name:focus { border-color: var(--border, #cbd5e1); background: var(--surface, #fff); }
.lv-used { font-size: 11px; background: #e0f2fe; color: #075985; border-radius: 8px; padding: 0 6px; }
.lv-add { width: 100%; margin-top: 4px; }
/* Multi-select dropdown with ✓ */
.msel-btn { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 8px; font-size: 13px; }
.msel-pop { position: fixed; z-index: 1000; width: 280px; display: flex; flex-direction: column; gap: 6px; padding: 8px; background: var(--surface, #fff); border: 1px solid var(--border, #cbd5e1); border-radius: 12px; box-shadow: 0 10px 28px rgba(0,0,0,.2); }
.msel-list { max-height: 220px; overflow: auto; display: flex; flex-direction: column; border-top: 1px solid #e2e8f0; padding-top: 4px; }
.msel-opt { display: flex; align-items: center; gap: 6px; padding: 3px 4px; border-radius: 6px; cursor: pointer; }
.msel-opt:hover { background: #eff6ff; }
.msel-tools { display: flex; gap: 6px; } .msel-tools button { font-size: 12px; padding: 2px 8px; }
/* Collections (debt aging) */
.collect-bar { flex-wrap: wrap; gap: 8px; }
.collect-old { color: #b45309; font-weight: 600; font-size: 13px; }
table.aging-table td { white-space: nowrap; }
table.aging-table .credit { color: #15803d; }


/* Tools above every table: smart search · export / import Excel */
.tbl-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 4px; }
.tbl-tools .tbl-search { width: 240px; max-width: 100%; padding: 5px 9px; font-size: 13px; }
.tbl-tools .tbl-count { font-size: 12px; }
.tbl-tools button.small { font-size: 12px; }
dialog .tbl-tools .tbl-search { width: 180px; }

/* Change log */
.clog .clog-ch { display: inline-block; margin-inline-end: 12px; white-space: nowrap; }
.clog .clog-ch s { color: #b42318; opacity: .8; }
.clog-row { font-size: 12px; max-width: 700px; }
.clog-row tr.clog-changed td { background: #fff4d6; font-weight: 600; }
.tbl-tools button.small:has(.xl-ico) { padding: 2px 6px; background: #fff; border: 1px solid #c9d8cf; line-height: 0; }
.tbl-tools button.small:has(.xl-ico):hover { background: #eaf5ee; }
/* Agreements table: price / empty cube / validity edited in place */
.ag-lines .cell-edit { padding: 2px 4px; font-size: 13px; width: auto; }
.ag-lines .ag-cell-num { width: 70px; }
.ag-lines input[type=date].cell-edit { width: 128px; }
.ag-lines .cell-edit.need { border-color: #e0a100; background: #fff8e1; }

/* Collections follow-up panel */
.coll-panel { padding: 6px 4px 10px; background: #f8fafc; }
.coll-docs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.coll-log input, .coll-log select { font-size: 13px; padding: 2px 4px; }
.coll-log tr.coll-new td { background: #eef6ff; }
.coll-log tr.coll-wait td { background: #fffaf0; }
.coll-log .need { border-color: #d92d20; background: #fff1f0; }
.collect-doc { border: 1px solid #ddd; padding: 12px; background: #fff; max-height: 50vh; overflow: auto; }
.collect-doc .cd-head { display: flex; justify-content: space-between; border-bottom: 2px solid #1f3a5f; padding-bottom: 4px; }
.collect-doc table.cd { border-collapse: collapse; width: 100%; margin: 8px 0; }
.collect-doc table.cd th, .collect-doc table.cd td { border: 1px solid #ccc; padding: 4px 6px; }
.collect-doc .cd-note { color: #666; font-size: 13px; }

/* 📞 Collections center */
.badge.ct-open { background: #eef2f7; color: #344054; }
.badge.ct-work, select.ct-work { background: #e6f1fb; color: #0c447c; }
.badge.ct-wait, select.ct-wait { background: #fff4d6; color: #7a4b00; }
.badge.ct-ok, select.ct-ok { background: #e3f4e8; color: #1e6b35; }
.badge.ct-bad, select.ct-bad { background: #fde8e8; color: #a32d2d; }
.badge.ct-done, select.ct-done { background: #f1f1f1; color: #777; }
.cc-late { color: #b42318; font-weight: 600; }
.cc-queue .cc-msg { max-width: 420px; font-size: 13px; color: #444; white-space: normal; }
.cc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dash-card.clickable { cursor: pointer; }
.cq-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; background: #f6f8fb; border-radius: 8px; padding: 8px 10px; }
.cq-sum { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; }
.cq-sum .bad b { color: #b42318; }
.cq-who { font-size: 13px; }
.cq-task { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0; font-size: 13px; }
.cq-task select { width: auto; }
.cq-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.cq-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border: 1px solid #d6dde6; border-radius: 10px; background: #fff; font-size: 13px; cursor: pointer; }
.cq-btn span { font-size: 22px; line-height: 1; }
.cq-btn:hover { background: #f2f6fb; border-color: #9fb5cf; }
.cq-btn.on { border: 2px solid #1f3a5f; background: #eaf1f9; }
.cq-form { margin-top: 10px; padding: 10px; border: 1px solid #c9d6e6; border-radius: 10px; background: #f8fbff; }
.cq-form textarea { width: 100%; }
.cq-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.cq-row label { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.cq-row label.grow { flex: 1; min-width: 200px; }
.cq-row label.grow input { flex: 1; }
.cq-row select, .cq-row input { width: auto; }
.cq-log { max-height: 280px; overflow: auto; border-top: 1px solid #eee; }
.cq-ev { display: flex; gap: 10px; padding: 7px 2px; border-bottom: 1px solid #f0f0f0; font-size: 13px; }
.cq-ic { width: 28px; height: 28px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #eef2f7; }
.cq-promise .cq-ic { background: #e3f4e8; } .cq-dispute .cq-ic { background: #fde8e8; } .cq-msg .cq-ic, .cq-doc .cq-ic { background: #e6f1fb; } .cq-status .cq-ic { background: #fff4d6; }
.cq-meta { color: #888; font-size: 11px; }
.cc-rule { border: 1px solid #d6dde6; border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; background: #fff; }
.cc-rule.off { opacity: .6; }
.cc-rule textarea { width: 100%; }
.cc-rule .cr-name { width: 190px; font-weight: 600; }
.cc-rule select { width: auto; }

/* 🗂 Order versions */
.ver-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 800px) { .ver-wrap { grid-template-columns: minmax(0, 1fr); } }
.ver-list { max-height: 60vh; overflow: auto; }
.ver-list tr.ver-sel td { background: #eaf1f9; }
.ver-list .ver-what { font-size: 12px; color: #555; max-width: 220px; }
.ver-table td:first-child { color: #555; white-space: nowrap; }
/* 📜 per-row change log */
button.row-log { border: 0; background: none; padding: 0 2px; font-size: 12px; cursor: pointer; opacity: .35; }
tr:hover button.row-log, button.row-log:focus { opacity: 1; }
/* Credit view: credit limit / obligo typed in place */
.cust-table input.cust-num { width: 110px; padding: 2px 6px; font-size: 13px; }
.cust-table input.cust-num.manual { border-color: #e0a100; background: #fffaf0; font-weight: 600; }
/* 📦 items catalog */
.items-table input.cell-edit, .items-table select.cell-edit { padding: 2px 6px; font-size: 13px; width: 100%; }
.items-table .it-code { width: 110px; } .items-table .it-price { width: 90px; }
.items-recipes { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; }
/* "יצא ללקוח" before the customer confirmed */
.trip-btn.trip-locked { background: #f4f5f7; color: #8a8f98; border-style: dashed; }
/* initial handling: estimated hour + empty cube */
.intake-time-box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 10px; background: #f6f8fb; border: 1px solid var(--line); border-radius: var(--radius); }
.intake-time-box input[type=time] { width: auto; }
.ec-row { display: flex; gap: 6px; align-items: center; }
.ec-row select { width: auto; }
/* 🔀 status map */
.sm-flow { background: #f2f6fb; border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 10px; margin-bottom: 6px; font-size: 13px; }
.sm-table td { vertical-align: top; font-size: 13px; }
.sm-table td.sm-block { color: #a32d2d; }
/* 🔗 connections: notes */
.conn-notes { margin-top: 12px; } .conn-notes textarea { width: 100%; }
.sm-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sm-flow .sm-flow-input { flex: 1; min-width: 280px; font-size: 13px; padding: 4px 8px; }
.sm-flow-tools { display: inline-flex; gap: 6px; align-items: center; }
.sm-table textarea.sm-note { width: 100%; min-width: 160px; font-size: 12px; padding: 3px 6px; }
/* 🔀 status map — editable */
.sf-table td { vertical-align: top; font-size: 13px; }
.sf-table tr.sf-off td { opacity: .55; }
.sf-table .sf-move { white-space: nowrap; }
.sf-table textarea.sf-text, .sf-table input.sf-text { width: 100%; min-width: 170px; font-size: 12px; padding: 3px 6px; }
.sf-table .sf-to { min-width: 220px; }
.sf-chip { display: inline-flex; align-items: center; gap: 3px; margin: 2px 3px; padding: 1px 7px; border: 1px solid var(--line); border-radius: 12px; font-size: 12px; background: #fdecec; color: #8a1f1f; }
.sf-chip.on { background: #e3f4e8; color: #1e6b35; }
.sf-table .sf-sys { color: #a32d2d; font-size: 12px; max-width: 260px; }
/* 🔄 development: last update / new version */
header.top .dev-refresh { font-size: 12px; padding: 3px 10px; }
header.top .dev-refresh.new { background: #f59e0b; border-color: #f59e0b; color: #1d2433; font-weight: 700; animation: dev-pulse 1.6s ease-in-out infinite; }
@keyframes dev-pulse { 50% { opacity: .65; } }
/* order supply statuses */
.badge.st-partial, .status-select.s-סופקה.חלקית { background: #fff1e0; color: #b45309; }
.badge.st-over { background: #f1e8fd; color: #6d28d9; }
.badge.st-closed { background: #e5e7eb; color: #374151; }
/* truck statuses: left home / end of day / in service */
.sb-5 { border-bottom-color: #0891b2; } .sb-6 { border-bottom-color: #9ca3af; } .sb-7 { border-bottom-color: #c5221f; }

/* 🔐 permissions — friendly layout */
.pm { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 820px) { .pm { grid-template-columns: minmax(0, 1fr); } }
.pm-side { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 8px; }
.pm-side-title { font-size: 12px; color: var(--muted); font-weight: 600; padding: 0 4px; }
.pm-card { display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; gap: 2px 10px; align-items: center; text-align: right; width: 100%;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.pm-card:hover { border-color: #b9c7da; box-shadow: 0 2px 10px rgba(20, 40, 80, .07); }
.pm-card.on { border: 2px solid var(--primary); background: #f3f7fd; }
.pm-card .pm-icon { grid-row: span 2; width: 38px; height: 38px; border-radius: 12px; background: #eef3fa; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.pm-card-name { font-weight: 600; font-size: 14px; }
.pm-stack { display: flex; align-items: center; }
.pm-stack .pm-av { margin-inline-start: -6px; border: 2px solid var(--surface); }
.pm-stack .pm-av:first-child { margin-inline-start: 0; }
.pm-new { border-style: dashed; background: transparent; }
.pm-new .pm-icon { background: transparent; border: 1px dashed var(--line); }
.pm-admin { cursor: default; background: #fffaf0; border-color: #f2dfb3; }
.pm-admin .pm-icon { background: #fdf0d2; }
.pm-av { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; font-size: 11px; font-weight: 700;
  background: #dbe7f7; color: #1f3a5f; flex: none; }
.pm-av.gold { background: #fde7b0; color: #7a4b00; } .pm-av.more { background: #e5e7eb; color: #374151; }
.pm-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pm-hero { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.pm-hero-icon { width: 54px; height: 54px; border-radius: 16px; background: #eef3fa; display: flex; align-items: center; justify-content: center; font-size: 28px; }
.pm-hero-text h2 { margin: 0; font-size: 20px; }
.pm-hero-tools { margin-inline-start: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.pm-people { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; }
.pm-person { display: inline-flex; align-items: center; gap: 6px; background: #f3f6fa; border-radius: 20px; padding: 3px 10px 3px 4px; font-size: 13px; }
.pm-person .icon { font-size: 11px; opacity: .5; } .pm-person .icon:hover { opacity: 1; }
.pm-people .pm-add { width: auto; font-size: 13px; border-style: dashed; }
.pm-summary { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pm-pill { border-radius: 20px; padding: 4px 12px; font-size: 13px; font-weight: 600; }
.pm-pill.pm-edit { background: #e3f4e8; color: #1e6b35; } .pm-pill.pm-view { background: #e6f1fb; color: #0c447c; } .pm-pill.pm-none { background: #f1f1f1; color: #666; }
.pm-search { width: 200px; margin-inline-start: auto; }
.pm-world { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.pm-world-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; background: #f7f9fc; border-bottom: 1px solid var(--line); }
.pm-world-name { font-weight: 700; font-size: 15px; } .pm-world-sum { font-size: 12px; }
.pm-world-all { margin-inline-start: auto; display: flex; align-items: center; gap: 6px; }
.pm-row { display: flex; align-items: center; gap: 10px; padding: 7px 14px; border-bottom: 1px solid #f0f2f5; }
.pm-row:last-child { border-bottom: 0; }
.pm-row .pm-tab { flex: 1; font-size: 14px; }
.pm-row.pm-lv-none .pm-tab { color: #9aa1ab; }
.pm-seg { display: inline-flex; background: #f1f3f6; border-radius: 10px; padding: 2px; gap: 2px; }
.pm-opt { position: relative; cursor: pointer; }
.pm-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pm-opt span { display: inline-block; padding: 4px 10px; border-radius: 8px; font-size: 12px; color: #667085; white-space: nowrap; transition: background .12s; }
.pm-opt:hover span { background: #e5e9ef; }
.pm-opt.on.pm-none span { background: #fff; color: #555; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.pm-opt.on.pm-view span { background: #1a73e8; color: #fff; }
.pm-opt.on.pm-edit span { background: #1e8e3e; color: #fff; }
.pm-opt input:disabled + span { cursor: default; }
/* 💬 message center — editable */
.mc-table td { vertical-align: top; font-size: 13px; }
.mc-table tr.mc-off td { opacity: .5; }
.mc-table textarea.mc-text { width: 100%; min-width: 130px; font-size: 12px; padding: 3px 6px; resize: vertical; }
.mc-table textarea.mc-name { font-weight: 600; min-width: 170px; }
.mc-table .mc-tpl { margin-top: 4px; }
.mc-table select.mc-mode { width: auto; font-size: 12px; }
.mc-preview { white-space: pre-wrap; background: #f6f8fb; border: 1px solid var(--line); border-radius: 8px; padding: 10px; font-family: inherit; font-size: 13px; max-height: 260px; overflow: auto; }
.mc-var { font-family: monospace; }
/* 🔐 permissions — all templates in one table, header pinned */
.pm-viewnav { display: flex; gap: 6px; margin-bottom: 10px; }
.pmx-wrap { max-height: calc(100vh - 230px); overflow: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
table.pmx { border-collapse: separate; border-spacing: 0; width: 100%; }
table.pmx th, table.pmx td { padding: 6px 8px; border-bottom: 1px solid #eef1f5; text-align: center; white-space: nowrap; }
table.pmx thead th { position: sticky; top: 0; z-index: 3; background: #f7f9fc; border-bottom: 2px solid var(--line); vertical-align: bottom; }
table.pmx .pmx-first { position: sticky; inset-inline-start: 0; z-index: 2; background: var(--surface); text-align: right; min-width: 170px; }
table.pmx thead .pmx-first { z-index: 4; background: #f7f9fc; }
table.pmx tr.pmx-world td { background: #f3f6fb; }
table.pmx tr.pmx-world .pmx-first { background: #f3f6fb; }
table.pmx .pmx-tab { padding-inline-start: 20px; font-size: 14px; }
.pmx-head { display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: 0; padding: 4px 6px; cursor: pointer; border-radius: 10px; width: 100%; }
button.pmx-head:hover { background: #e9eff8; }
.pmx-icon { font-size: 20px; }
.pmx-col { min-width: 140px; }
.pmx-admin { background: #fffaf0 !important; color: #b45309; }
.pm-seg-sm .pm-opt span { padding: 3px 8px; font-size: 13px; }
td.pmx-def .pm-seg { opacity: .75; }
.pmx-copy { margin-top: 4px; font-size: 11px; padding: 1px 8px; border-radius: 10px; background: #fff; }
.pmx-wrap { max-height: max(360px, calc(100vh - 230px)); }
/* 👥 users under the permission groups */
.pmu-table td { vertical-align: middle; } .pmu-table select { width: auto; }
.pmu-table .pm-av { margin-inline-end: 4px; }
.pmu-table tr.pmu-new td { background: #f6f9fd; }
/* 💬 message center — redesign */
.mc-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.mc-top h2 { margin: 0 0 2px; }
.mc-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-legend { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0 12px; font-size: 12px; }
.mc-group { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 6px 10px 10px; margin-bottom: 14px; }
.mc-group h3 { margin: 6px 4px 8px; font-size: 16px; }
.mc-table { border: 0; }
.mc-table th { background: transparent; font-size: 12px; color: var(--muted); border-bottom: 2px solid var(--line); }
.mc-table td { border-bottom: 1px solid #f0f2f5; }
.mc-namecell { min-width: 210px; }
.mc-dir { font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.mc-sub { font-size: 11px; margin-top: 2px; }
.mc-live { color: #1e8e3e; font-weight: 600; } .mc-plan { color: #b26a00; }
.mc-trig { display: flex; gap: 6px; align-items: flex-start; }
.mc-trig-ic { width: 28px; height: 28px; flex: none; border-radius: 8px; background: #eef3fa; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.mc-chs { min-width: 200px; }
.mc-ch { display: inline-flex; align-items: center; gap: 4px; margin: 2px; padding: 2px 8px; border-radius: 14px; font-size: 11px; border: 1px solid var(--line); background: #fff; color: #9aa1ab; cursor: pointer; }
.mc-ch span { display: none; }
.mc-ch.on span, .mc-legend .mc-ch span { display: inline; }
.mc-ch.on { color: #fff; border-color: transparent; }
.mc-ch-wa.on { background: #25D366; } .mc-ch-link.on { background: #1a73e8; } .mc-ch-copy.on { background: #64748b; } .mc-ch-mail.on { background: #7c3aed; }
.mc-ch-sms.on { background: #0891b2; } .mc-ch-bell.on { background: #d97706; } .mc-ch-popup.on { background: #dc2626; } .mc-ch-sound.on { background: #db2777; }
.mc-ch-screen.on { background: #475569; } .mc-ch-app.on { background: #0f766e; }
.mc-ch:disabled { cursor: default; }
.mc-modes { display: inline-flex; background: #f1f3f6; border-radius: 10px; padding: 2px; gap: 2px; }
.mc-mode-btn { border: 0; background: none; padding: 3px 8px; border-radius: 8px; font-size: 13px; cursor: pointer; }
.mc-mode-btn.on { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.mc-valid { display: inline-flex; align-items: center; gap: 4px; } .mc-valid input { width: 70px; padding: 3px 6px; }
.mc-switch { position: relative; display: inline-block; width: 38px; height: 22px; cursor: pointer; }
.mc-switch input { opacity: 0; width: 0; height: 0; }
.mc-switch span { position: absolute; inset: 0; background: #cfd5dd; border-radius: 22px; transition: background .15s; }
.mc-switch span::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.mc-switch input:checked + span { background: #1e8e3e; }
.mc-switch input:checked + span::after { transform: translateX(-16px); }
/* 🗺 status flow diagram */
.sf-diag-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 10px; }
.sfd-help { font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.sfd-legend { display: inline-flex; align-items: center; gap: 6px; }
.sfd-legend .lg { display: inline-block; width: 14px; height: 10px; border-radius: 3px; border: 2px solid #94a3b8; }
.sfd-legend .lg.start { border-color: #1e8e3e; background: #e3f4e8; } .sfd-legend .lg.final { border-color: #1f3a5f; background: #1f3a5f; } .sfd-legend .lg.off { border-style: dashed; }
.sfd-legend .lg-a { display: inline-block; width: 22px; height: 3px; background: #1f3a5f; }
svg.sfd { width: 100%; height: auto; background: radial-gradient(#e5e9f0 1px, transparent 1px) 0 0 / 18px 18px, #fbfcfe; border: 1px solid var(--line); border-radius: 14px; touch-action: none; user-select: none; }
.sfd-node rect { fill: #fff; stroke: #94a3b8; stroke-width: 2; filter: drop-shadow(0 2px 3px rgba(20, 40, 80, .12)); }
.sfd-node { cursor: grab; }
.sfd-node.start rect { stroke: #1e8e3e; fill: #f0faf3; }
.sfd-node.final rect { stroke: #1f3a5f; fill: #1f3a5f; } .sfd-node.final .sfd-label { fill: #fff; }
.sfd-node.off rect { stroke-dasharray: 6 4; fill: #f3f4f6; } .sfd-node.off .sfd-label { fill: #9aa1ab; }
.sfd-node.sel rect { stroke: #1a73e8; stroke-width: 3.5; fill: #eaf2ff; }
.sfd-label { font: 600 14px Heebo, "Segoe UI", Arial, sans-serif; text-anchor: middle; dominant-baseline: middle; fill: #1d2433; pointer-events: none; }
.sfd-sub { font: 11px Heebo, "Segoe UI", Arial, sans-serif; text-anchor: middle; fill: #8a94a3; pointer-events: none; }
.sfd-edge .sfd-line { fill: none; stroke-width: 2; }
.sfd-edge .sfd-hit { fill: none; stroke: transparent; stroke-width: 14; cursor: pointer; }
.sfd-edge.allowed .sfd-line { stroke: #1e8e3e; }
.sfd-edge.faint .sfd-line { stroke: #9ccfaa; stroke-width: 1.4; }
.sfd-edge.main .sfd-line { stroke: #1f3a5f; stroke-width: 3; }
.sfd-edge.blocked .sfd-line { stroke: #d93025; stroke-dasharray: 6 5; opacity: .75; }
.sfd-edge:hover .sfd-line { stroke-width: 4; opacity: 1; }
.sfd-x { font: 700 12px sans-serif; fill: #d93025; text-anchor: middle; pointer-events: none; }
.lv-proc { cursor: help; font-size: 13px; margin-inline-start: 4px; }
.lv-paths { display: flex; gap: 6px; margin: -2px 0 8px; }
ol.off-steps { padding-inline-start: 20px; display: flex; flex-direction: column; gap: 10px; }
ol.off-steps li div { color: #475467; margin: 3px 0 6px; }
/* 🚚 trucks & drivers — one screen */
.fd-free { background: #f6f9fd; border: 2px dashed #c9d6e6; border-radius: 14px; padding: 10px 12px; margin-bottom: 12px; }
.fd-free.fd-over { border-color: #1a73e8; background: #eaf2ff; }
.fd-free-title { font-weight: 700; margin-bottom: 8px; }
.fd-free-list { display: flex; flex-wrap: wrap; gap: 8px; min-height: 40px; }
.fd-driver { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #d6dde6; border-radius: 22px; padding: 4px 8px 4px 12px;
  box-shadow: 0 1px 2px rgba(20, 40, 80, .08); cursor: grab; user-select: none; }
.fd-driver:hover { border-color: #9fb5cf; box-shadow: 0 3px 8px rgba(20, 40, 80, .12); }
.fd-driver.dragging { opacity: .45; }
.fd-driver.off { opacity: .55; border-style: dashed; }
.fd-driver .fd-dname { display: flex; flex-direction: column; line-height: 1.15; }
.fd-driver .fd-dname small { color: var(--muted); font-size: 11px; }
.fd-driver .icon { font-size: 11px; opacity: .45; padding: 0 2px; } .fd-driver .icon:hover { opacity: 1; }
.fd-table td { vertical-align: middle; }
.fd-table .fd-slot { min-width: 220px; }
.fd-empty { display: inline-block; color: #98a2b3; border: 1px dashed #cfd6e0; border-radius: 22px; padding: 6px 14px; font-size: 13px; }
body.fd-dragging .fd-table tr[data-id] .fd-empty { border-color: #1a73e8; color: #1a73e8; }
.fd-table tr.fd-over td { background: #eaf2ff !important; }
.fd-table tr.fd-off td { opacity: .55; }
/* 👥 users screen: groups on top */
.us-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-bottom: 8px; }
.pm-card.us-group { grid-template-rows: auto auto; }
.pm-card.us-group small { grid-column: 2; }
.fd-free-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fd-add { margin-inline-start: auto; display: inline-flex; gap: 4px; }
.fd-add input { width: 190px; padding: 4px 8px; font-size: 13px; }
.pmu-table tr.pmu-flash td { background: #fff4d6 !important; transition: background .3s; }
.fd-table select.fd-st { width: auto; font-size: 12px; padding: 2px 6px; border-radius: 12px; }
.fd-table select.fd-st.on { background: #e3f4e8; color: #1e6b35; } .fd-table select.fd-st.off { background: #fde7e7; color: #a32d2d; }

/* ---------- 📱 dispatcher on the phone ---------- */
.m-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--primary, #1f3a5f); color: #fff; }
.m-top b { font-size: 17px; }
.m-top button { background: rgba(255,255,255,.14); color: #fff; border: none; border-radius: 10px; min-width: 40px; height: 38px; font-size: 18px; }
.m-top .conn { color: #fff; font-size: 12px; }
.m-main { padding: 10px 10px 86px; max-width: 640px; margin: 0 auto; }
.m-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface, #fff);
  border-top: 1px solid var(--line, #dde3ea); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -4px 14px rgba(0,0,0,.06); }
.m-bar button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; background: none; border: none; padding: 7px 0 8px; font-size: 12px; color: var(--muted, #64748b); }
.m-bar button span { font-size: 22px; line-height: 1.1; }
.m-bar button.on { color: var(--primary, #1f3a5f); font-weight: 700; }
.m-bar button.on span { transform: scale(1.1); }
.m-bar i { position: absolute; top: 3px; inset-inline-start: calc(50% + 6px); font-style: normal; background: var(--danger, #c5221f); color: #fff; border-radius: 99px; font-size: 11px; min-width: 18px; padding: 0 5px; }
.m-h { font-size: 16px; margin: 14px 2px 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.m-h small { font-weight: 400; font-size: 12px; }
.m-sub { font-size: 13px; font-weight: 700; color: var(--muted, #64748b); margin: 12px 4px 6px; }
.m-card { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: right; background: var(--surface, #fff); border: 1px solid var(--line, #dde3ea);
  border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; font-size: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.04); cursor: pointer; }
.m-card:active { background: #f1f5fb; }
.m-card.susp { border-color: #f5b5b0; background: #fff6f5; }
.m-l1 { font-size: 15px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.m-l2 { color: #334155; }
.m-l3 { font-size: 13px; color: #475569; }
.m-prog { display: flex; height: 6px; border-radius: 99px; background: #e8edf3; overflow: hidden; margin-top: 4px; }
.m-prog .out { background: #1e8e3e; } .m-prog .plan { background: #9cd3aa; }
.m-day { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 4px 0 6px; }
.m-day button { min-width: 42px; height: 38px; border-radius: 10px; }
.m-plant { background: var(--surface, #fff); border: 1px solid var(--line, #dde3ea); border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; }
.m-plant .spacer { flex: 1; }
.m-sum { background: #f5f7fa; border-radius: 10px; padding: 10px 12px; font-size: 14px; line-height: 1.5; margin-bottom: 12px; }
.m-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.m-acts > button, .m-act { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 12px; border: 1px solid var(--line, #dde3ea);
  background: var(--surface, #fff); font-size: 15px; font-weight: 600; text-decoration: none; color: inherit; padding: 6px; text-align: center; }
.m-acts > button.danger { color: var(--danger, #c5221f); border-color: #f5b5b0; }
.m-slot { font-size: 14px; padding: 7px 4px; border-top: 1px solid var(--line, #dde3ea); }
@media (max-width: 760px) {
  dialog { width: 100vw; max-width: 100vw; max-height: 100dvh; height: auto; margin: auto 0 0; border-radius: 16px 16px 0 0; }
  .dlg-body { max-height: calc(100dvh - 140px); }
  .dlg-foot button, .dlg-body input, .dlg-body select { min-height: 42px; font-size: 16px; }
}