/* ==========================================================================
   "עיצוב נקי" — a calmer look, offered as a proposal next to the current design.
   Active only when <html data-ui="clean"> (toggled from the header, remembered per device).
   Ideas: white header, soft cards instead of borders, fewer colors,
   and secondary buttons (split, FIFO, lock, delete, edit) appear only when hovering a card or row.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600;700&display=swap');

[data-ui="clean"] {
  --bg: #f6f7f9; --surface: #fff; --text: #1d2433; --muted: #7a8494; --line: #eceef2;
  --primary: #2b4c7e; --accent: #2b4c7e; --soft: #f1f4f9;
  --radius: 12px;
  font-family: Heebo, "Segoe UI", Arial, sans-serif;
}
[data-ui="clean"] body { background: var(--bg); }

/* ---------- buttons & fields: quiet by default ---------- */
[data-ui="clean"] button { border-color: transparent; background: var(--soft); border-radius: 8px; color: var(--text); }
[data-ui="clean"] button:hover { background: #e6ebf3; border-color: transparent; }
[data-ui="clean"] button.primary { background: var(--primary); color: #fff; }
[data-ui="clean"] button.primary:hover { background: #22406b; }
[data-ui="clean"] button.icon { background: none; opacity: .55; }
[data-ui="clean"] button.icon:hover { opacity: 1; background: none; }
[data-ui="clean"] input, [data-ui="clean"] select, [data-ui="clean"] textarea { border-color: #e1e5eb; border-radius: 8px; }
[data-ui="clean"] input:focus, [data-ui="clean"] select:focus, [data-ui="clean"] textarea:focus { outline: 2px solid #2b4c7e33; border-color: var(--primary); }

/* ---------- header & tabs: one light bar ---------- */
[data-ui="clean"] header.top { background: var(--surface); color: var(--text); border-bottom: 1px solid var(--line); padding: 10px 24px; }
[data-ui="clean"] header.top h1 { font-size: 20px; font-weight: 700; color: var(--primary); }
[data-ui="clean"] header.top button { background: var(--soft); color: var(--text); border: none; }
[data-ui="clean"] .conn { background: var(--soft); color: var(--muted); }
[data-ui="clean"] nav.tabs { padding: 0 24px; gap: 8px; }
[data-ui="clean"] nav.tabs button { background: none; color: var(--muted); font-weight: 500; padding: 12px 6px; }
[data-ui="clean"] nav.tabs button:hover { color: var(--text); }
[data-ui="clean"] nav.tabs button.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
[data-ui="clean"] main { padding: 20px 24px; }
[data-ui="clean"] .toolbar h2 { font-weight: 700; }

/* ---------- orders bank & truck bank: neutral panels ---------- */
[data-ui="clean"] .obank, [data-ui="clean"] .bank { background: var(--surface); border: none; border-radius: var(--radius); box-shadow: 0 1px 3px rgba(20, 30, 50, .06); padding: 10px 14px; }
[data-ui="clean"] .obank-day { border: none; background: var(--soft); border-radius: 10px; }
[data-ui="clean"] .obank-day.current { background: #e8eef8; box-shadow: none; }
[data-ui="clean"] .obank-day.nodate, [data-ui="clean"] .obank-day.later { background: var(--soft); }
[data-ui="clean"] .order-chip-wrap { box-shadow: 0 1px 2px rgba(20, 30, 50, .08); }
[data-ui="clean"] .order-chip { background: var(--surface); }
[data-ui="clean"] .bank-status { background: var(--surface); border: none; color: var(--muted); }
[data-ui="clean"] .truck-chip { background: var(--soft); border: none; }
[data-ui="clean"] .truck-chip.assigned { background: #edf5ef; }

/* ---------- plant columns ---------- */
[data-ui="clean"] .plants { gap: 16px; }
[data-ui="clean"] .column { background: transparent; padding: 0; }
[data-ui="clean"] .column h3 { background: var(--surface); border-radius: var(--radius); padding: 10px 12px; margin: 0 0 10px;
  box-shadow: 0 1px 3px rgba(20, 30, 50, .06); font-size: 17px; }
[data-ui="clean"] .column.narrow { background: transparent; }
[data-ui="clean"] .plant-sum { color: var(--muted); }

/* ---------- order cards: soft, roomy, less ink ---------- */
[data-ui="clean"] .card { border: none; border-radius: var(--radius); padding: 14px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(20, 30, 50, .07); }
[data-ui="clean"] .card:hover { box-shadow: 0 4px 14px rgba(20, 30, 50, .10); }
[data-ui="clean"] .card-head .time { font-size: 18px; color: var(--primary); }
[data-ui="clean"] .card-head .grow { font-size: 16px; }
[data-ui="clean"] .card .line { color: #4a5363; }
[data-ui="clean"] .status-select { border: none; font-weight: 600; }
[data-ui="clean"] .remain { background: var(--soft); color: var(--text); border-radius: 8px; }
[data-ui="clean"] .remain.done { background: #edf5ef; }
[data-ui="clean"] .remain.over { background: #fdeeee; }
[data-ui="clean"] .qty-edit { background: transparent; border: none; }
[data-ui="clean"] .progress { height: 4px; background: var(--soft); }
[data-ui="clean"] .badge { background: var(--soft); color: #4a5363; font-weight: 500; }
[data-ui="clean"] table.assign td { border-top-color: var(--line); padding: 5px 2px; }
[data-ui="clean"] table.assign tr.slot-empty td { background: transparent; border-top-style: dashed; color: var(--muted); }
[data-ui="clean"] table.assign .slot-no { color: #b3bac6; }

/* Secondary controls appear on hover (desktop only — on phones and tablets they always show). */
@media (hover: hover) {
  [data-ui="clean"] .card-head [data-action="split-order"],
  [data-ui="clean"] .card-head [data-action="toggle-fifo"]:not(.primary),
  [data-ui="clean"] .card-head [data-action="lock-order"],
  [data-ui="clean"] .card-head [data-action="order-to-bank"],
  [data-ui="clean"] .card .qty-edit,
  [data-ui="clean"] table.assign td:last-child button,
  [data-ui="clean"] table.assign [data-action="trip-undo"] { opacity: 0; transition: opacity .15s; }
  [data-ui="clean"] .card:hover .card-head [data-action],
  [data-ui="clean"] .card:hover .qty-edit,
  [data-ui="clean"] table.assign tr:hover td:last-child button,
  [data-ui="clean"] table.assign tr:hover [data-action="trip-undo"] { opacity: .8; }
  /* A locked order/row keeps its lock visible. */
  [data-ui="clean"] .card.locked .card-head [data-action="lock-order"],
  [data-ui="clean"] table.assign tr.locked td:last-child [data-action="lock-assign"] { opacity: 1; }
}

/* ---------- dialogs & tables ---------- */
[data-ui="clean"] dialog { border-radius: 16px; box-shadow: 0 20px 60px rgba(20, 30, 50, .25); }
[data-ui="clean"] table.list th { background: transparent; color: var(--muted); font-weight: 500; border-bottom: 1px solid var(--line); }
[data-ui="clean"] table.list td { border-bottom-color: var(--line); }
[data-ui="clean"] .ticket-card, [data-ui="clean"] .sched-row { border: none; box-shadow: 0 1px 3px rgba(20, 30, 50, .07); }
[data-ui="clean"] .ticket-head { background: var(--surface); }
[data-ui="clean"] .sched-stat { background: var(--surface); box-shadow: 0 1px 3px rgba(20, 30, 50, .06); }
[data-ui="clean"] .subtabs button { background: none; }

/* The design switch in the header */
.ui-toggle { font-size: 13px; }