/* ==========================================================================
   Design alternatives (🎨 in the header) — six looks over the same screens, per device (localStorage "ui").
   <html data-ui="t1".."t6">. Each theme sets the shared variables below; the rules after them apply the variables
   to the shell, tables, board, dialogs. t1 / t2 / t5 move the worlds to a side menu on the right.
   ========================================================================== */

[data-ui="t1"] { /* 1 · light with side menu */
  --bg: #f5f6f8; --surface: #fff; --text: #1d2433; --muted: #667085; --line: #e6e9ef;
  --primary: #1f6feb; --primary-text: #fff; --accent: #1f6feb;
  --hdr-bg: #fff; --hdr-tx: #1d2433; --hdr-line: #e6e9ef;
  --nav-bg: #fff; --nav-tx: #344054; --nav-on: #eaf1ff; --nav-on-tx: #1f4fd1;
  --th-bg: #fafbfc; --col-bg: #eef1f5; --hover: #f5f8ff; --soft: #f2f4f7; --warn-soft: #fff7ed;
  --radius: 10px; --btn-r: 7px; --cell: 7px 10px; --font: Heebo, "Segoe UI", Arial, sans-serif;
}
[data-ui="t2"] { /* 2 · dark control room */
  --bg: #0f141b; --surface: #161d27; --text: #e6e9ef; --muted: #8b95a7; --line: #263142;
  --primary: #2f81f7; --primary-text: #fff; --accent: #2f81f7;
  --ok: #3fb950; --warn: #d29922; --danger: #f85149; --lock: #a371f7;
  --hdr-bg: #0b0f15; --hdr-tx: #e6e9ef; --hdr-line: #263142;
  --nav-bg: #0b0f15; --nav-tx: #8b95a7; --nav-on: #1a2433; --nav-on-tx: #fff;
  --th-bg: #131a23; --col-bg: #121821; --hover: #1c2531; --soft: #1d2633; --warn-soft: #2a2110;
  --radius: 10px; --btn-r: 7px; --cell: 7px 10px; --font: Heebo, "Segoe UI", Arial, sans-serif;
  color-scheme: dark;
}
[data-ui="t3"] { /* 3 · industrial */
  --bg: #ecebe8; --surface: #fff; --text: #2b2a28; --muted: #6b6862; --line: #dcd9d3;
  --primary: #2b2a28; --primary-text: #fff; --accent: #f5b700;
  --hdr-bg: #2b2a28; --hdr-tx: #fff; --hdr-line: rgba(255,255,255,.3);
  --nav-bg: #3a3936; --nav-tx: #d6d3cc; --nav-on: #f5b700; --nav-on-tx: #2b2a28;
  --th-bg: #f1efeb; --col-bg: #e2e0db; --hover: #faf6ea; --soft: #f1efeb; --warn-soft: #fdf3d6;
  --radius: 3px; --btn-r: 3px; --cell: 7px 10px; --font: Heebo, "Segoe UI", Arial, sans-serif;
}
[data-ui="t4"] { /* 4 · minimal */
  --bg: #fff; --surface: #fff; --text: #111; --muted: #8a8a8a; --line: #ececec;
  --primary: #111; --primary-text: #fff; --accent: #111;
  --hdr-bg: #fff; --hdr-tx: #111; --hdr-line: #ececec;
  --nav-bg: #fff; --nav-tx: #8a8a8a; --nav-on: #111; --nav-on-tx: #fff;
  --th-bg: #fff; --col-bg: #f7f7f7; --hover: #fafafa; --soft: #f5f5f5; --warn-soft: #fffaf0;
  --radius: 6px; --btn-r: 6px; --cell: 9px 10px; --font: Heebo, "Segoe UI", Arial, sans-serif;
}
[data-ui="t5"] { /* 5 · soft & friendly */
  --bg: #f3f1fb; --surface: #fff; --text: #2d2a4a; --muted: #7c7896; --line: #e7e3f5;
  --primary: #6d4ae8; --primary-text: #fff; --accent: #6d4ae8;
  --hdr-bg: #fff; --hdr-tx: #2d2a4a; --hdr-line: #e7e3f5;
  --nav-bg: #fff; --nav-tx: #5b5878; --nav-on: #ece8ff; --nav-on-tx: #5a3fd6;
  --th-bg: #faf9ff; --col-bg: #ebe7f8; --hover: #f7f5ff; --soft: #f1eefc; --warn-soft: #fff4e5;
  --radius: 14px; --btn-r: 10px; --cell: 9px 12px; --font: Heebo, "Segoe UI", Arial, sans-serif;
}
[data-ui="t6"] { /* 6 · classic enterprise (Priority-like) */
  --bg: #e9edf2; --surface: #fff; --text: #1c2b3a; --muted: #5d6d7e; --line: #cfd8e3;
  --primary: #1f3a5f; --primary-text: #fff; --accent: #1f3a5f;
  --hdr-bg: #1f3a5f; --hdr-tx: #fff; --hdr-line: rgba(255,255,255,.35);
  --nav-bg: #2c4a73; --nav-tx: #c7d3e2; --nav-on: #fff; --nav-on-tx: #1f3a5f;
  --th-bg: #dfe6ee; --col-bg: #dde4ec; --hover: #eef3f9; --soft: #eef2f6; --warn-soft: #fdf4e3;
  --radius: 2px; --btn-r: 2px; --cell: 4px 8px; --font: "Segoe UI", Arial, sans-serif;
  font-size: 14px;
}

