silently stays a normal block. */
.auto-fit { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }
/* ---- "הזמנה חדשה" (Pages/NewOrder.razor) — compact layout, owner 2026-09-15. Everything here is
scoped with a no- prefix or the .no-cal/.no-price panel classes; nothing global changes. ---- */
.auto-fit > * { min-width: 0; }
/* two short panels stacked into ONE auto-fit cell (times over station/car), next to the tall journal */
.no-stack { display: grid; gap: 10px; align-content: start; min-width: 0; }
/* an action that belongs to the panel, in its header (h3 is a space-between flex row) */
.panel > h3 .no-hbtn { border: 1px solid var(--border-strong); background: var(--surface); color: var(--brand); border-radius: var(--r-sm);
padding: 2px 10px; font-size: var(--fs-xs); font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap; }
.panel > h3 .no-hbtn:hover { background: var(--brand-tint); }
.panel > h3 .no-dur { font-size: var(--fs-xs); font-weight: 400; color: var(--ink-2); }
.panel > h3 .no-dur b { color: var(--brand); font-variant-numeric: tabular-nums; }
/* times: label above its field, the two fields side by side while there is room */
.no-times { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 8px 12px; }
.no-field { display: grid; gap: 4px; min-width: 0; align-content: start; }
.no-field > label { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); }
.no-field .dt-input { width: 100%; min-width: 0; }
.no-steps { display: flex; gap: 4px; flex-wrap: wrap; }
.no-steps button { border: 1px solid var(--border-strong); background: var(--surface); border-radius: var(--r-sm); padding: 2px 8px;
cursor: pointer; font-size: var(--fs-xs); font-family: inherit; white-space: nowrap; }
.no-steps button:hover { background: var(--brand-tint); }
/* option/confirm forms: the label column is as wide as its longest label, controls are capped —
.form's fixed 180px label column + 100%-wide select left a 450px dropdown and a 150px gap */
.no-form { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 12px; align-items: center; }
.no-form > label { color: var(--ink-2); font-size: var(--fs-xs); white-space: nowrap; }
.no-form select, .no-form input[type=text] { width: 100%; max-width: 300px; padding: 4px 8px;
border: 1px solid var(--border-strong); border-radius: var(--r-sm); font-family: inherit; font-size: var(--fs-xs); }
.no-form .inline-chk { display: flex; align-items: center; gap: 6px; }
.no-form .inline-chk input[type=checkbox] { inline-size: 15px; block-size: 15px; margin: 0; }
.no-form .inline-chk label { font-size: var(--fs-xs); color: var(--ink-2); }
/* the journal beside the form: its own scroller, sized to the stacked times+station+options cell */
.no-cal .cal2-scroll { min-height: 220px; max-height: 440px; }
/* the price preview beside the form: dense rows, and it scrolls inside its panel instead of
pushing the page sideways */
.no-scroll-x { overflow-x: auto; min-width: 0; }
.no-price .price-table { margin: 4px 0 0; font-size: var(--fs-xs); line-height: 1.35; box-shadow: none; }
.no-price .price-table thead th { padding: 6px 8px; font-size: var(--fs-xs); }
.no-price .price-table tbody td { padding: 5px 8px; }
.no-price .price-table tfoot td { padding: 6px 8px; font-size: var(--fs-sm); }
/* numeric cells in the RTL price table: isolated LTR so "-12" is not flipped to "12-" */
.price-table th.num, .price-table td.num { direction: ltr; unicode-bidi: isolate; text-align: right;
font-variant-numeric: tabular-nums; white-space: nowrap; }
.links { display: flex; flex-wrap: wrap; gap: 8px; }
.links a { display: inline-block; background: var(--brand-tint); border: 1px solid var(--brand-border); color: var(--brand);
border-radius: var(--r-pill); padding: 5px 12px; font-size: var(--fs-xs); text-decoration: none; }
.links a:hover { background: var(--brand); color: var(--on-brand); }
table.grid tbody tr.clickable { cursor: pointer; }
table.grid tbody tr.clickable:hover { background: var(--border); }
/* Alert rows — the WPF AlertStatusToBackgroundBrushConverter, hex for hex (#ab0000 / #8a067c /
#4a068a with white bold text, as on the main window's alert cards). Painted on the cells, not on
the row, so the colour survives the .clickable:hover rule above; hover lightens it instead. */
table.grid tbody tr.alert-open > td,
table.grid tbody tr.alert-admin > td,
table.grid tbody tr.alert-rep > td { color: var(--on-brand); font-weight: 600; }
table.grid tbody tr.alert-open > td { background: var(--danger-strong); }
table.grid tbody tr.alert-admin > td { background: var(--brand); }
table.grid tbody tr.alert-rep > td { background: var(--brand-strong); }
table.grid tbody tr.alert-open:hover > td { background: var(--danger); }
table.grid tbody tr.alert-admin:hover > td { background: var(--brand); }
table.grid tbody tr.alert-rep:hover > td { background: var(--brand-strong); }
.alert-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--ink-2); }
.alert-legend i { display: inline-block; width: 10px; height: 10px; border-radius: var(--r-sm);
margin-inline-end: 3px; vertical-align: -1px; }
.alert-legend .c-open { background: var(--danger-strong); }
.alert-legend .c-admin { background: var(--brand); }
.alert-legend .c-rep { background: var(--brand-strong); }
/* detail (key/value) view */
/* עמודת המפתח הייתה 220px קשיחים. בפאנל צר ("זמנים" בכרטיס ההזמנה) לא נשארו לערך מספיק
פיקסלים ל-input[type=datetime-local] — הדפדפן אינו מכווץ את שדות התאריך, ולכן overflow:hidden
כאן חתך אותם ("42 09/09/2026" במקום "15:42 09/09/2026"). זו לא בעיית גופן. עכשיו המפתח
מתכווץ עד 90px כשצריך, והערך לעולם לא יורד מ-175px; בפאנל רחב שום דבר לא זז. */
.kv { display: grid; grid-template-columns: minmax(90px, 220px) minmax(175px, 1fr); gap: 0;
border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.kv > div { padding: 5px 10px; border-bottom: 1px solid var(--surface); font-size: var(--fs-xs); }
.kv > div.k { background: var(--bg); color: var(--ink-2); font-weight: 600; border-inline-end: 1px solid var(--surface); }
.kv > div.v { font-variant-numeric: tabular-nums; }
.open-link { font-size: var(--fs-xs); font-weight: 400; color: var(--brand); text-decoration: none; margin-inline-start: 8px; }
.open-link:hover { text-decoration: underline; }
/* tabs (WPF subscriber tabs -> Blazor) */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 0 0 10px; flex-wrap: wrap; }
.tabs button { border: 1px solid transparent; border-bottom: none; background: none; padding: 8px 16px;
cursor: pointer; font-size: var(--fs-sm); color: var(--ink-2); border-radius: var(--r-md) var(--r-md) 0 0; }
.tabs button:hover { background: var(--brand-tint); }
.tabs button.active { background: var(--surface); border-color: var(--border); color: var(--brand); font-weight: 700; margin-bottom: -1px; }
/* credit cards */
.cc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.cc-card { border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px; background: linear-gradient(135deg,var(--brand-tint),var(--brand-tint)); }
.cc-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.cc-num { font-size: var(--fs-lg); font-weight: 700; color: var(--brand); letter-spacing: 2px; font-variant-numeric: tabular-nums; }
.cc-exp { font-size: var(--fs-xs); color: var(--ink-2); }
.cc-main-badge { background: var(--brand-accent); color: var(--on-brand); border-radius: var(--r-pill); padding: 2px 10px; font-size: var(--fs-xs); font-weight: 700; }
.cc-form { display: grid; grid-template-columns: 92px 1fr; gap: 6px 8px; align-items: center; margin-top: 8px; }
.cc-form label { font-size: var(--fs-xs); color: var(--ink-2); }
.cc-form input { border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 4px 6px; font-size: var(--fs-xs); font-family: inherit; background: var(--surface); }
.cc-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.cc-actions button { background: var(--brand); color: var(--on-brand); border: none; border-radius: var(--r-md); padding: 6px 16px; cursor: pointer; font-size: var(--fs-xs); }
.cc-actions button:disabled { background: var(--border-strong); cursor: default; }
.cc-msg { font-size: var(--fs-xs); }
.cc-msg.ok { color: var(--ok); }
.cc-msg.bad { color: var(--danger-strong); }
/* subscriber detail */
.sub-head { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-md); padding: 12px 16px; margin: 0 0 10px; }
.sub-head .sh-avatar { width: 52px; height: 52px; border-radius: var(--r-pill); background: var(--brand); color: var(--on-brand);
display: flex; align-items: center; justify-content: center; font-size: var(--fs-xl); font-weight: 700; flex-shrink: 0; }
.sub-head .sh-name { font-size: var(--fs-lg); font-weight: 800; color: var(--brand); }
.sub-head .sh-name .sh-nick { font-size: var(--fs-sm); font-weight: 400; color: var(--ink-3); }
.sub-head .sh-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--ink-2); font-size: var(--fs-xs); margin-top: 4px; }
.detail-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: start; }
.detail-cols > div { display: grid; gap: 10px; }
@media (max-width: 820px){ .detail-cols { grid-template-columns: 1fr; } }
.notes-box { white-space: pre-wrap; font-size: var(--fs-xs); color: var(--ink-2); }
/* scanned documents */
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.doc-card { border: 1px solid var(--border); border-radius: var(--r-md); padding: 6px; background: var(--surface); }
.doc-card .doc-title { font-size: var(--fs-xs); color: var(--ink-2); margin-bottom: 5px; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; }
.doc-card img { width: 100%; height: 120px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); }
.doc-card .doc-file { display: block; text-align: center; padding: 40px 6px; color: var(--brand); text-decoration: none; font-size: var(--fs-xs); }
.doc-card .doc-file:hover { text-decoration: underline; }
.doc-card .doc-broken { text-align: center; color: var(--ink-3); padding: 46px 0; }
/* subscriber card "מסמכים סרוקים" (SubDocumentsPanel, ClickUp 123zgec9ehg): the WPF selector + preview */
.sdoc-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 8px; }
.sdoc-pick label { display: inline-flex; align-items: center; gap: 4px; }
.sdoc-pick select { min-width: 180px; }
.sdoc-acts { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sdoc-acts > button, .sdoc-acts > a.btn-link, .sdoc-add { border: 1px solid var(--border-strong); background: var(--surface); border-radius: var(--r-sm);
padding: 3px 10px; font-size: var(--fs-xs); cursor: pointer; color: inherit; text-decoration: none; }
.sdoc-acts > button:hover:not(:disabled), .sdoc-acts > a.btn-link:hover, .sdoc-add:hover { background: var(--brand-tint); }
.sdoc-acts > button.danger { color: var(--danger); }
.sdoc-add { position: relative; overflow: hidden; color: var(--ok); }
.sdoc-add input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sdoc-add.disabled { opacity: .5; cursor: not-allowed; }
.sdoc-add.disabled input[type=file] { cursor: not-allowed; }
.sdoc-msg-ok { color: var(--ok); font-size: var(--fs-xs); font-weight: 600; }
.sdoc-preview { border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px; margin-bottom: 10px; background: var(--bg); }
.sdoc-preview img { display: block; max-inline-size: 100%; max-block-size: 420px; margin-inline: auto; cursor: zoom-in; }
.sdoc-preview iframe { inline-size: 100%; block-size: 480px; border: 0; background: #fff; }
.sdoc-grid .doc-card { cursor: pointer; }
.sdoc-grid .doc-card.sel { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-border); }
/* a document scan is mostly white paper: "cover" cropped its centre into a blank grey tile (owner
2026-10-19, sub 53553). Show the whole page instead, on paper white. */
.sdoc-grid .doc-card img { object-fit: contain; background: #fff; }
.sdoc-grid .doc-card .doc-file { padding: 40px 6px; }
/* form */
.form { display: grid; grid-template-columns: 180px 1fr; gap: 10px 12px; max-width: 640px; align-items: center; }
.form label { color: var(--ink-2); font-size: var(--fs-sm); }
.form input, .form select { padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); font-family: inherit; width: 100%; }
.form .actions { grid-column: 1 / -1; display: flex; gap: 10px; margin-top: 8px; }
.notice { background: var(--warn-tint); border: 1px solid var(--warn-border); color: var(--warn); border-radius: var(--r-md); padding: 8px 10px; font-size: var(--fs-xs); margin-top: 10px; white-space: pre-wrap; }
/* An order that is not in the active-orders view and was read straight from the DB. Informational,
not a failure — amber, not red: the order is fully loaded, only its reference fields are thinner. */
.archived-note { display: flex; align-items: flex-start; gap: 8px; background: var(--warn-tint);
border-color: var(--warn-border); color: var(--warn); font-size: var(--fs-xs); line-height: 1.5; }
.archived-note .an-icon { font-size: var(--fs-md); line-height: 1.2; }
.archived-note code { background: color-mix(in srgb, var(--ink) 6%, transparent); border-radius: var(--r-sm); padding: 0 4px;
font-size: var(--fs-xs); direction: ltr; unicode-bidi: embed; }
.archived-note .an-gaps { color: var(--danger-strong); font-weight: 700; margin-inline-start: 5px; }
/* order-open header + body */
.order-head { display: flex; align-items: center; gap: 16px; background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-md); padding: 12px 16px; margin: 10px; }
.order-head .oh-id { font-size: var(--fs-xl); font-weight: 800; color: var(--brand); }
.order-head .oh-main { flex: 1; }
.order-head .oh-sub { font-weight: 700; font-size: var(--fs-md); }
.order-head .oh-sub .oh-sub-link { color: inherit; text-decoration: none; }
.order-head .oh-sub .oh-sub-link:hover { color: var(--brand); text-decoration: underline; }
.order-head .oh-meta { color: var(--ink-2); font-size: var(--fs-xs); }
.badge { display: inline-block; background: var(--brand-tint); color: var(--brand); border: 1px solid var(--brand-border);
border-radius: var(--r-pill); padding: 4px 12px; font-size: var(--fs-xs); font-weight: 600; margin-inline-start: 6px; }
.badge.price { background: var(--ok-tint); color: var(--ok); border-color: var(--ok-border); }
.order-head .oh-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; max-width: 340px; }
.badge.warn { background: var(--warn-tint); color: var(--warn); border-color: var(--warn-border); }
.pill { display: inline-block; border-radius: var(--r-pill); padding: 4px 14px; font-size: var(--fs-xs); font-weight: 700; color: var(--on-brand); }
.pill.s-draft { background: var(--ink-3); }
.pill.s-approved { background: var(--brand); }
.pill.s-active { background: var(--ok); }
.pill.s-done { background: var(--ink-3); }
.pill.s-cancelled { background: var(--danger); }
.pill-editable { cursor: pointer; }
.pill-editable:hover { filter: brightness(0.9); }
.status-edit-inline { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.status-edit-inline select { font-size: var(--fs-xs); padding: 2px 4px; }
.status-edit-inline button.tiny { font-size: var(--fs-xs); padding: 2px 8px; }
.orders-summary { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.os-chip { display: inline-block; background: var(--brand-tint); color: var(--brand); border: 1px solid var(--brand-border); border-radius: var(--r-md); padding: 4px 10px; font-size: var(--fs-xs); font-family: inherit; cursor: pointer; }
.os-chip:hover { background: var(--border); }
.os-chip.active { background: var(--brand); color: var(--on-brand); border-color: var(--brand); font-weight: 600; }
.os-chip.warn.active { background: var(--warn); color: var(--on-brand); border-color: var(--warn); }
.os-chip.clear { background: var(--surface); color: var(--ink-2); border-color: var(--border); }
.os-chip.warn { background: var(--warn-tint); color: var(--warn); border-color: var(--warn-border); }
.carteset-rows { margin: 8px 0; max-height: 320px; overflow: auto; border: 1px solid var(--border); border-radius: var(--r-md); }
.carteset-rows table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.carteset-rows th { background: var(--bg); text-align: right; padding: 5px 8px; position: sticky; top: 0; }
.carteset-rows td { padding: 4px 8px; border-top: 1px solid var(--surface); text-align: right; white-space: nowrap; }
/* planned-window timeline */
.timeline-wrap { margin: 0 10px 10px; }
.timeline-wrap .tl-head { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--ink-2);
font-variant-numeric: tabular-nums; margin-bottom: 5px; }
.timeline-wrap .tl-mid { font-weight: 700; color: var(--ink-2); }
.timeline { position: relative; height: 12px; background: var(--surface-2); border-radius: var(--r-pill); overflow: visible; }
.timeline-fill { position: absolute; inset-inline-start: 0; top: 0; height: 100%; background: linear-gradient(90deg,var(--brand),var(--brand));
border-radius: var(--r-pill); }
.timeline-now { position: absolute; top: -18px; transform: translateX(50%); font-size: var(--fs-xs); font-weight: 700;
color: var(--brand); background: var(--warn-tint); border-radius: var(--r-sm); padding: 0 4px; white-space: nowrap; }
.order-body { display: grid; grid-template-columns: 340px 1fr; gap: 10px; padding: 0 10px 10px; align-items: start; }
/* extend-hours editor */
.extend-controls { display: flex; gap: 6px; flex-wrap: wrap; }
.extend-controls button { border: 1px solid var(--border-strong); background: var(--surface); border-radius: var(--r-sm); padding: 4px 10px; cursor: pointer; font-size: var(--fs-xs); }
.extend-controls button:hover { background: var(--brand-tint); }
/* min-width: הרוחב הפנימי של datetime-local (dd/mm/yyyy --:--) יחד עם הריפוד; בלעדיו השדה
מקבל את רוחב התא ונחתך מבפנים. box-sizing כדי שהריפוד ייכנס למינימום ולא מעליו. */
.dt-input { border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 3px 6px; font-size: var(--fs-xs); font-family: inherit; min-width: 172px; box-sizing: border-box; }
.delta { color: var(--ink-3); font-size: var(--fs-xs); }
/* "דיווח לקוח על שעת סיום" — the checkbox + the datetime + its save sit on one line inside the kv grid */
.marked-fin { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.marked-fin label.chk { display: flex; align-items: center; gap: 4px; margin: 0; cursor: pointer; }
.extend-errors { margin: 8px 0; display: grid; gap: 4px; }
.extend-errors .ee-item { background: var(--danger-tint); border: 1px solid var(--danger); color: var(--danger-strong); border-radius: var(--r-sm); padding: 5px 8px; font-size: var(--fs-xs); }
.extend-ok { margin: 8px 0; background: var(--ok-tint); border: 1px solid var(--ok-border); color: var(--ok); border-radius: var(--r-sm); padding: 5px 8px; font-size: var(--fs-xs); }
/* route (origin -> destination) */
.route { display: flex; flex-direction: column; gap: 2px; }
.route .route-node { display: flex; align-items: flex-start; gap: 8px; }
.route .rn-dot { width: 12px; height: 12px; border-radius: var(--r-pill); margin-top: 3px; flex-shrink: 0; }
.route .rn-dot.start { background: var(--ok); }
.route .rn-dot.end { background: var(--danger); }
.route .rn-txt { font-size: var(--fs-sm); color: var(--ink-2); }
.route .rn-lbl { display: block; font-size: var(--fs-xs); color: var(--ink-3); }
.route .route-arrow { color: var(--ink-3); margin-inline-start: 2px; font-size: var(--fs-md); line-height: 1; }
/* scheduler (day / 2-day / week) toolbar */
.cal-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.cal-toolbar h3 { border: 0; padding: 0; margin: 0; }
.cal-views, .cal-nav, .cal-zoom { display: flex; gap: 3px; align-items: center; }
.cal-views { margin-inline-start: auto; }
.cal-toolbar button { border: 1px solid var(--border-strong); background: var(--surface); border-radius: var(--r-sm); padding: 3px 9px; cursor: pointer; font-size: var(--fs-xs); }
.cal-toolbar button:hover { background: var(--brand-tint); }
.cal-views button.active { background: var(--brand-tint); color: var(--brand); border-color: var(--brand); font-weight: 600; } /* a selected option, not an action (stage 3) */
.cal-range { font-size: var(--fs-xs); color: var(--ink-2); min-width: 130px; text-align: center; font-variant-numeric: tabular-nums; }
/* the calendar is one tab stop: clicking it (or coming back to the tab) lets the arrows page it */
.cal-focus { outline: none; }
.cal-focus:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: var(--r-md); }
.cal-status { min-height: 16px; margin-bottom: 4px; font-size: var(--fs-xs); }
.cal-status .cal-hint { color: var(--ink-3); }
.cal2 { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.cal2-headrow { display: flex; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.cal2-corner { width: 46px; flex: 0 0 46px; border-inline-end: 1px solid var(--border); }
.cal2-dayhead { flex: 1; min-width: 88px; text-align: center; padding: 5px 2px; font-size: var(--fs-xs); font-weight: 700;
color: var(--ink-2); border-inline-start: 1px solid var(--border); }
.cal2-dayhead.is-today { background: var(--brand-tint); color: var(--brand); }
.cal2-scroll { overflow: auto; max-height: calc(100vh - 300px); min-height: 380px; }
.cal2-body { display: flex; position: relative; min-width: 100%; }
.cal2-ruler { width: 46px; flex: 0 0 46px; position: relative; border-inline-end: 1px solid var(--border); }
.cal2-ruler .cal2-hlabel { position: absolute; inset-inline-end: 4px; font-size: var(--fs-xs); color: var(--ink-3);
transform: translateY(-6px); font-variant-numeric: tabular-nums; }
.cal2-hline { position: absolute; inset-inline: 0; border-top: 1px solid var(--surface); }
.cal2-day { flex: 1; min-width: 88px; position: relative; border-inline-start: 1px solid var(--surface); }
.cal2-day .cal-event { position: absolute; inset-inline: 3px; }
/* right-click context menu */
.ctx-overlay { position: fixed; inset: 0; z-index: 50; }
.ctx-menu { position: fixed; z-index: 51; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
box-shadow: 0 6px 24px var(--shadow-color); padding: 4px; min-width: 140px; display: flex; flex-direction: column; }
.ctx-menu .ctx-title { font-size: var(--fs-xs); color: var(--ink-3); padding: 3px 8px; }
.ctx-menu button { text-align: start; border: 0; background: none; padding: 6px 10px; border-radius: var(--r-sm); cursor: pointer; font-size: var(--fs-sm); }
.ctx-menu button:hover { background: var(--brand-tint); }
.ctx-menu .ctx-sep { height: 1px; background: var(--surface-2); margin: 3px 0; }
/* day calendar (the "יומן" in the middle) */
.cal-panel { min-width: 0; }
.cal { position: relative; height: 620px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.cal-grid { position: relative; height: 960px; }
.cal-hour { position: absolute; inset-inline: 0; height: 40px; border-top: 1px solid var(--surface); }
.cal-hour .cal-hlabel { position: absolute; inset-inline-start: 4px; top: -8px; font-size: var(--fs-xs); color: var(--ink-3);
background: var(--surface); padding: 0 3px; font-variant-numeric: tabular-nums; }
.cal-event { position: absolute; inset-inline-start: 52px; inset-inline-end: 10px; background: var(--brand-tint);
border: 1px solid var(--brand-border); border-inline-start: 3px solid var(--brand); border-radius: var(--r-sm); padding: 3px 7px;
overflow: hidden; font-size: var(--fs-xs); box-shadow: 0 1px 3px var(--shadow-color); }
/* fetched by the per-car range read, not present in the criteria snapshot: same facts, fewer of them
(no subscriber name), so it reads as history rather than as a live booking */
.cal-event.from-db { background: var(--surface-2); border-color: var(--border); border-inline-start-color: var(--border-strong); color: var(--ink-2); }
.cal-event.current { background: var(--brand); border-color: var(--brand); border-inline-start-color: var(--brand-accent); color: var(--on-brand); z-index: 2; box-shadow: 0 3px 10px var(--focus-ring); }
.cal-event .ce-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.cal-event .ce-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-event .ce-id { opacity: .7; font-size: var(--fs-xs); }
.cal-event.release { background: var(--ok-tint); border-color: var(--ok-border); border-inline-start-color: var(--ok); color: var(--ok); cursor: default; }
/* The window being booked, on the new-order journal: WPF drew the not-yet-saved appointment as a
live block on the same scheduler (CarCalendarViewModel.NEW_APPOINTMENT_ID), striped so it cannot
be mistaken for a real order. */
.cal-event.ghost { background: repeating-linear-gradient(45deg, var(--warn-tint), var(--warn-tint) 6px, var(--warn-tint) 6px, var(--warn-tint) 12px); border-color: var(--warn-border); border-inline-start-color: var(--warn-border); color: var(--warn); cursor: default; z-index: 3; }
a.cal-event { text-decoration: none; }
/* the journal as a time picker (new order): drag = start..end, click = new start, same length */
.cal2-body.pickable .cal2-day { cursor: crosshair; }
.cal2-body.pickable .cal2-hline, .cal2-body.pickable .cal-event.ghost { pointer-events: none; }
.cal-event.pick { inset-inline: 3px; background: rgba(110, 72, 170, .22); border: 2px dashed var(--brand); color: var(--ink);
font-weight: 700; pointer-events: none; z-index: 4; }
/* order card, "סקירה": events across the top, then data | payment | notes - all on one screen, each
scrolling on its own (owner 2026-10-05: the WPF card showed these side by side) */
.od-review { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(240px, 46%) minmax(0, 1fr);
gap: 8px; min-height: 0; }
.od-review > section { min-width: 0; min-height: 0; overflow: auto; border: 1px solid var(--border); border-radius: var(--r-md);
padding: 6px 8px; background: var(--surface); }
.od-review > .odr-ev { grid-column: 1 / -1; }
.od-review > section > h4 { margin: 0 0 4px; font-size: var(--fs-sm); color: var(--ink-2); position: sticky; top: -6px;
background: var(--surface); padding-block: 2px; z-index: 1; }
.od-review .panel { border: none; padding: 0; box-shadow: none; }
@media (max-width: 1500px) {
.od-review { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(240px, 50vh) auto auto; }
.od-review > .odr-notes { grid-column: 1 / -1; }
}
/* order card, "אירועי רכב": one flex child of .cal-panel (see the markup), the WPF buttons on top */
.od-events { display: flex; flex-direction: column; gap: 6px; }
.od-ev-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.od-ev-acts .od-ev-sep { inline-size: 1px; block-size: 20px; background: var(--border); }
.od-ev-acts .hint { margin: 0; }
/* WPF OrderPointerEventsView: the date and time cells say whether the event is inside the order */
.grid tr.ev-in > td:nth-child(-n+2) { background: #FFFFE0; color: #1d1b26; }
.grid tr.ev-out > td:nth-child(-n+2) { background: #F9CBCB; color: #1d1b26; }
.grid tr.ev-near > td:nth-child(3) { background: #90EE90; color: #1d1b26; }
.grid tr.ev-far > td:nth-child(3) { background: #F08080; color: #1d1b26; }
.grid tr.row-selected > td { background: var(--brand-tint); box-shadow: inset 0 1px 0 var(--brand), inset 0 -1px 0 var(--brand); }
/* The WPF scheduler's labels (CarCalendarView.xaml AppointmentLabelCollection), same colours and the
same rule (CarCalendarViewModel.GetLabelId) - so whose booking a block is reads at a glance, as it
did in the old program. Pastels with dark ink in both themes: they are the old program's colours. */
.cal-event.lbl-same, .cal-event.lbl-other, .cal-event.lbl-emp, .cal-event.lbl-cancel, .cal-event.current {
color: #1d1b26; border-color: rgba(0,0,0,.18); }
.cal-event.lbl-same { background: #F1B4B4; border-inline-start-color: #c46d6d; }
.cal-event.lbl-same.lbl-a2b { background: #f28585; }
.cal-event.lbl-other { background: #ABD1F3; border-inline-start-color: #4f8fca; }
.cal-event.lbl-other.lbl-a2b { background: #6fb4f2; }
.cal-event.lbl-emp { background: #fcc181; border-inline-start-color: #c9822f; }
.cal-event.lbl-emp.lbl-a2b { background: #f79b23; }
.cal-event.lbl-cancel { background: #b9b9b9; border-inline-start-color: #7a7a7a; color: #2b2b2b; text-decoration: line-through; }
.cal-event.current { background: #F5EB90; border-color: #b8a92c; border-inline-start-color: #8c7f12; box-shadow: 0 3px 10px var(--focus-ring); }
.cal-event.current.lbl-cancel { background: #b9b9b9; border-color: #555; }
.cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 4px 0 6px; font-size: var(--fs-xs); }
.cal-legend .cal-event { position: static; padding: 1px 8px; box-shadow: none; cursor: default; text-decoration: none; }
.cal-legend-note { color: var(--ink-3); }
@media (max-width: 820px){ .order-body { grid-template-columns: 1fr; } }
/* ---------------------------------------------------------------------------
Shared UI infrastructure (phase 2): toasts, error boundary banner, modals,
grid pager. RTL-safe throughout (inset-inline-*, no left/right).
--------------------------------------------------------------------------- */
/* toast stack — the non-blocking half of the WPF MessageBox replacement */
/* Owner 2026-09-15: TOP (under the top bar), not bottom — at the bottom the toasts sat over the
form's controls and action buttons (the info toast covered "פרטי ההזמנה" on the new-order screen). */
.toast-host { position: fixed; inset-block-start: 44px; inset-inline-start: 14px; z-index: 900;
display: flex; flex-direction: column; gap: 8px; max-width: min(460px, 92vw); }
.toast { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-md);
background: var(--surface); border: 1px solid var(--border); box-shadow: 0 6px 20px var(--shadow-color); font-size: var(--fs-xs); }
.toast .toast-icon { font-weight: 700; }
.toast .toast-text { flex: 1; min-width: 0; }
.toast.err { border-color: var(--danger); background: var(--bg); color: var(--danger-strong); }
.toast.warn { border-color: var(--warn-border); background: var(--surface); color: var(--warn); }
.toast.ok { border-color: var(--ok-border); background: var(--bg); color: var(--ok); }
.toast.info { border-color: var(--brand-border); background: var(--brand-tint); color: var(--brand); }
.toast button { border: 1px solid var(--border-strong); background: var(--surface); border-radius: var(--r-sm); padding: 2px 8px;
cursor: pointer; font-size: var(--fs-xs); }
.toast button:hover:not(:disabled) { background: var(--brand-tint); }
.toast .toast-close { border: 0; background: transparent; opacity: .55; }
/* ErrorBoundary banner — replaces Blazor's dead "אירעה שגיאה" strip */
.boundary-banner { margin: 16px; padding: 14px 16px; border: 1px solid var(--danger); background: var(--bg);
border-radius: var(--r-md); color: var(--danger-strong); max-width: 720px; }
.boundary-banner .bb-title { font-weight: 700; margin-bottom: 6px; }
.boundary-banner .bb-text { font-size: var(--fs-sm); margin-bottom: 10px; }
.boundary-banner .bb-ref { color: var(--ink-3); font-size: var(--fs-xs); margin-inline-start: 8px; }
.boundary-banner .bb-actions { display: flex; gap: 8px; }
.boundary-banner button { border: 1px solid var(--border-strong); background: var(--surface); border-radius: var(--r-sm);
padding: 4px 12px; cursor: pointer; font-size: var(--fs-xs); }
.boundary-banner button.primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
/* modal dialogs (Confirm / Alert / Prompt) */
.modal-backdrop { position: fixed; inset: 0; background: var(--overlay); z-index: 1000;
display: flex; align-items: center; justify-content: center; }
.modal { background: var(--surface); border-radius: var(--r-md); box-shadow: 0 18px 50px var(--shadow-color);
min-width: min(420px, 92vw); max-width: min(560px, 94vw); overflow: hidden;
/* 2026-09-23 (דיווח בעלים): טופס ארוך - "גביה בכרטיס אשראי חד פעמי" - גלש מעבר למסך,
בלי גלילה ובלי שכפתור האישור נראה. הדיאלוג מוגבל לגובה המסך, הגוף גולל, והפעולות
נשארות מקובעות למטה. overflow:hidden נשאר כדי שהפינות המעוגלות יחתכו את הכותרת. */
display: flex; flex-direction: column; max-height: 92vh; }
.modal .m-title { background: var(--brand); color: var(--on-brand); padding: 8px 14px; font-weight: 700; font-size: var(--fs-sm); }
.modal .m-title { flex: 0 0 auto; }
.modal .m-body { padding: 14px; font-size: var(--fs-sm); color: var(--ink-2); white-space: pre-wrap;
flex: 1 1 auto; overflow-y: auto; }
.modal .m-body input { width: 100%; margin-top: 10px; padding: 6px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); }
.modal .m-actions { display: flex; gap: 8px; justify-content: flex-start; padding: 10px 14px;
background: var(--bg); border-top: 1px solid var(--border); flex: 0 0 auto; }
.modal .m-actions button { border: 1px solid var(--border-strong); background: var(--surface); border-radius: var(--r-sm);
padding: 4px 16px; cursor: pointer; font-size: var(--fs-xs); }
.modal .m-actions button.primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.modal .m-actions button.danger { background: var(--danger-strong); border-color: var(--danger-strong); color: var(--on-brand); }
/* one-line "what this grid does" note above a grid (WPF put these in a LayoutItem label) */
.hint { color: var(--ink-2); font-size: var(--fs-xs); margin: 2px 0 6px; }
/* map modal (MapDialog) — the WPF docked GMap panel, shown on demand instead of always-on */
.modal.map-modal { min-width: min(860px, 94vw); max-width: min(860px, 94vw); }
/* "אישור ביטול הזמנה" (CancelOrderDialog) — הפורט של CancelOrderControlView.xaml (W-02).
רחב מ-Confirm רגיל כי יש בו טבלת הזמנות עתידיות, ו-white-space חוזר ל-normal כי ה-m-body
הכללי הוא pre-wrap (נכון להודעת טקסט, שובר markup). */
.modal.cancel-dlg { min-width: min(560px, 94vw); max-width: min(640px, 94vw); }
.modal .cancel-dlg-body { white-space: normal; max-height: 70vh; overflow-y: auto; }
.cancel-dlg .cd-loading { color: var(--ink-2); }
.cancel-dlg .cd-row { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.cancel-dlg .cd-lbl { flex: 0 0 96px; color: var(--ink-2); font-size: var(--fs-xs); }
.cancel-dlg .cd-row select,
.cancel-dlg .cd-row textarea { flex: 1 1 auto; padding: 5px; border: 1px solid var(--border-strong);
border-radius: var(--r-sm); font-family: inherit; font-size: var(--fs-xs); }
.cancel-dlg .cd-row textarea { resize: vertical; }
/* "סכום לתשלום" — ה-TextEdit המושבת של ה-XAML: הסכום הוא קריאה בלבד, ובולט. */
.cancel-dlg .cd-amount { font-size: var(--fs-lg); font-weight: 700; color: var(--danger-strong); }
.cancel-dlg .cd-busy { color: var(--ink-2); font-size: var(--fs-xs); }
.cancel-dlg .cd-free { display: flex; align-items: center; gap: 4px; margin-inline-start: auto;
font-size: var(--fs-xs); color: var(--ink-2); cursor: pointer; }
.cancel-dlg .cd-free input { width: auto; margin: 0; }
/* האזהרה האדומה של ה-XAML (Foreground="Red", FontSize 15, Bold, ממורכזת) */
.cancel-dlg .cd-a2b { color: var(--danger-strong); font-weight: 700; font-size: var(--fs-md); text-align: center;
background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px; margin-bottom: 10px; }
.cancel-dlg .cd-future { margin-bottom: 10px; }
.cancel-dlg .cd-future-h { font-size: var(--fs-xs); color: var(--ink-2); margin-bottom: 4px; }
.cancel-dlg .cd-future-t { width: 100%; font-size: var(--fs-xs); }
.cancel-dlg .cd-validations { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; }
.map-modal .map-title { display: flex; align-items: center; gap: 10px; }
.map-modal .map-title .mt-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-modal .map-title .mt-sub { font-weight: 400; opacity: .85; font-size: var(--fs-xs); white-space: nowrap; }
.map-modal .m-close { border: none; background: var(--on-brand-subtle); color: var(--on-brand); border-radius: var(--r-sm);
cursor: pointer; font-size: var(--fs-xs); line-height: 1; padding: 4px 7px; }
.map-modal .m-close:hover { background: var(--on-brand-subtle); }
.map-modal .map-body { padding: 0; background: var(--surface-2); }
.map-modal .map-body { height: min(58vh, 460px); }
.map-modal .map-actions { align-items: center; font-size: var(--fs-xs); }
.map-modal .map-coords { color: var(--ink-2); direction: ltr; unicode-bidi: isolate; font-size: var(--fs-xs); }
.map-modal .map-open { color: var(--brand); text-decoration: none; font-size: var(--fs-xs); }
.map-modal .map-open:hover { text-decoration: underline; }
/* grid pager + export (DevExpress GridControl pager -> Blazor) */
.grid-pager { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--fs-xs); color: var(--ink-2); }
.grid-pager button { border: 1px solid var(--border-strong); background: var(--surface); border-radius: var(--r-sm); padding: 2px 8px;
cursor: pointer; font-size: var(--fs-xs); min-width: 26px; }
.grid-pager button:disabled { opacity: .4; cursor: default; }
.grid-pager button:hover:not(:disabled) { background: var(--brand-tint); }
.grid-pager .pg-spacer { flex: 1; }
.grid-pager select { padding: 2px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); font-size: var(--fs-xs); }
/* ============================================================================
PHASE 3 — screen chrome that the ported WPF views need.
============================================================================ */
/* --- RibbonControl page tabs (RibbonDefaultPageCategory -> RibbonPage) --- */
.ribbon-tabs { display: flex; gap: 2px; background: var(--brand); padding: 0 10px; }
.ribbon-tabs button { border: none; background: none; color: var(--brand); padding: 7px 18px; cursor: pointer;
font-size: var(--fs-xs); font-family: inherit; border-radius: var(--r-md) var(--r-md) 0 0; }
.ribbon-tabs button:hover { background: var(--brand-strong); color: var(--on-brand); }
.ribbon-tabs button.active { background: var(--bg); color: var(--brand); font-weight: 700; }
.ribbon-group .buttons { flex-wrap: wrap; max-width: 460px; }
/* --- a write/report action the server does not allow yet (see PORT_STATUS §6/§7) --- */
.write-guard { position: relative; display: inline-flex; align-items: center; }
.write-guard button[disabled] { background: var(--bg); color: var(--ink-3); border: 1px dashed var(--border-strong);
border-radius: var(--r-sm); padding: 6px 22px 6px 10px; font-size: var(--fs-xs); font-family: inherit; cursor: not-allowed; }
.write-guard .wg-lock { position: absolute; inset-inline-end: 5px; font-size: var(--fs-xs); opacity: .65; pointer-events: none; }
.write-guard.heavy button[disabled] { border-style: dotted; }
/* --- an ENABLED write (phase 4): the same slot, live. Disabled = missing permission, not
missing server support, so it reads as a normal disabled button, not a locked one. --- */
.write-action { display: inline-flex; align-items: center; }
.write-action button { background: var(--brand); color: var(--on-brand); border: 1px solid var(--brand); border-radius: var(--r-sm);
padding: 6px 12px; font-size: var(--fs-xs); font-family: inherit; cursor: pointer; }
.write-action button:hover:not([disabled]) { background: var(--brand-strong); }
.write-action button[disabled] { background: var(--surface-2); color: var(--ink-3); border-color: var(--border); cursor: not-allowed; }
.write-action button.danger { background: var(--danger); border-color: var(--danger); }
.write-action button.danger:hover:not([disabled]) { background: var(--danger); }
/* --- the awaitable edit form inside the modal (DialogService.FormAsync) --- */
.dlg-form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; min-width: 320px; }
.df-row { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-xs); }
.df-lbl { font-weight: 600; color: var(--ink-2); }
.df-req { color: var(--danger); }
.df-row input[type=text], .df-row input[type=number], .df-row input[type=date],
.df-row input[type=datetime-local], .df-row select, .df-row textarea {
padding: 5px 7px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); font-family: inherit; font-size: var(--fs-xs); }
.df-row input[type=checkbox] { inline-size: 16px; block-size: 16px; }
.df-row textarea { resize: vertical; }
.df-hint { font-size: var(--fs-xs); color: var(--ink-3); }
.df-error { color: var(--danger); font-size: var(--fs-xs); font-weight: 600; }
.df-warn { color: var(--warn); font-size: var(--fs-xs); font-weight: 600; }
/* --- the criteria LayoutGroup above the main orders grid --- */
.criteria { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: end; padding: 8px 10px; margin-bottom: 8px;
background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); }
.criteria label { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-xs); color: var(--ink-2); }
.criteria label > span { font-weight: 600; }
.criteria select { min-width: 150px; padding: 4px 6px; border: 1px solid var(--border-strong); border-radius: var(--r-sm);
font-family: inherit; font-size: var(--fs-xs); background: var(--surface); }
.criteria select:disabled { background: var(--surface-2); color: var(--ink-3); }
.criteria-current { align-self: center; background: var(--danger-tint); border-radius: var(--r-pill); padding: 3px 12px;
font-size: var(--fs-xs); font-weight: 700; color: var(--danger-strong); }
.criteria-refresh { margin-inline-start: auto; background: var(--ok); color: var(--on-brand); border: none; border-radius: var(--r-md);
padding: 7px 20px; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; font-family: inherit; }
.criteria-refresh:hover { background: var(--ok); }
.criteria-reset { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-md); padding: 7px 14px;
font-size: var(--fs-xs); cursor: pointer; font-family: inherit; }
/* --- the docked "מידע" TabControl (side panels + their count badges) --- */
.side-panel { display: flex; flex-direction: column; gap: 8px; }
.side-tabs { display: flex; flex-wrap: wrap; gap: 3px; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.side-tabs button { border: 1px solid transparent; background: none; padding: 5px 9px; cursor: pointer;
font-size: var(--fs-xs); font-family: inherit; color: var(--ink-2); border-radius: var(--r-sm) var(--r-sm) 0 0; display: inline-flex;
align-items: center; gap: 5px; }
.side-tabs button:hover { background: var(--brand-tint); }
.side-tabs button.active { background: var(--surface); border-color: var(--border); color: var(--brand); font-weight: 700; margin-bottom: -5px; }
.tab-badge { border-radius: var(--r-pill); padding: 0 6px; font-size: var(--fs-xs); font-weight: 700; color: var(--ink-2); }
.tab-badge.green { background: var(--ok-tint); }
.tab-badge.pink { background: var(--danger-tint); }
.tab-badge.salmon { background: var(--danger); color: var(--on-brand); }
.tab-badge.gray { background: var(--border); }
.tab-badge.blue { background: var(--brand-border); }
.side-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: var(--fs-xs); color: var(--ink-2); }
.side-filter select { flex: 1 1 110px; min-width: 0; padding: 3px 5px; border: 1px solid var(--border-strong);
border-radius: var(--r-sm); font-family: inherit; font-size: var(--fs-xs); }
/* A side panel is narrow: a long alert description (OPEN_DESCRIPTION) wraps inside its cell instead
of stretching the panel sideways. Every cell also carries its text as a title, so a wrapped or
clipped value is readable on hover. */
.side-panel table.grid td { max-width: 190px; overflow-wrap: anywhere; }
.side-list { display: flex; flex-direction: column; gap: 5px; max-height: 60vh; overflow: auto; }
.side-item { display: block; text-decoration: none; color: inherit; border: 1px solid var(--border);
border-radius: var(--r-md); padding: 6px 8px; background: var(--surface); }
.side-item:hover { background: var(--brand-tint); border-color: var(--brand-border); }
.side-item .si-title { font-size: var(--fs-xs); font-weight: 700; color: var(--brand); }
.side-item .si-meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--fs-xs); color: var(--ink-3); margin-top: 3px; }
.side-actions { display: flex; gap: 6px; }
/* --- RibbonStatusBarControl --- */
.statusbar { display: flex; align-items: center; gap: 18px; padding: 5px 14px; font-size: var(--fs-xs); color: var(--ink-2);
background: var(--bg); border-top: 1px solid var(--border); }
.statusbar strong { color: var(--ink-2); }
.statusbar .ok { color: var(--ok); font-weight: 700; }
.statusbar .bad { color: var(--danger-strong); font-weight: 700; }
.statusbar .sb-spacer { flex: 1; }
.statusbar .sb-brand { font-weight: 800; color: var(--brand); letter-spacing: 1px; font-size: var(--fs-sm); }
.statusbar .sb-brand span { color: var(--brand-accent); }
/* --- subscriber note history (sub_notes) --- */
.note-list { display: flex; flex-direction: column; gap: 8px; max-height: 55vh; overflow: auto; }
.note-item { border: 1px solid var(--border); border-radius: var(--r-md); padding: 6px 9px; background: var(--surface); }
.note-item .ni-head { display: flex; gap: 10px; font-size: var(--fs-xs); color: var(--ink-3); margin-bottom: 3px; }
.note-item.mine { background: var(--surface-2); border-color: var(--brand-border); }
.note-item .note-quote { border-inline-start: 3px solid var(--brand); padding: 2px 8px; margin-bottom: 4px; font-size: var(--fs-xs); color: var(--ink-2); background: var(--on-brand-subtle); }
.composer { display: flex; gap: 8px; margin-top: 10px; align-items: flex-start; }
.composer textarea { flex: 1; min-height: 54px; resize: vertical; font-family: inherit; }
.linkbtn { border: none; background: none; color: var(--brand); text-decoration: underline; padding: 2px 4px; cursor: pointer; font-size: inherit; }
/* --- incoming-calls floating panel (wpfControls/CallsStateView + ClientSide/IncomingCallsView) ---
The WPF original was a borderless Topmost window whose purple arrow collapsed the list into one
small bar. Here: position:fixed at the inline-end/bottom corner, z-index BELOW the toasts (900)
and the modals (1000) — a confirm dialog must still own the screen — and above every page. */
.calls-panel { position: fixed; inset-block-end: 14px; inset-inline-end: 14px; z-index: 800;
max-width: min(420px, calc(100vw - 28px)); font-size: var(--fs-xs); }
.calls-panel.closed { width: auto; }
/* collapsed: the _toolGrid bar — "שיחות נכנסות" + count + the longest ringing wait, pulsing over
MIN_SECONDS_ALERT (LonWaitingTimeStoryboard animated Opacity 0.3 -> 1 -> 0.3 in one second). */
.calls-pill { display: flex; align-items: center; gap: 8px; background: var(--brand); color: var(--on-brand);
border-radius: var(--r-pill); padding: 7px 14px; cursor: pointer; font-weight: 700;
box-shadow: 0 6px 18px var(--shadow-color); user-select: none; }
.calls-pill:hover { background: var(--brand-strong); }
.calls-pill .cp-icon { font-size: var(--fs-md); }
.calls-pill .cp-badge { background: var(--surface); color: var(--brand); border-radius: var(--r-pill); min-width: 20px;
text-align: center; padding: 0 6px; font-variant-numeric: tabular-nums; }
.calls-pill .cp-wait { font-variant-numeric: tabular-nums; opacity: .85; font-weight: 400; }
/* stage 14: a long wait colours the pill (no endless blink); a new call animates it once */
.calls-pill.pulse { background: var(--danger); }
.calls-pill.ping { animation: calls-pulse .5s ease-in-out 2; }
@keyframes calls-pulse { 0% { opacity: .35; } 50% { opacity: 1; } 100% { opacity: .35; } }
/* expanded card */
.calls-card { width: min(420px, calc(100vw - 28px)); background: var(--surface); border: 1px solid var(--brand);
border-radius: var(--r-md); overflow: hidden; box-shadow: 0 10px 30px var(--shadow-color); }
.calls-head { display: flex; align-items: center; gap: 8px; padding: 7px 12px; color: var(--on-brand);
background: linear-gradient(90deg, var(--brand), var(--brand)); }
.calls-head .ch-title { font-weight: 700; font-size: var(--fs-sm); }
.calls-head .ch-count { background: var(--surface); color: var(--brand); border-radius: var(--r-pill); padding: 0 7px;
font-weight: 700; font-variant-numeric: tabular-nums; }
.calls-head .ch-spacer { flex: 1; }
.calls-head .ch-act { cursor: pointer; padding: 0 4px; font-size: var(--fs-md); line-height: 1; opacity: .85; }
.calls-head .ch-act:hover { opacity: 1; }
.calls-err { background: var(--danger-tint); color: var(--danger-strong); padding: 5px 12px; font-size: var(--fs-xs); }
.calls-list { max-height: min(60vh, 520px); overflow: auto; }
.calls-empty { padding: 14px 12px; color: var(--ink-3); text-align: center; }
/* one call row — the background branches of CallPhoneRes.BackColor, hex for hex:
outgoing DarkKhaki / ringing LightBlue / connected LightGreen / anything else LightGray. */
.call-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; cursor: pointer;
border-bottom: 2px solid var(--ink-3); }
.call-row.st-ring { background: var(--border-strong); }
.call-row.st-up { background: var(--ok-tint); }
.call-row.st-out { background: var(--warn-tint); }
.call-row.st-other { background: var(--border); }
.call-row:hover { filter: brightness(1.06); }
.call-row.mine { box-shadow: inset 3px 0 0 var(--brand); }
.call-row.isnew { animation: calls-flash 1s ease-in-out 10; } /* 10 x 1s = the 10s the panel keeps a call marked new */
@keyframes calls-flash { 0%,100% { filter: none; } 50% { filter: brightness(1.35); } }
/* the AutoTimerView chip over ConvertDurationToColor */
.call-dur { min-width: 50px; text-align: center; border-radius: var(--r-sm); padding: 3px 0; color: var(--on-brand);
font-weight: 700; font-variant-numeric: tabular-nums; }
.call-dur.d-up { background: var(--info); }
.call-dur.d-ok { background: var(--ok); }
.call-dur.d-warn { background: var(--ok-tint); }
.call-dur.d-bad { background: var(--danger); }
.call-dur.d-idle { background: var(--ink-3); }
.call-circle { width: 82px; text-align: center; background: var(--on-brand-subtle); border-radius: var(--r-md);
color: var(--brand); font-weight: 800; padding: 3px 4px; line-height: 1.15; }
.call-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.call-phone { font-weight: 700; font-variant-numeric: tabular-nums; }
.call-agent { font-weight: 400; font-size: var(--fs-xs); color: var(--ink-2); margin-inline-start: 4px; }
.call-sub { font-size: var(--fs-xs); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-sub .call-excel { color: var(--brand); font-weight: 700; margin-inline-start: 4px; }
.call-sub .call-unknown { color: var(--ink-2); font-style: italic; }
.call-recent { background: var(--brand); color: var(--on-brand); border-radius: var(--r-pill); padding: 1px 8px; font-size: var(--fs-xs);
font-weight: 700; white-space: nowrap; }
.calls-foot { display: flex; align-items: center; gap: 8px; padding: 5px 12px; background: var(--bg);
border-top: 1px solid var(--border); font-size: var(--fs-xs); color: var(--ink-2); }
.calls-foot .cf-stale { background: var(--danger); color: var(--on-brand); border-radius: var(--r-sm); padding: 0 5px; font-weight: 700; }
.calls-foot .cf-src { opacity: .8; }
/* ============================================================================
"הזמנה חדשה" — the station / subscriber pickers (WPF SelectParkingView +
SubscriptionSearchView as modals) and the new-order form.
============================================================================ */
/* a wide modal that holds a grid, not a sentence */
.modal.picker-modal { min-width: min(1080px, 96vw); max-width: min(1080px, 96vw);
display: flex; flex-direction: column; max-height: 92vh; }
.modal.picker-modal.sub-picker { min-width: min(820px, 96vw); max-width: min(820px, 96vw); }
.picker-modal .picker-title { display: flex; align-items: center; gap: 10px; }
.picker-modal .picker-title .mt-text { flex: 1; }
.picker-modal .picker-title .mt-sub { font-weight: 400; opacity: .85; font-size: var(--fs-xs);
white-space: nowrap; font-variant-numeric: tabular-nums; }
.picker-modal .m-close { border: none; background: var(--on-brand-subtle); color: var(--on-brand); border-radius: var(--r-sm);
cursor: pointer; font-size: var(--fs-xs); line-height: 1; padding: 4px 7px; }
.picker-modal .m-close:hover { background: var(--on-brand-subtle); }
.picker-bar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: end; padding: 8px 12px;
background: var(--bg); border-bottom: 1px solid var(--border); }
.picker-bar label { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-xs); color: var(--ink-2); }
.picker-bar label > span { font-weight: 600; }
.picker-bar label.grow { flex: 1 1 220px; min-width: 0; }
.picker-bar label.chk { flex-direction: row; align-items: center; gap: 5px; align-self: center; }
.picker-bar label.chk > span { font-weight: 400; }
.picker-bar select, .picker-bar input[type=search] { padding: 4px 6px; border: 1px solid var(--border-strong);
border-radius: var(--r-sm); font-family: inherit; font-size: var(--fs-xs); background: var(--surface); min-width: 150px; }
.picker-bar input[type=search] { width: 100%; min-width: 0; }
.picker-bar select:disabled { background: var(--surface-2); color: var(--ink-3); }
.picker-reload { align-self: center; background: var(--brand); color: var(--on-brand); border: 1px solid var(--brand);
border-radius: var(--r-md); padding: 6px 16px; font-size: var(--fs-xs); font-family: inherit; cursor: pointer; }
.picker-reload:disabled { background: var(--border-strong); border-color: var(--border-strong); cursor: default; }
.picker-note { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center;
padding: 5px 12px; font-size: var(--fs-xs); color: var(--ink-2); border-bottom: 1px solid var(--surface); }
.picker-note .pn-anchor { font-weight: 600; color: var(--ink-2); }
.alert-legend .c-free { background: var(--ok); }
.alert-legend .c-busy { background: var(--danger-strong); }
.alert-legend .c-fav { background: var(--brand-accent); }
.picker-caveat { background: var(--warn-tint); border-bottom: 1px solid var(--warn-border); color: var(--warn);
padding: 5px 12px; font-size: var(--fs-xs); }
.picker-body { padding: 8px 12px; overflow: auto; flex: 1 1 auto; min-height: 140px; }
.picker-grid { max-height: 56vh; }
.picker-grid td.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.picker-grid td.pc { color: var(--ink-3); font-size: var(--fs-xs); }
/* WPF SelectParkingView: the availability cell's Foreground is Green when free, Red when not
(BooleanToBrushConverter on IsFreeNow). Same signal, same two colours. */
.picker-grid td.avail { font-weight: 700; font-variant-numeric: tabular-nums; }
.picker-grid td.avail.free { color: var(--ok); }
.picker-grid td.avail.busy { color: var(--danger-strong); }
.picker-grid tr.st-empty > td { color: var(--ink-3); cursor: default; }
.picker-grid tr.st-empty:hover > td { background: var(--surface); }
.picker-grid .rel-mark { color: var(--brand); margin-inline-start: 4px; }
.picker-grid .fav-star { color: var(--warn); /* the accent orange is 1.9:1 on white (stage 10 audit) */ margin-inline-end: 4px; }
.picker-count { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 5px; }
/* the "this is what you picked" card on the new-order form */
.chosen { border: 1px solid var(--brand-border); background: var(--brand-tint); border-radius: var(--r-md); padding: 8px 10px;
display: flex; flex-direction: column; gap: 3px; }
.chosen .ch-main { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chosen .ch-name { font-size: var(--fs-md); font-weight: 700; color: var(--brand); }
.chosen .ch-meta { font-size: var(--fs-xs); color: var(--ink-2); font-variant-numeric: tabular-nums; }
/* a checkbox that sits in the .form grid's value column */
.form .inline-chk { display: flex; align-items: center; gap: 6px; }
.form .inline-chk input[type=checkbox] { inline-size: 16px; block-size: 16px; width: auto; }
.form .inline-chk label { font-size: var(--fs-xs); color: var(--ink-2); }
/* ============================================================================================
subscriber approval (PORT_STATUS §12) — the WPF SignUpProcessView / SignUpConfirmImageView.
The WPF window is a dark full-screen wizard; here it is a normal screen in the client's own
palette, because a second visual language inside one browser app reads as a different product.
============================================================================================ */
/* the answered-count block on the right of the header card */
.ap-progress { text-align: center; min-width: 90px; }
.ap-progress .ap-count { font-size: var(--fs-xl); font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; }
/* the page strip — one entry per scanned document, in FilesRequired order, plus "סיום" */
.ap-strip { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-strip button { border: 1px solid var(--border-strong); background: var(--surface); border-radius: var(--r-pill);
padding: 5px 14px; cursor: pointer; font-size: var(--fs-xs); display: flex; align-items: center; gap: 6px; }
.ap-strip button:hover { background: var(--brand-tint); border-color: var(--brand-border); }
.ap-strip button.active { background: var(--brand-tint); border-color: var(--brand); color: var(--brand); font-weight: 700; }
.ap-strip button.done { border-color: var(--ok-border); }
.ap-strip button.done.active { background: var(--ok); border-color: var(--ok); }
.ap-strip .ap-chip { font-size: var(--fs-xs); opacity: .75; font-variant-numeric: tabular-nums; }
/* document on one side, the fields it proves on the other — the WPF two-pane page.
min-width:0 on the panes is what keeps a wide scan from widening the whole page: a grid/flex item's
automatic minimum size is its CONTENT size, so an oversized image would otherwise push the column
out past the viewport no matter what max-width the
![]()
itself carries. */
.ap-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: start; }
.ap-doc { min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px; }
.ap-doc-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.ap-doc-head .apd-title { font-weight: 700; color: var(--ink-2); font-size: var(--fs-xs); }
.ap-doc-head .apd-hint { color: var(--ink-3); font-size: var(--fs-xs); }
.ap-doc-none { color: var(--ink-3); font-size: var(--fs-xs); padding: 6px 0; }
/* Thumbnails only. Full size opens in ImageDialog over the page — an inline scan is a few thousand
pixels wide and used to render at natural size. auto-fill so the grid reflows instead of scrolling
sideways; the caption is the document's Hebrew name, so a thumbnail is identifiable when the
picture is unreadable at this size. */
.ap-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.ap-thumb { position: relative; display: block; min-width: 0; padding: 0; text-align: center;
background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden;
color: var(--ink-2); font-size: var(--fs-xs); font-family: inherit; cursor: pointer; }
.ap-thumb:hover { border-color: var(--brand); }
.ap-thumb:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.ap-thumb img { display: block; width: 100%; height: 160px; object-fit: cover; background: var(--surface); }
.ap-thumb .apt-cap { display: block; padding: 4px 5px; line-height: 1.3; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; }
/* which scan the questions on the right are about (WPF: the one document the page was built around) */
.ap-thumb.active { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-border); }
.ap-thumb .apt-badge { position: absolute; inset-block-start: 5px; inset-inline-start: 5px;
background: var(--brand); color: var(--on-brand); border-radius: var(--r-sm); padding: 1px 5px; font-weight: 700; }
/* inside a table cell (a pending customer version), where there is no grid to stretch into */
.ap-thumb-sm { width: 120px; }
.ap-thumb-sm img { height: 84px; }
/* the full-size viewer (ImageDialog) — as wide as the viewport allows, since that is the point */
.modal.image-modal { min-width: min(1000px, 96vw); max-width: min(1000px, 96vw);
display: flex; flex-direction: column; max-height: 94vh; }
.image-modal .image-title { display: flex; align-items: center; gap: 10px; }
.image-modal .image-title .mt-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.image-modal .image-title .mt-sub { font-weight: 400; opacity: .85; font-size: var(--fs-xs); white-space: nowrap; }
.image-modal .m-close { border: none; background: var(--on-brand-subtle); color: var(--on-brand); border-radius: var(--r-sm);
cursor: pointer; font-size: var(--fs-xs); line-height: 1; padding: 4px 7px; }
.image-modal .m-close:hover { background: var(--on-brand-subtle); }
.image-modal .image-body { flex: 1; min-height: 0; display: flex; align-items: center;
justify-content: center; padding: 10px; background: var(--surface-2); overflow: auto; }
/* contain, not cover: a document must never be cropped. max-width:100% + the flex parent's min-height:0
is what keeps a portrait scan inside the card instead of growing it past the viewport. */
.image-modal .image-body img { max-width: 100%; max-height: 78vh; object-fit: contain;
background: var(--surface); box-shadow: 0 2px 10px var(--shadow-color); }
.image-modal .image-actions { align-items: center; font-size: var(--fs-xs); }
.image-modal .image-open { color: var(--brand); text-decoration: none; font-size: var(--fs-xs); }
.image-modal .image-open:hover { text-decoration: underline; }
.ap-fields { display: flex; flex-direction: column; gap: 8px; }
.ap-field { background: var(--surface); border: 1px solid var(--border); border-inline-start-width: 4px;
border-inline-start-color: var(--border); border-radius: var(--r-md); padding: 8px 10px; }
.ap-field.ok { border-inline-start-color: var(--ok); }
.ap-field.bad { border-inline-start-color: var(--danger-strong); }
.ap-field.pending { border-inline-start-color: var(--warn-border); }
.ap-field .apf-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ap-field .apf-name { font-weight: 700; color: var(--ink-2); font-size: var(--fs-xs); }
.ap-field .apf-status { font-size: var(--fs-xs); color: var(--ink-2); }
.ap-field .apf-value { margin: 6px 0; }
.ap-field .apf-value input, .ap-field .apf-value select { border: 1px solid var(--border-strong); border-radius: var(--r-sm);
padding: 4px 6px; font-size: var(--fs-xs); font-family: inherit; min-width: 180px; }
.ap-field .apf-ro { font-size: var(--fs-sm); color: var(--brand); font-weight: 600; }
.ap-field .apf-versions { border: 1px dashed var(--brand-border); border-radius: var(--r-md); padding: 6px 8px; margin: 6px 0;
background: var(--bg); display: flex; flex-direction: column; gap: 3px; }
.ap-field .apf-version { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); cursor: pointer; }
.ap-field .apf-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ap-field .apf-actions button { border: 1px solid var(--border-strong); background: var(--surface); border-radius: var(--r-sm);
padding: 4px 12px; cursor: pointer; font-size: var(--fs-xs); }
.ap-field .apf-actions button.ok:hover, .ap-field .apf-actions button.ok.on { background: var(--ok); border-color: var(--ok); color: var(--on-brand); }
.ap-field .apf-actions button.bad:hover, .ap-field .apf-actions button.bad.on { background: var(--danger-strong); border-color: var(--danger-strong); color: var(--on-brand); }
.ap-field .apf-actions button.link { border: none; background: none; color: var(--brand); text-decoration: underline; padding: 4px 2px; }
.ap-nav { display: flex; gap: 8px; justify-content: space-between; margin-top: 4px; }
.ap-nav button { border: 1px solid var(--border-strong); background: var(--surface); border-radius: var(--r-sm); padding: 6px 14px;
cursor: pointer; font-size: var(--fs-xs); }
.ap-nav button:disabled { color: var(--ink-3); cursor: default; }
.ap-nav button.ok { background: var(--ok); border-color: var(--ok); color: var(--on-brand); }
/* one field at a time (ClickUp 123zgec9rmw): the page's fields in order, colour = verdict */
.ap-steps { display: flex; flex-wrap: wrap; gap: 4px; }
.ap-steps button { border: 1px solid var(--border); border-inline-start-width: 3px; background: var(--surface);
border-radius: var(--r-sm); padding: 2px 8px; font-size: var(--fs-xs); color: var(--ink-2); cursor: pointer; }
.ap-steps button.ok { border-inline-start-color: var(--ok); }
.ap-steps button.bad { border-inline-start-color: var(--danger-strong); }
.ap-steps button.pending { border-inline-start-color: var(--warn-border); }
.ap-steps button.active { border-color: var(--brand); color: var(--brand); font-weight: 700; background: var(--brand-tint); }
/* "עדכונים שהלקוח שלח": the changed fields, stored -> sent (ClickUp 123zgec9rmy) */
.ap-changes { margin: 0; padding-inline-start: 16px; font-size: var(--fs-sm); }
.ap-changes li { margin: 2px 0; }
/* the WPF "סיימנו..." panel */
.ap-finish { text-align: center; }
.ap-finish-buttons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 12px; }
.ap-finish-buttons .fin { border: none; border-radius: var(--r-md); padding: 10px 20px; cursor: pointer;
font-size: var(--fs-md); font-weight: 700; color: var(--on-brand); background: var(--ink-2); }
.ap-finish-buttons .fin:disabled { background: var(--border-strong); cursor: default; }
.ap-finish-buttons .fin.active { background: var(--ok); } /* WPF Background="Green" */
.ap-finish-buttons .fin.completes { background: var(--ok); } /* WPF Background="YellowGreen" */
.ap-finish-buttons .fin.young { background: var(--surface); color: var(--danger-strong); border: 1px solid var(--danger-strong); }
.ap-payload { max-width: 420px; white-space: normal; word-break: break-all; }
.note-item.err-note { border-color: var(--danger); background: var(--bg); }
/* the approval work queues (WPF NewSubscribersView tabs of NewSubAlertItemControl cards) */
.newsub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.newsub-card { border: 1px solid var(--border); border-radius: var(--r-md); padding: 9px 11px; background: var(--surface); }
.newsub-card.pending { background: var(--ok-tint); border-color: var(--ok-border); } /* WPF ShouldColor -> LightGreen */
.newsub-card .nsc-name { font-size: var(--fs-md); font-weight: 800; color: var(--brand); margin: 4px 0; }
.newsub-card .nsc-row { display: flex; gap: 6px; font-size: var(--fs-xs); }
.newsub-card .nsc-row .k { color: var(--ink-3); }
.newsub-card .nsc-row .v { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.newsub-card .nsc-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.newsub-card .nsc-actions .btn, .cc-btn { display: inline-block; text-decoration: none; font-size: var(--fs-xs);
border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-2); border-radius: var(--r-sm); padding: 5px 12px; }
.newsub-card .nsc-actions .btn:hover, .cc-btn:hover { background: var(--brand-tint); border-color: var(--brand-border); }
.newsub-card .nsc-actions .btn.primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.newsub-card .nsc-actions .btn.primary:hover { background: var(--brand-strong); }
/* the second card button in the main screen's side list */
.side-item .si-approve { display: inline-block; margin-top: 5px; font-size: var(--fs-xs); color: var(--brand);
text-decoration: none; border: 1px solid var(--brand-border); border-radius: var(--r-sm); padding: 2px 8px; background: var(--surface); }
.side-item .si-approve:hover { background: var(--brand); color: var(--on-brand); }
/* subscriber credit tab: server-decrypted number/token rows (2026-08-11) */
.cc-copyrow { display: flex; gap: 4px; }
.cc-copyrow input { flex: 1; direction: ltr; text-align: left; }
.cc-copyrow button { padding: 0 8px; white-space: nowrap; }
.cc-mono { font-family: Consolas, monospace; font-size: var(--fs-xs); }
/* live car strip on the order screen (2026-08-11) */
.car-live { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: var(--fs-xs); background: var(--bg); border: 1px solid var(--select-strong); border-radius: var(--r-md); padding: 5px 10px; margin: 6px 0; }
.car-live .cl-item { white-space: nowrap; }
.car-live .cl-low { color: var(--danger-strong); font-weight: 600; }
.car-live .cl-on { color: var(--ok); font-weight: 600; }
.car-live .cl-map { text-decoration: underline; }
.car-live .cl-when { color: var(--ink-3); margin-inline-start: auto; }
.car-live .cl-err { color: var(--ink-3); }
/* order price + extra charges panel (2026-08-11) */
.price-panel { background: var(--surface); border: 1px solid var(--select-strong); border-radius: var(--r-md); padding: 4px 10px; margin: 6px 0; font-size: var(--fs-xs); }
.price-panel summary { cursor: pointer; font-weight: 600; }
.price-table { border-collapse: collapse; width: 100%; margin: 6px 0; }
.price-table th, .price-table td { border: 1px solid var(--select-strong); padding: 3px 8px; text-align: right; }
.price-table thead th { background: var(--surface-2); }
.price-table tfoot td { font-weight: 700; background: var(--surface-2); }
.pp-h4 { margin: 8px 0 2px; }
/* cars-for-wash */
.wash-old td { background: var(--danger-tint); }
/* accident form pane */
.af-person { border: 1px solid var(--select-strong); border-radius: var(--r-md); padding: 6px 10px; margin: 4px 0; }
/* car images gallery (order card) */
.car-gallery { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 0; }
.cg-item { margin: 0; width: 130px; }
.cg-item img { width: 130px; height: 96px; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--select-strong); }
.cg-item figcaption { font-size: var(--fs-xs); color: var(--ink-2); text-align: center; }
/* pinned note banner (sub card) */
.pinned-note { background: var(--warn-tint); border: 1px solid var(--warn-border); border-radius: var(--r-md); padding: 6px 12px; margin: 6px 0; font-weight: 600; }
.pinned-note .pn-when { color: var(--ink-3); font-weight: 400; font-size: var(--fs-xs); margin-inline-start: 8px; }
/* fine photo thumbnails + zip row */
.fine-thumb { width: 120px; height: 90px; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--select-strong); }
.zip-row label { display: inline-flex; align-items: center; gap: 3px; margin-inline-end: 8px; }
/* credit tab overflow fix (2026-08-18): flex/grid children must shrink below content width */
.cc-form { grid-template-columns: 92px minmax(0, 1fr); }
.cc-form input { width: 100%; box-sizing: border-box; min-width: 0; }
.cc-copyrow { min-width: 0; }
.cc-copyrow input { min-width: 0; }
.cc-card { box-sizing: border-box; overflow: hidden; }
.cc-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
/* ============================================================================
WPF SKIN LAYER (appended last, wins) - DevExpress "Office2016Colorful" +
CityCar brand purple. See CityCarBlazorClient/DESIGN_TOKENS.md.
Brand #6F3996 (mid) / #4D2A6B (dark) / #D5AEF5 (lavender). Grid selection
stays blue #CDE6F7 to match the Office2016 GridControl RowStyle.
============================================================================ */
:root{
/* --brand, --brand-tint, --brand-border: tokens.css */
--brand-dark:var(--brand-strong); --brand-lav:var(--brand-border);
--grid-head:var(--surface-2); --grid-line:var(--border); --grid-sel:var(--select); --grid-sel-strong:var(--select-strong);
}
/* Login: WPF LoginWindowView - lavender window, white card, 2px purple border */
.login-bg{ background:linear-gradient(135deg,var(--brand-border) 0%, var(--brand-border) 45%, var(--brand) 100%); }
.login-card{ border-radius:var(--r-md); border:2px solid var(--brand); }
/* Office2016 ribbon: light body, purple page-tab band, square-ish buttons */
.ribbon{ background:var(--bg); border-bottom:1px solid var(--border); }
.ribbon-group{ border-inline-end-color:var(--border); }
.ribbon button{ border-radius:var(--r-sm); }
.ribbon-tabs{ background:var(--brand); }
.ribbon-tabs button{ color:var(--on-brand); }
.ribbon-tabs button:hover{ background:var(--brand-strong); color:var(--on-brand); }
.ribbon-tabs button.active{ background:var(--bg); color:var(--brand-strong); }
/* Office2016 near-square corners (~2px), no airy look */
.panel,.grid-wrap,.modal,.criteria,.chosen,.kv,.car-live,.price-panel,.sub-head,
.order-head,.side-item,.note-item,table.grid,.toolbar input,.toolbar select,
.form input,.form select,.criteria select,.df-row input,.df-row select,.df-row textarea,
button.primary,.write-action button,.criteria-refresh,.criteria-reset,.cc-actions button,
.picker-reload,.tabs button,.ap-strip button,.grid-pager button{ border-radius:var(--r-sm); }
.modal{ border-radius:var(--r-sm); }
/* DevExpress GridControl look: light-gray header, thin gridlines, tight rows, blue selection */
table.grid{ border-color:var(--grid-line); }
table.grid th,table.grid td{ border-color:var(--grid-line); padding:3px 6px; }
table.grid th{ background:var(--grid-head); color:var(--ink); font-weight:600;
border-bottom:1px solid var(--border-strong); }
table.grid th.sortable:hover{ background:var(--surface-2); }
table.grid tbody tr:nth-child(even){ background:var(--bg); }
table.grid tbody tr:hover,
table.grid tbody tr.clickable:hover{ background:var(--grid-sel); }
table.grid tbody tr.selected>td,
table.grid tbody tr[aria-selected=true]>td{ background:var(--grid-sel-strong); }
table.grid tr.filter-row th{ background:var(--surface-2); }
.grid-wrap{ border-color:var(--grid-line); }
/* keep the brand solids purple where set directly */
.topbar{ background:var(--brand); }
.modal .m-title{ background:var(--brand); }
/* the Photo grid cell (GridColKind.Photo): an actionable button that opens AlertAttachmentDialog */
.grid td.pg-photo { text-align: center; }
.pg-photo-btn { border: none; background: transparent; cursor: pointer; font-size: var(--fs-lg); line-height: 1; padding: 2px 6px; border-radius: var(--r-sm); }
.pg-photo-btn:hover { background: color-mix(in srgb, var(--brand) 15%, transparent); }
.pg-dash { opacity: .5; }
.pp-manual { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 6px 0 2px; }
.pp-manual input { width: 92px; }
.pp-pct { display: inline-flex; align-items: center; gap: 4px; }
/* כותרת טבלת הכרטסת + כפתור הסגירה שלה (owner 2026-09-06). */
.carteset-rows-head { display: flex; align-items: center; justify-content: space-between;
gap: 8px; margin: 4px 0 6px; font-weight: 600; }
/* --- ריבון "פיתוח" (DevScreen): טופס עם textarea, ובוררי רדיו בשורה אחת --- */
.form textarea { padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); font-family: inherit;
width: 100%; resize: vertical; }
.form .radios { display: flex; align-items: center; gap: 14px; }
.form .radios label { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); color: var(--ink-2); }
.form .radios input[type=radio] { width: auto; }
/* --- שיחת וואטסאפ (
) — חלון 24 השעות, קו "לא נקרא", מדיה --- */
.wa-window { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); border-radius: var(--r-md);
padding: 5px 9px; margin-bottom: 8px; }
.wa-window.open { background: var(--ok-tint); border: 1px solid var(--ok-border); color: var(--ok); }
.wa-window.closed { background: var(--warn-tint); border: 1px solid var(--warn-border); color: var(--warn); }
.wa-window-note { opacity: .8; }
/* the divider WPF draws at the first message above LAST_READ_MESSAGE_ID */
.wa-unread-line { display: flex; align-items: center; gap: 8px; color: var(--danger-strong); font-size: var(--fs-xs); margin: 2px 0; }
.wa-unread-line::before, .wa-unread-line::after { content: ""; flex: 1; height: 1px; background: var(--danger-tint); }
.wa-text { white-space: pre-wrap; word-break: break-word; }
.wa-media { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 5px; }
.wa-media img { max-width: 240px; max-height: 240px; border-radius: var(--r-md); display: block; }
.wa-media audio, .wa-media video { max-width: 260px; }
.wa-open { background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--r-md); padding: 4px 10px;
cursor: pointer; font-size: var(--fs-xs); color: var(--ink-2); }
.wa-dl { font-size: var(--fs-xs); color: var(--brand); text-decoration: none; }
.wa-dl:hover { text-decoration: underline; }
.wa-closed { margin-top: 10px; }
/* --- לשונית "מנויים קשורים" בכרטיס המנוי (SubscriptionMemberHoodView) --- */
.mh-link { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.mh-link input { min-width: 160px; }
.mh-found { color: var(--ok); font-size: var(--fs-xs); }
.mh-missing { color: var(--danger-strong); font-size: var(--fs-xs); }
.mh-grid td { padding: 4px 6px; }
.mh-grid select, .mh-grid input[type=checkbox] { margin: 0; }
/* השורה הוורודה של WPF: הצד ה"ילד" בקשר — עריכה רק מהלקוח הראשי */
.mh-grid tr.mh-child { background: var(--danger-tint); }
.mh-grid tr.mh-child td { color: var(--ink-2); }
/* --- לשונית "היסטוריה" בכרטיס ההזמנה (OrderHistoryControl): צבע שורה לפי מקור הרישום --- */
.oh-grid tr.oh-server { background: var(--bg); }
.oh-grid tr.oh-user { background: var(--danger-tint); }
.oh-grid tr.oh-client { background: var(--warn-tint); }
.oh-grid td { padding: 4px 6px; }
.oh-cheat { color: var(--danger-strong); margin-inline-end: 4px; }
/* ============================================================================
PRICE / CHARGES SURFACE — 2026-09-14
הבעלים ביקש גרידים "עגולים, חדשניים, צבעוניים" במקום הצפיפות של DevExpress.
השכבה הזו מגדירה את .price-table (חיובים+, פירוט חישוב המחיר, חיובים נוספים)
ואת .cc-charges / .cc-live. אותה שפה הוחלה אחר כך גם על table.grid —
ראו את הסעיף GRID SURFACE בסוף הקובץ (הבעלים: "גם ב-table.grid").
============================================================================ */
:root{
--cc-r:var(--r-md); --cc-r-sm:var(--r-sm);
--cc-ink:var(--ink);
--cc-head:var(--brand);
--cc-row-alt:var(--bg);
--cc-row-hover:var(--brand-tint);
--cc-card:var(--shadow-sm);
--cc-pos:var(--ok); --cc-neg:var(--danger);
}
.price-table{
width:100%; border-collapse:separate; border-spacing:0;
margin:12px 0 8px; font-size:var(--fs-md); line-height:1.55;
background:var(--surface); color:var(--cc-ink);
border:1px solid var(--brand-border); border-radius:var(--r-md);
box-shadow:var(--cc-card); overflow:hidden;
}
.price-table thead th{
background:var(--cc-head); color:var(--on-brand); border:0;
font-weight:700; font-size:var(--fs-sm); letter-spacing:.2px;
padding:12px 14px; text-align:start; white-space:nowrap;
}
.price-table tbody td{
padding:10px 14px; border:0; border-bottom:1px solid var(--brand-border);
text-align:start; vertical-align:middle;
}
.price-table tbody tr{ transition:background .15s ease; }
.price-table tbody tr:nth-child(even){ background:var(--cc-row-alt); }
.price-table tbody tr:hover{ background:var(--cc-row-hover); }
.price-table tbody tr:last-child td{ border-bottom:0; }
.price-table tfoot td{
padding:12px 14px; border:0; border-top:2px solid var(--brand-border);
background:linear-gradient(90deg,var(--brand-tint),var(--brand-tint));
font-weight:800; font-size:var(--fs-md); color:var(--brand-dark);
}
/* שדות עריכה בתוך הגריד: גלולות עם מיקוד ברור, לא תיבות 12px דחוסות */
.price-table input[type=number],
.price-table input[type=text]{
border:1.5px solid var(--border); border-radius:var(--r-pill);
padding:7px 13px; font-size:var(--fs-md); font-family:inherit;
background:var(--surface); color:var(--cc-ink);
transition:border-color .15s, box-shadow .15s, background .15s;
}
.price-table input[type=number]:hover:not(:disabled),
.price-table input[type=text]:hover:not(:disabled){ border-color:var(--brand-lav); }
.price-table input[type=number]:focus,
.price-table input[type=text]:focus{
outline:0; border-color:var(--brand); background:var(--surface);
box-shadow:0 0 0 3px var(--focus-ring);
}
.price-table input:disabled{ background:var(--bg); color:var(--ink-3); border-color:var(--brand-border); }
.price-table input[type=checkbox]{ width:18px; height:18px; accent-color:var(--brand); cursor:pointer; }
/* כפתור המחיקה בשורה — עגול, אדום-רך, גדל במעבר עכבר */
.price-table tbody button{
border:0; background:var(--danger-tint); color:var(--danger);
width:30px; height:30px; border-radius:var(--r-pill);
font-size:var(--fs-sm); line-height:1; cursor:pointer;
transition:background .15s, transform .15s;
}
.price-table tbody button:hover:not(:disabled){ background:var(--border); transform:scale(1.12); }
.price-table tbody button:disabled{ opacity:.35; cursor:default; }
/* לשונית "חיובים+": סרגל הפעולות בגובה נוח, כפתור ראשי בולט */
.cc-charges > h3{ font-size:var(--fs-lg); font-weight:800; color:var(--brand-dark); }
.cc-charges .cc-actions{ margin:8px 0 4px; }
.cc-charges .cc-actions select{
border:1.5px solid var(--border); border-radius:var(--r-pill); padding:7px 14px;
font-size:var(--fs-md); background:var(--surface); color:var(--cc-ink); min-height:36px;
}
.cc-charges .cc-actions select:focus{ outline:0; border-color:var(--brand); box-shadow:0 0 0 3px var(--focus-ring); }
.cc-charges .cc-actions button{
border:1.5px solid var(--brand-border); background:var(--surface); color:var(--brand-dark);
border-radius:var(--r-pill); padding:7px 16px; min-height:36px; font-size:var(--fs-md); font-weight:600;
cursor:pointer; transition:background .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.cc-charges .cc-actions button:hover:not(:disabled){
background:var(--brand-tint); border-color:var(--brand-lav); transform:translateY(-1px);
}
.cc-charges .cc-actions button.primary{
background:var(--cc-head); border-color:transparent; color:var(--on-brand);
box-shadow:0 4px 12px var(--focus-ring);
}
.cc-charges .cc-actions button.primary:hover:not(:disabled){ filter:brightness(1.07); }
.cc-charges .cc-actions button:disabled{ opacity:.45; cursor:default; transform:none; box-shadow:none; }
.cc-charges .hint{ font-size:var(--fs-sm); }
/* ---- cc-live: כרטיס "המחיר אם תשמרו" של התצוגה המקדימה החיה -------------- */
.cc-live{
margin:12px 0 4px; padding:12px 16px;
border:1px solid var(--brand-border); border-radius:var(--r-md);
background:linear-gradient(135deg,var(--bg) 0%,var(--surface-2) 100%);
box-shadow:var(--cc-card);
font-size:var(--fs-md); color:var(--cc-ink);
animation:cc-live-in .25s ease-out;
}
@keyframes cc-live-in{ from{ opacity:0; transform:translateY(-4px);} to{ opacity:1; transform:none;} }
.cc-live-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.cc-live-title{ font-weight:700; color:var(--brand-dark); }
.cc-live-total{
font-size:var(--fs-xl); font-weight:800; color:var(--brand);
background:var(--surface); border-radius:var(--r-pill); padding:4px 16px;
box-shadow:inset 0 0 0 1.5px var(--brand-border);
}
.cc-live-delta{ font-weight:700; border-radius:var(--r-pill); padding:3px 12px; font-size:var(--fs-sm); }
.cc-live-delta.up{ color:var(--cc-neg); background:var(--warn-tint); }
.cc-live-delta.down{ color:var(--cc-pos); background:var(--ok-tint); }
/* הסט שנשלח לחישוב עדיין לא נשמר — פס כתום בצד ההתחלה */
.cc-live--dirty{ border-inline-start:5px solid var(--warn-border); }
.cc-live--busy, .cc-live--wait{
display:flex; align-items:center; gap:10px;
color:var(--ink-2); font-weight:600; background:var(--surface);
}
.cc-live--wait{ font-weight:500; font-style:italic; }
.cc-live-dot{
width:11px; height:11px; border-radius:var(--r-pill);
background:var(--brand); animation:cc-pulse 1s ease-in-out infinite;
}
@keyframes cc-pulse{ 0%,100%{ transform:scale(.7); opacity:.45; } 50%{ transform:scale(1.15); opacity:1; } }
/* פאנל "פרטי מחיר" — אותה שפה: כותרת גדולה יותר, כרטיס עגול */
.price-panel{
border-radius:var(--r-md); border-color:var(--brand-border);
padding:10px 16px; font-size:var(--fs-md); box-shadow:var(--cc-card);
}
.price-panel > summary{
font-size:var(--fs-md); font-weight:800; color:var(--brand-dark);
padding:6px 0; list-style:none;
}
.price-panel > summary::marker{ content:""; }
.pp-h4{ font-size:var(--fs-md); font-weight:800; color:var(--brand-dark); margin:14px 0 2px; }
.pp-manual input[type=number]{
border:1.5px solid var(--border); border-radius:var(--r-pill); padding:7px 13px;
font-size:var(--fs-md); width:108px; min-height:36px;
}
.pp-manual input[type=number]:focus{ outline:0; border-color:var(--brand); box-shadow:0 0 0 3px var(--focus-ring); }
.pp-manual button{
border:1.5px solid var(--brand-border); background:var(--surface); color:var(--brand-dark);
border-radius:var(--r-pill); padding:7px 16px; min-height:36px; font-size:var(--fs-md); font-weight:600;
cursor:pointer; transition:background .15s, transform .15s;
}
.pp-manual button:hover:not(:disabled){ background:var(--brand-tint); transform:translateY(-1px); }
.pp-manual button:disabled{ opacity:.45; cursor:default; transform:none; }
/* מסכים צרים: אותו כרטיס, פחות ריפוד — בלי לחזור לצפיפות של 12px */
@media (max-width:900px){
.price-table{ font-size:var(--fs-sm); }
.price-table thead th{ padding:9px 10px; }
.price-table tbody td{ padding:8px 10px; }
.cc-live-total{ font-size:var(--fs-xl); }
}
/* ============================================================================
GRID SURFACE — 2026-09-14 · "גם ב-table.grid"
כל גריד באפליקציה (ProxyGrid, היסטוריה, מנויים קשורים, בוררי תחנה/מנוי)
מקבל את אותה שפה של .price-table: כרטיס עגול עם צל, כותרת בגרדיאנט המותג,
שורות נושמות וגלולות בשורת הסינון.
מה נשמר בכוונה, כי שוברים בלעדיו פונקציונליות:
· sticky של שתי שורות הכותרת — ולכן גובה הכותרת קבוע ב---grid-head-h
ושורת הסינון נצמדת אליו (במקום ה-26px הקשיח של קודם).
· אין overflow:hidden על ה- — הוא היה יוצר scroll-container
ומבטל את ה-sticky. העיגול נעשה ב-.grid-wrap (overflow:auto מקבל radius)
ובפינות התאים עצמם לטבלאות שאינן עטופות.
· nowrap בתאים, כחול הבחירה של Office2016, וצבעי השורות הסמנטיים
(התראות פתוחות/מנהל/נציג, היסטוריה, מנוי-ילד) — הם נשארים גוברים על הזברה.
============================================================================ */
:root{ --grid-head-h:40px; }
.grid-wrap{
max-height:60vh; overflow:auto; background:var(--surface);
border:1px solid var(--brand-border); border-radius:var(--r-md);
box-shadow:var(--cc-card);
}
table.grid{
width:100%; border-collapse:separate; border-spacing:0;
font-size:var(--fs-sm); line-height:1.5; color:var(--cc-ink); background:var(--surface);
border:1px solid var(--brand-border); border-radius:var(--r-md);
box-shadow:var(--cc-card);
}
/* בתוך .grid-wrap העטיפה כבר מחזיקה את המסגרת והעיגול */
.grid-wrap > table.grid{ border:0; border-radius:0; box-shadow:none; }
table.grid th, table.grid td{ border:0; }
/* שורת הכותרת — גרדיאנט המותג, גובה קבוע (עוגן ה-sticky של שורת הסינון) */
table.grid thead tr:first-child th{
background:var(--cc-head); color:var(--on-brand);
font-weight:700; font-size:var(--fs-sm); letter-spacing:.2px;
height:var(--grid-head-h); padding:0 12px;
text-align:start; white-space:nowrap;
position:sticky; top:0; z-index:3;
}
table.grid thead tr:first-child th.sortable{ cursor:pointer; user-select:none; }
table.grid thead tr:first-child th.sortable:hover{
background:linear-gradient(135deg,var(--brand) 0%,var(--brand) 52%,var(--brand) 100%);
}
table.grid thead tr:first-child th:first-child{ border-start-start-radius:var(--r-md); }
table.grid thead tr:first-child th:last-child{ border-start-end-radius:var(--r-md); }
.grid-wrap > table.grid thead tr:first-child th{ border-radius:0; }
/* שורת הסינון — נצמדת מתחת לכותרת, שדות-גלולה */
table.grid tr.filter-row th{
background:var(--brand-tint); border-bottom:1px solid var(--brand-border);
padding:7px 8px; font-weight:400;
position:sticky; top:var(--grid-head-h); z-index:2;
}
table.grid tr.filter-row input,
table.grid tr.filter-row select{
width:100%; box-sizing:border-box; min-height:29px;
border:1.5px solid var(--border); border-radius:var(--r-pill);
padding:4px 11px; font-size:var(--fs-xs); font-family:inherit;
background:var(--surface); color:var(--cc-ink);
transition:border-color .15s, box-shadow .15s;
}
/* ...ומותר להם להצטמצם: בלי min-width:0 הרוחב האינטרינזי של הפקד הוא המינימום של העמודה
ב-table-layout:auto, וכל עמודה מסוננת מוחזקת פתוחה לרוחבו גם כשהתוכן צר ממנו. */
table.grid tr.filter-row input,
table.grid tr.filter-row select{ min-width:0; }
table.grid tr.filter-row input:hover,
table.grid tr.filter-row select:hover{ border-color:var(--brand-lav); }
table.grid tr.filter-row input:focus,
table.grid tr.filter-row select:focus{
outline:0; border-color:var(--brand); box-shadow:0 0 0 3px var(--focus-ring);
}
table.grid tr.filter-row .flt{ display:flex; gap:4px; }
table.grid tr.filter-row .flt select{ width:54px; flex:0 0 auto; padding:4px 2px; text-align:center; }
/* גוף הטבלה — שורות נושמות, קווים אופקיים בלבד */
table.grid tbody td{
padding:9px 12px; border-bottom:1px solid var(--brand-border);
white-space:nowrap; vertical-align:middle; text-align:start;
}
/* רוחב עמודה — פורט של dxg:GridColumn Width מה-XAML (GridCol.Width), כתקרה ולא כרוחב קבוע.
הטקסט נחתך עם שלוש נקודות והערך המלא נשאר ב-title של ה-| ; הכותרת לעולם אינה נחתכת,
היא הרצפה של העמודה. בלי זה הפריסה היא table-layout:auto + nowrap, והערך הארוך ביותר
שבעמוד — כתובת תחנה עם ההערה בסוגריים — מנפח את עמודתו עד שהוא בולע את הרוחב הפנוי של
כל השאר (הבעלים, 2026-09-15: "כמה מקום מבזבזת עמודת הכתובת").
vertical-align:bottom כדי שה-inline-block לא יוסיף מרווח בסיס-שורה וישנה את גובה השורה. */
table.grid tbody td .pg-clip{
display:inline-block; max-width:220px;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom;
}
/* הפאנל הצדדי צר ממילא — שומרים על התקרה שכבר הוגדרה לו ב-.side-panel table.grid td */
.side-panel table.grid td .pg-clip{ max-width:190px; }
table.grid tbody tr{ transition:background .13s ease; }
table.grid tbody tr:nth-child(even){ background:var(--cc-row-alt); }
table.grid tbody tr:hover,
table.grid tbody tr.clickable:hover{ background:var(--cc-row-hover); }
table.grid tbody tr:last-child td{ border-bottom:0; }
table.grid tbody tr:last-child td:first-child{ border-end-start-radius:var(--r-md); }
table.grid tbody tr:last-child td:last-child{ border-end-end-radius:var(--r-md); }
.grid-wrap > table.grid tbody tr:last-child td{ border-radius:0; }
table.grid tbody tr.clickable{ cursor:pointer; }
/* הבחירה נשארת בכחול המוכר של Office2016 */
table.grid tbody tr.selected>td,
table.grid tbody tr[aria-selected=true]>td{ background:var(--grid-sel-strong); }
/* צבעי שורה סמנטיים — חייבים לגבור על הזברה, ולכן על ה- | */
table.grid tbody tr.mh-child>td{ background:var(--danger-tint); color:var(--ink-2); }
table.grid tbody tr.oh-server>td{ background:var(--bg); }
table.grid tbody tr.oh-user>td{ background:var(--danger-tint); }
table.grid tbody tr.oh-client>td{ background:var(--warn-tint); }
/* עמודת הצרופה: כפתור עגול שמזמין ללחוץ (📷 פותח את AlertAttachmentDialog) */
table.grid td.pg-photo{ text-align:center; }
.pg-photo-btn{
width:30px; height:30px; border-radius:var(--r-pill); border:0;
background:var(--brand-tint); color:var(--brand-dark);
font-size:var(--fs-md); line-height:1; cursor:pointer;
transition:background .15s, transform .15s;
}
.pg-photo-btn:hover{ background:var(--brand-lav); transform:scale(1.12); }
/* סרגל הכלים שמעל הגריד — כפתורי גלולה בשפת הכרטיס */
.toolbar{ gap:8px; margin-bottom:8px; }
.toolbar > strong{ font-size:var(--fs-md); font-weight:800; color:var(--brand-dark); }
.toolbar button{
border:1.5px solid var(--brand-border); background:var(--surface); color:var(--brand-dark);
border-radius:var(--r-pill); padding:5px 14px; min-height:32px;
font-size:var(--fs-sm); font-weight:600; font-family:inherit; cursor:pointer;
transition:background .15s, border-color .15s, transform .15s;
}
.toolbar button:hover:not(:disabled){
background:var(--brand-tint); border-color:var(--brand-lav); transform:translateY(-1px);
}
.toolbar button:disabled{ opacity:.45; cursor:default; transform:none; }
.toolbar select, .toolbar input{
border:1.5px solid var(--border); border-radius:var(--r-pill); padding:5px 12px;
font-size:var(--fs-sm); min-height:32px; background:var(--surface); color:var(--cc-ink);
}
.toolbar select:focus, .toolbar input:focus{
outline:0; border-color:var(--brand); box-shadow:0 0 0 3px var(--focus-ring);
}
.toolbar .status{ font-size:var(--fs-xs); color:var(--ink-3); }
/* הפייג'ר — אותה גלולה, קצת יותר אוויר */
.grid-pager{ gap:8px; margin-top:10px; font-size:var(--fs-xs); color:var(--ink-2); }
.grid-pager button{
border:1.5px solid var(--brand-border); background:var(--surface); color:var(--brand-dark);
border-radius:var(--r-pill); padding:4px 12px; min-height:30px; font-weight:700; cursor:pointer;
transition:background .15s, border-color .15s;
}
.grid-pager button:hover:not(:disabled){ background:var(--brand-tint); border-color:var(--brand-lav); }
.grid-pager select{
border:1.5px solid var(--border); border-radius:var(--r-pill); padding:4px 10px; font-size:var(--fs-xs); min-height:30px;
}
@media (max-width:900px){
table.grid{ font-size:var(--fs-xs); }
table.grid tbody td{ padding:7px 9px; }
table.grid thead tr:first-child th{ padding:0 9px; }
}
/* המסילה הצדדית של המסך הראשי (.side) צרה מדי לריפוד המלא — אותו כרטיס, קומפקטי.
ה---grid-head-h מוגדר מחדש על ה- כדי ששורת סינון (אם תופעל שם) תישאר נצמדת נכון. */
.side table.grid{ font-size:var(--fs-xs); --grid-head-h:34px; }
.side table.grid thead tr:first-child th{ height:34px; padding:0 8px; font-size:var(--fs-xs); }
.side table.grid tbody td{ padding:6px 8px; }
.side .toolbar > strong{ font-size:var(--fs-sm); }
.side .toolbar button{ padding:4px 10px; min-height:28px; font-size:var(--fs-xs); }
.side .grid-pager{ font-size:var(--fs-xs); gap:5px; }
.side .grid-pager button{ padding:3px 9px; min-height:26px; }
.side .grid-pager select{ padding:3px 8px; min-height:26px; font-size:var(--fs-xs); }
/* ============================================================================
COMPACT CHROME + ORDER CARD — owner 2026-09-17 ("still there is a lot of wasted space").
Appended last, so it wins. Global part: the breadcrumb row is folded into the top bar,
tabs/panels lose their air. Order-card part is scoped to .oh-compact / .order-body.
Grid rows are deliberately NOT touched: the owner asked for "breathing" grid rows on
2026-09-14 (GRID SURFACE above).
============================================================================ */
/* top bar: the back-link sits beside the title; the collapsed "פעולות אחרונות" pill
(UserHistoryPanel, fixed top-left = inset-inline-end in RTL) lives INSIDE the bar,
so the user block leaves it ~160px of room at the inline end */
.topbar { padding: 4px 12px; min-height: 30px; box-sizing: border-box; }
.topbar-back { color: var(--on-brand); cursor: pointer; margin-inline-start: 14px; font-weight: 400; font-size: var(--fs-xs); }
.topbar-back:hover { text-decoration: underline; }
.topbar-user { margin-inline-end: 160px; }
/* ---- minimized ribbon (the WPF Ctrl+F1 behaviour) --------------------------------
The tab strip always shows; the ribbon groups open as a flyout ON TOP of the content
instead of pushing it down, so a closed ribbon costs the screen nothing but 28px. */
.ribbon-dock { position: relative; z-index: 60; }
.ribbon-float { position: absolute; top: 100%; inset-inline-start: 0; inset-inline-end: 0;
box-shadow: 0 10px 22px var(--focus-ring); z-index: 61; }
.ribbon-scrim { position: fixed; inset: 0; z-index: 59; background: transparent; }
.ribbon-tabs .ribbon-hint { margin-inline-start: auto; background: none; border: none;
color: var(--on-brand); font-size: var(--fs-xs); cursor: pointer; padding: 6px 10px; }
.ribbon-tabs .ribbon-hint:hover { color: var(--on-brand); background: var(--brand-strong); }
/* ---- ribbon items: icon + text, and the BarSubItem popup ------------------------
The WPF ribbon shows an icon on every button, and three of its groups are a single
BarSubItem that opens a popup list. Same here: the tree lives in RibbonModel.cs
(generated from the WPF XAML), a submenu button carries a chevron and opens
.ribbon-popup absolutely, so the ribbon itself does not grow when a popup opens. */
.ribbon button { display: inline-flex; align-items: center; gap: 6px; }
.ribbon button .ic { width: 18px; height: 18px; object-fit: contain; flex: 0 0 18px; }
.ribbon button.off { color: var(--ink-3); background: var(--bg); border-style: dashed; cursor: not-allowed; }
.ribbon button.off .ic { opacity: .45; filter: grayscale(1); }
.ribbon-sub { position: relative; }
.ribbon-sub > button.sub { font-weight: 600; }
.ribbon-sub > button.sub .chev { font-size: var(--fs-xs); color: var(--brand); }
.ribbon-sub > button.open { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.ribbon-sub > button.open .chev { color: var(--on-brand); }
.ribbon-popup { position: absolute; top: calc(100% + 3px); inset-inline-start: 0; z-index: 62;
min-width: 230px; max-height: 70vh; overflow-y: auto; padding: 4px;
background: var(--surface); border: 1px solid var(--brand-border); border-radius: var(--r-sm);
box-shadow: 0 10px 22px var(--focus-ring); }
.ribbon-popup button { display: flex; width: 100%; border: none; border-radius: var(--r-sm);
justify-content: flex-start; padding: 5px 8px; font-size: var(--fs-xs); }
.ribbon-popup button:hover { background: var(--brand-tint); }
.ribbon-popup button.off:hover { background: var(--bg); }
/* ---- main screen: the "מידע" rail goes to the RIGHT (RTL = where the eye starts) ----
WPF docked that TabControl on the right of the main window; the port had it on the left
because the grid is the first child of .content. Swap the COLUMNS, not the markup, so the
reading order (grid first) and every .panel/.side selector stay exactly as they are.
grid-row:1 on BOTH is mandatory: grid auto-placement never moves backwards, so a .side that only
asks for column 1 after a .panel already took column 2 is pushed to a SECOND ROW (the rail landed
under the grid — verified live 2026-09-17). Pinning the row keeps them side by side.
WARNING 2026-09-17: a stray comment-close used to sit on the line above the grid-row note and
re-opened it — the CSS parser then swallowed the whole `.content{...}` block in error recovery,
so the track sizes stayed at the base rule (1fr 320px) while the grid-column swap DID apply:
the rail got the wide track and the grid got 320px. One comment, both blocks. */
.content { grid-template-columns: 320px minmax(0, 1fr); align-items: start; }
.content > .panel { grid-column: 2; grid-row: 1; }
.content > .side { grid-column: 1; grid-row: 1; }
.screen-body { padding: 8px; gap: 8px; }
.tabs { margin: 0 0 6px; }
.tabs button { padding: 5px 12px; }
/* order-card header: id · subscriber · car/times/duration · badges on ONE row, the live car
strip on the second, the planned-window bar as a 6px rule at the bottom ("כעת" = a tick with
a tooltip, so it needs no room above the bar) */
.order-head.oh-compact { display: grid; gap: 4px; padding: 6px 12px; margin: 0; }
.oh-compact .oh-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.oh-compact .oh-id { font-size: var(--fs-xl); line-height: 1.1; }
.oh-compact .oh-main { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; flex: 1; min-width: 0; }
.oh-compact .oh-sub { font-size: var(--fs-md); }
.oh-compact .oh-meta { font-size: var(--fs-xs); }
.oh-compact .oh-dur { color: var(--brand); font-variant-numeric: tabular-nums; }
.oh-compact .oh-badges { max-width: none; }
.oh-compact .badge, .oh-compact .pill { padding: 2px 10px; font-size: var(--fs-xs); }
.oh-compact .car-live { margin: 0; padding: 3px 8px; font-size: var(--fs-xs); gap: 8px; background: var(--bg); border-color: var(--brand-border); }
.oh-compact .oh-tl { height: 6px; margin-top: 2px; }
.oh-compact .oh-tl .timeline-now { top: -3px; height: 12px; width: 3px; padding: 0; font-size: 0; line-height: 0;
background: var(--warn); border-radius: var(--r-sm); overflow: hidden; }
/* 2026-09-24 (owner, 4th round): the header card lives INSIDE the right-hand column (.oh-left), as its
first floor, so the calendar + tabs column starts at the top of the screen. Everything in it is
stacked in floors and pushed to the right (flex-start = right in RTL): icons / id + subscriber +
car & times / badges / the planned-window rule. */
.oh-left > .order-head.oh-compact { gap: 3px; padding: 6px 10px; }
.oh-left > .order-head .ord-actions { flex-wrap: wrap; justify-content: flex-start; gap: 4px; margin: 0; }
.oh-left > .order-head .oh-row { align-items: flex-start; justify-content: flex-start; gap: 3px 10px; }
.oh-left > .order-head .oh-main { flex-direction: column; align-items: flex-start; gap: 0; }
.oh-left > .order-head .oh-badges { flex-basis: 100%; justify-content: flex-start; gap: 4px; }
.order-head .oh-map-link { color: var(--info); text-decoration: none; white-space: nowrap; }
.order-head .oh-map-link:hover { text-decoration: underline; }
/* order body: the two columns start right under the header; the narrow column's panels are tight */
.order-body { padding: 0; gap: 8px; grid-template-columns: minmax(300px, 340px) minmax(0, 1fr); }
.oh-left { display: grid; gap: 8px; min-width: 0; align-content: start; }
.order-body .panel { padding: 6px 8px; }
.order-body .panel > h3 { margin-bottom: 4px; flex-wrap: wrap; gap: 4px 8px; }
.order-body .panel > h3 .oh-hacts { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.order-body .panel > h3 button.open-link { border: 1px solid var(--border-strong); background: var(--surface); border-radius: var(--r-sm);
padding: 1px 8px; font-family: inherit; cursor: pointer; margin: 0; }
.order-body .panel > h3 button.open-link:hover:not(:disabled) { background: var(--brand-tint); }
.order-body .kv > div { padding: 3px 8px; }
.order-body .extend-controls button { padding: 3px 8px; }
.order-body .cc-actions { margin-top: 6px; }
.order-body .route .rn-txt { font-size: var(--fs-xs); }
.order-body .cal-panel > .cc-actions { margin: 0 0 6px; }
/* ===== ORDER HEADER ACTIONS =====
שורת ששת האייקונים שבראש כרטיס ההזמנה (OrderView.xaml 213-289).
הצבעים הם צבעי ה-Foreground של כל PackIcon ב-WPF. */
.ord-actions { display: flex; gap: 6px; align-items: center; margin: 0 0 6px; }
.ord-actions .oa-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; padding: 0;
border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); cursor: pointer;
}
.ord-actions .oa-btn:hover:not(:disabled) { background: var(--brand-tint); border-color: var(--brand-border); }
.ord-actions .oa-btn:disabled { opacity: .45; cursor: default; }
.ord-actions .oa-btn svg { width: 18px; height: 18px; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ord-actions .oa-wash svg { stroke: var(--brand); }
.ord-actions .oa-act svg { stroke: var(--info); }
.ord-actions .oa-copy svg { stroke: var(--info); }
.ord-actions .oa-rel svg { stroke: var(--ok); }
.ord-actions .oa-img svg { stroke: var(--brand); }
.ord-actions .oa-dup svg { stroke: var(--brand-strong); }
.ord-actions .oa-res svg { stroke: var(--danger); }
.oa-activities { margin-top: 6px; }
/* ============================================================================
DENSITY (UX plan stage 2) - appended last so it wins over the older layers.
Every table row / header / filter control takes its height from tokens.css,
so html[data-density="comfortable"] switches the whole site at once.
============================================================================ */
:root{ --grid-head-h:var(--head-h); }
.side table.grid{ --grid-head-h:var(--head-h); }
table.grid{ font-size:var(--density-font); line-height:1.3; }
table.grid thead tr:first-child th,
.side table.grid thead tr:first-child th{ height:var(--head-h); padding:0 var(--cell-px); font-size:var(--density-font); }
table.grid tbody td,
.side table.grid tbody td{ height:var(--row-h); padding:0 var(--cell-px); }
table.grid tr.filter-row th{ padding:3px var(--cell-px); }
table.grid tr.filter-row input,
table.grid tr.filter-row select{ min-height:calc(var(--ctl-h) - 4px); padding-block:2px; }
@media (max-width:900px){
table.grid tbody td{ padding:0 var(--cell-px); }
table.grid thead tr:first-child th{ padding:0 var(--cell-px); }
}
/* ============================================================================
BUTTONS (UX plan stage 3) - four kinds, one look each, appended last.
plain button ......... secondary: surface + outline. The default for everything.
.primary ............. the ONE main action of a screen (save / create / approve).
.danger / .bad ....... destructive: red outline; the confirm dialog's button turns solid.
.quiet / .linkbtn .... minor action inside a row or bar: text only.
Context rules (.tabs button, .ribbon-tabs button, .ctx-menu button...) are more specific
and keep their own look; this layer only decides what a button IS.
============================================================================ */
button{
font:inherit; font-size:var(--fs-sm); line-height:1.2;
min-height:var(--ctl-h); padding:0 var(--sp-3);
border:1px solid var(--border-strong); border-radius:var(--r-sm);
background:var(--surface); color:var(--ink); cursor:pointer;
}
button:hover:not(:disabled){ background:var(--surface-2); }
button:disabled{ background:var(--surface-2); color:var(--ink-3); border-color:var(--border); cursor:default; }
button:focus-visible{ outline:2px solid var(--brand); outline-offset:1px; }
button.primary{ margin-top:0; background:var(--brand); border-color:var(--brand); color:var(--on-brand); font-weight:600; border-radius:var(--r-sm); }
button.primary:hover:not(:disabled){ background:var(--brand-strong); border-color:var(--brand-strong); }
button.primary:disabled{ background:var(--surface-2); border-color:var(--border); color:var(--ink-3); }
button.danger, button.bad{ background:var(--surface); border-color:var(--danger); color:var(--danger); }
button.danger:hover:not(:disabled), button.bad:hover:not(:disabled){ background:var(--danger-tint); }
.modal .m-actions button.danger{ background:var(--danger); border-color:var(--danger); color:var(--on-brand); }
button.quiet, button.linkbtn, button.open-link{ background:transparent; border-color:transparent; color:var(--brand); padding:0 var(--sp-1); }
button.quiet:hover:not(:disabled), button.linkbtn:hover:not(:disabled), button.open-link:hover:not(:disabled){ background:var(--brand-tint); }
/* a permitted write is an ordinary action unless its call site marks it primary or danger */
.write-action button{ background:var(--surface); color:var(--ink); border:1px solid var(--border-strong); border-radius:var(--r-sm); }
.write-action button:hover:not([disabled]){ background:var(--surface-2); }
.write-action button.primary{ background:var(--brand); border-color:var(--brand); color:var(--on-brand); }
.write-action button.primary:hover:not([disabled]){ background:var(--brand-strong); }
.write-action button.danger{ background:var(--surface); border-color:var(--danger); color:var(--danger); }
.write-action button.danger:hover:not([disabled]){ background:var(--danger-tint); }
/* refresh is never the loudest thing on the screen (it used to be solid green) */
.criteria-refresh{ background:var(--surface); color:var(--ink); border:1px solid var(--border-strong); border-radius:var(--r-sm); }
.criteria-refresh:hover{ background:var(--surface-2); }
.cc-actions button{ background:var(--surface); color:var(--ink); border:1px solid var(--border-strong); border-radius:var(--r-sm); }
.cc-actions button:hover:not(:disabled){ background:var(--surface-2); }
/* ============================================================================
SHELL (UX plan stage 4) - one top bar + side navigation around every screen.
Grid: top bar across, navigation on the start side (right, RTL), the screen fills the rest
and is the only thing that scrolls.
============================================================================ */
.app-shell{
display:grid; height:100vh; overflow:hidden; background:var(--bg);
grid-template-columns:200px minmax(0,1fr); grid-template-rows:44px minmax(0,1fr);
grid-template-areas:"top top" "nav main";
}
.app-top{
grid-area:top; display:flex; align-items:center; gap:var(--sp-3);
padding:0 var(--sp-3); padding-inline-end:180px; /* the fixed "פעולות אחרונות" pill sits at the end */
background:var(--surface); border-bottom:1px solid var(--border); color:var(--ink);
}
.app-logo{ font-weight:800; font-size:var(--fs-lg); color:var(--brand); text-decoration:none; letter-spacing:.5px; flex:none; }
.app-logo span{ color:var(--brand-accent); }
.app-search{ flex:0 1 380px; min-width:140px; }
.app-search input{ width:100%; height:var(--ctl-h); border:1px solid var(--border-strong); border-radius:var(--r-sm);
background:var(--bg); color:var(--ink); padding:0 var(--sp-3); font:inherit; font-size:var(--fs-sm); }
.app-search input:disabled{ opacity:.75; cursor:not-allowed; }
.app-new{ flex:none; display:inline-flex; align-items:center; height:var(--ctl-h); padding:0 var(--sp-3);
background:var(--brand); color:var(--on-brand); border-radius:var(--r-sm); font-weight:600; font-size:var(--fs-sm); text-decoration:none; }
.app-new:hover{ background:var(--brand-strong); }
.app-new:focus-visible, .app-queues a:focus-visible, .nav-item:focus-visible, .app-logo:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.app-queues{ display:flex; gap:var(--sp-1); min-width:0; overflow:hidden; }
.app-queues a{ white-space:nowrap; padding:0 var(--sp-2); height:var(--ctl-h); display:inline-flex; align-items:center;
border-radius:var(--r-pill); color:var(--ink-2); font-size:var(--fs-sm); text-decoration:none; background:var(--surface-2); }
.app-queues a:hover{ background:var(--brand-tint); color:var(--brand); }
.app-spacer{ flex:1; }
.app-top .dp-toggle{ background:var(--surface-2); color:var(--ink-2); }
.app-user{ position:relative; flex:none; }
.app-user-btn{ border-color:transparent; background:transparent; color:var(--ink-2); }
.app-scrim{ position:fixed; inset:0; z-index:899; }
.app-user-menu{ position:absolute; top:calc(100% + 6px); inset-inline-end:0; z-index:900; min-width:220px;
display:flex; flex-direction:column; gap:var(--sp-1); padding:var(--sp-2);
background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-md); }
.app-user-menu a, .app-user-menu button{ text-align:start; padding:var(--sp-2); border-radius:var(--r-sm); color:var(--ink); text-decoration:none; font-size:var(--fs-sm); }
.app-user-menu a:hover{ background:var(--surface-2); }
.app-user-mail{ font-size:var(--fs-xs); color:var(--ink-3); padding:var(--sp-1) var(--sp-2); border-bottom:1px solid var(--border); }
.app-nav{ grid-area:nav; overflow-y:auto; background:var(--surface); border-inline-end:1px solid var(--border);
padding:var(--sp-2); display:flex; flex-direction:column; gap:var(--sp-3); }
.nav-group{ display:flex; flex-direction:column; gap:2px; }
.nav-caption{ font-size:var(--fs-xs); color:var(--ink-3); padding:var(--sp-1) var(--sp-2); }
.nav-item{ display:flex; align-items:center; gap:var(--sp-2); min-height:32px; padding:0 var(--sp-2);
border-radius:var(--r-sm); color:var(--ink-2); text-decoration:none; font-size:var(--fs-sm); }
.nav-item:hover{ background:var(--surface-2); color:var(--ink); }
.nav-item.on{ background:var(--brand-tint); color:var(--brand); font-weight:600; }
.nav-ic{ width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.app-main{ grid-area:main; overflow:auto; min-width:0; padding:var(--sp-3); }
.app-main .content{ margin:0; }
/* the screen's own header: title + its one refresh + when it was refreshed */
.page-head{ display:flex; align-items:center; gap:var(--sp-3); margin:0 0 var(--sp-3); min-height:var(--ctl-h); }
.page-title{ margin:0; font-size:var(--fs-xl); font-weight:700; color:var(--ink); }
.page-updated{ font-size:var(--fs-xs); color:var(--ink-3); }
.app-main .screen-body{ padding:0; }
/* "כל המסכים" */
.hub-section{ margin-bottom:var(--sp-5); }
.hub-title{ font-size:var(--fs-lg); margin:0 0 var(--sp-2); color:var(--ink); }
.hub-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:var(--sp-3); }
.hub-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--sp-3); }
.hub-card h3{ margin:0 0 var(--sp-2); font-size:var(--fs-md); color:var(--ink-2); }
.hub-card ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-1); }
.hub-card a{ color:var(--brand); text-decoration:none; font-size:var(--fs-sm); }
.hub-card a:hover{ text-decoration:underline; }
/* ============================================================================
SCREEN SIZES (UX plan stage 5)
>= 1600 navigation open (200px), queues panel docked beside the table
< 1600 navigation = icons only (48px, names on hover), queues panel = a drawer
>= 2200 content capped at 1800px and centred; priority-3 table columns appear
The main screen does not scroll as a page: the orders table takes the height that is
left and scrolls inside itself - one vertical scroll.
============================================================================ */
table.grid .pg-p3{ display:none; }
@media (min-width:2200px){ table.grid .pg-p3{ display:table-cell; } }
@media (max-width:1599.98px){ table.grid .pg-p2{ display:none; } }
/* main screen: one scroll, the table fills the height */
.app-main:has(> .content){ display:flex; flex-direction:column; overflow:hidden; }
.app-main > .content{
flex:1; min-height:0; margin:0; display:grid; gap:var(--sp-3);
grid-template-columns:minmax(0,1fr) 300px; grid-template-rows:minmax(0,1fr); grid-template-areas:"table side";
}
.app-main > .content{ align-items:stretch; }
.app-main > .content > .panel{ grid-area:table; align-self:stretch; display:flex; flex-direction:column; min-height:0; overflow:hidden; margin:0; }
.app-main > .content > .panel > .grid-wrap{ flex:1; min-height:0; max-height:none; }
.app-main > .content > .side{ grid-area:side; min-height:0; overflow:auto; }
.side-toggle{ display:none; }
@media (max-width:1599.98px){
.app-shell{ grid-template-columns:48px minmax(0,1fr); }
.app-nav{ padding:var(--sp-2) var(--sp-1); }
.app-nav .nav-text, .app-nav .nav-caption{ display:none; }
.app-nav .nav-item{ justify-content:center; padding:0; }
.app-nav .nav-group + .nav-group{ border-top:1px solid var(--border); padding-top:var(--sp-2); }
.app-main > .content{ grid-template-columns:minmax(0,1fr); grid-template-areas:"table"; }
.side-toggle{ display:inline-flex; align-items:center; }
.app-main > .content > .side{ display:none; }
.app-main > .content > .side.open{
display:block; position:fixed; z-index:50; top:44px; bottom:0; inset-inline-start:48px; width:320px;
background:var(--surface); border-inline-end:1px solid var(--border); box-shadow:var(--shadow-md); padding:var(--sp-2);
}
.app-queues a:nth-child(n+3){ display:none; } /* the top bar keeps the two busiest queues */
}
/* No page-width cap on wide screens (owner 2026-10-05: on a 2560px screen the 1800px cap left ~270px
empty on each side). The screens are tables and side-by-side panels that use the width; forms stay
capped on their own (.form, .no-form). */
/* the criteria bar stays one row on a laptop: smaller controls, the reset/refresh pushed to the end */
@media (max-width:1599.98px){
.criteria{ flex-wrap:nowrap; gap:var(--sp-2); overflow-x:auto; }
.criteria label{ min-width:0; }
.criteria select{ min-width:96px; max-width:150px; }
}
/* laptop: every vertical pixel goes to table rows (stage 5 target: >= 18 rows at 1366x768) */
@media (max-width:1599.98px){
.app-main{ padding:var(--sp-2); }
.app-main:has(> .content) > .page-head{ margin-bottom:var(--sp-1); min-height:24px; }
.app-main:has(> .content) .page-title{ font-size:var(--fs-lg); }
.app-main > .content > .panel{ padding:var(--sp-2); }
.criteria{ margin-bottom:var(--sp-1); padding-block:var(--sp-1); align-items:center; }
.criteria label{ display:flex; flex-direction:row; align-items:center; gap:var(--sp-1); }
.criteria label > span{ white-space:nowrap; }
.app-main > .content .toolbar{ margin-bottom:var(--sp-1); }
.app-main > .content .grid-pager{ margin-top:var(--sp-1); }
}
@media (max-width:1599.98px){
.criteria-current{ display:none; } /* repeats the status select */
.criteria button{ white-space:nowrap; flex:none; }
.app-main:has(> .content) > .page-head{ display:none; } /* the nav already marks "מסך העבודה" */
}
@media (min-width:1600px) and (max-width:2199.98px){ .app-main > .content{ grid-template-columns:minmax(0,1fr) 260px; } }
/* order card: the screen does not scroll as a page (stage 5). The narrow column and the tab
content each scroll on their own, side by side - never one scroll inside another - and the
save bar and action bar stay at the bottom. */
.app-main:has(.order-body){ display:flex; flex-direction:column; overflow:hidden; }
.app-main:has(.order-body) > .screen-body{ flex:1; min-height:0; display:flex; flex-direction:column; }
.app-main .order-body{ flex:1; min-height:0; align-items:stretch; grid-template-rows:minmax(0,1fr); }
.app-main .order-body > .oh-left{ min-height:0; overflow-y:auto; }
.app-main .order-body > .cal-panel{ min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.app-main .order-body > .cal-panel > :not(.tabs){ flex:1; min-height:0; overflow:auto; }
.app-main:has(.order-body) .od-savebar, .app-main:has(.order-body) .oab{ flex:none; position:static; }
.app-main .order-body > .cal-panel > .cal-focus{ overflow:hidden; display:flex; flex-direction:column; }
.app-main .order-body > .cal-panel > .cal-focus .cal2-scroll{ flex:1; min-height:0; max-height:none; }
/* ============================================================================
GLOBAL SEARCH (UX plan stage 6) - the results open under the top-bar box
============================================================================ */
.gs{ position:relative; width:100%; }
.gs input{ width:100%; height:var(--ctl-h); border:1px solid var(--border-strong); border-radius:var(--r-sm);
background:var(--bg); color:var(--ink); padding:0 var(--sp-3); font:inherit; font-size:var(--fs-sm); }
.gs input:focus{ outline:2px solid var(--brand); outline-offset:0; background:var(--surface); }
.gs-list{ position:absolute; top:calc(100% + 4px); inset-inline:0; z-index:950; min-width:360px; max-height:70vh; overflow-y:auto;
background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-md); padding:var(--sp-1); }
.gs-group{ font-size:var(--fs-xs); color:var(--ink-3); padding:var(--sp-2) var(--sp-2) var(--sp-1); }
.gs-item{ display:flex; flex-direction:column; gap:2px; padding:var(--sp-1) var(--sp-2); border-radius:var(--r-sm); text-decoration:none; color:var(--ink); }
.gs-item.on, .gs-item:hover{ background:var(--brand-tint); }
.gs-title{ font-size:var(--fs-sm); font-weight:600; }
.gs-detail{ font-size:var(--fs-xs); color:var(--ink-2); }
.gs-empty{ font-size:var(--fs-xs); color:var(--ink-3); padding:var(--sp-2); }
/* ============================================================================
MAIN SCREEN (UX plan stage 9) - status stripe, focused / marked row
============================================================================ */
table.grid tbody tr[class*="st-"] > td:first-child{ box-shadow:inset -4px 0 0 var(--stripe, transparent); }
table.grid tbody tr.st-alert{ --stripe:var(--danger); }
table.grid tbody tr.st-wait{ --stripe:var(--warn); }
table.grid tbody tr.st-drive{ --stripe:var(--info); }
table.grid tbody tr.st-ok{ --stripe:var(--ok); }
table.grid tbody tr.st-cancel{ --stripe:var(--border-strong); }
table.grid tbody tr.st-cancel > td{ color:var(--ink-3); }
table.grid tbody tr.active > td{ background:var(--select); }
table.grid tbody tr[tabindex]:focus{ outline:none; }
table.grid tbody tr[tabindex]:focus > td{ background:var(--select); box-shadow:inset 0 1px 0 var(--brand), inset 0 -1px 0 var(--brand); }
table.grid tbody tr[tabindex]:focus > td:first-child{ box-shadow:inset -4px 0 0 var(--stripe, var(--brand)), inset 0 1px 0 var(--brand), inset 0 -1px 0 var(--brand); }
/* Alert rows (white text on red / magenta / purple): marked or focused, they take the selection
colour like any row, so the text turns dark to stay readable and the status colour moves to the
stripe on the first cell. */
table.grid tbody tr.alert-open{ --stripe:var(--danger-strong); }
table.grid tbody tr.alert-admin{ --stripe:var(--brand); }
table.grid tbody tr.alert-rep{ --stripe:var(--brand-strong); }
table.grid tbody tr:is(.alert-open,.alert-admin,.alert-rep).active > td,
table.grid tbody tr:is(.alert-open,.alert-admin,.alert-rep)[tabindex]:focus > td{ background:var(--select); color:var(--ink); }
table.grid tbody tr:is(.alert-open,.alert-admin,.alert-rep).active > td:first-child{ box-shadow:inset -4px 0 0 var(--stripe); }
/* ============================================================================
NEW ORDER - one page, no pop-ups (UX plan section 8, stage 10)
wide: [customer 300] [steps] [summary 340], the two side columns sticky
<1600: customer = a strip over the page (details behind "פרטים ▾"),
summary = a bar pinned to the bottom; a click opens the checks above it
============================================================================ */
.no-page { display: grid; grid-template-columns: 300px minmax(0, 1fr) 340px; gap: var(--sp-3); align-items: start; }
.no-cust, .no-sum { position: sticky; top: 0; max-height: calc(100vh - 90px); overflow: auto; }
.no-main { display: grid; gap: var(--sp-3); min-width: 0; }
.no-main > .panel, .no-sum-body, .no-cust > .oc, .no-cust > .picker-inline { margin: 0; }
.no-step > h3 { display: flex; align-items: center; gap: 8px; }
.no-n { display: inline-grid; place-items: center; inline-size: 20px; block-size: 20px; border-radius: var(--r-pill);
background: var(--brand-tint); color: var(--brand); font-size: var(--fs-xs); font-weight: 700; }
.no-auto { font-size: var(--fs-xs); font-weight: 400; color: var(--ok); background: var(--ok-tint); border-radius: var(--r-pill); padding: 1px 8px; }
.no-times { grid-template-columns: repeat(2, minmax(170px, 1fr)); }
.no-times .no-steps { grid-column: 1 / -1; }
.no-field .dt-input.bad { border-color: var(--danger); }
.no-ferr { color: var(--danger); font-size: var(--fs-xs); }
.no-cal > summary { cursor: pointer; font-weight: 700; color: var(--ink-2); }
.no-cal[open] > summary { margin-bottom: 6px; }
/* the in-page pickers: no modal chrome, a bounded table */
.picker-inline { outline: none; }
.picker-inline-box { display: flex; flex-direction: column; min-width: 0; }
.picker-inline .picker-bar { padding: 0 0 6px; background: none; }
.picker-inline .picker-note { padding: 4px 0; }
.picker-inline .picker-body { padding: 4px 0 0; min-height: 0; }
.picker-inline .picker-grid { max-height: 300px; }
.picker-inline .pc { display: none; }
.picker-grid tr[tabindex]:focus-visible > td { outline: 2px solid var(--brand); outline-offset: -2px; }
.no-cust .picker-inline { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3); }
.sub-picker-inline .picker-bar label.grow > span { font-size: var(--fs-sm); color: var(--ink); }
.sub-picker-inline .picker-grid { max-height: 60vh; }
/* customer column */
.oc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3);
display: grid; gap: 6px; font-size: var(--fs-sm); }
.oc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.oc-name { font-size: var(--fs-lg); font-weight: 700; color: var(--ink); }
.oc-no { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.oc-tags { display: flex; flex-wrap: wrap; gap: 4px; flex-basis: 100%; }
.oc-tag { border-radius: var(--r-pill); padding: 1px 8px; font-size: var(--fs-xs); font-weight: 600; border: 1px solid transparent; }
.oc-tag.bad { background: var(--danger-tint); color: var(--danger); border-color: var(--danger); }
.oc-tag.warn { background: var(--warn-tint); color: var(--warn); border-color: var(--warn-border); }
.oc-tag.vip { background: var(--brand-tint); color: var(--brand); border-color: var(--brand-border); }
.oc-tag.info { background: var(--surface-2); color: var(--ink-2); }
.oc-head-acts { display: flex; gap: 10px; flex-basis: 100%; }
.oc-link { background: none; border: none; padding: 0; color: var(--brand); cursor: pointer; font: inherit; font-size: var(--fs-xs); text-decoration: none; }
.oc-link:hover { text-decoration: underline; }
.oc-more-btn { display: none; }
.oc-block { background: var(--danger-tint); color: var(--danger); border: 1px solid var(--danger); border-radius: var(--r-sm);
padding: 5px 8px; font-weight: 600; }
.oc-more { display: grid; gap: 6px; }
.oc-line { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; }
.oc-k { color: var(--ink-3); font-size: var(--fs-xs); min-inline-size: 42px; }
.oc-sep { color: var(--ink-3); }
.oc-mail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-inline-size: 180px; }
.oc-ok { color: var(--ok); }
.oc-warn-t, .oc-warn { color: var(--warn); }
.oc-bad { color: var(--danger); font-weight: 600; }
.oc-note { background: var(--warn-tint); border: 1px solid var(--warn-border); border-radius: var(--r-sm); padding: 5px 8px; }
.oc-sec { border-top: 1px solid var(--border); padding-top: 6px; display: grid; gap: 2px; }
.oc-sec-h { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-2); }
.oc-item { font-size: var(--fs-xs); color: var(--ink-2); }
.oc-order { color: var(--brand); text-decoration: none; }
.oc-order:hover { text-decoration: underline; }
.oc-none { font-size: var(--fs-xs); color: var(--ink-3); }
/* summary column */
.no-sum-body { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3); display: grid; gap: 8px; }
.no-sum-body > h3 { margin: 0; font-size: var(--fs-md); }
.no-sum-lines { display: grid; gap: 2px; font-size: var(--fs-sm); }
.no-busy { color: var(--danger); font-weight: 700; margin-inline-start: 6px; }
.no-price-box { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 8px; }
.no-price-big { font-size: var(--fs-xl); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.no-calc { font-size: var(--fs-xs); color: var(--ink-3); }
.no-h4 { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--ink-2); }
.no-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.no-checks li { display: flex; gap: 6px; align-items: baseline; font-size: var(--fs-sm); }
.no-checks .ck-i { flex: 0 0 auto; font-weight: 700; inline-size: 14px; text-align: center; }
.no-checks .ck-block .ck-i, .no-checks .ck-block .ck-t { color: var(--danger); }
.no-checks .ck-warn .ck-i { color: var(--warn); }
.no-checks .ck-ok .ck-i { color: var(--ok); }
.no-checks .ck-fix { margin-inline-start: auto; flex: 0 0 auto; font-size: var(--fs-xs); }
.no-create { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-top: 1px solid var(--border); padding-top: 8px; }
.no-missing { font-size: var(--fs-xs); color: var(--danger); }
.no-bar { display: none; }
@media (max-width: 1599px) {
.no-page { grid-template-columns: minmax(0, 1fr); }
.no-cust { position: static; max-height: none; overflow: visible; }
.oc-more-btn { display: inline; }
.oc:not(.more-open) .oc-more { display: none; }
.oc-tags { flex-basis: auto; }
.oc-head-acts { flex-basis: auto; margin-inline-start: auto; }
.no-sum { position: sticky; top: auto; bottom: 0; max-height: none; overflow: visible; z-index: 5; }
.no-bar { display: flex; align-items: center; gap: 12px; cursor: pointer; background: var(--surface);
border: 1px solid var(--border-strong); border-radius: var(--r-md) var(--r-md) 0 0; padding: 6px 12px;
box-shadow: 0 -2px 8px var(--shadow, rgba(0, 0, 0, .08)); }
.no-bar-price { font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.no-bar-bad { color: var(--danger); font-weight: 700; }
.no-bar-warn { color: var(--warn); font-weight: 700; }
.no-bar-more { color: var(--brand); font-size: var(--fs-xs); margin-inline-start: auto; }
.no-page:not(.sum-open) .no-sum-body { display: none; }
.no-page.sum-open .no-sum-body { max-height: 55vh; overflow: auto; border-radius: 0; border-top: none; }
.no-nosub .no-sum { display: none; }
}
/* in the page, the station table's refresh is a secondary action - "צור הזמנה" is the one primary */
.picker-inline .picker-reload { background: var(--surface); color: var(--brand); border-color: var(--border-strong); }
/* stage 11: the green "created" line on the new order's card, and the "before confirming" ticks */
.cc-created { background: var(--ok-tint); color: var(--ok); border: 1px solid var(--ok-border); border-radius: var(--r-md);
padding: 6px 12px; font-weight: 700; margin-bottom: var(--sp-2, 8px); }
.no-before { display: grid; gap: 4px; }
.no-tick { display: flex; gap: 6px; align-items: center; font-size: var(--fs-sm); cursor: pointer; }
.no-tick.todo { color: var(--danger); font-weight: 600; }
.no-missing { background: none; border: none; padding: 0; color: var(--danger); font: inherit; font-size: var(--fs-xs); cursor: pointer; text-align: start; }
.no-missing:hover { text-decoration: underline; }
@keyframes cc-flash { from { background: var(--warn-tint); } to { background: transparent; } }
.cc-flash { animation: cc-flash 1.2s ease-out 1; }
/* ============================================================================
ORDER CARD (UX plan section 9, stage 12): a fixed header that does not scroll, one action bar,
six tabs. The header sticks to the top of the scrolling page area.
============================================================================ */
.od-head { position: sticky; top: calc(-1 * var(--sp-3)); z-index: 6; background: var(--surface);
border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 12px 6px; margin-bottom: var(--sp-2, 8px);
display: grid; gap: 4px; box-shadow: 0 1px 0 var(--border); }
.od-row1, .od-row2 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.od-id { font-size: var(--fs-xl); color: var(--ink); }
.od-id b { font-weight: 700; }
.od-pay { margin-inline-start: auto; display: flex; align-items: baseline; gap: 6px; font-size: var(--fs-sm); color: var(--ink-2); }
.od-pay b { font-size: var(--fs-xl); color: var(--ink); }
.od-total { font-size: var(--fs-xs); color: var(--ink-3); }
.od-row2 { font-size: var(--fs-sm); color: var(--ink-2); }
.od-sub a { font-weight: 700; color: var(--brand); text-decoration: none; }
.od-sub a:hover { text-decoration: underline; }
.od-muted { color: var(--ink-3); margin-inline-start: 4px; }
.od-sep { color: var(--ink-3); }
.od-car a { color: var(--brand); text-decoration: none; }
.od-row2 .sub-tags { flex-basis: auto; }
.od-head .oh-tl { margin: 2px 0 0; }
.od-deadline { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--border-strong); border-radius: var(--r-sm);
padding: 5px 10px; font-weight: 700; font-size: var(--fs-md); }
.od-dead .od-id, .od-dead .od-row2 { opacity: .75; }
.od-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border-top: 1px solid var(--border); padding-top: 6px; }
.od-actions > button, .od-menu-wrap > button, .od-actions-end button { height: var(--ctl-h, 30px); }
.od-actions-end { margin-inline-start: auto; }
.od-menu-wrap { position: relative; }
.od-menu { position: absolute; inset-inline-start: 0; top: calc(100% + 4px); z-index: 20; min-inline-size: 220px; max-block-size: 70vh; overflow: auto;
background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-md); box-shadow: 0 6px 18px var(--shadow, rgba(0,0,0,.15));
padding: 6px; display: grid; gap: 2px; }
.od-menu[hidden] { display: none; }
.od-menu button { justify-content: flex-start; text-align: start; width: 100%; border: none; background: none; padding: 6px 8px; border-radius: var(--r-sm); cursor: pointer; color: var(--ink); font: inherit; }
.od-menu button:hover:not(:disabled) { background: var(--brand-tint); }
.od-menu-scrim { position: fixed; inset: 0; z-index: 5; }
.od-more { min-inline-size: 260px; }
/* the two old bars, as menu items */
.od-more .ord-actions.oa-menu { display: grid; gap: 2px; margin: 0; }
.od-more .ord-actions.oa-menu .oa-btn { display: flex; align-items: center; gap: 8px; inline-size: 100%; block-size: auto; }
.od-more .ord-actions.oa-menu .oa-btn svg { inline-size: 18px; block-size: 18px; flex: 0 0 auto; }
.od-more .oab.oab-menu { display: grid; gap: 2px; padding: 0; margin: 4px 0 0; border: none; background: none; position: static; box-shadow: none; }
.od-more .oab.oab-menu .oab-sep { display: block; border-top: 1px solid var(--border); margin: 4px 0; inline-size: 100%; }
.od-more .oa-activities { margin-top: 6px; }
.od-subtabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 8px; }
.od-subtabs button { border: 1px solid var(--border-strong); background: var(--surface); border-radius: var(--r-pill); padding: 2px 10px;
font-size: var(--fs-xs); cursor: pointer; color: var(--ink-2); }
.od-subtabs button.active { background: var(--brand-tint); color: var(--brand); border-color: var(--brand-border); font-weight: 700; }
.app-main:has(.order-body) .od-head{ flex:none; position:static; }
.app-main .order-body > .cal-panel > .od-subtabs{ flex:none; overflow:visible; }
.od-more .oab.oab-menu button{ inline-size:100%; text-align:start; border-color:transparent; background:none; }
.od-more .oab.oab-menu button:hover:not(:disabled){ background:var(--brand-tint); }
.od-more .ord-actions.oa-menu .oa-btn{ border-color:transparent; background:none; justify-content:flex-start; padding:6px 8px; }
.od-more .ord-actions.oa-menu .oa-btn:hover:not(:disabled){ background:var(--brand-tint); }
/* stage 13: subscriber card header - status tags, contacts, the red line, "+ הזמנה חדשה" */
.sub-head .sh-main { flex: 1; min-width: 0; }
.sub-head .sh-meta { flex-wrap: wrap; }
.sub-head .sub-contacts { display: inline-flex; gap: 10px; color: var(--ink-2); }
.sub-head .sh-acts { margin-inline-start: auto; }
.sub-head .sh-acts .btn.primary { display: inline-block; background: var(--brand); color: var(--on-brand); border: 1px solid var(--brand);
border-radius: var(--r-md); padding: 6px 14px; text-decoration: none; font-weight: 700; white-space: nowrap; }
.sub-head .sh-acts .btn.primary:hover { background: var(--brand-strong); }
.sub-redbar { background: var(--danger-tint); color: var(--danger); border: 1px solid var(--danger); border-radius: var(--r-md);
padding: 6px 12px; font-weight: 700; margin-bottom: 8px; }
/* stage 13: subscriber approval - the page's document large beside its fields, notes on top, keyboard */
.ap-wizard { border: none; padding: 0; margin: 0; min-width: 0; }
.ap-wizard:disabled { opacity: .55; }
.ap-block { border-color: var(--danger); color: var(--danger); }
.ap-notes .note-list { max-height: 130px; overflow: auto; }
.ap-main-doc { display: block; inline-size: 100%; padding: 0; border: 1px solid var(--brand-border); border-radius: var(--r-md);
background: var(--surface-2); cursor: zoom-in; margin-bottom: 8px; }
.ap-main-doc img { display: block; inline-size: 100%; max-block-size: 52vh; object-fit: contain; }
.ap-doc .ap-thumbs { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.ap-doc .ap-thumb img { block-size: 70px; }
.ap-ai { margin-top: 8px; font-size: var(--fs-sm); }
.ap-ai > summary { cursor: pointer; color: var(--ink-2); font-weight: 700; }
.ap-field:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.ap-body { align-items: start; }
.ap-fields { max-block-size: calc(100vh - 230px); overflow: auto; }
/* stage 13: car card - live state and current/next order under the header, the special message */
.car-live { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-md); padding: 6px 10px; margin-bottom: 8px; }
.car-orders { display: inline-flex; flex-wrap: wrap; gap: 12px; font-size: var(--fs-sm); margin-inline-start: auto; }
.car-orders a { color: var(--brand); text-decoration: none; }
.car-orders a:hover { text-decoration: underline; }
.car-aware { margin-top: 4px; background: var(--warn-tint); color: var(--warn); border: 1px solid var(--warn-border); border-radius: var(--r-sm);
padding: 3px 8px; font-weight: 600; font-size: var(--fs-sm); }
.sub-head .sh-meta .oc-tags { flex-basis: auto; }
/* stage 13, 1366 fit: notes two lines tall (scroll for more), the document sized to the screen */
.ap-notes .note-list { max-height: 74px; }
.ap-notes { padding-block: 6px; }
.ap-notes > h3 { margin-bottom: 2px; }
.ap-main-doc img { max-block-size: calc(100vh - 440px); min-block-size: 200px; }
.ap-payload { max-inline-size: 420px; overflow-wrap: anywhere; }
/* stage 14: "בשיחה עם…" under the top bar, in every tab */
.call-bar { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; background: var(--ok-tint); color: var(--ok);
border: 1px solid var(--ok-border); border-radius: var(--r-md); padding: 4px 12px; margin-bottom: 8px; font-size: var(--fs-sm); }
.call-bar b { color: var(--ink); }
.call-bar .cb-dot { inline-size: 8px; block-size: 8px; border-radius: var(--r-pill); background: var(--ok); }
.call-bar .cb-time { font-weight: 700; }
.call-bar .cb-acts { display: inline-flex; gap: 6px; margin-inline-start: auto; }
.call-bar .cb-acts a, .call-bar .cb-acts button { border: 1px solid var(--ok-border); background: var(--surface); color: var(--ok); border-radius: var(--r-sm);
padding: 2px 10px; text-decoration: none; font: inherit; cursor: pointer; }
.call-bar .cb-acts a:hover, .call-bar .cb-acts button:hover { background: var(--ok-tint); }
/* stage 14: queue counters in the top bar; a counter that went up pulses once */
.app-queues .q-badge { display: inline-block; min-inline-size: 18px; margin-inline-start: 4px; padding: 0 5px; border-radius: var(--r-pill);
background: var(--brand-tint); color: var(--brand); font-size: var(--fs-xs); font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.app-queues .q-badge.bump { animation: q-bump .6s ease-out 1; }
@keyframes q-bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); background: var(--brand); color: var(--on-brand); } 100% { transform: scale(1); } }
/* stage 15: the "?" shortcuts panel */
.cc-keys { position: fixed; inset: 0; z-index: 2000; background: rgba(0, 0, 0, .35); display: grid; place-items: center; }
.cc-keys-card { background: var(--surface); color: var(--ink); border: 1px solid var(--border-strong); border-radius: var(--r-md);
box-shadow: 0 10px 30px rgba(0, 0, 0, .25); padding: 14px 18px; max-inline-size: min(560px, 94vw); max-block-size: 86vh; overflow: auto; }
.cc-keys-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: var(--fs-lg); }
.cc-keys-x { border: none; background: none; cursor: pointer; font-size: var(--fs-md); color: var(--ink-2); }
.cc-keys table { border-collapse: collapse; inline-size: 100%; font-size: var(--fs-sm); }
.cc-keys td { padding: 4px 6px; border-bottom: 1px solid var(--border); vertical-align: top; }
.cc-keys td:first-child { white-space: nowrap; }
.cc-keys kbd { font: inherit; font-weight: 700; color: var(--brand); direction: ltr; unicode-bidi: isolate; }
.cc-keys-foot { margin-top: 8px; font-size: var(--fs-xs); color: var(--ink-3); }
.keys-link { border: none; background: none; padding: 0; color: var(--brand); cursor: pointer; font: inherit; font-size: var(--fs-xs); }
.keys-link:hover { text-decoration: underline; }
/* ===== clarity pass (owner 2026-10-05, "the old program was easier to read") =====
Last in the file on purpose: it overrides the grid rules above with the same specificity.
The separators were --surface (white on white) and the grid had horizontal lines only; the WPF
DevExpress theme draws every cell, keeps the header light and the values dark. */
.kv > div { border-bottom-color: var(--border); }
.kv > div.k { border-inline-end-color: var(--border); }
.panel > h3 { color: var(--ink); font-weight: 700; border-bottom-color: var(--border); }
table.grid thead tr:first-child th { background: var(--surface-2); color: var(--ink); border-bottom: 2px solid var(--brand);
border-inline-end: 1px solid var(--border); }
table.grid tbody td { padding: 5px 8px; border-bottom-color: var(--border); border-inline-end: 1px solid var(--border); }
table.grid tbody tr:nth-child(even) { background: var(--surface-2); }
table.grid tbody td .pg-clip.pg-wrap { white-space: normal; overflow: visible; text-overflow: clip; display: block; }
table.grid tbody tr.st-overdue > td { background: var(--warn-tint); }
/* ===== order card, three columns (WPF OrderView: customer | journal | data) - on >= 1600px ===== */
.order-body.ob3 { grid-template-columns: minmax(320px, 380px) minmax(480px, 1fr) minmax(0, 1.15fr); align-items: start; }
.order-body.ob3 > .ob-cust { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.order-body.ob3 > .ob-cust .ob-notes { max-block-size: 60vh; overflow: auto; }
.order-body.ob3 > .oh-left { min-width: 0; }
.order-body.ob3 .ob-cal .cal2-scroll { max-block-size: 62vh; }
.order-body.ob3 > .cal-panel { min-width: 0; }
/* three columns: the middle column is the height of the window, and the journal takes what the route
and times panels leave - it was cut off below the fold (owner 2026-10-05) */
.order-body.ob3 > .oh-left { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 0;
block-size: calc(100vh - 150px); min-block-size: 560px; overflow-y: auto; }
.order-body.ob3 > .oh-left > .panel { flex: none; }
.order-body.ob3 > .oh-left > .ob-cal { flex: 1 1 auto; min-block-size: 320px; display: flex; flex-direction: column; overflow: hidden; }
.order-body.ob3 .ob-cal > .cal-focus { flex: 1; min-block-size: 0; display: flex; flex-direction: column; }
.order-body.ob3 .ob-cal .cal2 { flex: 1; min-block-size: 0; display: flex; flex-direction: column; }
.order-body.ob3 .ob-cal .cal2-scroll { flex: 1; min-block-size: 0; max-block-size: none; overflow: auto; }
.od-times .od-newend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.od-times .extend-controls { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.od-times .extend-controls button { padding: 0 8px; height: 26px; }
/* times panel at half the height: two label/value pairs per row; the editors take the whole row
(owner 2026-10-05) */
.od-times > h3 { margin-block-end: 4px; }
.od-times .kv { grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); }
.od-times .kv > div { padding: 2px 6px; }
.od-times .kv > .od-span { grid-column: span 3; }
.od-times .extend-controls button { height: 24px; }
.od-times .extend-errors { margin-block-start: 4px; }
/* the planned start edited in place (owner 2026-10-19): a date box + an HH:mm box, like WPF */
.od-times .od-start-edit .od-date { min-width: 0; inline-size: 128px; }
.od-times .od-start-edit .od-time { min-width: 0; inline-size: 84px; }
.od-times .od-start-edit .delta { flex-basis: 100%; }
/* compact order header (owner 2026-10-19): only the first line stays, the body gets the height */
.od-head-toggle { margin-inline-start: auto; border: 1px solid var(--border-strong); background: var(--surface);
border-radius: var(--r-sm); padding: 1px 8px; font-size: var(--fs-xs); cursor: pointer; }
.od-head-toggle:hover { background: var(--brand-tint); }
.od-head.od-head-compact .od-row2,
.od-head.od-head-compact .oh-tl,
.od-head.od-head-compact .od-actions { display: none; }
/* order card, "יומן רכב" tab (owner 2026-10-19: "the calendar and the tabs are tiny"): the toolbar
wrapped into 3 rows and status + legend took 2 more above the grid. Now: row 1 = title, views,
range, zoom; row 2 = the car's live line; row 3 = shortcuts + legend on one line. And the grid
keeps a floor height - below it the tab scrolls as a whole instead of crushing the grid. */
.od-cal-toolbar { gap: 6px; row-gap: 4px; margin-bottom: 4px; }
.od-cal-toolbar h3 { white-space: nowrap; font-size: var(--fs-sm); }
.od-cal-toolbar .car-live { order: 9; flex: 1 1 100%; flex-wrap: nowrap; overflow: hidden; padding-block: 1px; }
.od-cal-toolbar .car-live .cl-item { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.od-cal-toolbar .cal-range { min-width: 0; }
.od-cal-legend { flex-wrap: nowrap; overflow-x: auto; margin: 0 0 4px; scrollbar-width: thin; }
.od-cal-legend > * { flex: none; }
.od-cal-legend .cal-hint { border: 0; background: none; padding: 0 4px 0 0; cursor: pointer; color: var(--ink-3); font-size: var(--fs-xs); }
.app-main .order-body > .cal-panel > .cal-focus:has(.od-cal-toolbar) { overflow-y: auto; }
.app-main .order-body > .cal-panel > .cal-focus:has(.od-cal-toolbar) > .cal2 { flex: 1 1 0; min-height: 340px; }
.app-main .order-body > .cal-panel > .cal-focus:has(.od-cal-toolbar) > .calm { flex: none; }
.app-main .order-body > .cal-panel > .tabs { margin-bottom: 4px; }
.app-main .order-body > .cal-panel > .tabs button { padding: 4px 10px; }
/* the journal: no sticky column - it hid the journal's bottom behind the window edge and the wheel
could not reach it. The journal has its own height and scrolls its hours inside. */
.order-body.ob3 > .oh-left { position: static; block-size: auto; min-block-size: 0; overflow: visible; }
.order-body.ob3 > .oh-left > .ob-cal { flex: none; block-size: calc(100vh - 110px); min-block-size: 480px; }
.cal-event.from-db, .cal2-day .cal-event:not(.ghost):not(.release) { cursor: pointer; user-select: none; }
/* three columns, take 3: the page does not scroll here - every column scrolls inside itself
(.app-main .order-body, one minmax(0,1fr) row). "align-items:start" and "overflow:visible" let the
middle column grow past the window and the bottom of the journal was simply cut off (owner
2026-10-05: "I see 00:00 to 13:00 and cannot scroll"). Each column is the window's height again; the
journal fills what route + times leave and scrolls its hours; a short window scrolls the column. */
.app-main .order-body.ob3 { align-items: stretch; }
.app-main .order-body.ob3 > .ob-cust { min-block-size: 0; overflow-y: auto; }
.app-main .order-body.ob3 > .oh-left { align-self: stretch; block-size: auto; min-block-size: 0; overflow-y: auto; }
.app-main .order-body.ob3 > .oh-left > .ob-cal { flex: 1 0 420px; block-size: auto; min-block-size: 420px; }
/* the journal's month view: a cell per day, the orders listed in it with the journal's colours */
.calm { display: flex; flex-direction: column; flex: 1; min-block-size: 0; border: 1px solid var(--border);
border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.calm-head, .calm-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calm-head { flex: none; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.calm-wd { padding: 3px 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); text-align: center; }
.calm-grid { flex: 1; min-block-size: 0; overflow-y: auto; grid-auto-rows: minmax(92px, auto); }
.calm-day { border-inline-end: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 2px 3px;
display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.calm-day.other { background: var(--surface-2); opacity: .65; }
.calm-day.is-today { box-shadow: inset 0 0 0 2px var(--brand); }
.calm-num { align-self: flex-start; border: 0; background: none; padding: 0 4px; font-weight: 700; font-size: var(--fs-xs);
color: var(--ink); cursor: pointer; border-radius: var(--r-sm); }
.calm-num:hover { background: var(--brand-tint); }
.calm .cal-event.calm-ev { position: static; inset: auto; padding: 1px 4px; font-size: 11px; line-height: 1.3; box-shadow: none;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; user-select: none; }
.calm .cal-event.release.calm-ev { cursor: default; }
/* "סקירה" in three columns: the notes are already in the customer column, so data | payment get the
whole width (the third, empty column squeezed the payment table until it was cut - owner 2026-10-05,
order 3597723). The tab scrolls as a whole; only the events keep their own scroll. */
.order-body.ob3 .od-review { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-rows: auto; align-content: start; }
.order-body.ob3 .od-review > section { overflow: visible; min-block-size: auto; }
.order-body.ob3 .od-review > .odr-ev { overflow: auto; max-block-size: 45vh; min-block-size: 240px; }
/* the purple club rank next to the customer's name, in the WPF rank colours */
.oc-tag.oc-club { color: #1d1b26; border-color: rgba(0, 0, 0, .18); }
.oc-tag.oc-club.none { background: var(--surface-2); color: var(--ink-3); font-weight: 500; }
/* "סקירה": the events get more height, and their buttons (choose as start / end) stay on top while the
list scrolls - the rep picked a row at the bottom and had to scroll back up (owner 2026-10-05) */
.od-review > .odr-ev .od-ev-acts { position: sticky; top: -6px; z-index: 3; background: var(--surface);
padding-block: 4px; margin-block: -2px 2px; border-bottom: 1px solid var(--border); }
.od-review { grid-template-rows: minmax(300px, 58%) minmax(0, 1fr); }
.order-body.ob3 .od-review > .odr-ev { max-block-size: 62vh; min-block-size: 320px; }
/* the grid pager in a narrow side panel: wrap whole items, never break "עמוד 1 מתוך 1" letter by letter */
.grid-pager { flex-wrap: wrap; row-gap: 4px; }
.grid-pager > span { white-space: nowrap; }
/* reconnect dialog (#components-reconnect-modal in _Host.cshtml): hidden until the framework adds a state class */
.cc-reconnect { display: none; position: fixed; inset: 0; z-index: 10000; background: rgba(0, 0, 0, .35);
align-items: center; justify-content: center; }
.cc-reconnect.components-reconnect-show,
.cc-reconnect.components-reconnect-failed,
.cc-reconnect.components-reconnect-rejected { display: flex; }
.cc-reconnect-box { background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
padding: 16px 20px; max-width: 420px; text-align: center; box-shadow: 0 6px 24px rgba(0, 0, 0, .25); }
.cc-reconnect-msg { display: none; margin-bottom: 12px; }
.cc-reconnect.components-reconnect-show .cc-reconnect-on-show,
.cc-reconnect.components-reconnect-failed .cc-reconnect-on-failed,
.cc-reconnect.components-reconnect-rejected .cc-reconnect-on-rejected { display: block; }
|