/* My account + Orders board + detail drawer */
@layer screens {
  /* ---- my account ---- */
  .me-grid { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
  .me-card { flex: 1 1 360px; max-width: 520px; border-radius: 13px; display: flex; flex-direction: column; gap: 14px; }
  .me-card form { display: flex; flex-direction: column; gap: 14px; }
  .me-sublabel { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
  .me-avatar-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
  .me-avatar-lg {
    width: 76px; height: 76px; border-radius: 50%;
    display: grid; place-items: center; color: #fff; font-size: 28px; font-weight: 700; flex-shrink: 0;
  }
  .me-avatar-controls { display: flex; flex-direction: column; gap: 8px; }
  .me-swatches { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .me-swatch {
    width: 26px; height: 26px; border-radius: 50%; cursor: pointer; padding: 0;
    border: 2.5px solid transparent; position: relative;
  }
  .me-swatch.on { border-color: var(--text); }
  .me-swatch input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
  .me-email-line { font-size: 12.5px; color: var(--text-2); }
  .me-pw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .me-card input[type="text"], .me-card input[type="password"] { width: 100%; }

  .view-toggle { display: inline-flex; gap: 4px; }

  /* ---- date board ---- */
  .order-board { gap: 10px; }
  .order-col { min-width: 200px; max-width: 230px; }
  .order-col.col-today { outline: 2px solid var(--primary); outline-offset: -1px; }
  .order-col.col-overdue h3 { color: var(--danger-fg); }
  .order-col.col-overdue .col-dot { background: var(--danger-fg); }
  .order-col h3 { display: flex; align-items: center; gap: 6px; }
  .order-col h3 .count {
    background: var(--surface-3); border-radius: var(--r-pill);
    font-size: 11px; padding: 0 7px; color: var(--text-2); font-weight: 600;
  }
  .col-meta { font-size: 11px; color: var(--muted); margin: -4px 4px 8px; }
  .col-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
  .col-dot.on { background: var(--primary); }
  .pill-pay { font-size: 10.5px; }
  .stop-list.droppable.drag-over {
    outline: 2px dashed var(--primary); outline-offset: 2px;
    background: var(--primary-soft); border-radius: var(--r-md);
  }
  .col-empty { font-size: 11.5px; color: var(--muted); text-align: center; padding: 12px 6px; }

  .order-card { gap: 4px; padding: 9px 11px; }
  .order-card.dragging { opacity: 0.4; }
  .order-card .card-open { color: inherit; text-decoration: none; display: flex; flex-direction: column; gap: 4px; }
  .order-card .card-open:hover { text-decoration: none; }
  .order-card .card-top { display: flex; justify-content: space-between; align-items: baseline; }
  .order-card .card-items { font-size: 11.5px; color: var(--muted); }
  .order-card .card-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
  .pill.small { font-size: 10.5px; padding: 1px 7px; }
  a.row-open { color: var(--text); }

  /* ---- detail drawer ---- */
  .odetail { display: flex; flex-direction: column; gap: 18px; padding-bottom: 20px; }
  .odetail-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .odetail-head .spacer { flex: 1; }
  .odetail-actions { display: flex; gap: 6px; flex-wrap: wrap; }
  .odetail-label {
    display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
  }
  .odetail-sec { border-top: 1px solid var(--line); padding-top: 14px; }
  .odetail-sec:first-of-type { border-top: none; padding-top: 0; }
  .odetail form { display: flex; flex-direction: column; gap: 18px; }
  .odetail label { display: block; font-size: 12px; font-weight: 600; color: var(--text-2); }
  .odetail label input, .odetail label select, .odetail label textarea,
  .odetail-sec > input, .odetail-sec > textarea { width: 100%; margin-top: 5px; }
  .odetail-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .odetail-items { margin: 0 0 12px; padding-left: 18px; font-size: 13.5px; }
  .odetail .inrow { display: flex; align-items: center; gap: 8px; }
  .odetail .inrow .suffix { font-size: 12px; color: var(--muted); white-space: nowrap; }
  .odetail-value { font-size: 14px; font-weight: 700; color: var(--primary); margin-top: 8px; }
  .odetail-weight { font-size: 12px; color: var(--muted); margin-top: 6px; }
  .odetail-hint { font-size: 11.5px; color: var(--muted); margin: 0; }
  .odetail-pod-proof {
    display: flex; flex-direction: column; gap: 7px;
    background: var(--ok-bg); border: 1px solid transparent; border-radius: var(--r-md); padding: 10px 12px;
  }
  .odetail-pod-proof .odetail-label { color: var(--ok-fg); margin-bottom: 0; }
  .odetail-trip { display: flex; align-items: center; gap: 8px; }
  /* trip colour dot — the dynamic colour is passed in via the --dot custom property */
  .odetail-trip span { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--dot, var(--primary)); }
  /* detail specifics (the rest reuses the shared .field/.disclosure/.thumbs primitives) */
  .odetail-flash { display: block; } /* a full-width pill notice at the top of the pane */
  .odetail-titlegroup { display: flex; flex-direction: column; gap: 3px; } /* customer + source line, tight */
  .odetail-cust { margin: 0; font-size: 1.15rem; font-weight: 700; }
  .odetail-hero { display: block; }
  .odetail-hero img { width: 100%; max-height: 220px; object-fit: cover; border-radius: 7px; }
  .map-box--detail { height: 170px; }
  /* delivery-round page */
  .map-box--round { height: 420px; margin-bottom: 12px; }
  .round-fleet { margin: 6px 0 14px; }
  .round-workspace { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
  .round-tasks { flex: 1; min-width: 280px; }
  .attach-review { display: flex; gap: 12px; align-items: flex-start; }
  .attach-review > form { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
  .odetail-raw summary { cursor: pointer; font-size: 13px; color: var(--primary); }
  .odetail-raw pre {
    white-space: pre-wrap; word-break: break-word; font-family: var(--font-mono);
    font-size: 12px; line-height: 1.7; background: var(--surface-2);
    border: 1px solid var(--line); border-radius: var(--r-md); padding: 11px 13px; margin: 10px 0 4px;
  }
}

/* Fleet summary strip (logistics) */
@layer screens {
  .fleet-summary { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
  .fleet-chip { display: inline-flex; align-items: baseline; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 13px; font-size: 12.5px; color: var(--text-2); }
  .fleet-chip .fleet-num { font-size: 18px; font-weight: 700; font-family: var(--font-mono); color: var(--text); }
  .fleet-chip.ok .fleet-num { color: var(--ok-fg); }
  .fleet-chip.planned .fleet-num { color: var(--st-planned-fg); }
  .fleet-chip.warn .fleet-num { color: var(--warn-fg); }
}

/* ===== Order triage (three-pane list view) ===== */
@layer screens {
  .triage { display: flex; gap: 14px; min-height: 0; align-items: stretch; height: 100%; }
  .triage-colhead { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }

  /* LEFT — incoming by deadline. Scrolls internally under the floating topbar. */
  .triage-left { width: 268px; flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; min-height: 0; }
  .dl-group { display: flex; flex-direction: column; gap: 7px; border-radius: var(--r-md); padding: 2px; }
  .dl-group.drag-over { outline: 2px dashed var(--primary); outline-offset: 2px; background: var(--primary-soft); }
  .dl-group-head { display: flex; align-items: baseline; gap: 8px; border-bottom: 2px solid var(--line-strong); padding-bottom: 4px; }
  .dl-group-head.accent { border-bottom-color: var(--primary); }
  .dl-date { font-size: 13.5px; font-weight: 700; }
  .dl-meta { font-size: 11px; color: var(--muted); }

  .tri-card { background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; display: flex; flex-direction: column; gap: 3px; cursor: grab; }
  .tri-card.urgent { background: var(--danger-bg); border-color: var(--urgent); }
  .tri-card.dragging { opacity: 0.4; }
  .tri-card:hover { border-color: #7fb0d8; }
  .tri-card-r1 { display: flex; align-items: center; gap: 6px; }
  .tri-card-body { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--text); }
  .tri-card-body:hover { text-decoration: none; }
  .tri-handle { color: #aab6c2; font-size: 13px; letter-spacing: 1px; cursor: grab; padding: 2px 4px; margin: -2px -2px -2px -4px; border-radius: 4px; flex-shrink: 0; }
  .tri-handle:hover { background: var(--surface-3); color: var(--text-2); }
  .tri-handle:active { cursor: grabbing; }
  .tri-id { font-size: 10.5px; }
  .tri-urgent { border-radius: 4px; padding: 1px 6px; font-size: 10px; font-weight: 700; background: var(--urgent); color: #fff; }
  .tri-wt { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
  .tri-cust { font-size: 13px; font-weight: 700; line-height: 1.3; }
  .tri-items { font-size: 11.5px; color: var(--text-2); line-height: 1.35; }
  .tri-pay { margin-top: 2px; }
  .spacer { flex: 1; }

  /* Manifest delivery task (read-only — from the bot, not a chat order) */
  .tri-delivery { cursor: default; border-style: dashed; }
  .tri-delivery.done { background: var(--surface-2); }
  .tri-handle-off { cursor: default; color: #c2ccd6; }
  .tri-handle-off:hover { background: none; }
  .tri-mffrom { font-size: 9.5px; font-weight: 700; color: var(--muted); background: var(--surface-3); border-radius: 4px; padding: 1px 5px; }
  .tri-deliv { font-size: 10.5px; font-weight: 700; color: var(--ok, #2e9e5b); white-space: nowrap; }
  .tri-onroute { font-size: 10.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
  .tri-proof { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
  .tri-proof-lbl { font-size: 10.5px; color: var(--text-2); }

  /* MIDDLE — grouping for delivery. Scrolls internally under the floating topbar. */
  .triage-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; min-height: 0; }
  .triage-midhead { display: flex; align-items: center; gap: 8px; }
  .triage-midhead--sep { margin-top: 16px; } /* separates the chat-order planner from the delivery groupings */
  .board-hint { margin-top: 8px; }
  .rec-apply { border: none; cursor: pointer; background: var(--ok); color: #fff; border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 700; }
  .rec-group { background: var(--surface); border: 1.5px dashed var(--line-strong); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 7px; }
  .rec-group.drag-over { border-color: var(--primary); background: var(--primary-soft); }
  .rec-group-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .rec-warn { border-radius: 5px; padding: 1.5px 8px; font-size: 10.5px; font-weight: 700; }
  .rec-warn.over { background: var(--danger-bg); color: var(--danger-fg); }
  .rec-warn.near { background: var(--warn-bg); color: var(--warn-fg); }
  .rec-moved { border-radius: 5px; padding: 1.5px 8px; font-size: 10.5px; font-weight: 700; background: var(--ok-bg); color: var(--ok-fg); }
  .rec-sheet { color: var(--primary); font-size: 11px; font-weight: 700; }
  .rec-addveh select { border: 1px solid var(--primary-border); border-radius: 7px; padding: 3px 5px; font-size: 11px; font-weight: 600; color: var(--primary); background: var(--surface); }

  .rec-truck { display: flex; flex-direction: column; gap: 5px; border-radius: 8px; }
  .rec-truck.drag-over { outline: 2px dashed var(--primary); outline-offset: 2px; }
  .rec-truck-head { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--primary-soft); border: 1px solid var(--primary-border); border-radius: 8px; text-decoration: none; color: var(--text); }
  .rec-truck-head:hover { text-decoration: none; border-color: var(--primary); }
  .rec-truck-cap { font-size: 10.5px; font-weight: 600; color: var(--muted); }
  .rec-truck-cap.over { color: var(--danger-fg); }
  .rec-truck-map { font-size: 11px; font-weight: 700; color: var(--primary); }
  .rec-truck.loose .rec-truck-head { background: var(--surface-2); border-color: var(--line); color: var(--text-2); }
  .rec-drophint { font-size: 11px; color: var(--muted); border: 1.5px dashed var(--line-strong); border-radius: 8px; padding: 8px 10px; margin-left: 10px; text-align: center; }
  .rec-empty { font-size: 11.5px; color: var(--muted); }

  /* delivery task = stop row: roomy, nothing truncated, controls always visible */
  .stop-row { display: flex; flex-direction: column; gap: 6px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; margin-left: 10px; cursor: grab; }
  .stop-row.urgent { background: var(--danger-bg); border-color: var(--urgent); }
  .stop-row.locked { border-left: 3px solid var(--primary); }
  .stop-head { display: flex; align-items: center; gap: 7px; }
  .stop-seq { width: 19px; height: 19px; flex-shrink: 0; border-radius: 50%; background: var(--rail); color: #fff; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; }
  .stop-eta { font-size: 11px; font-weight: 700; color: var(--primary); }
  .stop-cust { font-size: 14px; font-weight: 700; color: var(--text); text-decoration: none; }
  .stop-cust:hover { text-decoration: underline; }
  .stop-detail { font-size: 12.5px; color: var(--text-2); display: flex; flex-wrap: wrap; gap: 6px 10px; padding-left: 26px; }
  .stop-items { font-weight: 600; }
  .stop-wt { color: var(--muted); }
  .stop-badge { border-radius: 5px; padding: 1.5px 8px; font-size: 10.5px; font-weight: 700; }
  .stop-badge.urgent { background: var(--danger-bg); color: var(--danger-fg); }
  .stop-badge.sys { background: var(--surface-3); color: var(--muted); }
  .stop-badge.override { background: var(--warn-bg); color: var(--warn-fg); }
  .rec-override { font-size: 10.5px; font-weight: 700; color: var(--warn-fg); margin-right: 8px; }
  .rec-revert { display: inline-flex; align-items: center; gap: 4px; margin: 4px 0 0 10px; border: 1px solid var(--warn); background: var(--warn-bg); color: var(--warn-fg); border-radius: 7px; padding: 4px 10px; font-size: 11.5px; font-weight: 700; cursor: pointer; }
  .rec-revert-form { display: inline; }
  .stop-ctrls { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; padding-left: 26px; }
  .stop-mv-form { display: inline-flex; }
  .stop-move { border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2); border-radius: 6px; width: 24px; height: 24px; font-size: 12px; cursor: pointer; padding: 0; }
  .stop-pill { border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--text-2); border-radius: 999px; height: 24px; padding: 0 11px; font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; }
  .stop-pill.lock.on { background: var(--primary); color: #fff; border-color: var(--primary); }
  .stop-pill.inform { color: var(--warn-fg); border-color: var(--warn); }
  .stop-pill.inform.on { background: var(--ok); color: #fff; border-color: var(--ok); }

  /* selected order — highlighted in every pane it appears in */
  .tri-card.selected, .stop-row.selected { background: #d9eaf8; border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
  html.sdos-darkmode .tri-card.selected, html.sdos-darkmode .stop-row.selected { background: var(--primary-soft); }

  .triage-hint { font-size: 11px; color: var(--muted); }

  @media (max-width: 900px) {
    .triage { flex-direction: column; }
    .triage-left { width: 100%; }
  }
}

@layer screens {
  .odetail-raw .raw-hide { display: none; }
  .odetail-raw[open] .raw-show { display: none; }
  .odetail-raw[open] .raw-hide { display: inline; }
}

/* ===== Triage drag (SortableJS) ===== */
@layer screens {
  .dl-list, .rec-truck-list, .rec-loose-list { display: flex; flex-direction: column; gap: 6px; min-height: 34px; }
  .rec-truck-list, .rec-loose-list { margin-left: 10px; }
  .tri-drophint { font-size: 11px; color: var(--muted); border: 1.5px dashed var(--line-strong); border-radius: 8px; padding: 8px 10px; text-align: center; }
  .triage-ghost { opacity: 0.4; }
  .sortable-drag { box-shadow: 0 6px 20px rgba(15, 25, 40, 0.22); }
}

/* ===== Orders 3-pane workspace: detail pane stays in-flow (no slide-in) ===== */
@layer screens {
  /* Pin the orders 3-pane to the viewport on desktop so each pane scrolls
     INTERNALLY and the right (detail) pane is ALWAYS visible beside the work
     list — instead of a tall middle pane pushing it off-screen / far below.
     Mirrors the Locations screen. Below the breakpoint: stack + page scrolls. */
  .content:has(.orders-workspace) { display: flex; flex-direction: column; min-height: 0; padding-bottom: 0; }
  @media (min-width: 961px) { .shell:has(.orders-workspace) { height: 100vh; overflow: hidden; } }

  /* Workspace = a floating frosted-glass header bar over a body whose panes
     scroll INTERNALLY. The 3 column titles stay put while the lists scroll. */
  .orders-workspace { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .orders-body { display: flex; gap: 14px; flex: 1; min-height: 0; }
  .orders-collection { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; } /* board view scrolls here */
  .orders-workspace.has-topbar .orders-collection { overflow: visible; } /* list: the panes scroll, not this */
  .order-detail-pane {
    flex: 0 0 410px; max-width: 410px; overflow-y: auto; min-height: 0;
    background: var(--surface); border: 1px solid var(--line); border-radius: 13px;
  }
  .order-detail-pane .odetail { padding: 16px 18px; }
  .detail-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 240px; color: var(--muted); font-size: 13px; text-align: center; padding: 24px; }
  .detail-empty-icon { font-size: 30px; opacity: 0.5; }

  /* ---- floating "main menu" header bar (frosted glass) ---- */
  .orders-topbar {
    position: absolute; inset: 0 0 auto 0; z-index: 6; height: 48px;
    display: flex; gap: 14px; align-items: center; padding: 0 2px;
    background: var(--surface); /* fallback when color-mix/backdrop-filter unsupported */
    background: color-mix(in oklch, var(--surface) 60%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid color-mix(in oklch, var(--line-strong) 55%, transparent);
    box-shadow: 0 10px 24px -18px rgba(0, 0, 0, 0.5);
  }
  .ot-col { font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 10px; white-space: nowrap; }
  .ot-left { width: 268px; flex-shrink: 0; padding-left: 4px; }
  .ot-mid { flex: 1; min-width: 0; }
  .ot-detail { width: 410px; flex-shrink: 0; }
  .ot-today {
    font-size: 12px; font-weight: 700; cursor: pointer; line-height: 1.55;
    border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
    border-radius: 999px; padding: 2px 12px; letter-spacing: 0; text-transform: none;
  }
  .ot-today:hover { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }

  /* panes scroll UNDER the bar — pad their tops so the first card clears it */
  .orders-workspace.has-topbar .triage-left,
  .orders-workspace.has-topbar .triage-mid,
  .orders-workspace.has-topbar .order-detail-pane { padding-top: 54px; }
  .dl-group[data-today], .rec-group[data-today] { scroll-margin-top: 56px; }

  @media (max-width: 1200px) {
    .order-detail-pane { flex-basis: 340px; max-width: 340px; }
    .ot-detail { width: 340px; }
  }
  /* phones / very narrow: bar goes static, page scrolls, panes stack */
  @media (max-width: 960px) {
    .orders-topbar { position: static; height: auto; flex-wrap: wrap; border-radius: 10px; padding: 8px; margin-bottom: 8px; box-shadow: none; }
    .ot-left, .ot-detail, .ot-mid { width: auto; }
    .orders-body { flex-wrap: wrap; }
    .orders-collection, .orders-workspace.has-topbar .orders-collection { overflow: visible; flex: 1 1 100%; }
    .triage { flex-wrap: wrap; height: auto; }
    .triage-left, .triage-mid { width: 100%; overflow: visible; min-height: 0; }
    .orders-workspace.has-topbar .triage-left,
    .orders-workspace.has-topbar .triage-mid,
    .orders-workspace.has-topbar .order-detail-pane { padding-top: 0; }
    .order-detail-pane { flex: 1 1 100%; max-width: none; overflow: visible; }
  }

  /* three distinct flag toggles in the detail */
  .odetail-flags { display: flex; flex-wrap: wrap; gap: 6px; }
  .flag-form { display: inline-flex; }
  .flag-btn { border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--text-2); border-radius: var(--r-pill); padding: 6px 12px; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
  .flag-btn.urgent { color: var(--danger-fg); border-color: var(--danger-fg); }
  .flag-btn.urgent.on { background: var(--urgent); color: #fff; border-color: var(--urgent); }
  .flag-btn.lock { color: var(--primary); border-color: var(--primary-border); }
  .flag-btn.lock.on { background: var(--primary); color: #fff; border-color: var(--primary); }
  .flag-btn.inform { color: var(--ok-fg); border-color: var(--ok); }
  .flag-btn.inform.on { background: var(--ok); color: #fff; border-color: var(--ok); }
  .flag-btn.paid { color: var(--ok-fg); border-color: var(--ok); }
  .flag-btn.paid.on { background: var(--ok-fg); color: #fff; border-color: var(--ok-fg); }
  .flag-btn.cancel { color: var(--danger-fg); }
  .flag-btn.disabled, .flag-btn:disabled { opacity: 0.45; cursor: not-allowed; }
  .odetail-flag-legend { font-size: 11px; color: var(--muted); line-height: 1.5; }

  /* brand / branch */
  .tri-branch, .stop-branch { color: var(--muted); font-weight: 500; }
  .stop-brand { font-weight: 700; }
  .card-branch { font-size: 11.5px; color: var(--muted); }
}