/* ---------- shared: the variables applied ---------- */
[data-ui^="t"] { font-family: var(--font); }
[data-ui^="t"] body { background: var(--bg); color: var(--text); }
[data-ui^="t"] button { border-radius: var(--btn-r); background: var(--surface); color: var(--text); border-color: var(--line); }
[data-ui^="t"] button.primary { background: var(--primary); color: var(--primary-text); border-color: var(--primary); }
[data-ui^="t"] button.icon { background: none; }
[data-ui^="t"] input, [data-ui^="t"] select, [data-ui^="t"] textarea { background: var(--surface); color: var(--text); border-color: var(--line); border-radius: var(--btn-r); }
[data-ui^="t"] input:disabled, [data-ui^="t"] select:disabled, [data-ui^="t"] textarea:disabled { background: var(--soft); }

[data-ui^="t"] header.top { background: var(--hdr-bg); color: var(--hdr-tx); border-bottom: 1px solid var(--line); }
[data-ui^="t"] header.top button { background: transparent; color: inherit; border-color: var(--hdr-line); }
[data-ui^="t"] .conn { background: var(--soft); color: var(--muted); }
[data-ui="t3"] .conn, [data-ui="t6"] .conn { background: rgba(255,255,255,.12); color: inherit; }
[data-ui^="t"] nav.worlds { background: var(--nav-bg); border-bottom: 1px solid var(--line); }
[data-ui^="t"] nav.worlds button { color: var(--nav-tx); background: none; }
[data-ui^="t"] nav.worlds button.active { background: var(--nav-on); color: var(--nav-on-tx); box-shadow: none; }
[data-ui^="t"] nav.tabs { background: var(--surface); border-bottom: 1px solid var(--line); }
[data-ui^="t"] nav.tabs button { color: var(--muted); background: none; }
[data-ui^="t"] nav.tabs button.active { color: var(--text); border-bottom-color: var(--accent); }

[data-ui^="t"] table.list { background: var(--surface); border-color: var(--line); border-radius: var(--radius); }
[data-ui^="t"] table.list th, [data-ui^="t"] table.list td { padding: var(--cell); border-bottom-color: var(--line); }
[data-ui^="t"] table.list th { background: var(--th-bg); color: var(--muted); font-weight: 600; }
[data-ui^="t"] table.list tr.clickable:hover td { background: var(--hover); }
[data-ui^="t"] .column, [data-ui^="t"] .column.narrow { background: var(--col-bg); border-radius: var(--radius); }
[data-ui^="t"] .card { background: var(--surface); border-color: var(--line); border-radius: var(--radius); }
[data-ui^="t"] .bank { background: var(--surface); border-color: var(--line); border-radius: var(--radius); }
[data-ui^="t"] dialog { background: var(--surface); color: var(--text); border-radius: var(--radius); }
[data-ui^="t"] .dlg-head, [data-ui^="t"] .dlg-foot { border-color: var(--line); }
[data-ui^="t"] .dash-card { background: var(--surface); border-color: var(--line); border-radius: var(--radius); }
[data-ui^="t"] .dash-card.warn { background: var(--warn-soft); }
[data-ui^="t"] .subtabs { border-bottom-color: var(--line); }
[data-ui^="t"] .subtabs button.active { color: var(--accent); border-bottom-color: var(--accent); }
[data-ui^="t"] .badge { background: var(--soft); }

/* ---------- side menu: t1, t2, t5 — the worlds on the right, the content beside them ---------- */
[data-ui="t1"] #app:has(> nav.worlds), [data-ui="t2"] #app:has(> nav.worlds), [data-ui="t5"] #app:has(> nav.worlds) {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); grid-template-rows: auto auto 1fr;
  grid-template-areas: "head head" "side tabs" "side main"; min-height: 100vh;
}
[data-ui="t1"] #app > header.top, [data-ui="t2"] #app > header.top, [data-ui="t5"] #app > header.top { grid-area: head; }
[data-ui="t1"] #app > nav.worlds, [data-ui="t2"] #app > nav.worlds, [data-ui="t5"] #app > nav.worlds {
  grid-area: side; flex-direction: column; flex-wrap: nowrap; gap: 2px; padding: 12px 10px; border-bottom: 0;
  border-left: 1px solid var(--line); position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto;
}
[data-ui="t1"] #app > nav.worlds button, [data-ui="t2"] #app > nav.worlds button, [data-ui="t5"] #app > nav.worlds button {
  width: 100%; justify-content: flex-start; border-radius: var(--btn-r); padding: 9px 12px; font-weight: 500;
}
[data-ui="t1"] #app > nav.tabs, [data-ui="t2"] #app > nav.tabs, [data-ui="t5"] #app > nav.tabs { grid-area: tabs; }
[data-ui="t1"] #app > main, [data-ui="t2"] #app > main, [data-ui="t5"] #app > main { grid-area: main; min-width: 0; }
@media (max-width: 760px) {
  [data-ui="t1"] #app:has(> nav.worlds), [data-ui="t2"] #app:has(> nav.worlds), [data-ui="t5"] #app:has(> nav.worlds) { display: block; }
  [data-ui="t1"] #app > nav.worlds, [data-ui="t2"] #app > nav.worlds, [data-ui="t5"] #app > nav.worlds { flex-direction: row; flex-wrap: wrap; height: auto; position: static; border-left: 0; }
  [data-ui="t1"] #app > nav.worlds button, [data-ui="t2"] #app > nav.worlds button, [data-ui="t5"] #app > nav.worlds button { width: auto; }
}

/* ---------- 2 · dark: the light-tinted spots of the regular design ---------- */
[data-ui="t2"] .badge.s-בוצעה, [data-ui="t2"] .badge.reply-ok, [data-ui="t2"] .badge.ct-ok, [data-ui="t2"] .badge.st-done, [data-ui="t2"] .badge.trip-done, [data-ui="t2"] .badge.request { background: rgba(63,185,80,.18); color: #56d364; }
[data-ui="t2"] .badge.s-בביצוע, [data-ui="t2"] .badge.reply-wait, [data-ui="t2"] .badge.ct-wait, [data-ui="t2"] .badge.st-approved, [data-ui="t2"] .badge.trip-road, [data-ui="t2"] .badge.suggest { background: rgba(210,153,34,.2); color: #e3b341; }
[data-ui="t2"] .badge.s-בוטלה, [data-ui="t2"] .badge.reply-bad, [data-ui="t2"] .badge.ct-bad, [data-ui="t2"] .badge.st-cancelled { background: rgba(248,81,73,.18); color: #ff7b72; }
[data-ui="t2"] .badge.ct-work, [data-ui="t2"] .badge.s-משובצת, [data-ui="t2"] .badge.st-placed, [data-ui="t2"] .badge.corr-badge { background: rgba(47,129,247,.2); color: #79c0ff; }
[data-ui="t2"] .badge.ct-open, [data-ui="t2"] .badge.ct-done { background: #1d2633; color: #8b95a7; }
[data-ui="t2"] .status-select { background: #1d2633; color: #c9d1d9; }
[data-ui="t2"] tr.row-over td, [data-ui="t2"] .row-over { background: rgba(248,81,73,.08); }
[data-ui="t2"] table.assign tr.slot-empty td { background: #121821; }
[data-ui="t2"] table.assign tr.locked td { background: rgba(163,113,247,.1); }
[data-ui="t2"] .progress { background: #263142; }
[data-ui="t2"] .clog-changed td, [data-ui="t2"] tr.clog-changed td { background: rgba(210,153,34,.15) !important; }
[data-ui="t2"] .cq-head, [data-ui="t2"] .cq-form, [data-ui="t2"] .coll-panel, [data-ui="t2"] .cc-rule, [data-ui="t2"] .cq-btn { background: #161d27; border-color: #263142; color: var(--text); }
[data-ui="t2"] .cq-btn.on { background: #1a2433; border-color: #2f81f7; }
[data-ui="t2"] a { color: #79c0ff; }
[data-ui="t2"] .obank { background: #131a23; }
[data-ui="t2"] .obank-day, [data-ui="t2"] .obank-day.nodate, [data-ui="t2"] .obank-day.later, [data-ui="t2"] .order-chip-wrap, [data-ui="t2"] .order-chip { background: #161d27; color: var(--text); }
[data-ui="t2"] .bank-status, [data-ui="t2"] .truck-chip.external { background: #1d2633; color: var(--muted); }
[data-ui="t2"] .truck-chip.assigned { background: rgba(63,185,80,.14); }
[data-ui="t2"] .order-chip-wrap.bs-ok .bank-status { background: rgba(63,185,80,.18); }
[data-ui="t2"] .order-chip-wrap.bs-phone .bank-status { background: rgba(210,153,34,.2); }
[data-ui="t2"] .order-chip-wrap.bs-changed .bank-status { background: rgba(163,113,247,.2); }
[data-ui="t2"] .order-chip-wrap.bs-closed .bank-status { background: rgba(47,129,247,.2); color: #79c0ff; }

/* ---------- 3 · industrial: yellow bars ---------- */
[data-ui="t3"] .dash-card { border-right: 4px solid var(--accent); }
[data-ui="t3"] .column h3 { border-bottom: 3px solid var(--accent); padding-bottom: 4px; }
[data-ui="t3"] button.primary { background: var(--accent); color: #2b2a28; border-color: var(--accent); font-weight: 600; }
[data-ui="t3"] nav.tabs button.active { border-bottom-width: 4px; }

/* ---------- 4 · minimal: lines only ---------- */
[data-ui="t4"] table.list { border: 0; }
[data-ui="t4"] table.list th { border-bottom: 1px solid #111; font-weight: 500; }
[data-ui="t4"] .card, [data-ui="t4"] .dash-card { box-shadow: none; }
[data-ui="t4"] .column { background: transparent; border: 1px solid var(--line); }

/* ---------- 5 · soft: rounder, lifted cards ---------- */
[data-ui="t5"] .card, [data-ui="t5"] .dash-card, [data-ui="t5"] table.list { box-shadow: 0 2px 8px rgba(90, 63, 214, .06); border-color: transparent; }
[data-ui="t5"] .badge { border-radius: 20px; }

/* ---------- 6 · classic: dense, zebra rows ---------- */
[data-ui="t6"] table.list tr:nth-child(even) td { background: #f6f8fb; }
[data-ui="t6"] table.list th { color: #1c2b3a; border-bottom: 2px solid #b8c4d3; }
[data-ui="t6"] .card { padding: 7px; }

/* ---------- the 🎨 menu ---------- */
.ui-menu { position: absolute; z-index: 60; background: #fff; color: #1d2433; border: 1px solid #d6dde6; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 6px; min-width: 250px; }
.ui-menu button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; color: #1d2433; padding: 7px 8px; border-radius: 7px; text-align: right; }
.ui-menu button:hover { background: #f1f4f9; }
.ui-menu button.on { background: #eaf1ff; font-weight: 600; }
.ui-menu .sw { display: inline-flex; flex: none; width: 46px; height: 18px; border-radius: 4px; overflow: hidden; border: 1px solid rgba(0,0,0,.12); }
.ui-menu .sw i { flex: 1; }
.ui-menu small { color: #7a8494; display: block; font-size: 11px; font-weight: 400; }